/* ========================================================================== 墨竹印象 · 音乐厅 —— 影峰字体主题（只换字体，不动配色） 2026-10-03 ｜ 用法：放在所有既有 CSS 之后引入 口径：全量可可体（影峰 2026-10-03 定稿） 曲名 / 界面 / 参数数字 / 细体大字 —— 全部由白无常可可体承担。 ⚠️ 一条不能动的底线：藏文必须留在回退栈里。 可可体藏文覆盖 0 字（实测），而本项目的 tokens.css 早就写明了原因—— 旧式藏文字体没有 OpenType 定位，元音与下加字会散架并出现虚线圆圈， 所以藏文只能交给 Kailasa / Noto Tibetan 这类能正确连写的字体。 做法：可可体排在栈首，var(--font-tibetan) 保留在链尾； 遇到藏文码位浏览器自动落到它，遇到可可体没有的生僻字落到系统黑体。 为什么只改令牌就够：本项目所有 font-family 声明都写成 var(--font-*)， 没有一处硬编码字体（已逐文件核过）。所以这里只覆写令牌，原 CSS 一行不动。 ========================================================================== */ /* ══════════════════════════════════════════════════════════════════ 全站文字缩放（2026-10-10 新增） 起因：普琼在 1440×900 的窗口里说"看不出效果"。实测原因很实在—— 常规窗口下上一轮的字号只抬了 1~3px（12→13.5、13→15、46→49）， 而盘面变大反而把歌词栏挤窄 11px，于是"看得见的只有缩小"。 所以不再替他猜档位：给一个显式旋钮，1 档 = 1.0 倍。 想更大/更小，改下面这一行数字即可（1.12 = 再放大 12%），全站同步放大， 字号令牌、间距、侧栏、底栏都跟着走（它们都乘了这个系数）。 ⚠ 为什么要用乘法而不是直接改 8 个令牌：改令牌等于每次调档都要动 tokens.css， 而且下次改版会把上一轮的档位盖掉；一个系数写在主题层（最后加载）里， 与 tokens.css 的"基准阶梯"分工清楚：那边定义阶梯，这边定放大倍数。 ══════════════════════════════════════════════════════════════════ */ :root { /* 影峰全量口径的可可体字体栈：可可体 → 藏文回退 → 系统中文字体 */ --yf-keke-stack: "白无常可可体", "BWCKKT", var(--font-tibetan), "PingFang SC", "Hiragino Sans GB", sans-serif; --yf-scale: 1.15; /* ← 全站文字缩放系数；改成 1.12 / 1.2 即再放大 */ --fs-micro: calc(12px * var(--yf-scale)); --fs-tiny: calc(13px * var(--yf-scale)); --fs-small: calc(14px * var(--yf-scale)); --fs-body: calc(17px * var(--yf-scale)); --fs-lead: calc(20px * var(--yf-scale)); --fs-title: calc(23px * var(--yf-scale)); --fs-h3: calc(28px * var(--yf-scale)); --fs-h2: calc(34px * var(--yf-scale)); --fs-h1: calc(46px * var(--yf-scale)); --fs-hero: clamp(calc(42px * var(--yf-scale)), calc(5.4vw * var(--yf-scale)), calc(76px * var(--yf-scale))); /* ⚠ 三个档位都要乘系数：只乘上下限的话，vw 那一项会"锁住"中间段—— 1440 宽下 3.4vw = 49px，正好落在 clamp 内，于是把系数从 1 调到 1.12 标题纹丝不动（实测）。乘上之后 1440 下是 54.9px，档位才真的跟着走。 */ --fs-display: clamp(calc(34px * var(--yf-scale)), calc(3.4vw * var(--yf-scale)), calc(54px * var(--yf-scale))); /* 间距与结构尺寸同乘，否则字变大了盒子没变，读起来更闷 */ --sp-1: calc(5px * var(--yf-scale)); --sp-2: calc(9px * var(--yf-scale)); --sp-3: calc(14px * var(--yf-scale)); --sp-4: calc(18px * var(--yf-scale)); --sp-5: calc(27px * var(--yf-scale)); --sp-6: calc(36px * var(--yf-scale)); --sp-7: calc(54px * var(--yf-scale)); --sp-8: calc(80px * var(--yf-scale)); --rail-w: calc(256px * var(--yf-scale)); --dock-h: calc(94px * var(--yf-scale)); /* 曲名 / 专辑名 / 段标题（原为宋体） */ --font-cn-display: var(--yf-keke-stack); /* 界面控件与正文（原为无衬线） */ --font-cn-ui: var(--yf-keke-stack); /* 参数类：时长、码率、采样率、路径（原为等宽） —— 全量口径下也走可可体。若你要回"仪表感"的等宽数字，见文件末尾开关。 */ --font-mono: var(--yf-keke-stack); /* 发丝几何大字（舞台页大曲名，原为 Helvetica Neue Ultralight + 苹方 Thin） */ --font-thin: var(--yf-keke-stack); /* 拉丁展示（MOZHU 这类小字标） */ --font-latin-display: var(--yf-keke-stack); /* 恢复原设计意图：发丝/细体两档（可可体没有对应的轻字重，浏览器会用本色字形，不会变粗） */ --w-hairline: 100; --w-thin: 200; } /* ══════════════════════════════════════════════════════════════════ 关键一条：禁止浏览器"伪加粗" 实测（Chrome 154）：可可体只注册了一个字重，但界面里大量规则写着 font-weight: 600 / 700，浏览器会自己把笔画加厚（合成粗体）—— 宽度不变，所以排版看着没坏，只是整体变粗，正是"字体被加粗了"的来源。 同一个字在 400/500 下是本色细体，在 600 以上笔画明显变厚。 关掉合成后，所有字重请求都落到字体本色字形 —— 也就是"不加粗"。 代价（如实说明）：原设计里靠 500 与 300 的粗细差做的强调会消失， 强调只能靠颜色与间距。本项目的"当前句"本来就用朱砂色 + 字重双保险， 所以只剩颜色这一路仍然成立；这一点请你知悉。 ══════════════════════════════════════════════════════════════════ */ html, body, body * { font-synthesis: none; -webkit-font-synthesis: none; } /* 等宽回退开关（默认关闭）： 把下面这段的注释打开，参数类文字就回到等宽字体，时长与码率列会重新纵向对齐。 :root { --font-mono: "SF Mono", "JetBrains Mono", Menlo, var(--font-tibetan), monospace; } */ /* 两条绕过令牌、直接写死字体栈的地方（全项目仅这两处，其余都走 var(--font-*)）： ① 舞台页大曲名 —— 原为 Avenir Next Ultra Light（细体几何无衬线）。 可可体本身就是细体几何无衬线，正好接上；字重保持 200 不动， 因为可可体只注册了一个字重，浏览器会直接用那份字形，不会伪变细。 ② 舞台页歌词行 —— 已用 :not(.is-tibetan) 排除了藏文，这里只换字体，不动它的字重层级。 */ .stage__title, .stage__lyrics:not(.is-tibetan) .lyric, .stage__lyrics:not(.is-tibetan) .lyric--idle, .stage__lyrics:not(.is-tibetan) .lyric--plain { font-family: var(--yf-keke-stack); } /* ══════════════════════════════════════════════════════════════════ 文字色阶 —— 关掉伪加粗之后，用颜色重建层次 背景：可可体只有一个字重，关掉 font-synthesis 后，界面里靠 300/500/700 做的粗细层次全部消失。补齐它的不是字重，而是**五级字色 + 状态色**。 每一级的对比度都在本机实测过（背景取实测页面底 #1b2130 与侧栏合成色）： T1 #f2f5f8 14.7:1 标题、当前曲名、关键数字 T2 rgba(242,245,248,.86) 11.1:1 正文、导航、列表曲名 T3 rgba(242,245,248,.68) 7.5:1 元信息、艺人、专辑 T4 rgba(242,245,248,.54) 5.2:1 参数、时长、计数（≥4.5 正文线） T5 rgba(242,245,248,.40) 3.5:1 小节标签、占位（非正文，允许更低） —— 朱砂原样 #e0574a 作文字只有 4.31:1，**低于正文线**； 所以拆成两支：文字用提亮版 #f0837a（6.3:1），色块/指示条仍用原朱砂。 —— 河水青 #39d3c4 作文字 8.6:1，继续只表示"状态"（正在播放、无损）。 ══════════════════════════════════════════════════════════════════ */ :root { --yf-t1: #f2f5f8; --yf-t2: rgba(242, 245, 248, 0.86); --yf-t3: rgba(242, 245, 248, 0.68); --yf-t4: rgba(242, 245, 248, 0.54); --yf-t5: rgba(242, 245, 248, 0.40); --yf-t1-hover: #ffffff; --yf-accent-text: #f0837a; /* 朱砂·文字档（6.3:1） */ --yf-accent-mark: #e0574a; /* 朱砂·色块档（指示条、播放键、当前行底） */ --yf-state: #39d3c4; /* 河水青·状态（8.6:1） */ } /* —— 标题与品牌：最高一级，靠字号与字距拉开，不靠加粗 —— */ .brand__name, .empty h3, .card__title, .stat__n, .songgroup__title { color: var(--yf-t1) !important; letter-spacing: 0.02em !important; } /* 小节标签（曲库 / 我的 / 创建的歌单…）：最暗一级 + 拉字距，是"分节"的视觉手段 */ .rail__label, .rail__foot .rail__label { color: var(--yf-t5) !important; letter-spacing: 0.22em !important; /* 2026-10-10：11px → 令牌（13）。侧栏的分节标签是导航的"目录"，整档抬起后 它比导航字（16px）小太多，读起来像掉了一层。 */ font-size: var(--fs-micro) !important; } /* —— 导航：默认 T2，悬停与激活升到 T1；激活另有朱砂指示条 —— */ .navlink, .navlink span { color: var(--yf-t2) !important; } .navlink:hover, .navlink:hover span { color: var(--yf-t1-hover) !important; } .navlink.is-active, .navlink[aria-current], .navlink.is-active span, .navlink[aria-current] span { color: var(--yf-t1) !important; } .navlink.is-active .ico, .navlink[aria-current] .ico { color: var(--yf-accent-mark) !important; } .navlink__count { color: var(--yf-t4) !important; } /* —— 曲目列表：曲名 T2（悬停/当前升 T1）· 艺人 T3 · 专辑/序号/时长 T4 —— */ .song__title { color: var(--yf-t2) !important; } .song:hover .song__title { color: var(--yf-t1-hover) !important; } .song__artist { color: var(--yf-t3) !important; } .song__album, .song__num, .song__time { color: var(--yf-t4) !important; } .song.is-current { background: rgba(224, 87, 74, 0.10) !important; box-shadow: inset 2px 0 0 var(--yf-accent-mark) !important; } .song.is-current .song__title { color: var(--yf-t1) !important; } .song.is-current .song__artist { color: var(--yf-t3) !important; } /* —— 元信息与参数：统一到 T4，避免同一行里出现三种灰 —— */ .card__meta, .gauge__text, .gauge__text b, .playlist-link em, .songgroup__count, .dock__meta, .dock .timeline__t, .dock .quality, .quality, .stat__label { color: var(--yf-t4) !important; } /* —— 控件：胶囊与标签 T3，悬停 T2，选中用朱砂·文字档 —— */ .chipbtn, .tag, .chip, .srcchip { color: var(--yf-t3) !important; } .chipbtn:hover, .tag:hover { color: var(--yf-t2) !important; } .chipbtn.is-active { color: var(--yf-accent-text) !important; border-color: rgba(240, 131, 122, 0.5) !important; } /* —— 舞台页歌词：非当前句 T3，当前句用朱砂·文字档（颜色即强调，不靠加粗） —— */ .stage__lyrics:not(.is-tibetan) .lyric, .stage__lyrics:not(.is-tibetan) .lyric--idle, .stage__lyrics:not(.is-tibetan) .lyric--plain { color: var(--yf-t3) !important; } .stage__lyrics .lyric.is-current { color: var(--yf-accent-text) !important; } /* —— 正在播放/无损这类"状态"：留给河水青，不与朱砂抢语义 —— */ .is-playing, .playing-now, [data-state="playing"], .badge--lossless { color: var(--yf-state) !important; } /* ══════════════════════════════════════════════════════════════════ 界面色彩体系 —— 收敛到三色语义 + 用颜色区分区块 起因（实测）：项目 DESIGN.md 声明只用三色（朱砂 / 河水青 / 鎏金）， 但 CSS 里实际出现了 8 种： #e8c87e 鎏金 · #c8a253 鎏金深 · #5fe3d2 自造青 · #7fe6d8 又一种青 #7ed957 绿（在线） · #7fa8bd 蓝灰（HQ） · #e0a15f 橙（待转换） · #e0b070 橙金（VIP） 颜色一散，界面就失去"被设计过"的感觉。这里按语义收敛回三支： 朱砂 = 动词（播放、喜欢、当前、待处理、需要我做的事） 河水青 = 状态（正在播放、无损、在线、加载中） 鎏金 = 最珍贵一档（Hi-Res / VIP） 中性墨阶 = 其余全部（层级靠字色阶，不靠加色） ══════════════════════════════════════════════════════════════════ */ :root { --yf-cinnabar: #e0574a; /* 朱砂·色块档 */ --yf-cinnabar-text: #f0837a; /* 朱砂·文字档（6.3:1） */ --yf-river-ink: #39d3c4; /* 河水青·状态（8.6:1） */ --yf-gold-ink: #e8c87e; /* 鎏金·最珍贵（7.9:1） */ --yf-gold-deep: #c8a253; --yf-ink-strong: rgba(242, 245, 248, 0.72); --yf-ink-mid: rgba(242, 245, 248, 0.52); --yf-ink-weak: rgba(242, 245, 248, 0.34); } /* ---- ① 侧栏五个分组：一条极淡色带，把区块用颜色分开 ---- */ .rail__group { position: relative; } .rail__group::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; opacity: 0.38; transition: opacity var(--dur-fast) var(--ease-ink); } .rail__group:hover::before { opacity: 0.7; } .rail__group[aria-label="曲库"]::before { background: var(--yf-river-ink); } .rail__group[aria-label="我的音乐"]::before { background: var(--yf-cinnabar); } .rail__group[aria-label="创建的歌单"]::before { background: rgba(57, 211, 196, 0.55); } .rail__group[aria-label="收藏的歌单"]::before { background: var(--yf-gold-deep); } .rail__group[aria-label="在线音源"]::before { background: rgba(57, 211, 196, 0.32); } /* ---- ② 音质与状态徽标：参数色即信息，但只许三支 ---- */ /* 最珍贵一档 */ .badge--hires, .quality.is-hires { color: var(--yf-gold-ink) !important; border-color: rgba(232, 200, 126, 0.42) !important; background: rgba(232, 200, 126, 0.10) !important; } .badge--vip { color: var(--yf-gold-deep) !important; border-color: rgba(200, 162, 83, 0.42) !important; } /* 状态：无损 / 在线 / 加载中 全部统一到河水青（原先有三个不同的青和一个绿） */ .badge--lossless, .badge--loading, .badge--online, .quality.is-lossless { color: var(--yf-river-ink) !important; border-color: rgba(57, 211, 196, 0.42) !important; background: rgba(57, 211, 196, 0.10) !important; } /* 有损与标准：回到中性墨阶，不再另造蓝灰/橙 */ .badge--hq { color: var(--yf-ink-strong) !important; border-color: rgba(242, 245, 248, 0.18) !important; background: rgba(242, 245, 248, 0.05) !important; } .badge--standard { color: var(--yf-ink-mid) !important; border-color: rgba(242, 245, 248, 0.14) !important; background: transparent !important; } /* 待处理是"需要我做的事"，属动词域，用朱砂而不是橙色 */ .badge--needConvert { color: var(--yf-cinnabar-text) !important; border-color: rgba(240, 131, 122, 0.42) !important; background: rgba(224, 87, 74, 0.10) !important; } /* ---- ③ 卡片：发丝边 + 悬停染青（交互暗示，不靠加粗） ---- */ .card, .panel, .album-card, .songlist { transition: border-color var(--dur-mid) var(--ease-ink); } .card:hover, .album-card:hover, .card:focus-within, .album-card:focus-within { border-color: rgba(57, 211, 196, 0.26) !important; } /* ---- ④ 音源健康点：统一到状态色（原先绿/黄/红各一套） ---- */ [class*="source-dot"], [class*="srcStatus"], .dot[class*="ok"], .dot[class*="up" ] { background: var(--yf-river-ink) !important; } /* 数字：可可体是艺术字，做统计数字时关掉等宽数字特性，避免与字形冲突 */ .stat__n, .gauge__text b, .song__time, .dock .timeline__t { font-variant-numeric: normal; }