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

new-sakura：顶栏改半透明磨砂，并立规矩禁止全透明

Browse Source 
线上（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 改了不提版本号，浏览器拿着旧样式，
  现象就是"改了但线上没变"。
This commit is contained in:
tamakyi
2026-10-22 16:05:37 +08:00
parent 2981731d4f
commit 8941744621
8 changed files with 163 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.workbuddy/memory/2026-10-22.md
+18
View File
@@ -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 已缓存）。
.workbuddy/memory/topics/theme.md
+7
View File
@@ -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)`，旧主题不写也不坏）。底色用**纯色**别用渐变；
dev/theme-tools/gen_new_sakura.py
+21 -3
View File
@@ -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);
}
"""
docs/theme-new-sakura.md
+33
View File
@@ -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 起笔即落在顶栏下沿之上，
宽屏仍是"从右上角长出来"的观感。
## 配色与对比度
| 令牌 | 亮色 | 深色 | 说明 |
internal/conf/static.go
+1 -1
View File
@@ -10,7 +10,7 @@ var (
BuildCommit = "dev"
// StaticVersion 静态资源缓存版本号：base.css 与主题 css 共用，改样式只改这一处。
StaticVersion = "20261022b"
StaticVersion = "20261022c"
)
// 文本审核通道取值（[security] text_censor_source）。定义在 conf 侧，
internal/theme/navbar_test.go
+57
View File
@@ -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)
}
static/css/themes/_scaffold.css
+6 -2
View File
@@ -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;
static/css/themes/new-sakura.css
+20 -4
View File
@@ -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);
}