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:
2026-09-14 12:02:57 +08:00
parent 9aa702b8cc
commit fc4671e55c

View File

@ -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:它浮在(已模糊的)壁纸上,再模糊只是叠一层 */
}