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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user