/* ===== 波普朋克主题 v1 — 暗黑+霓虹 ===== */ :root { --bg: #0a0a1a; --card-bg: #10102a; --input-bg: #16163a; --soft-1: #1a1a3e; --soft-2: #1e1e44; --soft-3: #14143a; --soft-4: #22224a; --hover: #28284e; --text: #e8e6f0; --text-2: #b0aec8; --text-3: #8f8cb6; /* 提亮：小字对比度 ≥4.5:1 */ --muted: #9491c0; /* 2026-09-12 二次提亮：原 #8683b0 在 login-tab 实际底 --soft-2 上仅 4.45:1，未达 AA 4.5:1；本值 --soft-2 上 5.34:1、--hover 上 4.70:1 */ /* 提亮：对 --card-bg 5.21:1、--input-bg 4.87:1、--soft-1 4.67:1 （原 #5a5880 仅 2.78:1，不达 WCAG AA 4.5:1；--muted 承载全站 90+ 处 11~13px 提示） */ --border: #2a2a5a; --border-2: #222250; --scrollbar: #3a3870; --primary: #ff2d7b; /* 按下态：原 #e0256d 对 --on-primary 仅 4.35:1 → 提亮后 4.73:1 （下方两个 :active 渐变引用点让黑字压在这个背景上，属实际使用点） */ --primary-active: #e6307a; --primary-dark: #b01d58; /* 渐变深端专用亮色：--primary-dark 作背景时 --on-primary 只有 2.95:1（不达 4.5:1）， 故渐变端点不复用 --primary-dark，改用本令牌（4.73:1）。 --primary-dark 仍保留给 0 2px 0 立体投影 / 1px 0 描边等「不承载文字」的用途。 */ --primary-grad-end: #e6307a; --success: #00ff88; --success-active: #00cc6e; --success-dark: #009950; --danger: #ff3366; /* 按下态：原 #dd2255 对 --on-primary 仅 4.14:1 → 提亮后 4.73:1（同上，承载黑字） */ --danger-active: #e6307a; --danger-dark: #aa1a44; --on-primary: #0a0a1a; --accent-orange: #ff9500; --shadow: rgba(255, 45, 123, 0.2); --shadow-soft: rgba(0, 0, 0, 0.4); --inset-light: rgba(255, 45, 123, 0.08); --panel-bg: #16163a; --accent-muted: #4a4878; --warm-gradient: linear-gradient(135deg, #1a1040, #10102a); --text-soft: #6a6890; --today-done-bg: #002a18; --today-done-text: #00ff88; --today-done-border: #005533; --today-todo-bg: #2a0a20; --today-todo-text: #ff2d7b; --today-todo-border: #550033; --accent-warm: #00d4ff; --danger-ring: #ff3366; --chip-green-bg: #002a18; --chip-green-text: #00ff88; --chip-orange-bg: #2a1a00; --chip-orange-text: #ff9500; --chip-purple-bg: #1a0a3a; --chip-purple-text: #aa77ff; --chip-cyan-bg: #002a3a; --chip-cyan-text: #00d4ff; --chip-red-bg: #2a0a18; --chip-red-text: #ff5577; --chip-red-muted: #e05577; /* 2026-09-12：原 #cc3355 在 --chip-red-bg(#2a0a18) 上仅 3.61:1，而「易错次」是 11px 小字需 4.5:1；本值 4.97:1 */ --danger-deep: #440018; --stage-orange: #ff9500; /* 复习徽标底：studyPage.js 原硬编码 #b05a1e 对 --on-primary 仅 4.04:1 → 本令牌 6.09:1（同时是 --card-bg 上 8.63:1 的亮橙） */ --badge-review: #d4782e; --btn-danger-strong: #ff1144; /* 波普朋克专属 */ --neon-pink: #ff2d7b; --neon-green: #00ff88; --neon-blue: #00d4ff; --neon-yellow: #ffee00; --neon-purple: #aa55ff; --neon-glow: 0 0 10px var(--primary), 0 0 30px rgba(255,45,123,0.3); --neon-glow-green: 0 0 10px var(--success), 0 0 30px rgba(0,255,136,0.3); --neon-glow-blue: 0 0 10px var(--neon-blue), 0 0 30px rgba(0,212,255,0.3); --neon-border: 1px solid rgba(255,45,123,0.4); --star-size: 24px; /* 中性网格线与聚焦环（原为早期暖米色主题遗留：rgba(190/200,180/170,140/150,…) 土黄） */ --grid-line: rgba(170, 85, 255, 0.05); --focus-ring: rgba(255, 45, 123, 0.22); /* 设计令牌收敛：圆角 / 字号 / 按钮三档（index.html 单文件内已替换引用） */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 15px; --fs-xl: 18px; --fs-2xl: 24px; --fs-3xl: 34px; --btn-py: 12px; --btn-px: 24px; --btn-fs: 15px; --btn-sm-py: 6px; --btn-sm-px: 14px; --btn-sm-fs: 13px; } /* ===== 浅色主题（真实可选主题）===== :root 即「暗黑 + 霓虹」默认主题。夜间模式开关（homePage.js setDarkMode） 在 上切换 .light/.dark——本块是 .light 的实际样式来源， 所以开关不再空转（此前全项目无任何 .dark/.light 规则）。 仅覆盖「表面/文字/边框/阴影」令牌，霓虹强调色保持不动作视觉签名。 */ html.light { --bg: #f2f2f8; --card-bg: #ffffff; --input-bg: #ffffff; --soft-1: #f5f4fb; --soft-2: #ecebf6; --soft-3: #f5f4fb; --soft-4: #e6e5f2; --hover: #e8e7f4; --text: #14132a; --text-2: #3f3d63; --text-3: #55536f; --muted: #5f5d80; --accent-muted: #6d6b92; --text-soft: #6a6890; --border: #d8d6e8; --border-2: #e4e2f0; --scrollbar: #c3c1d8; --panel-bg: #f4f3fa; --shadow: rgba(20, 19, 42, 0.12); --shadow-soft: rgba(20, 19, 42, 0.10); --inset-light: rgba(20, 19, 42, 0.05); --warm-gradient: linear-gradient(135deg, #f4f3fa, #ffffff); --grid-line: rgba(90, 60, 180, 0.05); /* ── 小色块（chip）与今日目标条：底色与文字必须【成对】改写 ────────────── 暗色主题下它们是「近黑底 + 霓虹字」；浅色主题若只改文字不改底，页面上就会 留下近黑的块 —— 更糟的是 chip 内的标签用的是 --muted（浅色下为深灰 #5f5d80）， 压在近黑底上直接看不见。 实测依据：token-sweep 扫出 8 个「暗色专有、浅色未覆盖、被用作背景」的令牌； visual-audit 在浅色主题下报出对比度不足。用户反馈的 「📝 今日还需学习 N 词」横条就是 --today-todo-bg。 下列配对的 WCAG 对比度（已实算，均 ≥4.5:1）： green 4.73 / orange 4.61 / purple 5.42 / cyan 4.99 / red 5.17 todo 5.77 / done 4.73 注意：chip 内数字原先直接用 --success / --accent-orange 等霓虹色，已同步改为 各自的 --chip-*-text（见 src/ui/homePage.js:416-417），否则浅底上的 #00ff88 仅约 1.2:1。 */ --today-done-bg: #e6f9ef; --today-done-text: #0a7d4b; --today-done-border: #a8e6c8; --today-todo-bg: #ffe8f0; --today-todo-text: #b0185c; --today-todo-border: #f5b8ce; --chip-green-bg: #e6f9ef; --chip-green-text: #0a7d4b; --chip-orange-bg: #fff2e0; --chip-orange-text: #a85a00; --chip-purple-bg: #f0e9ff; --chip-purple-text: #6b3fd4; --chip-cyan-bg: #e2f7ff; --chip-cyan-text: #00728f; --chip-red-bg: #ffe8ed; --chip-red-text: #c11a3f; --chip-red-muted: #a8375a; } /* 浅色主题下的「深色玻璃面」改写。 index.html 有 6 处弹窗/卡片/列表项把暗色渐变写死为 rgba(22,22,58…)（非令牌）， 浅色下会变成「深底 + 深字」（text 已切为 #14132a）→ 不可读。 这里用 (0,1,0)/(0,2,0) 的 html.light 选择器覆盖为令牌表面色； 暗色主题完全不受影响（这些声明只在 .light 下命中）。 */ html.light .pop-card, html.light .dd-panel, html.light .wordlist-item, html.light .card-face, html.light .place-card { background: var(--card-bg); } html.light .place-options .place-opt { background: var(--soft-1); } /* ── 浅色主题下「霓虹色当文字用」的对比度修正（2026-09-12）─────────────── 霓虹色系（--primary #ff2d7b / --danger #ff3366）是按深色底设计的；浅色底上 当【文字】用时不足 AA：实测 --primary 压在浅粉底 3.27:1、--danger 压在白底 3.55:1。 为什么不直接覆盖 --primary / --danger：它们同时被 14 处当【背景】用（配 --on-primary 深字，如主按钮），整体改深会连带把按钮变成「深底深字」。 故这里只用定点选择器修正「浅色 + 文字用途」的已知点，深色主题完全不受影响。 */ /* 提示条标题：它的颜色写在 app.js 的内联样式里，选择器压不过内联，故改为令牌（app.js 引用 --notice-title）。 */ :root { --notice-title: #ff3366; } /* 深色：与原 --danger 同值 */ html.light { --notice-title: #c11a3f; } /* 浅色：白底 6.02:1（原 --danger 仅 3.55:1） */ html.light #unlicensedNotice button.btn.btn-sm { color: #b0185c; } /* 6.16:1 on 浅粉底 */ html.light #placeSkipBtn { color: #b0185c; } /* 6.16:1 on 浅粉底 */