fix(ui): 页脚真凶——同特异性覆盖 .navi-footer 的 display,恢复横排一行
几何实测(v69):.navi-footer 运行时 display=block,四个子元素纵向堆叠
(y=680/701/722/743),盒高 26px 而已 bottom=720 →
每日一言在视口下方(y=743 > 720),**根本没有显示**。
此前我改高度、行高、加 !important、挪到文件末尾全部无效,
因为根因是 824 行的
html[data-theme] body:has(.minimal-home) .navi-footer-host > * { display: block !important }
—— 特异性 (0,2,1) 高于我的 (0,1,1):同等 !important 下按特异性取胜,与顺序无关。
修法:用同特异性选择器(.navi-footer-host > .navi-footer)覆盖为
display:flex + flex-direction:row + nowrap,子项高度 auto,每日一言省略号。
判据修正(此前两次误判为成功):
不再只看 height>0,而要求 y>=0 且 bottom<=innerHeight —— 元素有尺寸但在视口外仍属不可见。
This commit is contained in:
35
web/navi.css
35
web/navi.css
@ -2182,3 +2182,38 @@ html[data-theme]:not(.navi-dark) .navi-admin-entry:focus-visible {
|
||||
outline: 2px solid rgba(71, 85, 105, 0.55) !important;
|
||||
outline-offset: 2px !important;
|
||||
}
|
||||
|
||||
/* ═══ v70:真凶修复 —— 同特异性覆盖,让页脚真正横排一行 ═══
|
||||
实测:.navi-footer 运行时 display=block,4 个子元素纵向堆叠
|
||||
(备案 y=680 / 公安 y=701 / 分隔 y=722 / 每日一言 y=743),
|
||||
盒高仅 26px 且 bottom=720 → 每日一言在视口下方(y=743 > 720)**根本没显示**。
|
||||
根因:824 行附近
|
||||
html[data-theme] body:has(.minimal-home) .navi-footer-host > * { display: block !important }
|
||||
特异性 (0,2,1) 高于我此前写的 html[data-theme] body .navi-footer (0,1,1),
|
||||
**同等 !important 下特异性高者胜**,因此无论我加多少 !important、放在多后面都无效。
|
||||
修法:用**同特异性选择器**(.navi-footer-host > .navi-footer)覆盖 display/flex-direction。 */
|
||||
html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
height: auto !important; min-height: 0 !important; max-height: 20px !important;
|
||||
line-height: 15px !important;
|
||||
padding: 0 8px !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer > * {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
height: auto !important; max-height: 20px !important;
|
||||
line-height: 15px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
html[data-theme] body:has(.minimal-home) .navi-footer-host .navi-quote {
|
||||
display: inline-block !important;
|
||||
max-width: 40vw !important;
|
||||
overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
|
||||
line-height: 15px !important; height: auto !important; min-height: 0 !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user