/* ============================================================ themes.css —— 主题变量层（5 种风格 × 浅色/深色） ------------------------------------------------------------ 分工（很重要，别混）： · styles.css 只写「结构与布局」，颜色/圆角/阴影/边框一律引用变量； · 本文件只定义变量，不写任何选择器样式（除了极少量的材质适配）。 这样新增一套皮肤 = 在这里加一段变量，不用碰布局。 两层变量： 第一层 `[data-style=x]` → 形状与材质（圆角、边框粗细、阴影、模糊），与明暗无关 第二层 `[data-style=x][data-theme=y]` → 颜色，明暗各一套 挂载位置： ============================================================ */ /* ============================================================ 0. 结构尺寸与语义化尺寸（所有风格共用） ------------------------------------------------------------ 字号（--fs-*）与触控尺寸（--tap / --row-min-h）会被「第三层 无障碍档位」 整体缩放；顶栏/播放条高度（--top-h / --bar-h）跟随 --a11y-ui。 styles.css 里**不许再出现硬编码 font-size**，一律引用这里的 --fs-*。 ============================================================ */ :root { /* ---- 无障碍缩放因子（标准档 = 1；由第三层覆盖）---- */ --a11y-fs: 1; /* 字号缩放：large 1.25 / xlarge 1.5 */ --a11y-ui: 1; /* 骨架尺寸缩放：顶栏、播放条 */ --top-h: calc(56px * var(--a11y-ui)); --bar-h: calc(92px * var(--a11y-ui)); --side-w: 238px; /* 侧栏宽：刻意不随长辈模式放大，避免挤压主区 */ --side-w-min: 58px; --gap: 12px; /* ---- 字号语义层（styles.css 只准用这些）---- */ --fs-2xs: calc(10.5px * var(--a11y-fs)); /* 角标、极小注记 */ --fs-xs: calc(11px * var(--a11y-fs)); /* 次要信息、时长、来源 */ --fs-sm: calc(12px * var(--a11y-fs)); /* 正文主力 */ --fs-md: calc(13px * var(--a11y-fs)); /* 强调正文、歌名 */ --fs-lg: calc(14px * var(--a11y-fs)); /* 区块标题 */ --fs-xl: calc(15px * var(--a11y-fs)); /* 面板标题 */ --fs-2xl: calc(16px * var(--a11y-fs)); /* 页级标题、统计数字 */ /* ---- 触控与行高（独立变量，不线性缩放，保证真的达标）---- 标准档刻意取得**略低于元素的真实高度**，这样 min-height 不生效、 现有视觉零变化；只有长辈档把值抬上去，触控目标才真正变大。 */ --tap: 28px; /* 可点击元素的最小高度（标准 28 / 大字 40 / 特大 48） */ --row-min-h: 32px; /* 列表行最小高度 */ --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif; --font-title: var(--font); --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --t-fast: .14s; --t-base: .22s; /* 品牌色块上的文字色：所有风格的 logo / 徽标底色都是深色渐变， 白字始终成立，所以它不随明暗和风格变化，单独抽一个变量避免硬编码。 */ --on-brand: #ffffff; } /* 深色下让原生控件（滚动条、下拉、日期选择器）也跟着变暗 */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } /* ============================================================ 1. 第一层：形状与材质（只跟风格有关） ============================================================ */ /* ---------- 苹果风：iOS/macOS —— 大圆角、轻阴影、毛玻璃 ---------- */ html[data-style="apple"] { --radius: 10px; --radius-sm: 7px; --radius-lg: 16px; --radius-pill: 999px; --border-w: 1px; --blur: 16px; --font-title: var(--font); } /* ---------- 玻璃拟态：半透明面板 + 大背景模糊 + 亮描边 ---------- */ html[data-style="glass"] { --radius: 14px; --radius-sm: 10px; --radius-lg: 20px; --radius-pill: 999px; --border-w: 1px; --blur: 22px; } /* ---------- 新拟态：同色背景 + 双向阴影；没有描边，靠光影分界 ---------- */ html[data-style="neu"] { --radius: 14px; --radius-sm: 10px; --radius-lg: 20px; --radius-pill: 999px; --border-w: 1px; /* 保留 1px 是为了盒模型尺寸一致，颜色为透明 */ --blur: 0px; } /* ---------- 复古风：小圆角 + 粗描边 + 硬阴影（无模糊的位移投影） ---------- */ html[data-style="retro"] { --radius: 3px; --radius-sm: 2px; --radius-lg: 5px; --radius-pill: 3px; --border-w: 2px; --blur: 0px; --font-title: Georgia, "Songti SC", "SimSun", serif; } /* ---------- 极简风：近乎直角 + 无阴影 + 细线 ---------- */ html[data-style="minimal"] { --radius: 3px; --radius-sm: 2px; --radius-lg: 4px; --radius-pill: 3px; --border-w: 1px; --blur: 0px; } /* ============================================================ 2. 第二层：颜色（风格 × 明暗） ============================================================ */ /* ============ 苹果风 ============ */ html[data-style="apple"][data-theme="light"] { --bg: #f2f2f7; --bg-grad: none; --panel: #ffffff; --panel-2: #f9f9fb; --panel-3: #f0f0f4; --panel-hover: #f5f5f8; --panel-solid: #ffffff; --topbar-bg: rgba(255, 255, 255, .82); --playerbar-bg: rgba(255, 255, 255, .88); --border: #e4e4e9; --border-strong: #d1d1d6; --divider: #f0f0f3; --text: #1c1c1e; --text-2: #3a3a3c; --muted: #8e8e93; --accent: #007aff; --accent-2: #0063d1; --accent-fg: #ffffff; --accent-soft: #e7f1ff; --accent-line: #b3d7ff; --danger: #ff3b30; --danger-2: #d92b21; --danger-soft: #ffeceb; --danger-line: #ffc9c6; --ok: #248a3d; --ok-soft: #e7f7ea; --warn: #8a5a00; --warn-soft: #fff7e6; --warn-line: #ffe2a8; --tag-bg: #f2f2f7; --tag-text: #4a4a4f; --input-bg: #ffffff; --btn-bg: #ffffff; --btn-fg: var(--text); --btn-border: #d1d1d6; --btn-hover: #f4f4f7; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06); --shadow-md: 0 4px 16px rgba(0, 0, 0, .08); --shadow-lg: 0 14px 44px rgba(0, 0, 0, .17); --shadow-panel: 0 1px 3px rgba(0, 0, 0, .05); --shadow-inset: none; --logo-grad: linear-gradient(135deg, #2b7fd4, #007aff); --mask: rgba(20, 25, 32, .38); --row-hover: #f7f7fa; --scroll-thumb: #cfcfd6; } html[data-style="apple"][data-theme="dark"] { --bg: #121214; --bg-grad: none; --panel: #1c1c1e; --panel-2: #232326; --panel-3: #2c2c2e; --panel-hover: #2a2a2d; --panel-solid: #1c1c1e; --topbar-bg: rgba(28, 28, 30, .84); --playerbar-bg: rgba(28, 28, 30, .9); --border: #2f2f33; --border-strong: #3f3f45; --divider: #26262a; --text: #f5f5f7; --text-2: #d6d6da; --muted: #8e8e93; --accent: #0a84ff; --accent-2: #3d9dff; --accent-fg: #ffffff; --accent-soft: #10294a; --accent-line: #1d4977; --danger: #ff453a; --danger-2: #ff6a61; --danger-soft: #3a1c1a; --danger-line: #5d2a26; --ok: #30d158; --ok-soft: #122d1c; --warn: #e0b04a; --warn-soft: #33280f; --warn-line: #5c4a1e; --tag-bg: #2c2c2e; --tag-text: #c7c7cc; --input-bg: #232326; --btn-bg: #2c2c2e; --btn-fg: var(--text); --btn-border: #3f3f45; --btn-hover: #35353a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 18px rgba(0, 0, 0, .5); --shadow-lg: 0 16px 50px rgba(0, 0, 0, .65); --shadow-panel: 0 1px 3px rgba(0, 0, 0, .35); --shadow-inset: none; --logo-grad: linear-gradient(135deg, #1d6fd0, #0a84ff); --mask: rgba(0, 0, 0, .55); --row-hover: #232327; --scroll-thumb: #47474d; } /* ============ 玻璃拟态 ============ */ html[data-style="glass"][data-theme="light"] { --bg: #e9eef8; --bg-grad: linear-gradient(135deg, #d8e6f8 0%, #efe4f8 42%, #dff2f0 100%); --panel: rgba(255, 255, 255, .55); --panel-2: rgba(255, 255, 255, .38); --panel-3: rgba(255, 255, 255, .3); --panel-hover: rgba(255, 255, 255, .72); --panel-solid: rgba(255, 255, 255, .9); --topbar-bg: rgba(255, 255, 255, .45); --playerbar-bg: rgba(255, 255, 255, .55); --border: rgba(255, 255, 255, .7); --border-strong: rgba(255, 255, 255, .95); --divider: rgba(255, 255, 255, .45); --text: #17203a; --text-2: #3b4560; --muted: #6d7896; --accent: #5b5bd6; --accent-2: #4a4ac0; --accent-fg: #ffffff; --accent-soft: rgba(91, 91, 214, .14); --accent-line: rgba(91, 91, 214, .35); --danger: #d64550; --danger-2: #b8343e; --danger-soft: rgba(214, 69, 80, .14); --danger-line: rgba(214, 69, 80, .32); --ok: #1f8a5f; --ok-soft: rgba(31, 138, 95, .14); --warn: #8a5a00; --warn-soft: rgba(255, 196, 61, .2); --warn-line: rgba(196, 145, 20, .38); --tag-bg: rgba(255, 255, 255, .62); --tag-text: #45506e; --input-bg: rgba(255, 255, 255, .64); --btn-bg: rgba(255, 255, 255, .58); --btn-fg: var(--text); --btn-border: rgba(255, 255, 255, .9); --btn-hover: rgba(255, 255, 255, .85); --shadow-sm: 0 2px 10px rgba(31, 38, 135, .08); --shadow-md: 0 10px 34px rgba(31, 38, 135, .13); --shadow-lg: 0 20px 60px rgba(31, 38, 135, .22); --shadow-panel: 0 8px 30px rgba(31, 38, 135, .1); --shadow-inset: none; --logo-grad: linear-gradient(135deg, #6a8bff, #5b5bd6 60%, #8b5bd6); --mask: rgba(30, 38, 70, .32); --row-hover: rgba(255, 255, 255, .5); --scroll-thumb: rgba(120, 132, 170, .45); } html[data-style="glass"][data-theme="dark"] { --bg: #080c18; --bg-grad: linear-gradient(135deg, #101a35 0%, #1d1332 45%, #08202c 100%); --panel: rgba(255, 255, 255, .07); --panel-2: rgba(255, 255, 255, .045); --panel-3: rgba(255, 255, 255, .03); --panel-hover: rgba(255, 255, 255, .13); --panel-solid: rgba(18, 22, 38, .94); --topbar-bg: rgba(255, 255, 255, .06); --playerbar-bg: rgba(255, 255, 255, .07); --border: rgba(255, 255, 255, .14); --border-strong: rgba(255, 255, 255, .24); --divider: rgba(255, 255, 255, .08); --text: #eef1fa; --text-2: #c3cae0; --muted: #8b95b4; --accent: #8b93ff; --accent-2: #a6adff; --accent-fg: #0d1024; --accent-soft: rgba(139, 147, 255, .18); --accent-line: rgba(139, 147, 255, .42); --danger: #ff7a85; --danger-2: #ff9aa3; --danger-soft: rgba(255, 122, 133, .16); --danger-line: rgba(255, 122, 133, .38); --ok: #4fd39b; --ok-soft: rgba(79, 211, 155, .16); --warn: #f0c05a; --warn-soft: rgba(240, 192, 90, .16); --warn-line: rgba(240, 192, 90, .38); --tag-bg: rgba(255, 255, 255, .1); --tag-text: #cdd4e8; --input-bg: rgba(255, 255, 255, .08); --btn-bg: rgba(255, 255, 255, .09); --btn-fg: var(--text); --btn-border: rgba(255, 255, 255, .2); --btn-hover: rgba(255, 255, 255, .16); --shadow-sm: 0 2px 12px rgba(0, 0, 0, .4); --shadow-md: 0 12px 36px rgba(0, 0, 0, .5); --shadow-lg: 0 24px 70px rgba(0, 0, 0, .7); --shadow-panel: 0 10px 36px rgba(0, 0, 0, .38); --shadow-inset: none; --logo-grad: linear-gradient(135deg, #5b6dff, #8b5bd6); --mask: rgba(0, 0, 0, .6); --row-hover: rgba(255, 255, 255, .07); --scroll-thumb: rgba(255, 255, 255, .22); } /* ============ 新拟态 ============ */ html[data-style="neu"][data-theme="light"] { --bg: #e5e8ef; --bg-grad: none; --panel: #e5e8ef; --panel-2: #e5e8ef; --panel-3: #dfe3eb; --panel-hover: #eceff5; --panel-solid: #e8ebf2; --topbar-bg: #e5e8ef; --playerbar-bg: #e5e8ef; --border: transparent; --border-strong: #d2d7e1; --divider: #dbe0e8; --text: #2b3140; --text-2: #454d5e; --muted: #7b8494; --accent: #5566c9; --accent-2: #4353b3; --accent-fg: #ffffff; --accent-soft: #dde1f4; --accent-line: #c3cae9; --danger: #c9524f; --danger-2: #ad3d3a; --danger-soft: #f2dedd; --danger-line: #e3c0be; --ok: #2f7f57; --ok-soft: #dcebe2; --warn: #86691c; --warn-soft: #f0e8d3; --warn-line: #dfd2ac; --tag-bg: #dde1e9; --tag-text: #4d556a; --input-bg: #e5e8ef; --btn-bg: #e5e8ef; --btn-fg: var(--text); --btn-border: transparent; --btn-hover: #eceff5; --shadow-sm: 3px 3px 8px #cdd2dc, -3px -3px 8px #ffffff; --shadow-md: 6px 6px 14px #cdd2dc, -6px -6px 14px #ffffff; --shadow-lg: 10px 10px 26px #c6cbd6, -10px -10px 26px #ffffff; --shadow-panel: 6px 6px 16px #cdd2dc, -6px -6px 16px #ffffff; --shadow-inset: inset 3px 3px 7px #cdd2dc, inset -3px -3px 7px #ffffff; --logo-grad: linear-gradient(135deg, #6d7de0, #5566c9); --mask: rgba(40, 46, 60, .3); --row-hover: #eaeef4; --scroll-thumb: #c6cbd6; } html[data-style="neu"][data-theme="dark"] { --bg: #292c33; --bg-grad: none; --panel: #292c33; --panel-2: #292c33; --panel-3: #2e3138; --panel-hover: #31353c; --panel-solid: #2b2e36; --topbar-bg: #292c33; --playerbar-bg: #292c33; --border: transparent; --border-strong: #3a3e46; --divider: #33363d; --text: #e8eaef; --text-2: #c4c8d1; --muted: #8b909b; --accent: #8593f0; --accent-2: #9aa6ff; --accent-fg: #1b1e24; --accent-soft: #343a52; --accent-line: #414a6b; --danger: #ef8b88; --danger-2: #ffa5a2; --danger-soft: #4a2f2e; --danger-line: #5e3b39; --ok: #5fc08d; --ok-soft: #24402f; --warn: #d9bb6a; --warn-soft: #40371f; --warn-line: #574a29; --tag-bg: #31353c; --tag-text: #c4c8d1; --input-bg: #292c33; --btn-bg: #292c33; --btn-fg: var(--text); --btn-border: transparent; --btn-hover: #31353c; --shadow-sm: 3px 3px 8px #1e2126, -3px -3px 8px #343840; --shadow-md: 6px 6px 14px #1e2126, -6px -6px 14px #343840; --shadow-lg: 10px 10px 26px #191c20, -10px -10px 26px #393d46; --shadow-panel: 6px 6px 16px #1e2126, -6px -6px 16px #343840; --shadow-inset: inset 3px 3px 7px #1e2126, inset -3px -3px 7px #343840; --logo-grad: linear-gradient(135deg, #7c8bf0, #8593f0); --mask: rgba(0, 0, 0, .55); --row-hover: #2f333a; --scroll-thumb: #454952; } /* ============ 复古风（牛皮纸 / 打字机） ============ */ html[data-style="retro"][data-theme="light"] { --bg: #efe4cb; --bg-grad: none; --panel: #fbf5e6; --panel-2: #f2e8d2; --panel-3: #eadfc4; --panel-hover: #f7efdc; --panel-solid: #fbf5e6; --topbar-bg: #fbf5e6; --playerbar-bg: #fbf5e6; --border: #2f2a22; --border-strong: #2f2a22; --divider: #ddcfae; --text: #2f2a22; --text-2: #4a4234; --muted: #7d6d51; --accent: #b8451a; --accent-2: #94350f; --accent-fg: #fbf5e6; --accent-soft: #f2dcc9; --accent-line: #d3a184; --danger: #a32b1f; --danger-2: #852016; --danger-soft: #f3d9d3; --danger-line: #d7a79c; --ok: #4a6b32; --ok-soft: #e3e9ce; --warn: #8a6415; --warn-soft: #f6ebcc; --warn-line: #dcc78c; --tag-bg: #f2e8d2; --tag-text: #4a4234; --input-bg: #fffdf6; --btn-bg: #f7efdc; --btn-fg: var(--text); --btn-border: #2f2a22; --btn-hover: #eadfc4; --shadow-sm: 2px 2px 0 #2f2a22; --shadow-md: 3px 3px 0 #2f2a22; --shadow-lg: 5px 5px 0 #2f2a22; --shadow-panel: 3px 3px 0 #cbbd9c; --shadow-inset: none; --logo-grad: repeating-linear-gradient(135deg, #b8451a, #b8451a 6px, #94350f 6px, #94350f 12px); --mask: rgba(47, 42, 34, .42); --row-hover: #f4ecd8; --scroll-thumb: #c3b393; } html[data-style="retro"][data-theme="dark"] { --bg: #1c1913; --bg-grad: none; --panel: #262119; --panel-2: #2e281f; --panel-3: #362f24; --panel-hover: #322b21; --panel-solid: #262119; --topbar-bg: #262119; --playerbar-bg: #262119; --border: #d9c79c; --border-strong: #d9c79c; --divider: #3d3527; --text: #f2e7cd; --text-2: #d6c8a8; --muted: #a2937a; --accent: #e08a3c; --accent-2: #f0a35a; --accent-fg: #1c1913; --accent-soft: #402c17; --accent-line: #6b4a26; --danger: #e5705f; --danger-2: #f28a7a; --danger-soft: #40221d; --danger-line: #6b3a31; --ok: #9ec46a; --ok-soft: #2b3320; --warn: #e0c168; --warn-soft: #3d3418; --warn-line: #6b5a2a; --tag-bg: #2e281f; --tag-text: #d6c8a8; --input-bg: #2e281f; --btn-bg: #2e281f; --btn-fg: var(--text); --btn-border: #d9c79c; --btn-hover: #3a3225; --shadow-sm: 2px 2px 0 #d9c79c; --shadow-md: 3px 3px 0 #d9c79c; --shadow-lg: 5px 5px 0 #d9c79c; --shadow-panel: 3px 3px 0 rgba(217, 199, 156, .3); --shadow-inset: none; --logo-grad: repeating-linear-gradient(135deg, #e08a3c, #e08a3c 6px, #b86b28 6px, #b86b28 12px); --mask: rgba(0, 0, 0, .6); --row-hover: #2c2620; --scroll-thumb: #574c39; } /* ============ 极简风（黑白灰 + 零装饰） ============ */ html[data-style="minimal"][data-theme="light"] { --bg: #ffffff; --bg-grad: none; --panel: #ffffff; --panel-2: #fafafa; --panel-3: #f4f4f4; --panel-hover: #f7f7f7; --panel-solid: #ffffff; --topbar-bg: #ffffff; --playerbar-bg: #ffffff; --border: #ebebeb; --border-strong: #d8d8d8; --divider: #f0f0f0; --text: #0d0d0d; --text-2: #3d3d3d; --muted: #9b9b9b; --accent: #111111; --accent-2: #000000; --accent-fg: #ffffff; --accent-soft: #f0f0f0; --accent-line: #d4d4d4; --danger: #c0392b; --danger-2: #a02f22; --danger-soft: #f6ebe9; --danger-line: #e0c3be; --ok: #2c7a4b; --ok-soft: #eaf3ee; --warn: #8a6415; --warn-soft: #faf4e3; --warn-line: #e5d8b0; --tag-bg: #f4f4f4; --tag-text: #5a5a5a; --input-bg: #ffffff; --btn-bg: #ffffff; --btn-fg: var(--text); --btn-border: #d8d8d8; --btn-hover: #f4f4f4; --shadow-sm: none; --shadow-md: 0 2px 10px rgba(0, 0, 0, .06); --shadow-lg: 0 10px 34px rgba(0, 0, 0, .12); --shadow-panel: none; --shadow-inset: none; --logo-grad: #111111; --mask: rgba(0, 0, 0, .3); --row-hover: #fafafa; --scroll-thumb: #d8d8d8; } html[data-style="minimal"][data-theme="dark"] { --bg: #0b0b0b; --bg-grad: none; --panel: #111111; --panel-2: #161616; --panel-3: #1c1c1c; --panel-hover: #1a1a1a; --panel-solid: #111111; --topbar-bg: #111111; --playerbar-bg: #111111; --border: #232323; --border-strong: #333333; --divider: #1c1c1c; --text: #f2f2f2; --text-2: #c6c6c6; --muted: #858585; --accent: #f2f2f2; --accent-2: #ffffff; --accent-fg: #0b0b0b; --accent-soft: #1f1f1f; --accent-line: #3a3a3a; --danger: #e05a4c; --danger-2: #f07a6c; --danger-soft: #2a1715; --danger-line: #4a2a26; --ok: #4ea86e; --ok-soft: #16241b; --warn: #d4b25e; --warn-soft: #262114; --warn-line: #473d22; --tag-bg: #1c1c1c; --tag-text: #b5b5b5; --input-bg: #161616; --btn-bg: #161616; --btn-fg: var(--text); --btn-border: #333333; --btn-hover: #202020; --shadow-sm: none; --shadow-md: 0 2px 10px rgba(0, 0, 0, .5); --shadow-lg: 0 10px 34px rgba(0, 0, 0, .7); --shadow-panel: none; --shadow-inset: none; --logo-grad: #f2f2f2; --mask: rgba(0, 0, 0, .65); --row-hover: #161616; --scroll-thumb: #333333; } /* ============================================================ 3. 材质适配（这几条是本文件里唯一的"样式"，因为纯变量表达不了） ============================================================ */ /* 玻璃拟态：背景铺渐变，面板/顶栏/播放条做背景模糊 */ html[data-style="glass"] body { background: var(--bg-grad); background-attachment: fixed; } /* 复古风：标题用衬线体，正文保持可读性 */ html[data-style="retro"] .brand-name, html[data-style="retro"] .pl-name, html[data-style="retro"] .modal-head h3, html[data-style="retro"] .lyric-title { font-family: var(--font-title); letter-spacing: .3px; } /* 复古风：logo 用斜纹填充，加一圈描边更"贴纸感" */ html[data-style="retro"] .brand .logo { outline: 2px solid var(--border); outline-offset: 2px; } /* 新拟态：输入类控件用内凹阴影替代边框 */ html[data-style="neu"] select, html[data-style="neu"] input[type="text"], html[data-style="neu"] textarea { box-shadow: var(--shadow-inset); } /* 新拟态：按钮做"凸起" */ html[data-style="neu"] .btn { box-shadow: var(--shadow-sm); } html[data-style="neu"] .btn:active { box-shadow: var(--shadow-inset); } /* 极简风：去掉按钮的悬浮底色，改用边框变深（更克制） */ html[data-style="minimal"] .btn:hover { background: var(--btn-bg); border-color: var(--text); } /* 复古风：滚动条也做成方块 */ html[data-style="retro"] ::-webkit-scrollbar { width: 12px; height: 12px; } html[data-style="retro"] ::-webkit-scrollbar-track { background: var(--panel-2); } html[data-style="retro"] ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid var(--panel-2); } /* ============================================================ 3. 第三层：无障碍 / 长辈模式（与「风格」「明暗」正交的第三维度） ------------------------------------------------------------ 挂载： · **只覆盖尺寸与效果类变量**，颜色一律不动 —— 所以 5 风格 × 浅深共 10 组 配色完全复用，不存在组合爆炸：以后新增一种风格，适老化自动生效。 · 唯一例外：用了半透明面板 / 透明边框的风格（glass / neu / minimal）， 在长辈模式下必须「实心化、显形」——见下面按风格的覆盖段。 · ⚠️ 本段必须写在所有风格段之后：同特异性时靠「源顺序」取胜。 · ⚠️ 以后新增风格若用了半透明或 transparent 边框，记得在这里补一段覆盖。 ============================================================ */ /* ---------- 大字档：字号 ×1.25、触控 ≥40px、去掉模糊、边框加粗 ---------- */ html[data-a11y="large"] { --a11y-fs: 1.25; --a11y-ui: 1.12; --blur: 0px; --border-w: 1.5px; --tap: 40px; --row-min-h: 44px; } /* ---------- 特大档：字号 ×1.5、触控 ≥48px ---------- */ html[data-a11y="xlarge"] { --a11y-fs: 1.5; --a11y-ui: 1.22; --blur: 0px; --border-w: 2px; --tap: 48px; --row-min-h: 56px; } /* ---------- 提升对比度：按明暗覆盖，不按风格 ---------- （无障碍优先于风格差异：宁可让 5 种风格在次要文字色上趋同， 也不能让老人看不清。正文/强调色仍保留各风格个性。） */ html[data-a11y="large"][data-theme="light"], html[data-a11y="xlarge"][data-theme="light"] { --text-2: #2b2b30; --muted: #55555c; --border: #c4c4cd; --border-strong: #a8a8b4; --divider: #dcdce3; --btn-border: #b6b6c1; --row-hover: #e9e9f0; --scroll-thumb: #b0b0bc; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .12); --shadow-panel: 0 1px 3px rgba(0, 0, 0, .12); } html[data-a11y="large"][data-theme="dark"], html[data-a11y="xlarge"][data-theme="dark"] { --text-2: #e9e9ee; --muted: #c7c7d0; --border: #4b4b57; --border-strong: #6a6a7a; --divider: #383842; --btn-border: #63637a; --row-hover: #2b2b35; --scroll-thumb: #5a5a68; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .55); --shadow-panel: 0 1px 3px rgba(0, 0, 0, .55); } /* ---------- 玻璃拟态：长辈模式必须「实心化」 ---------- 毛玻璃 = 半透明 + 背景模糊，对视力衰退的人极不友好（文字浮在花花绿绿的底上）。 这里把面板全部换成不透明色，并去掉背景渐变。 */ html[data-a11y="large"][data-style="glass"][data-theme="light"], html[data-a11y="xlarge"][data-style="glass"][data-theme="light"] { --bg: #ecedf5; --bg-grad: none; --panel: #ffffff; --panel-2: #f7f7fc; --panel-3: #eff0f8; --panel-hover: #f2f3fa; --panel-solid: #ffffff; --topbar-bg: #ffffff; --playerbar-bg: #ffffff; --tag-bg: #f1f1f8; --input-bg: #ffffff; --btn-bg: #ffffff; --btn-hover: #f3f3fa; --border: #c8c8d8; --border-strong: #ababc0; --divider: #e2e2ee; --row-hover: #f2f2fa; --scroll-thumb: #b6b6c6; } html[data-a11y="large"][data-style="glass"][data-theme="dark"], html[data-a11y="xlarge"][data-style="glass"][data-theme="dark"] { --bg: #0e1120; --bg-grad: none; --panel: #191d2e; --panel-2: #1f2338; --panel-3: #262a42; --panel-hover: #2a2e48; --panel-solid: #191d2e; --topbar-bg: #141828; --playerbar-bg: #141828; --tag-bg: #242840; --input-bg: #1f2338; --btn-bg: #22263c; --btn-hover: #2a2e48; --border: #4a4f70; --border-strong: #656b92; --divider: #333856; --row-hover: #232840; --scroll-thumb: #4a4f70; }