jianf/HomeDash
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(ui): mini 页顶部页签补齐玻璃质感（与搜索栏/浮动件同一配方）

Browse Source 
问题：/minimal 顶部那排页签（.headings）与左右翻页按钮只有尺寸与圆角，
没有底色/边框/backdrop-filter，而页面其它玻璃面（dock、搜索栏、分组容器）
用的是 blur(22px) saturate(180%) + 半透明白底 + 内高光边框 → 顶部一排显得十分割裂。

改动（web/navi.css）：
- .minimal-headings-row .headings 补玻璃底/边框/投影/模糊，与搜索栏同配方
- 选中态（.active / aria-selected）底色更实 + 内描边，保持可辨识
- 左右翻页按钮同样上玻璃（略小模糊），disabled 时降透明度
- 深色模式给对应的深色玻璃值（rgba(20,31,49,.78) 系），避免深色下发白刺眼
- 支持 prefers-reduced-motion

注意：本次为纯 CSS 改动，尚未做真实渲染验证（需部署后截图核对）。
This commit is contained in:
HomeDash Bot
2026-09-12 15:25:31 +08:00
parent 1ac8d2a0f2
commit 6e073a9201
1 changed files with 57 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
web/navi.css
View File

@ -586,6 +586,63 @@ html[data-theme] .minimal-headings-row .headings {
scroll-snap-align: start;
}
/* ── mini 页顶部页签：与搜索栏/浮动件同一套玻璃质感 ──
此前这里只有尺寸与圆角、没有底色/边框/模糊，导致顶部一排与页面其它
玻璃面（dock、搜索栏、卡片容器）质感严重不符、看着"割裂"。 */
html[data-theme] .minimal-headings-row .headings {
background: rgba(255, 255, 255, .72) !important;
border: 1px solid rgba(255, 255, 255, .9) !important;
box-shadow: 0 14px 38px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
backdrop-filter: blur(22px) saturate(180%) !important;
-webkit-backdrop-filter: blur(22px) saturate(180%) !important;
transition: background .2s ease, transform .22s cubic-bezier(.22, 1, .36, 1) !important;
}
/* 当前选中的页签：底色更实 + 一圈内描边，保持可辨识但不破坏玻璃感 */
html[data-theme] .minimal-headings-row .headings.active,
html[data-theme] .minimal-headings-row .headings[aria-selected="true"],
html[data-theme] .minimal-headings-row .headings.selected {
background: rgba(255, 255, 255, .9) !important;
box-shadow: 0 16px 40px rgba(15, 23, 42, .18), inset 0 0 0 1px rgba(15, 23, 42, .08),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
/* 左右翻页按钮同样上玻璃，否则它们在页签旁边像两块"素片" */
html[data-theme] .minimal-headings-wrap .tab-scroll-btn {
background: rgba(255, 255, 255, .72) !important;
border: 1px solid rgba(255, 255, 255, .9) !important;
box-shadow: 0 10px 26px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
backdrop-filter: blur(18px) saturate(170%) !important;
-webkit-backdrop-filter: blur(18px) saturate(170%) !important;
color: inherit !important;
}
html[data-theme] .minimal-headings-wrap .tab-scroll-btn:disabled {
opacity: .45 !important;
}
/* 深色模式：同一配方换成深色玻璃（与 dock/页脚一致），避免深色下反而发白刺眼 */
html.navi-dark[data-theme] .minimal-headings-row .headings {
background: rgba(20, 31, 49, .78) !important;
border: 1px solid rgba(148, 163, 184, .22) !important;
box-shadow: 0 14px 38px rgba(2, 6, 23, .45), inset 0 1px 0 rgba(148, 163, 184, .18) !important;
}
html.navi-dark[data-theme] .minimal-headings-row .headings.active,
html.navi-dark[data-theme] .minimal-headings-row .headings[aria-selected="true"],
html.navi-dark[data-theme] .minimal-headings-row .headings.selected {
background: rgba(30, 44, 68, .92) !important;
}
html.navi-dark[data-theme] .minimal-headings-wrap .tab-scroll-btn {
background: rgba(20, 31, 49, .78) !important;
border: 1px solid rgba(148, 163, 184, .22) !important;
box-shadow: 0 10px 26px rgba(2, 6, 23, .5), inset 0 1px 0 rgba(148, 163, 184, .18) !important;
}
/* 尊重"减少动画"偏好 */
@media (prefers-reduced-motion: reduce) {
html[data-theme] .minimal-headings-row .headings { transition: none !important; }
}
html[data-theme] .minimal-headings-row .headings .section-title {
font-size: 15px !important;
line-height: 1.2 !important;