/* * kgmusic 设计 token（0.4，按 docs/kgmusic_ui.zip 原型换风格）。网页播放器、服务器管理页引用本文件， * App 端 lib/src/ui/app_theme.dart 是同一套数值，改这里要同步改那里。取舍见 docs/V0.4.md。 * * 组件样式只引用这里的变量，禁止硬编码色值。 * * 主题：；没选过（或选了「跟随系统」）时不写 data-theme，只看 prefers-color-scheme。 */ :root { /* ---------------- 色彩 ---------------- */ /* 品牌绿分两种用法： * --brand 用来填充（按钮底、选中底、进度、指示条）；上面的字和图标用 --on-brand（近黑，白字在品牌绿上只有 2.6:1） * --tint 是能当文字用的绿（浅色 #0A7A41 在白底上 5.4:1；深色 #3DD68C 在深底上 10:1）：正在播放的歌名、文字按钮、选中的标签 */ --brand: #1fb86a; --on-brand: #0b1f13; --tint: #0a7a41; --tint-dim: #e3f6ec; /* 快捷入口圆底、卡片图标底 */ --on-tint: #0b1f13; /* 旧名字：主按钮上的字，等于 --on-brand */ --bg-grouped: #f5f6f8; /* 页面底 */ --bg: #f5f6f8; --surface: #ffffff; /* 卡片、搜索框、mini player、底部导航 */ --surface-2: #eef0f3; /* 封面占位、次级底 */ --seg-thumb: #ffffff; --separator: #e6e8eb; --label: #1a1c1e; --label-2: #666b73; /* 次要文字：白底 5.4:1，次级底 #EEF0F3 上 4.7:1 */ --label-3: #a1a6ae; /* 只用于占位符和图标（2.5:1，不写有信息的字） */ --fill: rgba(120, 124, 132, 0.12); /* chip 底、按压态 */ --sq: #8a5a00; /* SQ（无损）标签：金色当文字不够，浅色下用深金 */ --success: #1fb86a; --warning: #ff9f0a; /* 待同步小圆点 */ --error: #e5484d; /* 失败的状态点、破坏性操作的图标（非文字 ≥3:1） */ --danger: #ce2c31; /* 破坏性操作 / 出错的**文字**（白底 5.2:1；#E5484D 当文字只有 3.9:1） */ --info: #007aff; /* 管理页任务「进行中」的状态点 */ --like: #ff4d5e; /* 收藏的心 */ /* 播放页：放大模糊的封面上盖一层封面色压暗后的遮罩（JS 算好写进 --scrim-top / --scrim-bot），取不到色时用这个 */ --player-fallback: #1c1c1e; --on-player: #ffffff; --lyric-now: rgba(255, 255, 255, 0.9); --lyric-rest: rgba(255, 255, 255, 0.6); /* 歌词其余句（装饰层） */ --on-player-2: rgba(255, 255, 255, 0.8); /* 播放页次要文字：模糊底最亮处也 ≥4.5:1 */ --player-brand: #3dd68c; /* 播放页上的品牌绿（深底上 10:1） */ --player-fill: rgba(255, 255, 255, 0.12); /* 播放页上的 chip 底、封面占位 */ --player-track: rgba(255, 255, 255, 0.2); /* 播放页进度条没走到的部分 */ --on-play-btn: rgba(0, 0, 0, 0.87); /* 白色圆形播放键上的图标 */ --disc: #16181b; /* mini player 圆形封面外面那圈「黑胶」 */ --bar-bg: rgba(255, 255, 255, 0.94); --bar-blur: 30px; --bar-saturate: 180%; --scrim: rgba(0, 0, 0, 0.4); --mask-solid: #000000; --shadow-float: 0 6px 24px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-art: 0 14px 30px rgba(0, 0, 0, 0.35); --shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.15); --knob-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); --knob: #ffffff; /* ---------------- 字体与字阶（原型的字号） ---------------- */ --font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", -apple-system, "Segoe UI", sans-serif; --t-large: 26px; --lh-large: 32px; --w-large: 800; /* 页面名（手机 22，见下） */ --t-title1: 22px; --lh-title1: 28px; --w-title1: 800; /* 播放页歌名、详情页标题 */ --t-title2: 20px; --lh-title2: 26px; --w-title2: 700; /* 分区标题 */ --t-headline: 16px; --lh-headline: 22px; --w-headline: 600; --t-body: 15px; --lh-body: 21px; --w-body: 400; /* 歌名 */ --t-sub: 14px; --lh-sub: 20px; --w-sub: 400; --t-foot: 12px; --lh-foot: 16px; --w-foot: 400; /* 歌手 · 专辑、说明 */ --t-cap: 11px; --lh-cap: 13px; --w-cap: 400; --w-cap-eyebrow: 600; --t-lyric-now: 19px; --t-lyric: 16px; /* ---------------- 间距 / 尺寸 / 圆角 / 动效 ---------------- */ --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px; --sp-34: 34px; --margin: 16px; --group-gap: 24px; --touch: 44px; /* 列表行：64 高、48 封面、不画分割线（靠留白分行） */ --row-h: 64px; --row-art: 48px; --row-gap: 12px; --row-inset: calc(var(--margin) + var(--row-art) + var(--row-gap)); --cell-h: 52px; /* 设置分组的行 */ --tab-h: 56px; --tab-icon: 24px; --nav-h: 56px; --mini-h: 56px; --mini-art: 44px; --mini-lift: 6px; --btn-h: 48px; --shelf-art: 116px; /* 首页歌单卡片 */ --playlist-art: 128px; /* 详情页头部封面（宽屏 160） */ --player-art: 320px; --progress-h: 3px; --icon-prev: 40px; --icon-play: 40px; --icon-next: 40px; --content-max: 1200px; --sidebar-w: 224px; --pbar-h: 80px; /* 宽屏底部播放栏 */ --r-art: 8px; --r-card: 16px; --r-art-l: 12px; --r-art-player: 16px; --r-mini: 999px; --r-sheet: 16px; --r-btn: 999px; --r-field: 999px; --r-menu: 12px; --r-pill: 999px; --d: 250ms; --ease: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */ --d-tab: 200ms; --ease-out: ease-out; --d-icon: 150ms; --d-insert: 300ms; --z-bar: 20; --z-mini: 30; --z-player: 40; --z-menu: 55; --z-scrim: 60; --z-sheet: 61; --z-toast: 80; color-scheme: light; } /* 深色的一组值，三处共用（跟随系统且系统是深色 / 选了深色 / 播放页） */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand: #3dd68c; --tint: #3dd68c; --tint-dim: #16301f; --bg-grouped: #111214; --bg: #111214; --surface: #1b1c1f; --surface-2: #26282c; --seg-thumb: #3a3c41; --separator: #2a2c30; --label: #edeef0; --label-2: #9ea3aa; --label-3: #6c7178; --fill: rgba(160, 166, 176, 0.16); --sq: #e0a33b; --danger: #ff6369; --info: #0a84ff; --bar-bg: rgba(27, 28, 31, 0.94); --scrim: rgba(0, 0, 0, 0.55); --shadow-float: 0 6px 24px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); color-scheme: dark; } } :root[data-theme="dark"], .force-dark { --brand: #3dd68c; --tint: #3dd68c; --tint-dim: #16301f; --bg-grouped: #111214; --bg: #111214; --surface: #1b1c1f; --surface-2: #26282c; --seg-thumb: #3a3c41; --separator: #2a2c30; --label: #edeef0; --label-2: #9ea3aa; --label-3: #6c7178; --fill: rgba(160, 166, 176, 0.16); --sq: #e0a33b; --danger: #ff6369; --info: #0a84ff; --bar-bg: rgba(27, 28, 31, 0.94); --scrim: rgba(0, 0, 0, 0.55); --shadow-float: 0 6px 24px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); color-scheme: dark; } /* 手机上页面名 22，宽屏 26 */ @media (max-width: 839px) { :root { --t-large: 22px; --lh-large: 28px; } } /* 尊重「减少动态效果」：时长归零（1ms 保留 transitionend），转圈、跳动小竖条都停 */ @media (prefers-reduced-motion: reduce) { :root { --d: 1ms; --d-tab: 1ms; --d-icon: 1ms; --d-insert: 1ms; } }