theme(shiroko): 按二次元官网构图重做——整页场景 + 悬浮磨砂 UI

参考蔚蓝档案 JP 首页(bluearchive.jp)的做法:整个视口是一张场景插画,UI 浮在场景之上,
而不是"白底 + 留白里贴几个人物"。之前几版反复调摆位都显得怪,根源就是缺了这层场景——
人物没有环境,怎么摆都是贴纸。

- 新增教室场景两张(1920×1080 / 720×1003,共 28KB):生成后裁掉右下角水印、
  混白 38%、模糊 1.4px,保证白卡片仍有对比度;
- 卡片与顶栏改半透明白 + backdrop-filter 磨砂(深色关闭,背后没场景时半透明只会变浑);
- 人物站在场景左侧地面(340px,离底边 36px)+ 椭圆接触阴影;
- 浅色不再叠平铺纹样(压在实景上会变噪点),pattern.svg 删除,深色保留 pattern-dark;
- 顺带修 ruleBody 不剥 CSS 注释的缺陷:令牌前写注释会让 tokenValue 取到粘连键,
  色块预览静默失效(新增 TestRuleBodyIgnoresComments 守住);
- StaticVersion → 20261019q
This commit is contained in:
tamakyi
2026-10-19 23:01:55 +08:00
parent f876aa6f4f
commit 33e31cf4dc
9 changed files with 110 additions and 86 deletions
+1 -1
View File
@@ -10,7 +10,7 @@ var (
BuildCommit = "dev"
// StaticVersion 静态资源缓存版本号:base.css 与主题 css 共用,改样式只改这一处。
StaticVersion = "20261019p"
StaticVersion = "20261019q"
)
// 文本审核通道取值([security] text_censor_source)。定义在 conf 侧,
+5 -1
View File
@@ -28,6 +28,8 @@ var (
slugRe = regexp.MustCompile(`^[a-z0-9][a-z0-9-]{0,31}$`)
// 仅接受纯色值,避免把主题文件里的任意内容拼进设置页的 style 属性。
colorRe = regexp.MustCompile(`^(#[0-9a-fA-F]{3,8}|rgba?\([0-9.,\s%/]+\))$`)
// 主题 css 里的块注释;取令牌前先剥掉,避免注释与令牌粘连
commentRe = regexp.MustCompile(`(?s)/\*.*?\*/`)
)
// Theme 是设置页需要的一项。名称由 i18n 键 theme.name.<slug> 提供,
@@ -174,7 +176,9 @@ func ruleBody(css, selector string) string {
if end < 0 {
return ""
}
return css[start : start+end]
// 注释必须剥掉:tokenValue 按 ";" 切分再按 ":" 取值,行内注释会和后面的令牌粘成一段,
// 取到的键变成 "/* ... */ --tb-surface",色块预览就静默失效。
return commentRe.ReplaceAllString(css[start:start+end], "")
}
func tokenValue(block, name string) string {
+13
View File
@@ -102,3 +102,16 @@ func TestSwatch(t *testing.T) {
assert.Equal(t, "", swatchOf(`html[data-theme-style="x"] { --tb-bg: url(evil); --tb-primary: #fff; }`, "x"),
"非色值内容不得进入 swatch")
}
func TestRuleBodyIgnoresComments(t *testing.T) {
// 令牌前面写一行注释很常见;不剥注释的话 tokenValue 会取到
// "/* ... */ --tb-bg" 这种粘连键,色块预览静默失效。
css := `html[data-theme-style="x"] {
/* 磨砂卡片:半透明白 */
--tb-bg: #ffffff;
--tb-primary: rgba(74, 127, 193, 0.11);
}`
body := ruleBody(css, `html[data-theme-style="x"]`)
assert.Equal(t, "#ffffff", tokenValue(body, "--tb-bg"))
assert.Equal(t, "rgba(74, 127, 193, 0.11)", tokenValue(body, "--tb-primary"))
}