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