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

fix(ui): 三视图页脚真正落到页面最底 + workspace 的 grid 生效

Browse Source 
父链实测（v81，三个视图结构不同）：
  /          .navi-footer[grid] < FOOTER[pb:8px] < #dashy < #app < BODY
  /minimal   .navi-footer[grid] < .navi-footer-host[flex] < BODY
  /workspace .navi-footer[flex ✗] < .navi-footer-host[flex] < BODY
问题：① / 多出 8px 空隙（来自 <footer> 的 padding-bottom）；
     ② /workspace 页脚停在 y=624，下方仍有 80px 空；
     ③ /workspace 页脚未被 grid 规则命中（写成 flex），四子项挤在同一行。
改动：
 - 补 body > .navi-footer-host > .navi-footer 的 grid 规则与 2×2 显式定位
   （覆盖 host 直接挂 body 的视图）；
 - body > .navi-footer-host 用 margin-top:auto 推到页面最底、不留空；
 - 首页清掉 #dashy > footer 的 padding-bottom（8px 空隙来源）。
选择器均按实测父链结构编写，非猜测。
This commit is contained in:
HomeDash Bot
2026-09-12 19:10:53 +08:00
parent a2bead912f
commit b017c3a4b8
1 changed files with 47 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
web/navi.css
View File

@ -2460,3 +2460,50 @@ html[data-theme] .navi-footer {
/* 页脚不再是浮层 → 取消为其预留的底部空间 */
html[data-theme] .minimal-home > .item-group-container { margin-bottom: 0 !important; }
html[data-theme] body:has(.minimal-home) .minimal-section-inner { padding-bottom: 8px !important; }
/* ═══ v82：三视图页脚真正落到页面最底 + workspace 的 grid 生效 ═══
父链实测（v81）：
/ .navi-footer[grid] < FOOTER[padding-bottom:8px] < #dashy < #app < BODY
/minimal .navi-footer[grid] < .navi-footer-host[flex] < BODY
/workspace .navi-footer[flex ✗] < .navi-footer-host[flex] < BODY ← grid 没命中
问题：① / 的 8px 空隙来自 <footer> 的 padding-bottom；
② /workspace 页脚停在 y=624，下方仍有 80px 空；
③ /workspace 页脚是 flex 而非 grid → 四个子项挤在同一行。
修法：用各视图**实际存在**的祖先结构写选择器，并把页脚推到底部。 */
/* ① workspace（以及任何 host 直接挂在 body 下的视图）：grid 规则补上 host 路径 */
html[data-theme] body .navi-footer-host > .navi-footer {
display: grid !important;
grid-template-columns: auto 1fr !important;
grid-template-rows: auto auto !important;
column-gap: 12px !important; row-gap: 2px !important;
align-items: center !important;
width: 100% !important; max-width: 100vw !important;
height: auto !important; max-height: none !important;
padding: 0 12px !important;
background: transparent !important; border: 0 !important; box-shadow: none !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
overflow: visible !important;
}
html[data-theme] body .navi-footer-host > .navi-footer > a:nth-of-type(1) { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; }
html[data-theme] body .navi-footer-host > .navi-footer > a:nth-of-type(2) { grid-column: 1 !important; grid-row: 2 !important; justify-self: start !important; }
html[data-theme] body .navi-footer-host > .navi-footer > .navi-quote:nth-last-of-type(2) { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; }
html[data-theme] body .navi-footer-host > .navi-footer > .navi-quote:last-of-type { grid-column: 2 !important; grid-row: 2 !important; justify-self: end !important; }
html[data-theme] body .navi-footer-host > .navi-footer > .navi-footer-sep { display: none !important; }
/* ② host 作为 body 的弹性子项：用 margin-top:auto 推到最底，且不再留空隙 */
html[data-theme] body > .navi-footer-host {
margin-top: auto !important; margin-bottom: 0 !important;
flex: 0 0 auto !important;
}
/* ③ 首页：清掉 Dashy <footer> 的底部 padding（那片 8px 空隙的来源），并推到底 */
html[data-theme] body > #app > #dashy > footer,
html[data-theme] body #dashy > footer {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
html[data-theme] body > #app > #dashy > footer > .navi-footer,
html[data-theme] body #dashy > footer > .navi-footer {
margin-bottom: 0 !important;
}
/* ④ minimal：host 已是 body 子项，用 margin-top:auto 让页脚贴页面最底 */
html[data-theme] body:has(.minimal-home) > .navi-footer-host { margin-top: auto !important; }