theme(shiroko): 补四层空气层——窗光/暖散景/地面光斑/底部压深
场景压白 38% 后整页亮度只剩 235~246,直接摆物体会突兀,改用纯渐变造光: - 左窗光柱 linear-gradient(112deg) - 右侧一朵 120px 暖散景,给右侧空白一点体积 - 人物脚下 560x170 地面光斑,把人物钉在地上 - 底部 24% 轻压深,页面下沿不飘 实测亮度差 3~9 级(肉眼可辨但不刺眼),横向扫描相邻像素差 max 4,无色阶断层。 纯白散景压在压白场景上不可见(diff 0.14),提亮必须先有暗部。 静态版本 20261020a
This commit is contained in:
+21
-1
@@ -30,6 +30,7 @@ available = default,sakura,shiroko
|
|||||||
| 底层 | 教室场景插画(压白 38%、轻度虚化) | `--tb-page-image`,16:9 桌面 / 9:16 移动两张 |
|
| 底层 | 教室场景插画(压白 38%、轻度虚化) | `--tb-page-image`,16:9 桌面 / 9:16 移动两张 |
|
||||||
| 中层 | 卡片与顶栏:半透明白 + `backdrop-filter` 磨砂 | `--tb-surface: rgba(255,255,255,.86)` / `--tb-navbar` |
|
| 中层 | 卡片与顶栏:半透明白 + `backdrop-filter` 磨砂 | `--tb-surface: rgba(255,255,255,.86)` / `--tb-navbar` |
|
||||||
| 上层 | 人物站在场景左侧地面(400px 高)+ 椭圆接触阴影 | `--tb-deco` 前两个槽位 |
|
| 上层 | 人物站在场景左侧地面(400px 高)+ 椭圆接触阴影 | `--tb-deco` 前两个槽位 |
|
||||||
|
| 空气层 | 左窗光柱 / 右侧暖散景 / 脚下地面光斑 / 底部压深 | `--tb-deco` 后四个槽位(全是渐变) |
|
||||||
| 深色 | 不用场景(白天教室压在深底上会脏),回到深色渐变 + 极淡纹样 | 深色块单独覆盖 |
|
| 深色 | 不用场景(白天教室压在深底上会脏),回到深色渐变 + 极淡纹样 | 深色块单独覆盖 |
|
||||||
|
|
||||||
摆位经验(都是踩过的):
|
摆位经验(都是踩过的):
|
||||||
@@ -40,7 +41,26 @@ available = default,sakura,shiroko
|
|||||||
- **离底边留 36px**。脚踩在窗口最后一行像素上会被读成"被裁切",抬高之后必须配接触阴影,否则变成悬空。
|
- **离底边留 36px**。脚踩在窗口最后一行像素上会被读成"被裁切",抬高之后必须配接触阴影,否则变成悬空。
|
||||||
- **纹样不要压在实景上**。平铺纹样叠在教室插画上会变成噪点,只在深色(无场景)时使用。
|
- **纹样不要压在实景上**。平铺纹样叠在教室插画上会变成噪点,只在深色(无场景)时使用。
|
||||||
- **背景图会被 `cover` 裁切**,所以场景里不能有必须完整露出的元素:教室的黑板和窗户都在中部,裁掉两头不影响。
|
- **背景图会被 `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,无可见色阶。
|
||||||
|
|
||||||
## 素材清单
|
## 素材清单
|
||||||
|
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ var (
|
|||||||
BuildCommit = "dev"
|
BuildCommit = "dev"
|
||||||
|
|
||||||
// StaticVersion 静态资源缓存版本号:base.css 与主题 css 共用,改样式只改这一处。
|
// StaticVersion 静态资源缓存版本号:base.css 与主题 css 共用,改样式只改这一处。
|
||||||
StaticVersion = "20261019r"
|
StaticVersion = "20261020a"
|
||||||
)
|
)
|
||||||
|
|
||||||
// 文本审核通道取值([security] text_censor_source)。定义在 conf 侧,
|
// 文本审核通道取值([security] text_censor_source)。定义在 conf 侧,
|
||||||
|
|||||||
@@ -35,16 +35,21 @@ html[data-theme-style="shiroko"] {
|
|||||||
|
|
||||||
/* 人物:侧后方视角、双手背在身后望向箱内(不是正面盯着访客),
|
/* 人物:侧后方视角、双手背在身后望向箱内(不是正面盯着访客),
|
||||||
站在场景左侧地面,离底边 36px,配一层椭圆接触阴影,避免悬空。
|
站在场景左侧地面,离底边 36px,配一层椭圆接触阴影,避免悬空。
|
||||||
图已压白 12%,与压白 38% 的场景同一"雾度",避免变成高对比贴纸。 */
|
图已压白 12%,与压白 38% 的场景同一"雾度",避免变成高对比贴纸。
|
||||||
|
|
||||||
|
其余 4 个槽位是"空气"(全部是渐变,不占体积、不会成为贴纸):
|
||||||
|
3 左窗光柱 / 4 右侧一朵暖散景 / 5 人物脚下的地面光斑 / 6 底部轻压深。
|
||||||
|
光斑把人物"钉"在地上,压深让页面下沿不飘。 */
|
||||||
--tb-deco: url("/static/images/themes/shiroko/chibi/window.webp?v=20261019r"),
|
--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%),
|
radial-gradient(ellipse at center, rgba(63, 96, 138, 0.18) 0%, rgba(63, 96, 138, 0) 72%),
|
||||||
none,
|
linear-gradient(112deg, rgba(255, 250, 236, 0.50) 0%, rgba(255, 250, 236, 0.22) 20%, rgba(255, 250, 236, 0) 44%),
|
||||||
none,
|
radial-gradient(circle 120px at 88% 30%, rgba(255, 252, 240, 0.42), rgba(255, 252, 240, 0) 75%),
|
||||||
none,
|
radial-gradient(ellipse 560px 170px at 28% 94%, rgba(255, 248, 228, 0.80) 0%, rgba(255, 248, 228, 0) 72%),
|
||||||
none;
|
linear-gradient(0deg, rgba(110, 128, 156, 0.10) 0%, rgba(110, 128, 156, 0) 24%);
|
||||||
--tb-deco-size: auto 400px, 96px 13px, auto, auto, auto, auto;
|
--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,
|
--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"] {
|
html[data-theme="dark"][data-theme-style="shiroko"] {
|
||||||
|
|||||||
Reference in New Issue
Block a user