From 6e073a920123e74ad33720fb2a9fcf0b854188ff Mon Sep 17 00:00:00 2001 From: HomeDash Bot Date: Sat, 12 Sep 2026 15:25:31 +0800 Subject: [PATCH] =?UTF-8?q?fix(ui):=20mini=20=E9=A1=B5=E9=A1=B6=E9=83=A8?= =?UTF-8?q?=E9=A1=B5=E7=AD=BE=E8=A1=A5=E9=BD=90=E7=8E=BB=E7=92=83=E8=B4=A8?= =?UTF-8?q?=E6=84=9F=EF=BC=88=E4=B8=8E=E6=90=9C=E7=B4=A2=E6=A0=8F/?= =?UTF-8?q?=E6=B5=AE=E5=8A=A8=E4=BB=B6=E5=90=8C=E4=B8=80=E9=85=8D=E6=96=B9?= =?UTF-8?q?=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 问题：/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 改动，尚未做真实渲染验证（需部署后截图核对）。 --- web/navi.css | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/web/navi.css b/web/navi.css index cc8f0f4..6e2fcb3 100644 --- a/web/navi.css +++ b/web/navi.css @@ -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;