/* ============================================================ theme-b.css — 终端·eval 风（B） 挂载方式： 生效条件： 规则：所有选择器均以 html[data-theme="b"] 前缀开头， 仅 @keyframes 名称为全局（b-cursor-blink，独占命名，无泄漏）。 ============================================================ */ /* ---------- 1. 变量重定义（大部分组件靠这里换肤） ---------- */ html[data-theme="b"]{ --bg:#0C0F14; --panel:#10141B; --ink:#E6EDF3; /* 标题/强文字 */ --ink-2:#C8D2DC; /* 正文 */ --meta:#8B98A5; /* 辅助信息专用 */ --indigo:#FFB454; /* 主题强调色 = 琥珀 */ --indigo-deep:#1A212B; /* credo 大块底 / 按下态深底 */ --indigo-wash:rgba(255,180,84,.12); /* 琥珀淡底 */ --line:#232B36; --serif:ui-monospace,"SF Mono","Menlo",monospace; --sans:ui-monospace,"SF Mono","Menlo",monospace; --mono:ui-monospace,"SF Mono","Menlo",monospace; } /* 选中反白：基础皮是 强调色底+白字，琥珀底必须换深字 */ html[data-theme="b"] ::selection{background:#FFB454;color:#0C0F14} /* 焦点可见：深底下琥珀轮廓（基础规则走 var(--indigo)，此处显式加固） */ html[data-theme="b"] :focus-visible{outline:2px solid #FFB454;outline-offset:3px} /* ---------- 2. 主题专属挂载点 ---------- */ /* .only-b：终端提示行（hero h1 上方），本主题下显示 */ html[data-theme="b"] .only-b{ display:block; font-family:var(--mono); font-size:14px; color:#8B98A5; margin-bottom:10px; } html[data-theme="b"] .only-b .p{color:#5CCFE6} /* .only-a：本主题下保持隐藏（防御性显式声明） */ html[data-theme="b"] .only-a{display:none} /* ---------- 3. nav：深底 + 等宽小字链接 ---------- */ html[data-theme="b"] .nav{background:rgba(12,15,20,.92)} html[data-theme="b"] .nav-links a{font-size:12.5px;letter-spacing:.04em} /* ---------- 4. hero ---------- */ /* decode 落定后的方块光标（本主题唯一新增动效） */ html[data-theme="b"] .decode::after{ content:""; display:inline-block; width:.55em;height:1.1em; background:var(--indigo); vertical-align:-.12em; margin-left:.18em; animation:b-cursor-blink 1s steps(1) infinite; } @keyframes b-cursor-blink{50%{opacity:0}} @media (prefers-reduced-motion:reduce){ html[data-theme="b"] .decode::after{animation:none} } /* decode-label 的圆点用成功绿：SIGNAL OK 的观感 */ html[data-theme="b"] .decode-label .dot{background:#7FD962} /* 身份切换按钮 / hero 药丸 → 深卡方角，琥珀 hover（颜色已由变量接管） */ html[data-theme="b"] .identity-btn{border-radius:4px} html[data-theme="b"] .hero-nav a{border-radius:6px} /* ---------- 5. 卡片=日志盒：统一收圆角（颜色走 --panel/--line） ---------- */ html[data-theme="b"] .stage, html[data-theme="b"] .q-card, html[data-theme="b"] .pain-card, html[data-theme="b"] .ev, html[data-theme="b"] .hw-card, html[data-theme="b"] .credo{border-radius:8px} html[data-theme="b"] .deliver, html[data-theme="b"] .num-card{border-radius:6px} /* q-no：普通问题卡编号青色，[OPEN] 标签观感（只换色，不加 content） */ html[data-theme="b"] .q-card .q-no{color:#5CCFE6} /* pain-card / hw-card 的 .q-no 走 var(--indigo)=琥珀，无需覆盖 */ /* pain-card：琥珀淡底上，.hand 基础皮用 --indigo-deep（深色下不可见），换琥珀 */ html[data-theme="b"] .pain-card .hand{color:#FFB454} /* ---------- 6. credo：深面板 + 左侧琥珀细节 ---------- */ html[data-theme="b"] .credo{ color:#E6EDF3; border:1px solid var(--line); border-left:3px solid #FFB454; } html[data-theme="b"] .credo em{border-bottom-color:rgba(255,180,84,.55)} /* ---------- 7. num-card：大数字 + 全大写小标 ---------- */ html[data-theme="b"] .num-card .n{color:#E6EDF3} html[data-theme="b"] .num-card .l{text-transform:uppercase;letter-spacing:.04em} /* ---------- 8. plus-btn：琥珀描边透明底 → hover/选中 琥珀底深字 ---------- */ html[data-theme="b"] .plus-btn{ background:transparent; border:1px solid #FFB454; color:#FFB454; border-radius:4px; } html[data-theme="b"] .plus-btn .cnt{color:rgba(255,180,84,.75)} html[data-theme="b"] .plus-btn:hover{ background:#FFB454; border-color:#FFB454; color:#0C0F14; } html[data-theme="b"] .plus-btn:hover .cnt{color:rgba(12,15,20,.7)} html[data-theme="b"] .plus-btn[aria-pressed="true"]{ background:#FFB454; border-color:#FFB454; color:#0C0F14; } html[data-theme="b"] .plus-btn[aria-pressed="true"] .cnt{color:rgba(12,15,20,.7)} /* 按下瞬间反馈：深底 */ html[data-theme="b"] .plus-btn:active{background:var(--indigo-deep);color:#FFB454} /* ---------- 9. read-more：胶囊 → 终端按钮（方角 + 琥珀描边） ---------- */ html[data-theme="b"] .read-more a{ border-radius:4px; border-color:#FFB454; color:#E6EDF3; } html[data-theme="b"] .read-more a:hover{ background:#FFB454; color:#0C0F14; } html[data-theme="b"] .read-more a:hover b{color:#0C0F14} /* ---------- 10. qr-card：保持白底，二维码必须可扫 ---------- */ html[data-theme="b"] .qr-card{background:#FFFFFF;border-color:#232B36} /* ---------- 11. 窄屏：等宽字体更宽，整体降一档字号防溢出 ---------- */ @media (max-width:760px){ html[data-theme="b"] body{font-size:15px} html[data-theme="b"] .only-b{font-size:13px} html[data-theme="b"] .hw-close .mono-note{font-size:11.5px;letter-spacing:.04em} }