tamakyi
27856dd4a2
一号事项（剩余令牌化）：
- templates/user/profile.html 20 处、base.css 9 处 font-size 全部落到 --tb-fs-*
- base.css 导航四档（0.95/0.88/0.82/0.78）合并成「桌面 md → ≤1000 xs」；logo 三档统一 lg
- 有理由保留的：.tb-pin-flag / .md-body code 的 0.9em（相对父级）、验证码 1.4/1.2rem（等宽字形）、
chat 关闭按钮 40px、password 页 3em、mail/*（邮件客户端不保证 var()）；行内 12px/0.75rem 等值顺手换掉
二号事项（主色对比度）：
- base/default #1e87f0(3.42) → #0e6fd0(4.70)；shiroko #4a7fc1(3.69) → #3b6dac(4.74)；
sakura #e5678f(2.80) → #ba3e66(4.70，饱和度压到 .5 保持柔和)。同色相只压亮度，目标 4.7 留余量
- 深色块 muted 之前只对 --tb-bg 算（4.7 以为过了），对压平后的卡片其实 4.31/4.17 → 提到 #a18790 / #7f8ea1
- 新增 --tb-on-primary（亮 #ffffff / 暗 #0b1016）：深色模式主色偏亮，白字只有 2.2~3.1:1，
用同一个令牌兼顾「链接色要深」和「按钮底要深」是矛盾的。.uk-button-primary 与
.uk-label:not(语义色) 改吃它 → 深色按钮变成浅底深字（6.10 / 8.65 / 7.27）
- 顺手封掉几处主色泄漏：header 验证码 focus、profile .feat-day.is-on、explore 随机投票的 JS outline、
vote-results 行内色，全部改成令牌（否则换主题时不跟着变）
生成器同步：paletteVars 导出 --tb-on-primary（白字/深字择优）；?dump=palette 增加
onPrimaryCr / onPrimaryPickedBest / warnings —— 主色卡中间调时只警告不判失败；
配色面板给橙色提示。_scaffold 令牌 29 → 30。StaticVersion → 20261021c。
验证：TestSwatch 断言同步为 #ba3e66；8 种组合（base 亮暗 + 三主题亮暗）对比度全部 ≥4.5；
go test internal/{theme,templates,conf,i18n} 全绿；生成器 validate/fit/quality/palette/layers/fx/fxpipe 全过。
69 lines
3.0 KiB
CSS
69 lines
3.0 KiB
CSS
/* 樱花（sakura）：粉调 + 极淡网点，纯 CSS 实现，不依赖图片素材。
|
|
只覆盖令牌，不改动任何布局。要点：
|
|
- 页面底色用纯色（不用渐变），保证整页色感一致；
|
|
- 顶栏直接取页面底色（--tb-navbar 与 --tb-bg 同值），否则一条近白/灰的横带压在粉底上很突兀；
|
|
- 卡片用暖白（--tb-surface）而不是纯白，和粉底之间是过渡不是硬切；
|
|
- 网点放大到 24px、透明度降到 0.05，只作纸纹，不在留白处抢注意力。 */
|
|
html[data-theme-style="sakura"] {
|
|
--tb-bg: #fceef3;
|
|
--tb-surface: #fffafc;
|
|
--tb-surface-2: #fbe8ee;
|
|
--tb-surface-hover: #fdf1f5;
|
|
--tb-navbar: #fceef3;
|
|
--tb-border: #f2dde4;
|
|
|
|
--tb-text: #3a2b30;
|
|
--tb-text-secondary: #6b545c;
|
|
/* 弱化文字：旧值 #a08c94 只有 2.8:1（看不清），#78696e 是 4.6:1，踩住 AA 下限 */
|
|
--tb-text-muted: #78696e;
|
|
|
|
/* 原来的 #e5678f 在粉底上只有 2.80:1（链接几乎看不清）；同色相压深到 #ba3e66 = 4.70:1 */
|
|
--tb-primary: #ba3e66;
|
|
--tb-primary-weak: rgba(186, 62, 102, 0.12);
|
|
|
|
--tb-shadow: 0 1px 2px rgba(120, 60, 80, 0.05), 0 12px 28px -18px rgba(120, 60, 80, 0.22);
|
|
--tb-shadow-hover: 0 1px 2px rgba(120, 60, 80, 0.07), 0 18px 40px -20px rgba(120, 60, 80, 0.30);
|
|
|
|
--tb-page-image: none;
|
|
--tb-page-pattern: radial-gradient(circle at 1px 1px, rgba(229, 103, 143, 0.05) 1px, transparent 1.4px);
|
|
--tb-page-pattern-size: 24px 24px;
|
|
}
|
|
|
|
html[data-theme="dark"][data-theme-style="sakura"] {
|
|
--tb-bg: #241a1f;
|
|
--tb-surface: #2f2228;
|
|
--tb-surface-2: #3a2a33;
|
|
--tb-surface-hover: rgba(255, 138, 176, 0.10);
|
|
--tb-navbar: #241a1f;
|
|
--tb-border: #4a333e;
|
|
|
|
--tb-text: #f2e4e9;
|
|
--tb-text-secondary: #c6aab4;
|
|
--tb-text-muted: #a18790;
|
|
|
|
--tb-primary: #ff8ab0;
|
|
--tb-primary-weak: rgba(255, 138, 176, 0.16);
|
|
|
|
--tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.34), 0 12px 28px -18px rgba(0, 0, 0, 0.58);
|
|
--tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.40), 0 18px 40px -20px rgba(0, 0, 0, 0.68);
|
|
|
|
--tb-page-image: none;
|
|
--tb-page-pattern: radial-gradient(circle at 1px 1px, rgba(255, 138, 176, 0.05) 1px, transparent 1.4px);
|
|
--tb-page-pattern-size: 24px 24px;
|
|
}
|
|
|
|
/* 组件微调（仅外观）：顶栏融进粉底后，UIkit 默认的 #999 链接色在粉上偏淡，
|
|
提到次要文字色；hover 用主色保留反馈。深色由 base.css 的 !important 规则接管。 */
|
|
html[data-theme-style="sakura"] .uk-navbar-nav > li > a {
|
|
color: var(--tb-text-secondary);
|
|
}
|
|
html[data-theme-style="sakura"] .uk-navbar-nav > li > a:hover {
|
|
color: var(--tb-primary);
|
|
}
|
|
/* 信息提示条（匿名参与提示 / 空列表 / 未开始）：UIkit 的浅蓝在粉底上是唯一的冷色块，
|
|
换成浅粉底 + 深玫瑰文字（约 5.3:1）。深色由 base.css 的 !important 规则接管。 */
|
|
html[data-theme-style="sakura"] .uk-alert-primary {
|
|
background-color: var(--tb-primary-weak);
|
|
color: #a63a5e;
|
|
}
|