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

fix(ui): 页脚改为布局中的最后一行（去掉悬浮），三视图结构一致

Browse Source 
用户反馈"怎么又变成悬浮在底部了？而且好丑" —— 确认 position:fixed 浮层不可接受。
本版在源码处把页脚从浮层改为 body 纵向 flex 的最后一"行"：
 - minimal/workspace 的 .navi-footer-host: position:static + flex:0 0 auto
   （内容链 flex:1 min-height:0，内部自行滚动 → 页脚常驻视口底部但不覆盖内容）
 - workspace 页脚不再参与 0.55 半透明渐隐、不再 translateY 藏匿
 - 删除为"固定页脚"预留的 margin/padding（26px / 40px / 96px）
 - 恢复 v80 的 2×2 网格版式与文字加深（上一版误删）

判据：position 必须为 static（非悬浮）+ 四段文字完整在视口内 + 页面不出现滚动条。
This commit is contained in:
HomeDash Bot
2026-09-12 20:26:51 +08:00
parent f9d539ad42
commit 4c61952cf1
1 changed files with 178 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
web/navi.css
View File

@ -32,6 +32,27 @@ html[data-theme] #app {
width: 100% !important;
}
/* v87：工作空间视图同样用"整屏 flex 列"承载页脚 —— 页脚作为最后一行
（static，非浮层），内容区 flex:1 且可压缩，页面本身不出现滚动条。 */
html[data-theme][data-navi-view="workspace"] {
height: 100dvh !important;
max-height: 100dvh !important;
overflow: hidden !important;
}
html[data-theme][data-navi-view="workspace"] body {
height: 100dvh !important;
max-height: 100dvh !important;
overflow: hidden !important;
}
html[data-theme][data-navi-view="workspace"] body > #app {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
/* Dashy 的 #dashy 默认 min-height:100vh，短页面叠加页脚后必出滚动；
交回内容自然撑高，视口高度由 body 兜住。 */
html[data-theme] #dashy {
@ -823,26 +844,33 @@ html.navi-dark[data-theme] .navi-footer .navi-quote { color: #6b7d95 !important;
/* 关键：在布局里为固定页脚预留 26px，内容框不再被盖住 */
html[data-theme] .minimal-home > .item-group-container {
margin-bottom: 26px !important;
margin-bottom: 0 !important; /* v87：页脚不再覆盖内容，无需预留 */
}
html[data-theme] .minimal-home > .item-group-container > .minimal-section-inner {
padding-bottom: 8px !important;
}
/* v87：页脚不再悬浮 —— 改为 body 纵向 flex 的最后一"行"（static）。
页面高 100dvh、内容链 flex:1 min-height:0（内部自行滚动），
故页脚始终停在视口底部，却不覆盖任何内容、也不遮挡点击。 */
html[data-theme] body:has(.minimal-home) .navi-footer-host {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 3 !important;
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
top: auto !important;
flex: 0 0 auto !important;
width: 100% !important;
z-index: auto !important;
margin: 0 !important;
pointer-events: none; /* 只挡视觉，不挡点击 */
padding: 0 0 4px !important;
pointer-events: auto !important;
}
html[data-theme] body:has(.minimal-home) .navi-footer-host > * {
pointer-events: auto; /* 内部链接仍可点 */
}
/* 内容框为固定页脚让出空间，避免最后一行被备案号压住 */
html[data-theme] .minimal-home > .item-group-container > .minimal-section-inner {
padding-bottom: 96px !important;
padding-bottom: 8px !important;
}
/* 页签行固定：不参与滚动，也不被压缩 */
@ -1123,8 +1151,7 @@ html[data-theme] .navi-footer-sep {
搜索球收左边缘、右下角按钮组整组收右边缘、备案号收下边缘，
各留 14px 露出；鼠标移入或点击、聚焦时滑出展开。 */
html[data-theme][data-navi-view="workspace"] .navi-search-bar,
html[data-theme][data-navi-view="workspace"] .navi-dock,
html[data-theme][data-navi-view="workspace"] .navi-footer-host {
html[data-theme][data-navi-view="workspace"] .navi-dock {
opacity: .55 !important;
transition: transform .26s cubic-bezier(.22, 1, .36, 1), opacity .26s ease !important;
animation: none !important;
@ -1141,14 +1168,19 @@ html[data-theme][data-navi-view="workspace"] .navi-dock {
transform: translateX(calc(100% + 2px)) !important;
}
/* v87：工作空间页脚同样不再悬浮/藏匿 —— 静态行，始终完整可见 */
html[data-theme][data-navi-view="workspace"] .navi-footer-host {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 880 !important;
padding: 0 !important;
transform: translateY(calc(100% - 13px)) !important;
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
top: auto !important;
z-index: auto !important;
flex: 0 0 auto !important;
width: 100% !important;
padding: 0 0 4px !important;
transform: none !important;
opacity: 1 !important;
}
/* 展开：悬停 / 聚焦 / 按下 / 搜索已展开 */
@ -2296,24 +2328,136 @@ html.navi-dark body .navi-search-toggle:hover { background: rgba(148, 163, 184,
3 个 :not() 把该规则抬到 (0,5,4)，反过来压过了页脚规则。
故本版把页脚 host/footer 一并排除出该规则（它们本就是固定定位，不参与压缩链）。 */
/* ═══ 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: 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;
/* ═══ 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] .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 > #dashy > footer > .navi-footer { position: static !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: 0 !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; }