From 89417446219233094aa3350849ec9c1de4b22934 Mon Sep 17 00:00:00 2001 From: tamakyi Date: Thu, 22 Oct 2026 16:05:37 +0800 Subject: [PATCH] =?UTF-8?q?new-sakura=EF=BC=9A=E9=A1=B6=E6=A0=8F=E6=94=B9?= =?UTF-8?q?=E5=8D=8A=E9=80=8F=E6=98=8E=E7=A3=A8=E7=A0=82=EF=BC=8C=E5=B9=B6?= =?UTF-8?q?=E7=AB=8B=E8=A7=84=E7=9F=A9=E7=A6=81=E6=AD=A2=E5=85=A8=E9=80=8F?= =?UTF-8?q?=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 线上（box.shiroko.one/_/tamakyi）两个现象来自同一处：`--tb-navbar` 是实色， 顶栏那条带（y=20..80）把从右上角长出来的花枝齐刷刷切掉一段。 第一版顺手改成 transparent —— 花枝完整了，但顶栏"消失"：导航失去依托， 文字直接压在花纹上。用户当场否掉，要求半透明。 - 顶栏：`rgba(253,246,248,0.72)` / 深色 `rgba(34,26,30,0.72)`，配 `.uk-navbar-container{backdrop-filter:blur(12px)}`（令牌只能是颜色，模糊写在规则里）。 0.72 有依据：导航文字 #6d555d 纯底 6.34:1，最坏情况（深花瓣在顶栏后面）压平后 5.08:1。 - 花枝 top -16px → 26px：顶栏半透明后，700~760px 宽度下枝头正好压在「登录」上（截图确认）。 - 手机底栏 #tb-mobile-utils 在 base.css 写死 rgba(255,255,255,.92)，粉底上是一条白杠， 主题里改成同色系 0.92。 - 新增 TestNavbarNotFullyTransparent：拦 `transparent` / `rgba(...,0)` / `#rrggbb00`， 并说明"这不是审美偏好，是踩过之后立的规矩"。变异验证过（改回 transparent 立即 FAIL）。 约定同时写进 static/css/themes/_scaffold.css 的令牌说明。 - StaticVersion 20261022b → 20261022c：css 改了不提版本号，浏览器拿着旧样式， 现象就是"改了但线上没变"。 --- .workbuddy/memory/2026-10-22.md | 18 ++++++++++ .workbuddy/memory/topics/theme.md | 7 ++++ dev/theme-tools/gen_new_sakura.py | 24 +++++++++++-- docs/theme-new-sakura.md | 33 ++++++++++++++++++ internal/conf/static.go | 2 +- internal/theme/navbar_test.go | 57 +++++++++++++++++++++++++++++++ static/css/themes/_scaffold.css | 8 +++-- static/css/themes/new-sakura.css | 24 ++++++++++--- 8 files changed, 163 insertions(+), 10 deletions(-) create mode 100644 internal/theme/navbar_test.go diff --git a/.workbuddy/memory/2026-10-22.md b/.workbuddy/memory/2026-10-22.md index dba4093..f93c002 100644 --- a/.workbuddy/memory/2026-10-22.md +++ b/.workbuddy/memory/2026-10-22.md @@ -185,3 +185,21 @@ 以后在 `.uk-container` 里加末位区块都绕这条。 - 环境坑：沙箱 go 是 1.25.5，go.mod 要 1.27.3，GOTOOLCHAIN=auto 需下载工具链模块， 而 GOSUMDB=off 会卡住校验 → 下载工具链那次要放开 GOSUMDB（goproxy.cn 会代理 sumdb）。 + +**7) 顶栏：实色 → 半透明磨砂（用户：不能全透明，以后别再来一次）** +- 线上 `https://box.shiroko.one/_/tamakyi` 实测：`--tb-navbar=#fdf6f8` 实色，顶栏带（y=20..80） + 把右上花枝齐刷刷切一段；`--tb-navbar` 默认是 `--tb-surface`，彩色主题不覆盖就成一条近白横带。 +- 第一版改成 `transparent` 被用户否掉：花枝完整了但顶栏"消失"，导航没依托、文字压在花纹上。 +- 最终：`rgba(253,246,248,0.72)` / `rgba(34,26,30,0.72)` + `backdrop-filter: blur(12px)` + （模糊只能写在规则里，令牌只是颜色）。0.72 有依据：文字 `#6d555d` 纯底 6.34:1， + 最坏（深花瓣压顶栏后面）压平后 5.08:1。 +- 花枝 `top` 从 -16px 下移到 26px：顶栏透明后 700~760px 宽度下枝头会压到「登录」（截图确认）。 +- 守门：`internal/theme/navbar_test.go::TestNavbarNotFullyTransparent` 拦 + `transparent` / `rgba(...,0)` / `#rrggbb00`，变异验证过。约定同步写进 + `static/css/themes/_scaffold.css` 的令牌注释与 `topics/theme.md`。 +- 手机底栏 `#tb-mobile-utils` 在 base.css 写死 `rgba(255,255,255,.92)`，彩色主题要自己调（本例改同色系 0.92）。 +- ⚠️ `StaticVersion` → `20261022c`：主题 CSS 改了必须提版本号，否则浏览器拿着旧 css， + 现象就是「改了但线上没变」。 +- ⚠️ 跑 go 命令时**别加 `GOSUMDB=off`**：本机 go 1.25.5，go.mod 要 1.27.3， + `GOTOOLCHAIN=auto` 要校验 toolchain 模块，关掉 sumdb 会直接报 "verifying module"。 + 只设 `GOPROXY=https://goproxy.cn,direct GOFLAGS=-mod=mod` 即可（toolchain 已缓存）。 diff --git a/.workbuddy/memory/topics/theme.md b/.workbuddy/memory/topics/theme.md index 1940d54..4377aad 100644 --- a/.workbuddy/memory/topics/theme.md +++ b/.workbuddy/memory/topics/theme.md @@ -27,6 +27,13 @@ - ⚠️ **UIkit 3.3.3 主色是编译期常量 `#1e87f0`**，令牌注入不进去。base.css 末尾按组件映射（a/uk-link、 uk-button-primary、checkbox/radio、input:focus、uk-tab active、`.uk-progress`、`.uk-label:not(...)`）。 - 令牌 `--tb-navbar`（顶栏底色，默认 `var(--tb-surface)`）：页面底色偏彩时主题必须覆盖。 + ⚠️ **顶栏只能半透明，不能全透明**（2026-10-22 用户明确要求）：装饰层从角落长出来时实色顶栏会把 + 花枝切一段；但改成 `transparent` 顶栏就"消失"了，导航失去依托、文字压在花纹上。正解是 + `rgba(bg, 0.72)` + `.uk-navbar-container{backdrop-filter: blur(12px)}`（模糊只能写在规则里， + 令牌只是颜色）。`TestNavbarNotFullyTransparent` 拦 `transparent` / `rgba(...,0)` / `#rrggbb00`。 + 同理 `#tb-mobile-utils` 在 base.css 里写死 `rgba(255,255,255,.92)`，彩色主题要自己调成同色系。 +- ⚠️ 装饰层会穿过顶栏区域时，`top` 别停在 0~nav 高度内：改半透明后枝头会压到「登录」上 + （700~760px 宽度实测），按顶栏高度（60 + margin 20）把 `top` 下移。 - 静态资源版本号统一 `conf.StaticVersion`；**图片不走这个缓存键**（`max-age=86400`），换图要给 URL 带 `?v=`。 - 整页背景 `--tb-page-image`（cover）/ `--tb-page-pattern`（平铺，`-size` 控尺寸）/ `--tb-page-position` （焦点，默认 `var(--tb-page-position, center center)`，旧主题不写也不坏）。底色用**纯色**别用渐变； diff --git a/dev/theme-tools/gen_new_sakura.py b/dev/theme-tools/gen_new_sakura.py index 0eb6b74..24a683d 100644 --- a/dev/theme-tools/gen_new_sakura.py +++ b/dev/theme-tools/gen_new_sakura.py @@ -189,7 +189,9 @@ SCOPES = { "box": [ # 枝的细端在右上、粗端朝左下：放在右上角时"从角上垂下来"， # 尺寸收到 300px 才会有枝形 —— 390px 时可见部分只剩一团花（第一次就是这个问题） - ("var(--sk-branch-r)", "auto 300px", "right -24px top -16px"), + # top 从 -16px 收到 26px：顶栏改透明后，700~760px 宽度下枝头会正好压在"登录"上。 + # 顶栏高 60px、外边距 20px，26px 起笔即落在顶栏下沿之上，宽屏仍保留"从右上角长出"。 + ("var(--sk-branch-r)", "auto 300px", "right -24px top 26px"), ("var(--sk-blossom)", "auto 80px", "left 5% bottom 16%"), ("var(--sk-petal)", "34px", "left 14% bottom 32%"), ("var(--sk-petal)", "24px", "right 22% bottom 8%"), @@ -262,7 +264,10 @@ def build(asset_base=""): --tb-surface: #ffffff; --tb-surface-2: #fdf0f4; --tb-surface-hover: #fff7fa; - --tb-navbar: #fdf6f8; + /* 顶栏做磨砂玻璃：樱花从角落长出来，实色顶栏会把它齐刷刷切一段；但也不能给 + transparent —— 顶栏会"消失"，导航失去依托，文字直接压在花纹上。留 28% 的透光。 + 模糊由下面「组件微调」里的 backdrop-filter 加（令牌只能给颜色）。 */ + --tb-navbar: rgba(253, 246, 248, 0.72); --tb-border: #f3dde5; --tb-text: #3a2c31; @@ -303,7 +308,7 @@ html[data-theme="dark"][data-theme-style="new-sakura"] {{ --tb-surface: #2c2227; --tb-surface-2: #372a30; --tb-surface-hover: rgba(255, 147, 180, 0.10); - --tb-navbar: #221a1e; + --tb-navbar: rgba(34, 26, 30, 0.72); --tb-border: #47333b; --tb-text: #f3e6ea; @@ -407,6 +412,19 @@ html[data-theme-style="new-sakura"] .uk-alert-primary { html[data-theme="dark"][data-theme-style="new-sakura"] .uk-alert-primary { color: #ffb3c8; } +/* 顶栏磨砂：半透明底由 --tb-navbar 给，模糊必须在这里加（令牌只能是颜色值）。 + 和手机底栏一样是「半透明 + 模糊」，不是全透明 —— 顶栏得看得见，只是后面透得出花。 */ +html[data-theme-style="new-sakura"] .uk-navbar-container:not(.uk-navbar-transparent) { + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); +} +/* 手机底栏：base.css 写死 rgba(255,255,255,.92)，压在粉底上是一条白杠，跟背景脱开 */ +html[data-theme-style="new-sakura"] #tb-mobile-utils { + background: rgba(253, 246, 248, 0.92); +} +html[data-theme="dark"][data-theme-style="new-sakura"] #tb-mobile-utils { + background: rgba(34, 26, 30, 0.92); +} """ diff --git a/docs/theme-new-sakura.md b/docs/theme-new-sakura.md index 02d5abf..4941a01 100644 --- a/docs/theme-new-sakura.md +++ b/docs/theme-new-sakura.md @@ -70,6 +70,39 @@ question / admin 页卡片从 y=110 起就切掉半个，结果是黏在卡片 深色块必须写成 `html[data-theme="dark"][data-theme-style="new-sakura"]`（三重选择器）， 只写浅色块会被同特异性的作用域块盖掉。 +## 顶栏与手机底栏 + +顶栏走**磨砂玻璃**，不是实色也不是全透明： + +```css +--tb-navbar: rgba(253, 246, 248, 0.72); /* 亮色；深色 rgba(34, 26, 30, 0.72) */ +html[data-theme-style="new-sakura"] .uk-navbar-container:not(.uk-navbar-transparent) { + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); +} +``` + +三种写法的实测结论： + +| 写法 | 现象 | +| --- | --- | +| 实色 `#fdf6f8` | 花枝经过顶栏时被齐刷刷切掉一段，像被裁过 | +| `transparent` | 花枝完整了，但顶栏"消失"：导航没有依托，文字直接压在花纹上 | +| `rgba(...,0.72)` + `blur(12px)` | 花枝透过来但被模糊成柔光，顶栏仍是一块可辨认的面 | + +0.72 是怎么定的：导航文字 `#6d555d` 压在顶栏上，纯底色 6.34:1；最坏情况（深花瓣正好在顶栏后面） +压平后 5.08:1，仍过 AA。再往下调透明度就会掉到 4.5 以下。 + +`TestNavbarNotFullyTransparent` 会拦住 `--tb-navbar: transparent`（以及 `rgba(...,0)`、 +`#rrggbb00`）—— 这条不是审美偏好，是把上面第二种写法踩过之后立的规矩。 + +手机底栏（`#tb-mobile-utils`）在 `base.css` 里写死 `rgba(255,255,255,.92)`，压在粉底上是 +一条白杠；主题里按同一思路改成 `rgba(253,246,248,.92)` / `rgba(34,26,30,.92)`。 + +另外 box 作用域的花枝从 `top -16px` 下移到 `top 26px`：顶栏半透明后，700~760px 宽度下 +枝头正好压在「登录」上（实测截图确认）。顶栏高 60 + 外边距 20，26px 起笔即落在顶栏下沿之上， +宽屏仍是"从右上角长出来"的观感。 + ## 配色与对比度 | 令牌 | 亮色 | 深色 | 说明 | diff --git a/internal/conf/static.go b/internal/conf/static.go index f9caf5e..044ba04 100644 --- a/internal/conf/static.go +++ b/internal/conf/static.go @@ -10,7 +10,7 @@ var ( BuildCommit = "dev" // StaticVersion 静态资源缓存版本号：base.css 与主题 css 共用，改样式只改这一处。 - StaticVersion = "20261022b" + StaticVersion = "20261022c" ) // 文本审核通道取值（[security] text_censor_source）。定义在 conf 侧， diff --git a/internal/theme/navbar_test.go b/internal/theme/navbar_test.go new file mode 100644 index 0000000..70ba024 --- /dev/null +++ b/internal/theme/navbar_test.go @@ -0,0 +1,57 @@ +package theme + +import ( + "io/fs" + "regexp" + "strings" + "testing" + + "github.com/tamakyi/TamaBox/static" +) + +// TestNavbarNotFullyTransparent 拦住 `--tb-navbar: transparent`。 +// +// 装饰层从页面角落长出来时，实色顶栏会把它齐刷刷切一段，看着像被裁过 —— 于是很容易顺手 +// 改成完全透明。但顶栏一透明就没有依托：导航文字直接压在花纹上，滚动/密集页面里失去层级， +// 观感比"被裁"更差。正确做法是半透明（rgba 保留 20%~30% 透光）配 backdrop-filter: blur()。 +// +// 这条不是审美偏好，是踩过的坑：new-sakura 第一版写成 transparent，用户当场要求改回去。 +func TestNavbarNotFullyTransparent(t *testing.T) { + files := []string{"css/base.css"} + for _, slug := range discover() { + files = append(files, themeCSSDir+slug+".css") + } + + checked := 0 + for _, name := range files { + b, err := fs.ReadFile(static.FS, name) + if err != nil { + t.Fatalf("读取 %s: %v", name, err) + } + css := commentRe.ReplaceAllString(string(b), "") + for i, decl := range declarations(css, "--tb-navbar:") { + checked++ + if isFullyTransparent(decl) { + t.Errorf("%s 第 %d 处 --tb-navbar = %q：顶栏不能完全透明，"+ + "改成半透明（如 rgba(...,0.72)）并配 backdrop-filter: blur()", name, i+1, strings.TrimSpace(decl)) + } + } + } + if checked == 0 { + t.Fatal("一处 --tb-navbar 都没解析到，key 拼错了？") + } + t.Logf("共校验 %d 处顶栏底色", checked) +} + +var ( + rgbaZeroRe = regexp.MustCompile(`(?i)rgba?\([^)]*,\s*0(?:\.0+)?\s*\)`) + hexAlphaRe = regexp.MustCompile(`(?i)^#[0-9a-f]{6}00$`) +) + +func isFullyTransparent(v string) bool { + v = strings.TrimSpace(strings.ToLower(v)) + if v == "transparent" || v == "none" { + return true + } + return rgbaZeroRe.MatchString(v) || hexAlphaRe.MatchString(v) +} diff --git a/static/css/themes/_scaffold.css b/static/css/themes/_scaffold.css index b8ef075..db6db1d 100644 --- a/static/css/themes/_scaffold.css +++ b/static/css/themes/_scaffold.css @@ -22,7 +22,11 @@ --tb-surface-2 次级面（标签底、进度条轨道、代码块） --tb-surface-hover 悬停底（列表行、下拉项） --tb-navbar 顶栏底色（不写则同 --tb-surface； - 页面底色不是白时建议覆盖成 bg 或它的同色，否则顶栏会成为一条白带） + 页面底色不是白时建议覆盖成 bg 或它的同色，否则顶栏会成为一条白带。 + ⚠️ 装饰层从页面角落长出来时，实色顶栏会把它齐刷刷切一段； + 这时用半透明（如 rgba(...,.72)）+ backdrop-filter: blur()， + 但**不要写 transparent** —— 顶栏会失去依托，文字直接压在花纹上。 + TestNavbarNotFullyTransparent 会拦住全透明。） 线条 --tb-border 边框、分隔线 文字 --tb-text 正文 --tb-text-secondary 次要文字（说明、meta、顶栏链接） @@ -79,7 +83,7 @@ html[data-theme-style="SLUG"] { --tb-surface: #ffffff; --tb-surface-2: #f4f6f8; --tb-surface-hover: #f3f7ff; - --tb-navbar: var(--tb-surface); /* 顶栏底色，需要时改成 var(--tb-bg) */ + --tb-navbar: var(--tb-surface); /* 顶栏底色，需要时改成 var(--tb-bg) 或半透明的同色 */ --tb-border: #e8eaee; --tb-text: #1f2329; diff --git a/static/css/themes/new-sakura.css b/static/css/themes/new-sakura.css index 1831be1..af394ff 100644 --- a/static/css/themes/new-sakura.css +++ b/static/css/themes/new-sakura.css @@ -24,7 +24,10 @@ html[data-theme-style="new-sakura"] { --tb-surface: #ffffff; --tb-surface-2: #fdf0f4; --tb-surface-hover: #fff7fa; - --tb-navbar: #fdf6f8; + /* 顶栏做磨砂玻璃：樱花从角落长出来，实色顶栏会把它齐刷刷切一段；但也不能给 + transparent —— 顶栏会"消失"，导航失去依托，文字直接压在花纹上。留 28% 的透光。 + 模糊由下面「组件微调」里的 backdrop-filter 加（令牌只能给颜色）。 */ + --tb-navbar: rgba(253, 246, 248, 0.72); --tb-border: #f3dde5; --tb-text: #3a2c31; @@ -61,7 +64,7 @@ html[data-theme-style="new-sakura"] { html[data-theme-style="new-sakura"][data-page-scope="box"] { --tb-deco: var(--sk-branch-r), var(--sk-blossom), var(--sk-petal), var(--sk-petal), var(--sk-blossom), none, none, none, none, none; --tb-deco-size: auto 300px, auto 80px, 34px, 24px, auto 52px, auto, auto, auto, auto, auto; - --tb-deco-position: right -24px top -16px, left 5% bottom 16%, left 14% bottom 32%, right 22% bottom 8%, right 6% bottom 6%, left top, left top, left top, left top, left top; + --tb-deco-position: right -24px top 26px, left 5% bottom 16%, left 14% bottom 32%, right 22% bottom 8%, right 6% bottom 6%, left top, left top, left top, left top, left top; } html[data-theme-style="new-sakura"][data-page-scope="question"] { @@ -93,7 +96,7 @@ html[data-theme="dark"][data-theme-style="new-sakura"] { --tb-surface: #2c2227; --tb-surface-2: #372a30; --tb-surface-hover: rgba(255, 147, 180, 0.10); - --tb-navbar: #221a1e; + --tb-navbar: rgba(34, 26, 30, 0.72); --tb-border: #47333b; --tb-text: #f3e6ea; @@ -124,7 +127,7 @@ html[data-theme="dark"][data-theme-style="new-sakura"] { html[data-theme="dark"][data-theme-style="new-sakura"][data-page-scope="box"] { --tb-deco: var(--sk-branch-r), var(--sk-blossom), var(--sk-petal), var(--sk-petal), var(--sk-blossom), none, none, none, none, none; --tb-deco-size: auto 300px, auto 80px, 34px, 24px, auto 52px, auto, auto, auto, auto, auto; - --tb-deco-position: right -24px top -16px, left 5% bottom 16%, left 14% bottom 32%, right 22% bottom 8%, right 6% bottom 6%, left top, left top, left top, left top, left top; + --tb-deco-position: right -24px top 26px, left 5% bottom 16%, left 14% bottom 32%, right 22% bottom 8%, right 6% bottom 6%, left top, left top, left top, left top, left top; } html[data-theme="dark"][data-theme-style="new-sakura"][data-page-scope="question"] { @@ -193,3 +196,16 @@ html[data-theme-style="new-sakura"] .uk-alert-primary { html[data-theme="dark"][data-theme-style="new-sakura"] .uk-alert-primary { color: #ffb3c8; } +/* 顶栏磨砂：半透明底由 --tb-navbar 给，模糊必须在这里加（令牌只能是颜色值）。 + 和手机底栏一样是「半透明 + 模糊」，不是全透明 —— 顶栏得看得见，只是后面透得出花。 */ +html[data-theme-style="new-sakura"] .uk-navbar-container:not(.uk-navbar-transparent) { + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); +} +/* 手机底栏：base.css 写死 rgba(255,255,255,.92)，压在粉底上是一条白杠，跟背景脱开 */ +html[data-theme-style="new-sakura"] #tb-mobile-utils { + background: rgba(253, 246, 248, 0.92); +} +html[data-theme="dark"][data-theme-style="new-sakura"] #tb-mobile-utils { + background: rgba(34, 26, 30, 0.92); +}