new-sakura:顶栏改半透明磨砂,并立规矩禁止全透明
线上(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:
@@ -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)
|
||||
}
|
||||
Reference in New Issue
Block a user