/* ========================================================= * 多风格主题扩展 themes.css * 用法：务必在「原版 css」之后引入本文件 * 切换：在 标签上设置 data-theme 属性 * 例如 * ========================================================= */ /* ---------- 1. 语义化变量补充 ---------- * 把原版里写死的颜色（词根三色、对错反馈、导航栏背景） * 抽成变量，这样它们也能随主题切换。 */ :root { /* 导航栏背景（原版写死为白色，这里变量化） */ --color-nav-bg: rgba(255, 255, 255, 0.98); /* 词根拆解三色：前缀 / 词根 / 后缀 */ --color-prefix: #EF4444; --color-prefix-bg: rgba(239, 68, 68, 0.10); --color-prefix-border: rgba(239, 68, 68, 0.20); --color-root: #3B82F6; --color-root-bg: rgba(59, 130, 246, 0.10); --color-root-border: rgba(59, 130, 246, 0.30); --color-suffix: #F59E0B; --color-suffix-bg: rgba(245, 158, 11, 0.10); --color-suffix-border: rgba(245, 158, 11, 0.20); /* 反馈：正确 / 错误 */ --color-success-bg: rgba(251, 191, 36, 0.10); --color-success-text: var(--color-text); --color-success-border: var(--color-accent); --color-error-bg: #FEE2E2; --color-error-text: #DC2626; --color-error-border: #EF4444; } /* ---------- 2. 用变量重写原本写死颜色的规则 ---------- */ .nav { background: var(--color-nav-bg); } .demo-part.prefix { background: var(--color-prefix-bg); color: var(--color-prefix); border: 1px solid var(--color-prefix-border); } .demo-part.root { background: var(--color-root-bg); color: var(--color-root); border: 2px solid var(--color-root-border); } .demo-part.suffix { background: var(--color-suffix-bg); color: var(--color-suffix); border: 1px solid var(--color-suffix-border); } .option.correct { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text); } .option.wrong { background: var(--color-error-bg); border-color: var(--color-error-border); color: var(--color-error-text); } .feedback.success { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); } .feedback.error { background: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-error-border); } /* ---------- 2.5 深色主题适配：测验选项 / 输入框 ---------- * 修复深色风格下「白底 + 浅字」看不清的问题： * 让选项和输入控件统一跟随主题配色。 */ .option { background-color: var(--color-bg-secondary); color: var(--color-text); border-color: var(--color-border); } .option:hover:not(:disabled) { background-color: var(--color-bg-hover); border-color: var(--color-text); } input, select, textarea { background-color: var(--color-bg-secondary); color: var(--color-text); border-color: var(--color-border); } input::placeholder, textarea::placeholder { color: var(--color-text-tertiary); } /* ---------- 2.6 选中态 / 主按钮文字对比修复 ---------- * 部分主题强调色偏深或偏浅，单独指定其选中项与主按钮文字色，确保清晰。 */ [data-theme="ink"] .option.correct, [data-theme="ink"] .btn-primary, [data-theme="forest"] .option.correct, [data-theme="forest"] .btn-primary, [data-theme="coffee"] .option.correct, [data-theme="coffee"] .btn-primary, [data-theme="lavender"] .option.correct, [data-theme="lavender"] .btn-primary { color: #FFFFFF; } [data-theme="dark"] .option.correct, [data-theme="dark"] .btn-primary, [data-theme="carbon"] .option.correct, [data-theme="carbon"] .btn-primary, [data-theme="nord"] .option.correct, [data-theme="nord"] .btn-primary, [data-theme="ocean"] .option.correct, [data-theme="ocean"] .btn-primary { color: #111827; } /* ---------- 2.7 强制让主要表面跟随主题（兑底，!important）---------- * 部分页面/原版样式把卡片、演示区、选项、输入框“写死”成了白底， * 导致深色主题下白底 + 浅字看不清。这里用 !important 强制覆盖。 */ .card, .card-simple, .stat-card { background-color: var(--color-bg) !important; } .demo { background-color: var(--color-bg-hover) !important; } .option { background-color: var(--color-bg-secondary) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } .option:hover:not(:disabled) { background-color: var(--color-bg-hover) !important; border-color: var(--color-text) !important; } .option.correct { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; } .option.wrong { background-color: var(--color-error-bg) !important; border-color: var(--color-error-border) !important; color: var(--color-error-text) !important; } input, select, textarea { background-color: var(--color-bg-secondary) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } input::placeholder, textarea::placeholder { color: var(--color-text-tertiary) !important; } /* ---------- 2.8 兑底：覆盖 HTML 内联 style 写死的白底 ---------- * 有些卡片直接在 HTML 里写了 style="background: white" / #fff， * 它们没有 class，类选择器命中不了。这里用属性选择器 * 直接匹配内联样式，再用 !important 压过内联白底。 * （stylesheet 的 !important 优先级高于不带 important 的内联样式） */ [style*="background: white" i], [style*="background:white" i], [style*="background: #fff" i], [style*="background:#fff" i], [style*="background-color: white" i], [style*="background-color:white" i], [style*="background-color: #fff" i], [style*="background-color:#fff" i] { background-color: var(--color-bg) !important; color: var(--color-text) !important; } /* 内联白底卡片里的次要文字也跟随主题 */ [style*="background: white" i] *, [style*="background:white" i] *, [style*="background: #fff" i] *, [style*="background:#fff" i] * { border-color: var(--color-border); } /* ---------- 3. 切换时的平滑过渡 ---------- */ body, .nav, .card, .btn, .demo, .option, .stat-card, .feedback, .demo-part { transition: background-color var(--transition), color var(--transition), border-color var(--transition); } /* ========================================================= * 主题 1 · 暗夜 dark * ========================================================= */ [data-theme="dark"] { --color-text: #E2E8F0; --color-text-secondary: #94A3B8; --color-text-tertiary: #64748B; --color-accent: #FBBF24; --color-accent-dark: #F59E0B; --color-border: #1E293B; --color-bg: #0F172A; --color-bg-secondary: #1E293B; --color-bg-hover: #1E293B; --color-nav-bg: rgba(15, 23, 42, 0.95); --color-prefix: #F87171; --color-prefix-bg: rgba(248, 113, 113, 0.15); --color-prefix-border: rgba(248, 113, 113, 0.30); --color-root: #60A5FA; --color-root-bg: rgba(96, 165, 250, 0.15); --color-root-border: rgba(96, 165, 250, 0.35); --color-suffix: #FBBF24; --color-suffix-bg: rgba(251, 191, 36, 0.15); --color-suffix-border: rgba(251, 191, 36, 0.30); --color-success-bg: rgba(251, 191, 36, 0.12); --color-success-text: #FDE68A; --color-success-border: #FBBF24; --color-error-bg: rgba(239, 68, 68, 0.15); --color-error-text: #FCA5A5; --color-error-border: #EF4444; } /* ========================================================= * 主题 2 · 水墨国风 ink * ========================================================= */ [data-theme="ink"] { --color-text: #1C1917; /* 墨 */ --color-text-secondary: #57534E; --color-text-tertiary: #A8A29E; --color-accent: #9B2D20; /* 朱砂红 */ --color-accent-dark: #7A1F16; --color-border: #D6CFC0; --color-bg: #F5F1E8; /* 宣纸 */ --color-bg-secondary: #EEE8DA; --color-bg-hover: #EAE3D2; --color-nav-bg: rgba(245, 241, 232, 0.95); --color-prefix: #9B2D20; /* 朱砂 */ --color-prefix-bg: rgba(155, 45, 32, 0.10); --color-prefix-border: rgba(155, 45, 32, 0.25); --color-root: #2F4858; /* 靛青 */ --color-root-bg: rgba(47, 72, 88, 0.10); --color-root-border: rgba(47, 72, 88, 0.30); --color-suffix: #8A6D3B; /* 赭黄 */ --color-suffix-bg: rgba(138, 109, 59, 0.10); --color-suffix-border: rgba(138, 109, 59, 0.25); --color-success-bg: rgba(155, 45, 32, 0.08); --color-success-text: #7A1F16; --color-success-border: #9B2D20; --color-error-bg: rgba(120, 30, 22, 0.12); --color-error-text: #7A1F16; --color-error-border: #9B2D20; } /* ========================================================= * 主题 3 · 赛博霓虹 cyber * ========================================================= */ [data-theme="cyber"] { --color-text: #E0F7FF; --color-text-secondary: #7DD3FC; --color-text-tertiary: #38BDF8; --color-accent: #FF2EC4; /* 霓虹品红 */ --color-accent-dark: #FF00AA; --color-border: #1B2A4A; --color-bg: #070A18; --color-bg-secondary: #0D1330; --color-bg-hover: #111A3D; --color-nav-bg: rgba(7, 10, 24, 0.90); --color-prefix: #FF2EC4; --color-prefix-bg: rgba(255, 46, 196, 0.12); --color-prefix-border: rgba(255, 46, 196, 0.40); --color-root: #00E5FF; --color-root-bg: rgba(0, 229, 255, 0.12); --color-root-border: rgba(0, 229, 255, 0.40); --color-suffix: #B5FF3D; --color-suffix-bg: rgba(181, 255, 61, 0.12); --color-suffix-border: rgba(181, 255, 61, 0.40); --color-success-bg: rgba(181, 255, 61, 0.12); --color-success-text: #B5FF3D; --color-success-border: #B5FF3D; --color-error-bg: rgba(255, 46, 196, 0.15); --color-error-text: #FF6FD8; --color-error-border: #FF2EC4; } /* ========================================================= * 主题 4 · 清新薄荷 mint * ========================================================= */ [data-theme="mint"] { --color-text: #0F3D3E; --color-text-secondary: #3E6B62; --color-text-tertiary: #8FB8AD; --color-accent: #10B981; --color-accent-dark: #059669; --color-border: #CDEBE0; --color-bg: #F2FBF7; --color-bg-secondary: #E6F7EF; --color-bg-hover: #E0F4EA; --color-nav-bg: rgba(242, 251, 247, 0.95); --color-prefix: #F43F5E; --color-prefix-bg: rgba(244, 63, 94, 0.10); --color-prefix-border: rgba(244, 63, 94, 0.22); --color-root: #0EA5E9; --color-root-bg: rgba(14, 165, 233, 0.10); --color-root-border: rgba(14, 165, 233, 0.30); --color-suffix: #10B981; --color-suffix-bg: rgba(16, 185, 129, 0.10); --color-suffix-border: rgba(16, 185, 129, 0.25); --color-success-bg: rgba(16, 185, 129, 0.10); --color-success-text: #047857; --color-success-border: #10B981; --color-error-bg: rgba(244, 63, 94, 0.10); --color-error-text: #BE123C; --color-error-border: #F43F5E; } /* ========================================================= * 主题 5 · 樱花粉 sakura * ========================================================= */ [data-theme="sakura"] { --color-text: #4A2C3A; --color-text-secondary: #9D6B7B; --color-text-tertiary: #C9A0AE; --color-accent: #F472B6; --color-accent-dark: #EC4899; --color-border: #F6D9E4; --color-bg: #FFF5F9; --color-bg-secondary: #FDE9F1; --color-bg-hover: #FCE0EC; --color-nav-bg: rgba(255, 245, 249, 0.95); --color-prefix: #EC4899; --color-prefix-bg: rgba(236, 72, 153, 0.10); --color-prefix-border: rgba(236, 72, 153, 0.22); --color-root: #A855F7; --color-root-bg: rgba(168, 85, 247, 0.10); --color-root-border: rgba(168, 85, 247, 0.30); --color-suffix: #FB923C; --color-suffix-bg: rgba(251, 146, 60, 0.10); --color-suffix-border: rgba(251, 146, 60, 0.25); --color-success-bg: rgba(244, 114, 182, 0.12); --color-success-text: #BE185D; --color-success-border: #F472B6; --color-error-bg: rgba(239, 68, 68, 0.10); --color-error-text: #DC2626; --color-error-border: #EF4444; } /* ========================================================= * 主题 6 · 深海 ocean * ========================================================= */ [data-theme="ocean"] { --color-text: #DCEFF5; --color-text-secondary: #8FB8C6; --color-text-tertiary: #5E8294; --color-accent: #38BDF8; --color-accent-dark: #0EA5E9; --color-border: #143244; --color-bg: #061620; --color-bg-secondary: #0B2230; --color-bg-hover: #0E2A3A; --color-nav-bg: rgba(6, 22, 32, 0.92); --color-prefix: #FB7185; --color-prefix-bg: rgba(251, 113, 133, 0.15); --color-prefix-border: rgba(251, 113, 133, 0.30); --color-root: #38BDF8; --color-root-bg: rgba(56, 189, 248, 0.15); --color-root-border: rgba(56, 189, 248, 0.35); --color-suffix: #FCD34D; --color-suffix-bg: rgba(252, 211, 77, 0.15); --color-suffix-border: rgba(252, 211, 77, 0.30); --color-success-bg: rgba(56, 189, 248, 0.12); --color-success-text: #7DD3FC; --color-success-border: #38BDF8; --color-error-bg: rgba(251, 113, 133, 0.15); --color-error-text: #FDA4AF; --color-error-border: #FB7185; } /* ========================================================= * 主题 7 · 林野 forest * ========================================================= */ [data-theme="forest"] { --color-text: #1F2A20; --color-text-secondary: #4B5D4C; --color-text-tertiary: #8AA08B; --color-accent: #166534; --color-accent-dark: #14532D; --color-border: #D5E2D2; --color-bg: #F3F7F0; --color-bg-secondary: #E9F1E4; --color-bg-hover: #E2ECDB; --color-nav-bg: rgba(243, 247, 240, 0.95); --color-prefix: #B91C1C; --color-prefix-bg: rgba(185, 28, 28, 0.08); --color-prefix-border: rgba(185, 28, 28, 0.20); --color-root: #166534; --color-root-bg: rgba(22, 101, 52, 0.10); --color-root-border: rgba(22, 101, 52, 0.28); --color-suffix: #B45309; --color-suffix-bg: rgba(180, 83, 9, 0.10); --color-suffix-border: rgba(180, 83, 9, 0.24); --color-success-bg: rgba(22, 101, 52, 0.10); --color-success-text: #14532D; --color-success-border: #166534; --color-error-bg: rgba(185, 28, 28, 0.08); --color-error-text: #991B1B; --color-error-border: #B91C1C; } /* ========================================================= * 主题 8 · 暮光 sunset * ========================================================= */ [data-theme="sunset"] { --color-text: #4A2E2A; --color-text-secondary: #8A5A4E; --color-text-tertiary: #C19A8E; --color-accent: #F97316; --color-accent-dark: #EA580C; --color-border: #F6DDCB; --color-bg: #FFF6F0; --color-bg-secondary: #FDEBDD; --color-bg-hover: #FCE2CF; --color-nav-bg: rgba(255, 246, 240, 0.95); --color-prefix: #E11D48; --color-prefix-bg: rgba(225, 29, 72, 0.10); --color-prefix-border: rgba(225, 29, 72, 0.22); --color-root: #9333EA; --color-root-bg: rgba(147, 51, 234, 0.10); --color-root-border: rgba(147, 51, 234, 0.28); --color-suffix: #F97316; --color-suffix-bg: rgba(249, 115, 22, 0.10); --color-suffix-border: rgba(249, 115, 22, 0.24); --color-success-bg: rgba(249, 115, 22, 0.12); --color-success-text: #C2410C; --color-success-border: #F97316; --color-error-bg: rgba(225, 29, 72, 0.10); --color-error-text: #BE123C; --color-error-border: #E11D48; } /* ========================================================= * 主题 9 · 紫晶 grape * ========================================================= */ [data-theme="grape"] { --color-text: #ECE3F5; --color-text-secondary: #B79FD0; --color-text-tertiary: #8A6FA8; --color-accent: #A855F7; --color-accent-dark: #9333EA; --color-border: #2A1E3D; --color-bg: #140A24; --color-bg-secondary: #1E1233; --color-bg-hover: #251640; --color-nav-bg: rgba(20, 10, 36, 0.92); --color-prefix: #F472B6; --color-prefix-bg: rgba(244, 114, 182, 0.15); --color-prefix-border: rgba(244, 114, 182, 0.30); --color-root: #C084FC; --color-root-bg: rgba(192, 132, 252, 0.15); --color-root-border: rgba(192, 132, 252, 0.35); --color-suffix: #38BDF8; --color-suffix-bg: rgba(56, 189, 248, 0.15); --color-suffix-border: rgba(56, 189, 248, 0.30); --color-success-bg: rgba(168, 85, 247, 0.14); --color-success-text: #D8B4FE; --color-success-border: #A855F7; --color-error-bg: rgba(244, 114, 182, 0.15); --color-error-text: #F9A8D4; --color-error-border: #F472B6; } /* ========================================================= * 主题 10 · 摩卡 coffee * ========================================================= */ [data-theme="coffee"] { --color-text: #3B2D22; --color-text-secondary: #6F5B49; --color-text-tertiary: #A89684; --color-accent: #B45309; --color-accent-dark: #92400E; --color-border: #E4D7C5; --color-bg: #FAF5EE; --color-bg-secondary: #F1E8DA; --color-bg-hover: #EADFCD; --color-nav-bg: rgba(250, 245, 238, 0.95); --color-prefix: #B91C1C; --color-prefix-bg: rgba(185, 28, 28, 0.08); --color-prefix-border: rgba(185, 28, 28, 0.20); --color-root: #0F766E; --color-root-bg: rgba(15, 118, 110, 0.10); --color-root-border: rgba(15, 118, 110, 0.26); --color-suffix: #B45309; --color-suffix-bg: rgba(180, 83, 9, 0.10); --color-suffix-border: rgba(180, 83, 9, 0.24); --color-success-bg: rgba(180, 83, 9, 0.10); --color-success-text: #92400E; --color-success-border: #B45309; --color-error-bg: rgba(185, 28, 28, 0.08); --color-error-text: #991B1B; --color-error-border: #B91C1C; } /* ========================================================= * 主题 11 · 薰衣草 lavender * ========================================================= */ [data-theme="lavender"] { --color-text: #3A2F4A; --color-text-secondary: #6F6385; --color-text-tertiary: #A99FBE; --color-accent: #8B5CF6; --color-accent-dark: #7C3AED; --color-border: #E5DCF5; --color-bg: #F8F5FE; --color-bg-secondary: #EFE9FB; --color-bg-hover: #E8E0F8; --color-nav-bg: rgba(248, 245, 254, 0.95); --color-prefix: #DB2777; --color-prefix-bg: rgba(219, 39, 119, 0.10); --color-prefix-border: rgba(219, 39, 119, 0.22); --color-root: #6366F1; --color-root-bg: rgba(99, 102, 241, 0.10); --color-root-border: rgba(99, 102, 241, 0.28); --color-suffix: #8B5CF6; --color-suffix-bg: rgba(139, 92, 246, 0.10); --color-suffix-border: rgba(139, 92, 246, 0.24); --color-success-bg: rgba(139, 92, 246, 0.12); --color-success-text: #6D28D9; --color-success-border: #8B5CF6; --color-error-bg: rgba(219, 39, 119, 0.10); --color-error-text: #BE185D; --color-error-border: #DB2777; } /* ========================================================= * 主题 12 · 碳黑 carbon * ========================================================= */ [data-theme="carbon"] { --color-text: #F5F5F5; --color-text-secondary: #B0B0B0; --color-text-tertiary: #777777; --color-accent: #E5E5E5; --color-accent-dark: #CFCFCF; --color-border: #2A2A2A; --color-bg: #0A0A0A; --color-bg-secondary: #161616; --color-bg-hover: #1F1F1F; --color-nav-bg: rgba(10, 10, 10, 0.92); --color-prefix: #FF6B6B; --color-prefix-bg: rgba(255, 107, 107, 0.15); --color-prefix-border: rgba(255, 107, 107, 0.30); --color-root: #E5E5E5; --color-root-bg: rgba(229, 229, 229, 0.12); --color-root-border: rgba(229, 229, 229, 0.30); --color-suffix: #FFD93D; --color-suffix-bg: rgba(255, 217, 61, 0.15); --color-suffix-border: rgba(255, 217, 61, 0.30); --color-success-bg: rgba(255, 255, 255, 0.12); --color-success-text: #FFFFFF; --color-success-border: #FFFFFF; --color-error-bg: rgba(255, 107, 107, 0.15); --color-error-text: #FCA5A5; --color-error-border: #FF6B6B; } /* ========================================================= * 主题 13 · 北欧 nord * ========================================================= */ [data-theme="nord"] { --color-text: #ECEFF4; --color-text-secondary: #AEB8C9; --color-text-tertiary: #6E7787; --color-accent: #88C0D0; --color-accent-dark: #5E81AC; --color-border: #3B4252; --color-bg: #2E3440; --color-bg-secondary: #3B4252; --color-bg-hover: #434C5E; --color-nav-bg: rgba(46, 52, 64, 0.92); --color-prefix: #BF616A; --color-prefix-bg: rgba(191, 97, 106, 0.18); --color-prefix-border: rgba(191, 97, 106, 0.32); --color-root: #88C0D0; --color-root-bg: rgba(136, 192, 208, 0.16); --color-root-border: rgba(136, 192, 208, 0.32); --color-suffix: #EBCB8B; --color-suffix-bg: rgba(235, 203, 139, 0.16); --color-suffix-border: rgba(235, 203, 139, 0.30); --color-success-bg: rgba(163, 190, 140, 0.16); --color-success-text: #A3BE8C; --color-success-border: #A3BE8C; --color-error-bg: rgba(191, 97, 106, 0.18); --color-error-text: #BF616A; --color-error-border: #BF616A; } /* ========================================================= * 主题 14 · 蜜桃 peach * ========================================================= */ [data-theme="peach"] { --color-text: #4A2E2E; --color-text-secondary: #8A5B57; --color-text-tertiary: #C49A95; --color-accent: #FB7185; --color-accent-dark: #F43F5E; --color-border: #FBD9D6; --color-bg: #FFF5F4; --color-bg-secondary: #FEE8E6; --color-bg-hover: #FDDDDA; --color-nav-bg: rgba(255, 245, 244, 0.95); --color-prefix: #DB2777; --color-prefix-bg: rgba(219, 39, 119, 0.10); --color-prefix-border: rgba(219, 39, 119, 0.22); --color-root: #FB923C; --color-root-bg: rgba(251, 146, 60, 0.12); --color-root-border: rgba(251, 146, 60, 0.26); --color-suffix: #FBBF24; --color-suffix-bg: rgba(251, 191, 36, 0.14); --color-suffix-border: rgba(251, 191, 36, 0.28); --color-success-bg: rgba(251, 113, 133, 0.14); --color-success-text: #BE123C; --color-success-border: #FB7185; --color-error-bg: rgba(225, 29, 72, 0.10); --color-error-text: #BE123C; --color-error-border: #E11D48; } /* ========================================================= * 主题 15 · 抹茶 matcha * ========================================================= */ [data-theme="matcha"] { --color-text: #2F3A26; --color-text-secondary: #5C6B4D; --color-text-tertiary: #97A586; --color-accent: #84A33B; --color-accent-dark: #6B8A2C; --color-border: #DDE4CC; --color-bg: #F6F8EF; --color-bg-secondary: #ECF0DE; --color-bg-hover: #E5EAD2; --color-nav-bg: rgba(246, 248, 239, 0.95); --color-prefix: #C2410C; --color-prefix-bg: rgba(194, 65, 12, 0.10); --color-prefix-border: rgba(194, 65, 12, 0.22); --color-root: #4D7C0F; --color-root-bg: rgba(77, 124, 15, 0.10); --color-root-border: rgba(77, 124, 15, 0.26); --color-suffix: #A16207; --color-suffix-bg: rgba(161, 98, 7, 0.10); --color-suffix-border: rgba(161, 98, 7, 0.24); --color-success-bg: rgba(132, 163, 59, 0.14); --color-success-text: #4D7C0F; --color-success-border: #84A33B; --color-error-bg: rgba(194, 65, 12, 0.10); --color-error-text: #9A3412; --color-error-border: #C2410C; } /* ========================================================= * 主题切换器（浮动按钮 + 弹出面板） * 由 theme.js 自动注入，无需手写 HTML * ========================================================= */ .theme-switcher { position: fixed; bottom: var(--space-xl); right: var(--space-xl); z-index: 1100; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-sm); } /* 圆形浮动按钮 */ .theme-fab { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; transition: transform var(--transition), box-shadow var(--transition); } .theme-fab:hover { transform: translateY(-2px) rotate(15deg); } /* 弹出面板 */ .theme-panel { display: flex; flex-direction: column; gap: 2px; padding: var(--space-sm); min-width: 184px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); /* 隐藏 / 展开动画 */ opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.96); transform-origin: bottom right; transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .theme-switcher.open .theme-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* 面板里的每一项 */ .theme-option { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: 10px 12px; font-family: var(--font-family); font-size: 0.9375rem; font-weight: 500; color: var(--color-text); background: transparent; border: none; border-radius: var(--radius); cursor: pointer; text-align: left; transition: background var(--transition); } .theme-option:hover { background: var(--color-bg-hover); } .theme-option.active { font-weight: 700; background: var(--color-bg-hover); } /* 颜色预览圆点（主色 + 背景对半） */ .theme-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); } /* 选中项右侧的对勾 */ .theme-option .check { margin-left: auto; opacity: 0; color: var(--color-accent); font-weight: 700; } .theme-option.active .check { opacity: 1; }