/* AGENTBOX — 深蓝黑机房控制台，琥珀磷光作为工作态强调色； * 浅色主题是同一套配方换纸：牛皮纸底 + 压深的琥珀墨。 * base：设计令牌、基础元素、跨页面通用组件（按钮/状态灯/转圈/气泡/字标）。 * 断点约定：全站移动端断点统一为 max-width: 760px，各文件就近写自己的窄屏规则。 * * 主题切换：js/theme.js 在 上写 data-theme-mode="system|light|dark" * （用户选择）与 data-theme="dark|light"（实际生效；index.html 头部有一段 * 内联脚本先行落属性，避免首屏闪白）。全站颜色一律走下面的令牌， * 任何新样式都不要再写死色值，否则浅色主题下会漏色。 */ :root { /* ---- 表面与文字 ---- */ --bg: #12151c; --panel: #1a1f29; /* 卡片 / 侧栏 / 弹窗等「一层」表面 */ --panel-2: #222834; /* 悬停填充、次级按钮、用户气泡等「抬起」填充 */ --line: #2e3646; --line-soft: #1d2330; /* 列表行分隔线，比 --line 更收敛 */ --text: #d6dae3; --text-hi: #fff; /* 悬停时的最亮文字 */ --muted: #8a93a5; --scroll-thumb: #566174; --scroll-thumb-hover: #7b879b; --scroll-thumb-active: var(--amber); /* ---- 琥珀强调：墨（文字/描边）与填充（实心块）分开， * 浅色主题下墨要压深才有对比度，填充仍需保持亮以承载深色文字 ---- */ --amber: #e8a33d; --amber-dim: #7a5c28; /* 强调弱描边 */ --accent: #e8a33d; /* 主按钮 / 发送钮 / 字标光标块的底色 */ --accent-hi: #f0b45a; --on-accent: #17130a; /* 压在 --accent 上的文字 */ /* ---- 语义色 ---- */ --green: #57c78a; --green-line: #2c4636; --red: #e06c5f; --red-hi: #e98376; --red-line: #57352f; --on-red: #fff; /* ---- 代码片段（行内 code / 代码块 / 文件编辑器） ---- */ --code-bg: #0d1016; --code-head: #151a24; --code-line: #242b3a; --code-text: #e5c07b; --syntax-keyword: #c5a0e5; --syntax-function: #7ebee6; /* ---- 终端：两个主题下都保持深色。 * xterm 里跑的是 agent TUI，它的 ANSI 配色按深底设计，翻成浅底会有大片 * 不可读的亮色文字，所以终端当成一块「设备屏幕」，不跟随主题。 ---- */ --term-bg: #0d1016; --term-fg: #d6dae3; --term-cursor: #e8a33d; --term-sel: #2e3646; /* ---- 遮罩与投影 ---- */ --scrim: rgba(6, 8, 12, 0.6); /* 抽屉遮罩 */ --backdrop: rgba(6, 8, 12, 0.7); /* 弹窗背板 */ --backdrop-strong: rgba(6, 8, 12, 0.82); /* 灯箱背板 */ --overlay-chip: rgba(6, 8, 12, 0.72); /* 压在图片上的角标/关闭钮，始终深色 */ --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 32px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.55); --checker-a: #161a22; /* 图片预览的透明棋盘格 */ --checker-b: #12151c; --claude: #d97757; /* Claude 官方陶土橙（simple-icons 品牌色） */ --openai: #10a37f; /* ChatGPT 官方青绿 */ --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; color-scheme: dark; /* 让原生滚动条 / 表单控件跟着主题走 */ } /* 浅色主题：只覆盖会变的令牌，品牌色、字体、终端配色继承上面 */ :root[data-theme="light"] { --bg: #f5f2ea; --panel: #fffdf8; --panel-2: #eae5d8; --line: #dbd4c4; --line-soft: #e8e2d5; /* 中性色带一点暖：纸底配冷灰会发紫，和琥珀强调打架 */ --text: #2b2822; --text-hi: #000; --muted: #6f6a5d; --scroll-thumb: #b7ae9d; --scroll-thumb-hover: #8c8270; --amber: #96620f; /* 压深到能在纸底上当正文强调色 */ --amber-dim: #d3b681; --accent: #dd9226; --accent-hi: #c97f14; --green: #2f7d55; --green-line: #b3d0bd; --red: #b8412f; --red-hi: #a63625; --red-line: #dfb0a7; --code-bg: #f2efe4; --code-head: #e9e3d5; --code-line: #dcd5c5; --code-text: #8a5316; --syntax-keyword: #80529a; --syntax-function: #286b94; --scrim: rgba(36, 32, 24, 0.3); --backdrop: rgba(36, 32, 24, 0.32); --backdrop-strong: rgba(28, 24, 16, 0.7); --shadow-sm: 0 4px 14px rgba(45, 38, 24, 0.08); --shadow-md: 0 8px 26px rgba(45, 38, 24, 0.11); --shadow-lg: 0 16px 40px rgba(45, 38, 24, 0.16); --checker-a: #e8e4d8; --checker-b: #f5f2ea; color-scheme: light; } * { box-sizing: border-box; } /* 共用原生滚动交互，仅定制外观；透明轨道避免圆角容器内出现系统白槽。 * Firefox 使用标准属性；Chromium / Safari 使用伪元素以控制圆角与悬停。 * 支持两套 API 的浏览器必须恢复 auto，否则标准属性会覆盖伪元素。 */ * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } @supports selector(::-webkit-scrollbar) { * { scrollbar-width: auto; scrollbar-color: auto; } ::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; } ::-webkit-scrollbar-track { background: transparent; margin: 3px; } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); background-clip: padding-box; border: 2px solid transparent; border-radius: 999px; min-height: 28px; min-width: 28px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); } ::-webkit-scrollbar-thumb:active { background-color: var(--scroll-thumb-active); } ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } } /* 高对比模式交还系统配色。 */ @media (forced-colors: active) { * { scrollbar-width: auto; scrollbar-color: auto; } ::-webkit-scrollbar-thumb { background-color: ButtonText; } ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: Highlight; } } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.6; } .hidden { display: none !important; } .mono { font-family: var(--mono); } button { font: inherit; cursor: pointer; } input, textarea, select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; } input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } /* ---- 字标：logo 主形 + AGENTBOX + 呼吸光标 ---- */ .wordmark { display: flex; align-items: center; font-family: var(--mono); font-size: 22px; letter-spacing: 0.18em; color: var(--text); } .wordmark-sm { font-size: 15px; } .wordmark .mark { flex: none; width: 23px; height: 23px; margin-right: 9px; } .wordmark-sm .mark { width: 17px; height: 17px; margin-right: 7px; } /* 空色块与字标共用文字基线；cap 按当前字体的大写字母高度取值， * 避免按行框居中时伸到字母下方。末尾 letter-spacing 已提供间距。 */ .wordmark .cursor { display: inline-block; vertical-align: baseline; width: 0.55em; height: 0.75em; height: 1cap; background: var(--accent); color: transparent; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ---- 吉祥物「盒仔」：开箱纸箱里的小机器人（模板在 index.html，两处挂载） ---- * 动画三件套：整体浮动 / 眨眼 / 天线呼吸光，reduced-motion 下全部静止。 */ .mascot svg { display: block; width: 100%; height: auto; } .boxi-bob { animation: boxi-bob 3.4s ease-in-out infinite; } .boxi-eye { transform-box: fill-box; transform-origin: center; animation: boxi-blink 4.6s infinite; } .boxi-glow { animation: boxi-glow 2.6s ease-in-out infinite; } @keyframes boxi-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5px); } } @keyframes boxi-blink { 0%, 90.5%, 94.5%, 100% { transform: scaleY(1); } 92.5% { transform: scaleY(0.12); } } @keyframes boxi-glow { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.45; } } /* ---- 按钮 ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 13px; font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap; text-decoration: none; vertical-align: middle; user-select: none; touch-action: manipulation; transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 100ms ease; } .btn:hover:not(:disabled) { background: var(--panel-2); border-color: color-mix(in srgb, var(--muted) 60%, var(--line)); } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:focus-visible { outline-offset: 3px; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } .btn-primary:hover:not(:disabled) { background: var(--accent-hi); border-color: var(--accent-hi); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 16%, transparent); } .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn-ghost:hover:not(:disabled) { background: var(--panel-2); border-color: transparent; color: var(--text); } .btn-danger { background: color-mix(in srgb, var(--red) 6%, var(--panel)); color: var(--red); border-color: var(--red-line); } .btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--red) 12%, var(--panel)); border-color: var(--red); color: var(--red); } .btn-ghost.btn-danger { background: transparent; border-color: transparent; } .btn-ghost.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--red) 10%, transparent); border-color: transparent; } .btn-sm { min-height: 32px; padding: 5px 10px; font-size: 12.5px; } .btn.action-icon { min-width: 32px; padding-inline: 7px; } /* 图标按钮：图标随文字取色（danger 变体自动跟着变红），大小固定不被挤压 */ .btn-ico { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn-ico svg { flex: none; } /* Explicit data-icon controls also include navigation, segmented controls and links. */ [data-icon] { display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .ui-icon { display: block; flex: none; pointer-events: none; } .btn > svg { flex: none; width: 16px; height: 16px; pointer-events: none; } .btn-block { width: 100%; } .btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } /* 按钮加载态：转圈 + 锁定点击 */ .btn.loading, .btn.loading:disabled { display: inline-flex; align-items: center; justify-content: center; gap: 7px; opacity: 0.85; cursor: progress; pointer-events: none; } .btn.loading .spin { width: 11px; height: 11px; } .btn-primary .spin { border-color: color-mix(in srgb, var(--on-accent) 35%, transparent); border-top-color: var(--on-accent); } @media (pointer: coarse) { .btn { min-height: 44px; } .dlg-x { min-width: 44px; min-height: 44px; } .scope-btn, .thread-new { min-height: 40px; } } /* ---- Agent 品牌标识：官方 logo + 品牌色，跨侧栏/工作台/弹窗/设置复用 ---- * .agent-claude / .agent-codex 设定 --brand，图标、文字、头像瓦片各自取用。 */ .agent-claude { --brand: var(--claude); } .agent-codex { --brand: var(--openai); } .agent-ico { display: block; flex: none; color: var(--brand); } .agent-text { color: var(--brand); } .agent-avatar { position: relative; width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: color-mix(in srgb, var(--brand) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent); } /* 头像右下角状态灯：外圈颜色须与所在底色一致，默认页面底，卡片内在 shell.css 覆盖 */ .agent-avatar .led { position: absolute; right: -4px; bottom: -4px; width: 8px; height: 8px; border: 2px solid var(--bg); } /* ---- 状态灯 ---- */ .led { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: inline-block; flex: none; } .led.on { background: var(--green); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 20%, transparent); } } /* ---- 转圈 ---- */ .spin { display: inline-block; vertical-align: -2px; width: 12px; height: 12px; flex: none; border: 2px solid var(--amber-dim); border-top-color: var(--amber); border-radius: 50%; animation: rot 0.9s linear infinite; } @keyframes rot { to { transform: rotate(360deg); } } /* ---- 区域加载态：加载动画大、居中在内容展示区，提示语小字排在下方。 * 历史对话 / 文件列表 / 终端连接 / 文件预览共用。 ---- */ .loading-block { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 36px 20px; color: var(--muted); font-family: var(--mono); font-size: 12px; } .loading-block .spin { width: 30px; height: 30px; border-width: 3px; } /* ---- 操作反馈气泡 ---- */ /* 全局离线横幅：连续 ping 失败后常驻顶部，一眼看出「屏幕上的数据已不可信」 */ .offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 120; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 14px; background: var(--panel); border-bottom: 1px solid var(--red-line); color: var(--red); font-size: 12.5px; box-shadow: var(--shadow-md); } .offline-banner.hidden { display: none; } /* ---- 悬浮提示 ---- */ /* 全站单例气泡，js/tip.js 负责定位与显隐；页面里只写 data-tip="文本"。 * [popover] 的 UA 样式会强塞 inset/margin/padding/border/overflow，这里逐条盖掉—— * 尤其 overflow: auto 会把箭头裁没。 */ .tip { position: fixed; inset: auto; z-index: 200; display: none; margin: 0; width: max-content; max-width: min(300px, 78vw); padding: 6px 10px; background: var(--panel); border: 1px solid var(--amber-dim); border-radius: 7px; color: var(--text); font-size: 12px; line-height: 1.5; white-space: pre-line; /* 让文案里的 \n 生效，与原生 title 的行为一致 */ overflow: visible; box-shadow: var(--shadow-md); pointer-events: none; /* 永远不吃鼠标，免得气泡自己遮住锚点来回抖 */ opacity: 0; transform: translateY(2px); transition: opacity 0.12s ease, transform 0.12s ease; } .tip.show { display: block; } .tip.in { opacity: 1; transform: none; } /* 箭头：旋转 45° 的小方块，画在气泡边框之上，底色正好把那截边框盖住。 * --tip-ax / --tip-ay 由 tip.js 写，跟着锚点中心走，气泡被夹到视口边缘也指得对。 */ .tip::after { content: ""; position: absolute; width: 8px; height: 8px; background: var(--panel); border: 1px solid var(--amber-dim); transform: rotate(45deg); } .tip[data-side="top"]::after { bottom: -4px; left: var(--tip-ax); margin-left: -4px; border-top: 0; border-left: 0; } .tip[data-side="bottom"]::after { top: -4px; left: var(--tip-ax); margin-left: -4px; border-bottom: 0; border-right: 0; } .tip[data-side="left"]::after { right: -4px; top: var(--tip-ay); margin-top: -4px; border-bottom: 0; border-left: 0; } .tip[data-side="right"]::after { left: -4px; top: var(--tip-ay); margin-top: -4px; border-top: 0; border-right: 0; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active:not(:disabled) { transform: none; } :root .scope-btn, :root .set-nav button { transition: none; } .wordmark .cursor { animation: none; } .boxi-bob, .boxi-eye, .boxi-glow { animation: none; } .led.on { animation: none; } .spin { animation: none; } .tip { transition: none; } }