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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user