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
+14 -6
View File
@@ -29,6 +29,13 @@
--tb-page-image: none;
--tb-page-pattern: none;
--tb-page-pattern-size: auto;
/* 装饰层:固定像素尺寸 + 四角定位,不受 cover 裁切影响(整页背景图做不到这一点,
视口比例一变,贴在图片边缘的插画就会被裁掉)。
⚠️ 固定 6 个槽位:background-* 各列表的层数必须恒定(1 图案 + 6 装饰 + 1 背景 = 8),
缺省用 none 占位;值的个数一变,多背景的分层就会整体错位。 */
--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;
}
html[data-theme="dark"] {
--tb-bg: #1a1d23;
@@ -266,12 +273,13 @@
body {
font-family: var(--tb-font);
background-color: var(--tb-bg);
/* 主题的整页背景:图案(平铺)在上,图片(cover)在下,都不设置时等价于纯色 */
background-image: var(--tb-page-pattern, none), var(--tb-page-image, none);
background-size: var(--tb-page-pattern-size, auto), cover;
background-repeat: repeat, no-repeat;
background-position: left top, center center;
background-attachment: scroll, fixed;
/* 主题的整页背景:四角装饰 + 平铺图案 + cover 背景图(共 6 层,顺序即绘制顺序) */
background-image: var(--tb-page-pattern), var(--tb-deco), var(--tb-page-image);
background-size: var(--tb-page-pattern-size), var(--tb-deco-size), cover;
background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
no-repeat;
background-position: left top, var(--tb-deco-position), center center;
background-attachment: scroll, fixed, fixed, fixed, fixed, fixed, fixed, fixed;
color: var(--tb-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;