Files
HomeDash/web/navi.css
HomeDash Bot 6062c9cdc2 fix(ui): 工作空间页脚的 2×2 网格未生效 —— 通用选择器特异性不足
v87 实测:/workspace 页脚 display 仍是 flex(四段挤在一行,行数=1)。
原因:网格规则里的通用选择器 html[data-theme] .navi-footer 为 (0,2,1),
低于 EOF 处 html[data-theme] body .navi-footer 的 (0,2,2),
而工作空间的页脚父级是 .navi-footer-host(页面里没有 <footer> 元素),
前两条结构选择器都不匹配 → 网格规则整条落败。
修法:补两条结构路径 body > .navi-footer-host > .navi-footer((0,3,2))
与 body .navi-footer-host > .navi-footer。
2026-09-12 20:31:55 +08:00

2475 lines
97 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* HomeDash responsive presentation layer.
Loaded after Dashy's bundled styles; persistent wallpaper rules stay in conf.yml. */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* 禁用移动端/Chromium 对可点击元素注入的蓝色点击闪烁。 */
html[data-theme] *,
html[data-theme] *::before,
html[data-theme] *::after {
-webkit-tap-highlight-color: transparent !important;
}
html[data-theme] body {
/* border-box 让 padding 计入 min-height:否则 min-height:100vh 与
padding-bottom 相加,短页面(极简/工作空间)必然多出一屏滚动。 */
box-sizing: border-box !important;
min-width: 0;
overflow-x: hidden;
/* 列向 flex + 页脚 margin-top:auto,把备案号顶到页面底部而非浮在中间。 */
display: flex !important;
flex-direction: column !important;
min-height: 100vh !important;
/* 备案号占据真正的页面最底部;悬浮控件在它上方,不再用底部 padding
把页脚整体抬高。 */
padding-bottom: 0 !important;
}
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 {
min-height: auto !important;
}
/* v88:首页页脚所在的 <footer> 不预留底部内边距(8px 空隙来源) */
html[data-theme] #dashy > footer { padding-bottom: 0 !important; margin-bottom: 0 !important; }
/* Dashy's native filter/settings strip duplicates the portal search and breaks on phones.
原生设置入口(齿轮/铅笔/调色板)与我们的 /admin/ 重复,统一隐藏。 */
html[data-theme] .home > .settings-outer,
html[data-theme] .config-launcher,
html[data-theme] .options-trigger,
html[data-theme] .settings-outer,
html[data-theme] .minimal-home .title-and-search > form {
display: none !important;
}
html[data-theme] body:has(.modal-overlay) > .navi-search-bar,
html[data-theme] body:has(.modal-overlay) > .navi-footer-host {
visibility: hidden !important;
pointer-events: none !important;
}
/* Keep configuration dialogs above section tabs and cards without changing dialog layout. */
html[data-theme] .modal-overlay {
z-index: 10000 !important;
}
html[data-theme] dialog.dashy-modal {
z-index: 10001 !important;
}
/* Stable icon geometry: raster/SVG and font icons occupy the same visual box. */
html[data-theme] a.item .item-icon {
flex: 0 0 56px !important;
width: 56px !important;
min-width: 56px !important;
height: 56px !important;
min-height: 56px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
transform: none !important;
}
html[data-theme] a.item .item-icon .tile-icon,
html[data-theme] a.item .item-icon img,
html[data-theme] a.item .item-icon object {
box-sizing: border-box !important;
width: 48px !important;
min-width: 48px !important;
max-width: 48px !important;
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
padding: 2px !important;
object-fit: contain !important;
object-position: center !important;
transform: none !important;
}
html[data-theme] a.item .item-icon i,
html[data-theme] a.item .item-icon svg:not(.tile-icon) {
width: 32px !important;
height: 32px !important;
font-size: 30px !important;
line-height: 32px !important;
}
html[data-theme] a.item .tile-title {
min-width: 0 !important;
overflow: hidden;
}
html[data-theme] a.item .tile-title .text,
html[data-theme] a.item .description,
html[data-theme] a.item .item-url {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── 渲染开销:把 backdrop-filter 从「重复的卡片层」撤掉 ──
实测首页 37 个元素带模糊(24 张卡片 + 6 个分组容器 + 顶栏 + 悬浮件)。
模糊要对背景逐帧重新采样,而卡片又参与逐张淡入/悬停位移,
两者叠加就是肉眼可见的卡顿。这里保留分组容器的玻璃感与悬浮件,
卡片只留半透明底 + 边框 + 投影(视觉差异很小,开销差很多)。 */
html[data-theme] body a.item,
html[data-theme] body .minimal-section-inner,
html[data-theme] body div.item-wrapper {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* 搜索栏是最常动的元素(宽/圆角/内边距都在变),它的模糊每帧都要重算 */
html[data-theme] body .navi-search-bar {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ── 底部搜索:左下角放大镜悬浮球 ──
收起态只显示一个放大镜图标;点它展开成输入框;
展开后输入框内左侧仍是同一个放大镜按钮,点它收起。 */
html[data-theme] .navi-search-bar {
box-sizing: border-box !important;
position: fixed !important;
left: calc(16px + env(safe-area-inset-left, 0px)) !important;
bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
z-index: 900 !important;
color: #475569 !important;
background: rgba(255, 255, 255, .72) !important;
border: 1px solid rgba(255, 255, 255, .9) !important;
box-shadow: 0 14px 38px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
backdrop-filter: blur(22px) saturate(180%) !important;
-webkit-backdrop-filter: blur(22px) saturate(180%) !important;
overflow: hidden !important;
}
html[data-theme] .navi-search-bar[data-state="collapsed"] {
width: 56px !important;
height: 56px !important;
padding: 0 !important;
border-radius: 50% !important;
}
html[data-theme] .navi-search-bar[data-state="open"] {
/* 必须给右下按钮组留位:按钮组 right:16px、宽 52+10+52=114px,
其左边缘在 innerW-130;搜索栏 left:16 → 上限 innerW-130-12-16 = 100%-158px。
否则展开后发送按钮会压在视图切换/管理入口上(窄屏尤其明显)。 */
width: min(560px, calc(100% - 158px)) !important;
min-height: 58px !important;
padding: 7px 8px !important;
border-radius: 20px !important;
}
html[data-theme] .navi-search-bar[data-state="collapsed"] input,
html[data-theme] .navi-search-bar[data-state="collapsed"] .navi-search-submit {
display: none !important;
}
html[data-theme] .navi-search-toggle {
flex: 0 0 42px !important;
width: 42px !important;
height: 42px !important;
display: grid !important;
place-items: center !important;
padding: 0 !important;
color: #0f172a !important;
background: transparent !important;
border: 0 !important;
border-radius: 50% !important;
cursor: pointer;
appearance: none !important;
-webkit-appearance: none !important;
-webkit-tap-highlight-color: transparent;
transition: transform .28s cubic-bezier(.22, 1, .36, 1) !important;
}
/* 点击与聚焦都不变蓝,只保留轻微缩放反馈。 */
html[data-theme] .navi-search-toggle:hover,
html[data-theme] .navi-search-toggle:focus,
html[data-theme] .navi-search-toggle:active {
color: #0f172a !important;
background: transparent !important;
outline: none !important;
}
@media (hover: hover) {
html[data-theme] .navi-search-toggle:hover {
transform: scale(1.05);
}
}
html[data-theme] .navi-search-toggle:active {
transform: scale(.96);
}
/* ── 右下角按钮组(视图切换 + 管理入口)────
两者放进同一个 fixed 容器,便于在工作空间作为一组收边,
避免各自位移后互相重叠。 */
html[data-theme] .navi-dock {
transition: opacity .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1),
visibility 0s linear 0s !important;
position: fixed !important;
right: calc(16px + env(safe-area-inset-right, 0px)) !important;
bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
z-index: 900 !important;
}
html[data-theme] .navi-dock > .navi-admin-entry {
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
}
html[data-theme] .navi-dock > .navi-view-switch {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
}
/* 右侧管理入口:Dashy 页面本身没有去 /admin/ 的链接 */
html[data-theme] .navi-admin-entry {
box-sizing: border-box !important;
width: 52px !important;
height: 52px !important;
display: grid !important;
place-items: center !important;
z-index: 900 !important;
color: #334155 !important;
background: rgba(255, 255, 255, .72) !important;
border: 1px solid rgba(255, 255, 255, .9) !important;
border-radius: 50% !important;
box-shadow: 0 14px 38px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
backdrop-filter: blur(22px) saturate(180%) !important;
-webkit-backdrop-filter: blur(22px) saturate(180%) !important;
-webkit-tap-highlight-color: transparent !important;
transition: transform .22s cubic-bezier(.22, 1, .36, 1), background .2s ease !important;
}
html[data-theme] .navi-admin-entry:hover,
html[data-theme] .navi-admin-entry:focus,
html[data-theme] .navi-admin-entry:active {
color: #334155 !important;
background: rgba(255, 255, 255, .94) !important;
outline: none !important;
}
@media (hover: hover) {
html[data-theme] .navi-admin-entry:hover {
transform: translateY(-1px) scale(1.05);
}
}
html[data-theme] .navi-admin-entry:active {
transform: scale(.96);
}
html[data-theme] .navi-admin-entry svg {
width: 22px !important;
height: 22px !important;
}
html[data-theme] body:has(.modal-overlay) > .navi-dock,
html[data-theme] body:has(.modal-overlay) .navi-admin-entry {
visibility: hidden !important;
pointer-events: none !important;
}
/* ── 视图切换:圆形悬浮按钮,紧贴管理入口左侧 ──
原生 .switch-view-buttons 是侧栏底部的方形图标,这里一并隐藏。 */
html[data-theme] nav.side-bar .switch-view-buttons {
display: none !important;
}
html[data-theme] .navi-view-switch {
display: block !important;
}
html[data-theme] .navi-view-toggle {
box-sizing: border-box !important;
width: 52px !important;
height: 52px !important;
display: grid !important;
place-items: center !important;
padding: 0 !important;
color: #334155 !important;
background: rgba(255, 255, 255, .72) !important;
border: 1px solid rgba(255, 255, 255, .9) !important;
border-radius: 50% !important;
box-shadow: 0 14px 38px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
backdrop-filter: blur(22px) saturate(180%) !important;
-webkit-backdrop-filter: blur(22px) saturate(180%) !important;
-webkit-tap-highlight-color: transparent !important;
appearance: none !important;
-webkit-appearance: none !important;
outline: none !important;
cursor: pointer;
transition: transform .22s cubic-bezier(.22, 1, .36, 1), background .2s ease !important;
}
html[data-theme] .navi-view-toggle:hover,
html[data-theme] .navi-view-toggle:focus,
html[data-theme] .navi-view-toggle:active {
color: #334155 !important;
background: rgba(255, 255, 255, .94) !important;
}
@media (hover: hover) {
html[data-theme] .navi-view-toggle:hover {
transform: translateY(-1px) scale(1.05);
}
}
html[data-theme] .navi-view-toggle:active {
transform: scale(.96);
}
html[data-theme] .navi-view-toggle svg {
width: 22px !important;
height: 22px !important;
}
html[data-theme] .navi-view-menu {
position: absolute !important;
right: 0 !important;
bottom: 62px !important;
min-width: 134px !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
padding: 7px !important;
background: rgba(255, 255, 255, .92) !important;
border: 1px solid rgba(255, 255, 255, .95) !important;
border-radius: 16px !important;
box-shadow: 0 18px 40px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
animation: navi-fade-up .22s cubic-bezier(.22, 1, .36, 1) both;
}
html[data-theme] .navi-view-menu[hidden] {
display: none !important;
}
html[data-theme] .navi-view-option {
padding: 9px 12px !important;
color: #334155 !important;
font-size: 13.5px !important;
text-decoration: none !important;
border-radius: 10px !important;
white-space: nowrap !important;
-webkit-tap-highlight-color: transparent !important;
}
html[data-theme] .navi-view-option:hover,
html[data-theme] .navi-view-option:focus,
html[data-theme] .navi-view-option:active {
color: #0f172a !important;
background: rgba(226, 232, 240, .7) !important;
outline: none !important;
}
html[data-theme] .navi-view-option.is-active {
color: #0f172a !important;
background: rgba(186, 230, 253, .55) !important;
font-weight: 600 !important;
}
html[data-theme] body:has(.modal-overlay) .navi-view-switch {
visibility: hidden !important;
pointer-events: none !important;
}
html[data-theme] .navi-search-bar input {
min-width: 0 !important;
height: 42px !important;
flex: 1 1 auto !important;
padding: 0 4px !important;
color: #0f172a !important;
background: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
font: inherit !important;
font-size: 16px !important;
}
html[data-theme] .navi-search-bar input::placeholder {
color: #64748b !important;
opacity: 1;
}
html[data-theme] .navi-search-submit {
flex: 0 0 44px !important;
width: 44px !important;
height: 44px !important;
display: grid !important;
place-items: center !important;
padding: 0 !important;
color: #fff !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;
cursor: pointer;
-webkit-tap-highlight-color: transparent !important;
outline: none !important;
}
html[data-theme] .navi-search-toggle svg,
html[data-theme] .navi-search-submit svg {
width: 20px;
height: 20px;
}
/* 放大镜与搜索框同步形变:圆环、手柄退场,向左收起箭头进入。 */
html[data-theme] .navi-search-toggle svg {
overflow: visible;
}
html[data-theme] .navi-magnifier-ring,
html[data-theme] .navi-magnifier-handle,
html[data-theme] .navi-collapse-arrow {
transform-box: fill-box;
transform-origin: center;
transition: opacity .22s ease, transform .28s cubic-bezier(.22, 1, .36, 1) !important;
}
html[data-theme] .navi-collapse-arrow {
opacity: 0;
transform: translateX(5px) scale(.62);
}
html[data-theme] .navi-search-bar[data-state="open"] .navi-magnifier-ring {
opacity: 0;
transform: translateX(-4px) scale(.28);
}
html[data-theme] .navi-search-bar[data-state="open"] .navi-magnifier-handle {
opacity: 0;
transform: translate(-4px, -4px) rotate(-35deg) scale(.45);
}
html[data-theme] .navi-search-bar[data-state="open"] .navi-collapse-arrow {
opacity: 1;
transform: translateX(0) scale(1);
}
/* Minimal view is the phone/tablet layout used by Dashy. */
html[data-theme] .minimal-home {
box-sizing: border-box !important;
width: min(100% - 24px, 920px) !important;
max-width: 920px !important;
min-height: auto !important;
margin: 0 auto !important;
padding: 28px 0 16px !important;
background: transparent !important;
}
html[data-theme] .minimal-home .title-and-search {
padding: 0 8px !important;
}
/* ── 顶部标题:三个视图统一(同字号/字重/字距/居中)──
此前 /minimal 是 48px 居中,而 / 与 /workspace 是顶栏里 40px 左对齐,
同一个站点的三个视图两套标题样式,很割裂。 */
html[data-theme] #dashy > header {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 12px !important;
}
html[data-theme] #dashy > header .page-titles {
display: block !important;
width: auto !important;
max-width: 100% !important;
margin: 0 auto !important;
text-align: center !important;
}
html[data-theme] #dashy > header .page-titles .text {
display: block !important;
text-align: center !important;
}
html[data-theme] #dashy > header .page-titles .subtitle {
display: block !important;
margin: 6px 0 0 !important;
color: #64748b !important;
font-size: 13.5px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: center !important;
}
html[data-theme] #dashy > header .page-titles h1,
html[data-theme] .minimal-home .title-and-search h1 {
max-width: 100%;
margin: 0 !important;
color: #0f172a !important;
font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
font-weight: 700 !important;
line-height: 1.08 !important;
letter-spacing: -.035em !important;
text-align: center !important;
overflow-wrap: anywhere;
}
html[data-theme] .minimal-home > .item-group-container {
box-sizing: border-box !important;
width: 100% !important;
margin: 32px auto 0 !important;
padding: 0 6px !important;
}
html[data-theme] .minimal-headings-wrap {
position: relative;
z-index: 2;
gap: 6px !important;
margin-bottom: 8px !important;
}
html[data-theme] .minimal-headings-row {
gap: 6px !important;
scroll-snap-type: x proximity;
}
/* 滚动行两端用 mask 渐变淡出:此前卡片在滚动行边缘(紧贴两侧 ‹ › 按钮)
被硬切,看起来像"被按钮截断"。用 :has() 关联翻页按钮的 disabled 状态,
已经在尽头的一侧就不淡出,避免"尽头还在渐隐"的错觉。 */
html[data-theme] .minimal-headings-row {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
/* 已到最左:左侧不淡出 */
html[data-theme] .minimal-headings-wrap:has(> .tab-scroll-btn:first-child[disabled]) .minimal-headings-row {
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
/* 已到最右:右侧不淡出 */
html[data-theme] .minimal-headings-wrap:has(> .tab-scroll-btn:last-child[disabled]) .minimal-headings-row {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%);
mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%);
}
/* 两端都到尽头:完全不淡出 */
html[data-theme] .minimal-headings-wrap:has(> .tab-scroll-btn:first-child[disabled]):has(> .tab-scroll-btn:last-child[disabled]) .minimal-headings-row {
-webkit-mask-image: none;
mask-image: none;
}
html[data-theme] .minimal-headings-row .headings {
flex-basis: 132px !important;
min-height: 44px !important;
padding: 8px 12px !important;
border-radius: 14px !important;
scroll-snap-align: start;
}
/* ── mini 页顶部页签:与搜索栏/浮动件同一套玻璃质感 ──
此前这里只有尺寸与圆角、没有底色/边框/模糊,导致顶部一排与页面其它
玻璃面(dock、搜索栏、卡片容器)质感严重不符、看着"割裂"。 */
html[data-theme] .minimal-headings-row .headings {
background: rgba(255, 255, 255, .72) !important;
border: 1px solid rgba(255, 255, 255, .9) !important;
box-shadow: 0 14px 38px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
backdrop-filter: blur(22px) saturate(180%) !important;
-webkit-backdrop-filter: blur(22px) saturate(180%) !important;
transition: background .2s ease, transform .22s cubic-bezier(.22, 1, .36, 1) !important;
}
/* 页签内的小图标:按要求移除(否则选中态会带 Dashy 的 --primary 蓝色) */
html[data-theme] .minimal-headings-row .headings .section-icon,
html[data-theme] .minimal-headings-row .headings .item-icon {
display: none !important;
}
/* 选中页签:不用蓝色描边、不用蓝色填充,改成**从中心向四周扩散**的高亮。
做法 = 中心偏白的径向渐变叠在玻璃底上;越靠边越淡,边界不外扩,
因此与未选中页签的差异靠"亮度/光晕",而不是颜色或描边。 */
html[data-theme] .minimal-headings-row .headings.selected {
background-color: rgba(255, 255, 255, .55) !important;
background-image: radial-gradient(circle at 50% 50%,
rgba(255, 255, 255, .98) 0%,
rgba(255, 255, 255, .75) 38%,
rgba(255, 255, 255, .30) 68%,
rgba(255, 255, 255, .10) 100%) !important;
border-color: rgba(255, 255, 255, .55) !important;
box-shadow: 0 14px 34px rgba(15, 23, 42, .14),
0 0 0 1px rgba(255, 255, 255, .45) inset !important;
}
/* 未选中页签:保持克制的玻璃底(不加渐变),形成"选中=有光晕"的对照 */
html[data-theme] .minimal-headings-row .headings:not(.selected) {
background-image: none !important;
}
/* 文字可读性:命中 Dashy 的 --primary 蓝色文字时强制回中性色
(浅色=近黑、深色=近白),并保证与中心高亮底的对比度 */
html[data-theme] .minimal-headings-row .headings .section-title,
html[data-theme] .minimal-headings-row .headings h3,
html[data-theme] .minimal-headings-row .headings i,
html[data-theme] .minimal-headings-row .headings .section-title * {
color: #0f172a !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, .55) !important;
}
html[data-theme] .minimal-headings-row .headings:not(.selected) .section-title,
html[data-theme] .minimal-headings-row .headings:not(.selected) h3 {
color: #334155 !important;
text-shadow: none !important;
}
/* 点击/键盘聚焦时不要出现底色描边式的焦点框(保留细白环即可可见性) */
html[data-theme] .minimal-headings-row .headings:focus,
html[data-theme] .minimal-headings-row .headings:focus-visible {
outline: none !important;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 12px 30px rgba(15, 23, 42, .14) !important;
}
/* 左右翻页按钮同样上玻璃,否则它们在页签旁边像两块"素片" */
html[data-theme] .minimal-headings-wrap .tab-scroll-btn {
background: rgba(255, 255, 255, .72) !important;
border: 1px solid rgba(255, 255, 255, .9) !important;
box-shadow: 0 10px 26px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
backdrop-filter: blur(18px) saturate(170%) !important;
-webkit-backdrop-filter: blur(18px) saturate(170%) !important;
color: inherit !important;
}
html[data-theme] .minimal-headings-wrap .tab-scroll-btn:disabled {
opacity: .45 !important;
}
/* 深色模式:同一配方换成深色玻璃(与 dock/页脚一致),避免深色下反而发白刺眼 */
html.navi-dark[data-theme] .minimal-headings-row .headings {
background: rgba(20, 31, 49, .78) !important;
border: 1px solid rgba(148, 163, 184, .22) !important;
box-shadow: 0 14px 38px rgba(2, 6, 23, .45), inset 0 1px 0 rgba(148, 163, 184, .18) !important;
}
html.navi-dark[data-theme] .minimal-headings-row .headings.selected {
background-color: rgba(30, 44, 68, .55) !important;
background-image: radial-gradient(circle at 50% 50%,
rgba(148, 197, 255, .38) 0%,
rgba(120, 170, 235, .22) 40%,
rgba(90, 130, 190, .10) 70%,
rgba(20, 31, 49, 0) 100%) !important;
border-color: rgba(148, 163, 184, .30) !important;
box-shadow: 0 14px 34px rgba(2, 6, 23, .45), 0 0 0 1px rgba(148, 163, 184, .18) inset !important;
}
html.navi-dark[data-theme] .minimal-headings-row .headings .section-title,
html.navi-dark[data-theme] .minimal-headings-row .headings h3,
html.navi-dark[data-theme] .minimal-headings-row .headings i {
color: #f1f5f9 !important;
text-shadow: 0 1px 2px rgba(2, 6, 23, .5) !important;
}
html.navi-dark[data-theme] .minimal-headings-row .headings:not(.selected) .section-title,
html.navi-dark[data-theme] .minimal-headings-row .headings:not(.selected) h3 {
color: #a9b8cd !important;
text-shadow: none !important;
}
html.navi-dark[data-theme] .minimal-headings-row .headings:focus,
html.navi-dark[data-theme] .minimal-headings-row .headings:focus-visible {
box-shadow: 0 0 0 2px rgba(148, 163, 184, .55), 0 12px 30px rgba(2, 6, 23, .45) !important;
}
html.navi-dark[data-theme] .minimal-headings-wrap .tab-scroll-btn {
background: rgba(20, 31, 49, .78) !important;
border: 1px solid rgba(148, 163, 184, .22) !important;
box-shadow: 0 10px 26px rgba(2, 6, 23, .5), inset 0 1px 0 rgba(148, 163, 184, .18) !important;
}
/* 尊重"减少动画"偏好 */
@media (prefers-reduced-motion: reduce) {
html[data-theme] .minimal-headings-row .headings { transition: none !important; }
}
html[data-theme] .minimal-headings-row .headings .section-title {
font-size: 15px !important;
line-height: 1.2 !important;
}
html[data-theme] .minimal-headings-wrap .tab-scroll-btn {
min-width: 34px !important;
padding: 0 8px !important;
border-radius: 12px !important;
}
/* ── mini 页:一屏刚好撑满 + 框内滚动(修正版)──
上一版只锁了 body 的 overflow,却没有可滚动的内层,也没让框收缩:
结果内容被"藏起来"。根因是 flex 链条上有两层无名 wrapper(div ← div)
没有 min-height:0,容器因此无法压缩、只会被内容撑高。
这一版把链条每一环都补齐,并把滚动显式交给内容框。 */
html[data-theme] body:has(.minimal-home) {
height: 100dvh !important;
max-height: 100dvh !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
/* flex 链条上的中间 wrapper(Dashy 的 #app / 包装 div)必须允许压缩 */
/* v74 修正:本规则本意是让 minimal 页的内容链可压缩(v60),
但它匹配了 body 下**所有** div 与 div>div —— 于是把悬浮控件
.navi-dock(body 直接子元素)与 .navi-view-switch 也设成了
overflow:hidden + display:flex + flex-direction:column,
导致"切换视图"菜单被裁剪:只露一条缝、中心点命中 #dashy、选项全都点不到
(实测证据:祖先链 overflow=hidden + 开关像素比对有变化 + elementFromPoint 命中 #dashy)。
故排除导航控件子树,其余保持原行为。 */
html[data-theme] body:has(.minimal-home) > div:not(.navi-dock):not(.navi-view-switch):not(.navi-view-menu):not(.navi-footer-host),
html[data-theme] body:has(.minimal-home) > div > div:not(.navi-view-switch):not(.navi-view-menu):not(.navi-dock):not(.navi-footer) {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: 100% !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
html[data-theme] .minimal-home {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: 100% !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
/* 内容外框:只负责"吃掉剩余高度 + 纵向排列",**自己不滚**
—— 页签行(.minimal-headings-wrap)和内容都在它里面,
若让它滚,滚动时页签会被一起带走(用户实测发现的正是这个)。 */
html[data-theme] .minimal-home > .item-group-container {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: 100% !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
}
/* 表项框:唯一滚动区。页签在其上方,滚动时保持不动。 */
html[data-theme] .minimal-home > .item-group-container > .minimal-section-inner {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch;
padding-bottom: 84px !important;
scrollbar-width: thin;
}
/* ── mini 页:备案号脱离内容流、固定贴底 ──
实测:.navi-footer-host 处在内容流中,页脚 top 随内容高度在 481~527 间漂移,
内容少的页签下备案号位置就不对(用户反馈"都成这样了")。
让它 fixed 贴底后,内容框自然吃满剩余高度、高度恒定,
备案号位置与内容多少无关。 */
/* ── 页脚:真正的一行 + 不遮挡内容(第三次,这次不裁切) ──
实测故障:页脚 host 高 123px、内部胶囊 209×93 且 overflow:hidden,
与内容区(底 701)重叠约 103px —— 那块半透明白块既像遮罩又挡住点击。
做法:① 去掉胶囊(透明/无边框/无模糊);② 内容就自然排成一行,不设高度裁切;
③ 用 margin-bottom 在布局里**预留**页脚高度,让内容框不与之重叠。 */
html[data-theme] body:has(.minimal-home) .navi-footer-host {
/* v88:最后一处 fixed 浮层改为静态布局行 */
position: static !important;
left: auto !important; right: auto !important; bottom: auto !important;
flex: 0 0 auto !important; width: 100% !important;
height: auto !important; max-height: none !important;
display: flex !important; align-items: center !important; justify-content: flex-start !important;
padding: 0 0 4px !important; margin: 0 !important;
background: transparent !important; border: 0 !important;
box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
pointer-events: none !important;
z-index: 3 !important;
overflow: visible !important;
}
html[data-theme] .navi-footer {
display: inline-flex !important;
align-items: center !important; justify-content: center !important;
gap: 6px !important; flex-wrap: nowrap !important;
width: max-content !important; max-width: calc(100vw - 16px) !important;
height: auto !important; max-height: 22px !important;
padding: 0 8px !important; margin: 0 auto !important;
background: transparent !important; border: 0 !important; border-radius: 0 !important;
box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
font-size: 11px !important; line-height: 1.45 !important;
color: #94a3b8 !important; white-space: nowrap !important;
overflow: visible !important;
}
html[data-theme] .navi-footer a,
html[data-theme] .navi-footer .navi-footer-sep { font-size: 11px !important; color: inherit !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: #7c8ea6 !important; }
/* 每日一言:可省略但不裁切到不可见 */
html[data-theme] .navi-footer .navi-quote {
min-width: 0 !important; flex: 0 1 auto !important;
overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
color: #b6c2d2 !important; font-style: italic;
max-width: 40vw !important;
}
html.navi-dark[data-theme] .navi-footer .navi-quote { color: #6b7d95 !important; }
/* 关键:在布局里为固定页脚预留 26px,内容框不再被盖住 */
html[data-theme] .minimal-home > .item-group-container {
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: 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;
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: 8px !important;
}
/* 页签行固定:不参与滚动,也不被压缩 */
html[data-theme] .minimal-home .minimal-headings-wrap {
flex: 0 0 auto !important;
}
@media (max-height: 560px) {
html[data-theme] .minimal-home > .item-group-container { padding-bottom: 64px !important; }
}
html[data-theme] .minimal-section-inner {
padding: 8px !important;
background: rgba(255, 255, 255, .34) !important;
border: 1px solid rgba(255, 255, 255, .72) !important;
border-radius: 20px !important;
box-shadow: 0 16px 38px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .88) !important;
backdrop-filter: blur(20px) saturate(170%) !important;
-webkit-backdrop-filter: blur(20px) saturate(170%) !important;
}
/* 空分组(非选中分组 / 无条目)不能被渲染成空玻璃条。
Dashy 会把其余分组渲染成 16px 的空 .minimal-section-inner,
一旦给它加了边框和底色就会变成一排“莫名其妙的框”。 */
html[data-theme] .minimal-section-inner:not(:has(a.item)),
html[data-theme] .minimal-section-inner:empty {
display: none !important;
}
html[data-theme] .minimal-widget-wrap:empty {
display: none !important;
}
html[data-theme] .minimal-section-inner .section-items {
gap: 10px !important;
}
html[data-theme] .minimal-section-inner a.item {
box-sizing: border-box !important;
min-height: 82px !important;
margin: 0 !important;
padding: 12px 16px !important;
}
@media (max-width: 599px) {
html[data-theme] .minimal-home {
width: min(100% - 16px, 430px) !important;
padding-top: 22px !important;
}
html[data-theme] #dashy > header .page-titles h1,
html[data-theme] .minimal-home .title-and-search h1 {
font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
}
html[data-theme] .minimal-home > .item-group-container {
margin-top: 26px !important;
padding: 0 !important;
}
html[data-theme] .minimal-headings-row .headings {
flex-basis: 116px !important;
padding: 8px 10px !important;
}
html[data-theme] .minimal-section-inner {
padding: 7px !important;
}
html[data-theme] .minimal-section-inner a.item {
min-height: 78px !important;
padding: 10px 12px !important;
border-radius: 16px !important;
}
html[data-theme] a.item .item-icon {
flex-basis: 52px !important;
width: 52px !important;
min-width: 52px !important;
height: 52px !important;
min-height: 52px !important;
}
html[data-theme] a.item .item-icon .tile-icon,
html[data-theme] a.item .item-icon img,
html[data-theme] a.item .item-icon object {
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
}
/* Keep the screen-level warning inside the phone viewport. */
html[data-theme] .modal-overlay .modal-body {
min-width: 0 !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
html[data-theme] .modal-overlay .config-tabs {
overflow-x: auto !important;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
html[data-theme] .modal-overlay .config-tabs::-webkit-scrollbar {
display: none;
}
html[data-theme] .modal-overlay .config-tabs > * {
flex: 0 0 auto !important;
}
html[data-theme] .modal-overlay .config-buttons,
html[data-theme] .modal-overlay .config-buttons > * {
min-width: 0 !important;
max-width: 100% !important;
}
html[data-theme] .modal-overlay .config-buttons > p,
html[data-theme] .modal-overlay .config-buttons .warning,
html[data-theme] .modal-overlay .config-buttons .info {
white-space: normal !important;
overflow-wrap: anywhere !important;
}
html[data-theme] .navi-search-bar {
left: calc(10px + env(safe-area-inset-left, 0px)) !important;
bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}
html[data-theme] .navi-search-bar[data-state="collapsed"] {
width: 52px !important;
height: 52px !important;
}
html[data-theme] .navi-search-bar[data-state="open"] {
/* 移动端按钮组 right:10px、宽 48+8+48=104px → 左边缘 innerW-114,
搜索栏 left:10 → 上限 100%-132px */
width: calc(100% - 132px) !important;
min-height: 56px !important;
border-radius: 18px !important;
}
html[data-theme] .navi-admin-entry {
width: 48px !important;
height: 48px !important;
}
html[data-theme] .navi-dock {
right: calc(10px + env(safe-area-inset-right, 0px)) !important;
bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
gap: 8px !important;
}
/* 移动端基准 right:10px,露出 14px → 位移 = 自身宽度 - 4px */
html[data-theme][data-navi-view="workspace"] .navi-dock {
transform: translateX(calc(100% - 4px)) !important;
}
html[data-theme] .navi-view-toggle {
width: 48px !important;
height: 48px !important;
}
html[data-theme] .navi-view-toggle svg {
width: 20px !important;
height: 20px !important;
}
html[data-theme] body {
padding-bottom: 0 !important;
}
}
/* 极窄屏(≤380px):输入框展开时右下按钮组整组让位。
预留式收窄在 320px 下只剩 68px 可输入,不可用;搜索是聚焦动作,
此时把两个按钮藏起来(visibility 不受 prefers-reduced-motion 影响,
比 transform 更可靠),搜索栏即可用满宽度。 */
@media (max-width: 380px) {
/* 备案号在这里会换行成两行(实测 390px 高 39px、320px 高 66px),
而按钮固定在 bottom:76px → 实测两者只剩 1px。把按钮上移并收紧凑页脚,
保证仍有 ~20px 间隙。 */
html[data-theme] .navi-search-bar {
bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
}
html[data-theme] .navi-dock {
bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
}
html[data-theme] .navi-footer {
gap: 6px !important;
padding: 8px 16px !important;
}
html[data-theme] .navi-search-bar[data-state="open"] {
width: calc(100% - 40px) !important;
}
html[data-theme] .navi-search-bar[data-state="open"] ~ .navi-dock {
/* visibility 延迟到淡出结束再切,否则瞬间消失、看不到过渡 */
visibility: hidden !important;
pointer-events: none !important;
opacity: 0 !important;
transform: translateY(10px) !important;
transition: opacity .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1),
visibility 0s linear .2s !important;
}
}
/* ── 页脚:备案号胶囊 ──
备案号在 /admin/ 里编辑,这里只负责呈现;同时清掉历史上塞在
内联样式里的 margin-bottom:80px(那是给旧的流式搜索栏让位的)。 */
html[data-theme] footer {
margin: 0 !important;
padding: 0 0 8px !important;
background: transparent !important;
}
html[data-theme] footer > div {
margin-bottom: 0 !important;
padding: 0 !important;
}
/* 极简/工作空间视图补的备案号页脚:留在文档流里,靠 body 的 flex
把它顶到页面底部(贴着悬浮搜索栏上方),而不是 fixed 浮在内容中间。 */
html[data-theme] .navi-footer-host {
margin-top: auto !important;
display: flex !important;
justify-content: center !important;
padding: 8px !important;
}
html[data-theme] .navi-footer {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
width: fit-content !important;
max-width: min(680px, calc(100% - 24px)) !important;
margin: 14px auto 0 !important;
padding: 9px 18px !important;
color: #64748b !important;
font-size: 12.5px !important;
line-height: 1.4 !important;
background: rgba(255, 255, 255, .55) !important;
border: 1px solid rgba(255, 255, 255, .78) !important;
border-radius: 999px !important;
box-shadow: 0 6px 18px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
backdrop-filter: blur(14px) saturate(170%) !important;
-webkit-backdrop-filter: blur(14px) saturate(170%) !important;
}
html[data-theme] .navi-footer a {
color: #64748b !important;
text-decoration: none !important;
border-bottom: 1px dashed rgba(100, 116, 139, .45) !important;
-webkit-tap-highlight-color: transparent !important;
}
html[data-theme] .navi-footer a:hover,
html[data-theme] .navi-footer a:focus,
html[data-theme] .navi-footer a:active {
color: #64748b !important;
border-bottom-color: rgba(100, 116, 139, .45) !important;
outline: none !important;
}
html[data-theme] .navi-footer-sep {
color: rgba(100, 116, 139, .45) !important;
}
/* ── 工作空间:悬浮控件与备案号收起到屏幕边缘 ──
工作空间中间嵌的是别人的应用,这些常驻控件会遮挡内容。
搜索球收左边缘、右下角按钮组整组收右边缘、备案号收下边缘,
各留 14px 露出;鼠标移入或点击、聚焦时滑出展开。 */
html[data-theme][data-navi-view="workspace"] .navi-search-bar,
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;
}
/* 基础 left 为 16px、宽 56px → 位移 58px 后恰好露出 14px */
html[data-theme][data-navi-view="workspace"] .navi-search-bar {
transform: translateX(-58px) !important;
}
/* 按钮组整组右移自身宽度减 14px,恰好露出 14px */
html[data-theme][data-navi-view="workspace"] .navi-dock {
/* 基准 right:16px,露出 14px → 位移 = 自身宽度 + 16px - 14px */
transform: translateX(calc(100% + 2px)) !important;
}
/* v87:工作空间页脚同样不再悬浮/藏匿 —— 静态行,始终完整可见 */
html[data-theme][data-navi-view="workspace"] .navi-footer-host {
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;
}
/* 展开:悬停 / 聚焦 / 按下 / 搜索已展开 */
html[data-theme][data-navi-view="workspace"] .navi-search-bar:hover,
html[data-theme][data-navi-view="workspace"] .navi-search-bar:focus-within,
html[data-theme][data-navi-view="workspace"] .navi-search-bar[data-state="open"],
html[data-theme][data-navi-view="workspace"] .navi-dock:hover,
html[data-theme][data-navi-view="workspace"] .navi-dock:focus-within,
html[data-theme][data-navi-view="workspace"] .navi-footer-host:hover,
html[data-theme][data-navi-view="workspace"] .navi-footer-host:focus-within,
/* 触摸/点击展开:第一次交互只滑出,第二次才触发(见 navi.js 的 peek guard) */
html[data-navi-view="workspace"].navi-peek-open .navi-search-bar,
html[data-navi-view="workspace"].navi-peek-open .navi-dock,
html[data-navi-view="workspace"].navi-peek-open .navi-footer-host {
opacity: 1 !important;
transform: translateX(0) translateY(0) !important;
}
/* ── 工作空间:点侧栏应用 → 在中间内嵌打开网页 ──
Dashy 的面板就是 iframe,我们只是让它在文档流里正常显示、并且只在
「可内嵌」时显示;被拒绝时改为明确提示,而不是一片空白。
用正常文档流(而不是 fixed 钉在视口中间),否则会把页面切成
「顶栏 / 大方块 / 底部」三段,看起来上下都被截断。 */
html[data-theme] .work-space {
height: auto !important;
min-height: 0 !important;
}
html[data-theme] .work-space .multi-taking-view,
html[data-theme] .work-space .workspace-widget-view {
display: none !important;
}
/* iframe 面板与提示卡共用同一块位置,切换状态时布局不跳动 */
html[data-theme] .work-space .web-content,
html[data-theme] .work-space .navi-ws-notice {
box-sizing: border-box !important;
position: static !important;
display: none !important;
width: auto !important;
height: min(72vh, 720px) !important;
min-height: 300px !important;
margin: 18px 18px 14px 72px !important;
border: 1px solid rgba(255, 255, 255, .85) !important;
border-radius: 20px !important;
box-shadow: 0 18px 44px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
overflow: hidden !important;
z-index: 1 !important;
}
html[data-theme] .work-space .web-content {
padding: 0 !important;
background: #fff !important;
}
html[data-theme] .work-space[data-navi-ws="frame"] .web-content {
display: block !important;
margin-top: 8px !important;
}
/* 面板工具条:常驻退路(刷新 / 在新标签页打开),只在内嵌态出现 */
html[data-theme] .navi-ws-bar {
display: none !important;
}
html[data-theme] .work-space[data-navi-ws="frame"] .navi-ws-bar {
box-sizing: border-box !important;
position: static !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
min-height: 40px !important;
margin: 18px 18px 0 72px !important;
padding: 5px 6px 5px 16px !important;
background: rgba(255, 255, 255, .55) !important;
border: 1px solid rgba(255, 255, 255, .82) !important;
border-radius: 999px !important;
box-shadow: 0 10px 26px rgba(15, 23, 42, .1), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
backdrop-filter: blur(16px) saturate(180%) !important;
-webkit-backdrop-filter: blur(16px) saturate(180%) !important;
}
html[data-theme] .navi-ws-bar-host {
color: #0f172a !important;
font-size: 13.5px !important;
font-weight: 600 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html[data-theme] .navi-ws-bar-note {
color: #94a3b8 !important;
font-size: 12.5px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html[data-theme] .navi-ws-bar-spacer {
flex: 1 1 auto !important;
}
html[data-theme] .navi-ws-bar-btn {
flex: 0 0 auto !important;
padding: 6px 13px !important;
color: #334155 !important;
font-family: inherit !important;
font-size: 12.5px !important;
background: rgba(255, 255, 255, .72) !important;
border: 1px solid rgba(255, 255, 255, .9) !important;
border-radius: 999px !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent !important;
outline: none !important;
}
html[data-theme] .navi-ws-bar-btn:hover,
html[data-theme] .navi-ws-bar-btn:focus,
html[data-theme] .navi-ws-bar-btn:active {
color: #0f172a !important;
background: rgba(255, 255, 255, .95) !important;
}
html[data-theme] .work-space .web-content iframe {
/* 必须是 static:Dashy 默认 absolute,包含块是 #dashy 而不是 .web-content,
于是 .web-content 的 overflow:hidden 拦不住它,iframe 会按 #dashy 的高度
撑高整页(实测多出 77px 纵向滚动)。 */
position: static !important;
display: block !important;
width: 100% !important;
height: 100% !important;
border: 0 !important;
background: #fff !important;
}
html[data-theme] .work-space[data-navi-ws="hint"] .navi-ws-notice,
html[data-theme] .work-space[data-navi-ws="loading"] .navi-ws-notice,
html[data-theme] .work-space[data-navi-ws="blocked"] .navi-ws-notice {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
padding: 24px !important;
text-align: center !important;
background: rgba(255, 255, 255, .55) !important;
backdrop-filter: blur(18px) saturate(180%) !important;
-webkit-backdrop-filter: blur(18px) saturate(180%) !important;
}
html[data-theme] .navi-ws-notice-title {
color: #0f172a !important;
font-size: 16px !important;
font-weight: 650 !important;
}
html[data-theme] .navi-ws-notice-text {
color: #64748b !important;
font-size: 13.5px !important;
}
html[data-theme] .navi-ws-notice-url {
max-width: 80% !important;
color: #94a3b8 !important;
font-size: 12.5px !important;
word-break: break-all !important;
}
/* ── 「不支持在工作区显示」弹层 ──
被拒内嵌时不能只是面板里一行字:用户点了必须有明确反馈。
z-index 低于 Dashy 自己的配置弹层(10000),避免挡住它。 */
html[data-theme] .navi-ws-modal {
position: fixed !important;
inset: 0 !important;
z-index: 9990 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 18px !important;
background: rgba(15, 23, 42, .28) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
animation: navi-fade-in .18s ease both;
}
html[data-theme] .navi-ws-modal.closing {
opacity: 0 !important;
transition: opacity .16s ease !important;
}
html[data-theme] .navi-ws-modal.closing .navi-ws-modal-card {
transform: translateY(8px) scale(.98) !important;
transition: transform .16s ease !important;
}
html[data-theme] .navi-ws-modal-card {
box-sizing: border-box !important;
width: min(420px, 100%) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
padding: 24px 22px 20px !important;
text-align: center !important;
background: rgba(255, 255, 255, .96) !important;
border: 1px solid rgba(255, 255, 255, .9) !important;
border-radius: 20px !important;
box-shadow: 0 26px 60px rgba(15, 23, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
animation: navi-fade-up .22s cubic-bezier(.22, 1, .36, 1) both;
}
html[data-theme] .navi-ws-modal-title {
color: #0f172a !important;
font-size: 17px !important;
font-weight: 650 !important;
}
html[data-theme] .navi-ws-modal-host {
color: #0284c7 !important;
font-size: 13px !important;
word-break: break-all !important;
}
html[data-theme] .navi-ws-modal-text {
color: #64748b !important;
font-size: 13.5px !important;
line-height: 1.5 !important;
}
html[data-theme] .navi-ws-modal-actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
justify-content: center !important;
margin-top: 10px !important;
}
html[data-theme] .navi-ws-modal-ok {
padding: 9px 18px !important;
color: #334155 !important;
font-family: inherit !important;
font-size: 13.5px !important;
background: rgba(241, 245, 249, .95) !important;
border: 1px solid rgba(203, 213, 225, .9) !important;
border-radius: 999px !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent !important;
outline: none !important;
}
html[data-theme] .navi-ws-modal-ok:hover,
html[data-theme] .navi-ws-modal-ok:focus {
color: #0f172a !important;
background: rgba(255, 255, 255, .98) !important;
}
html[data-theme] .navi-ws-open {
margin-top: 6px !important;
padding: 9px 18px !important;
color: #fff !important;
font-family: inherit !important;
font-size: 13.5px !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;
-webkit-tap-highlight-color: transparent !important;
outline: none !important;
cursor: pointer;
}
/* ── 工作空间:侧栏与内容区同样走玻璃圆角 ── */
html[data-theme] nav.side-bar {
background: rgba(255, 255, 255, .62) !important;
border-right: 1px solid rgba(255, 255, 255, .6) !important;
backdrop-filter: blur(18px) saturate(180%) !important;
-webkit-backdrop-filter: blur(18px) saturate(180%) !important;
}
html[data-theme] nav.side-bar .side-bar-section {
padding: 2px !important;
}
html[data-theme] nav.side-bar .side-bar-item {
border-radius: 12px !important;
transition: background .2s ease !important;
}
html[data-theme] nav.side-bar .side-bar-item:hover {
background: rgba(255, 255, 255, .92) !important;
}
/* ── 动效 ──
只动 transform / opacity,不触发布局;时长 180–380ms,
缓动统一 cubic-bezier(.22,1,.36,1)(快速起步、平稳收尾)。 */
@keyframes navi-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes navi-fade-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes navi-bar-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
html[data-theme] html,
html[data-theme] body {
scroll-behavior: smooth;
}
/* 视图切换:主内容与选中分组淡入 */
html[data-theme] #dashy > *,
html[data-theme] .minimal-section-inner.selected,
html[data-theme] .work-space {
animation: navi-fade-in .3s cubic-bezier(.22, 1, .36, 1) both;
}
/* 悬浮搜索栏:从下侧滑入 */
html[data-theme] .navi-search-bar {
animation: navi-bar-in .36s cubic-bezier(.22, 1, .36, 1) both;
transition: box-shadow .24s ease, border-color .24s ease, background .24s ease,
width .28s cubic-bezier(.22, 1, .36, 1), border-radius .28s ease !important;
}
html[data-theme] .navi-admin-entry {
animation: navi-fade-in .42s ease both;
}
html[data-theme] .navi-search-submit {
transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease, filter .2s ease !important;
}
html[data-theme] .navi-search-submit:hover {
filter: brightness(1.06);
transform: translateY(-1px) scale(1.04);
box-shadow: 0 12px 26px rgba(37, 99, 235, .34) !important;
}
html[data-theme] .navi-search-submit:focus,
html[data-theme] .navi-search-submit:active {
outline: none !important;
}
html[data-theme] .navi-search-submit:active {
transform: translateY(0) scale(.96);
}
html[data-theme] .navi-footer-host {
animation: navi-fade-in .42s ease both;
}
/* 卡片逐个淡入:只作用在内容层,避免和 masonry 布局的位移冲突 */
html[data-theme] div.collapsible-content .item-wrapper,
html[data-theme] .minimal-section-inner .item-wrapper {
animation: navi-fade-up .34s cubic-bezier(.22, 1, .36, 1) both;
}
html[data-theme] .item-wrapper:nth-child(1) { animation-delay: 0ms; }
html[data-theme] .item-wrapper:nth-child(2) { animation-delay: 30ms; }
html[data-theme] .item-wrapper:nth-child(3) { animation-delay: 60ms; }
html[data-theme] .item-wrapper:nth-child(4) { animation-delay: 90ms; }
html[data-theme] .item-wrapper:nth-child(5) { animation-delay: 120ms; }
html[data-theme] .item-wrapper:nth-child(6) { animation-delay: 150ms; }
html[data-theme] .item-wrapper:nth-child(n+7) { animation-delay: 180ms; }
/* 分组容器:悬停轻微上浮 */
html[data-theme] div.collapsable {
transition: box-shadow .26s ease, border-color .26s ease, transform .26s cubic-bezier(.22, 1, .36, 1) !important;
}
html[data-theme] div.collapsable:hover {
transform: translateY(-2px);
border-color: rgba(147, 197, 253, .6) !important;
box-shadow: 0 18px 40px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}
html[data-theme] div.collapsable h2,
html[data-theme] .minimal-headings-row .headings {
transition: background .22s ease, color .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1), border-color .22s ease !important;
}
html[data-theme] .minimal-headings-row .headings:hover {
transform: translateY(-1px);
border-color: rgba(147, 197, 253, .75) !important;
}
html[data-theme] .minimal-headings-row .headings:active {
transform: scale(.975);
}
html[data-theme] .minimal-headings-wrap .tab-scroll-btn {
transition: background .2s ease, color .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1) !important;
}
html[data-theme] .minimal-headings-wrap .tab-scroll-btn:hover:not([disabled]) {
transform: scale(1.06);
}
html[data-theme] a.item:active {
transform: translateY(-1px) scale(.99) !important;
}
html[data-theme] a.item .item-icon img,
html[data-theme] a.item .item-icon svg {
transition: transform .26s cubic-bezier(.22, 1, .36, 1) !important;
}
html[data-theme] nav.side-bar .side-bar-item {
transition: background .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1) !important;
}
html[data-theme] nav.side-bar .side-bar-item:hover {
transform: scale(1.06);
}
html[data-theme] .navi-footer a {
transition: color .2s ease, border-color .2s ease !important;
}
@media (prefers-reduced-motion: reduce) {
html[data-theme] html,
html[data-theme] body {
scroll-behavior: auto !important;
}
html[data-theme] #dashy > *,
html[data-theme] .minimal-section-inner.selected,
html[data-theme] .work-space,
html[data-theme] .navi-search-bar,
html[data-theme] .navi-admin-entry,
html[data-theme] .navi-footer-host,
html[data-theme] div.collapsible-content .item-wrapper,
html[data-theme] .minimal-section-inner .item-wrapper {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
html[data-theme] a.item,
html[data-theme] a.item .tile-icon {
transition: none !important;
}
html[data-theme] a.item:hover,
html[data-theme] div.collapsable:hover,
html[data-theme] nav.side-bar .side-bar-item:hover,
html[data-theme] .minimal-headings-row .headings:hover {
transform: none !important;
}
}
/* ── 深色模式(整套变量覆盖)──
触发:<html class="navi-dark">(由 navi.js 按系统偏好切换,不改写 data-theme)。
为什么必须整变量覆盖、而不是按元素打补丁:
Dashy 的全部配色都来自主题变量(本站主题 jianf-glass,共 48 个),
只改页面底色和几个元素会造成"底色黑了、卡片还是亮的、圆角直角混杂"。
这里把同一批变量整体换成深色值,Dashy 自己的卡片/侧栏/头部/弹层随之一致变深,
形状(圆角)由元素自身样式决定,不受影响。
选择器用 html.navi-dark(0,1,1)高于 Dashy 的 [data-theme=...](0,1,0),
因此与注入顺序无关,稳定生效。 */
html.navi-dark {
color-scheme: dark !important;
--background-color: #0b1120;
--background-darker: #070d18;
--code-editor-background-color: #0f172a;
--code-editor-color: #e2e8f0;
--config-code-background-color: #0f172a;
--config-code-color: #e2e8f0;
--config-settings-background: rgba(15, 23, 42, 0.92);
--config-settings-color: #cbd5e1;
--context-menu-background: rgba(15, 23, 42, 0.96);
--context-menu-color: #e2e8f0;
--danger: #f87171;
--footer-text-color: #94a3b8;
--footer-text-color-link: #cbd5e1;
--heading-text-color: #f1f5f9;
--highlight-background-color: #1e40af;
--highlight-color: #e2e8f0;
--info: #94a3b8;
--item-group-background: rgba(17, 25, 40, 0.62);
--item-group-heading-text-color: #e8eefc;
--item-group-heading-text-color-hover: #7dd3fc;
--item-group-outer-background: rgba(17, 25, 40, 0.5);
--item-text-color: #dbe4f3;
--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: #94a3b8;
--nav-link-text-color: #cbd5e1;
--nav-link-text-color-hover: #7dd3fc;
--neutral: #94a3b8;
--primary: #cbd5e1;
--primary-alt: #94a3b8;
--scroll-bar-background-color: #0f172a;
--scroll-bar-color: #334155;
--search-container-background: rgba(15, 23, 42, 0.6);
--search-field-background: rgba(15, 23, 42, 0.8);
--settings-background: rgba(15, 23, 42, 0.75);
--settings-text-color: #cbd5e1;
--side-bar-background: rgba(15, 23, 42, 0.72);
--side-bar-color: #cbd5e1;
--status-check-tooltip-background: rgba(15, 23, 42, 0.92);
--status-check-tooltip-color: #e2e8f0;
--success: #4ade80;
--toast-background: rgba(15, 23, 42, 0.92);
--toast-color: #e2e8f0;
--warning: #fbbf24;
--welcome-popup-background: rgba(15, 23, 42, 0.88);
--welcome-popup-text-color: #e2e8f0;
}
/* 页面底色与文字:特异度 (0,2,1) > customCss 的 html[data-theme] body (0,1,1),
因此不再依赖注入顺序(之前正是这里被打平局,导致"主页大面积没变深")。 */
/* 只改 background-color,绝不使用 background 简写:
用户可能配了壁纸,而壁纸是通过 background-image 设在 body 上的
(见 conf.yml 的 NAVI-WALLPAPER 块)。用简写会把 background-image 清成 none,
壁纸就消失了 —— 这正是上一版的问题。 */
html.navi-dark body.navi-dark,
html.navi-dark body {
background-color: #0b1120 !important;
color: #e8eefc !important;
}
/* Dashy 的外层容器:确保不残留亮色底 */
html.navi-dark body #dashy,
html.navi-dark body .home,
html.navi-dark body .main-content,
html.navi-dark body .workspace,
html.navi-dark body .minimal-home {
background: transparent !important;
background-color: transparent !important;
}
/* Dashy 原生页脚(它自己渲染的那一个) */
html.navi-dark body footer,
html.navi-dark body .footer {
background: transparent !important;
color: #94a3b8 !important;
border-color: rgba(148, 163, 184, 0.2) !important;
}
/* 我们注入的全部悬浮件:类名统一以 navi- 开头,这里整体兜住,
避免再出现"右下角一块灰色方块"(漏掉某个类名就会那样)。 */
html.navi-dark body [class^="navi-"],
html.navi-dark body [class*=" navi-"] {
border-color: rgba(148, 163, 184, 0.22) !important;
}
html.navi-dark body [class^="navi-"]:not(.navi-icon):not(.navi-search-icon),
html.navi-dark body [class*=" navi-"]:not(.navi-icon):not(.navi-search-icon) {
background-color: rgba(17, 25, 40, 0.8);
color: #e8eefc;
}
html.navi-dark body .navi-dock,
html.navi-dark body .navi-dock *,
html.navi-dark body .navi-search-bar,
html.navi-dark body .navi-footer-host,
html.navi-dark body .navi-ws-toolbar,
html.navi-dark body .navi-ws-modal,
html.navi-dark body .navi-mini-tabs,
html.navi-dark body .navi-view-switch {
background-color: rgba(17, 25, 40, 0.82) !important;
color: #e8eefc !important;
}
html.navi-dark body .navi-dock svg,
html.navi-dark body .navi-dock button,
html.navi-dark body .navi-footer,
html.navi-dark body .navi-footer a,
html.navi-dark body .navi-footer .navi-footer-sep { color: #cbd5e1 !important; }
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; }
/* 我们自己的悬浮件(不在 Dashy 变量体系内,单独给深色) */
html.navi-dark body .navi-search-bar,
html.navi-dark body .navi-dock,
html.navi-dark body .navi-footer-host,
html.navi-dark body .navi-ws-toolbar,
html.navi-dark body .navi-ws-modal,
html.navi-dark body .navi-mini-tabs {
background: rgba(17, 25, 40, 0.8) !important;
border-color: rgba(148, 163, 184, 0.22) !important;
color: #e8eefc !important;
}
html.navi-dark body .navi-search-bar input,
html.navi-dark body .navi-search-bar .navi-search-input {
background: rgba(15, 23, 42, 0.7) !important;
color: #e8eefc !important;
border-color: rgba(148, 163, 184, 0.25) !important;
}
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: #e2e8f0 !important; }
html.navi-dark body .navi-dock button,
html.navi-dark body .navi-dock a {
background: rgba(30, 41, 59, 0.75) !important;
color: #cbd5e1 !important;
border-color: rgba(148, 163, 184, 0.22) !important;
}
/* ── 深色视觉收口(真实浏览器截图 + computed style 验证)──
主题变量不足以覆盖前文带 !important 的亮色规则,因此按真实 Dashy DOM
补齐标题、分组、卡片和浮动控件。布局容器必须透明,只有圆形按钮本身着色。 */
html.navi-dark body.navi-dark {
background-color: #080f1e !important;
color: #e8eefc !important;
}
/* 壁纸压暗改由服务端负责:applyWallpaperBlock 会为深色模式写同一张壁纸 +
深色遮罩的规则(更具体、与顺序无关)。这里不再叠一层 body::before 遮罩,
否则壁纸会被"深色渐变 + 遮罩"双重压暗。 */
html.navi-dark body #dashy,
html.navi-dark body .home,
html.navi-dark body .main-content,
html.navi-dark body .workspace,
html.navi-dark body .minimal-home {
background: transparent !important;
background-color: transparent !important;
}
/* Dashy 原生页脚(它自己渲染的那一个) */
html.navi-dark body footer,
html.navi-dark body .footer {
background: transparent !important;
color: #94a3b8 !important;
border-color: rgba(148, 163, 184, 0.2) !important;
}
/* 我们注入的全部悬浮件:类名统一以 navi- 开头,这里整体兜住,
避免再出现"右下角一块灰色方块"(漏掉某个类名就会那样)。 */
html.navi-dark body [class^="navi-"],
html.navi-dark body [class*=" navi-"] {
border-color: rgba(148, 163, 184, 0.22) !important;
}
html.navi-dark body [class^="navi-"]:not(.navi-icon):not(.navi-search-icon),
html.navi-dark body [class*=" navi-"]:not(.navi-icon):not(.navi-search-icon) {
background-color: rgba(17, 25, 40, 0.8);
color: #e8eefc;
}
html.navi-dark body .navi-dock,
html.navi-dark body .navi-dock *,
html.navi-dark body .navi-search-bar,
html.navi-dark body .navi-footer-host,
html.navi-dark body .navi-ws-toolbar,
html.navi-dark body .navi-ws-modal,
html.navi-dark body .navi-mini-tabs,
html.navi-dark body .navi-view-switch {
background-color: rgba(17, 25, 40, 0.82) !important;
color: #e8eefc !important;
}
html.navi-dark body .navi-dock svg,
html.navi-dark body .navi-dock button,
html.navi-dark body .navi-footer,
html.navi-dark body .navi-footer a,
html.navi-dark body .navi-footer .navi-footer-sep { color: #cbd5e1 !important; }
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; }
/* 我们自己的悬浮件(不在 Dashy 变量体系内,单独给深色) */
html.navi-dark body .navi-search-bar,
html.navi-dark body .navi-dock,
html.navi-dark body .navi-footer-host,
html.navi-dark body .navi-ws-toolbar,
html.navi-dark body .navi-ws-modal,
html.navi-dark body .navi-mini-tabs {
background: rgba(17, 25, 40, 0.8) !important;
border-color: rgba(148, 163, 184, 0.22) !important;
color: #e8eefc !important;
}
html.navi-dark body .navi-search-bar input,
html.navi-dark body .navi-search-bar .navi-search-input {
background: rgba(15, 23, 42, 0.7) !important;
color: #e8eefc !important;
border-color: rgba(148, 163, 184, 0.25) !important;
}
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: #e2e8f0 !important; }
html.navi-dark body .navi-dock button,
html.navi-dark body .navi-dock a {
background: rgba(30, 41, 59, 0.75) !important;
color: #cbd5e1 !important;
border-color: rgba(148, 163, 184, 0.22) !important;
}
/* ── 深色视觉收口(真实浏览器截图 + computed style 验证)──
主题变量不足以覆盖前文带 !important 的亮色规则,因此按真实 Dashy DOM
补齐标题、分组、卡片和浮动控件。布局容器必须透明,只有圆形按钮本身着色。 */
html.navi-dark body.navi-dark {
background-color: #080f1e !important;
color: #e8eefc !important;
}
/* 壁纸压暗:在 body 背景之上、内容之下铺一层深色遮罩(与亮色模式的白色
遮罩同一思路),这样深色下壁纸仍然可见、只是变暗,而不是被抹掉。
z-index:-1 + position:fixed 是本站既有的做法(门户页 .bg-decor 同款)。 */
html.navi-dark body::before {
content: '' !important;
position: fixed !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
background: rgba(6, 12, 24, .70) !important;
}
/* 顶部标题栏 */
html.navi-dark body #dashy > header {
background: rgba(15, 23, 42, .82) !important;
border-bottom-color: rgba(148, 163, 184, .18) !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, .28) !important;
}
html.navi-dark body.navi-dark #dashy > header .page-titles h1,
html.navi-dark body.navi-dark #dashy > header .page-titles .text,
html.navi-dark body.navi-dark .minimal-home .title-and-search h1 {
color: #f1f5f9 !important;
}
html.navi-dark body.navi-dark #dashy > header .page-titles .subtitle {
color: #a9b8cd !important;
}
/* 分组玻璃面板及标题 */
html.navi-dark body div.collapsable,
html.navi-dark body .minimal-section-inner {
background: rgba(25, 36, 55, .80) !important;
border-color: rgba(148, 163, 184, .20) !important;
box-shadow: 0 14px 34px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}
html.navi-dark body.navi-dark div.collapsable .section-header,
html.navi-dark body.navi-dark div.collapsable .section-header h3,
html.navi-dark body.navi-dark div.collapsable .section-header h3 *,
html.navi-dark body .minimal-headings-row .headings,
html.navi-dark body .minimal-headings-row .headings * {
color: #dce6f5 !important;
}
html.navi-dark body div.collapsable .collapse-icon,
html.navi-dark body div.collapsable .section-icon,
html.navi-dark body div.collapsable .action-buttons,
html.navi-dark body div.collapsable .action-buttons * {
color: #7f91aa !important;
}
/* 导航卡片及全部文字 */
html.navi-dark body a.item {
background: rgba(43, 57, 79, .84) !important;
border-color: rgba(148, 163, 184, .23) !important;
box-shadow: 0 7px 20px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
color: #e8eefc !important;
}
html.navi-dark body a.item:hover,
html.navi-dark body a.item:focus-visible {
background: rgba(55, 72, 98, .90) !important;
border-color: rgba(96, 165, 250, .48) !important;
}
html.navi-dark body.navi-dark a.item .tile-title,
html.navi-dark body.navi-dark a.item .tile-title .text,
html.navi-dark body.navi-dark a.item .item-title,
html.navi-dark body.navi-dark a.item .item-title * {
color: #f1f5f9 !important;
}
html.navi-dark body.navi-dark a.item .description,
html.navi-dark body.navi-dark a.item .item-url,
html.navi-dark body.navi-dark a.item .tile-subtitle {
color: #a9b8cd !important;
}
/* 右侧方块的根因:dock / view-switch 是布局容器,绝不能绘制背景。 */
html.navi-dark body.navi-dark .navi-dock,
html.navi-dark body.navi-dark .navi-view-switch,
html.navi-dark body.navi-dark .navi-footer-host {
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html.navi-dark body .navi-admin-entry,
html.navi-dark body .navi-view-toggle,
html.navi-dark body .navi-search-bar {
background: rgba(20, 31, 49, .94) !important;
border-color: rgba(148, 163, 184, .30) !important;
color: #dbeafe !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
html.navi-dark body .navi-admin-entry:hover,
html.navi-dark body .navi-view-toggle:hover,
html.navi-dark body .navi-search-bar:hover {
background: rgba(31, 46, 70, .97) !important;
}
html.navi-dark body .navi-admin-entry svg,
html.navi-dark body .navi-view-toggle svg,
html.navi-dark body .navi-search-toggle,
html.navi-dark body .navi-search-toggle svg {
color: #dbeafe !important;
stroke: currentColor !important;
}
/* 备案号是一个完整的深色胶囊,子元素不再各自形成色块。 */
html.navi-dark body .navi-footer {
background: rgba(20, 31, 49, .90) !important;
border-color: rgba(148, 163, 184, .24) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
color: #9fb0c8 !important;
}
html.navi-dark body .navi-footer *,
html.navi-dark body .navi-footer a,
html.navi-dark body .navi-footer .navi-footer-sep {
background: transparent !important;
color: #9fb0c8 !important;
}
html.navi-dark body .navi-footer a:hover { color: #7dd3fc !important; }
/* 极简/工作空间的侧栏、工具条和弹窗也使用同一深色层级。 */
html.navi-dark body nav.side-bar,
html.navi-dark body .navi-ws-toolbar,
html.navi-dark body .navi-ws-notice,
html.navi-dark body .navi-ws-modal,
html.navi-dark body .minimal-headings-row .headings {
background: rgba(20, 31, 49, .91) !important;
border-color: rgba(148, 163, 184, .22) !important;
color: #e8eefc !important;
}
html.navi-dark body .navi-ws-toolbar *,
html.navi-dark body .navi-ws-notice-title,
html.navi-dark body .navi-ws-modal-title,
html.navi-dark body nav.side-bar .side-bar-item {
color: #dce6f5 !important;
}
/* 备案号药丸:深色实测发现它仍是 rgba(255,255,255,.55) 的亮色块。
这里用更高特异度 + 末尾顺序确保覆盖,并把内部元素强制透明,
避免出现"深色底上贴一块白"的观感。 */
html.navi-dark body.navi-dark .navi-footer,
html.navi-dark body.navi-dark .navi-footer-host .navi-footer {
background-color: rgba(20, 31, 49, .92) !important;
border-color: rgba(148, 163, 184, .26) !important;
color: #9fb0c8 !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
html.navi-dark body.navi-dark .navi-footer *,
html.navi-dark body.navi-dark .navi-footer a,
html.navi-dark body.navi-dark .navi-footer .navi-footer-sep {
background-color: transparent !important;
color: #9fb0c8 !important;
}
html.navi-dark body.navi-dark .navi-footer a:hover { color: #7dd3fc !important; }
/* ── workspace / minimal 深色补齐(实测数据驱动)──
实测:nav.side-bar 已是深色,但 .side-bar-item 仍是 rgba(255,255,255,.7)
的白色药丸;.work-space .web-content 是纯白 —— 深色下最刺眼的两处。 */
html.navi-dark body nav.side-bar .side-bar-item,
html.navi-dark body nav.side-bar .side-bar-item .item-icon,
html.navi-dark body nav.side-bar a,
html.navi-dark body .switch-view-buttons button {
background-color: rgba(30, 41, 59, .0) !important;
color: #cbd5e1 !important;
border-color: rgba(148, 163, 184, .22) !important;
}
html.navi-dark body nav.side-bar .side-bar-item:hover,
html.navi-dark body nav.side-bar .side-bar-item:focus,
html.navi-dark body nav.side-bar .side-bar-item.active {
background-color: rgba(51, 65, 85, .72) !important;
color: #e8eefc !important;
}
html.navi-dark body nav.side-bar .side-bar-item svg,
html.navi-dark body nav.side-bar .side-bar-item i,
html.navi-dark body nav.side-bar .side-bar-item .item-icon i {
color: #cbd5e1 !important;
fill: currentColor !important;
}
/* 内嵌应用的外框与占位:这里绝不能给不透明底色。
亮色时代它是 #fff(深色下白框),我上一版改成 #0f172a 后又变成一整块黑方块
(用户反馈的"工作空间黑色方块")。正确做法是透明:露出壁纸/玻璃底,
应用自己会画背景;空态时也不会出现突兀的方块。 */
html.navi-dark body .work-space .web-content,
html.navi-dark body .work-space .web-content iframe {
background-color: transparent !important;
background-image: none !important;
}
html.navi-dark body .work-space .navi-ws-notice,
html.navi-dark body .navi-ws-toolbar {
background-color: rgba(20, 31, 49, .91) !important;
color: #dce6f5 !important;
}
html.navi-dark body .navi-ws-bar-btn {
background-color: rgba(30, 41, 59, .85) !important;
color: #cbd5e1 !important;
border-color: rgba(148, 163, 184, .24) !important;
}
html.navi-dark body .navi-ws-bar-host,
html.navi-dark body .navi-ws-modal-title,
html.navi-dark body .navi-ws-notice-title {
color: #e8eefc !important;
}
/* ── 矮视口下备案号不再撑高页面 ──
实测复现:900x520 时 .navi-footer-host 从 39px 换行涨到 69px,
而它在文档流里(margin-top:auto),于是页面被顶高 47px → 出现纵向滚动。
只对"矮窗口"收紧:缩小内边距/字号并禁止换行(矮窗口通常较宽,不会横向溢出)。
高窗口与移动端不受影响。 */
@media (max-height: 560px) {
/* 关键:矮视口下把备案号移出文档流。
实测:仅压缩内边距后 .navi-footer-host 仍有 37px 高度且在 flow 里,
页面被顶高 16px(minimal 900x520 scrollH 536 > viewH 520)。
改成 fixed 后不再撑高页面;搜索栏/按钮组已上移到 bottom:60px,不会相撞。
(workspace 视图本来就是这样处理的。) */
html[data-theme] .navi-footer-host {
/* v88:不再用 fixed —— 页脚是 body flex 列的最后一行,本身不撑高页面 */
position: static !important;
flex: 0 0 auto !important;
width: 100% !important;
margin: 0 !important;
padding: 0 0 2px !important;
z-index: auto !important;
pointer-events: auto !important;
}
html[data-theme] .navi-footer {
margin: 4px auto 0 !important;
padding: 5px 12px !important;
font-size: 11.5px !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
max-width: calc(100% - 12px) !important;
overflow: hidden !important;
}
html[data-theme] .navi-search-bar {
bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
}
html[data-theme] .navi-dock {
bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* ── 工作空间弹窗("无法内嵌"提示)深色补齐 ──
实测:.navi-ws-modal 遮罩已是深色,但 .navi-ws-modal-card 仍是
rgba(255,255,255,.96) 的纯白卡片,深色下非常刺眼且与浅色文字冲突。 */
html.navi-dark body .navi-ws-modal-card,
html.navi-dark body .navi-ws-notice {
background-color: rgba(20, 31, 49, .97) !important;
border-color: rgba(148, 163, 184, .28) !important;
box-shadow: 0 26px 60px rgba(0, 0, 0, .55) !important;
}
html.navi-dark body .navi-ws-modal-title,
html.navi-dark body .navi-ws-notice-title {
color: #f1f5f9 !important;
}
html.navi-dark body .navi-ws-modal-text,
html.navi-dark body .navi-ws-notice-text,
html.navi-dark body .navi-ws-modal-card p,
html.navi-dark body .navi-ws-notice p {
color: #a9b8cd !important;
}
html.navi-dark body .navi-ws-modal-ok,
html.navi-dark body .navi-ws-open {
background-color: rgba(30, 41, 59, .92) !important;
color: #dbeafe !important;
border-color: rgba(148, 163, 184, .30) !important;
}
html.navi-dark body .navi-ws-modal-ok:hover,
html.navi-dark body .navi-ws-open:hover {
background-color: rgba(51, 65, 85, .95) !important;
color: #e8eefc !important;
}
/* ═══ 页脚最终覆盖(放在文件末尾,按级联顺序取胜)═══
navi.css 里 .navi-footer 有多处重复定义(1016/1447/1515 …),
插在中间的规则会被后面同优先级规则覆盖(实测:背景仍 rgba(255,255,255,.55)、
blur(14px) 仍在、每日一言被裁到 height:0)。
因此最终形态统一放在文件最末。 */
html[data-theme] .navi-footer-host,
html[data-theme] body .navi-footer-host {
/* v88:由浮层改为"布局中的最后一行"(static),不再 fixed */
position: static !important;
left: auto !important; right: auto !important; bottom: auto !important;
flex: 0 0 auto !important; width: 100% !important;
height: auto !important; max-height: none !important; min-height: 0 !important;
display: flex !important; align-items: center !important; justify-content: flex-start !important;
padding: 0 !important; margin: 0 !important;
background: transparent !important; border: 0 !important; border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
pointer-events: none !important; overflow: visible !important; z-index: 3 !important;
}
html[data-theme] .navi-footer,
html[data-theme] body .navi-footer {
display: inline-flex !important;
align-items: center !important; justify-content: center !important;
gap: 6px !important; flex-wrap: nowrap !important;
width: max-content !important; max-width: calc(100vw - 16px) !important;
height: auto !important; max-height: 20px !important; min-height: 0 !important;
padding: 0 8px !important; margin: 0 auto !important;
background: transparent !important; border: 0 !important; border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
font-size: 11px !important; line-height: 1.4 !important;
color: #94a3b8 !important; white-space: nowrap !important; overflow: visible !important;
}
html[data-theme] .navi-footer a,
html[data-theme] .navi-footer .navi-footer-sep {
font-size: 11px !important; color: inherit !important; background: transparent !important;
border: 0 !important; text-decoration: none !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: #7c8ea6 !important; }
/* 每日一言:作为 inline-block 参与行盒,确保有高度(此前被裁到 0) */
html[data-theme] .navi-footer .navi-quote {
display: inline-block !important;
min-width: 0 !important; flex: 0 1 auto !important;
height: auto !important; min-height: 13px !important; line-height: 1.4 !important;
overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
max-width: 40vw !important; color: #b6c2d2 !important; font-style: italic;
}
html.navi-dark[data-theme] .navi-footer .navi-quote { color: #6b7d95 !important; }
/* ═══ v68:页脚不再裁切 + 底部按钮不再显灰(仍为文件末尾,级联必胜)═══
v67 遗留:.navi-footer 实测 26px 而 scrollHeight > clientHeight+1(裁切 1-2px)。
改用固定行高 20px(单行行盒),高度 20/20/20,overflow:visible → 无裁切。
另:浅色主题下按钮底色 rgba(255,255,255,.72) 叠在浅背景上发灰,
改为更亮的玻璃面 + 中性描边(不引入蓝色,深色主题保持原样)。 */
/* v69 撤销:v68 的"固定 20px 行盒"使页脚内容溢出 65px、每日一言高度归 0(倒退)。
恢复 v67 的页脚形态(每日一言 13px 可见),只保留下方的按钮底色改良。 */
/* v75 删除:v68 在此处给三个悬浮按钮加的 0.92 白色底 + 描边 + 投影,
是用户看到的"方形/灰色底板"与"点击高亮"的来源;
其选择器特异性 (0,3,1) 高于后来 v73 想改成透明的 (0,2,2),所以覆盖不掉。
直接删除本段(源头),按钮回到既有设计:透明、仅 hover/focus 有圆形淡染。 */
/* ═══ 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;
width: max-content !important;
max-width: calc(100vw - 24px) !important;
min-width: 0 !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;
}
/* v71 更正:上方 v70 注释里"display 被压成 block"的判断有误。
824 行那条 body:has(.minimal-home) .navi-footer-host > * 设的是 pointer-events,
不是 display。实测堆叠的成因是 **flex-wrap 折行 + 页脚宽度仅约 192px**
(内容需约 470px)→ 折成 3~4 行、总高约 63px(= scrollHeight 65),
第 4 行的每日一言被排到 y=743(视口 720 之外)因而不可见。
因此修复要点是 flex-wrap:nowrap(v70 已有)+ 宽度 max-content(本版补上)。 */
/* ═══ v72:页脚左右分栏 —— 备案号靠左并列,每日一言靠右 ═══
结构固定(.navi-footer 内:备案 A、sep、公安备案 A、sep、.navi-quote),
不改 DOM,用 margin-left:auto 把一言推到右端,其余靠左排列。
与 v71 同特异性选择器,确保压过中间那些重复定义。 */
html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer {
width: 100% !important;
max-width: calc(100vw - 32px) !important;
justify-content: flex-start !important;
padding: 0 !important;
gap: 6px !important;
}
html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer > a:first-child {
margin-left: 0 !important;
}
html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer > .navi-quote {
margin-left: auto !important;
padding-left: 10px !important;
text-align: right !important;
max-width: 46vw !important;
}
/* 一言与备案之间那条多余的分隔符在右栏布局下不再需要视觉分隔 */
html[data-theme] body:has(.minimal-home) .navi-footer-host > .navi-footer > .navi-footer-sep:last-of-type {
display: none !important;
}
/* ═══ v73:修「切换视图菜单被裁剪」("点了没反应"的真因)+ 按钮去灰底板 ═══
实测证据:
① 祖先链 .navi-view-switch{overflow:hidden} → .navi-dock{overflow:hidden}
② 菜单开/关像素比对有变化(确实渲染),但中心 elementFromPoint 命中 #dashy
→ 面板超出 52×52 按钮盒的部分被裁剪,既看不见也点不到。
(注意:getBoundingClientRect 不受裁剪影响,所以此前我误判它"可见"。)
③ 用户看到的那块"方形灰色背景"= 被裁剪后残留的菜单面板碎片。
修法:让承载菜单的 .navi-view-switch / .navi-dock 不裁剪,菜单抬到 z-index 1000。 */
html[data-theme] body .navi-dock,
html[data-theme] body .navi-view-switch {
overflow: visible !important;
}
html[data-theme] body .navi-view-menu {
z-index: 1000 !important;
pointer-events: auto !important;
}
/* 悬浮按钮:去掉"灰底板",仅悬停/聚焦时给一层圆形淡染(点击不再有方块高亮) */
html[data-theme] body .navi-view-toggle,
html[data-theme] body .navi-admin-entry,
html[data-theme] body .navi-search-toggle {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 50% !important;
}
html[data-theme]:not(.navi-dark) body .navi-view-toggle,
html[data-theme]:not(.navi-dark) body .navi-admin-entry,
html[data-theme]:not(.navi-dark) body .navi-search-toggle { color: #475569 !important; }
html[data-theme]:not(.navi-dark) body .navi-view-toggle:hover,
html[data-theme]:not(.navi-dark) body .navi-view-toggle:focus-visible,
html[data-theme]:not(.navi-dark) body .navi-admin-entry:hover,
html[data-theme]:not(.navi-dark) body .navi-admin-entry:focus-visible,
html[data-theme]:not(.navi-dark) body .navi-search-toggle:hover {
background: rgba(100, 116, 139, 0.14) !important;
border-radius: 50% !important;
box-shadow: none !important;
}
html.navi-dark body .navi-view-toggle,
html.navi-dark body .navi-admin-entry,
html.navi-dark body .navi-search-toggle { color: #cbd5e1 !important; }
html.navi-dark body .navi-view-toggle:hover,
html.navi-dark body .navi-admin-entry:hover,
html.navi-dark body .navi-search-toggle:hover { background: rgba(148, 163, 184, 0.18) !important; border-radius: 50% !important; }
/* v76 备注:.navi-footer 之前一直被上面那条 `body > div > div` 命中,
被设成 flex-direction:column + overflow:hidden —— 于是页脚 5 个子项竖排
(y 694/715/736/757/778),一言被排到视口外。
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 {
/* v88:撤掉 fixed 浮层 —— 用户明确要求"位于页面底部,而不是悬浮" */
position: static !important;
left: auto !important; right: auto !important; bottom: auto !important;
flex: 0 0 auto !important; width: 100% !important;
z-index: auto !important; margin: 0 !important; padding: 0 !important;
pointer-events: auto !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 {
/* v88:随宿主回到文档流(首页页脚在 Dashy <footer> 内,滚到页面底部可见) */
position: static !important;
left: auto !important; right: auto !important; bottom: auto !important;
z-index: auto !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] body > .navi-footer-host > .navi-footer,
html[data-theme] body .navi-footer-host > .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; }