/* ========================================================================= MyNavPage · Theme Layer (navpage-theme.css) ------------------------------------------------------------------------- 设计系统层：统一 design token + 明暗双模式 + 多主题配色 + 多布局 加载顺序必须位于所有旧样式（bootstrap / navpage-* / nav.css / 内联 style）之后。 数据属性（挂在 上，由 navpage-theme.js 控制）： data-mode = light | dark 外观模式（auto 会被解析成 light/dark） data-theme = indigo|teal|violet|amber|rose|slate 主题配色 data-layout = side | float | top 页面布局 data-density = cozy | compact | list 卡片密度 ========================================================================= */ /* ========================================================================= 1. Design Tokens ========================================================================= */ :root { /* ---- 字号 ---- */ --np-fs-xs: 11px; --np-fs-sm: 12px; --np-fs-md: 13px; /* ---- 间距刻度（4pt 网格）---- */ --np-sp-1: 4px; --np-sp-2: 8px; --np-sp-3: 12px; --np-sp-4: 16px; --np-sp-5: 20px; --np-sp-6: 24px; --np-sp-8: 32px; /* ---- 圆角：以 --ws-radius 为唯一真源，保持与旧样式面板联动 ---- */ --np-r-sm: calc(var(--ws-radius, 12px) * 0.5); --np-r-md: calc(var(--ws-radius, 12px) * 0.75); --np-r-lg: var(--ws-radius, 12px); --np-r-xl: calc(var(--ws-radius, 12px) * 1.5); --np-r-pill: 999px; /* ---- 动效 ---- */ --np-ease: cubic-bezier(.22, .61, .36, 1); --np-t-fast: 140ms var(--np-ease); --np-t-mid: 240ms var(--np-ease); /* ---- 中性色阶（亮色模式）---- */ --np-bg: #f2f5fa; --np-bg-grad: none; --np-surface: #ffffff; --np-surface-2: #f6f8fc; --np-surface-3: #eef2f8; --np-section: #f6f8fc; --np-sidebar: #ffffff; --np-header: rgba(255, 255, 255, .78); --np-footer: transparent; --np-border: rgba(227, 233, 242, 0.18); --np-border-soft: rgba(255, 255, 255, .2); --np-border-strong: #d3dbe8; --np-text: #1b2330; --np-text-2: #5a6577; --np-text-3: #8e99ab; --np-text-inv: #ffffff; --np-danger: #e0483c; --np-danger-soft: #fdeeec; --np-success: #17a673; --np-success-soft: #e8f8f1; --np-warning: #e08a00; --np-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --np-shadow-sm: 0 2px 6px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04); --np-shadow-md: 0 8px 24px rgba(16, 24, 40, .09), 0 2px 6px rgba(16, 24, 40, .05); --np-shadow-lg: 0 18px 46px rgba(16, 24, 40, .14), 0 4px 12px rgba(16, 24, 40, .07); --np-shadow-accent: 0 6px 18px rgba(var(--np-accent-rgb), .32); /* ---- 主题色（默认 indigo，被 [data-theme] 覆盖）---- */ --np-accent: #4a63e7; --np-accent-rgb: 74, 99, 231; --np-accent-hover: #3d55d8; --np-accent-soft: rgba(74, 99, 231, .10); --np-accent-soft-2: rgba(74, 99, 231, .18); --np-on-accent: #ffffff; /* ---- 尺寸 ---- */ --np-sidebar-w: 272px; --np-sidebar-w-collapsed: 78px; --np-header-h: 64px; --np-card-h: 84px; --np-card-cols: 25%; } /* ---------------- 暗色模式 ---------------- */ html[data-mode="dark"] { --np-bg: #0d1117; --np-bg-grad: none; --np-surface: #161b24; --np-surface-2: #1b2029; --np-surface-3: #232935; --np-section: #1b2029; --np-sidebar: #12161e; --np-header: rgba(18, 22, 30, .78); --np-footer: transparent; --np-border: #252c39; --np-border-soft: #1e242f; --np-border-strong: #333c4c; --np-text: #e7ebf3; --np-text-2: #a3adbf; --np-text-3: #6f7b8e; --np-text-inv: #0d1117; --np-danger: #f0655a; --np-danger-soft: rgba(240, 101, 90, .14); --np-success: #2ecf9a; --np-success-soft: rgba(46, 207, 154, .14); --np-warning: #f5b53d; --np-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35); --np-shadow-sm: 0 2px 8px rgba(0, 0, 0, .40); --np-shadow-md: 0 10px 28px rgba(0, 0, 0, .50); --np-shadow-lg: 0 22px 54px rgba(0, 0, 0, .60); --np-shadow-accent: 0 6px 20px rgba(var(--np-accent-rgb), .40); } /* 暗色模式：原生控件 / 滚动条跟随系统暗色方案，输入框与占位符保持可读 */ html[data-mode="dark"] { color-scheme: dark; } html[data-mode="dark"] input, html[data-mode="dark"] select, html[data-mode="dark"] textarea { color: var(--np-text); } html[data-mode="dark"] ::placeholder { color: var(--np-text-3); } /* 暗色模式配色唯一基准：以主题 token 强制覆盖任何保存的自定义浅/深色内联样式， 保证「所有区域配色与外观弹窗方案一致、背景与字体均清晰可读」。 （Logo 文字色不在此列，以保留样式面板自定义 Logo 字体颜色的功能） */ html[data-mode="dark"] body { background-color: var(--np-bg); background-image: var(--np-bg-grad); } html[data-mode="dark"] .box2 { background-color: var(--np-surface) !important; } html[data-mode="dark"] .ws-section { background-color: var(--np-section) !important; border-color: var(--np-border) !important; } html[data-mode="dark"] .sidebar-menu.fixed { background-color: transparent !important; } html[data-mode="dark"] .user-info-navbar { background-color: var(--ws-header-bg, var(--np-header)) !important; } html[data-mode="dark"] footer.main-footer { background-color: var(--ws-footer-bg, var(--np-footer)) !important; } html[data-mode="dark"] .sidebar-menu .main-menu a, html[data-mode="dark"] .sidebar-menu .main-menu a i, html[data-mode="dark"] .sidebar-menu .main-menu a .title, html[data-mode="dark"] .sidebar-menu .main-menu li.has-sub > a:before, html[data-mode="dark"] .sidebar-menu .main-menu > li:not(.has-sub) > a:after, html[data-mode="dark"] .sidebar-menu .main-menu > li.has-sub > ul > li > a:after { color: var(--ws-sidebar-font-color, var(--np-text)) !important; } html[data-mode="dark"] .sidebar-menu .main-menu > li.opened > a, html[data-mode="dark"] .sidebar-menu .main-menu > li.active > a { color: var(--np-accent) !important; } html[data-mode="dark"] .sidebar-menu .main-menu > li > a:hover, html[data-mode="dark"] .sidebar-menu .main-menu > li.has-sub > ul > li > a:hover { background: var(--ws-cat-hover-bg, var(--np-accent-soft)) !important; } /* 侧边栏分类 hover 毛玻璃：颜色 + 透明度由 --ws-cat-hover-bg 提供，模糊由 --ws-cat-hover-blur 提供 */ .sidebar-menu .main-menu > li > a:hover, .sidebar-menu .main-menu > li.has-sub > ul > li > a:hover { -webkit-backdrop-filter: blur(var(--ws-cat-hover-blur, 0px)); backdrop-filter: blur(var(--ws-cat-hover-blur, 0px)); } html[data-mode="dark"] .sidebar-menu .main-menu > li.opened > a, html[data-mode="dark"] .sidebar-menu .main-menu > li.active > a { background: var(--np-accent-soft) !important; } /* ---------------- 主题配色（8 套）---------------- */ html[data-theme="red"] { --np-accent: #e0393b; --np-accent-rgb: 224, 57, 59; --np-accent-hover: #c93133; --np-accent-soft: rgba(224, 57, 59, .10); --np-accent-soft-2: rgba(224, 57, 59, .18); --np-on-accent: #fff; } html[data-theme="green"] { --np-accent: #1e9f68; --np-accent-rgb: 30, 159, 104; --np-accent-hover: #17885a; --np-accent-soft: rgba(30, 159, 104, .10); --np-accent-soft-2: rgba(30, 159, 104, .18); --np-on-accent: #fff; } html[data-theme="cyan"] { --np-accent: #0f9ec1; --np-accent-rgb: 15, 158, 193; --np-accent-hover: #0d86a6; --np-accent-soft: rgba(15, 158, 193, .10); --np-accent-soft-2: rgba(15, 158, 193, .18); --np-on-accent: #fff; } html[data-theme="blue"] { --np-accent: #2f6bd4; --np-accent-rgb: 47, 107, 212; --np-accent-hover: #2559ba; --np-accent-soft: rgba(47, 107, 212, .10); --np-accent-soft-2: rgba(47, 107, 212, .18); --np-on-accent: #fff; } html[data-theme="purple"] { --np-accent: #7b3cec; --np-accent-rgb: 123, 60, 236; --np-accent-hover: #6b2bd4; --np-accent-soft: rgba(123, 60, 236, .11); --np-accent-soft-2: rgba(123, 60, 236, .20); --np-on-accent: #fff; } html[data-theme="black"] { --np-accent: #232730; --np-accent-rgb: 35, 39, 48; --np-accent-hover: #15181f; --np-accent-soft: rgba(35, 39, 48, .10); --np-accent-soft-2: rgba(35, 39, 48, .18); --np-on-accent: #fff; } html[data-theme="gray"] { --np-accent: #3f4653; --np-accent-rgb: 63, 70, 83; --np-accent-hover: #303640; --np-accent-soft: rgba(63, 70, 83, .10); --np-accent-soft-2: rgba(63, 70, 83, .18); --np-on-accent: #fff; } /* ---------------- 霓虹绿主题：浅色使用克制绿，深色才启用高亮霓虹绿 ---------------- */ html[data-theme="wenxi"] { --np-accent: #00d973; --np-accent-rgb: 0, 217, 115; --np-accent-hover: #00b963; --np-accent-soft: rgba(0, 217, 115, .09); --np-accent-soft-2: rgba(0, 217, 115, .16); --np-on-accent: #07130d; --np-shadow-accent: 0 4px 12px rgba(0, 180, 96, .16); --wx-swatch-color: #00d973; --wx-accent-glow: rgba(0, 180, 96, .16); } html[data-theme="wenxi"][data-mode="dark"] { --np-accent: #00FF85; --np-accent-rgb: 0, 255, 133; --np-accent-hover: #00d973; --np-accent-soft: rgba(0, 255, 133, .10); --np-accent-soft-2: rgba(0, 255, 133, .18); --np-on-accent: #0A0F1C; --wx-swatch-color: #00FF85; --wx-accent-glow: rgba(0, 255, 133, .24); /* 深蓝黑画布 + 低饱和径向渐变光斑（绿/青/紫） */ --np-bg: #0A0F1C; --np-bg-grad: radial-gradient(1200px 620px at 12% -12%, rgba(0, 255, 133, .16), transparent 55%), radial-gradient(1000px 520px at 108% 8%, rgba(0, 201, 255, .12), transparent 50%), radial-gradient(900px 520px at 50% 118%, rgba(168, 85, 247, .10), transparent 55%); /* 基础表面保持不透明；玻璃材质由 data-material 规则单独透明化。 */ --np-surface: #1a1f2c; --np-surface-2: #1f2533; --np-surface-3: #282f3f; --np-section: #141925; --np-sidebar: #0d121e; --np-header: #12161e; --np-footer: #0d121e; /* 细边框 */ --np-border: rgba(255, 255, 255, .08); --np-border-soft: rgba(255, 255, 255, .05); --np-border-strong: rgba(255, 255, 255, .14); /* 文字层级 */ --np-text: #FFFFFF; --np-text-2: rgba(255, 255, 255, .65); --np-text-3: rgba(255, 255, 255, .40); --np-text-inv: #0A0F1C; /* 状态色 */ --np-danger: #FF4D6D; --np-danger-soft: rgba(255, 77, 109, .14); --np-success: #00FF85; --np-success-soft: rgba(0, 255, 133, .14); --np-warning: #F59E0B; /* 彩色阴影（绿/蓝光晕） */ --np-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35); --np-shadow-sm: 0 2px 8px rgba(0, 0, 0, .45); --np-shadow-md: 0 10px 28px rgba(0, 0, 0, .55); --np-shadow-lg: 0 22px 54px rgba(0, 0, 0, .65); --np-shadow-accent: 0 5px 18px rgba(0, 255, 133, .22); /* 圆角：卡片 16px / 区块 18px / 徽章胶囊 */ --np-r-md: 16px; --np-r-lg: 18px; --np-r-pill: 999px; } /* ========================================================================= 2. 兼容桥：把旧的 --ws-* 变量默认值接到新 token 上 （样式面板处于「自定义配色」时，JS 会写内联值覆盖这里） ========================================================================= */ :root { --ws-sidebar-bg: transparent; --ws-sidebar-font-color: var(--np-text); --ws-sb-border-color: var(--np-border-soft); --ws-logo-border-color: var(--np-border-soft); --ws-logo-text-color: var(--np-text); --ws-header-bg: var(--np-header); --ws-footer-bg: var(--np-footer); --ws-card-hover-boxshadow: 0 0 0 1px var(--np-accent); --dh-title-hover-color: var(--np-accent); --dh-card-hover-bg: var(--np-accent-soft-2); /* 二级菜单（子分类）整体背景：颜色 + 透明度 + 毛玻璃（JS 按自定义配置写入内联值） 默认值：跟随侧栏文字色的 6% 柔和底色（扁平圆角分组），深浅模式与自定义侧栏色均自适应 */ --ws-submenu-bg: color-mix(in srgb, var(--ws-sidebar-font-color, var(--np-text)) 6%, transparent); --ws-submenu-bg-solid: var(--np-surface); --ws-submenu-blur: 0px; /* 侧边栏分类 hover 背景：颜色(含透明度) + 毛玻璃 */ --ws-cat-hover-bg: rgba(var(--np-accent-rgb), .10); --ws-cat-hover-blur: 0px; /* 页头按钮（搜索框 / 搜索引擎切换 / 样式调整 / 导入 / 导出 / 外观）背景：颜色 + 透明度 + 毛玻璃。 不在此处给 --ws-header-btn-bg 固体默认值，让实心/毛玻璃/液态各自的兜底 rgba 生效， 仅当用户自定义颜色时由 JS 以内联值覆盖。 */ /* 页头悬浮窗（搜索引擎 hover 悬浮窗 / 导出悬浮窗 / 站内搜索下拉）背景：颜色 + 透明度 + 毛玻璃 */ } /* 二级菜单整体背景：默认与页面融合（半透明），开启自定义时由 --ws-submenu-bg 提供 */ .sidebar-menu .main-menu > li.has-sub > ul { background-color: var(--ws-submenu-bg, rgba(255, 255, 255, 0)); -webkit-backdrop-filter: blur(var(--ws-submenu-blur, 0px)); backdrop-filter: blur(var(--ws-submenu-blur, 0px)); } html[data-mode="dark"] .sidebar-menu .main-menu > li.has-sub > ul { background-color: var(--ws-submenu-bg, rgba(255, 255, 255, 0)); } /* 侧栏 / 浮窗布局：二级菜单用「跟随侧栏配色的柔和浅底」分组（扁平圆角）， 未自定义时透明；顶栏布局的悬浮层保留背景以便阅读 */ html[data-layout="side"] .sidebar-menu .main-menu > li.has-sub > ul, html[data-layout="float"] .sidebar-menu .main-menu > li.has-sub > ul { background-color: var(--ws-submenu-bg, color-mix(in srgb, var(--ws-sidebar-font-color, var(--np-text)) 6%, transparent)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 顶栏布局下的二级菜单悬浮层（body 级，由 JS 生成）：同样走 --ws-submenu-bg / blur，便于统一外观 */ .np-top-flyout { display: none; position: fixed; z-index: 2100; min-width: 210px; max-width: min(320px, 92vw); padding: 6px; background-color: var(--ws-submenu-bg-solid, var(--np-surface)); /* 边框：半透明白色/深色描边，避免深色硬边在浅/深色主题下都不和谐 */ border: 1px solid var(--np-border); border-radius: var(--np-r-md); /* 阴影从 lg（22px/54px 黑色重影）减为 md，去掉跨色系的突兀黑色块 */ box-shadow: var(--np-shadow-md); overflow-y: auto; -webkit-backdrop-filter: blur(var(--ws-submenu-blur, 0px)); backdrop-filter: blur(var(--ws-submenu-blur, 0px)); } .np-top-flyout ul { list-style: none; margin: 0; padding: 0; } .np-top-flyout li a { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--np-r-sm); color: var(--np-text); text-decoration: none; font-size: 15px; } .np-top-flyout li a i { color: var(--np-accent); } .np-top-flyout li a:hover { background: var(--ws-cat-hover-bg, var(--np-accent-soft)); color: var(--np-accent); } .np-top-flyout li.active > a { background: var(--np-accent-soft); color: var(--np-accent); font-weight: 600; } /* 顶栏模式下：隐藏一级/二级菜单 hover 的箭头图标（需求17） */ html[data-layout="top"] .sidebar-menu .main-menu li.has-sub > a:before, html[data-layout="top"] .sidebar-menu .main-menu > li > a:after, html[data-layout="top"] .sidebar-menu .main-menu > li.has-sub > ul > li > a:after { display: none !important; } /* ========================================================================= 3. 组件外观（统一设计语言） ========================================================================= */ /* ---- 全局 ---- */ html { scroll-behavior: smooth; } /* 背景视频：固定铺满视窗，置于页面内容之后（优先级 视频 > 图片 > 颜色） */ #bgVideo { position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; object-fit: cover; object-position: center; display: none; pointer-events: none; } body { background-color: var(--np-bg); background-image: var(--np-bg-grad); background-attachment: fixed; background-size: cover; background-position: center center; background-repeat: no-repeat; color: var(--np-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color var(--np-t-mid), color var(--np-t-mid); } /* Bootstrap modal 会把 body 设为 overflow:hidden 并注入 scrollbar padding； 移动端不需要该补偿，避免页头和内容背景被缩窄。 */ @media (max-width: 768px) { body.modal-open { padding-right: 0 !important; } } ::selection { background: var(--np-accent-soft-2); color: var(--np-text); } /* 滚动条（WebKit） */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--np-border-strong); border-radius: 8px; border: 2px solid var(--np-bg); } ::-webkit-scrollbar-thumb:hover { background: var(--np-text-3); } a { color: var(--np-accent); transition: color var(--np-t-fast); } .text-gray { color: var(--np-text-2) !important; } .text-muted { color: var(--np-text-3) !important; } .text-info { color: var(--np-accent) !important; } .text-success { color: var(--np-success) !important; } .text-danger { color: var(--np-danger) !important; } /* ---- 侧边栏 ---- */ .sidebar-menu.fixed { border-right: 1px solid var(--np-border); box-shadow: var(--np-shadow-sm); } .sidebar-menu.fixed::-webkit-scrollbar-thumb { background: var(--np-border-strong); } .sidebar-menu.fixed::-webkit-scrollbar-thumb:hover { background: var(--np-text-3); } /* 菜单容器：收窄左右内边距（原 core 的 40px），让菜单项更宽、二级菜单文字不再被截断 */ .sidebar-menu .main-menu {padding-right: 12px; } .sidebar-menu .main-menu > li { margin: 2px 0; } .sidebar-menu .main-menu > li > a { padding: 8px 12px; border-radius: var(--np-r-md); transition: background var(--np-t-fast), color var(--np-t-fast); } .sidebar-menu .main-menu > li > a:hover { color: var(--np-text); } .sidebar-menu .main-menu > li.opened > a, .sidebar-menu .main-menu > li.active > a { color: var(--np-accent) !important; background: var(--np-accent-soft) !important; font-weight: 600; } /* 二级菜单：扁平圆角内嵌容器（去掉左侧竖线，整体更简洁） */ .sidebar-menu .main-menu > li.has-sub > ul { margin: 2px 0 6px; padding: 4px; border-radius: var(--np-r-lg); } .sidebar-menu .main-menu > li.has-sub > ul > li > a { padding: 8px 10px; border-radius: var(--np-r-sm); transition: background var(--np-t-fast), color var(--np-t-fast); } .sidebar-menu .main-menu > li.has-sub > ul > li.active > a { color: var(--np-accent) !important; } @media (min-width: 769px) { html[data-layout="side"] .sidebar-menu .main-menu > li > a { display: flex; align-items: center; gap: 8px; min-height: 42px; margin: 2px 0; padding: 8px 12px; } html[data-layout="side"] .sidebar-menu .main-menu > li > a > i { flex: 0 0 20px; width: 20px; margin: 0; text-align: center; font-size: 15px; opacity: .9; } html[data-layout="side"] .sidebar-menu .main-menu > li > a > .title { flex: 1 1 auto; min-width: 0; } /* 侧栏模式：折叠箭头移到菜单行最右（core 的 float:right 在 flex 容器中失效，需 margin-left:auto 推右） */ html[data-layout="side"] .sidebar-menu .main-menu > li.has-sub > a:before { float: none; margin-left: auto; margin-right: 0; order: 99; } /* 二级菜单容器：与一级左对齐（不再额外缩进），浅底圆角、无左侧竖线 */ html[data-layout="side"] .sidebar-menu .main-menu > li.has-sub > ul { margin: 2px 0 6px; padding: 4px; border-left: none; border-radius: var(--np-r-lg); } html[data-layout="side"] .sidebar-menu .main-menu > li.has-sub > ul > li > a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--np-r-sm); } html[data-layout="side"] .sidebar-menu .main-menu > li.has-sub > ul > li > a > i { flex: 0 0 18px; width: 18px; margin: 0; text-align: center; opacity: .75; } } /* ---- Logo 区 ---- */ .logo-env { padding: 18px 16px !important; background: transparent; } .logo-env .logo-text { color: var(--ws-logo-text-color, var(--ws-sidebar-font-color, var(--np-text))); letter-spacing: .3px; } .sidebar-logo-edit:hover { color: var(--np-accent); background: var(--np-accent-soft); } /* ---- 顶栏（搜索区） ---- */ .user-info-navbar { position: sticky; top: 0; z-index: 1020; -webkit-backdrop-filter: blur(var(--ws-header-blur, 16px)); backdrop-filter: blur(var(--ws-header-blur, 16px)); border-bottom: 1px solid var(--np-border); box-shadow: var(--np-shadow-xs); padding: 0 22px !important; min-height: var(--np-header-h); } .nav-search .ws-logo { color: var(--np-accent); } .nav-search .ws-logo-edit:hover { color: var(--np-accent); background: var(--np-accent-soft); } .nav-search input#wsSearchInput { background: var(--np-surface-2); border: 1px solid var(--np-border); color: var(--np-text); } .nav-search input#wsSearchInput::placeholder { color: var(--np-text-3); } .nav-search input#wsSearchInput:focus { border-color: var(--np-accent); box-shadow: 0 0 0 3px var(--np-accent-soft); } .search-engine-switch .ses-toggle { border-color: var(--np-border); background: var(--np-surface-2); color: var(--ws-header-btn-color, var(--np-text-2)); } .search-engine-switch .ses-toggle:hover { border-color: var(--np-accent); color: var(--np-accent); } .search-engine-switch .ses-menu button { color: var(--np-text-2); } .search-engine-switch .ses-menu button:hover { background: var(--np-accent-soft); color: var(--np-accent); } .search-engine-switch .ses-menu, .nav-search .search-results { background: var(--np-surface); border-color: var(--np-border); box-shadow: var(--np-shadow-lg); } /* 深色：搜索栏右侧按钮 / 引擎下拉 / 悬浮补丁（内联样式后加载，需更高优先级覆盖） 背景统一走 --ws-header-btn-* / --ws-header-flyout-*，自定义与材质可无缝覆盖 */ html[data-mode="dark"] .search-engine-switch .ses-toggle { background-color: var(--ws-header-btn-bg, var(--np-surface-2)); color: var(--ws-header-btn-color, var(--np-text-2)) !important; } html[data-mode="dark"] .search-engine-switch .ses-toggle:hover { border-color: var(--np-accent) !important; color: var(--np-accent) !important; } html[data-mode="dark"] .search-engine-switch .ses-menu button:hover, html[data-mode="dark"] .search-engine-switch .ses-menu button.active { background-color: var(--np-accent-soft) !important; color: var(--np-accent) !important; } html[data-mode="dark"] .search-engine-switch .ses-menu, html[data-mode="dark"] .nav-search .search-results { background-color: var(--ws-header-flyout-bg, var(--np-surface)); border-color: var(--np-border) !important; box-shadow: var(--np-shadow-lg) !important; } html[data-mode="dark"] .nav-search .search-results .sr-item:hover, html[data-mode="dark"] .nav-search .search-results .sr-item.active { background: var(--np-accent-soft) !important; } html[data-mode="dark"] .nav-search .search-results .sr-title { color: var(--np-text) !important; } html[data-mode="dark"] .nav-search .search-results .sr-cat, html[data-mode="dark"] .nav-search .search-results .sr-empty { color: var(--np-text-3) !important; } html[data-mode="dark"] .nav-search .search-results mark { background: rgba(255, 213, 0, .35); color: inherit; } .nav-search .search-results .sr-item:hover, .nav-search .search-results .sr-item.active { background: var(--np-accent-soft); } .nav-search .search-results .sr-title { color: var(--np-text); } .nav-search .search-results .sr-cat { color: var(--np-text-3); } .nav-search .ws-search-btn { background: var(--np-accent); box-shadow: var(--np-shadow-accent); } .nav-search .ws-search-btn:hover { background: var(--np-accent-hover); } .search-count { background: var(--np-accent); box-shadow: var(--np-shadow-accent); } .search-count .search-clear { color: var(--np-on-accent); opacity: .85; } /* 顶栏右侧控制按钮（样式调整 / 主题）通用外观 */ .style-toggle, .np-theme-toggle { border: 1px solid var(--np-border); background: var(--np-surface-2); color: var(--ws-header-btn-color, var(--np-text-2)); } .style-toggle:hover, .np-theme-toggle:hover { border-color: var(--np-accent); color: var(--np-accent); } /* 搜索框输入文字颜色跟随「页头按钮文字颜色」 */ .nav-search #wsSearchInput { color: var(--ws-header-btn-color, var(--np-text)); } .nav-search #wsSearchInput::placeholder { color: var(--ws-header-btn-color, var(--np-text-3)); opacity: .7; } /* 外观设置按钮与「样式调整」等头部按钮尺寸统一，左移归入头部工具栏 */ .np-theme-li { margin: 0 !important; padding: 0 !important; border: 0 !important;} .np-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 14px; margin: 0 2px; border-radius: var(--np-r-md); font-size: 13px; white-space: nowrap; cursor: pointer; transition: border-color var(--np-t-fast), color var(--np-t-fast), background var(--np-t-fast); } .np-theme-toggle:hover { border-color: var(--np-accent); color: var(--np-accent); } #userNav .user-greeting, #loginNav a, #userNav .user-logout { color: var(--np-text-2); } /* ---- 页头按钮 / 页头悬浮窗：背景色 + 透明度 + 毛玻璃可调（样式面板配置） ---- */ /* 页头其它按钮默认无边框，hover 时再显示（毛玻璃 / 液态玻璃材质生效） */ html[data-material="glass"] .style-toggle, html[data-material="glass"] .np-theme-toggle, html[data-material="glass"] .search-engine-switch .ses-toggle { border-color: transparent; } html[data-material="liquid"] .style-toggle, html[data-material="liquid"] .np-theme-toggle, html[data-material="liquid"] .search-engine-switch .ses-toggle { border-color: transparent; } /* ---- 内容区块 ---- */ .ws-section { background: var(--np-section); border: 1px solid var(--np-border); box-shadow: var(--np-shadow-xs); } .ws-section.no-bg { background: transparent !important; border-color: transparent !important; box-shadow: none; } .ws-section .section-title { color: var(--np-text); } .ws-section .section-title > i { color: var(--np-accent); } .ws-section .cat-actions button { color: inherit; } .ws-section .cat-actions button i { color: inherit; } /* ---- 卡片 ---- */ .box2 { background-color: var(--np-surface); border: var(--ws-card-border-w, 1px) solid var(--ws-card-border-color, var(--np-border)); box-shadow: var(--ws-card-shadow, var(--np-shadow-sm)); } .nav-user-name strong { color: var(--np-text); font-size: 14px; } .nav-comment p { color: var(--np-text-2); font-size: 12px; margin-top: 2px; } .nav-user-img img { background: transparent; border-radius: var(--np-r-sm); } .box2:hover { box-shadow: var(--ws-card-hover-boxshadow, var(--np-shadow-md)); -webkit-box-shadow: var(--ws-card-hover-boxshadow, var(--np-shadow-md)); border-color: var(--np-accent) !important; transform: translateY(-3px); } .box2:focus-visible { outline: none; border-color: var(--np-accent); box-shadow: 0 0 0 3px var(--np-accent-soft); } .card-tag-icon { color: var(--np-accent); } .card-featured { color: var(--np-warning); } .card-pinned { color: var(--np-accent); } .site-card.is-featured { border-color: var(--np-warning); } .card-stamp { background: var(--np-surface); } /* ---- 弹窗 ---- */ .ws-modal .modal-content { background: var(--np-surface); border: 1px solid var(--np-border); box-shadow: var(--np-shadow-lg); color: var(--np-text); } .ws-modal .modal-header { border-bottom-color: var(--np-border); } .ws-modal .modal-header .close { color: var(--np-text-3); } .ws-modal .modal-header .close:hover { color: var(--np-text); } .ws-modal .modal-title { color: var(--np-text); } .ws-modal .modal-body { color: var(--np-text-2); } .ws-modal .modal-footer { border-top-color: var(--np-border); } .ws-modal .form-control { background: var(--np-surface-2); border-color: var(--np-border); color: var(--np-text); } .ws-modal .form-control:focus { border-color: var(--np-accent); box-shadow: 0 0 0 3px var(--np-accent-soft); } .ws-modal .btn-primary { background: var(--np-accent); border-color: var(--np-accent); color: var(--np-on-accent); box-shadow: var(--np-shadow-accent); } .ws-modal .btn-primary:hover { background: var(--np-accent-hover); border-color: var(--np-accent-hover); } .ws-modal .btn-default { background: var(--np-surface-2); color: var(--np-text); border-color: var(--np-border); } .ws-modal .btn-default:hover { background: var(--np-surface-3); color: var(--np-text); } .modal .form-control { background: var(--np-surface-2); border-color: var(--np-border); color: var(--np-text); } .modal .form-control:focus { border-color: var(--np-accent); box-shadow: 0 0 0 3px var(--np-accent-soft); } .modal .btn { border-radius: var(--np-r-md); } #loginModal .form-control, #logoTextModal .form-control { background: var(--np-surface-2); border-color: var(--np-border); color: var(--np-text); } #loginModal .modal-footer .btn-default, #logoTextModal .modal-footer .btn-default { background: var(--np-surface-2); color: var(--np-text); border-color: var(--np-border); } #deleteModal #btnDeleteOk:hover { background: var(--np-danger) !important; border-color: var(--np-danger) !important; } /* 卡片操作按钮默认跟随当前主题强调色。 */ .site-actions .site-del { background: var(--np-accent) !important; } .site-actions .site-del:hover { background: var(--np-accent-hover) !important; color: #fff; } /* 仅深色＋霓虹绿降低卡片删除按钮亮度；其他组合仍跟随各自主题色。 */ html[data-mode="dark"][data-theme="wenxi"] .site-actions .site-del { background: rgba(0, 217, 115, .16) !important; color: #4bdc98 !important; box-shadow: none !important; } html[data-mode="dark"][data-theme="wenxi"] .site-actions .site-del:hover { background: rgba(0, 217, 115, .26) !important; color: #72eaae !important; } .cat-del { color: var(--np-danger) !important; } .cat-del:hover { opacity: .85; } .cat-addsite { color: var(--np-success) !important; } .cat-addsite:hover { opacity: .85; } /* 图标选择器 */ .icon-picker-toggle { background: var(--np-surface-2); border: 1px solid var(--np-border); color: var(--np-text-2); } .icon-picker-menu { background: var(--np-surface); border-color: var(--np-border); box-shadow: var(--np-shadow-lg); } .icon-picker-menu a:hover { background: var(--np-accent-soft); border-color: var(--np-accent); color: var(--np-accent); } .icon-picker-menu a.selected { background: var(--np-accent-soft); border-color: var(--np-accent); color: var(--np-accent); } /* ---- 样式调整面板 ---- */ .style-panel { background: var(--np-surface); border: 1px solid var(--np-border); box-shadow: var(--np-shadow-lg); color: var(--np-text); } .style-panel .style-title { color: var(--np-text); border-bottom-color: var(--np-border); } .style-block { background: var(--np-surface-2); border-color: var(--np-border); } .style-block-title { color: var(--np-text); background: var(--np-surface-3); } .style-subtitle { color: var(--np-accent); } .style-row > label { color: var(--np-text-2); } .style-row > select, .style-row > input[type="color"], .style-row > input[type="text"] { background: var(--np-surface); border-color: var(--np-border); color: var(--np-text); } .style-row > select:focus, .style-row > input[type="text"]:focus { border-color: var(--np-accent); box-shadow: 0 0 0 2px var(--np-accent-soft); } .style-reset button { color: var(--np-text-3); border-color: var(--np-border); } .style-reset button:hover { color: var(--np-accent); border-color: var(--np-accent); } .style-panel .sp-action-btn { background: var(--np-surface); border-color: var(--np-border); color: var(--np-text-2); } .style-panel .sp-action-btn:hover { border-color: var(--np-accent); color: var(--np-accent); } .style-panel .sp-action-btn.primary { background: var(--np-accent); border-color: var(--np-accent); color: var(--np-on-accent); box-shadow: var(--np-shadow-accent); } .style-panel .sp-action-btn.primary:hover { background: var(--np-accent-hover); color: var(--np-on-accent); } .style-panel .sp-item { background: var(--np-surface); border-color: var(--np-border); } .style-panel .sp-name { color: var(--np-text); } .style-panel .sp-enable-btn { color: var(--np-accent); border-color: var(--np-accent-soft-2); background: var(--np-accent-soft); } .style-panel .sp-enable-btn:hover { background: var(--np-accent-soft-2); } .style-panel .sp-rename-btn:hover { border-color: var(--np-accent); color: var(--np-accent); } .style-panel .sp-del-btn { color: var(--np-danger); border-color: var(--np-danger); background: var(--np-danger-soft); } .style-panel .sp-del-btn:hover:not(:disabled) { background: var(--np-danger); color: #fff; } .style-panel .sp-empty { color: var(--np-text-3); } /* 暗色下统一「样式调整」面板的分栏底色，保证与外观弹窗风格一致 */ html[data-mode="dark"] .style-cols.cols-banded .style-col:first-child, html[data-mode="dark"] .style-cols.cols-banded .style-col:last-child { background: var(--np-surface-3); } /* ---- 导出 / 导入 菜单 ---- */ .export-menu { background: var(--np-surface); border-color: var(--np-border); box-shadow: var(--np-shadow-lg); } .export-menu button { color: var(--np-text-2); } .export-menu button:hover { background: var(--np-accent-soft); color: var(--np-accent); } /* ---- FAB 悬浮新增 ---- */ .admin-fab-main { background: var(--np-accent); box-shadow: var(--np-shadow-accent); } .admin-fab-main:hover { background: var(--np-accent-hover); } .admin-fab-menu #btnAddCat { background: var(--np-accent); } .admin-fab-menu #btnAddSite { background: var(--np-success); } /* ---- 页脚 ---- */ footer.main-footer { color: var(--np-text-3); border-top: 1px solid var(--np-border); -webkit-backdrop-filter: blur(var(--ws-footer-blur, 0px)); backdrop-filter: blur(var(--ws-footer-blur, 0px)); } footer.main-footer .footer-text { color: var(--np-text-3); } footer.main-footer .go-up a { background: var(--np-text-3); color: #fff; box-shadow: var(--np-shadow-sm); } footer.main-footer .go-up a:hover { background: var(--np-accent) !important; } /* ---- 空状态 ---- */ .empty-state-title { color: var(--np-text); } .empty-state-sub { color: var(--np-text-3); } /* 关注减少动效偏好 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .box2:hover { transform: none !important; } } /* ========================================================================= 4. 布局（data-layout）：side 默认 / float 浮窗 / top 顶栏 ========================================================================= */ /* side：默认，微调侧栏宽度使用 token */ html[data-layout="side"] .sidebar-menu.fixed, html[data-layout="float"] .sidebar-menu.fixed { width: var(--np-sidebar-w); flex-basis: var(--np-sidebar-w); } html[data-layout="side"] .sidebar-menu.fixed.collapsed, html[data-layout="float"] .sidebar-menu.fixed.collapsed { width: var(--np-sidebar-w-collapsed); flex-basis: var(--np-sidebar-w-collapsed); } /* float：内容居中浮于渐变背景之上，区块/卡片更圆润 */ html[data-layout="float"] .main-content { max-width: 1320px; margin: 0 auto; padding: 22px 26px 0; } html[data-layout="float"] .user-info-navbar { border-radius: var(--np-r-lg); margin: 14px 22px 0; } html[data-layout="float"] .ws-section { border-radius: var(--np-r-xl); } html[data-layout="float"] .box2 { border-radius: var(--np-r-lg); } html[data-layout="float"] footer.main-footer { border-radius: var(--np-r-lg); margin: 18px 22px 0; } /* 桌面浮窗侧栏：留白相等，sticky 保持滚动时悬浮，内部菜单继续独立滚动。 */ @media (min-width: 769px) { html[data-layout="float"] .sidebar-menu.fixed { top: 16px; margin: 16px 0 16px 16px; height: calc(100vh - 32px); border-radius: var(--np-r-lg); box-shadow: var(--np-shadow-lg); } } /* top：侧栏变顶部横向分类条（仅桌面端生效，移动端走统一布局） */ @media (min-width: 769px) { html[data-layout="top"] .page-container { display: block !important; } html[data-layout="top"] .sidebar-menu.fixed { position: sticky; top: 0; width: 100% !important; height: auto !important; z-index: 1030; flex-basis: auto; border-right: none; border-bottom: 1px solid var(--np-border); box-shadow: var(--np-shadow-sm); } html[data-layout="top"] .sidebar-menu.fixed .sidebar-menu-inner { display: flex !important; flex-direction: row; align-items: center; gap: 10px; padding: 8px 16px; min-height: 64px; box-sizing: border-box; } html[data-layout="top"] .logo-env { border-bottom: none !important; padding: 0 !important; width: auto !important; flex: 0 0 auto; min-width: 0; } html[data-layout="top"] .logo-env .logo { flex-direction: row !important; gap: 8px; width: auto !important; flex-shrink: 0 !important; } html[data-layout="top"] .logo-env .logo-expanded { display: flex !important; align-items: center; flex: 0 0 auto; flex-shrink: 0; min-width: 0; } html[data-layout="top"] .logo-env .logo-expanded img { height: 36px; width: auto; max-width: none; flex-shrink: 0; } html[data-layout="top"] .logo-env .logo-expanded .logo-text { display: block; width: auto; max-width: 220px; color: var(--np-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-layout="top"] .logo-env .logo-collapsed { display: none !important; } html[data-layout="top"] .sidebar-logo-edit { display: none !important; } html[data-layout="top"] #main-menu { display: flex !important; flex: 1 1 auto; min-width: 0; height: 46px; box-sizing: border-box; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; } html[data-layout="top"] #main-menu::-webkit-scrollbar { width: 6px; height: 6px; } html[data-layout="top"] #main-menu::-webkit-scrollbar-thumb { background: var(--np-border-strong); border-radius: 4px; } html[data-layout="top"] .sidebar-menu .main-menu > li { display: inline-flex; flex: 0 0 auto; } html[data-layout="top"] .sidebar-menu .main-menu > li > a { padding: 8px 16px; border-radius: var(--np-r-pill); } /* top 布局：含二级分类的一级菜单以悬浮窗显示子菜单（hover 或点击 .opened 均可触发） */ html[data-layout="top"] .sidebar-menu .main-menu > li.has-sub { position: relative; } html[data-layout="top"] .sidebar-menu .main-menu > li.has-sub > a:after { content: '\f105'; font-family: 'FontAwesome'; font-size: 11px; margin-left: 6px; opacity: .6; color: var(--np-text-3); display: inline-block !important; transition: transform .22s var(--np-ease), opacity .22s var(--np-ease), color .22s var(--np-ease); } html[data-layout="top"] .sidebar-menu .main-menu > li.has-sub:hover > a:after { opacity: 1 !important; color: var(--np-accent) !important; transform: rotate(90deg); } /* top 布局：二级菜单以 body 级悬浮层（.np-top-flyout）显示，原内联子菜单始终隐藏，避免被 overflow 裁剪 */ html[data-layout="top"] .sidebar-menu .main-menu > li.has-sub > ul { display: none !important; } html[data-layout="top"] #sidebarEmptyState { display: none !important; } html[data-layout="top"] .main-content { margin-left: 0 !important; } .mobile-menu-backdrop { display: none; } /* top 布局：搜索框一行冻结不随滚动，且贴在顶部分类条下方（--np-topbar-h 由 JS 同步） */ html[data-layout="top"] .user-info-navbar { position: sticky !important; top: var(--np-topbar-h, 0px); } } @media (max-width: 768px) { /* ===================================================================== 移动端统一顶栏（三模式通用） 第一行 logo+按钮，第二行菜单（浮动覆盖，不推动内容） ===================================================================== */ .sidebar-menu.fixed { position: sticky !important; top: 0; width: 100% !important; height: auto !important; z-index: 1030; flex-basis: auto; border-right: none; border-bottom: 1px solid var(--np-border); box-shadow: var(--np-shadow-sm); } .sidebar-menu.fixed .sidebar-menu-inner { display: flex !important; flex-direction: column !important; flex-wrap: nowrap; padding: 6px 10px; gap: 0; position: relative; } /* ---- 第一行：logo + 文本按钮（单行显示，缩小占用空间） ---- */ .logo-env { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; width: 100%; padding: 0 !important; border-bottom: none !important; } .logo-env .logo { flex: 0 1 auto; min-width: 0; max-width: 92px; } .logo-env .logo a, .logo-env .logo button { display: inline-flex; align-items: center; border: 0; padding: 0; background: transparent; } .logo-env .logo-expanded img { max-height: 24px; max-width: 100%; width: auto; } .logo-env .logo-expanded { display: flex; } .logo-env .logo-collapsed { display: none !important; } .sidebar-logo-edit { display: none !important; } /* 右侧文本按钮（单行，紧凑间距与字号） */ .mobile-menu-toggle { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 5px; margin-left: auto; flex: 1 1 auto; justify-content: flex-end; min-width: 0; } .mobile-menu-toggle a, .mobile-menu-toggle button { margin-left: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 28px; padding: 0 8px !important; font-size: 11px; font-weight: 600; color: var(--np-text-2); border-radius: var(--np-r-md); background: var(--np-surface-2); border: 1px solid var(--np-border); line-height: 1; box-sizing: border-box; white-space: nowrap; text-decoration: none; flex: 0 0 auto; letter-spacing: 0; } .mobile-menu-toggle a:hover, .mobile-menu-toggle button:hover { color: var(--np-accent); background: var(--np-accent-soft); } /* 搜索栏移动端隐藏 */ .nav-search .ws-logo, .nav-search .ws-logo-edit, .nav-search .search-input-wrap, .nav-search .search-engine-switch, .nav-search .ws-search-btn, .nav-search .style-toggle { display: none !important; } /* ---- 第二行：菜单（展开=纵向浮动覆盖，收起=隐藏） ---- */ /* 弹出层容器：绝对定位覆盖于内容之上，脱离文档流 */ #main-menu { position: absolute; top: calc(100% + 6px); left: 12px; width: min(240px, calc(100vw - 24px)); z-index: 1029; display: flex !important; flex-direction: column !important; max-height: min(66vh, 560px); overflow-y: auto; overflow-x: hidden; padding: 8px; margin: 0; border-radius: var(--np-r-lg); background: var(--np-surface); border: 1px solid var(--np-border); box-shadow: 0 12px 40px rgba(16, 24, 40, .16), 0 2px 8px rgba(16, 24, 40, .08); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); /* 半透明面板：亮色 92%、暗色 88% 由下方变量覆盖，保证毛玻璃通透 */ background: color-mix(in srgb, var(--np-surface) 92%, transparent); transition: opacity var(--np-t-mid), transform var(--np-t-mid), visibility var(--np-t-mid); transform-origin: top left; } .mobile-menu-backdrop { display: none; position: fixed; inset: 0; z-index: 1028; border: 0; background: rgba(13, 17, 23, .34); } .mobile-menu-backdrop.open { display: block; } body.mobile-menu-open { overflow: hidden; } /* 收起态：淡出 + 轻微上移，隐藏且不响应事件 */ #main-menu.collapsed { opacity: 0; transform: translateY(-8px) scale(.98); visibility: hidden; pointer-events: none; } /* 展开态：淡入 + 落位 */ #main-menu:not(.collapsed) { opacity: 1; transform: none; visibility: visible; pointer-events: auto; } .sidebar-menu .main-menu > li { display: block !important; margin: 1px 0; } .sidebar-menu .main-menu > li > a { display: flex; align-items: center; gap: 12px; border-radius: var(--np-r-md); padding: 11px 14px; white-space: nowrap; font-size: 15px; line-height: 1.35; min-height: 44px; box-sizing: border-box; } /* 图标固定宽度对齐，避免名称错位 */ .sidebar-menu .main-menu > li > a > i { flex: 0 0 auto; width: 20px; text-align: center; margin-right: 0; font-size: 16px; } .sidebar-menu .main-menu > li > a > .title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* flex 布局下 float 失效，箭头（:before）需推到名称之后 */ .sidebar-menu .main-menu > li.has-sub > a:before { float: none; order: 3; flex: 0 0 auto; margin-left: auto; margin-right: 2px; } /* 二级菜单：平滑展开（max-height 过渡替代 display 硬切） */ .sidebar-menu .main-menu > li.has-sub > ul { display: block !important; max-height: 0; overflow: hidden; opacity: 0; margin: 0; padding: 0 6px; border-radius: var(--np-r-md); transition: max-height var(--np-t-mid), opacity var(--np-t-fast), margin var(--np-t-mid), padding var(--np-t-mid); } .sidebar-menu .main-menu > li.has-sub.opened > ul { max-height: 320px; opacity: 1; margin: 2px 0 4px; padding: 4px 6px; } .sidebar-menu .main-menu > li.has-sub > ul > li > a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 40px; border-radius: var(--np-r-sm); font-size: 16px; } .sidebar-menu .main-menu > li.has-sub > ul > li > a > i { flex: 0 0 auto; width: 20px; text-align: center; margin-right: 0; font-size: 14px; opacity: .75; } /* 子菜单：与一级左对齐的扁平圆角分组（去掉左侧竖线） */ .sidebar-menu .main-menu > li.has-sub > ul { margin-left: 0; border-left: none; border-radius: 12px; } /* 滚动条美化（窄屏弹出层） */ #main-menu::-webkit-scrollbar { width: 0; height: 0; display: none; } #main-menu { scrollbar-width: none; -ms-overflow-style: none; } /* 暗色模式：面板更深、阴影更重，半透明通透感保持一致 */ html[data-mode="dark"] #main-menu { background: color-mix(in srgb, var(--np-surface) 88%, transparent); box-shadow: 0 16px 48px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .30); } /* 低动态偏好：关闭过渡动画 */ @media (prefers-reduced-motion: reduce) { #main-menu, #main-menu.collapsed, #main-menu:not(.collapsed), .sidebar-menu .main-menu > li.has-sub > ul { transition: none !important; } } /* 主内容区左边距归零，左右均匀内边距 */ .page-container .main-content { margin-left: 0 !important; padding: 0 10px !important; } /* 外观/样式弹窗移动端居中适配 */ .style-panel { position: fixed !important; left: 16px !important; right: 16px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; width: auto !important; max-width: calc(100vw - 32px) !important; max-height: 80vh !important; margin-top: 0 !important; border-radius: 12px !important; padding: 14px !important; z-index: 1080 !important; overflow-y: auto; } .style-panel .style-cols { grid-template-columns: 1fr; gap: 12px; } .style-panel .style-block { padding: 10px; } .style-panel .style-row > label { font-size: 12px; } .style-panel .style-row input[type="color"] { width: 36px; height: 28px; } #npThemePanel { position: fixed !important; left: 8px !important; right: 8px !important; top: 85px !important; /*不要改动*/ bottom: 8px !important; width: auto !important; max-width: none !important; max-height: none !important; border-radius: 12px !important; padding: 16px !important; z-index: 1080 !important; overflow-y: auto; margin: 0 !important; } #npThemePanel.open { display: block !important; } /* 登录态由 body.edit-mode 统一驱动；覆盖按钮组的通用 !important 显示规则。 */ body.edit-mode .mobile-menu-toggle #topLoginBtn { display: none !important; } body:not(.edit-mode) .mobile-menu-toggle #topUserNav { display: none !important; } .np-theme-panel .np-tp-group { margin-bottom: 14px; } .np-theme-panel .np-seg button { font-size: 13px; padding: 6px 10px; } /* 登录弹窗移动端适配 */ #loginModal .modal-dialog { width: 94vw; max-width: none; } /* ---- 卡片密度移动端列数（布局/内容与电脑端对应密度一致，仅调整每行列数） ---- */ html[data-density="cozy"] .card-grid > .col-sm-3.card-cell { width: 50% !important; } /* 宽松：2列 */ html[data-density="compact"] .card-grid > .col-sm-3.card-cell { width: 33.3333% !important; } /* 紧凑：3列 */ html[data-density="list"] .card-grid > .col-sm-3.card-cell { width: 100% !important; } /* 列表：1列 */ } /* ========================================================================= 5. 卡片密度（data-density）：cozy 默认 / compact 紧凑 / list 列表 ========================================================================= */ /* cozy（默认）：使用 token 高度 */ html[data-density="cozy"] .box2 { height: var(--np-card-h); } /* compact：更矮、更窄、隐藏描述 */ html[data-density="compact"] .box2 { height: 64px; padding: 0 10px; } html[data-density="compact"] .card-grid > .col-sm-3.card-cell { width: 20%; } html[data-density="compact"] .nav-comment p { display: none; } html[data-density="compact"] .nav-user-name strong { font-size: 13px; } @media (max-width: 1200px) { html[data-density="compact"] .card-grid > .col-sm-3.card-cell { width: 25%; } } @media (max-width: 992px) { html[data-density="compact"] .card-grid > .col-sm-3.card-cell { width: 33.3333%; } } @media (max-width: 768px) { html[data-density="compact"] .box2 { padding: 0 8px; } html[data-density="compact"] .box2 .nav-user-img { width: 18px; height: 18px; margin-right: 5px; } html[data-density="compact"] .box2 .nav-user-img img { width: 18px !important; height: 18px !important; margin: 0 !important; object-fit: contain; } /* 后置基础字号读取该变量；直接写 font-size 会被它覆盖回 14px */ html[data-density="compact"] .box2 .nav-user-name strong { --ws-font-size: 12px; } } /* list：整行，左图标 + 标题 + 描述 横向排列 */ html[data-density="list"] .card-grid { flex-direction: column; margin: 0; } html[data-density="list"] .card-grid > .col-sm-3.card-cell { width: 100% !important; padding: 0; } html[data-density="list"] .box2 { height: auto; min-height: 60px; padding: 12px 18px; border-radius: var(--np-r-md); } html[data-density="list"] .box2 .nav-comment-entry { float: none; display: flex; align-items: center; } html[data-density="list"] .box2 .nav-user-img { margin-right: 14px; } html[data-density="list"] .box2 .nav-comment { position: static; transform: none; top: auto; margin-left: 0; display: flex; flex-direction: column; } html[data-density="list"] .box2 .nav-comment p { display: block; } html[data-density="list"] .box2:hover { transform: none; } /* ========================================================================= 6. 材质（data-material）：solid 默认 / glass 毛玻璃 / liquid 液态玻璃 ========================================================================= */ /* 毛玻璃：整体柔和的半透明模糊，统一应用到卡片 / 区块 / 顶栏 / 侧栏 / 弹窗 / 按钮 */ html[data-material="glass"] .box2 { -webkit-backdrop-filter: blur(var(--ws-card-blur, 18px)); backdrop-filter: blur(var(--ws-card-blur, 18px)); } html[data-material="glass"] .ws-section { -webkit-backdrop-filter: blur(var(--ws-section-blur, 18px)); backdrop-filter: blur(var(--ws-section-blur, 18px)); } html[data-material="glass"] .user-info-navbar, html[data-material="glass"] .sidebar-menu.fixed, html[data-material="glass"] .ws-modal .modal-content, html[data-material="glass"] .style-panel, html[data-material="glass"] .np-theme-panel { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } html[data-material="glass"] .user-info-navbar { -webkit-backdrop-filter: blur(var(--ws-header-blur, 18px)); backdrop-filter: blur(var(--ws-header-blur, 18px)); } html[data-material="glass"] .box2 { background-color: rgba(255, 255, 255, .62); border-color: rgba(16, 24, 40, .10); } html[data-material="glass"] .ws-section { background-color: rgba(255, 255, 255, .46); border-color: rgba(16, 24, 40, .08); } html[data-material="glass"] .user-info-navbar { background-color: rgba(255, 255, 255, .58); } /* 侧栏背景与「卡片区域」背景一致 */ html[data-material="glass"] .sidebar-menu.fixed { background-color: rgba(255, 255, 255, .46); } html[data-material="glass"] .ws-modal .modal-content, html[data-material="glass"] .style-panel, html[data-material="glass"] .np-theme-panel { background-color: rgba(255, 255, 255, .62); border-color: rgba(16, 24, 40, .10); } /* 页头按钮 + 搜索框：毛玻璃材质；自定义 --ws-header-btn-* 时优先采用自定义值 */ html[data-material="glass"] .nav-search input#wsSearchInput, html[data-material="glass"] .nav-search .ses-toggle, html[data-material="glass"] .style-toggle, html[data-material="glass"] .np-theme-toggle, html[data-material="glass"] .nav-search .ws-search-btn { background-color: var(--ws-header-btn-bg, rgba(255, 255, 255, .55)); -webkit-backdrop-filter: blur(var(--ws-header-btn-blur, 18px)); backdrop-filter: blur(var(--ws-header-btn-blur, 18px)); } html[data-material="glass"] .nav-search .ws-search-btn { color: var(--np-accent); box-shadow: none; } html[data-material="glass"] .nav-search .ws-search-btn:hover { color: var(--np-accent); background-color: var(--ws-header-btn-bg, rgba(255, 255, 255, .72)); } /* 页头悬浮窗（搜索引擎 hover 悬浮 / 导出 / 站内搜索下拉）：毛玻璃 */ html[data-material="glass"] .search-engine-switch .ses-menu, html[data-material="glass"] .export-menu, html[data-material="glass"] .nav-search .search-results { background-color: var(--ws-header-flyout-bg, rgba(255, 255, 255, .62)); border-color: rgba(16, 24, 40, .10); -webkit-backdrop-filter: blur(var(--ws-header-flyout-blur, 18px)); backdrop-filter: blur(var(--ws-header-flyout-blur, 18px)); } html[data-mode="dark"][data-material="glass"] .box2 { background-color: rgba(22, 27, 36, .30); border-color: rgba(255, 255, 255, .08); } html[data-mode="dark"][data-material="glass"] .ws-section { background-color: rgba(27, 32, 41, .42); border-color: rgba(255, 255, 255, .07); } html[data-mode="dark"][data-material="glass"] .user-info-navbar { background-color: rgba(18, 22, 30, .42); } html[data-mode="dark"][data-material="glass"] .sidebar-menu.fixed { background-color: rgba(27, 32, 41, .42); } html[data-mode="dark"][data-material="glass"] .ws-modal .modal-content, html[data-mode="dark"][data-material="glass"] .style-panel, html[data-mode="dark"][data-material="glass"] .np-theme-panel { background-color: rgba(18, 22, 30, .55); border-color: rgba(255, 255, 255, .08); } html[data-mode="dark"][data-material="glass"] .nav-search input#wsSearchInput, html[data-mode="dark"][data-material="glass"] .nav-search .ses-toggle, html[data-mode="dark"][data-material="glass"] .style-toggle, html[data-mode="dark"][data-material="glass"] .np-theme-toggle, html[data-mode="dark"][data-material="glass"] .nav-search .ws-search-btn { background-color: var(--ws-header-btn-bg, rgba(18, 22, 30, .42)); border-color: var(--ws-card-border-color, rgba(255, 255, 255, .08)); } html[data-mode="dark"][data-material="glass"] .search-engine-switch .ses-menu, html[data-mode="dark"][data-material="glass"] .export-menu, html[data-mode="dark"][data-material="glass"] .nav-search .search-results { background-color: var(--ws-header-flyout-bg, rgba(18, 22, 30, .42)); border-color: var(--ws-card-border-color, rgba(255, 255, 255, .08)) !important; } /* 毛玻璃 / 液态玻璃：hover 背景与二级菜单、侧栏/卡片背景统一为卡片样式 */ html[data-material="glass"] { --dh-card-hover-bg: rgba(255, 255, 255, .5); --ws-cat-hover-bg: rgba(255, 255, 255, .62); --ws-cat-hover-blur: 18px; --ws-submenu-blur: 18px; --ws-submenu-bg-solid: rgba(255, 255, 255, .62); --ws-card-blur: 30px; --ws-section-blur: 30px; } html[data-mode="dark"][data-material="glass"] { --dh-card-hover-bg: rgba(18, 22, 30, .45); --ws-cat-hover-bg: rgba(22, 27, 36, .5); --ws-cat-hover-blur: 18px; --ws-submenu-blur: 18px; --ws-submenu-bg-solid: rgba(22, 27, 36, .5); --ws-card-blur: 20px; --ws-section-blur: 20px; } html[data-material="liquid"] { --dh-card-hover-bg: rgba(255, 255, 255, .32); --ws-cat-hover-bg: rgba(255, 255, 255, .30); --ws-cat-hover-blur: 26px; --ws-submenu-blur: 26px; --ws-submenu-bg-solid: rgba(255, 255, 255, .30); --ws-card-blur: 26px; --ws-section-blur: 26px; } html[data-mode="dark"][data-material="liquid"] { --dh-card-hover-bg: rgba(18, 22, 30, .30); --ws-cat-hover-bg: rgba(18, 22, 30, .30); --ws-cat-hover-blur: 20px; --ws-submenu-blur: 20px; --ws-submenu-bg-solid: rgba(18, 22, 30, .32); --ws-card-blur: 20px; --ws-section-blur: 20px; } /* 液态玻璃：更通透，内高光描边 + 更强光晕与饱和度（阴影与边框更细） */ html[data-material="liquid"] .box2, html[data-material="liquid"] .ws-section { background-color: rgba(255, 255, 255, .30); border-color: rgba(255, 255, 255, .38); border-width: 1px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), var(--np-shadow-xs); } html[data-material="liquid"] .box2 { -webkit-backdrop-filter: blur(var(--ws-card-blur, 26px)) saturate(165%); backdrop-filter: blur(var(--ws-card-blur, 26px)) saturate(165%); } html[data-material="liquid"] .ws-section { -webkit-backdrop-filter: blur(var(--ws-section-blur, 26px)) saturate(165%); backdrop-filter: blur(var(--ws-section-blur, 26px)) saturate(165%); } html[data-material="liquid"] .user-info-navbar, html[data-material="liquid"] .sidebar-menu.fixed, html[data-material="liquid"] .ws-modal .modal-content, html[data-material="liquid"] .style-panel, html[data-material="liquid"] .np-theme-panel { background-color: rgba(255, 255, 255, .30); border-color: rgba(255, 255, 255, .38); border-width: 1px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), var(--np-shadow-xs); -webkit-backdrop-filter: blur(26px) saturate(165%); backdrop-filter: blur(26px) saturate(165%); } html[data-material="liquid"] .user-info-navbar { -webkit-backdrop-filter: blur(var(--ws-header-blur, 26px)) saturate(165%); backdrop-filter: blur(var(--ws-header-blur, 26px)) saturate(165%); } html[data-material="liquid"] .nav-search input#wsSearchInput, html[data-material="liquid"] .nav-search .ses-toggle, html[data-material="liquid"] .style-toggle, html[data-material="liquid"] .np-theme-toggle, html[data-material="liquid"] .nav-search .ws-search-btn { background-color: var(--ws-header-btn-bg, rgba(255, 255, 255, .30)); border-color: rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(var(--ws-header-btn-blur, 26px)) saturate(165%); backdrop-filter: blur(var(--ws-header-btn-blur, 26px)) saturate(165%); } html[data-material="liquid"] .nav-search .ws-search-btn { color: var(--np-accent); box-shadow: none; } html[data-material="liquid"] .nav-search .ws-search-btn:hover { color: var(--np-accent); background-color: var(--ws-header-btn-bg, rgba(255, 255, 255, .45)); } /* 页头悬浮层（搜索引擎切换 / 导出 / 站内搜索下拉）：液态玻璃 */ html[data-material="liquid"] .search-engine-switch .ses-menu, html[data-material="liquid"] .export-menu, html[data-material="liquid"] .nav-search .search-results { background-color: var(--ws-header-flyout-bg, rgba(255, 255, 255, .30)); border-color: rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(var(--ws-header-flyout-blur, 26px)) saturate(165%); backdrop-filter: blur(var(--ws-header-flyout-blur, 26px)) saturate(165%); } html[data-mode="dark"][data-material="liquid"] .box2, html[data-mode="dark"][data-material="liquid"] .ws-section, html[data-mode="dark"][data-material="liquid"] .user-info-navbar, html[data-mode="dark"][data-material="liquid"] .sidebar-menu.fixed, html[data-mode="dark"][data-material="liquid"] .ws-modal .modal-content, html[data-mode="dark"][data-material="liquid"] .style-panel, html[data-mode="dark"][data-material="liquid"] .np-theme-panel { background-color: rgba(18, 22, 30, .30); border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), var(--np-shadow-xs); } html[data-mode="dark"][data-material="liquid"] .nav-search input#wsSearchInput, html[data-mode="dark"][data-material="liquid"] .nav-search .ses-toggle, html[data-mode="dark"][data-material="liquid"] .style-toggle, html[data-mode="dark"][data-material="liquid"] .np-theme-toggle, html[data-mode="dark"][data-material="liquid"] .nav-search .ws-search-btn { background-color: var(--ws-header-btn-bg, rgba(18, 22, 30, .32)); border-color: var(--ws-card-border-color, rgba(255, 255, 255, .10)); } html[data-mode="dark"][data-material="liquid"] .search-engine-switch .ses-menu, html[data-mode="dark"][data-material="liquid"] .export-menu, html[data-mode="dark"][data-material="liquid"] .nav-search .search-results { background-color: var(--ws-header-flyout-bg, rgba(18, 22, 30, .32)); border-color: var(--ws-card-border-color, rgba(255, 255, 255, .10)) !important; } /* 二级分类悬浮层（.np-top-flyout）边框：毛玻璃 / 液态玻璃下改为半透明描边， 与其它玻璃容器（卡片/页头/侧栏）的 rgba(255,255,255,.14) 描边一致，避免深色不透明硬边 */ html[data-material="glass"] .np-top-flyout, html[data-material="liquid"] .np-top-flyout { border-color: rgba(255, 255, 255, .38); } html[data-mode="dark"][data-material="glass"] .np-top-flyout, html[data-mode="dark"][data-material="liquid"] .np-top-flyout { border-color: rgba(255, 255, 255, .14); } /* ========================================================================= 5.5 固定组合全覆盖（需求4/5/11/12/13/14）：毛玻璃 / 液态玻璃在浅色与深色下， 卡片区域、卡片、页头、侧栏背景统一为材质半透明，并覆盖 JS 内联透明与暗色补丁。 内置组合下样式区禁止编辑，故这里直接用 !important 交还材质外观。 卡片背景已进一步调透明（需求：毛玻璃 / 液态玻璃更通透）。 ========================================================================= */ /* 材质通透度基线：区域（卡片区域/侧边栏/页头区块）= --np-area-a；卡片（卡片/页头按钮/搜索框/侧栏菜单 hover）= --np-card-a 毛玻璃与液态玻璃各自独立控制（--ws-material-glass-* / --ws-material-liquid-*，取值 0.01~0.5 步进 0.01，越小越通透） */ html[data-material="glass"] { --np-area-a: rgba(255, 255, 255, var(--ws-material-glass-area, .24)); --np-card-a: rgba(255, 255, 255, var(--ws-material-glass-card, .06)); } html[data-mode="dark"][data-material="glass"] { --np-area-a: rgba(18, 22, 30, var(--ws-material-glass-area, .22)); --np-card-a: rgba(18, 22, 30, var(--ws-material-glass-card, .12)); } html[data-material="liquid"] { --np-area-a: rgba(255, 255, 255, var(--ws-material-liquid-area, .14)); --np-card-a: rgba(255, 255, 255, var(--ws-material-liquid-card, .08)); } html[data-mode="dark"][data-material="liquid"] { --np-area-a: rgba(18, 22, 30, var(--ws-material-liquid-area, .16)); --np-card-a: rgba(18, 22, 30, var(--ws-material-liquid-card, .10)); } /* 区域背景统一：卡片区域 / 侧边栏 / 页头区块 = --np-area-a */ html[data-material="glass"] body .ws-section, html[data-material="liquid"] body .ws-section { background-color: var(--np-area-a) !important; } html[data-material="glass"] .user-info-navbar, html[data-material="liquid"] .user-info-navbar { background-color: var(--ws-header-bg, var(--np-area-a)) !important; } html[data-material="glass"] .sidebar-menu.fixed, html[data-material="liquid"] .sidebar-menu.fixed { background-color: var(--np-area-a) !important; } /* 移动端搜索面板：背景与页头（.sidebar-menu.fixed）材质一致 */ html[data-material="glass"] .mobile-search-panel, html[data-material="liquid"] .mobile-search-panel { background-color: var(--np-area-a) !important; } html[data-material="glass"] .mobile-search-panel { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } html[data-material="liquid"] .mobile-search-panel { -webkit-backdrop-filter: blur(26px) saturate(165%); backdrop-filter: blur(26px) saturate(165%); } /* 移动端顶部操作按钮与桌面页头共用材质背景及通透度。 */ html[data-material="glass"] .mobile-menu-toggle > button, html[data-material="glass"] .mobile-menu-toggle #topLogoutBtn { -webkit-backdrop-filter: blur(var(--ws-header-btn-blur, 18px)); backdrop-filter: blur(var(--ws-header-btn-blur, 18px)); } html[data-material="liquid"] .mobile-menu-toggle > button, html[data-material="liquid"] .mobile-menu-toggle #topLogoutBtn { -webkit-backdrop-filter: blur(var(--ws-header-btn-blur, 26px)) saturate(165%); backdrop-filter: blur(var(--ws-header-btn-blur, 26px)) saturate(165%); } html[data-mode="dark"][data-material="glass"] .mobile-menu-toggle > button, html[data-mode="dark"][data-material="glass"] .mobile-menu-toggle #topLogoutBtn, html[data-mode="dark"][data-material="liquid"] .mobile-menu-toggle > button, html[data-mode="dark"][data-material="liquid"] .mobile-menu-toggle #topLogoutBtn { border-color: transparent !important; } /* 卡片 / 页头按钮 / 侧栏菜单 hover 背景 = --np-card-a */ html[data-material="glass"] body .box2, html[data-material="liquid"] body .box2 { background-color: var(--np-card-a) !important; } html[data-material="glass"] .nav-search input#wsSearchInput, html[data-material="glass"] .nav-search .ses-toggle, html[data-material="glass"] .style-toggle, html[data-material="glass"] .np-theme-toggle, html[data-material="glass"] .mobile-menu-toggle > button, html[data-material="glass"] .mobile-menu-toggle #topLogoutBtn, html[data-material="liquid"] .nav-search input#wsSearchInput, html[data-material="liquid"] .nav-search .ses-toggle, html[data-material="liquid"] .style-toggle, html[data-material="liquid"] .np-theme-toggle, html[data-material="liquid"] .mobile-menu-toggle > button, html[data-material="liquid"] .mobile-menu-toggle #topLogoutBtn { background-color: var(--ws-header-btn-bg, var(--np-card-a)) !important; } /* 搜索按钮（.ws-search-btn）保持主题色实心，并使用主题定义的对比文字色， 不随材质/页头按钮背景变量透明化；hover 保持主题色深一档 */ html[data-material="glass"] .nav-search .ws-search-btn, html[data-material="liquid"] .nav-search .ws-search-btn { background-color: var(--np-accent) !important; color: var(--np-on-accent) !important; box-shadow: var(--np-shadow-accent) !important; } html[data-material="glass"] .nav-search .ws-search-btn:hover, html[data-material="liquid"] .nav-search .ws-search-btn:hover { background-color: var(--np-accent-hover) !important; color: var(--np-on-accent) !important; } /* 霓虹绿的大面积实心按钮使用较暗的 hover 色，保留主题辨识度但避免直视刺眼。 */ html[data-theme="wenxi"] .nav-search .ws-search-btn, html[data-theme="wenxi"] .mobile-search-inner button#mobileSearchGo, html[data-theme="wenxi"] .ws-modal .btn-primary, html[data-theme="wenxi"] .style-panel .sp-action-btn.primary, html[data-theme="wenxi"] .admin-fab-main, html[data-theme="wenxi"] .admin-fab-menu #btnAddCat, html[data-theme="wenxi"] .search-count { background-color: var(--np-accent-hover) !important; border-color: var(--np-accent-hover) !important; box-shadow: 0 3px 10px rgba(var(--np-accent-rgb), .13) !important; } html[data-theme="wenxi"] .nav-search .ws-search-btn:hover, html[data-theme="wenxi"] .mobile-search-inner button#mobileSearchGo:hover, html[data-theme="wenxi"] .ws-modal .btn-primary:hover, html[data-theme="wenxi"] .style-panel .sp-action-btn.primary:hover, html[data-theme="wenxi"] .admin-fab-main:hover { filter: brightness(.90); } /* 页头按钮 hover 边框：所有材质（毛玻璃/液态玻璃 × 浅/深色）下 hover 边框统一为主题色， 覆盖材质基础边框（半透明描边），恢复 hover 高亮反馈 */ html[data-material="glass"] .nav-search .ses-toggle:hover, html[data-material="glass"] .style-toggle:hover, html[data-material="glass"] .np-theme-toggle:hover, html[data-material="liquid"] .nav-search .ses-toggle:hover, html[data-material="liquid"] .style-toggle:hover, html[data-material="liquid"] .np-theme-toggle:hover { border-color: var(--np-accent) !important; color: var(--np-accent) !important; } html[data-material="glass"] .sidebar-menu .main-menu > li > a:hover, html[data-material="glass"] .sidebar-menu .main-menu > li.has-sub > ul > li > a:hover, html[data-material="liquid"] .sidebar-menu .main-menu > li > a:hover, html[data-material="liquid"] .sidebar-menu .main-menu > li.has-sub > ul > li > a:hover { background-color: var(--np-card-a) !important; } /* 边框统一：卡片 = 搜索框 = 侧栏右边框；玻璃模式下卡片区域与页头也走同边框。 - 毛玻璃浅/深：卡片边框为中性色，搜索框边框与卡片一致（需求 A/C） - 液态浅色：卡片边框更通透（淡化白色），搜索框 + 侧栏右边框与其一致（需求 B） - 液态深色：卡片边框为柔白，搜索框 + 侧栏右边框与其一致；卡片区域边框降一半透明度（需求 D） */ html[data-material="glass"] body .ws-section, html[data-material="glass"] body .box2, html[data-material="glass"] .user-info-navbar, html[data-material="glass"] .sidebar-menu.fixed, html[data-material="glass"] .nav-search input#wsSearchInput { border-color: rgba(16, 24, 40, .10) !important; } html[data-mode="dark"][data-material="glass"] body .ws-section, html[data-mode="dark"][data-material="glass"] body .box2, html[data-mode="dark"][data-material="glass"] .user-info-navbar, html[data-mode="dark"][data-material="glass"] .sidebar-menu.fixed, html[data-mode="dark"][data-material="glass"] .nav-search input#wsSearchInput { border-color: rgba(255, 255, 255, .08) !important; } html[data-material="liquid"] body .box2, html[data-material="liquid"] .nav-search input#wsSearchInput, html[data-material="liquid"] .nav-search .ses-toggle, html[data-material="liquid"] .style-toggle, html[data-material="liquid"] .np-theme-toggle, html[data-material="liquid"] .user-info-navbar, html[data-material="liquid"] .sidebar-menu.fixed { border-color: rgba(0, 0, 0, 0.1) !important; } html[data-mode="dark"][data-material="liquid"] body .box2, html[data-mode="dark"][data-material="liquid"] .nav-search input#wsSearchInput, html[data-mode="dark"][data-material="liquid"] .user-info-navbar, html[data-mode="dark"][data-material="liquid"] .sidebar-menu.fixed { border-color: rgba(255, 255, 255, .1) !important; } /* 液态深色：卡片区域边框由不透明改为通透 */ html[data-mode="dark"][data-material="liquid"] body .ws-section { border-color: rgba(37, 44, 57, .1) !important; } /* 实心材质：内容区全部不透明（需求调整1/2：浅/深实心 = 所有透明度 100） */ html[data-material="solid"] body .ws-section { background-color: var(--np-section) !important; border-color: var(--np-border) !important; } html[data-material="solid"] body .box2 { background-color: var(--np-surface) !important; border-color: var(--np-border) !important; } html[data-material="solid"] .user-info-navbar { background-color: var(--np-surface) !important; } html[data-material="solid"] .sidebar-menu.fixed { background-color: var(--np-surface) !important; } /* 实心材质下页头悬浮窗（搜索引擎切换 / 导出 / 站内搜索下拉）跟随 surface 实色， 深色实心时避免 JS 内联的 --ws-header-flyout-bg（白色）导致悬浮窗错误地显示为浅色 */ html[data-material="solid"] .search-engine-switch .ses-menu, html[data-material="solid"] .export-menu, html[data-material="solid"] .nav-search .search-results { background-color: var(--np-surface) !important; border-color: var(--np-border) !important; } /* 卡片边框线颜色：用户在「样式调整-卡片」中设置后覆盖「卡片 + 搜索框」的材质固定边框色 */ html[data-material="glass"] body .box2, html[data-material="glass"] .nav-search input#wsSearchInput { border-color: var(--ws-card-border-color, rgba(16, 24, 40, .10)) !important; } html[data-mode="dark"][data-material="glass"] body .box2, html[data-mode="dark"][data-material="glass"] .nav-search input#wsSearchInput { border-color: var(--ws-card-border-color, rgba(255, 255, 255, .08)) !important; } html[data-material="liquid"] body .box2, html[data-material="liquid"] .nav-search input#wsSearchInput, html[data-material="liquid"] .nav-search .ses-toggle, html[data-material="liquid"] .style-toggle, html[data-material="liquid"] .np-theme-toggle { border-color: var(--ws-card-border-color, rgba(0, 0, 0, .1)) !important; } html[data-mode="dark"][data-material="liquid"] body .box2, html[data-mode="dark"][data-material="liquid"] .nav-search input#wsSearchInput { border-color: var(--ws-card-border-color, rgba(255, 255, 255, .1)) !important; } html[data-material="solid"] body .box2, html[data-material="solid"] .nav-search input#wsSearchInput { border-color: var(--ws-card-border-color, var(--np-border)) !important; } /* 卡片 hover 边框线：液态玻璃的 .box2 带 inset 内高光 box-shadow（特异性高于 .box2:hover）， 会把主题色 hover 边框线（--ws-card-hover-boxshadow = 0 0 0 Npx 主题色）压掉； 这里用更高特异性 + !important 在 hover 时恢复主题色边框线，保证 6 种组合下卡片 hover 反馈一致 */ html[data-material="liquid"] .box2:hover { box-shadow: var(--ws-card-hover-boxshadow, 0 0 0 1px var(--np-accent)) !important; -webkit-box-shadow: var(--ws-card-hover-boxshadow, 0 0 0 1px var(--np-accent)) !important; } html[data-mode="dark"][data-material="liquid"] .box2:hover { box-shadow: var(--ws-card-hover-boxshadow, 0 0 0 1px var(--np-accent)) !important; -webkit-box-shadow: var(--ws-card-hover-boxshadow, 0 0 0 1px var(--np-accent)) !important; } /* 弹窗/可调面板保持实心：毛玻璃/液态只在内容区生效，弹窗太透明影响阅读（需求2.4）； 面板内部区域（.style-block / .np-tp-group）不随材质改底色，与实心状态一致（外观弹窗需求修复） */ html[data-material="glass"] .ws-modal .modal-content, html[data-material="glass"] .style-panel, html[data-material="glass"] .np-theme-panel, html[data-material="liquid"] .ws-modal .modal-content, html[data-material="liquid"] .style-panel, html[data-material="liquid"] .np-theme-panel { background-color: var(--np-surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ========================================================================= 6. 主题 / 外观切换面板（.np-theme-panel） ========================================================================= */ .np-theme-panel { display: none; position: absolute; right: -120px; top: 100%; margin-top: 25px; z-index: 1071; width: 400px; max-width: calc(100vw - 24px); max-height: 80vh; overflow-y: auto; padding: 16px; background: var(--np-surface); border: 1px solid var(--np-border); border-radius: var(--np-r-lg); box-shadow: var(--np-shadow-lg); color: var(--np-text); } .np-theme-panel.open { display: block; } .np-theme-li { position: relative; display: inline-flex; align-items: center; list-style: none; min-height: 0 !important; } .np-tp-title { font-size: 14px; font-weight: 700; color: var(--np-text); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; } .np-tp-title i { color: var(--np-accent); } .np-tp-group { margin-bottom: 16px; } .np-tp-group:last-child { margin-bottom: 0; } .np-tp-label { font-size: 12px; font-weight: 600; color: var(--np-text-2); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .np-tp-label .np-tp-val { color: var(--np-accent); font-weight: 500; } /* 材质通透度面板：带底色的分组容器 + 毛玻璃 / 液态玻璃两个分区（0.01 步进，最大 .5，越小越通透） */ .np-tune { background: var(--np-surface-3); border: 1px solid var(--np-border); border-radius: var(--np-r-md); padding: 10px 12px 12px; } .np-tune-sec { margin-top: 10px; } .np-tune-sec:first-child { margin-top: 10px; } .np-tune-sec .np-tune-title { font-size: 12px; font-weight: 700; color: var(--np-accent); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .np-tune-sec .np-tune-title i { font-size: 12px; } .np-tune-sec .np-tune-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--np-text-2); margin: 8px 2px 6px; } .np-tune-sec .np-tune-row .np-tune-tip { display: block; font-size: 11px; color: var(--np-text-3); font-weight: 400; } .np-tune-sec .np-tune-val { font-size: 12px; font-weight: 600; color: var(--np-accent); flex: 0 0 auto; } .np-material-range { width: 100%; height: 16px; margin: 2px 0 4px; padding: 0; -webkit-appearance: none; appearance: none; background: transparent; outline: none; cursor: pointer; } .np-material-range::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--np-accent), var(--np-border-strong)); } .np-material-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: 2px solid var(--np-accent); box-shadow: var(--np-shadow-xs); cursor: pointer; } .np-material-range::-moz-range-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--np-accent), var(--np-border-strong)); } .np-material-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--np-accent); cursor: pointer; } /* 分段控件 */ .np-seg { display: flex; gap: 6px; background: var(--np-surface-2); padding: 4px; border-radius: var(--np-r-md); } /* 主题启用时：外观弹窗「模式」锁定为跟随（材质锁定为自定义由 JS 选中） */ .np-theme-panel.np-theme-locked .np-seg[data-seg="mode"] button { pointer-events: none; opacity: .55; cursor: not-allowed; } .np-theme-panel.np-theme-locked .np-seg[data-seg="mode"] button.active { opacity: 1; } .np-theme-panel.np-theme-locked::after { content: '已启用样式主题：材质=自定义，模式=跟随'; display: block; margin-top: 10px; font-size: 12px; color: var(--np-text-3); } .np-seg button { flex: 1 1 0; min-width: 0; padding: 8px 6px; border: none; background: transparent; cursor: pointer; font-size: 13px; color: var(--np-text-2); border-radius: calc(var(--np-r-md) - 2px); display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: all var(--np-t-fast); } .np-seg button:hover { color: var(--np-text); } .np-seg button.active { background: var(--np-surface); color: var(--np-accent); font-weight: 600; box-shadow: var(--np-shadow-sm); } /* 主题色板 */ .np-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 10px; } .np-swatch { position: relative; width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; cursor: pointer; border: 2px solid transparent; padding: 0; display: block; transition: transform var(--np-t-fast), box-shadow var(--np-t-fast); outline: none; } .np-swatch:hover { transform: scale(1.12); } .np-swatch.active { border-color: var(--np-text); box-shadow: 0 0 0 2px var(--np-surface), 0 0 0 3px currentColor; } .np-swatch.active::after { content: '\2713'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.35); } /* 深色模式：选中主题色按钮保持纯色，不加蒙版 / 滤镜 / 透明度，仅用描边高亮 */ html[data-mode="dark"] .np-swatch.active { box-shadow: 0 0 0 2px var(--np-surface), 0 0 0 3px var(--np-text-2); } html[data-mode="dark"] .np-swatch.active::after { display: none; } html[data-mode="dark"] .np-swatch-custom::before { color: rgba(0,0,0,.6); text-shadow: none; } /* 自定义主题色块：拾色器输入铺满整圆，点击即弹出取色 */ .np-swatch-custom { overflow: hidden; } .np-swatch-custom .np-custom-input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: 0; cursor: pointer; border: none; padding: 0; margin: 0; } .np-swatch-custom::before { content: '+'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.95); font-size: 16px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.4); pointer-events: none; } .np-tp-foot { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--np-border); display: flex; justify-content: space-between; align-items: center; } .np-tp-foot .np-tp-reset { font-size: 12px; color: var(--np-text-3); background: none; border: 1px solid var(--np-border); border-radius: var(--np-r-pill); padding: 5px 12px; cursor: pointer; } .np-tp-foot .np-tp-reset:hover { color: var(--np-accent); border-color: var(--np-accent); } @media (max-width: 480px) { .np-swatches { grid-template-columns: repeat(5, 1fr); } } /* 移动端：面板 fixed 锚定屏幕，左右留白 8px 加宽避免文字换行 */ @media (max-width: 767px) { /* 外观弹窗文字排版：label 与 tune 行允许正常换行，避免窄屏挤压错位 */ .np-theme-panel .np-tp-label { flex-wrap: wrap; } .np-theme-panel .np-tp-label .np-tp-val { flex: 0 0 auto; } .np-theme-panel .np-tune-sec .np-tune-row { align-items: flex-start; flex-wrap: wrap; } .np-theme-panel .np-tune-sec .np-tune-row > span:first-child { flex: 1 1 auto; min-width: 0; } .np-theme-panel .np-tune-sec .np-tune-tip { white-space: normal; } /* 分段控件按钮：紧凑间距，文字不换行（液态玻璃等 4 字项保持单行） */ .np-theme-panel .np-seg { gap: 4px; } .np-theme-panel .np-seg button { font-size: 12px; padding: 7px 4px; gap: 3px; white-space: nowrap; } } /* ========================================================================= 7. 页头按钮 / 页头悬浮窗统一背景（放在末尾，确保优先于旧规则） --ws-header-btn-* 作用于搜索框 / 搜索引擎切换 / 样式调整 / 导入 / 导出 / 外观 --ws-header-flyout-* 作用于搜索引擎 hover 悬浮 / 导出悬浮 / 站内搜索下拉 ========================================================================= */ .nav-search input#wsSearchInput, .search-engine-switch .ses-toggle, .style-toggle, .np-theme-toggle { background-color: var(--ws-header-btn-bg, var(--np-surface-2)); -webkit-backdrop-filter: blur(var(--ws-header-btn-blur, 0px)); backdrop-filter: blur(var(--ws-header-btn-blur, 0px)); } .search-engine-switch .ses-menu, .export-menu, .nav-search .search-results { background-color: var(--ws-header-flyout-bg, var(--np-surface)); -webkit-backdrop-filter: blur(var(--ws-header-flyout-blur, 0px)); backdrop-filter: blur(var(--ws-header-flyout-blur, 0px)); } /* ========================================================================= 8. 内置材质固定文字配色（需求 6/8）：侧栏字体色 / 页头按钮文字色 在「实心 / 毛玻璃 / 液态玻璃」内置材质下不由样式调整控制， 按 模式×材质 六种组合使用固定颜色（!important 覆盖任何残留主题快照内联值）。 跟随模式因 data-mode 已解析为实际明暗，自动套用对应组合。 自定义材质（主题启用态）不匹配，仍由主题各自配置接管。 ========================================================================= */ html[data-material="solid"] { --ws-sidebar-font-color: #1b2330 !important; --ws-header-btn-color: #5a6577; } html[data-mode="dark"][data-material="solid"] { --ws-sidebar-font-color: #e7ebf3 !important; --ws-header-btn-color: #a3adbf; } html[data-material="glass"] { --ws-sidebar-font-color: #2a3446 !important; --ws-header-btn-color: #5d6b7e; } html[data-mode="dark"][data-material="glass"] { --ws-sidebar-font-color: #e9edf5 !important; --ws-header-btn-color: #a9b3c4; } html[data-material="liquid"] { --ws-sidebar-font-color: #202a38 !important; --ws-header-btn-color: #545f70; } html[data-mode="dark"][data-material="liquid"] { --ws-sidebar-font-color: #e5eaf2 !important; --ws-header-btn-color: #a0aabc; } /* ========================================================================= 9. 全局按钮：hover 主题色边框；字重跟随样式面板设置 resize 不占用布局：用 outline 呈现 1px 边框，颜色跟随当前主题色 --np-accent ========================================================================= */ .page-body button, .page-body .btn, .page-body input[type="button"], .page-body input[type="submit"] { font-weight: var(--ws-font-weight, 400); } .page-body button:not(.style-toggle):not(.np-theme-toggle):not(.ses-toggle):not(.ws-search-btn):hover, .page-body .btn:not(.style-toggle):not(.np-theme-toggle):not(.ses-toggle):not(.ws-search-btn):hover, .page-body input[type="button"]:hover, .page-body input[type="submit"]:hover { /* outline: 1px solid var(--np-accent) !important; */ outline-offset: 0; font-weight: var(--ws-font-weight, 400); } /* ========================================================================= 10. 侧边栏 Logo 高度上限（需求5）：所有 Logo 图片最高 50px ========================================================================= */ .sidebar-menu .logo-env .logo img { max-height: 50px; height: auto; width: auto; } /* 11. 侧栏一/二级菜单 hover：字体与图标变为主题色（覆盖暗色强制色） */ .sidebar-menu .main-menu > li > a:hover, .sidebar-menu .main-menu > li > a:hover i, .sidebar-menu .main-menu > li > a:hover .title, .sidebar-menu .main-menu > li.has-sub > ul > li > a:hover, .sidebar-menu .main-menu > li.has-sub > ul > li > a:hover i, .sidebar-menu .main-menu > li.has-sub > ul > li > a:hover .title { color: var(--np-accent) !important; } /* 顶栏 hover 下箭头一并收色（已在 top > after:hover 中独立设置，此处保证交叉覆盖） */ html[data-layout="top"] .sidebar-menu .main-menu > li.has-sub > a:hover:after { color: var(--np-accent) !important; opacity: 1; } /* 12. 移动端悬浮布局：减小主内容区与侧栏间距，避免顶部过空 */ @media (max-width: 768px) { html[data-layout="float"] .main-content { padding-top: 0; } html[data-layout="float"] .user-info-navbar { margin-top: 4px; } } /* 13. 移动端侧栏按钮 hover/active：覆盖 Xenon 主题的 #fff（浅色模式白底白字不可见） */ .page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle a:hover, .page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle a:active, .page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle a:focus, .page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle button:hover, .page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle button:active, .page-container .sidebar-menu .sidebar-menu-inner .logo-env .mobile-menu-toggle button:focus { color: var(--np-accent); } /* ========================================================================= 14. 基础样式作用范围：页头、卡片、页脚跟随样式面板的字号/字重 规则放在最后，覆盖主题 CSS 中页头按钮和卡片名称的固定字号。 ========================================================================= */ .nav-user-name strong, html[data-density="compact"] .site-card .nav-user-name strong { font-family: var(--ws-font); font-size: var(--ws-font-size, 14px); font-weight: var(--ws-font-weight, 400); } .user-info-navbar, html .nav-search, html .nav-search input#wsSearchInput, html .nav-search .ws-search-btn, html .search-engine-switch .ses-toggle, html .search-engine-switch .ses-menu button, html .style-toggle, html .np-theme-toggle, html .search-count { font-family: var(--ws-font); font-size: var(--ws-font-size, 14px); font-weight: var(--ws-font-weight, 400); } /* 15. 搜索输入框文字颜色跟随页头按钮文字色，避免被早期基础色规则覆盖 */ html .nav-search input#wsSearchInput, html .nav-search input#wsSearchInput::placeholder { color: var(--ws-header-btn-color, var(--np-text)); } html .nav-search input#wsSearchInput::placeholder { opacity: .7; } /* 16. 侧栏二级菜单：长名称不换行（单行省略号），hover 箭头贴行尾且不与文字重叠 */ /* 原规则箭头固定在 right: calc(14px + 2em)（距右缘约 40~54px），长分类名会延伸到箭头下方造成重叠； 改为：箭头贴近右缘 10px，标题用省略号收缩并预留箭头空间。仅桌面侧栏/浮窗布局生效。 */ @media (min-width: 769px) { html[data-layout="side"] .sidebar-menu .main-menu > li.has-sub > ul > li > a, html[data-layout="float"] .sidebar-menu .main-menu > li.has-sub > ul > li > a { padding-right: 26px; /* 为行尾 hover 箭头预留空间（箭头位于 right:10px） */ } html[data-layout="side"] .sidebar-menu .main-menu > li.has-sub > ul > li > a .title, html[data-layout="float"] .sidebar-menu .main-menu > li.has-sub > ul > li > a .title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* 长名称单行省略，不再换行 */ } html[data-layout="side"] .sidebar-menu .main-menu > li.has-sub > ul > li > a:after, html[data-layout="float"] .sidebar-menu .main-menu > li.has-sub > ul > li > a:after { right: 10px; /* 覆盖原 calc(14px + 2em)：贴近行尾，落在 padding 预留区内 */ } }