需求:极简页的内容框此前只有竖向滚动手势,加入横滑切换"页面"(分组)。 实现(web/navi.js 新增 bindTabSwipe + web/navi.css v89): · 契约:.minimal-headings-row > .minimal-section-heading.headings(当前项 .selected), 切换 = 对该元素派发真实 click(实测有效,不触碰 Dashy 内部状态)。 · 三种输入:pointer 事件覆盖触屏与鼠标拖拽;wheel 的 deltaX 累积覆盖触控板双指横滑。 · 判定:|dx| >= 56 且 |dx| > 1.5|dy| 才切换;先判 |dy| > |dx| 则直接让给竖向滚动。 · 边界:clamp —— 到头不动,给一次轻微回弹提示(prefers-reduced-motion 时改为淡闪)。 · 动画:纯淡入淡出(不位移),并遵守 prefers-reduced-motion。 · 防误触:横拖超过 20px 后吞掉紧随的一次 click,避免误开卡片链接。 · 不抢横滑:手势起点若落在可横向滚动的容器内、或输入框内,直接放行。 · 可访问性:键盘 ←/→ 也能切换;touch-action 用 pan-y pinch-zoom(保留双指缩放)。 · 自检:匹配不到标签时在 <html> 上置 data-navi-swipe="unavailable"(不刷控制台)。
2493 lines
98 KiB
CSS
2493 lines
98 KiB
CSS
/* 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; }
|
||
|
||
/* ═══ v89:极简页左右滑动切换分组(触屏 / 触控板 / 鼠标拖拽)═══
|
||
touch-action 用 pan-y pinch-zoom:
|
||
· 竖向滚动仍由浏览器原生处理(横滑事件才交给 JS);
|
||
· 保留双指缩放(不写成 pan-y,否则会禁掉 pinch-zoom,属可访问性倒退)。
|
||
overscroll-behavior-x: contain 抑制浏览器把横滑当成"后退/前进"。
|
||
拖拽期间禁止选中文字(否则鼠标横拖会拖出一片蓝色选区)。 */
|
||
html[data-theme] .minimal-home,
|
||
html[data-theme] .minimal-home > .item-group-container,
|
||
html[data-theme] .minimal-home > .item-group-container > .minimal-section-inner {
|
||
touch-action: pan-y pinch-zoom !important;
|
||
overscroll-behavior-x: contain !important;
|
||
}
|
||
html[data-theme] .minimal-home.navi-dragging,
|
||
html[data-theme] .minimal-home.navi-dragging * {
|
||
user-select: none !important;
|
||
-webkit-user-select: none !important;
|
||
}
|