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

fix(ui): 修切换视图菜单被 overflow 裁剪（'点了没反应'真因）+ 按钮去灰底板

Browse Source 
真因（两条独立证据 + 像素证据）：
- 祖先链：.navi-view-switch{overflow:hidden} → .navi-dock{overflow:hidden}；
- 菜单开/关截图像素比对有变化（确实在渲染），但菜单中心的 elementFromPoint
  命中 #dashy → 超出 52×52 按钮盒的面板被裁剪，看不见也点不到；
- 用户所称方形灰色背景即被裁剪后残留的菜单面板碎片。
此前我误判它'可见'，因为 getBoundingClientRect 不受裁剪影响 —— 判据已改为像素比对 + 命中测试。

改动：.navi-dock/.navi-view-switch overflow:visible；.navi-view-menu z-index:1000 +
pointer-events:auto；三个悬浮按钮去掉背景/描边/阴影（透明圆形），
仅在 hover/focus-visible 时给一层圆形淡染，点击不再出现方块高亮。
This commit is contained in:
HomeDash Bot
2026-09-12 18:00:28 +08:00
parent 26b3bac329
commit d7cada953c
1 changed files with 45 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
web/navi.css
View File

@ -2252,3 +2252,48 @@ html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer > .nav
html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer > .navi-footer-sep:last-of-type {
display: none !important;
}
/* ═══ v73：修「切换视图菜单被裁剪」（"点了没反应"的真因）+ 按钮去灰底板 ═══
实测证据：
① 祖先链 .navi-view-switch{overflow:hidden} → .navi-dock{overflow:hidden}
② 菜单开/关像素比对有变化（确实渲染），但中心 elementFromPoint 命中 #dashy
→ 面板超出 52×52 按钮盒的部分被裁剪，既看不见也点不到。
（注意：getBoundingClientRect 不受裁剪影响，所以此前我误判它"可见"。）
③ 用户看到的那块"方形灰色背景"= 被裁剪后残留的菜单面板碎片。
修法：让承载菜单的 .navi-view-switch / .navi-dock 不裁剪，菜单抬到 z-index 1000。 */
html[data-theme] body .navi-dock,
html[data-theme] body .navi-view-switch {
overflow: visible !important;
}
html[data-theme] body .navi-view-menu {
z-index: 1000 !important;
pointer-events: auto !important;
}
/* 悬浮按钮：去掉"灰底板"，仅悬停/聚焦时给一层圆形淡染（点击不再有方块高亮） */
html[data-theme] body .navi-view-toggle,
html[data-theme] body .navi-admin-entry,
html[data-theme] body .navi-search-toggle {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 50% !important;
}
html[data-theme]:not(.navi-dark) body .navi-view-toggle,
html[data-theme]:not(.navi-dark) body .navi-admin-entry,
html[data-theme]:not(.navi-dark) body .navi-search-toggle { color: #475569 !important; }
html[data-theme]:not(.navi-dark) body .navi-view-toggle:hover,
html[data-theme]:not(.navi-dark) body .navi-view-toggle:focus-visible,
html[data-theme]:not(.navi-dark) body .navi-admin-entry:hover,
html[data-theme]:not(.navi-dark) body .navi-admin-entry:focus-visible,
html[data-theme]:not(.navi-dark) body .navi-search-toggle:hover {
background: rgba(100, 116, 139, 0.14) !important;
border-radius: 50% !important;
box-shadow: none !important;
}
html.navi-dark body .navi-view-toggle,
html.navi-dark body .navi-admin-entry,
html.navi-dark body .navi-search-toggle { color: #cbd5e1 !important; }
html.navi-dark body .navi-view-toggle:hover,
html.navi-dark body .navi-admin-entry:hover,
html.navi-dark body .navi-search-toggle:hover { background: rgba(148, 163, 184, 0.18) !important; border-radius: 50% !important; }