From fb94b8c20424fab5a96863d088e405865ba39d92 Mon Sep 17 00:00:00 2001 From: tamakyi Date: Tue, 20 Oct 2026 01:13:59 +0800 Subject: [PATCH] =?UTF-8?q?theme(shiroko):=20=E8=A1=A5=E5=9B=9B=E5=B1=82?= =?UTF-8?q?=E7=A9=BA=E6=B0=94=E5=B1=82=E2=80=94=E2=80=94=E7=AA=97=E5=85=89?= =?UTF-8?q?/=E6=9A=96=E6=95=A3=E6=99=AF/=E5=9C=B0=E9=9D=A2=E5=85=89?= =?UTF-8?q?=E6=96=91/=E5=BA=95=E9=83=A8=E5=8E=8B=E6=B7=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 场景压白 38% 后整页亮度只剩 235~246，直接摆物体会突兀，改用纯渐变造光： - 左窗光柱 linear-gradient(112deg) - 右侧一朵 120px 暖散景，给右侧空白一点体积 - 人物脚下 560x170 地面光斑，把人物钉在地上 - 底部 24% 轻压深，页面下沿不飘 实测亮度差 3~9 级（肉眼可辨但不刺眼），横向扫描相邻像素差 max 4，无色阶断层。 纯白散景压在压白场景上不可见（diff 0.14），提亮必须先有暗部。 静态版本 20261020a --- docs/theme-shiroko.md | 22 +++++++++++++++++++++- internal/conf/static.go | 2 +- static/css/themes/shiroko.css | 19 ++++++++++++------- 3 files changed, 34 insertions(+), 9 deletions(-) diff --git a/docs/theme-shiroko.md b/docs/theme-shiroko.md index 41e2b34..fec488c 100644 --- a/docs/theme-shiroko.md +++ b/docs/theme-shiroko.md @@ -30,6 +30,7 @@ available = default,sakura,shiroko | 底层 | 教室场景插画（压白 38%、轻度虚化） | `--tb-page-image`，16:9 桌面 / 9:16 移动两张 | | 中层 | 卡片与顶栏：半透明白 + `backdrop-filter` 磨砂 | `--tb-surface: rgba(255,255,255,.86)` / `--tb-navbar` | | 上层 | 人物站在场景左侧地面（400px 高）+ 椭圆接触阴影 | `--tb-deco` 前两个槽位 | +| 空气层 | 左窗光柱 / 右侧暖散景 / 脚下地面光斑 / 底部压深 | `--tb-deco` 后四个槽位（全是渐变） | | 深色 | 不用场景（白天教室压在深底上会脏），回到深色渐变 + 极淡纹样 | 深色块单独覆盖 | 摆位经验（都是踩过的）： @@ -40,7 +41,26 @@ available = default,sakura,shiroko - **离底边留 36px**。脚踩在窗口最后一行像素上会被读成"被裁切"，抬高之后必须配接触阴影，否则变成悬空。 - **纹样不要压在实景上**。平铺纹样叠在教室插画上会变成噪点，只在深色（无场景）时使用。 - **背景图会被 `cover` 裁切**，所以场景里不能有必须完整露出的元素：教室的黑板和窗户都在中部，裁掉两头不影响。 -- **人物比例要跟场景对得上**。340px 是相对"站在前景"的尺度；缩到 240px 以下会显得像贴纸浮在半空。 +- **人物比例要跟场景对得上**。400px 是相对"站在前景"的尺度；缩到 240px 以下会显得像贴纸浮在半空。 + +### 空气层（2026-10-20 加） + +场景压白 38% 之后整页亮度都在 235~246 之间，"再加点东西"直接摆物件一定会突兀。加了四层**纯渐变**： + +| 槽位 | 作用 | 值 | +| --- | --- | --- | +| 3 | 左窗光柱（从左上斜下） | `linear-gradient(112deg, rgba(255,250,236,.50), transparent 44%)` | +| 4 | 右侧一朵暖散景（有体积感） | `radial-gradient(circle 120px at 88% 30%, rgba(255,252,240,.42), transparent 75%)` | +| 5 | 人物脚下的地面光斑（把她"钉"在地上） | `radial-gradient(ellipse 560px 170px at 28% 94%, rgba(255,248,228,.80), transparent 72%)` | +| 6 | 底部轻压深（下沿不飘） | `linear-gradient(0deg, rgba(110,128,156,.10), transparent 24%)` | + +经验： + +- 亮度差 **3~9 级**刚好能看出"有光"又不像打了聚光灯；超过 15 级就会读成一块脏。 +- 白色散景压在已经压白的场景上等于没做（实测差异 0.14 级，肉眼不可见）——**要提亮就得先有暗部**， + 所以真正起作用的是"压深 + 暖色光斑"的组合，不是加白。 +- 所有槽位必须是单张图，**不能在一个槽位里塞逗号列表**（会让层数与 size/position 错位）。 +- 8bit 渐变要检查阶梯：横向扫描线的相邻像素差应 ≤2~3；本次实测 max 4，无可见色阶。 ## 素材清单 diff --git a/internal/conf/static.go b/internal/conf/static.go index 125dd0e..ce0c17a 100644 --- a/internal/conf/static.go +++ b/internal/conf/static.go @@ -10,7 +10,7 @@ var ( BuildCommit = "dev" // StaticVersion 静态资源缓存版本号：base.css 与主题 css 共用，改样式只改这一处。 - StaticVersion = "20261019r" + StaticVersion = "20261020a" ) // 文本审核通道取值（[security] text_censor_source）。定义在 conf 侧， diff --git a/static/css/themes/shiroko.css b/static/css/themes/shiroko.css index 8a79f34..44baedb 100644 --- a/static/css/themes/shiroko.css +++ b/static/css/themes/shiroko.css @@ -35,16 +35,21 @@ html[data-theme-style="shiroko"] { /* 人物：侧后方视角、双手背在身后望向箱内（不是正面盯着访客）， 站在场景左侧地面，离底边 36px，配一层椭圆接触阴影，避免悬空。 - 图已压白 12%，与压白 38% 的场景同一"雾度"，避免变成高对比贴纸。 */ + 图已压白 12%，与压白 38% 的场景同一"雾度"，避免变成高对比贴纸。 + + 其余 4 个槽位是"空气"（全部是渐变，不占体积、不会成为贴纸）： + 3 左窗光柱 / 4 右侧一朵暖散景 / 5 人物脚下的地面光斑 / 6 底部轻压深。 + 光斑把人物"钉"在地上，压深让页面下沿不飘。 */ --tb-deco: url("/static/images/themes/shiroko/chibi/window.webp?v=20261019r"), radial-gradient(ellipse at center, rgba(63, 96, 138, 0.18) 0%, rgba(63, 96, 138, 0) 72%), - none, - none, - none, - none; - --tb-deco-size: auto 400px, 96px 13px, auto, auto, auto, auto; + 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(circle 120px at 88% 30%, rgba(255, 252, 240, 0.42), rgba(255, 252, 240, 0) 75%), + 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%); + --tb-deco-size: auto 400px, 96px 13px, 100% 100%, 100% 100%, 100% 100%, 100% 100%; --tb-deco-position: left max(10px, calc(50% - 524px)) bottom 36px, - left max(22px, calc(50% - 512px)) bottom 29px, left top, left top, left top, left top; + left max(22px, calc(50% - 512px)) bottom 29px, + left top, left top, left top, left top; } html[data-theme="dark"][data-theme-style="shiroko"] {