/* ===================================================================== UI v2 —— 政企稳重视觉层 --------------------------------------------------------------------- 作用域：body.ui-v2（逐页开关，见各模板 {% block bodyclass %}；登录页也带此 class） 取向：深藏蓝主色 + 中性灰打底；彩色只用于状态与危险操作；信息密度高、边界清晰 加载顺序：必须在 style.css / mobile.css 之后（base.html / login.html 放在最后） 主题适配： · 基础 token 是浅色稳重（浅色/标准主题） · 深色主题 = html 上无 theme-* class —— 由下方 dark 块换一套 token， 结构与规则完全复用，不复制选择器 · 用「html:not(.theme-light):not(.theme-standard)」判深色：**独立页（登录页） 必须显式写 **，否则会被判成深色主题 为什么大量 !important：style.css 的三套主题覆盖块自身用 !important 改表头底色、 行高、圆角，不加压不住；作用域靠 body.ui-v2 前缀保证。 ===================================================================== */ /* ---------- token：浅色稳重（默认） ---------- */ body.ui-v2 { --v2-navy: #1b3358; /* 主色：深藏蓝（侧栏/主按钮/表头强调） */ --v2-navy-d: #152a49; /* 主色深（标题） */ --v2-navy-l: #2b4a7d; /* 主色浅（悬停/选中） */ --v2-accent: #4c7dd8; /* 交互蓝（链接/焦点环） */ --v2-ink: #1f2937; /* 正文 */ --v2-text-strong: #26303e; /* 表格/正文强调 */ --v2-sub: #5b6b82; /* 次要文字 */ --v2-mute: #8492a6; /* 辅助文字/空值 */ --v2-line: #e3e8ef; /* 分隔线 */ --v2-line-2: #cdd6e2; /* 输入框/次按钮描边 */ --v2-canvas: #f4f6f9; /* 页面底色（中性灰） */ --v2-surface: #ffffff; /* 卡片/表体 */ --v2-tint: #fafbfd; /* 斑马纹 */ --v2-hover: #f2f6fd; /* 行悬停 */ --v2-thead-bg: #eef2f8; /* 表头底 */ --v2-thead-fg: #3f5170; /* 表头字 */ --v2-row-line: #eef1f5; /* 行分隔线 */ --v2-btn-fg: #33445c; /* 次按钮文字 */ --v2-btn-hover: #f7f9fc; /* 次按钮悬停底 */ --v2-input-bg: #ffffff; --v2-danger: #bf3b31; --v2-danger-line: #e8c6c2; --v2-danger-hover: #fdf4f3; --v2-radius: 8px; --v2-radius-sm: 6px; --v2-shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07); --v2-shadow-2: 0 4px 14px rgba(16, 24, 40, .08); --v2-fs-page: 19px; --v2-fs-card: 15px; --v2-fs-body: 13px; --v2-fs-aux: 12px; background: var(--v2-canvas) !important; color: var(--v2-ink) !important; } /* ---------- token：深色稳重（深色主题 = html 无 theme-* class） ---------- */ html:not(.theme-light):not(.theme-standard) body.ui-v2 { --v2-navy: #16233c; --v2-navy-d: #e8f0fb; --v2-navy-l: #23365a; --v2-accent: #6d9bea; --v2-ink: #e5ecf6; --v2-text-strong: #dbe4f0; --v2-sub: #9fb0c8; --v2-mute: #7d8ea8; --v2-line: #24304a; --v2-line-2: #2f3d5c; --v2-canvas: #0b1120; --v2-surface: #131c2e; --v2-tint: #161f33; --v2-hover: #1b2740; --v2-thead-bg: #182338; --v2-thead-fg: #a9bcd8; --v2-row-line: #1e2941; --v2-btn-fg: #cfdcf0; --v2-btn-hover: #1b2740; --v2-input-bg: #0f1a2c; --v2-danger: #f08d84; --v2-danger-line: #59393a; --v2-danger-hover: #2a1c1f; --v2-shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --v2-shadow-2: 0 6px 20px rgba(0, 0, 0, .45); } /* ---------- 侧栏 ---------- */ body.ui-v2 .sidebar { background: var(--v2-navy) !important; border-right: 1px solid var(--v2-line) !important; } body.ui-v2 .sidebar-logo { color: #fff !important; font-size: 15px !important; font-weight: 600; letter-spacing: .4px; padding: 18px 20px 14px !important; border-bottom: 1px solid rgba(255, 255, 255, .09) !important; } body.ui-v2 .sidebar-logo .icon { display: inline-flex; align-items: center; color: #9db8e8; } body.ui-v2 .sidebar-nav a { display: flex; align-items: center; gap: 9px; margin: 1px 8px; padding: 8px 10px; border-radius: var(--v2-radius-sm); color: rgba(255, 255, 255, .76) !important; font-size: var(--v2-fs-body) !important; text-decoration: none; transition: background .15s ease, color .15s ease; } body.ui-v2 .sidebar-nav a:hover { background: rgba(255, 255, 255, .08) !important; color: #fff !important; } body.ui-v2 .sidebar-nav a.active { background: var(--v2-navy-l) !important; color: #fff !important; box-shadow: inset 3px 0 0 #8db1ea; } body.ui-v2 .sidebar-nav a > .ic { flex: 0 0 auto; opacity: .92; } body.ui-v2 .sidebar-nav { padding-bottom: 24px; } body.ui-v2 .sidebar-nav a[onclick*="logout"] { color: #f0a9a4 !important; margin-top: 6px; } /* ---------- 主区 ---------- */ body.ui-v2 .main { background: var(--v2-canvas) !important; padding: 22px 26px 48px !important; } body.ui-v2 h1 { font-size: var(--v2-fs-page) !important; font-weight: 600; color: var(--v2-navy-d) !important; letter-spacing: .2px; display: flex; align-items: center; gap: 8px; } body.ui-v2 h1 + p, body.ui-v2 h1 ~ p { color: var(--v2-sub) !important; font-size: var(--v2-fs-aux); } body.ui-v2 h2, body.ui-v2 h3 { color: var(--v2-navy-d) !important; font-weight: 600; } /* ---------- 卡片 ---------- */ body.ui-v2 .card, body.ui-v2 .stat-card, body.ui-v2 .panel { background: var(--v2-surface) !important; border: 1px solid var(--v2-line) !important; border-radius: var(--v2-radius) !important; box-shadow: var(--v2-shadow-1) !important; padding: 18px 20px !important; margin-bottom: 16px !important; } body.ui-v2 .stat-card .value, body.ui-v2 .card .value { color: var(--v2-navy-d) !important; font-weight: 600; } /* ---------- 表格：密度提升 + 清晰边界 ---------- */ body.ui-v2 .table-wrap { border: 1px solid var(--v2-line) !important; border-radius: var(--v2-radius) !important; background: var(--v2-surface) !important; overflow: hidden; } body.ui-v2 table { font-size: var(--v2-fs-body) !important; } body.ui-v2 thead th, body.ui-v2 .table-wrap th { background: var(--v2-thead-bg) !important; color: var(--v2-thead-fg) !important; font-weight: 600 !important; font-size: var(--v2-fs-aux) !important; letter-spacing: .3px; padding: 9px 12px !important; border-bottom: 1px solid var(--v2-line-2) !important; white-space: nowrap; } body.ui-v2 tbody td { padding: 8px 12px !important; color: var(--v2-text-strong) !important; border-bottom: 1px solid var(--v2-row-line) !important; } body.ui-v2 tbody tr:nth-child(even) { background: var(--v2-tint) !important; } body.ui-v2 tbody tr:hover { background: var(--v2-hover) !important; } body.ui-v2 tbody tr:last-child td { border-bottom: none !important; } /* ---------- 按钮：四级语义，彩色只给危险 ---------- */ body.ui-v2 .btn { height: 32px; padding: 0 14px !important; border-radius: var(--v2-radius-sm) !important; font-size: var(--v2-fs-body) !important; font-weight: 500 !important; letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transform: none !important; transition: background .15s ease, border-color .15s ease, color .15s ease; } body.ui-v2 .btn:hover { transform: none !important; box-shadow: none !important; } body.ui-v2 .btn-primary { background: var(--v2-navy) !important; color: #fff !important; border: 1px solid var(--v2-navy) !important; } body.ui-v2 .btn-primary:hover { background: var(--v2-navy-l) !important; border-color: var(--v2-navy-l) !important; } body.ui-v2 .btn-ghost, body.ui-v2 .btn-success, body.ui-v2 .btn-warning, body.ui-v2 .btn-secondary { background: var(--v2-surface) !important; color: var(--v2-btn-fg) !important; border: 1px solid var(--v2-line-2) !important; } body.ui-v2 .btn-ghost:hover, body.ui-v2 .btn-success:hover, body.ui-v2 .btn-warning:hover, body.ui-v2 .btn-secondary:hover { background: var(--v2-btn-hover) !important; border-color: var(--v2-accent) !important; } body.ui-v2 .btn-danger { background: var(--v2-surface) !important; color: var(--v2-danger) !important; border: 1px solid var(--v2-danger-line) !important; } body.ui-v2 .btn-danger:hover { background: var(--v2-danger-hover) !important; border-color: var(--v2-danger) !important; } body.ui-v2 .btn-xs { height: 24px; padding: 0 8px !important; font-size: 12px !important; } /* ---------- 表单控件 ---------- */ body.ui-v2 input, body.ui-v2 select, body.ui-v2 textarea { border: 1px solid var(--v2-line-2) !important; border-radius: var(--v2-radius-sm) !important; background: var(--v2-input-bg) !important; color: var(--v2-text-strong) !important; font-size: var(--v2-fs-body) !important; padding: 7px 10px !important; } body.ui-v2 input:focus, body.ui-v2 select:focus, body.ui-v2 textarea:focus { outline: none !important; border-color: var(--v2-accent) !important; box-shadow: 0 0 0 3px rgba(76, 125, 216, .14) !important; } body.ui-v2 label { color: var(--v2-sub) !important; font-size: var(--v2-fs-aux) !important; } /* ---------- 徽标 / 状态（彩色只在此处出现） ---------- */ body.ui-v2 .badge { border-radius: 4px !important; font-size: 12px !important; font-weight: 500 !important; padding: 2px 8px !important; } body.ui-v2 .progress-bar { background: var(--v2-row-line) !important; border-radius: 3px !important; } /* ---------- 弹窗 ---------- */ body.ui-v2 .modal-content { border: 1px solid var(--v2-line) !important; border-radius: 10px !important; box-shadow: 0 12px 40px rgba(16, 24, 40, .18) !important; background: var(--v2-surface) !important; } body.ui-v2 .modal-header h3, body.ui-v2 .modal-content h2 { color: var(--v2-navy-d) !important; font-size: 16px !important; font-weight: 600; } /* ---------- 分页 / 工具条 ---------- */ body.ui-v2 .pagination button, body.ui-v2 .page-btn { border-radius: var(--v2-radius-sm) !important; border: 1px solid var(--v2-line-2) !important; background: var(--v2-surface) !important; color: var(--v2-btn-fg) !important; } body.ui-v2 .pagination button.active { background: var(--v2-navy) !important; border-color: var(--v2-navy) !important; color: #fff !important; } /* ---------- 图标统一：行内 SVG 与文字的基线对齐 ---------- */ body.ui-v2 .ic { vertical-align: -3px; flex: 0 0 auto; } body.ui-v2 .btn .ic { margin-right: 1px; } /* ---------- 登录页（独立页：显式带 theme-light，走浅色 token） ---------- */ body.ui-v2.login-page { background: var(--v2-canvas) !important; } body.ui-v2.login-page .login-card { background: var(--v2-surface) !important; border: 1px solid var(--v2-line) !important; border-radius: var(--v2-radius) !important; box-shadow: var(--v2-shadow-2) !important; } body.ui-v2.login-page .login-card .field label { color: var(--v2-sub) !important; } body.ui-v2.login-page .input-wrap input { background: var(--v2-input-bg) !important; border: 1px solid var(--v2-line-2) !important; border-radius: var(--v2-radius-sm) !important; color: var(--v2-text-strong) !important; } body.ui-v2.login-page .input-wrap input:focus { border-color: var(--v2-accent) !important; box-shadow: 0 0 0 3px rgba(76, 125, 216, .14) !important; } body.ui-v2.login-page .login-btn { background: var(--v2-navy) !important; border-radius: var(--v2-radius-sm) !important; } body.ui-v2.login-page .login-btn:active, body.ui-v2.login-page .login-btn:hover { background: var(--v2-navy-l) !important; transform: none; } body.ui-v2.login-page .captcha-img { border: 1px solid var(--v2-line-2) !important; border-radius: var(--v2-radius-sm) !important; background: var(--v2-input-bg) !important; } body.ui-v2.login-page .pwd-toggle { color: var(--v2-sub) !important; display: inline-flex; align-items: center; justify-content: center; } body.ui-v2.login-page .fp-link { color: var(--v2-navy-l) !important; } body.ui-v2.login-page .login-header h1 { color: var(--v2-navy-d) !important; } body.ui-v2.login-page .login-header .sub, body.ui-v2.login-page .footer-note { color: var(--v2-sub) !important; } body.ui-v2.login-page .login-header .icon { display: inline-flex; color: var(--v2-navy) !important; }