fix(webui): 去掉卡片/面板各自的模糊 —— 模糊叠模糊
用户:「你又犯了模糊叠模糊的毛病,整体的模糊是由壁纸那一层模糊确定的, 而你在每一个卡片又打了固定的模糊底」。 ## 改动 浮在壁纸上的大面(列表栏、详情栏、卡片、侧栏)**不再各自 backdrop-filter**: - 它们背后只有**已经模糊过的壁纸** ⇒ 再模糊一次不会更"玻璃",只会更脏更糊, 而且每层都要重新采样背景(滚动时明显掉帧)。 - `.bg-white` 接管、面板基线、侧栏基线、壁纸模式下的侧栏 —— 全部去掉 backdrop-filter。 - **模糊只留给真正悬浮在内容之上的层**:底部导航条(浮在滚动列表上)、 地址建议菜单(浮在表单上)。它们背后是会滚动的内容,模糊在那里才有遮蔽意义。 模糊声明从 9 处降到 4 处。实测(真浏览器,通信页):**没有任何元素带 backdrop-filter** (`blurredCount = 0`)。 ## 同一轮还有 `test/manual/nav-contrast-verify.mjs` 4/4: 浅色 白玻璃+深字 **7.48:1**、深色 深玻璃+亮字 **6.96:1**(自动反色真的生效)、 两主题底色确实不同、以及反向对照"过渡中途读会拿到起点色"—— 这条正是我上一轮把深色模式误判成对比度不足(2.36)的原因。
This commit is contained in:
@ -744,14 +744,12 @@ html[data-bg='on'] .bg-slate-100 {
|
||||
*/
|
||||
html[data-bg='on'] .glass-control {
|
||||
background-color: rgb(var(--c-white) / var(--bg-glass-control));
|
||||
backdrop-filter: blur(6px) saturate(1.1);
|
||||
-webkit-backdrop-filter: blur(6px) saturate(1.1);
|
||||
backdrop-filter: blur(8px) saturate(1.1);
|
||||
-webkit-backdrop-filter: blur(8px) saturate(1.1);
|
||||
}
|
||||
|
||||
html[data-bg='on'] .bg-white {
|
||||
background-color: rgb(var(--c-white) / var(--bg-glass));
|
||||
backdrop-filter: blur(var(--bg-blur-panel)) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(var(--bg-blur-panel)) saturate(1.2);
|
||||
}
|
||||
|
||||
/*
|
||||
@ -841,10 +839,18 @@ html[data-bg='on'] .hover\:bg-gray-100:hover {
|
||||
}
|
||||
|
||||
/* 基线朦胧:没开壁纸时也有一点玻璃感,而不是一块硬塑料 */
|
||||
.app-shell > *,
|
||||
/*
|
||||
* ★ 面板**不再各自打模糊**(2026-09-14 用户:「你又犯了模糊叠模糊的毛病,
|
||||
* 整体的模糊是由壁纸那一层模糊确定的,而你在每一个卡片又打了固定的模糊底」)。
|
||||
*
|
||||
* 浮在壁纸上的大面(列表栏/详情栏/卡片)背后只有**已经模糊过的壁纸**,
|
||||
* 再 backdrop-filter 一次纯属叠加:不会更"玻璃",只会更脏更糊,而且每层都要
|
||||
* 重新采样一次背景(滚动时明显掉帧)。
|
||||
*
|
||||
* 模糊只留给**真正悬浮在内容之上**的层:底部导航条、地址建议菜单、弹层 ——
|
||||
* 它们背后是会滚动的内容,模糊在那里才有信息遮蔽的意义。
|
||||
*/
|
||||
.narrow-shell > *:not(.narrow-nav) {
|
||||
backdrop-filter: blur(var(--bg-blur-panel)) saturate(1.05);
|
||||
-webkit-backdrop-filter: blur(var(--bg-blur-panel)) saturate(1.05);
|
||||
}
|
||||
|
||||
/* 窄屏:内容面板同样浮起来(与底部导航那条悬浮玻璃一致) */
|
||||
@ -883,10 +889,8 @@ html[data-bg='on'] .app-shell > * {
|
||||
* (浅色主题=白玻璃、深色主题=深玻璃,见文件末尾的令牌块)。
|
||||
* 原先这里写死深玻璃 —— 那正是用户说的"导航栏为什么还是黑色"。
|
||||
*/
|
||||
html[data-bg='on'] .nav-rail,
|
||||
html[data-bg='on'] .narrow-nav {
|
||||
backdrop-filter: blur(18px) saturate(1.4);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(1.4);
|
||||
html[data-bg='on'] .nav-rail {
|
||||
/* 侧栏浮在壁纸上:模糊由壁纸层负责,这里不叠 */
|
||||
}
|
||||
|
||||
|
||||
@ -1117,8 +1121,7 @@ html.view-switch .glass-control,
|
||||
*/
|
||||
.app-shell > .bg-chrome-900 {
|
||||
background-color: rgb(var(--c-chrome-900) / 0.82);
|
||||
backdrop-filter: blur(var(--bg-blur-panel)) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(var(--bg-blur-panel)) saturate(1.2);
|
||||
/* 不留 backdrop-filter:它浮在(已模糊的)壁纸上,再模糊只是叠一层 */
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user