/* ============================================================ 课程管理系统 · 设计系统 现代专业 SaaS 运营控制台 ============================================================ ⚠️ 色值与尺寸令牌已全部移到同目录的 tokens.css（唯一真源）。 本文件只写选择器规则，一律用 var(--x)，不要再写字面色值。 ⚠️ 字体不再用 CSS @import 引入。@import 会串行化下载（浏览器要先下完本文件、 解析到 @import、再去下 400KB 的 harmonyos-sans-sc.css），期间首屏被阻塞。 现改为在模板 里与本文件并行 ，见 base_redesign.html / login.html / change_password.html。新增独立页面记得一起带上这几个 link。 ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { min-height: 100vh; } /* ⚠️ 设计稿的 helmet CSS 全文只声明 6 处 line-height（.ms 图标 1、正文段落 1.6/1.65/1.45）， body 本身没有，所以稿子里绝大多数文本的行盒是 normal(≈1.2)。本项目旧基线是 1.5， 会把每个文本行盒撑高约 20%——实测运营成本页：KPI 数值 29px→36px、KPI 卡整体 109px→118.25px、 卡头 58px→59.75px。单看一个元素肉眼无感，整页叠起来密度就松了一档。 复刻期逐页灰度，所以只在已复刻的 .dc-page / .dc-modal 里回到稿子的 normal， 未复刻的老页面继续吃 1.5。等全站转完，直接把 html,body 那条 1.5 删掉即可。 */ .dc-page, .dc-modal { line-height: normal; } /* 数字等宽:主字体已是 Inter(自带 tnum),不再需要换字体,只开特性即可。 设计稿要求"所有金额、表格数字必须等宽",故除 .tnum 外,金额/数字单元格与 KPI 数值统一开 tnum。 */ .tnum, .money, .tbl td.num, .tbl th.num, .tbl tfoot td, .stat-val { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--text-4); } ::-webkit-scrollbar-track { background: transparent; } a { color: inherit; text-decoration: none; } /* ============================================================ APP SHELL ============================================================ */ .app { display: flex; min-height: 100vh; } /* ---- Sidebar ---- */ .sidebar { width: var(--sidebar-w); background: var(--surface); color: var(--text-2); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; border-right: 1px solid var(--border); } .sb-brand { height: var(--topbar-h); display: flex; align-items: center; gap: 11px; padding: 0 20px; flex-shrink: 0; } .sb-logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(145deg, #5a97f8 0%, var(--primary-hover) 100%); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15.5px; letter-spacing: -.02em; flex-shrink: 0; box-shadow: 0 2px 8px rgba(60,131,246,.38), inset 0 1px 0 rgba(255,255,255,.28); } .sb-brand-text { display: flex; flex-direction: column; line-height: 1.15; } .sb-brand-text b { color: var(--text); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; } .sb-brand-text span { color: var(--text-3); font-size: 11px; font-weight: 500; } .sb-nav { flex: 1; overflow-y: auto; padding: 8px 12px 20px; } .sb-nav::-webkit-scrollbar { width: 6px; } .sb-nav::-webkit-scrollbar-thumb { background: var(--border-strong); border: none; border-radius: 999px; } .sb-group { margin-top: 16px; } .sb-group:first-child { margin-top: 6px; } .sb-group-label { font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--text-3); padding: 6px 12px 7px; } .sb-link { display: flex; align-items: center; gap: 10px; /* 设计稿实测 gap 10px / 内距 8px 12px */ padding: 8px 12px; border-radius: 8px; color: var(--text-2); font-size: 13.5px; font-weight: 500; cursor: pointer; position: relative; transition: background .14s, color .14s; margin-bottom: 2px; } .sb-link svg { width: 18px; height: 18px; stroke-width: 1.9; flex-shrink: 0; color: var(--text-3); } .sb-link:hover { background: var(--surface-3); color: var(--text); } .sb-link:hover svg { color: var(--text-2); } /* 选中态：设计稿 v2 是浅蓝底 + 蓝字蓝图标，不是实心蓝胶囊白字 */ .sb-link.active { background: var(--nav-active-bg); color: var(--primary); font-weight: 600; } .sb-link.active svg { color: var(--primary); } .sb-badge { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--primary); color: #fff; padding: 1px 7px; border-radius: 999px; min-width: 20px; text-align: center; } .sb-badge.amber { background: var(--amber); } /* 选中态已改浅蓝底，徽章保持原样即可（白底徽章在浅蓝上会糊掉） */ .sb-foot { padding: 12px; border-top: 1px solid var(--border); } .sb-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .14s; } .sb-user:hover { background: var(--surface-3); } .sb-user .avatar { width: 32px; height: 32px; font-size: 12px; } .sb-user-info { line-height: 1.2; flex: 1; min-width: 0; } .sb-user-info b { color: var(--text); font-size: 13px; font-weight: 600; display: block; } .sb-user-info span { color: var(--text-3); font-size: 11px; } .sb-user .ico-out { width: 16px; height: 16px; color: var(--text-3); } /* ---- Main ---- */ .main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; } .topbar { height: var(--topbar-h); background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 18px; padding: 0 28px; position: sticky; top: 0; z-index: 30; } .tb-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; } .tb-sub { color: var(--text-3); font-size: 12.5px; font-weight: 500; } .tb-spacer { flex: 1; } .tb-search { display: flex; align-items: center; gap: 8px; background: var(--surface-3); border: 1px solid transparent; border-radius: var(--r); padding: 0 12px; height: 38px; width: 240px; transition: border .14s, background .14s; } .tb-search:focus-within { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } .tb-search svg { width: 16px; height: 16px; color: var(--text-3); } .tb-search input { border: none; background: none; outline: none; flex: 1; font-family: inherit; font-size: 13.5px; color: var(--text); } .tb-icon-btn { width: 38px; height: 38px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text-2); position: relative; transition: background .14s, border .14s; } .tb-icon-btn:hover { background: var(--surface-3); } .tb-icon-btn svg { width: 18px; height: 18px; } .tb-icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); border: 1.5px solid #fff; } /* 注意:.content 是各页 fixed 弹窗的祖先,入场动画只能动 opacity—— 带 transform 的动画会让 fixed 定位以 .content 为基准,弹窗偏出半个侧栏宽 */ .content { padding: 28px; max-width: 1480px; width: 100%; margin: 0 auto; animation: fadeIn .2s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ============================================================ PRIMITIVES ============================================================ */ .avatar { border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; background: #dbeafe; color: #1d4ed8; } /* 首字母色块的一组柔和底色（设计稿：姓名首字生成，背景取一组柔和色） */ .avatar.a-green { background: var(--green-soft); color: var(--green-strong); } .avatar.a-amber { background: var(--amber-soft); color: var(--amber-strong); } .avatar.a-violet { background: var(--violet-soft); color: #6d28d9; } .avatar.a-teal { background: var(--teal-soft); color: var(--teal); } .avatar.a-rose { background: #ffe4e6; color: #be123c; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: var(--r-sm); font-family: inherit; font-size: 13.5px; font-weight: 600; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .14s, border .14s, box-shadow .14s, transform .08s cubic-bezier(.34,1.56,.64,1); user-select: none; } .btn:active { transform: scale(.975); } .btn svg { width: 16px; height: 16px; stroke-width: 2; } /* 按钮里的 Material Symbols 要跟 svg 一个档位。缺这条时字体图标按默认 24px 渲染， 比同排的 svg 图标明显大一圈，各页只能各自内联 style="font-size:18px" 兜底。 */ .btn .material-symbols-outlined { font-size: 16px; line-height: 1; } /* ---- flash 提示条 ---- ⚠️ `.alert` / `.alert-danger` 此前在 live CSS 里**零定义**，而 config.html、 admin/users.html、admin/operation_logs.html 五处都在用它渲染 flash（含错误提示）—— 也就是说这些提示一直是无样式的裸文字，红色的报错看上去和正文没区别。 */ .alert { padding: 10px 14px; border-radius: var(--r-sm); font-size: 13px; line-height: 1.6; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); } .alert-danger { background: var(--red-soft); border-color: var(--red-soft); color: var(--red-strong); } .alert-error { background: var(--red-soft); border-color: var(--red-soft); color: var(--red-strong); } .alert-success { background: var(--green-soft); border-color: var(--green-soft); color: var(--green-strong); } .alert-warning { background: var(--amber-soft); border-color: var(--amber-soft); color: var(--amber-strong); } .alert-info { background: var(--primary-soft); border-color: var(--primary-soft-2); color: var(--primary-strong); } /* 主操作统一用主色蓝:全系统"蓝=最高优先级动作"单一语义(黑色退出按钮体系) */ .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(60,131,246,.25); } .btn-primary:hover { background: var(--primary-hover); } .btn-accent { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(60,131,246,.25); } .btn-accent:hover { background: var(--primary-hover); } .btn-default { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-default:hover { background: var(--surface-3); } .btn-ghost { background: transparent; color: var(--text-2); } .btn-ghost:hover { background: var(--surface-3); color: var(--text); } .btn-danger { background: var(--red); color: #fff; } .btn-danger:hover { background: var(--red-strong); } .btn-danger-soft { background: var(--red-soft); color: var(--red); } .btn-danger-soft:hover { background: #fecaca; } .btn-success { background: var(--green); color: #fff; } .btn-success:hover { background: var(--green-strong); } .btn-sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: var(--r-xs); } .btn-sm svg { width: 14px; height: 14px; } .btn-icon { width: 38px; padding: 0; } .btn-icon.btn-sm { width: 32px; } .btn-block { width: 100%; } /* ---- Inputs ---- */ .field { display: flex; flex-direction: column; gap: 6px; } .field label, .lbl { font-size: 12.5px; font-weight: 600; color: var(--text-2); } /* 必填星号:放宽到任意 .req(原 .lbl .req 仅命中 .lbl 祖先,导致裸