/* ═══════════════════════════════════════════ * 主题变量 + 全局基础样式 * 支持暗/亮主题切换，由 控制 * ═══════════════════════════════════════════ */ :root { --sidebar-w: 240px; --header-h: 54px; --radius: 12px; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* 中文字体走系统栈（PingFang SC / Microsoft YaHei / 苹方 等），不下载 Noto Sans SC */ --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Source Han Sans CN', 'Noto Sans CJK SC', sans-serif; --trans: 0.18s cubic-bezier(0.4, 0, 0.2, 1); } /* ── 暗色主题（默认）─────────────── */ :root, [data-theme="dark"] { --bg: #0d0f14; --bg2: #13161d; --bg3: #1a1e28; --border: rgba(255, 255, 255, 0.07); --text: #e2e8f0; --text-muted: #9ca3af; /* 调亮：之前是 #6b7280，太暗看不清 */ --text-soft: #cbd5e1; /* 比 text 略浅，用于次要内容 */ --accent: #6ee7b7; --accent2: #818cf8; --danger: #f87171; --code-bg: #0d1117; --code-inline-bg: rgba(110, 231, 183, 0.10); --code-inline-fg: #6ee7b7; --link: #818cf8; --link-hover: #a5b4fc; --table-stripe: rgba(255, 255, 255, 0.025); --quote-bar: var(--accent2); --shadow: 0 4px 20px rgba(0, 0, 0, 0.45); /* 滚动条专用色（与 --border 解耦）：暗色下 --border 只有 7% 不透明度， * 当滚动条用根本看不见。这里独立加一档约 20% 的灰，hover 加深， * 既明显又不刺眼。全局规则在文件末尾 */ --scrollbar-thumb: rgba(255, 255, 255, 0.20); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.40); } /* ── 亮色主题 ────────────────────── */ [data-theme="light"] { --bg: #ffffff; --bg2: #f6f8fb; --bg3: #ebeff5; --border: rgba(0, 0, 0, 0.08); --text: #1f2937; --text-muted: #6b7280; /* 在亮色下灰色已经够清晰 */ --text-soft: #4b5563; --accent: #059669; --accent2: #6366f1; --danger: #dc2626; --code-bg: #f6f8fa; --code-inline-bg: rgba(5, 150, 105, 0.10); --code-inline-fg: #047857; --link: #4f46e5; --link-hover: #6366f1; --table-stripe: rgba(0, 0, 0, 0.025); --quote-bar: #6366f1; --shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 亮色滚动条同样独立配色，比 --border 的 8% 黑更显眼 */ --scrollbar-thumb: rgba(0, 0, 0, 0.25); --scrollbar-thumb-hover: rgba(0, 0, 0, 0.45); } /* ═══════════════════════════════════════════ * 主题色调色板(2026-05-24 新增, 2026-05-24 增强) * * 数据驱动 ── 用 切换调色板,与 data-theme * (暗/亮背景) 完全独立,5 个调色板 × 2 种背景 = 10 种组合每种都好看。 * * ━━ 调色板覆盖的变量(完整清单)━━━━━━━━━━━━━━━━━━━━━━━━━━━ * v1 只覆 6 个变量(--accent / --accent2 / --code-inline-bg/fg / --link / --link-hover) * -> 结果只是"文字颜色不同",5 个调色板观感太相近。 * v2(本版) 改为同时覆盖**背景气场**: * --bg / --bg2 / --bg3 主背景 + 卡片 + 内嵌面板,微调底色情绪 * --border 边框带一点调色板色温 * --accent / --accent2 强调主副色 * --code-inline-bg / --code-inline-fg 内联代码块色 * --link / --link-hover 链接色 * --quote-bar 引用条 * 这样切换调色板时整个站点都有"温度变化",而不只是几行字变色。 * * ━━ CSS 特异性 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * :root, [data-theme="dark"] -> (0,1,0) 默认深色基础 * [data-theme="light"] -> (0,1,0) 浅色基础(覆盖上一条) * [data-palette="X"] -> (0,1,0) X 调色板在深色下的强调 * [data-theme="light"][data-palette="X"] -> (0,2,0) X 调色板在浅色下的强调 * 最后一条特异性 (0,2,0) 高于前面所有 (0,1,0),所以"浅色 + X 调色板" * 的组合会正确取到自己那行。同特异性下后写的覆盖先写的,顺序也对。 * * ━━ 调色板列表 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * default 小沫(默认) — 薄荷绿 + 紫罗兰 (品牌色) — 中性冷调 * early-summer 初夏 — 青柠 + 天蓝 — 清爽偏冷 * late-summer 夏末 — 蜜橙 + 玫瑰 — 温暖怀旧 * autumn 深秋 — 枫红 + 琥珀 — 暖意深沉 * snow 暮雪 — 冰蓝 + 紫晶 — 极冷优雅 * * data-palette="default" 不写规则 -> 没有匹配 -> 落到 :root / [data-theme=light] * 的默认值,自然就是品牌色 + 中性背景。这样 default 不需要单独维护。 * * iframe 同步:theme.js 的 _propagateAppearanceToIframe 同时设 data-theme + data-palette, * 但动态页内部 CSS 还需要 :root[data-palette="X"] 块才能响应—— * 老的 3 个动态页(mind/voice/detect)需要跑 migrate_dynamic_pages_palette.py * 才会跟着主站变色。未跑则动态页内部保持品牌色,主站变色——视觉上不一致但不破坏。 * ═══════════════════════════════════════════ */ /* ── 初夏(early-summer) ── 青柠 + 天蓝 ── 清爽偏冷 ── */ [data-palette="early-summer"] { /* 背景:微微泛绿青的深色底,像清晨竹林 */ --bg: #0c1311; --bg2: #141d18; --bg3: #182521; --border: rgba(163, 230, 53, 0.10); /* 强调 */ --accent: #a3e635; /* lime-400 */ --accent2: #38bdf8; /* sky-400 */ --code-inline-bg: rgba(163, 230, 53, 0.12); --code-inline-fg: #a3e635; --link: #38bdf8; --link-hover: #7dd3fc; /* sky-300 */ --quote-bar: #38bdf8; } [data-theme="light"][data-palette="early-summer"] { /* 薄荷奶霜调,纸面带一点点新绿 */ --bg: #f6fdf9; --bg2: #ecfbf2; --bg3: #d8f1e4; --border: rgba(101, 163, 13, 0.18); --accent: #65a30d; /* lime-600 */ --accent2: #0284c7; /* sky-600 */ --code-inline-bg: rgba(101, 163, 13, 0.10); --code-inline-fg: #4d7c0f; /* lime-700 */ --link: #0284c7; --link-hover: #0369a1; /* sky-700 */ --quote-bar: #0284c7; } /* ── 夏末(late-summer) ── 蜜橙 + 玫瑰 ── 温暖怀旧 ── */ [data-palette="late-summer"] { /* 背景:暖意微浮的深褐底,像傍晚最后的落日 */ --bg: #16110d; --bg2: #201912; --bg3: #2b211a; --border: rgba(251, 191, 36, 0.10); --accent: #fbbf24; /* amber-400 */ --accent2: #fb7185; /* rose-400 */ --code-inline-bg: rgba(251, 191, 36, 0.12); --code-inline-fg: #fbbf24; --link: #fb7185; --link-hover: #fda4af; /* rose-300 */ --quote-bar: #fb7185; } [data-theme="light"][data-palette="late-summer"] { /* 暖意纸面,浅蜜色调 */ --bg: #fffaf3; --bg2: #fef3e2; --bg3: #fbe1bc; --border: rgba(217, 119, 6, 0.18); --accent: #d97706; /* amber-600 */ --accent2: #e11d48; /* rose-600 */ --code-inline-bg: rgba(217, 119, 6, 0.10); --code-inline-fg: #b45309; /* amber-700 */ --link: #e11d48; --link-hover: #be123c; /* rose-700 */ --quote-bar: #e11d48; } /* ── 深秋(autumn) ── 枫红 + 琥珀 ── 暖意深沉 ── */ [data-palette="autumn"] { /* 背景:更深更红的暖底,像炉火边的木屋 */ --bg: #1a130b; --bg2: #261b11; --bg3: #322516; --border: rgba(251, 146, 60, 0.10); --accent: #fb923c; /* orange-400 */ --accent2: #f59e0b; /* amber-500 */ --code-inline-bg: rgba(251, 146, 60, 0.12); --code-inline-fg: #fb923c; --link: #f59e0b; --link-hover: #fbbf24; /* amber-400 */ --quote-bar: #f59e0b; } [data-theme="light"][data-palette="autumn"] { /* 杏色 / 奶油调,纸面更浓的暖意 */ --bg: #fff7ed; --bg2: #fdecd5; --bg3: #f5cd9a; --border: rgba(234, 88, 12, 0.20); --accent: #ea580c; /* orange-600 */ --accent2: #b45309; /* amber-700 */ --code-inline-bg: rgba(234, 88, 12, 0.10); --code-inline-fg: #c2410c; /* orange-700 */ --link: #b45309; --link-hover: #92400e; /* amber-800 */ --quote-bar: #b45309; } /* ── 暮雪(snow) ── 冰蓝 + 紫晶 ── 极冷优雅 ── */ [data-palette="snow"] { /* 背景:幽深的冰蓝夜空 */ --bg: #0c0f1a; --bg2: #141928; --bg3: #1c2336; --border: rgba(125, 211, 252, 0.10); --accent: #7dd3fc; /* sky-300 */ --accent2: #c4b5fd; /* violet-300 */ --code-inline-bg: rgba(125, 211, 252, 0.12); --code-inline-fg: #7dd3fc; --link: #c4b5fd; --link-hover: #ddd6fe; /* violet-200 */ --quote-bar: #c4b5fd; } [data-theme="light"][data-palette="snow"] { /* 雪纸调,泛蓝的清晨光 */ --bg: #f6faff; --bg2: #e7f0fb; --bg3: #d2def3; --border: rgba(2, 132, 199, 0.18); --accent: #0284c7; /* sky-600 */ --accent2: #7c3aed; /* violet-600 */ --code-inline-bg: rgba(2, 132, 199, 0.10); --code-inline-fg: #0369a1; /* sky-700 */ --link: #7c3aed; --link-hover: #6d28d9; /* violet-700 */ --quote-bar: #7c3aed; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: var(--sans); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; overflow: hidden; transition: background-color 0.25s, color 0.25s; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════ * 全局滚动条样式（2026-05-21 加，原因详见 §8.18） * * 痛点：之前各处用 `scrollbar-color: var(--border) transparent`， * 而 --border 在暗色下只有 7% 不透明度的白色 —— 当 1px 描边可以 * （恰好够分割视觉块），但拿来当滚动条 thumb 根本看不见，桌面端 * 鼠标用户尤其抓狂。 * * 方案：独立的 --scrollbar-thumb 系列变量（暗色 20%、亮色 25% * 不透明度），hover 时再加深一档。Firefox + webkit 都覆盖。 * * 特异性约定：全局规则用 `*` 选择器（特异性 0,0,0），任何具体 * 类选择器都会覆盖它。因此： * - 想"显眼版滚动条"：什么都不写（默认就是） * - 想"完全隐藏"：在自己类上写 `::-webkit-scrollbar { display:none }` * + `scrollbar-width: none`（appsquare-tabs / quick-modes 已用这个套路） * - 想"细一点 / 别的颜色"：在自己类上覆盖即可 * ═══════════════════════════════════════════ */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 5px; /* 2px 透明描边 + background-clip:padding-box ≈ 视觉上 6px 的圆角条 * 既明显又留呼吸感，GitHub / VSCode 用的就是这个组合 */ border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; } *::-webkit-scrollbar-corner { background: transparent; }