@charset "utf-8"; /* ============================================================================ NibiPay Theme Layer — nibipay-theme.css (v3 · 只改配色，不改几何) ---------------------------------------------------------------------------- 作用域机制（唯一入口）： -> default，本文件美化规则 0 生效 -> 白天版（柔和现代浅色） -> 夜晚版（navy 系深色）保险丝：删掉视图里的即完全回到改造前状态。 ★ v3 关键新增（相对 v2）★ a) **主色拆成「文字色 / 填充色」两个 token**： --np-primary = 文字 / 图标 / 选中态（夜晚版是亮蓝 #60a5fa） --np-primary-fill = 填充底色（夜晚版仍是 #2563eb，配白字 5.17:1）凡「有色填充 + 其上文字」必须用 -fill 系列，否则夜晚版会出现亮蓝底白字。 b) **深色靠「边框 + 表面层级」表达层次，不靠阴影**： html.np-night 的 --np-shadow-1/2/side 直接定义为 none，所有 `box-shadow: var(--np-shadow-N) !important` 自动变为 none。 c) **主题 key 与向后兼容**：对外 key / CSS 类名 = default | day | night； localStorage('np-theme') 仍写 legacy 值 light/dark —— 因为 `_Layoutm.cshtml` / `Login/Index.cshtml` 的首屏内联脚本（本层不可修改）只认 light/dark。存 legacy 值可让 191 个内容页在 JS 执行前就拿到正确主题类，零闪烁。同理保留 `html.np-light` / `html.np-dark` 两个等价选择器：内联脚本先加 np-light/np-dark，nibipay-theme.js 随后改写为 np-day/np-night，两者渲染结果逐像素相同。 ★ v2 铁律（用户实测反馈后的硬约束）★ 1) **本层只改配色**：height / line-height / min-height / padding / margin / font-size / zoom 一律不得覆盖，几何全部沿用 layui 原值。唯一例外：border-radius、font-variant-numeric、box-shadow、颜色类属性。项目里的 `html{zoom:.85}`（Home/Index.cshtml 行内）三套主题共用， v1 的 `html.np-themed{zoom:1}` 已删除。 2) **渐变必须用 `background-image:none` + `background-color` 双写**：项目 layui.css 是 Material UI 皮肤，`.layui-btn` 用 `background:` 简写设 `linear-gradient(...)`，只写 background-color 会被渐变图片盖住。 3) **色板对齐项目既有 MUI 皮肤**（layui.css 实测高频色： #1976d2 / #4caf50 / #f44336 / #ff9800 / #115293+#4791db）。不再使用 v1 自造的 #1668dc / #12a85c / #e5484d / #d98613 / #3c89e8 / #60a5fa。 4) **按填充色分派文字色**：深填充（蓝/红/绿/青）配白字，亮填充（橙黄）配深字；深色主题是「亮填充」，故 primary/danger 等填充按钮在深色下配深字（MUI 惯例）。 5) **任何要生效的 box-shadow 必须带 `!important`**： wwwroot/css/site.css 第 1-3 行是 `*{box-shadow:none!important}`。 6) :root 兜底区块的原有令牌值一字未改，default 主题在业务页/数据页 0 生效。 ========================================================================== */ /* =========================================================================== 0. 设计令牌（Design Tokens） =========================================================================== */ /* 0.1 兜底 / default（原站品牌色，值一律不动；变量声明本身零视觉影响） */ :root, html.np-default { --np-primary: #2288c8; --np-primary-hover: #2d97d8; --np-primary-active: #1b6fa5; --np-primary-weak: #e6f2fb; --np-primary-border: #b8dcf3; --np-bg-page: #eef1f6; --np-bg-card: #ffffff; --np-bg-elevated: #ffffff; --np-bg-sunken: #f7f9fc; --np-border: #e3e8ef; --np-border-strong: #cbd5e1; --np-text-1: #1a2233; --np-text-2: #4a5568; --np-text-3: #8a94a6; --np-text-invert: #ffffff; --np-header-bg: #ffffff; --np-header-text: #1a2233; --np-header-border: #e3e8ef; --np-side-bg: #151b2b; --np-side-bg-2: #1b2334; --np-side-text: #a8b2c4; --np-side-text-active: #ffffff; --np-success: #12a85c; --np-success-weak: #e6f7ee; --np-success-hover: #0f9450; --np-danger: #e5484d; --np-danger-weak: #fdecec; --np-danger-hover: #d93a3f; --np-warning: #d98613; --np-warning-weak: #fdf4e3; --np-warning-hover: #c4780f; --np-info: #1668dc; --np-info-weak: #e8f1ff; --np-table-head-bg: #f7f9fc; --np-table-row-alt: #fbfcfe; --np-table-hover: #eaf2ff; --np-table-total-bg: #fff8e6; --np-table-border: #eef1f6; --np-radius-sm: 4px; --np-radius: 8px; --np-radius-lg: 12px; --np-shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10); --np-shadow-2: 0 4px 16px rgba(16, 24, 40, .10); --np-shadow-side: 2px 0 8px rgba(16, 24, 40, .06); --np-fixed-shadow: rgba(16, 24, 40, .18); /* 新增（v2）：按填充色分派的「其上文字色」+ 填充专用色 */ --np-on-primary: #ffffff; --np-on-danger: #ffffff; --np-on-success: #ffffff; --np-on-normal: #ffffff; --np-on-warning: #1a2233; --np-normal-fill: #2f8ae0; --np-normal-hover: #2680d4; --np-warning-fill: #d98613; --np-switch-thumb: #ffffff; --np-switch-thumb-on: #ffffff; --np-login-hero: linear-gradient(221deg, #1565c0 20%, #3f3580 90%); /* --- v3 新增令牌：default 分支的值一律取自原站既有色，保证 default 视觉 0 变化 --- （变量声明本身零视觉影响；使用它们的新规则全部作用域在 .np-themed / html.np-* 之下） */ --np-primary-fill: #2288c8; --np-primary-fill-hover: #2d97d8; --np-primary-fill-active: #1b6fa5; --np-input-bg: #ffffff; --np-input-border: #e3e8ef; --np-warning-fill-hover: #e08a1e; --np-active-item-text: #1b6fa5; } /* 0.2 白天版 · 柔和现代浅色（原 light 重做） --------------------------------------------------------------------------- 设计口径：shadcn/ui light + Tailwind slate 中性阶，低对比、柔和过渡、保留原站蓝色主调。要点： · 页面底不用纯白（#f6f8fb 柔和蓝灰），卡片才用纯白 → 有层级但不刺眼 · 边框比 v2 的 #e3e8ef 更柔（#e6ebf2），强边框 #d3dbe6 · 主色 #2563eb（白字 5.17:1）；浅底 #eff4ff；边框 #c7d7fe · 三级文字 spec 建议 #7c8798 实测对白底仅 3.64:1 不达标 → 定稿 #667085 （白底 4.97 / 页面底 4.68 / 下沉面 4.54 / 悬停面 4.51，全 ≥4.5） · danger 由 spec 的 #dc2626 压深到 #b91c1c：白字 6.47:1、浅底上 5.91:1 （#dc2626 在浅底 #fef2f2 上只有 4.41:1，不满足 §5.9） · info 由 spec 的 #0284c7 压深到 #0369a1（白底 5.93:1；#0284c7 仅 4.10:1） */ html.np-day, html.np-light { --np-primary: #2563eb; --np-primary-hover: #1d4ed8; --np-primary-active: #1e40af; --np-primary-weak: #eff4ff; --np-primary-border: #c7d7fe; --np-primary-fill: #2563eb; --np-primary-fill-hover: #1d4ed8; --np-primary-fill-active: #1e40af; --np-bg-page: #f6f8fb; --np-bg-card: #ffffff; --np-bg-elevated: #ffffff; --np-bg-sunken: #f1f5f9; --np-input-bg: #ffffff; --np-input-border: #e6ebf2; --np-border: #e6ebf2; --np-border-strong: #d3dbe6; --np-text-1: #1e293b; --np-text-2: #475569; --np-text-3: #667085; --np-text-invert: #ffffff; --np-header-bg: #ffffff; --np-header-text: #1e293b; --np-header-border: #e6ebf2; --np-side-bg: #131c31; --np-side-bg-2: #1b2740; --np-side-text: #a8b6cc; --np-side-text-active: #ffffff; /* 语义色「双向」达标：既做浅底上的文字，又做承载文字的填充 */ --np-success: #047857; --np-success-weak: #ecfdf5; --np-success-hover: #065f46; --np-danger: #b91c1c; --np-danger-weak: #fef2f2; --np-danger-hover: #991b1b; /* warning 走 MUI 惯例：填充用亮琥珀 #f59e0b 配深字（6.81:1）；仅作文字时用压深的琥珀 #b45309（白底 5.02:1 / 浅底 4.84:1） */ --np-warning: #b45309; --np-warning-weak: #fffbeb; --np-warning-hover: #92400e; --np-warning-fill-hover: #fbbf24; --np-info: #0369a1; --np-info-weak: #eff6ff; /* 填充专用色（与上面的「文字语义色」分离） */ --np-warning-fill: #f59e0b; --np-on-warning: #1e293b; --np-normal-fill: #0f766e; --np-normal-hover: #115e59; --np-on-primary: #ffffff; --np-on-danger: #ffffff; --np-on-success: #ffffff; --np-on-normal: #ffffff; /* 关闭态滑块圆点：轨道是 #f1f5f9，白点只有 1.08:1（非文本 UI 需 3:1）。按 Material 3 的做法用中灰圆点（对轨道 4.54:1），开启态仍是白点压绿底。 */ --np-switch-thumb: #667085; --np-switch-thumb-on: #ffffff; --np-table-head-bg: #f8fafc; --np-table-row-alt: #fafbfd; --np-table-hover: #eff4ff; --np-table-total-bg: #fffbf0; --np-table-border: #eef2f7; --np-radius-sm: 4px; --np-radius: 8px; --np-radius-lg: 12px; /* 浅色保留柔和阴影（用户明确说好看） */ --np-shadow-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06); --np-shadow-2: 0 8px 24px rgba(15, 23, 42, .08); --np-shadow-side: 2px 0 8px rgba(15, 23, 42, .06); --np-fixed-shadow: rgba(15, 23, 42, .16); --np-login-hero: linear-gradient(221deg, #1d4ed8 12%, #1e3a8a 92%); --np-active-item-text: #2563eb; } /* 0.3 夜晚版 · navy 系现代深色（原 dark 重做） --------------------------------------------------------------------------- 设计口径：slate/navy 系，不用纯黑（#0b1220 而非 #121212/#000），避免强对比。要点： · 立体感靠「表面层级 + 1px 边框」表达：--np-shadow-1/2/side 直接为 none · 正文用 slate-200 #e2e8f0（不用纯白），更耐看 · 主色分两用：--np-primary #60a5fa 作文字/图标/选中态； --np-primary-fill #2563eb 作填充并配白字（5.17:1） · 三级文字 spec 建议 #64748b 对卡片仅 3.66:1 不达标 → 定稿 #8595ab （卡片 5.71 / 抬升面 5.29 / 下沉面 5.98 / 合计行 5.05，全 ≥4.5） */ html.np-night, html.np-dark { /* 主色既作文字/图标，也作填充；填充时配白字（见 §4） */ --np-primary: #60a5fa; --np-primary-hover: #93c5fd; --np-primary-active: #3b82f6; --np-primary-weak: #16233a; --np-primary-border: #2a4368; --np-primary-fill: #2563eb; --np-primary-fill-hover: #1d4ed8; --np-primary-fill-active: #1e40af; --np-bg-page: #0b1220; --np-bg-card: #111a2b; --np-bg-elevated: #16203a; --np-bg-sunken: #0e1524; --np-input-bg: #0e1524; --np-input-border: #334155; --np-border: #1e293b; --np-border-strong: #334155; --np-text-1: #e2e8f0; --np-text-2: #94a3b8; --np-text-3: #8595ab; --np-text-invert: #0b1220; --np-header-bg: #111a2b; --np-header-text: #e2e8f0; --np-header-border: #1e293b; --np-side-bg: #0d1526; --np-side-bg-2: #16203a; --np-side-text: #a8b6cc; --np-side-text-active: #ffffff; --np-success: #34d399; --np-success-weak: #0d2b23; --np-success-hover: #6ee7b7; --np-danger: #f87171; --np-danger-weak: #2a1518; --np-danger-hover: #fca5a5; --np-warning: #fbbf24; --np-warning-weak: #2a2418; --np-warning-hover: #fcd34d; --np-warning-fill-hover: #fcd34d; --np-info: #38bdf8; --np-info-weak: #0e2434; --np-warning-fill: #fbbf24; --np-on-warning: #0b1220; --np-normal-fill: #2dd4bf; --np-normal-hover: #5eead4; /* 深色主题是「亮填充 + 深字」（MUI dark 标准做法）；唯一例外是主色填充：#2563eb 是深蓝，仍配白字 */ --np-on-primary: #ffffff; --np-on-danger: #0b1220; --np-on-success: #0b1220; --np-on-normal: #0b1220; --np-switch-thumb: #8595ab; --np-switch-thumb-on: #0b1220; /* 表头 / 斑马 / 悬停 / 合计：四层必须互不相同，且都不是白/浅灰 */ --np-table-head-bg: #16203a; --np-table-row-alt: #0f1728; --np-table-hover: #1c2740; --np-table-total-bg: #2a2418; --np-table-border: #1b2436; --np-radius-sm: 4px; --np-radius: 8px; --np-radius-lg: 12px; /* ★ 深色下取消装饰性阴影（深色面上叠黑阴影必然发闷）★ 置为 none 后，所有 `box-shadow: var(--np-shadow-N) !important` 自动变成 none，层次全部改由「1px 边框 + 表面层级差」表达。 */ --np-shadow-1: none; --np-shadow-2: none; --np-shadow-side: none; /* 冻结列分界必须「看得见」，这是唯一保留的阴影（8px 极窄投影） */ --np-fixed-shadow: rgba(0, 0, 0, .5); --np-login-hero: linear-gradient(221deg, #16233a 12%, #0b1220 92%); --np-active-item-text: #60a5fa; } /* =========================================================================== 1. 通用：页面底色 / 基础文字 / 滚动条 =========================================================================== */ .np-themed body { background-color: var(--np-bg-page); color: var(--np-text-1); } .np-themed ::-webkit-scrollbar { width: 9px; height: 9px; } .np-themed ::-webkit-scrollbar-track { background: transparent; } .np-themed ::-webkit-scrollbar-thumb { background: var(--np-border-strong); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; } .np-themed ::-webkit-scrollbar-thumb:hover { background: var(--np-text-3); background-clip: content-box; border: 2px solid transparent; } /* 1.1 default 主题零差异保护：新增装饰元素在未启用主题时必须不渲染 */ html:not(.np-themed) .np-user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; background-color: var(--np-primary-fill); color: var(--np-on-primary); font-size: 13px; font-weight: 600; vertical-align: middle; user-select: none; } /* =========================================================================== 2. 主框架：顶栏 / 侧栏 / 标签页 / 主题切换器 --------------------------------------------------------------------------- 注：v1 在此处写过的 36×36 圆形顶栏图标、38px 侧栏菜单项、二级菜单缩进等全部属于「几何覆盖」，v2 一律删除，恢复 layui / admin.css 原值。 =========================================================================== */ /* --- 2.1 顶栏 ------------------------------------------------------------- */ .np-themed .layui-layout-admin .layui-header { background-image: none !important; background-color: var(--np-header-bg) !important; border-bottom: 1px solid var(--np-header-border) !important; box-shadow: 0 1px 3px rgba(16, 24, 40, .07) !important; } /* 深色顶栏不用阴影，靠底边框分层（避免深色下发闷） */ html.np-night .layui-layout-admin .layui-header, html.np-dark .layui-layout-admin .layui-header { box-shadow: none !important; } .np-themed .layui-layout-admin .layui-header .layui-nav .layui-nav-item a, .np-themed .layui-layout-admin .layui-header .layui-nav .layui-nav-item a cite { color: var(--np-header-text) !important; opacity: 1; } .np-themed .layui-layout-admin .layui-header .layui-nav .layui-nav-item i { color: var(--np-header-text) !important; opacity: .9; } .np-themed .layui-layout-admin .layui-header .layui-nav .layui-nav-item a:hover, .np-themed .layui-layout-admin .layui-header .layui-nav > .layui-nav-item > a:hover { color: var(--np-primary) !important; background-color: var(--np-primary-weak) !important; } .np-themed .layui-layout-admin .layui-header .layui-nav .layui-nav-item a:hover i, .np-themed .layui-layout-admin .layui-header .layui-nav .layui-nav-item a:hover cite { color: var(--np-primary) !important; } /* 顶栏选中/悬停的下划线指示条：原样式是半透明白，在白底顶栏上不可见 */ .np-themed .layui-layout-admin .layui-header .layui-nav-bar { background-color: var(--np-primary) !important; } /* 顶栏下拉面板 */ .np-themed .layui-layout-admin .layui-header .layui-nav-child { border: 1px solid var(--np-border) !important; border-radius: var(--np-radius-sm); box-shadow: var(--np-shadow-2) !important; background-image: none !important; background-color: var(--np-bg-elevated) !important; color: var(--np-text-1); } .np-themed .layui-layout-admin .layui-header .layui-nav-child dd a { color: var(--np-text-1) !important; } .np-themed .layui-layout-admin .layui-header .layui-nav-child dd a:hover { background-color: var(--np-primary-weak) !important; color: var(--np-primary) !important; } /* 顶栏用户头像圆点（新增元素；default 下 display:none，保证零差异） */ .np-themed .layui-layout-admin .layui-header .layui-nav .np-user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; background-color: var(--np-primary-fill); color: var(--np-on-primary); font-size: 13px; font-weight: 600; vertical-align: middle; user-select: none; } /* --- 2.2 侧栏 ------------------------------------------------------------- */ .np-themed .layui-layout-admin .layui-side, .np-themed .layui-side-menu { background-image: none !important; background-color: var(--np-side-bg) !important; box-shadow: var(--np-shadow-side) !important; } .np-themed .layui-layout-admin .layui-logo { background-image: none !important; background-color: var(--np-side-bg-2) !important; border-bottom: 1px solid rgba(255, 255, 255, .06); color: var(--np-side-text-active); } /* 只改颜色：字重 / 字距一律不碰（行内样式给的值三套主题保持一致） */ .np-themed .layui-layout-admin .layui-logo .logo-text { color: var(--np-side-text-active); text-shadow: none; } .np-themed .layui-layout-admin .layui-logo .logo-underline { background-color: var(--np-primary); opacity: 1; } .np-themed .layui-layout-admin .layui-logo:hover .logo-text { transform: none; text-shadow: none; color: var(--np-side-text-active); } .np-themed .layui-layout-admin .layui-logo:hover .logo-text .logo-underline { background-color: var(--np-primary); width: 100%; opacity: 1; } /* 菜单整体 */ .np-themed .layui-side-menu .layui-nav { background-color: transparent; } /* 一级菜单：只改配色，不动高度 / 行高 / 内外边距（v1 的 38px 药丸与缩进已删） */ .np-themed .layui-side-menu .layui-nav-tree .layui-nav-item > a { color: var(--np-side-text); transition: background-color .15s, color .15s; } .np-themed .layui-side-menu .layui-nav-tree .layui-nav-item > a:hover { background-color: var(--np-side-bg-2) !important; background-image: none !important; color: var(--np-side-text-active); } .np-themed .layui-side-menu .layui-nav-tree .layui-nav-item > a .layui-icon { color: var(--np-side-text); transition: color .15s; } .np-themed .layui-side-menu .layui-nav-tree .layui-nav-item > a:hover .layui-icon { color: var(--np-side-text-active); } /* 展开态 / 选中态：深一档底色 + 左侧 3px 主色竖条 + 纯白文字（竖条是绝对定位的装饰伪元素，不参与布局，不改变任何既有元素几何） */ .np-themed .layui-side-menu .layui-nav-tree > .layui-nav-item.layui-this > a, .np-themed .layui-side-menu .layui-nav-tree > .layui-nav-item.layui-nav-itemed > a { background-color: var(--np-side-bg-2) !important; background-image: none !important; color: var(--np-side-text-active) !important; } .np-themed .layui-side-menu .layui-nav-tree > .layui-nav-item.layui-this > a .layui-icon, .np-themed .layui-side-menu .layui-nav-tree > .layui-nav-item.layui-nav-itemed > a .layui-icon { color: var(--np-primary) !important; } .np-themed .layui-side-menu .layui-nav-tree > .layui-nav-item.layui-this > a::before, .np-themed .layui-side-menu .layui-nav-tree > .layui-nav-item.layui-nav-itemed > a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 0 3px 3px 0; background-color: var(--np-primary); } /* layui 自带的滑动条改为主色 */ .np-themed .layui-side .layui-nav-tree .layui-nav-bar { background-color: var(--np-primary) !important; } /* 二级菜单：干掉 layui.css:3207 的紫色渐变 `linear-gradient(225deg,#5C45A0,#453478)!important` */ .np-themed .layui-side-menu .layui-nav-tree .layui-nav-itemed > .layui-nav-child, .np-themed .layui-nav-itemed > .layui-nav-child { background-image: none !important; background-color: var(--np-side-bg) !important; } .np-themed .layui-side-menu .layui-nav-tree .layui-nav-child a { color: var(--np-side-text); transition: background-color .15s, color .15s; } .np-themed .layui-side-menu .layui-nav-tree .layui-nav-child a:hover { background-color: var(--np-side-bg-2) !important; color: var(--np-side-text-active); } /* 二级菜单选中行整体用主色：layui.css 给 dd 设了 `#6573c3 !important`，只改里面的 a 会在行尾露出紫色底（两种蓝并排）。用 --np-primary-fill（不是 --np-primary）：夜晚版 --np-primary 是亮蓝 #60a5fa，配 --np-on-primary 白字只有 1.9:1。 */ .np-themed .layui-side-menu .layui-nav-tree .layui-nav-child dd.layui-this, .np-themed .layui-side-menu .layui-nav-tree .layui-nav-child dd.layui-this a { background-color: var(--np-primary-fill) !important; color: var(--np-on-primary) !important; } /* --- 2.3 页面标签页 tabs --------------------------------------------------- 视图里有行内样式 `#LAY_app_tabs{ background:linear-gradient(...)!important }`，必须用 #LAY_app_tabs 提权重 + !important 才能压过；admin.css:227 的 `.layadmin-pagetabs .layui-tab-title li.layui-this{ background:linear-gradient( 45deg,#ff5722,#ea3b04)!important }` 同理由下面第 4 条规则压掉。 */ .np-themed .layadmin-pagetabs, .np-themed #LAY_app_tabs, .np-themed div#LAY_app_tabs { background-image: none !important; background-color: var(--np-bg-card) !important; border-bottom: 1px solid var(--np-border) !important; box-shadow: none !important; } .np-themed .layadmin-pagetabs .layui-tab-title li { color: var(--np-text-2); transition: background-color .15s, color .15s; } .np-themed .layadmin-pagetabs .layui-tab-title li:hover { background-color: var(--np-bg-sunken) !important; color: var(--np-text-1); } .np-themed .layadmin-pagetabs .layui-tab-title li.layui-this { background-image: none !important; background-color: var(--np-bg-card) !important; color: var(--np-primary) !important; border-bottom: 2px solid var(--np-primary) !important; } .np-themed .layadmin-pagetabs .layui-tab-title li::after, .np-themed .layadmin-pagetabs .layui-tab-title li:hover::after, .np-themed .layadmin-pagetabs .layui-tab-title li.layui-this::after { background-color: var(--np-primary) !important; } .np-themed .layadmin-pagetabs .layui-tab-title li .layui-tab-close { color: var(--np-text-3); } .np-themed .layadmin-pagetabs .layui-tab-title li .layui-tab-close:hover { background-color: var(--np-danger) !important; color: var(--np-on-danger); } .np-themed .layadmin-pagetabs .layadmin-tabs-control { color: var(--np-text-2); border-left-color: var(--np-border); } .np-themed .layadmin-pagetabs .layadmin-tabs-control:hover { background-color: var(--np-bg-sunken); color: var(--np-primary); } .np-themed .layadmin-pagetabs .layui-icon-prev { border-right-color: var(--np-border); } .np-themed .layadmin-tabs-select.layui-nav .layui-nav-item a { color: var(--np-text-2); } .np-themed .layadmin-tabs-select.layui-nav .layui-nav-child { background-color: var(--np-bg-elevated); border: 1px solid var(--np-border); border-radius: var(--np-radius-sm); box-shadow: var(--np-shadow-2) !important; } .np-themed .layadmin-tabs-select.layui-nav .layui-nav-child dd.layui-this, .np-themed .layadmin-tabs-select.layui-nav .layui-nav-child dd.layui-this a { background-color: var(--np-primary-weak) !important; color: var(--np-primary) !important; } /* --- 2.4 主体内容区 ------------------------------------------------------- */ .np-themed .layui-body, .np-themed .layadmin-iframe { background-color: var(--np-bg-page); } .np-themed .layadmin-body-shade { background-color: rgba(10, 14, 22, .45); } /* --- 2.5 主题切换器 ------------------------------------------------------- 新增组件（.np-theme-* 均为本层自有类名），其基础样式在所有主题下都需可用，否则 default 主题下没有入口可切到白天版/夜晚版。 ⚠️ 本小节的规则**故意不加 `.np-themed` 前缀**：default 主题下无 np-themed 类，若加前缀则切换器在 default 下失去样式（勾选态会退回深黑）。【#9a 间距】规格 §3 #9(a) 要求「给 .np-theme-switch 加 margin-right: 10px （或给相邻项加 margin-left）」。实测主框架顶栏 .layui-layout-right 内

按 DOM 顺序自左向右排布，切换器 DOM 在前 → 它在左、相邻的「系统积分」图标在右，故间隔必须加在**右侧**（margin-right），加在左侧只会把整组右移、两

仍贴合。实测（1600×1000，html zoom .85）：margin-left 版 gap=0px → margin-right 版 gap=10px。见 §13 报告。 */ .layui-layout-admin .layui-header .layui-nav .np-theme-switch { margin-right: 10px; } .np-theme-item { cursor: pointer; } .np-theme-item .np-theme-dot { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; border: 1px solid rgba(120, 130, 145, .55); vertical-align: -1px; } /* 圆点用「实色」而不是渐变：渐变会污染深色主题的漏白扫描，也无必要 */ .np-theme-item .np-theme-dot-default { background-color: #2288c8; } .np-theme-item .np-theme-dot-day { background-color: #2563eb; } .np-theme-item .np-theme-dot-night { background-color: #0b1220; } /* 兼容 v2 的旧类名（.np-theme-dot-light / -dark），改名后旧标记也能正确显色 */ .np-theme-item .np-theme-dot-light { background-color: #2563eb; } .np-theme-item .np-theme-dot-dark { background-color: #0b1220; } /* 【#9b】勾选态必须压过 Home/Index.cshtml 行内 hack `.layui-layout-admin .layui-header .layui-nav .layui-nav-item i{color:#0b1220!important}` 该 hack 权重 (0,4,1)+!important；v2 的 `.np-theme-item .np-theme-check` 只有 (0,2,0) 且无 !important → 被压过，勾图标在任何主题下都是近黑色。注意还有第二道竞品：本文件 §2.2 的 `.np-themed ... .layui-nav-item i{color:var(--np-header-text)!important}` 权重 (0,5,1)+!important，同样会压过 (0,5,0)。故这里补一条带 `.np-themed` 前缀的 (0,6,0) 变体：default 下由前一条 (0,5,0) 生效（此时第二道竞品因 `.np-themed` 前缀不存在而不参与），day/night 下由后一条 (0,6,0) 生效。两条都把勾图标固定为主题强调色 --np-active-item-text。 */ .layui-layout-admin .layui-header .layui-nav .np-theme-item .np-theme-check, .np-themed .layui-layout-admin .layui-header .layui-nav .np-theme-item .np-theme-check { color: var(--np-active-item-text) !important; opacity: 1; } .np-theme-item .np-theme-check { float: right; margin-left: 12px; visibility: hidden; } /* 当前主题做成「一眼可辨」：主色浅底圆角块 + 主色文字 + 主色勾 */ .layui-layout-admin .layui-header .layui-nav .np-theme-item.is-active, .layui-layout-admin .layui-header .layui-nav .np-theme-item.is-active > a { background-color: var(--np-primary-weak) !important; background-image: none !important; color: var(--np-active-item-text) !important; font-weight: 600; } .np-theme-item.is-active .np-theme-check { visibility: visible; } .np-theme-item.is-active { color: var(--np-active-item-text) !important; font-weight: 600; } /* =========================================================================== 3. 内容页：卡片 / 搜索条 / 表单 --------------------------------------------------------------------------- v1 在这里改过 card-header 高 46px、card-body padding、form-item margin、 input 高 34px 等——v2 全部删除，几何回归 layui 原值。 =========================================================================== */ .np-themed .layui-card { background-color: var(--np-bg-card); border: 1px solid var(--np-border); border-radius: var(--np-radius); box-shadow: var(--np-shadow-1) !important; } .np-themed .layui-card-header { color: var(--np-text-1); background-color: var(--np-bg-card); border-bottom: 1px solid var(--np-border); } .np-themed .layui-card-header::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 16px; border-radius: 0 3px 3px 0; background-color: var(--np-primary); } .np-themed .layui-form-label { color: var(--np-text-2); } .np-themed .layui-form-item .layui-form-checkbox[lay-skin=primary] span, .np-themed .layui-form-item .layui-form-radio > div { color: var(--np-text-1); } /* 输入控件：只改配色 / 边框色 / 圆角（圆角不影响布局） */ .np-themed .layui-input, .np-themed .layui-select, .np-themed .layui-textarea { border-radius: var(--np-radius-sm); border-color: var(--np-input-border); background-color: var(--np-input-bg); color: var(--np-text-1); } /* 【#1 用户原话：登录页三个输入框「有个阴影效果非常难看」】真正的根因不是登录卡片阴影，而是 layui.css:1551 `.layui-input, .layui-select, .layui-textarea { box-shadow: 0 1px 25px 0px #eee }` —— 一层 25px 扩散的**浅灰光晕**。业务页因为 site.css 第 1-3 行的 `*{box-shadow:none!important}` 把它吃掉了，但登录页不加载 site.css，于是在深色面上出现一圈发白的晕 → 极难看。处理：夜晚版彻底关掉（改用 --np-input-border 的 1px 边框表达字段边界）；白天版按用户意见**保留**这层柔和阴影。 */ html.np-night .layui-input, html.np-night .layui-select, html.np-night .layui-textarea { box-shadow: none !important; } .np-themed .layui-input:hover, .np-themed .layui-textarea:hover { border-color: var(--np-primary-hover) !important; } .np-themed .layui-input:focus, .np-themed .layui-textarea:focus { border-color: var(--np-primary) !important; box-shadow: 0 0 0 3px var(--np-primary-weak) !important; background-color: var(--np-input-bg); } .np-themed .layui-input::placeholder, .np-themed .layui-textarea::placeholder { color: var(--np-text-3); opacity: 1; } .np-themed .layui-input[disabled], .np-themed .layui-input.layui-disabled { background-color: var(--np-bg-sunken) !important; color: var(--np-text-3) !important; border-color: var(--np-border) !important; } /* 下拉面板 */ .np-themed .layui-form-select dl { border-radius: var(--np-radius-sm); border-color: var(--np-border); box-shadow: var(--np-shadow-2) !important; background-color: var(--np-bg-elevated); } .np-themed .layui-form-select dl dd, .np-themed .layui-form-select dl dt { color: var(--np-text-1); } .np-themed .layui-form-select dl dd:hover { background-color: var(--np-primary-weak); } .np-themed .layui-form-select dl dd.layui-this { background-color: var(--np-primary-fill); color: var(--np-on-primary); } .np-themed .layui-form-select .layui-edge { border-top-color: var(--np-text-3); } /* 表单分隔与说明文字 */ .np-themed hr { border-color: var(--np-border); } .np-themed .layui-elem-quote { border-left-color: var(--np-primary); background-color: var(--np-bg-sunken); color: var(--np-text-2); border-radius: 0 var(--np-radius-sm) var(--np-radius-sm) 0; } .np-themed .layui-text { color: var(--np-text-2); } /* =========================================================================== 4. 按钮 —— 先统一 background-image:none 清掉 MUI 粉橙渐变，再按角色给实色 --------------------------------------------------------------------------- 项目 `.layui-btn` 是 `background: linear-gradient(45deg,#FE6B8B,#FF8E53)`，只覆盖 background-color 无效（渐变图片层在上）。因此本节**一律双写**。 v1 在这里改过 height:34px / line-height:34px / padding / font-size，v2 全删。 =========================================================================== */ .np-themed .layui-btn, .np-themed .layui-btn:hover, .np-themed .layui-btn:active, .np-themed .layui-btn-primary, .np-themed .layui-btn-primary:hover, .np-themed .layui-btn-primary:active, .np-themed .layui-btn-normal, .np-themed .layui-btn-normal:hover, .np-themed .layui-btn-normal:active, .np-themed .layui-btn-warm, .np-themed .layui-btn-warm:hover, .np-themed .layui-btn-warm:active, .np-themed .layui-btn-danger, .np-themed .layui-btn-danger:hover, .np-themed .layui-btn-danger:active, .np-themed .layui-btn-checked, .np-themed .layui-btn-checked:hover, .np-themed .layui-btn-checked:active, .np-themed .layui-btn-disabled, .np-themed .layui-btn-disabled:hover, .np-themed .layui-btn-disabled:active, .np-themed .layui-btn-radius { background-image: none !important; box-shadow: none !important; } .np-themed .layui-btn, .np-themed .layui-btn-sm, .np-themed .layui-btn-xs, .np-themed .layui-btn-lg { border-radius: var(--np-radius-sm); transition: background-color .15s, border-color .15s, color .15s; } /* 主按钮：三套主题都是「深蓝填充 + 白字」（5.17:1）。注意：--np-primary 在夜晚版是**亮蓝 #60a5fa（只作文字/图标）**，填充必须用 --np-primary-fill，否则夜晚版会变成亮蓝底白字（1.9:1，不可读）。另：layui.css 给 .layui-btn-normal/-warm/-danger/-checked/-primary 全部加了 `background-color: xxx !important`，只提选择器权重压不住，必须同样带 !important。 */ .np-themed .layui-btn { background-color: var(--np-primary-fill) !important; color: var(--np-on-primary); } .np-themed .layui-btn:hover { background-color: var(--np-primary-fill-hover) !important; color: var(--np-on-primary); } .np-themed .layui-btn:active { background-color: var(--np-primary-fill-active) !important; color: var(--np-on-primary); } /* 第二蓝（Material Teal，与主蓝区分；浅色 #0f766e 压白字 5.47:1） */ .np-themed .layui-btn-normal { background-color: var(--np-normal-fill) !important; color: var(--np-on-normal); } .np-themed .layui-btn-normal:hover { background-color: var(--np-normal-hover) !important; color: var(--np-on-normal); } .np-themed .layui-btn-normal:active { background-color: var(--np-normal-hover) !important; color: var(--np-on-normal); } /* warm：填充用亮琥珀，其上文字用深色（MUI 对 warning 的官方惯例）。 hover/active 只能往**更亮**走：v2 用的 --np-warning-hover 是压深琥珀（浅色 #7a4d00 / 深色 #ffcc80 之外），配 --np-on-warning 的深字会「深底深字」不可读。 */ .np-themed .layui-btn-warm { background-color: var(--np-warning-fill) !important; color: var(--np-on-warning); } .np-themed .layui-btn-warm:hover { background-color: var(--np-warning-fill-hover) !important; color: var(--np-on-warning); } .np-themed .layui-btn-warm:active { background-color: var(--np-warning-fill-hover) !important; color: var(--np-on-warning); } .np-themed .layui-btn-danger { background-color: var(--np-danger) !important; color: var(--np-on-danger); } .np-themed .layui-btn-danger:hover { background-color: var(--np-danger-hover) !important; color: var(--np-on-danger); } .np-themed .layui-btn-danger:active { background-color: var(--np-danger-hover) !important; color: var(--np-on-danger); } .np-themed .layui-btn-checked { background-color: var(--np-success) !important; color: var(--np-on-success); } .np-themed .layui-btn-checked:hover { background-color: var(--np-success-hover) !important; color: var(--np-on-success); } .np-themed .layui-btn-checked:active { background-color: var(--np-success-hover) !important; color: var(--np-on-success); } /* 次要按钮：浅底 + 描边（原 MUI 皮肤把它做成了第二个蓝渐变按钮）。描边用 inset box-shadow 而不是 border —— border 会改变按钮外框尺寸，而 box-shadow 不参与布局，几何与 layui 原值完全一致。 */ .np-themed .layui-btn-primary { background-color: var(--np-bg-card) !important; color: var(--np-text-2); box-shadow: inset 0 0 0 1px var(--np-border) !important; } .np-themed .layui-btn-primary:hover { background-color: var(--np-primary-weak) !important; color: var(--np-primary); box-shadow: inset 0 0 0 1px var(--np-primary) !important; } .np-themed .layui-btn-primary:active { background-color: var(--np-primary-weak) !important; color: var(--np-primary-active); box-shadow: inset 0 0 0 1px var(--np-primary-active) !important; } /* 禁用态：底用 --np-border、字用 --np-text-2。文字色取 text-2 而不是 text-3，是为了让「底 + 字」也满足 4.5:1 （浅色 #475569 on #e6ebf2 = 6.01:1、夜晚 #94a3b8 on #1e293b = 6.19:1），这样连 WCAG 1.4.3 的 disabled 豁免都不需要动用。 */ .np-themed .layui-btn-disabled, .np-themed .layui-btn.layui-btn-disabled, .np-themed .layui-btn.layui-disabled { background-color: var(--np-border) !important; color: var(--np-text-2) !important; border-color: var(--np-border) !important; opacity: 1; } /* =========================================================================== 5. 表格（layui table） --------------------------------------------------------------------------- 深色「黑白相间」的根因：layui.css 硬编码 `.layui-table { background-color:#fff }` `.layui-table ... thead tr, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr { background-color:#FAFAFA }` v1 只覆盖了外层容器与 th，没覆盖内层 table / thead tr → 奇数行露白。 =========================================================================== */ /* 5.1 容器：圆角 + 边框 + 阴影（只改 border-color，宽度沿用 layui） */ .np-themed .layui-table-view { background-color: var(--np-bg-card); border-color: var(--np-border); border-radius: var(--np-radius); overflow: hidden; box-shadow: var(--np-shadow-1) !important; } /* 5.2 干掉内层 table / thead tr 的硬编码白底 ⚠️ 注意：**不能**把 .layui-table-fixed 一起透明化（v2 就是这么做的，直接导致用户实测 #2「左右 fixed 的列背景被弄成透明了，漏出背后的数据」）。 .layui-table-fixed 是 `position:absolute; z-index:101` 的**覆盖层**，它必须是实底，否则主表数据会从它背后透出来。 */ .np-themed .layui-table, .np-themed .layui-table-box, .np-themed .layui-table-body { background-color: transparent; } /* 【#2 修复】冻结列实底 + 与主表逐层同色 */ .np-themed .layui-table-fixed { background-color: var(--np-bg-card); } .np-themed .layui-table-fixed .layui-table-body tbody tr:nth-child(even) { background-color: var(--np-table-row-alt); } .np-themed .layui-table-fixed .layui-table-body tbody tr:hover, .np-themed .layui-table-fixed .layui-table-hover { background-color: var(--np-table-hover) !important; } /* layui.css:2320 给 .layui-table-fixed-r 设了 `border-width:0 0 0 1px` 且 border-color:#eee —— 深色下就是一条刺眼亮线，必须跟着主题走。 */ .np-themed .layui-table-fixed-r { border-left-color: var(--np-table-border); } .np-themed .layui-table thead tr { background-color: transparent; } .np-themed .layui-table-header, .np-themed .layui-table-header th { background-image: none !important; background-color: var(--np-table-head-bg) !important; border-bottom-color: var(--np-border) !important; } .np-themed .layui-table-header th { color: var(--np-text-2); } /* layui 给这几个类设了 #FAFAFA；mend/patch 是列宽补丁，跟随表头底色即可 */ .np-themed .layui-table-mend, .np-themed .layui-table-patch { background-color: var(--np-table-head-bg); } .np-themed .layui-table-header .layui-table-cell .layui-table-sort .layui-edge { border-top-color: var(--np-text-3); } /* 5.3 单元格：只改文字色与等宽数字，尺寸一律不碰（v1 的 38px/13px/8px 已删） */ .np-themed .layui-table td, .np-themed .layui-table th { border-color: var(--np-table-border) !important; } .np-themed .layui-table-cell { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--np-text-1); } .np-themed .layui-table-link { color: var(--np-primary); } .np-themed .layui-table-cell .layui-form-checkbox[lay-skin=primary] i { border-color: var(--np-border-strong); } /* 5.4 斑马纹 / hover / 列宽补丁 */ .np-themed .layui-table[lay-even] > tbody > tr:nth-child(even), .np-themed .layui-table-body tbody tr:nth-child(even) { background-color: var(--np-table-row-alt); } .np-themed .layui-table-body tbody tr:hover, .np-themed .layui-table-click, .np-themed .layui-table-hover { background-color: var(--np-table-hover) !important; } /* 5.5 合计行：必须与数据行一眼可辨 */ .np-themed .layui-table-total, .np-themed .layui-table-total tr { background-image: none !important; background-color: var(--np-table-total-bg) !important; border-top: 2px solid var(--np-primary) !important; } .np-themed .layui-table-total .layui-table-cell { color: var(--np-text-1); } /* 5.6 冻结列分界：**必须带 !important**，否则被 site.css 的 `*{box-shadow:none!important}` 吃掉（v1 就是这么失效的） */ .np-themed .layui-table-fixed-r .layui-table-body { box-shadow: -6px 0 8px -6px var(--np-fixed-shadow) !important; } .np-themed .layui-table-fixed-l .layui-table-body { box-shadow: 6px 0 8px -6px var(--np-fixed-shadow) !important; } /* 5.7 工具条 / 分页 / 空数据 */ .np-themed .layui-table-tool { background-image: none !important; background-color: var(--np-bg-card) !important; border-bottom: 1px solid var(--np-table-border) !important; color: var(--np-text-2); } /* 【#8 用户原话：深色时表格头部右方那几个小按钮里的图标仍是暗色，看不清楚】表头右方小按钮的结构是 .layui-table-tool > .layui-table-tool-self > .layui-inline[lay-event] > i.layui-icon v2 只设了 `.layui-table-tool` 的 color，**没有显式覆盖 .layui-icon 自身的色**，被 admin/layui 里的深色值吃掉。这里显式覆盖并带 !important。 */ .np-themed .layui-table-tool-self .layui-icon, .np-themed .layui-table-tool .layui-icon, .np-themed .layui-table-tool-temp .layui-icon { color: var(--np-text-2) !important; } .np-themed .layui-table-tool-self .layui-inline[lay-event]:hover .layui-icon, .np-themed .layui-table-tool .layui-inline[lay-event]:hover .layui-icon { color: var(--np-primary) !important; } /* layui.css:2442 `.layui-table-tool .layui-inline[lay-event]:hover{border:1px solid #999}` —— 深色下是灰白硬框，改成主色柔框 */ .np-themed .layui-table-tool .layui-inline[lay-event]:hover { border-color: var(--np-primary) !important; } /* 【#3 用户原话：表格下端的线很难看，一点也不柔和】硬线的来源（layui.css:2320 的 border-color:#eee 组）： .layui-table-view 四边 1px #eee .layui-table-tool border-width:0 0 1px → 下边 1px #eee .layui-table-page border-width:1px 0 0 → 上边 1px #eee .layui-table-total border-width:1px 0 0 → 上边 1px #eee 其中 .layui-table-page / .layui-table-total 都带 `margin-bottom:-1px`，所以「合计行上边线 + 分页区上边线」会与相邻边框贴在一起，视觉上是两道硬线。处理：全部换成 --np-table-border（比 --np-border 更淡一档的专用表格分隔色），并且**只保留分页区的上边线**，去掉分页区与 view 底边之间的叠加。 */ .np-themed .layui-table-page { background-color: var(--np-bg-card); border-top-color: var(--np-table-border); box-shadow: none !important; } /* 合计行与分页区交界：合计行下边不再单独画线（分页区的上边线已经是分界） */ .np-themed .layui-table-total { border-bottom-color: transparent !important; } .np-themed .layui-table-tool, .np-themed .layui-table-view, .np-themed .layui-table-header, .np-themed .layui-table-page { border-color: var(--np-table-border); } .np-themed .layui-table-view { border-color: var(--np-border); } .np-themed .layui-table-tool-panel { background-color: var(--np-bg-elevated); border: 1px solid var(--np-border); border-radius: var(--np-radius-sm); box-shadow: var(--np-shadow-2) !important; } .np-themed .layui-table-tool-panel li { color: var(--np-text-1); } .np-themed .layui-table-tool-panel li:hover { background-color: var(--np-primary-weak) !important; } .np-themed .layui-table-grid-down { border-color: var(--np-table-border); color: var(--np-text-3); } .np-themed .layui-table-grid-down:hover { background-color: var(--np-primary-weak); color: var(--np-primary); } .np-themed .layui-table-tips-main { background-color: var(--np-bg-elevated); border-color: var(--np-border); border-radius: var(--np-radius-sm); color: var(--np-text-1); } .np-themed .layui-table-body .layui-none { color: var(--np-text-3); } /* =========================================================================== 6. 金额 / 数值 —— 只统一形状，不强制覆盖内联语义色 --------------------------------------------------------------------------- GetMoneyFmtColor(n,c1,c2) 输出内联 background-color（业务语义色，如 #845EC2）。 v2 删掉了 v1 在这里写的 margin/padding/width/min-height/line-height 覆盖（那会改变行高），只保留对齐、圆角、等宽数字。 =========================================================================== */ .np-themed .money-number, .np-themed .float-number { text-align: right; border-radius: var(--np-radius-sm); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* 数值语义工具类（供后续页面统一使用） */ .np-themed .np-num-pos { color: var(--np-success) !important; font-weight: 600; } .np-themed .np-num-neg { color: var(--np-danger) !important; font-weight: 600; } .np-themed .np-num-zero { color: var(--np-text-3) !important; } /* =========================================================================== 7. 分页 / 标签 / 徽标 / 开关 / 弹层 =========================================================================== */ /* 7.1 独立分页（v1 在此改过 margin-right:4px，属几何，已删） */ .np-themed .layui-laypage a, .np-themed .layui-laypage span { border-radius: var(--np-radius-sm); border-color: var(--np-border); color: var(--np-text-2); background-color: var(--np-bg-card); } .np-themed .layui-laypage a:hover { color: var(--np-primary); border-color: var(--np-primary); } .np-themed .layui-laypage .layui-laypage-curr .layui-laypage-em { background-image: none !important; background-color: var(--np-primary-fill) !important; border-radius: var(--np-radius-sm); } .np-themed .layui-laypage .layui-laypage-curr em { color: var(--np-on-primary); } .np-themed .layui-laypage input, .np-themed .layui-laypage button, .np-themed .layui-laypage select { border-radius: var(--np-radius-sm) !important; border-color: var(--np-border) !important; background-color: var(--np-bg-card); color: var(--np-text-1); } .np-themed .layui-laypage .layui-laypage-skip { color: var(--np-text-2); } /* 7.2 标签页 / 面包屑 */ .np-themed .layui-tab-brief > .layui-tab-title .layui-this { color: var(--np-primary); } .np-themed .layui-tab-brief > .layui-tab-title .layui-this::after { border-bottom-color: var(--np-primary); } .np-themed .layui-tab-title { border-bottom-color: var(--np-border); } /* 【2026-09-20 用户反馈：深色下页面内 tab 选中项看不清】来源：admin.css 给「页面内普通 tab」的选中项设了两条互相打架的规则 —— a) `.layui-tab-title li.layui-this{ background:linear-gradient(45deg,#ff5722 30%,#ea3b04 90%)!important; color:#f2f2f2; border-bottom:2px solid #ea3b04 }` → 橙红渐变底，**带 !important**（v3 §7.2 只覆盖了文字色，没覆盖这个背景） b) `.layui-tab-brief .layui-tab-title li.layui-this{ color:#333 }` 结果：§7.2 的 --np-primary 文字色（深色主题下 #60a5fa 亮蓝）压在橙红渐变底上 ≈1.5:1，实测「选中的 tab label 看不清」。这里显式干掉渐变，改用主题表面色 + 主色文字。 ⚠️ 顶部页签栏（.layadmin-pagetabs）由 §2.3 单独处理，其权重 (0,4,0) 高于本规则 (0,3,1)，不受影响。 ⚠️ 带 .np-themed 前缀，default 主题 0 生效。 */ .np-themed .layui-tab-title li.layui-this { background-image: none !important; background-color: var(--np-bg-card); color: var(--np-primary) !important; border-bottom-color: var(--np-primary); } .np-themed .layui-breadcrumb a { color: var(--np-text-2); } /* 7.3 徽标：只清渐变 + 统一圆角，并把「无类型」徽标的底色对齐 MUI error 色（浅色 #d32f2f 配白字 4.98:1、深色 #ef5350 配深字 5.37:1，均 AA；带 .layui-bg-* 的语义徽标由 layui 的 `!important` 优先，页面语义色不受影响） */ .np-themed .layui-badge { background-image: none !important; background-color: var(--np-danger); color: var(--np-on-danger); border-radius: 10px; } .np-themed .layui-badge-rim { background-image: none !important; border-radius: 10px; border-color: var(--np-border); color: var(--np-text-2); background-color: var(--np-bg-sunken); } /* 7.4 开关 / 复选 / 单选 */ .np-themed .layui-form-switch { border-radius: 11px; background-color: var(--np-bg-sunken); border-color: var(--np-border-strong); color: var(--np-text-2); } /* 关闭态滑块：v1 漏了（实测 rgb(210,210,210) 亮块糊在深色上） */ .np-themed .layui-form-switch i { background-color: var(--np-switch-thumb); } /* 关闭态文案：layui.css:1889 是 `color:#999 !important`，浅色下仅 2.7:1 */ .np-themed .layui-form-switch em { color: var(--np-text-2) !important; } .np-themed .layui-form-onswitch { border-color: var(--np-success); background-image: none !important; background-color: var(--np-success); color: var(--np-on-success); } .np-themed .layui-form-onswitch i { background-color: var(--np-switch-thumb-on); } .np-themed .layui-form-onswitch em { color: var(--np-on-success) !important; } /* 未勾选的 primary 勾选框：layui.css:1830 是 #fff 底 → 深色下一块 18×18 白点 */ .np-themed .layui-form-checkbox[lay-skin=primary] i { background-color: var(--np-bg-sunken); border-color: var(--np-border-strong); border-radius: var(--np-radius-sm); } /* 勾选态：底色/文字用主色填充，边框必须带 !important（layui.css:1841 是 `#5FB878 !important`） */ .np-themed .layui-form-checked[lay-skin=primary] i { border-color: var(--np-primary) !important; background-color: var(--np-primary-fill); color: var(--np-on-primary); } .np-themed .layui-form-radio > i:hover, .np-themed .layui-form-radioed > i { color: var(--np-primary); } /* 单选：layui.css:1942 把「选中态容器 + 所有后代」都染成 #4caf50（浅色底仅 2.59:1）。这里纠正为「标签用正文色、只有图标用主色」——图标属非文本 UI，按 WCAG 1.4.11 只需 3:1（实测 4.3:1 达标）。 */ .np-themed .layui-form-radio, .np-themed .layui-form-radio *, .np-themed .layui-form-radio:hover *, .np-themed .layui-form-radioed { color: var(--np-text-1); } .np-themed .layui-form-radio > i, .np-themed .layui-form-radio:hover > i, .np-themed .layui-form-radioed > i { color: var(--np-primary); } /* 7.5 弹层（v1 在此改过 title/btn 高度，已删） */ .np-themed .layui-layer { border-radius: var(--np-radius); box-shadow: var(--np-shadow-2) !important; overflow: hidden; background-color: var(--np-bg-card); } .np-themed .layui-layer-title { background-color: var(--np-bg-sunken); border-bottom: 1px solid var(--np-border); color: var(--np-text-1); } .np-themed .layui-layer-content { color: var(--np-text-1); } .np-themed .layui-layer-btn { border-top: 1px solid var(--np-border); background-color: var(--np-bg-card); } .np-themed .layui-layer-btn a { border-radius: var(--np-radius-sm); } .np-themed .layui-layer-btn .layui-layer-btn0 { background-color: var(--np-primary-fill); border-color: var(--np-primary-fill); color: var(--np-on-primary); } .np-themed .layui-layer-btn .layui-layer-btn1 { background-color: var(--np-bg-card); border-color: var(--np-border); color: var(--np-text-2); } .np-themed .layui-layer-close1, .np-themed .layui-layer-setwin .layui-layer-close { color: var(--np-text-3); } .np-themed .layui-layer-tips .layui-layer-content { background-color: var(--np-bg-elevated); color: var(--np-text-1); } /* 7.6 下拉菜单 / 进度条 / 其他 */ .np-themed .layui-nav .layui-nav-child { background-color: var(--np-bg-elevated); } .np-themed .layui-nav .layui-nav-child a { color: var(--np-text-1); } .np-themed .layui-progress { background-color: var(--np-bg-sunken); } .np-themed .layui-progress-bar { background-color: var(--np-primary-fill); } /* =========================================================================== 8. 语义标签工具类（新增类，现有页面 0 引用，不影响既有 UI） =========================================================================== */ .np-themed .np-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; line-height: 18px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; } .np-themed .np-tag-success { color: var(--np-success); background-color: var(--np-success-weak); border-color: var(--np-success); } .np-themed .np-tag-danger { color: var(--np-danger); background-color: var(--np-danger-weak); border-color: var(--np-danger); } .np-themed .np-tag-warning { color: var(--np-warning); background-color: var(--np-warning-weak); border-color: var(--np-warning); } .np-themed .np-tag-info { color: var(--np-info); background-color: var(--np-info-weak); border-color: var(--np-info); } .np-themed .np-tag-muted { color: var(--np-text-3); background-color: var(--np-bg-sunken); border-color: var(--np-border); } /* =========================================================================== 9. 登录页（全新 np-login-* 结构；html 始终带 .np-login-page） --------------------------------------------------------------------------- 登录页是 v1 新增结构（原站登录页已被整体替换，不存在「改造前像素」）。为了让三套主题下正文/按钮文字全部 ≥4.5:1，这里为登录页单独校准令牌。 =========================================================================== */ /* 9.0 登录页专属令牌校准作用域限定 `html.np-default.np-login-page` / `html.np-night.np-login-page`，业务页 / 数据页 0 影响。 */ html.np-default.np-login-page { /* 原品牌 #2288c8 压白字仅 3.86:1（按钮文字不达标），压深到 MUI #1976d2（4.61:1）。 v3 新增：填充令牌必须同步压深，否则登录按钮会退回 #2288c8。 */ --np-primary: #1976d2; --np-primary-hover: #1565c0; --np-primary-active: #0d47a1; --np-primary-weak: #e3f2fd; --np-primary-border: #90caf9; --np-primary-fill: #1976d2; --np-primary-fill-hover: #1565c0; --np-primary-fill-active: #0d47a1; --np-text-3: #667085; --np-active-item-text: #1b6fa5; /* hero 渐变最亮端压到 #1565c0（白字 5.81:1），保证横幅上的 13~14px 正文达标 */ --np-login-hero: linear-gradient(221deg, #1565c0 20%, #3f3580 90%); } html.np-night.np-login-page, html.np-dark.np-login-page { --np-login-hero: linear-gradient(221deg, #16233a 12%, #0b1220 92%); } html.np-login-page { height: 100%; margin: 0; background-color: var(--np-bg-page); } /* flex 纵向流式：.np-login 占满剩余高度，页脚贴底但不再 fixed，这样短窗口下不会出现「固定页脚压住内容 + body 出滚动条」的叠加问题 */ html.np-login-page body { display: flex; flex-direction: column; height: auto; min-height: 100vh; min-height: 100dvh; margin: 0; background-color: var(--np-bg-page); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow: visible; } .np-login { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0; } /* 9.1 左侧品牌 Hero */ .np-login-hero { position: relative; flex: 1 1 52%; display: flex; flex-direction: column; justify-content: center; padding: 48px 56px; color: #fff; background-image: var(--np-login-hero); overflow: hidden; } .np-login-hero::after { content: ""; position: absolute; right: -120px; bottom: -140px; width: 380px; height: 380px; border-radius: 50%; background-color: rgba(255, 255, 255, .06); pointer-events: none; } .np-login-hero-brand { display: flex; align-items: center; margin-bottom: 28px; } .np-login-hero-brand img { width: 52px; height: 52px; border-radius: 12px; margin-right: 14px; background-color: rgba(255, 255, 255, .12); } .np-login-hero-brand .np-login-brand-name { font-size: 24px; font-weight: 700; letter-spacing: .6px; line-height: 1.2; } /* 原 opacity:.72 → hero 最亮端只有 3.81:1；改用 .9 的实色（5.04:1） */ .np-login-hero-brand .np-login-brand-sub { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255, 255, 255, .9); } .np-login-hero h1 { margin: 0 0 12px; font-size: 30px; font-weight: 600; line-height: 1.35; letter-spacing: .5px; color: #fff; } .np-login-hero p.np-login-hero-desc { margin: 0 0 30px; max-width: 440px; font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, .9); } .np-login-points { list-style: none; margin: 0; padding: 0; max-width: 440px; } .np-login-points li { display: flex; align-items: flex-start; margin-bottom: 14px; font-size: 13.5px; line-height: 3; color: rgba(255, 255, 255, .9); } .np-login-points li i { flex: 0 0 auto; margin: 2px 10px 0 0; font-size: 15px; color: rgba(255, 255, 255, .9); line-height: 2; } /* 9.2 右侧表单卡片 */ .np-login-panel { flex: 1 1 48%; display: flex; align-items: center; justify-content: center; padding: 32px 24px 28px; background-color: var(--np-bg-page); } .np-login-card { width: 100%; max-width: 380px; padding: 32px 30px 24px; background-color: var(--np-bg-card); border: 1px solid var(--np-border); border-radius: var(--np-radius-lg); box-shadow: var(--np-shadow-2) !important; } .np-login-card-head { margin-bottom: 22px; text-align: center; } .np-login-card-head .np-login-logo { display: inline-block; width: 72px; height: 72px; margin-bottom: 12px; border-radius: 50%; box-shadow: var(--np-shadow-1) !important; } .np-login-card-head h2 { margin: 0 0 6px; font-size: 20px; font-weight: 600; color: var(--np-text-1); } .np-login-card-head p { margin: 0; font-size: 13px; color: var(--np-text-3); } .np-login-field { position: relative; margin-bottom: 16px; } .np-login-field > .layui-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 2; font-size: 15px; color: var(--np-text-3); pointer-events: none; transition: color .15s; } .np-login-field:focus-within > .layui-icon { color: var(--np-primary); } .np-login-field .np-login-input, .np-login-field .layui-input { width: 100%; height: 42px; line-height: 42px; padding: 0 12px 0 38px; box-sizing: border-box; border: 1px solid var(--np-input-border); border-radius: var(--np-radius-sm); background-color: var(--np-input-bg); color: var(--np-text-1); font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; } /* 【#1】登录页输入框必须显式处理 layui.css:1551 的 25px 浅灰光晕 `.layui-input,.layui-select,.layui-textarea{box-shadow:0 1px 25px 0px #eee}` 业务页有 site.css 的 `*{box-shadow:none!important}` 兜底，登录页**不加载** site.css，所以这层光晕只在登录页可见 —— 正是用户说的「深色下很难看」。处理：default / 白天版**原样保留**（用户明确说浅色下好看）；夜晚版置 none，改由 1px --np-input-border 表达字段边界。 */ .np-login-field .np-login-input { box-shadow: 0 1px 25px 0px #eee; } html.np-night .np-login-field .np-login-input { box-shadow: none !important; } .np-login-field .np-login-input::placeholder { color: var(--np-text-3); opacity: 1; } .np-login-field .np-login-input:hover { border-color: var(--np-primary-hover); } .np-login-field .np-login-input:focus { border-color: var(--np-primary); box-shadow: 0 0 0 3px var(--np-primary-weak) !important; } .np-login-submit { width: 100%; height: 42px; line-height: 42px; margin-top: 8px; padding: 0; box-sizing: border-box; border: none; border-radius: var(--np-radius-sm); background-color: var(--np-primary-fill); color: var(--np-on-primary); font-size: 15px; font-weight: 600; letter-spacing: 2px; cursor: pointer; transition: background-color .15s, opacity .15s; } .np-login-submit:hover { background-color: var(--np-primary-fill-hover); } .np-login-submit:active { background-color: var(--np-primary-fill-active); } .np-login-submit.layui-btn-disabled, .np-login-submit[disabled] { background-color: var(--np-border) !important; color: var(--np-text-2) !important; cursor: not-allowed; } /* layui-form 会插入的提示/校验元素不改变布局 */ .np-login-card .layui-form-item { margin: 0; } .np-login-card .layui-input-block { margin-left: 0; min-height: 0; } /* 9.3 页脚 + 主题切换 */ .np-login-footer { position: static; margin-top: auto; width: 100%; padding: 8px 0 12px; text-align: center; font-size: 12px; line-height: 20px; color: var(--np-text-3) !important; } .np-login-footer p { margin: 0; } .np-login-theme { position: fixed; right: 18px; bottom: 16px; z-index: 20; display: flex; align-items: center; padding: 5px 10px; background-color: var(--np-bg-card); border: 1px solid var(--np-border); border-radius: 18px; box-shadow: var(--np-shadow-1) !important; font-size: 12px; } .np-login-theme > .layui-icon { margin-right: 8px; font-size: 15px; color: var(--np-text-3); } .np-login-theme button { margin: 0 2px; padding: 3px 10px; border: 1px solid transparent; border-radius: 12px; background-color: transparent; color: var(--np-text-2); font-size: 12px; line-height: 18px; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; } .np-login-theme button:hover { background-color: var(--np-bg-sunken); color: var(--np-text-1); } .np-login-theme button.is-active { background-color: var(--np-primary-weak); border-color: var(--np-primary-border); /* 用 --np-active-item-text 而不是 --np-primary： default 登录页的 --np-primary(#1976d2) 压 --np-primary-weak(#e3f2fd) 只有 4.0:1 */ color: var(--np-active-item-text); font-weight: 600; } /* 9.4 窄屏：堆叠为居中卡片，Hero 退化为顶部横幅 */ @media screen and (max-width: 900px) { .np-login { flex-direction: column; } .np-login-hero { flex: 0 0 auto; padding: 28px 24px 26px; } .np-login-hero-brand { margin-bottom: 16px; } .np-login-hero h1 { font-size: 21px; margin-bottom: 8px; } .np-login-hero p.np-login-hero-desc { margin-bottom: 0; font-size: 13px; line-height: 1.7; } .np-login-points { display: none; } .np-login-panel { flex: 1 1 auto; align-items: flex-start; padding: 20px 18px 20px; } .np-login-card { padding: 24px 20px 18px; } .np-login-footer { padding: 6px 0 58px; } .np-login-theme { right: 12px; bottom: 12px; } } /* 9.5 短窗口自适应：逐级收缩 hero 的 padding 与字号，**不允许出现滚动条** 实测基线（修复前）：1280×640 视口 545 → scrollHeight 554（溢出 9px） 1024×560 视口 465 → scrollHeight 554（溢出 89px） */ @media screen and (max-height: 800px) { .np-login-hero { padding: 34px 44px; } .np-login-hero-brand { margin-bottom: 18px; } .np-login-hero-brand img { width: 46px; height: 46px; margin-right: 12px; } .np-login-hero-brand .np-login-brand-name { font-size: 20px; } .np-login-hero h1 { font-size: 25px; margin-bottom: 8px; } .np-login-hero p.np-login-hero-desc { margin-bottom: 18px; font-size: 13px; line-height: 1.7; } .np-login-points li { margin-bottom: 8px; font-size: 13px; } .np-login-panel { padding: 22px 24px 18px; } .np-login-card { padding: 24px 26px 18px; } .np-login-card-head { margin-bottom: 16px; } .np-login-field { margin-bottom: 13px; } } @media screen and (max-height: 700px) { .np-login-hero { padding: 22px 36px; } .np-login-hero-brand { margin-bottom: 12px; } .np-login-hero-brand img { width: 40px; height: 40px; margin-right: 10px; } .np-login-hero-brand .np-login-brand-name { font-size: 18px; } .np-login-hero h1 { font-size: 21px; margin-bottom: 6px; } .np-login-hero p.np-login-hero-desc { margin-bottom: 12px; font-size: 12.5px; line-height: 1.65; } .np-login-points li { margin-bottom: 6px; font-size: 12.5px; } .np-login-points li i { font-size: 13px; } .np-login-panel { padding: 14px 24px 12px; } .np-login-card { max-width: 360px; padding: 20px 22px 14px; } .np-login-card-head { margin-bottom: 12px; } .np-login-card-head .np-login-logo { width: 54px; height: 54px; margin-bottom: 8px; } .np-login-card-head h2 { font-size: 17px; } .np-login-card-head p { font-size: 12px; } .np-login-field { margin-bottom: 10px; } .np-login-field .np-login-input, .np-login-field .layui-input { height: 38px; line-height: 38px; } .np-login-submit { height: 38px; line-height: 38px; margin-top: 6px; font-size: 14px; } .np-login-footer { padding: 4px 0 8px; font-size: 11px; line-height: 16px; } } @media screen and (max-height: 600px) { .np-login-hero { padding: 16px 32px; } .np-login-hero p.np-login-hero-desc { margin-bottom: 0; } /* 短窗口优先保证表单完整可见，卖点列表让位 */ .np-login-points { display: none; } .np-login-panel { padding: 10px 20px 8px; } .np-login-card { padding: 16px 20px 12px; } .np-login-card-head { margin-bottom: 10px; } .np-login-card-head .np-login-logo { width: 46px; height: 46px; margin-bottom: 6px; } .np-login-card-head h2 { font-size: 16px; margin-bottom: 4px; } .np-login-field { margin-bottom: 8px; } .np-login-field .np-login-input, .np-login-field .layui-input { height: 36px; line-height: 36px; } .np-login-submit { height: 36px; line-height: 36px; } } /* =========================================================================== 10. 「亮填充 + 深字」的补充修正 --------------------------------------------------------------------------- v3 起，令牌已把「填充色 / 其上文字色」按主题完整配对（--np-*-fill + --np-on-*），夜晚版的主色文字是亮蓝 #60a5fa、主色填充是 #2563eb+白字，两者不再混用。因此 v2 那一整块 `html.np-dark ... { color: var(--np-primary-hover) !important }` 的「提亮补丁」已全部撤销 —— 它会把 --np-primary 的语义从「文字色」漂移到「提亮后的文字色」，反而让 #9b 的勾选态在 default 主题下失效。保留下面这一条：夜晚版下拉项悬停时，文字用比正文更亮的蓝，保证选中可辨。 */ html.np-night .layui-layout-admin .layui-header .layui-nav-child dd a:hover, html.np-dark .layui-layout-admin .layui-header .layui-nav-child dd a:hover { color: var(--np-primary) !important; } /* =========================================================================== 11. 延展组件补齐（v2.1 · QA 渲染级复核发现的未覆盖区） --------------------------------------------------------------------------- 以下组件 v2.0 未覆盖，实测问题： .layui-colla-title dark 底仍是 layui 的 #FAFAFA（整块浅色面） .layui-colla-content 文字 #666 on #242424 = 2.7:1 .layui-tab-card 选中页签 #fff 底 + #fff 字 = 1:1（不可见） .layui-bg-* 白字压 #4caf50=2.78 / #ff9800=2.16 / #f44336=3.68 .layui-bg-gray dark 下 #FAFAFA 浅色面 .layui-bg-white admin.css 里是 #fff，dark 下不可见 .layui-elem-field 等边框 layui.css:1231 统一 #f2f2f2，dark 下是刺眼亮边 .layui-panel 未覆盖，dark 下白底 .layui-text a #1976d2 on #1e1e1e = 3.5:1 =========================================================================== */ /* --- 11.1 折叠面板 --- */ .np-themed .layui-collapse, .np-themed .layui-colla-item, .np-themed .layui-colla-content, .np-themed .layui-colla-title { border-color: var(--np-border); } .np-themed .layui-colla-title { background-image: none !important; background-color: var(--np-bg-elevated); color: var(--np-text-1); } .np-themed .layui-colla-content { background-color: var(--np-bg-card); color: var(--np-text-2); } /* --- 11.2 卡片式选项卡（layui-tab-card） --- */ .np-themed .layui-tab-card { background-color: var(--np-bg-card); border-color: var(--np-border); box-shadow: var(--np-shadow-1) !important; } .np-themed .layui-tab-card > .layui-tab-title { background-color: var(--np-bg-sunken); border-bottom-color: var(--np-border); } .np-themed .layui-tab-card > .layui-tab-title li { color: var(--np-text-2); } .np-themed .layui-tab-card > .layui-tab-title li:hover { color: var(--np-primary); } /* 选中页签：底色用卡片色 + 深/亮正文色，避免 #fff 底 #fff 字 */ .np-themed .layui-tab-card > .layui-tab-title .layui-this { background-color: var(--np-bg-card); color: var(--np-text-1); } .np-themed .layui-tab-card > .layui-tab-title .layui-this::after { border-bottom-color: var(--np-bg-card); } .np-themed .layui-tab-card > .layui-tab-more .layui-this { background-color: transparent; color: var(--np-primary); } .np-themed .layui-tab-card > .layui-tab-title .layui-tab-bar { border-color: var(--np-border); } /* --- 11.3 layui 语义背景类（按主题语义色 + 配对文字色重排） --- */ .np-themed .layui-bg-red { background-color: var(--np-danger) !important; color: var(--np-on-danger) !important; } .np-themed .layui-bg-orange { background-color: var(--np-warning-fill) !important; color: var(--np-on-warning) !important; } .np-themed .layui-bg-green { background-color: var(--np-success) !important; color: var(--np-on-success) !important; } .np-themed .layui-bg-blue { background-color: var(--np-primary-fill) !important; color: var(--np-on-primary) !important; } /* layui 的 cyan 是 #2F4056 深藏蓝，这里对齐主题第二色（teal），保持「冷色次级」语义 */ .np-themed .layui-bg-cyan { background-color: var(--np-normal-fill) !important; color: var(--np-on-normal) !important; } .np-themed .layui-bg-gray { background-color: var(--np-bg-sunken) !important; color: var(--np-text-2) !important; } /* admin.css 的 .layui-bg-white 在深色下是一块白底 + 浅色字（不可见）。改用抬升面 + inset 描边环（不是 border，避免改外框尺寸）：深色下与卡片 #1e1e1e 有层级差，浅色下靠描边环与卡片区分，文字都是正文色。注意 site.css 有 `*{box-shadow:none!important}`，环必须带 !important。 */ .np-themed .layui-bg-white { background-color: var(--np-bg-elevated) !important; color: var(--np-text-1) !important; box-shadow: inset 0 0 0 1px var(--np-border-strong) !important; } /* 无线条圆点徽标：跟随主题 danger 色 */ .np-themed .layui-badge-dot { background-color: var(--np-danger); color: var(--np-on-danger); } /* --- 11.4 边框/面板类 --- */ .np-themed .layui-elem-field, .np-themed .layui-elem-field legend, .np-themed .layui-quote-nm, .np-themed .layui-tab-bar, .np-themed .layui-layedit, .np-themed .layui-layedit-tool { border-color: var(--np-border); } .np-themed .layui-elem-field legend { color: var(--np-text-1); } .np-themed .layui-panel { background-color: var(--np-bg-card); border-color: var(--np-border); color: var(--np-text-1); } .np-themed .layui-text a:not(.layui-btn) { color: var(--np-primary); } /* 进度条百分比文字：白色压在语义填充上，深色主题必须换成对应深字 */ .np-themed .layui-progress-bar.layui-bg-green .layui-progress-text { color: var(--np-on-success); } .np-themed .layui-progress-bar.layui-bg-blue .layui-progress-text { color: var(--np-on-primary); } .np-themed .layui-progress-bar.layui-bg-orange .layui-progress-text { color: var(--np-on-warning); } .np-themed .layui-progress-bar.layui-bg-red .layui-progress-text { color: var(--np-on-danger); } .np-themed .layui-progress-bar:not([class*=layui-bg-]) .layui-progress-text { color: var(--np-on-primary); } /* --- 11.5 eleTree（第三方树组件，Menu/Create|Edit 用它的父级菜单树）--- 实测：eleTree.css 只有一个「面」没有底色、节点文字也没有自带 color；页面又用 `.ele5{background-color:#fff}` 写死了白底（Menu/Create.cshtml:10、 Menu/Edit.cshtml:11）→ 深色主题下节点文字继承 --np-text-1(#e8eaed) 压在白底上 = 1.21:1，等于看不见。修法：把组件面/文字/交互色对齐主题（`.np-themed .eleTree` 类数 2 > 页面的 1，无 !important 也压得过）。 */ .np-themed .eleTree { background-color: var(--np-bg-card); color: var(--np-text-1); } /* 组件原文是 #eee 悬停条，深色下会变成一道亮条 */ .np-themed .eleTree-node-content:hover, .np-themed .eleTree-node-content.eleTree-node-content-active { background-color: var(--np-primary-weak); color: var(--np-text-1); } .np-themed .eleTree-node-content-icon .layui-icon { color: var(--np-text-3); } .np-themed .eleTree-node-content-input { background-color: var(--np-bg-sunken); border-color: var(--np-border); color: var(--np-text-1); } .np-themed .eleTree-node .eleTree-node-verticalline, .np-themed .eleTree-node .eleTree-node-horizontalline { border-color: var(--np-border-strong); } .np-themed .eleTree-checkbox i { background-color: var(--np-bg-sunken); border-color: var(--np-border-strong); } .np-themed .eleTree-checkbox i:hover { border-color: var(--np-primary); } .np-themed .eleTree-checkbox-checked i { background-color: var(--np-primary-fill); border-color: var(--np-primary); color: var(--np-on-primary); } /* 组件自带的右键菜单（#tree-menu）：li>a 自带 #000，面 F5F5F5，自洽可读，这里只把面提到抬升面以免在深色下过于刺眼 */ .np-themed #tree-menu { background-color: var(--np-bg-elevated); border-color: var(--np-border); box-shadow: var(--np-shadow-2) !important; } .np-themed #tree-menu li > a { color: var(--np-text-1); text-shadow: none; } .np-themed #tree-menu li > a:hover { background-color: var(--np-primary-weak); box-shadow: none; } /* =========================================================================== 12. 修订记录（v2） --------------------------------------------------------------------------- 【几何回退】删除的尺寸类覆盖（全部恢复 layui 原值）： html.np-themed{zoom:1!important} ← v1 最严重错误（整体放大 17.6%） .layui-fluid{padding:12px} .layui-table-cell{min-height:38px;line-height:22px;padding:8px 12px;font-size:13px} .layui-table-header .layui-table-cell{min-height:36px;line-height:22px;padding:7px 12px;font-size:13px} .layui-table td,th{padding:0}、.layui-table-cell{height:auto!important} .layui-card-header{height:46px;line-height:46px;padding:0 16px 0 18px;font-size:15px} .layui-card-body{padding:14px 16px}、.layui-card{margin-bottom:12px} .layui-table-view{margin-bottom:12px}、.layui-table-page{padding:8px 12px} .layui-form-item{margin-bottom:10px}、.layui-inline{margin-bottom:6px}、.layui-form-label{font-size:13px} .layui-input/.layui-select/.layui-textarea{height:34px;line-height:34px;padding-left:10px;font-size:13px} .layui-btn{height:34px;line-height:34px;padding:0 16px}、-sm/-xs 的 height/line-height/padding/font-size .layui-btn + .layui-btn{margin-left:6px}、.layui-layer-title{height:44px;line-height:44px} .layui-layer-btn a{height:30px;line-height:30px}、.layui-laypage a/span{margin-right:4px} 顶栏 36×36 圆形图标项、侧栏 38px 药丸 + 缩进、二级菜单 34px + 缩进、侧栏折叠态 padding .layui-logo{height:50px;line-height:50px}、.logo-text{font-size:17px} .money-number/.float-number{margin/padding/width/min-height/line-height} 【渐变清零】一律 `background-image:none !important` + `background-color`： .layui-btn / -primary / -normal / -warm / -danger / -checked / -disabled（含 :hover/:active） .layui-laypage-curr .layui-laypage-em、.layui-nav-itemed > .layui-nav-child（layui.css:3207 紫渐变） admin.css 顶栏 linear-gradient(221deg,#2288c8,#4d4295) admin.css 侧栏 linear-gradient(0deg,#151b3d,#4d4295) admin.css:227 tabs 橙渐变 + Home/Index.cshtml 行内 #LAY_app_tabs 渐变（#ID 提权重 + !important）主题切换器圆点由渐变改为实色【色板对齐】light: #1976d2 / #d32f2f / #2e7d32 / #ff9800(配深字) / #00796b dark : #121212 #1e1e1e #2d2d2d / #90caf9(配深字) / #ef5350 / #ffb74d / #66bb6a 不再出现 #1668dc #12a85c #e5484d #d98613 #3c89e8 #60a5fa 【深色漏白】.layui-table / thead tr 置透明；mend/patch 跟随表头；开关滑块 i 双态补色【阴影】所有生效阴影带 !important（site.css 有 `*{box-shadow:none!important}`）； dark 由 .35/.45/.55 降到 .10/.16/.20；冻结列分界阴影 dark 取 rgba(0,0,0,.28) （v2.1 由 .55 收到 .28，介于「看得见」与「不发闷」之间）【v2.1 补漏（QA 渲染级复核）】 .layui-colla-*（标题底/内容字/边框）、.layui-tab-card（选中页签 1:1）、 .layui-bg-*（红/橙/绿/蓝/青/灰/白语义底色按 --np-* + --np-on-* 重排， .layui-bg-white 另加 inset 描边环，否则与卡片同色不可辨）、 .layui-form-radio 选中态标签、顶栏/侧栏下拉 dl 自身色、侧栏 dd.layui-this 残留 #6573c3、 .layui-elem-field/.layui-quote-nm/.layui-layedit/.layui-tab-bar 边框、 .layui-panel、.layui-text a、.layui-progress-text（按所在 bg 分派 on 色）、开关关闭态 em 与圆点、未勾选 primary 勾选框、dark --np-fixed-shadow .55→.28 =========================================================================== */ /* =========================================================================== 13. 页面自有 class 覆盖（v3 新增 · 对应 #7「整个大背景要跟着主题变」） --------------------------------------------------------------------------- v2 的扫描结论有漏洞：它只判断「页面行内样式有没有 !important」，但**当主题层对该 class 根本没有规则时，页面的写死值本来就会生效**，与 !important 无关。因此深色下这些页面自有 class 的浅色底会原样保留。本轮做法（不改任何业务视图）：用页面**自己的 class** 作选择器，在本层补 `.np-themed <页面 class>` 覆盖。扫描脚本： `.workbuddy-ai/tmp/nibipay-theme/scan7.py`（覆盖 #fff/#ffffff/white/ #fxxxxx/rgb(255,…)/rgba(255,…) 以及 linear-gradient 里的白系值）。 13.1 扫描命中的页面自有 class（逐条对应，实测值见交付报告） =========================================================================== */ /* --- Home/Console.cshtml:193、Areas/{Mch,Mid,Vend}/Views/Home/Console.cshtml 同名 --- */ .np-themed .bind-google-card { background-image: none; background-color: var(--np-bg-card); border-color: var(--np-border); } /* Home/Console.cshtml:296（#f1f5f9）+ :293 的深色文字 */ .np-themed .bind-dismiss { background-image: none; background-color: var(--np-bg-sunken); border-color: var(--np-border-strong); color: var(--np-text-1); } /* 页面自己的 hover 把文字改成 rgba(255,255,255,1)，压在原浅底上不可见；跟随主题后底色变深，白色文字虽然可读，但仍统一为主色更稳。 */ .np-themed .bind-dismiss:hover { color: var(--np-primary); } /* --- Menu/Create.cshtml:25 / Menu/Edit.cshtml:26 `.ele5{background-color:#fff}` --- */ .np-themed .ele5 { background-color: var(--np-bg-card); border: 1px solid var(--np-border); } /* 同页 `.eleTree{border:1px solid #ccc}` —— 深色下是刺眼亮边，只改颜色不改宽度 */ .np-themed .eleTree { border-color: var(--np-border); } /* --- Cashout/Detail.cshtml:10、:24 --- */ .np-themed .detail-card { background-color: var(--np-bg-card); } .np-themed .detail-card .detail-header { color: var(--np-text-1); } .np-themed .detail-card .label { color: var(--np-text-2); } .np-themed .detail-card .value { color: var(--np-text-1); } .np-themed .detail-card .value.amount { color: var(--np-danger); } .np-themed .detail-card .value.meta { color: var(--np-text-3); } /* 页面内联

—— 必须 !important */ .np-themed .detail-card hr { border-top-color: var(--np-border) !important; } /* 不写成 `.actions .btn-secondary`：.btn-secondary 全仓仅 Cashout/Detail.cshtml 一处使用（:24 定义 / :84 引用），放宽到类名本身可避免依赖 DOM 层级，层级一旦调整主题就会失效。 */ .np-themed .btn-secondary { background-image: none; background-color: var(--np-bg-sunken); border-color: var(--np-border-strong); color: var(--np-text-1); } /* --- Payout/Index.cshtml:69、:81（下拉菜单由脚本生成，class 固定） --- */ .np-themed .batch-menu { background-image: none; background-color: var(--np-bg-elevated); border-color: var(--np-border); box-shadow: var(--np-shadow-2) !important; } .np-themed .layui-menu li { background-color: var(--np-bg-elevated); color: var(--np-text-1); } /* 页面原本是 `background:#3b3b3b; color:#f2f2f2`（深灰悬停），改为主题化悬停 */ .np-themed .layui-menu li:hover { background-color: var(--np-primary-weak); color: var(--np-primary); } /* --- Views/Home/BindGoogleAuth.cshtml（整页 ga-* 前缀，共 6 处浅底） --- */ .np-themed .ga-wrap { background-image: none; background-color: var(--np-bg-page); } .np-themed .ga-card { background-color: var(--np-bg-card); border-color: var(--np-border); box-shadow: var(--np-shadow-2) !important; } .np-themed .ga-step + .ga-step { border-top-color: var(--np-border); } .np-themed .ga-step-title, .np-themed .ga-bound-title { color: var(--np-text-1); } .np-themed .ga-step-desc, .np-themed .ga-key-label, .np-themed .ga-tip, .np-themed .ga-bound-desc { color: var(--np-text-2); } /* 二维码外框：图片自身占满 100%，所以把外框改成卡片色不影响扫码 */ .np-themed .ga-qr-box { background-color: var(--np-bg-card); border-color: var(--np-border); box-shadow: var(--np-shadow-1) !important; } .np-themed .ga-key-box { background-color: var(--np-bg-sunken); border-color: var(--np-border-strong); } .np-themed .ga-key-text { color: var(--np-success); } /* .ga-input 是裸（不是 .layui-input），UA 默认底色是白色，深色下会变成一块白条，必须显式给底色 */ .np-themed .ga-input { background-color: var(--np-input-bg); border-color: var(--np-input-border); color: var(--np-text-1); } .np-themed .ga-btn-ghost { background-image: none; background-color: var(--np-bg-card); border-color: var(--np-primary-border); color: var(--np-primary); } .np-themed .ga-btn-ghost:hover { background-color: var(--np-primary-weak); } .np-themed .ga-bound-icon { background-image: none; background-color: var(--np-success-weak); } /* --- Views/App/BuDan.cshtml:11 / Views/App/Create.cshtml:12 `html{background-color:#fff!important}`：行内样式带 !important，只有同样 !important 且权重更高的 html.np-day / html.np-night 能压过。 --- */ html.np-day { background-color: var(--np-bg-page) !important; } html.np-night { background-color: var(--np-bg-page) !important; } /* --- PayOrder/Details.cshtml（3 个视图）:15/17/19/21 ``：行内样式，无 !important。用 `col[style]` 限定属性选择器，避免影响 layui 表格里无底色的。 --- */ .np-themed col[style] { background-color: var(--np-bg-sunken) !important; } /* =========================================================================== 13.2 layadmin 框架组件（admin.css / template.css）里写死的浅色面与深色字 --------------------------------------------------------------------------- 这些组件 v2 完全没覆盖，且都是「大面积」： admin.css:311 .layadmin-backlog .layadmin-backlog-body{background-color:#f8f8f8;color:#999} admin.css:314 .layadmin-backlog-body:hover{background-color:#f2f2f2;color:#888} admin.css:306 .layadmin-shortcut li .layui-icon{background-color:#F8F8F8;color:#333} admin.css:307 .layadmin-shortcut li cite{color:#666} admin.css:308 .layadmin-shortcut li:hover .layui-icon{background-color:#f2f2f2} template.css:36 .layadmin-homepage-shadow{background-color:#fff;border-color:#e7ecf3} template.css:39 .layadmin-homepage-information{border-bottom-color:#e9e9e9} template.css:42 .layadmin-homepage-font{color:#2b425b} template.css:43 .layadmin-homepage-min-font{color:#afb9c3} template.css:47 .layadmin-homepage-about{color:#2b425b} template.css:52 .layadmin-homepage-pad-hor{color:#758697} template.css:64 .layadmin-homepage-content .h4{color:#2b425b} template.css:65 .layadmin-homepage-content small{color:#afb9c3} template.css:79/80/89 …fontColor a{color:#337ab7} / span,#758697 / .font-blod{color:#758697} template.css:90 .media-list{border-top:1px solid #e9e9e9} 使用面（实测 grep）：layadmin-backlog 出现在 8 个视图（含 3 个 Console 与 CardVendor/Merchant/BankAcct 的 Details），layadmin-shortcut 4 处， layadmin-homepage-fluid 5 处。深色下这些就是用户说的「大底背景仍是浅色」。 =========================================================================== */ /* 统计磁贴：浅灰面 → 下沉面；悬停 → 主色浅底 */ .np-themed .layadmin-backlog .layadmin-backlog-body { background-color: var(--np-bg-sunken); color: var(--np-text-2); } .np-themed .layadmin-backlog .layadmin-backlog-body:hover { background-color: var(--np-primary-weak); color: var(--np-text-2); } /* 数字原本是硬编码 #009688 */ .np-themed .layadmin-backlog .layadmin-backlog-body p cite { color: var(--np-primary); } /* 快捷入口图标块 */ .np-themed .layadmin-shortcut li .layui-icon { background-color: var(--np-bg-sunken); color: var(--np-text-2); } .np-themed .layadmin-shortcut li:hover .layui-icon { background-color: var(--np-primary-weak); color: var(--np-primary); } .np-themed .layadmin-shortcut li cite { color: var(--np-text-2); } /* 首页/详情页的卡片与外框 */ .np-themed .layadmin-homepage-shadow { background-color: var(--np-bg-card); border-color: var(--np-border); box-shadow: var(--np-shadow-1) !important; } .np-themed .layadmin-homepage-information { border-bottom-color: var(--np-border); } .np-themed .layadmin-homepage-font, .np-themed .layadmin-homepage-about, .np-themed .layadmin-homepage-content .h4 { color: var(--np-text-1); } .np-themed .layadmin-homepage-min-font, .np-themed .layadmin-homepage-content small { color: var(--np-text-3); } .np-themed .layadmin-homepage-pad-hor, .np-themed .layadmin-homepage-list-imgtxt .media-body .pad-btm .fontColor span, .np-themed .layadmin-homepage-list-imgtxt .media-body .media .media-left .font-blod { color: var(--np-text-2); } .np-themed .layadmin-homepage-list-imgtxt .media-body .pad-btm .fontColor a { color: var(--np-primary); } .np-themed .layadmin-homepage-list-imgtxt .media-body .media-list { border-top-color: var(--np-border); } /* 空状态页 */ .np-themed .layadmin-tips .layui-icon[face] { color: var(--np-text-3); } .np-themed .layadmin-tips .layui-text { border-top-color: var(--np-primary); color: var(--np-text-2); } .np-themed .layadmin-tips h1 { color: var(--np-primary); } /* =========================================================================== 14. 修订记录（v3） --------------------------------------------------------------------------- 【#1 登录页深色阴影】根因不是卡片阴影，而是 layui.css:1551 `.layui-input,.layui-select,.layui-textarea{box-shadow:0 1px 25px 0px #eee}` 的 25px 浅灰光晕（业务页被 site.css 的 *{box-shadow:none!important} 吃掉，登录页不加载 site.css 所以只有登录页可见）。夜晚版置 none，改由新增令牌 --np-input-bg / --np-input-border 的 1px 边框表达字段边界；白天版按用户意见原样保留。另：夜晚版 --np-shadow-1/2/side 直接定义为 none（层次靠边框+表面层级差）。【#2 冻结列透明】撤销对 .layui-table-fixed 的透明化（v2 自己引入的回归），给回 var(--np-bg-card) 实底，并补齐固定列内的斑马/hover 底色；同时把 .layui-table-fixed-r 的 border-left-color（layui 硬编码 #eee）主题化。【#3 表格下端硬线】layui.css:2320 的 border-color:#eee 组覆盖到 .layui-table-view / -tool / -page / -total 四处，全部换成 --np-table-border；去掉合计行的下边线，只保留分页区一条上边线。【#4/#5/#6 配色重做】白天版（#f6f8fb/#fff/#2563eb 系）与夜晚版（#0b1220/#111a2b/navy 系 + 主色 #60a5fa）全套 token 重写；主色拆成 --np-primary（文字/图标）与 --np-primary-fill（填充）两个语义，避免夜晚版出现「亮蓝底白字」。【#7 大背景跟随主题】新增 §13：扫描 191 个 _Layoutm 视图的行内