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

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
static/css/base.css
+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;
static/css/themes/_scaffold.css
+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) 深色（必须）—— 深浅两套必须成对，缺一段会让深色用户看到「浅色的深色主题」 */
static/css/themes/sakura.css
+19 -3
View File
@@ -1,14 +1,15 @@
/* 樱花（sakura）：粉调 + 极淡网点，纯 CSS 实现，不依赖图片素材。
只覆盖令牌，不改动任何布局。要点：
- 页面底色用纯色（不用渐变），保证整页色感一致；
- 顶栏与卡片都是「带粉调的暖白」而不是纯白，和粉底之间是过渡不是硬切；
- 顶栏直接取页面底色（--tb-navbar 与 --tb-bg 同值），否则一条近白/灰的横带压在粉底上很突兀；
- 卡片用暖白（--tb-surface）而不是纯白，和粉底之间是过渡不是硬切；
- 网点放大到 24px、透明度降到 0.05，只作纸纹，不在留白处抢注意力。 */
html[data-theme-style="sakura"] {
--tb-bg: #fceef3;
--tb-surface: #fffafc;
--tb-surface-2: #fbe8ee;
--tb-surface-hover: #fdf1f5;
--tb-navbar: #fff6f9;
--tb-navbar: #fceef3;
--tb-border: #f2dde4;
--tb-text: #3a2b30;
@@ -31,7 +32,7 @@ html[data-theme="dark"][data-theme-style="sakura"] {
--tb-surface: #2f2228;
--tb-surface-2: #3a2a33;
--tb-surface-hover: rgba(255, 138, 176, 0.10);
--tb-navbar: #2a1e24;
--tb-navbar: #241a1f;
--tb-border: #4a333e;
--tb-text: #f2e4e9;
@@ -48,3 +49,18 @@ html[data-theme="dark"][data-theme-style="sakura"] {
--tb-page-pattern: radial-gradient(circle at 1px 1px, rgba(255, 138, 176, 0.05) 1px, transparent 1.4px);
--tb-page-pattern-size: 24px 24px;
}
/* 组件微调（仅外观）：顶栏融进粉底后，UIkit 默认的 #999 链接色在粉上偏淡，
提到次要文字色；hover 用主色保留反馈。深色由 base.css 的 !important 规则接管。 */
html[data-theme-style="sakura"] .uk-navbar-nav > li > a {
color: var(--tb-text-secondary);
}
html[data-theme-style="sakura"] .uk-navbar-nav > li > a:hover {
color: var(--tb-primary);
}
/* 信息提示条（匿名参与提示 / 空列表 / 未开始）：UIkit 的浅蓝在粉底上是唯一的冷色块，
换成浅粉底 + 深玫瑰文字（约 5.3:1）。深色由 base.css 的 !important 规则接管。 */
html[data-theme-style="sakura"] .uk-alert-primary {
background-color: var(--tb-primary-weak);
color: #a63a5e;
}
static/css/themes/shiroko.css
+109
View File
@@ -0,0 +1,109 @@
/* 砂狼白子（shiroko）：阿拜多斯学园的灰蓝／银白配色。
只覆盖令牌与外观层面的组件微调，不改任何布局。
素材（static/images/themes/shiroko/）：
- chibi/*.webp Q 版人物（wave/cheer/think/doze），以用户立绘为参考图生成 + 抠白底
- hero-fade.webp 用户提供的立绘（16% 透明，贴右下角当整页装饰）
- pattern.svg / pattern-dark.svg 雪花 + 光环 + 圆环点簇的平铺纹样
来源、提示词与抠图参数见 docs/theme-shiroko.md。 */
html[data-theme-style="shiroko"] {
--tb-bg: #edf2f8;
--tb-surface: #ffffff;
--tb-surface-2: #e5ecf5;
--tb-surface-hover: #eaf1f9;
--tb-navbar: #edf2f8;
--tb-border: #d6e0ec;
--tb-text: #222d3b;
--tb-text-secondary: #51607a;
--tb-text-muted: #8794a7;
--tb-primary: #4a7fc1;
--tb-primary-weak: rgba(74, 127, 193, 0.11);
--tb-shadow: 0 1px 2px rgba(38, 56, 82, 0.05), 0 12px 28px -18px rgba(38, 56, 82, 0.24);
--tb-shadow-hover: 0 1px 2px rgba(38, 56, 82, 0.07), 0 18px 40px -20px rgba(38, 56, 82, 0.32);
/* 整页底色用极浅的竖向渐变（纯 CSS）：比图片稳，不会有 cover 缩放差异 */
--tb-page-image: linear-gradient(180deg, #f8fbfe 0%, #edf3f9 58%, #e2ecf6 100%);
--tb-page-pattern: url("/static/images/themes/shiroko/pattern.svg");
--tb-page-pattern-size: 320px 320px;
/* 装饰层：左右各两个（上一下一），立绘在右下当背景水印。
顶部用固定 92px 而不是百分比：顶栏高 80px，百分比会随视口高度浮动、把头顶压进顶栏。 */
--tb-deco: url("/static/images/themes/shiroko/hero-fade.webp"),
url("/static/images/themes/shiroko/chibi/sit.webp"),
url("/static/images/themes/shiroko/chibi/wave.webp"),
url("/static/images/themes/shiroko/chibi/cheer.webp"),
none,
none;
--tb-deco-size: auto 420px, auto 240px, auto 172px, auto 160px, auto, auto;
--tb-deco-position: right 1% bottom 6px, left 1% bottom 6px, left 2% top 96px,
right 2% top 96px, left top, left top;
}
html[data-theme="dark"][data-theme-style="shiroko"] {
--tb-bg: #141a22;
--tb-surface: #1d2530;
--tb-surface-2: #273140;
--tb-surface-hover: rgba(111, 163, 224, 0.12);
--tb-navbar: #141a22;
--tb-border: #334052;
--tb-text: #e3eaf4;
--tb-text-secondary: #a6b4c8;
--tb-text-muted: #77869b;
--tb-primary: #6fa3e0;
--tb-primary-weak: rgba(111, 163, 224, 0.16);
--tb-shadow: 0 1px 2px rgba(0, 0, 0, 0.34), 0 12px 28px -18px rgba(0, 0, 0, 0.58);
--tb-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.40), 0 18px 40px -20px rgba(0, 0, 0, 0.68);
--tb-page-image: linear-gradient(180deg, #161d26 0%, #141a22 60%, #11161d 100%);
--tb-page-pattern: url("/static/images/themes/shiroko/pattern-dark.svg");
--tb-page-pattern-size: 320px 320px;
/* 深色下浅色线稿会糊成灰块，装饰层整体关掉，只留底色与浅色图案 */
--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;
}
/* 高屏才放中间两个：矮屏（1366×768 等）立绘从 348px 起，中间位会和它重叠。
门槛按「真实视口」定：1080p 全屏的 innerHeight 约 950-990，所以写 920 而不是 1050。 */
@media (min-height: 920px) {
html[data-theme-style="shiroko"] {
--tb-deco: url("/static/images/themes/shiroko/hero-fade.webp"),
url("/static/images/themes/shiroko/chibi/sit.webp"),
url("/static/images/themes/shiroko/chibi/wave.webp"),
url("/static/images/themes/shiroko/chibi/cheer.webp"),
url("/static/images/themes/shiroko/chibi/think.webp"),
url("/static/images/themes/shiroko/chibi/doze.webp");
--tb-deco-size: auto 420px, auto 240px, auto 172px, auto 160px, auto 126px, auto 126px;
--tb-deco-position: right 1% bottom 6px, left 1% bottom 6px, left 2% top 96px,
right 2% top 96px, left 2.6% top 46%, right 2.6% top 46%;
}
}
/* 窄屏：只保留立绘和一个坐姿，尺寸同步收小 */
@media (max-width: 640px) {
html[data-theme-style="shiroko"] {
--tb-deco: url("/static/images/themes/shiroko/hero-fade.webp"),
url("/static/images/themes/shiroko/chibi/sit.webp"), none, none, none, none;
--tb-deco-size: auto 300px, auto 130px, auto, auto, auto, auto;
--tb-deco-position: right 2% bottom 0, left 1% bottom 0, left top, left top, left top,
left top;
--tb-page-pattern-size: 240px 240px;
}
}
/* 组件微调（仅外观） */
/* 顶栏融进页面底色后，UIkit 默认的 #999 在灰蓝底上偏淡，提到次要文字色 */
html[data-theme-style="shiroko"] .uk-navbar-nav > li > a {
color: var(--tb-text-secondary);
}
html[data-theme-style="shiroko"] .uk-navbar-nav > li > a:hover {
color: var(--tb-primary);
}