fix(ui): mini 页内容框按视口自适应并在框内滚动 + 去除硬编码蓝色
两个反馈一次处理:
1) 滚动行为割裂
实测 .minimal-section-inner 为 max-height:none / overflow:visible,
内容多即撑高整页 → 滚动落在页面;分组内容多少不同,就出现"有的能滚有的不能"。
改为:body(:has(.minimal-home)) 锁 100dvh 且 overflow:hidden,主体纵向 flex,
内容外框/内框 flex:1 + min-height:0 + overflow-y:auto,滚动统一切到框内;
底部留 84px 净空避免被悬浮件/备案号压住;仅作用于 mini 页,不影响首页与工作区。
2) 硬编码蓝色(9 处,全在 web/navi.css)
- Dashy 主题变量 --primary/--primary-alt/--info/--footer-text-color-link/
--nav-link-border-color-hover 原为 #38bdf8/#0ea5e9 → 改中性 slate
(深色块用 #cbd5e1/#94a3b8 保证可读)——这是全站泛蓝的源头
- 按钮蓝色渐变 linear-gradient(#0ea5e9,#2563eb) ×2 → 中性 slate 渐变
- 深色页脚链接 hover #38bdf8 → #e2e8f0
This commit is contained in:
53
web/navi.css
53
web/navi.css
@ -424,7 +424,7 @@ html[data-theme] .navi-search-submit {
|
||||
place-items: center !important;
|
||||
padding: 0 !important;
|
||||
color: #fff !important;
|
||||
background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
|
||||
background: linear-gradient(135deg, #64748b, #334155) !important;
|
||||
border: 0 !important;
|
||||
border-radius: 14px !important;
|
||||
box-shadow: 0 8px 20px rgba(37, 99, 235, .28) !important;
|
||||
@ -713,6 +713,41 @@ html[data-theme] .minimal-headings-wrap .tab-scroll-btn {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
/* ── mini 页:视口高度自适应 + 框内滚动 ──
|
||||
实测问题:.minimal-section-inner 是 max-height:none/overflow:visible,
|
||||
内容一多就把整页撑高,滚动落在页面上;而不同分组内容多少不同,
|
||||
于是"有的页面能滚、有的不能",观感割裂。
|
||||
做法:body 锁死视口高度不滚,页面主体改为纵向 flex,
|
||||
内容框 flex:1 + min-height:0 + overflow-y:auto —— 滚动统一发生在框内。
|
||||
仅作用于含 .minimal-home 的页面(用 :has 限定),不影响首页/工作区。 */
|
||||
html[data-theme] body:has(.minimal-home) {
|
||||
height: 100dvh !important;
|
||||
overflow: hidden !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
html[data-theme] .minimal-home {
|
||||
flex: 1 1 auto !important;
|
||||
min-height: 0 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
/* 内容外框与内框都给到"可压缩 + 可滚动",并给底部悬浮件/备案号留出净空 */
|
||||
html[data-theme] .minimal-home > .item-group-container,
|
||||
html[data-theme] .minimal-home .minimal-section-inner {
|
||||
flex: 1 1 auto !important;
|
||||
min-height: 0 !important;
|
||||
overflow-y: auto !important;
|
||||
overscroll-behavior: contain !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 84px !important;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
/* 极窄/极矮屏:内容框内滚动尤其重要,额外收紧上下留白 */
|
||||
@media (max-height: 560px) {
|
||||
html[data-theme] .minimal-home .minimal-section-inner { padding-bottom: 64px !important; }
|
||||
}
|
||||
|
||||
html[data-theme] .minimal-section-inner {
|
||||
padding: 8px !important;
|
||||
background: rgba(255, 255, 255, .34) !important;
|
||||
@ -1272,7 +1307,7 @@ html[data-theme] .navi-ws-open {
|
||||
color: #fff !important;
|
||||
font-family: inherit !important;
|
||||
font-size: 13.5px !important;
|
||||
background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
|
||||
background: linear-gradient(135deg, #64748b, #334155) !important;
|
||||
border: 0 !important;
|
||||
border-radius: 999px !important;
|
||||
box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
|
||||
@ -1491,11 +1526,11 @@ html.navi-dark {
|
||||
--context-menu-color: #e2e8f0;
|
||||
--danger: #f87171;
|
||||
--footer-text-color: #94a3b8;
|
||||
--footer-text-color-link: #38bdf8;
|
||||
--footer-text-color-link: #cbd5e1;
|
||||
--heading-text-color: #f1f5f9;
|
||||
--highlight-background-color: #1e40af;
|
||||
--highlight-color: #e2e8f0;
|
||||
--info: #38bdf8;
|
||||
--info: #94a3b8;
|
||||
--item-group-background: rgba(17, 25, 40, 0.62);
|
||||
--item-group-heading-text-color: #e8eefc;
|
||||
--item-group-heading-text-color-hover: #7dd3fc;
|
||||
@ -1504,12 +1539,12 @@ html.navi-dark {
|
||||
--nav-link-background-color: rgba(30, 41, 59, 0.55);
|
||||
--nav-link-background-color-hover: rgba(30, 41, 59, 0.85);
|
||||
--nav-link-border-color: rgba(148, 163, 184, 0.25);
|
||||
--nav-link-border-color-hover: #38bdf8;
|
||||
--nav-link-border-color-hover: #94a3b8;
|
||||
--nav-link-text-color: #cbd5e1;
|
||||
--nav-link-text-color-hover: #7dd3fc;
|
||||
--neutral: #94a3b8;
|
||||
--primary: #38bdf8;
|
||||
--primary-alt: #0ea5e9;
|
||||
--primary: #cbd5e1;
|
||||
--primary-alt: #94a3b8;
|
||||
--scroll-bar-background-color: #0f172a;
|
||||
--scroll-bar-color: #334155;
|
||||
--search-container-background: rgba(15, 23, 42, 0.6);
|
||||
@ -1604,7 +1639,7 @@ html.navi-dark body .navi-search-bar .navi-search-input {
|
||||
html.navi-dark body .navi-footer,
|
||||
html.navi-dark body .navi-footer a,
|
||||
html.navi-dark body .navi-footer .navi-footer-sep { color: #94a3b8 !important; }
|
||||
html.navi-dark body .navi-footer a:hover { color: #38bdf8 !important; }
|
||||
html.navi-dark body .navi-footer a:hover { color: #e2e8f0 !important; }
|
||||
html.navi-dark body .navi-dock button,
|
||||
html.navi-dark body .navi-dock a {
|
||||
background: rgba(30, 41, 59, 0.75) !important;
|
||||
@ -1688,7 +1723,7 @@ html.navi-dark body .navi-search-bar .navi-search-input {
|
||||
html.navi-dark body .navi-footer,
|
||||
html.navi-dark body .navi-footer a,
|
||||
html.navi-dark body .navi-footer .navi-footer-sep { color: #94a3b8 !important; }
|
||||
html.navi-dark body .navi-footer a:hover { color: #38bdf8 !important; }
|
||||
html.navi-dark body .navi-footer a:hover { color: #e2e8f0 !important; }
|
||||
html.navi-dark body .navi-dock button,
|
||||
html.navi-dark body .navi-dock a {
|
||||
background: rgba(30, 41, 59, 0.75) !important;
|
||||
|
||||
Reference in New Issue
Block a user