diff --git a/docs/theme-shiroko.md b/docs/theme-shiroko.md index 6afd21d..15fdcc1 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` 第 3 槽位 | | 空气层 | 左窗光柱 / 右侧暖散景 / 脚下地面光斑 / 底部压深 | `--tb-deco` 后四个槽位（全是渐变） | | 深色 | 不用场景（白天教室压在深底上会脏），回到深色渐变 + 极淡纹样 | 深色块单独覆盖 | @@ -69,12 +70,13 @@ available = default,sakura,shiroko | 文件 | 用途 | 尺寸 | 体积 | | --- | --- | --- | --- | | `chibi/window.webp` | **当前使用**：侧后方视角、双手背在身后望向箱内，压白 16% | 135×460 | 13KB | +| `props/bike.webp` | 自行车 + 步枪（镜像后车头朝右），压白 26%，自带接触阴影 | 397×259 | 22KB | | `chibi/wave.webp` | 备用：正面挥手 | 324×620 | 27KB | | `chibi/cheer.webp` | 双手欢呼 | 354×620 | 27KB | | `chibi/think.webp` | 托腮 | 283×620 | 26KB | | `chibi/doze.webp` | 打瞌睡 | 274×620 | 26KB | -| `scene-desktop.webp` | 教室场景（16:9，压白 38% + 虚化 1.4px） | 1920×1080 | 22KB | -| `scene-mobile.webp` | 教室场景（9:16 中裁） | 720×1003 | 6KB | +| `scene-desktop.webp` | 教室场景（16:9，前景是空地，便于人物站立） | 1920×1080 | 19KB | +| `scene-mobile.webp` | 同一张场景的竖版裁切 | 720×1003 | 10KB | | `pattern-dark.svg` | 深色模式平铺纹样（雪花 + 光环） | 240×240 | 0.7KB | ## 来源与授权 @@ -122,6 +124,24 @@ available = default,sakura,shiroko 人像不压白就是全页对比度最高的一块，必然"突兀"； 5. 裁 bbox、缩到高 460，WebP q86（约 14KB）。 +### 人物与道具必须用「同一套定位公式」 + +`background-position` 里的百分比**不是相对视口宽度**，而是相对 `(定位区宽 - 图片宽)`。 +所以人物和自行车即使写同样的 `calc(50% - Npx)`，两者也会因为图宽不同而错位—— +实测把车按人的公式放，车直接跑出屏幕，只剩一片轮圈。 + +正确做法是按各自宽度反解：设人物宽 `wc`、车宽 `wb`，要让车的右沿贴住人的左沿（留 gap）： + +``` +人的 left = (W - wc)/2 + Bc +车的 left = (W - wb)/2 + Bc - gap - wb + wc/2 - wc/2 ... 直接解 B 更省事 +``` + +本主题实测：人物 `calc(50% - 524px)`、车 `calc(50% - 612px)`。 + +另外**道具不要烘焙进背景图**：背景是 `cover`，视口一变裁切量就变， +而人物是固定 px 定位的，两者必然分家。烘焙只适合「和人无关的背景物件」。 + 关键经验：**必须是"平涂无描边"**。先试过用手写 SVG 线稿，风格和用户那张立绘（色块、无描边）冲突， 而且没有真人手感会画得很抽象；用参考图 + image-to-image 出来的四张，角色特征和画风都稳。 diff --git a/internal/conf/static.go b/internal/conf/static.go index 66efcdf..9980109 100644 --- a/internal/conf/static.go +++ b/internal/conf/static.go @@ -10,7 +10,7 @@ var ( BuildCommit = "dev" // StaticVersion 静态资源缓存版本号：base.css 与主题 css 共用，改样式只改这一处。 - StaticVersion = "20261020b" + StaticVersion = "20261020d" ) // 文本审核通道取值（[security] text_censor_source）。定义在 conf 侧， diff --git a/static/css/themes/shiroko.css b/static/css/themes/shiroko.css index ae2c87c..d9c85da 100644 --- a/static/css/themes/shiroko.css +++ b/static/css/themes/shiroko.css @@ -30,26 +30,29 @@ html[data-theme-style="shiroko"] { --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=20261019r"); + --tb-page-image: url("/static/images/themes/shiroko/scene-desktop.webp?v=20261020d"); --tb-page-pattern: none; /* 人物：侧后方视角、双手背在身后望向箱内（不是正面盯着访客）， 站在场景左侧地面，离底边 36px，配一层椭圆接触阴影，避免悬空。 图已压白 12%，与压白 38% 的场景同一"雾度"，避免变成高对比贴纸。 - 其余 4 个槽位是"空气"（全部是渐变，不占体积、不会成为贴纸）： - 3 左窗光柱 / 4 右侧一朵暖散景 / 5 人物脚下的地面光斑 / 6 底部轻压深。 - 光斑把人物"钉"在地上，压深让页面下沿不飘。 */ - --tb-deco: url("/static/images/themes/shiroko/chibi/window.webp?v=20261020b"), + 槽位 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(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-size: auto 400px, 96px 13px, auto 259px, 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 calc(50% - 612px) bottom 20px, + left top, left top, left top; } html[data-theme="dark"][data-theme-style="shiroko"] { @@ -72,7 +75,7 @@ html[data-theme="dark"][data-theme-style="shiroko"] { /* 深色不用浅色场景（白天教室压在深底上会很脏），回到纯色渐变 + 极淡纹样 */ --tb-page-image: linear-gradient(180deg, #161d26 0%, #141a22 60%, #11161d 100%); - --tb-page-pattern: url("/static/images/themes/shiroko/pattern-dark.svg?v=20261019r"); + --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; --tb-deco-size: auto, auto, auto, auto, auto, auto; @@ -82,7 +85,7 @@ html[data-theme="dark"][data-theme-style="shiroko"] { /* 窄屏：卡片占满宽度，两侧没有视觉空间 —— 换成竖版场景，人物退场 */ @media (max-width: 900px) { html[data-theme-style="shiroko"] { - --tb-page-image: url("/static/images/themes/shiroko/scene-mobile.webp?v=20261019r"); + --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; --tb-deco-size: auto, auto, auto, auto, auto, auto; diff --git a/static/images/themes/shiroko/chibi/window.webp b/static/images/themes/shiroko/chibi/window.webp index 3255c17..488150e 100644 Binary files a/static/images/themes/shiroko/chibi/window.webp and b/static/images/themes/shiroko/chibi/window.webp differ diff --git a/static/images/themes/shiroko/props/bike.webp b/static/images/themes/shiroko/props/bike.webp new file mode 100644 index 0000000..fa11f1d Binary files /dev/null and b/static/images/themes/shiroko/props/bike.webp differ diff --git a/static/images/themes/shiroko/scene-desktop.webp b/static/images/themes/shiroko/scene-desktop.webp index 0540486..8da34d3 100644 Binary files a/static/images/themes/shiroko/scene-desktop.webp and b/static/images/themes/shiroko/scene-desktop.webp differ diff --git a/static/images/themes/shiroko/scene-mobile.webp b/static/images/themes/shiroko/scene-mobile.webp index 42fe18b..4fea08e 100644 Binary files a/static/images/themes/shiroko/scene-mobile.webp and b/static/images/themes/shiroko/scene-mobile.webp differ