theme v4: 装饰层 + 砂狼白子 Q 版插画

- base.css 新增装饰层令牌 --tb-deco / -size / -position:固定 6 个槽位、固定像素四角定位,
  不受 cover 裁切影响(竖屏桌面会把贴边的插画切掉)。多层背景的列表长度必须恒定,
  值一多一少会整层错位(表现为整页重复同一张图)。
- shiroko:4 个 Q 版人物(wave/cheer/think/sit/doze),以用户立绘为参考图 image-to-image
  生成后抠白底;左右各两个、立绘在右下当水印。顶部用固定 96px 避开顶栏,
  真实视口 ≥920px 才补中间两个,矮屏不放(否则与立绘重叠)。
  深色关掉装饰层,图案改为几何纹样。
- sakura:顶栏取页面底色、顶栏链接提到次要文字色、uk-alert-primary 改粉底。
- 主题注入补上 /user 后台与 /vote 投票页(跟随箱主/发布者的语言与配色)。
- StaticVersion → 20261019m
This commit is contained in:
tamakyi
2026-10-19 20:37:28 +08:00
parent 38cd41afde
commit 0c39afff3a
23 changed files with 313 additions and 21 deletions
+12 -1
View File
@@ -15,7 +15,7 @@
display / flex / grid、position 一律不动 —— 主题不是换皮模板。
3. 本文件不参与构建,仅作参考;真正生效的是同目录下的 <slug>.css。
── 可用的 20 个令牌 ──────────────────────────────────────────────
── 可用的 23 个令牌 ──────────────────────────────────────────────
底色层 --tb-bg 页面底色(html/body)
--tb-surface 卡片、输入框等前景面板
--tb-surface-2 次级面(标签底、进度条轨道、代码块)
@@ -34,6 +34,10 @@
页面背景 --tb-page-image 整页背景图(cover,fixed)
--tb-page-pattern 整页图案(平铺,可叠加在背景图之上)
--tb-page-pattern-size 图案平铺尺寸(默认 auto)
装饰 --tb-deco 四角装饰图,固定 6 个槽位(必须写满 6 个,缺的填 none);
固定像素尺寸、不随视口裁切,适合放人物/摆件。默认 none。
--tb-deco-size 对应每张的尺寸,如 auto 200px, auto 150px, auto, auto, auto, auto
--tb-deco-position 对应每张的位置,如 left 1% bottom 0, right 1% top 4%, left top, …
── 素材规格(放 R2,不需要重新编译) ─────────────────────────────
页面背景图 2400×1600(3:2)或 2560×1440,WebP q80,≤300KB;明暗各一张:
@@ -75,6 +79,13 @@ html[data-theme-style="SLUG"] {
--tb-page-image: none;
--tb-page-pattern: none;
--tb-page-pattern-size: auto;
/* 四角装饰(放人物/摆件)。固定 6 个槽位,必须写满,缺的填 none——
值一多一少,多背景各列表就错位(会出现整页重复同一张图)。
尺寸用「auto <高度>」,位置可写 left 2% bottom 0 / right 2% top 6% / left 2% center。 */
--tb-deco: none, none, none, none, none, none;
--tb-deco-size: auto, auto, auto, auto, auto, auto;
--tb-deco-position: left top, left top, left top, left top, left top, left top;
}
/* 2) 深色(必须)—— 深浅两套必须成对,缺一段会让深色用户看到「浅色的深色主题」 */