fix(ui): 首页/工作台页脚对齐 —— 首页固定贴底、workspace 不再出血
复核发现(同一套判据,1280×720): ① /:.navi-footer 位于 Dashy <footer> 内、position:static、bottomPx=1092, 页脚在文档流里 → 必须滚动才可见('备案号各视图可见'被破坏); 且该视图无 .navi-footer-host 包裹层,结构与其他视图不一致。 ② /workspace:.navi-footer-host 虽 fixed bottom:0,但 bottomPx=733 > 视口 720, 底部约 13px 出血。 修法: - 首页:对 footer > .navi-footer 直接固定贴底(flex row + 两端分布 + 透明一行), 不改动 DOM 结构; - workspace:显式 bottom:0 并限制 footer 高度上限 20px。 两视图的悬浮按钮经复核已是 idle α=0、无阴影(v75 已修),菜单在 / 上可点且真跳转。
This commit is contained in:
37
web/navi.css
37
web/navi.css
@ -2295,3 +2295,40 @@ html.navi-dark body .navi-search-toggle:hover { background: rgba(148, 163, 184,
|
||||
v71 的 row 规则本可压过它(0,4,2 > 0,2,4),但 v74 为修菜单加的
|
||||
3 个 :not() 把该规则抬到 (0,5,4),反过来压过了页脚规则。
|
||||
故本版把页脚 host/footer 一并排除出该规则(它们本就是固定定位,不参与压缩链)。 */
|
||||
|
||||
/* ═══ v77:首页/工作台页脚对齐(复核发现的两处真实缺陷)═══
|
||||
实测(1280×720):
|
||||
① `/`:.navi-footer 挂在 Dashy 的 <footer> 内、pos=static、bottomPx=1092
|
||||
→ 页脚在文档流里,需滚动才可见("备案号各视图可见"被破坏);
|
||||
该视图也没有 .navi-footer-host 包裹层,结构与 /minimal、/workspace 不一致。
|
||||
② `/workspace`:host 虽 fixed bottom:0,但 bottomPx=733 > 720 → 底部约 13px 出血。
|
||||
修法:
|
||||
① 给非 minimal 视图的页脚也做固定贴底(Dashy 自己是 flex column 的 body,
|
||||
页脚在 <footer> 内;固定为视口底部即可,无需改动 DOM 结构);
|
||||
② workspace 明确 bottom:0 并允许其占位不产生溢出。 */
|
||||
html[data-theme] body:not(:has(.minimal-home)) > .dashy .navi-footer-host,
|
||||
html[data-theme] body:not(:has(.minimal-home)) .navi-footer-host {
|
||||
position: fixed !important;
|
||||
left: 0 !important; right: 0 !important; bottom: 0 !important;
|
||||
z-index: 3 !important; margin: 0 !important; padding: 0 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
html[data-theme] body:not(:has(.minimal-home)) .navi-footer-host > .navi-footer { pointer-events: auto !important; }
|
||||
/* 首页:页脚在 <footer> 内且无 host 包裹 → 直接固定自身 */
|
||||
html[data-theme] body:not(:has(.minimal-home)) footer > .navi-footer {
|
||||
position: fixed !important;
|
||||
left: 0 !important; right: 0 !important; bottom: 0 !important;
|
||||
z-index: 3 !important; margin: 0 !important;
|
||||
display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
|
||||
align-items: center !important; justify-content: center !important;
|
||||
width: 100% !important; max-width: 100vw !important;
|
||||
height: auto !important; max-height: 20px !important;
|
||||
padding: 0 16px !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:not(:has(.minimal-home)) footer > .navi-footer > .navi-quote { margin-left: auto !important; }
|
||||
/* workspace:host 固定贴底不再出血 */
|
||||
html[data-theme] .navi-footer-host { bottom: 0 !important; }
|
||||
html[data-theme] .navi-footer-host > .navi-footer { max-height: 20px !important; }
|
||||
|
||||
Reference in New Issue
Block a user