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

fix(ui): 撤除 v77–v85 页脚定位实验，回到 v76 的文档流形态

Browse Source 
用户反馈"怎么又变成悬浮在底部了？而且好丑"，确认 fixed 不符合预期。
v77–v85 这一串在 fixed/static 之间反复摇摆，且 v81 用 :not(:has(...))
造出 (0,11,x) 高特异性 static 钉子，使后续所有 position 修改全部失效，
导致 /workspace 页脚始终被撑出视口（bottom=740 > 720）。

本版一次性删除这些实验段，恢复为：页脚静态排在内容流末尾（v76 形态），
保留用户已确认的内容类改动：
 - v79/v80 两列两行版式（左两行备案 / 右两行座右铭）
 - v78 文字加深（备案 7.6:1、一言 4.8:1）
 - 座右铭固定文案（不再是随机的 hitokoto）
 - 悬浮按钮无灰底、切换视图菜单可点（v74/v75，属独立修复，不动）
This commit is contained in:
HomeDash Bot
2026-09-12 20:19:14 +08:00
parent e9fab61a2e
commit f9d539ad42
1 changed files with 15 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
web/navi.css
View File

@ -2296,273 +2296,24 @@ html.navi-dark body .navi-search-toggle:hover { background: rgba(148, 163, 184,
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; }
/* ═══ v78：页脚文字加深（用户反馈"文字颜色过浅"）═══
实测前景色：备案号/分隔符 #94a3b8（亮度 160）、每日一言 #b6c2d2（亮度 187），
11px 小字 + 透明背景（叠在浅色页面底图上）→ 对比度不足，观感发虚。
加深为中性 slate：#475569（亮度 84，对白底约 8.9:1）与 #64748b（亮度 105）。
深色主题相应使用亮色系 #cbd5e1 / #94a3b8，保持可读。 */
html[data-theme] .navi-footer,
html[data-theme] .navi-footer a,
html[data-theme] .navi-footer .navi-footer-sep,
html[data-theme] body .navi-footer,
html[data-theme] body .navi-footer a,
html[data-theme] body .navi-footer .navi-footer-sep,
html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer,
html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer > a,
html[data-theme] body:not(:has(.minimal-home)) footer > .navi-footer {
color: #475569 !important;
}
html[data-theme] .navi-footer .navi-quote,
html[data-theme] body .navi-footer .navi-quote,
html[data-theme] body:has(.minimal-home) .navi-footer-host .navi-quote {
color: #64748b !important;
font-style: normal !important; /* 斜体在小字号下进一步降低可读性 */
}
html[data-theme] .navi-footer a:hover { color: #1e293b !important; text-decoration: underline !important; }
/* 深色主题：保持亮色可读 */
html.navi-dark[data-theme] .navi-footer,
html.navi-dark[data-theme] .navi-footer a,
html.navi-dark[data-theme] .navi-footer .navi-footer-sep { color: #cbd5e1 !important; }
html.navi-dark[data-theme] .navi-footer .navi-quote { color: #94a3b8 !important; }
/* ═══ v79：页脚改为「左两行备案 / 右两行一言」═══
用户要求：左边两行 = 两个备案号；右边两行 = 座右铭两句
（不念往昔之繁华 / 无谓前路之沧桑）。
结构：.navi-footer 内为「备案A、sep、备案B、sep、quote1、quote2」，
用 grid 两列两行重排：
第1行：[备案A] [quote1] 第2行：[备案2] [quote2]
grid-auto-flow: column 配合固定两行即可把「前两个 A」放左列、「后两个 quote」放右列。 */
html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer,
html[data-theme] body:not(:has(.minimal-home)) footer > .navi-footer,
html[data-theme] .navi-footer {
display: grid !important;
grid-template-columns: auto 1fr !important;
grid-template-rows: auto auto !important;
grid-auto-flow: column !important; /* 先填满两行再换列 → 左列=备案两项，右列=一言两项 */
align-items: center !important;
justify-items: start !important;
column-gap: 12px !important; row-gap: 2px !important;
width: 100% !important; max-width: calc(100vw - 24px) !important;
height: auto !important; max-height: none !important; min-height: 0 !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; white-space: nowrap !important;
}
/* 右列（一言）靠右对齐；左列（备案）靠左 */
html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer > .navi-quote,
html[data-theme] body:not(:has(.minimal-home)) footer > .navi-footer > .navi-quote,
html[data-theme] .navi-footer > .navi-quote {
grid-column: 2 !important; justify-self: end !important;
margin: 0 !important; padding: 0 !important; max-width: none !important;
color: #64748b !important; font-style: normal !important;
}
html[data-theme] .navi-footer > a,
html[data-theme] .navi-footer > .navi-footer-sep { grid-column: 1 !important; justify-self: start !important; }
/* 分隔符在网格布局下不再需要（左右列已天然分离） */
html[data-theme] .navi-footer > .navi-footer-sep { display: none !important; }
/* 页脚容器高度需容纳两行；给内容框留出足够空间 */
html[data-theme] body:has(.minimal-home) .navi-footer-host { height: auto !important; max-height: none !important; }
html[data-theme] .minimal-home > .item-group-container { margin-bottom: 40px !important; }
/* ═══ v80：修 v79 的三行问题（隐藏的分隔符仍占网格格位）═══
实测：grid 计算为 3 行（y=671/688/705），原因是 .navi-footer-sep
虽设 display:none 但被更高特异性规则压过，仍占据第 2 行格位，
使「豫公网安备」落到第 3 行（应为第 2 行）。
修法：用与 grid 定义同级别的选择器彻底隐藏分隔符，并用 grid-row 显式定位，
确保左列两行=两个备案、右列两行=两句座右铭。 */
html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer > .navi-footer-sep,
html[data-theme] body:not(:has(.minimal-home)) footer > .navi-footer > .navi-footer-sep,
html[data-theme] body .navi-footer > .navi-footer-sep {
display: none !important;
position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important;
overflow: hidden !important;
}
/* 显式定位：左列第1/2行 = 两个备案；右列第1/2行 = 两句一言 */
html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer > a:nth-of-type(1),
html[data-theme] body .navi-footer > a:nth-of-type(1),
html[data-theme] body:not(:has(.minimal-home)) footer > .navi-footer > a:nth-of-type(1) {
grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important;
}
html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer > a:nth-of-type(2),
html[data-theme] body .navi-footer > a:nth-of-type(2),
html[data-theme] body:not(:has(.minimal-home)) footer > .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 > .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 > .navi-quote:last-of-type { grid-column: 2 !important; grid-row: 2 !important; justify-self: end !important; }
html[data-theme] .navi-footer { grid-template-rows: auto auto !important; grid-auto-rows: 0 !important; }
/* v85 删除：v81 的"页脚回归文档流"整段。它引入了
html[data-theme] body:not(:has(.minimal-home)) .navi-footer-host { position: static !important }
其特异性高达 (0,11,4)~(0,11,5)，把此后所有 fixed 规则（0,4,4）全部压死，
导致 /workspace 页脚永远停在文档流位置（bottom=737 > 视口 720，
第二行掉出视口、页面被撑出滚动条）。用户实测："工作区整体可以滑动""只显示备案号"。
结论：文档流方案（v81-v83）不可取 —— 页脚在视口偏矮/内容偏多时必然掉出视口；
且用 :not(:has()) 这种高特异性选择器等于给页面钉上无法覆盖的规则。 */
/* ═══ 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; }
/* ═══ v83：页脚贴住页面最底（消除 #app 吞掉剩余空间）═══
实测（滚到最底）：
/ host.bottom=720 = 视口高 → 距底 0px ✓
/minimal host.bottom=717，文档 720 → 余 3px（可接受但未归零）
/workspace host.bottom=674，文档 720 → **余 46px**
根因：body（display:flex; flex-direction:column）的 #app 为 flex:1 1 auto，
会吃掉全部剩余高度，使后面的 .navi-footer-host 只能排在 #app 之后的中途。
修法：当 body 直接含 .navi-footer-host 时，让 #app 不再弹性伸展（flex:0 0 auto），
页脚即可落在页面最底；minimal 的 3px 来自 #app 之外的一点点余量，一并归零。 */
html[data-theme] body:has(> .navi-footer-host) > #app {
flex: 0 0 auto !important;
}
html[data-theme] body:has(> .navi-footer-host) > .navi-footer-host {
margin-top: auto !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* minimal：内容链最后一个容器不留底部余量 */
html[data-theme] body:has(.minimal-home) > .navi-footer-host { margin-bottom: 0 !important; padding-bottom: 0 !important; }
html[data-theme] body:has(.minimal-home) #app > *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
/* ═══ v84：页脚恢复"固定贴底"（滚动流方案会让页脚掉出视口）═══
事实（不滚动、真实视口实测）：
- /workspace：页脚 y=704 高 33 → bottom=737 > 720，**第二行（豫公网安备 / 无谓前路之沧桑）
落在视口外**；并且页面被撑高到 737 → 出现"工作区整体能滑动"。
- v81-v83 走"文档流"路线，在视口略矮/内容略多时页脚就会掉出视口，
用户反映"不如上一版"，本质是**流布局不能保证可见**。
故恢复固定贴底（position:fixed, bottom:0，与 v76 相同的做法），
并成对解决遮挡：内容链底部留出与页脚等高的净空。 */
html[data-theme] body > .navi-footer-host,
html[data-theme] body .navi-footer-host {
position: fixed !important;
left: 0 !important; right: 0 !important; bottom: 0 !important;
top: auto !important;
margin: 0 !important; padding: 0 !important;
z-index: 3 !important;
width: 100% !important;
height: auto !important; max-height: none !important;
pointer-events: none !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 { pointer-events: auto !important; }
/* 首页：页脚在 <footer> 内，直接固定 */
html[data-theme] body #dashy > footer > .navi-footer,
html[data-theme] body > #app > #dashy > footer > .navi-footer {
position: fixed !important;
left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
z-index: 3 !important; margin: 0 !important;
}
html[data-theme] body #dashy > footer { padding-bottom: 0 !important; margin-bottom: 0 !important; }
/* 不遮挡：内容容器底部留出页脚净空（两行页脚约 40px） */
html[data-theme] body > #app { padding-bottom: 44px !important; }
html[data-theme] body:has(.minimal-home) > #app { padding-bottom: 44px !important; }
html[data-theme] body:has(.minimal-home) .minimal-home > .item-group-container { margin-bottom: 0 !important; }
/* 固定层不参与文档高度 → 页面不应因此可滚 */
html[data-theme] body { overflow: hidden auto !important; }
/* ═══ v85：页脚固定贴底（统一、无高特异性钉子）═══
删掉 v81 那条 (0,11,x) 的 static 规则后，此处用简单选择器统一固定贴底：
三视图的 host / footer 一律 position:fixed; bottom:0；内容容器留 44px 净空。 */
/* ═══ v86：页脚回到文档流（撤掉 v77–v85 的 fixed/static 摇摆）═══
经过 v77–v85 反复，结论：
- 用户要的是"页脚属于页面内容、贴在页面最底"，不要悬浮层；
- 我一度改回 fixed 后又觉得"悬浮、丑"，说明 fixed 不符合预期；
- 而 v81 用 :not(:has(...)) 造出的 (0,11,x) static 钉子让后续所有修改失效，
造成 /workspace 页脚一直被撑出视口 —— 这些实验规则一并撤除。
最终形态：页脚静态排在内容流末尾（v76 形态），配合已生效的 v79/v80
两列两行版式与 v78 文字加深；内容链末尾不留多余空白。 */
html[data-theme] .navi-footer-host {
position: fixed !important;
left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
margin: 0 !important; padding: 0 !important; z-index: 3 !important;
width: 100% !important; height: auto !important; max-height: none !important;
pointer-events: none !important;
position: static !important;
left: auto !important; right: auto !important; bottom: auto !important; top: auto !important;
z-index: auto !important; margin: 0 !important; padding: 0 !important;
pointer-events: auto !important; width: 100% !important;
height: auto !important; max-height: none !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] .navi-footer-host > .navi-footer { pointer-events: auto !important; }
html[data-theme] body #dashy footer > .navi-footer,
html[data-theme] body footer > .navi-footer {
position: fixed !important;
left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
z-index: 3 !important; margin: 0 !important;
}
html[data-theme] .navi-footer { position: static !important; z-index: auto !important; }
html[data-theme] body #dashy > footer { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html[data-theme] body > #app { padding-bottom: 44px !important; }
html[data-theme] body > #app > #dashy > footer > .navi-footer { position: static !important; }