tamakyi/tamabox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1f29d3eb2e20c9063d4e9b93ac340c3607c8344b
tamabox/static/css/themes/shiroko.css
T
tamakyi 27856dd4a2 字号阶梯收尾 + 主色补到 WCAG AA（新增 --tb-on-primary） 
一号事项（剩余令牌化）：
- 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 全过。
2026-10-21 18:39:08 +08:00

138 lines
6.9 KiB
CSS
Raw Blame History

/* 砂狼白子（shiroko）：阿拜多斯学园的灰蓝／银白配色。
只覆盖令牌与外观层面的组件微调，不改任何布局。
做法参考二次元官网（蔚蓝档案 JP 首页）的构图：**整个视口是一张场景插画，UI 浮在场景之上**，
而不是"白底 + 留白里贴几个人"。这里用一张教室场景（压白 38%）当整页背景，
卡片与顶栏改成磨砂半透明，人物站在场景左侧地面 —— 人物有环境，才不像贴纸。
素材（static/images/themes/shiroko/）：
- scene-desktop.webp / scene-mobile.webp 教室场景（16:9 / 9:16，已压白与轻度虚化）
- chibi/window.webp 人物（侧后方视角、双手背在身后，已抠白底并压白 16%）
- pattern.svg / pattern-dark.svg 雪花 + 光环的极淡平铺纹样（深色模式用）
来源、提示词与处理参数见 docs/theme-shiroko.md。 */
html[data-theme-style="shiroko"] {
--tb-bg: #eef3f9;
/* 磨砂卡片：半透明白 + backdrop-filter，让场景的颜色透上来一点点 */
--tb-surface: rgba(255, 255, 255, 0.86);
--tb-surface-2: rgba(229, 236, 245, 0.92);
--tb-surface-hover: rgba(234, 241, 249, 0.92);
--tb-navbar: rgba(255, 255, 255, 0.52);
--tb-border: #d6e0ec;
--tb-text: #222d3b;
--tb-text-secondary: #51607a;
/* 弱化文字：旧值 #8794a7 只有 2.76:1（看不清），#656e7a 是 4.63:1，踩住 AA 下限 */
--tb-text-muted: #656e7a;
/* 原来的 #4a7fc1 在 #eef3f9 上只有 3.69:1；同色相压深到 #3b6dac = 4.74:1 */
--tb-primary: #3b6dac;
--tb-primary-weak: rgba(59, 109, 172, 0.11);
--tb-shadow: 0 1px 2px rgba(38, 56, 82, 0.05), 0 18px 44px -22px rgba(38, 56, 82, 0.30);
--tb-shadow-hover: 0 1px 2px rgba(38, 56, 82, 0.07), 0 24px 56px -24px rgba(38, 56, 82, 0.38);
/* 整页场景：一张教室插画，cover 铺满；不再叠纹样（纹样压在实景上会变成噪点） */
--tb-page-image: url("/static/images/themes/shiroko/scene-desktop.webp?v=20261020d");
--tb-page-pattern: none;
/* 人物：侧后方视角、双手背在身后望向箱内（不是正面盯着访客），
站在场景左侧地面，离底边 36px，配一层椭圆接触阴影，避免悬空。
图已压白 12%，与压白 38% 的场景同一"雾度"，避免变成高对比贴纸。
槽位 3 是她的自行车（车头朝右，与人同向，斜靠着一把步枪，自带接触阴影）。
它必须和人物用**同一套定位公式**，否则视口一变两件东西就分家了——
所以不能烘焙进背景图里。
其余 3 个槽位是"空气"（纯渐变）：4 左窗光柱 / 5 地面光斑 / 6 底部轻压深。 */
--tb-deco: url("/static/images/themes/shiroko/chibi/window.webp?v=20261020d"),
radial-gradient(ellipse at center, rgba(63, 96, 138, 0.18) 0%, rgba(63, 96, 138, 0) 72%),
url("/static/images/themes/shiroko/props/bike.webp?v=20261020d"),
linear-gradient(112deg, rgba(255, 250, 236, 0.50) 0%, rgba(255, 250, 236, 0.22) 20%, rgba(255, 250, 236, 0) 44%),
radial-gradient(ellipse 560px 170px at 28% 94%, rgba(255, 248, 228, 0.80) 0%, rgba(255, 248, 228, 0) 72%),
linear-gradient(0deg, rgba(110, 128, 156, 0.10) 0%, rgba(110, 128, 156, 0) 24%),
none, none, none, none;
--tb-deco-size: auto 400px, 96px 13px, auto 259px, 100% 100%, 100% 100%, 100% 100%,
auto, auto, auto, auto;
--tb-deco-position: left max(10px, calc(50% - 524px)) bottom 36px,
left max(22px, calc(50% - 512px)) bottom 29px,
left calc(50% - 612px) bottom 20px,
left top, left top, left top,
left top, left top, left top, left top;
}
html[data-theme="dark"][data-theme-style="shiroko"] {
--tb-bg: #141a22;
--tb-surface: #1d2530;
--tb-surface-2: #273140;
--tb-surface-hover: rgba(111, 163, 224, 0.12);
--tb-navbar: #141a22;
--tb-border: #334052;
--tb-text: #e3eaf4;
--tb-text-secondary: #a6b4c8;
--tb-text-muted: #7f8ea1;
--tb-primary: #6fa3e0;
--tb-primary-weak: rgba(111, 163, 224, 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: linear-gradient(180deg, #161d26 0%, #141a22 60%, #11161d 100%);
--tb-page-pattern: url("/static/images/themes/shiroko/pattern-dark.svg?v=20261020d");
--tb-page-pattern-size: 340px 340px;
--tb-deco: none, none, none, none, none, none, none, none, none, none;
--tb-deco-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
--tb-deco-position: left top, left top, left top, left top, left top, left top, left top,
left top, left top, left top;
}
/* 窄屏：卡片占满宽度，两侧没有视觉空间 —— 换成竖版场景，人物退场 */
@media (max-width: 900px) {
html[data-theme-style="shiroko"] {
--tb-page-image: url("/static/images/themes/shiroko/scene-mobile.webp?v=20261020d");
--tb-surface: rgba(255, 255, 255, 0.92);
--tb-deco: none, none, none, none, none, none, none, none, none, none;
--tb-deco-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
--tb-deco-position: left top, left top, left top, left top, left top, left top, left top,
left top, left top, left top;
}
}
/* 组件微调（仅外观） */
/* 磨砂：卡片与顶栏让场景透上来，才像"UI 浮在画面上"而不是压在照片上 */
html[data-theme-style="shiroko"] .uk-card-default {
backdrop-filter: blur(16px) saturate(1.05);
-webkit-backdrop-filter: blur(16px) saturate(1.05);
box-shadow: 0 0 0 1px rgba(59, 109, 172, 0.12), var(--tb-shadow);
}
html[data-theme-style="shiroko"] .uk-card-default.uk-card-hover:hover {
box-shadow: 0 0 0 1px rgba(59, 109, 172, 0.18), var(--tb-shadow-hover);
}
html[data-theme-style="shiroko"] .uk-navbar-container:not(.uk-navbar-transparent) {
background-color: var(--tb-navbar);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
}
/* 深色不用半透明（背后没有场景，半透明只会让层次变浑），也不加模糊 */
html[data-theme="dark"][data-theme-style="shiroko"] .uk-card-default {
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 0 0 1px rgba(111, 163, 224, 0.14), var(--tb-shadow);
}
html[data-theme="dark"][data-theme-style="shiroko"] .uk-navbar-container:not(.uk-navbar-transparent) {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* 顶栏融进场景后，UIkit 默认的 #999 偏淡，提到次要文字色 */
html[data-theme-style="shiroko"] .uk-navbar-nav > li > a {
color: var(--tb-text-secondary);
}
html[data-theme-style="shiroko"] .uk-navbar-nav > li > a:hover {
color: var(--tb-primary);
}
Reference in New Issue View Git Blame Copy Permalink