theme(shiroko): 换前景空地的场景,补自行车/步枪,修耳朵与白孔

部署反馈三个问题:
1. 狼耳顶端被削平——上一版用矩形抹光环,矩形右下角切到了左耳尖。
   改成只抹光环的非白连通域(与头发不连通,bbox 291,93-584,232),耳朵完整。
2. 手内侧 / 大腿内侧白没抠干净——那是环状闭合的白色区域,四角 floodfill 进不去。
   新增封闭白孔检测(>=246 且不与边缘连通,面积 >=40)整块掏空,袜子(237)不受影响。
3. 人物像站在课桌上——原场景前景全是课桌,脚下没有地面。
   重出场景:前景是空地,课桌退到右后方;人物脚下是地板 + 接触阴影。

同时补上她的自行车与步枪:独立素材 props/bike.webp,镜像成车头朝右与人同向,
放在人物身后偏左(第一层是人,车在第三层,天然被她遮住),视口变化时两者同步移动。
静态版本 20261020d
This commit is contained in:
tamakyi
2026-10-20 09:29:09 +08:00
parent 2e9bd6bb73
commit 15aebd6d19
7 changed files with 36 additions and 13 deletions
+13 -10
View File
@@ -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;