tamakyi/tamabox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

theme(shiroko): 人像换成侧后方窗边背影，压白 16% 融入场景

Browse Source 
- 盘腿坐的正面人像在空教室里像贴纸：直视访客、没有环境、配色比场景饱和
- 新素材 chibi/window.webp：侧后方视角、双手背在身后望向箱内，抠白底后压白 16%
  与压白 38% 的场景同一雾度；配椭圆接触阴影，脚踩地面不悬空
- 尺寸 380->400px，接触阴影同步复位；静态版本 20261019r
This commit is contained in:
tamakyi
2026-10-20 00:05:01 +08:00
parent b916a7f37a
commit e95671f2fe
5 changed files with 32 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/themes/shiroko.css
+12 -10
View File
@@ -7,7 +7,7 @@
素材（static/images/themes/shiroko/）：
- scene-desktop.webp / scene-mobile.webp 教室场景（16:9 / 9:16，已压白与轻度虚化）
- chibi/*.webp Q 版人物（wave/cheer/think/doze/sit），以用户立绘为参考图生成 + 抠白底
- chibi/window.webp 人物（侧后方视角、双手背在身后，已抠白底并压白 16%）
- pattern.svg / pattern-dark.svg 雪花 + 光环的极淡平铺纹样（深色模式用）
来源、提示词与处理参数见 docs/theme-shiroko.md。 */
html[data-theme-style="shiroko"] {
@@ -30,19 +30,21 @@ 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=20261019q");
--tb-page-image: url("/static/images/themes/shiroko/scene-desktop.webp?v=20261019r");
--tb-page-pattern: none;
/* 人物站在场景左侧地面：离底边 36px，配一层椭圆接触阴影，避免悬空 */
--tb-deco: url("/static/images/themes/shiroko/chibi/sit.webp"),
radial-gradient(ellipse at center, rgba(63, 96, 138, 0.20) 0%, rgba(63, 96, 138, 0) 72%),
/* 人物：侧后方视角、双手背在身后望向箱内（不是正面盯着访客），
站在场景左侧地面，离底边 36px，配一层椭圆接触阴影，避免悬空。
图已压白 12%，与压白 38% 的场景同一"雾度"，避免变成高对比贴纸。 */
--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 340px, 120px 14px, auto, auto, auto, auto;
--tb-deco-position: left max(6px, calc(50% - 520px)) bottom 36px,
left max(6px, calc(50% - 492px)) bottom 29px, left top, left top, left top, left top;
--tb-deco-size: auto 400px, 96px 13px, auto, auto, auto, auto;
--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;
}
html[data-theme="dark"][data-theme-style="shiroko"] {
@@ -65,7 +67,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=20261019q");
--tb-page-pattern: url("/static/images/themes/shiroko/pattern-dark.svg?v=20261019r");
--tb-page-pattern-size: 340px 340px;
--tb-deco: none, none, none, none, none, none;
--tb-deco-size: auto, auto, auto, auto, auto, auto;
@@ -75,7 +77,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=20261019q");
--tb-page-image: url("/static/images/themes/shiroko/scene-mobile.webp?v=20261019r");
--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;