/* ============================================================================ 医院培训考试系统 · 界面收敛层 ui-refresh.css ---------------------------------------------------------------------------- 加载：main.css 之后（index.html 中最后一条 ），与本项目 13 层皮肤叠加 的既有实现共存——本层是最后一层，负责把前面各层的取值收口。 目标：① 变量重定向——把 5 套皮肤（apple/pro/liquid/cu/demo）的语义变量 统一指向 tokens.css 的令牌，一处改、全站生效 ② 硬编码收敛——字号/字重/圆角/阴影/颜色 ③ 去装饰——移除卡片与外壳的毛玻璃与渐变，改用发丝线分层 ④ 可访问性——对比度、聚焦环、44px 触控 ⑤ 响应式——≤1024px 侧栏收为抽屉，内容区拿回整幅宽度 回滚：删除 index.html 中本文件的 即可，主样式不受影响 ========================================================================== */ /* ========================================================================== 1 · 变量重定向 ========================================================================== */ :root, html:root { /* --- 中性阶 ---------------------------------------------------------- */ --white: #FFFFFF; --gray-950: #1D1D1F; --gray-900: #1D1D1F; --gray-800: #1D1D1F; --gray-700: #333333; --gray-600: #5A5A5F; --gray-500: #5A5A5F; --gray-400: #7A7A7A; --gray-300: #E0E0E0; --gray-200: #F0F0F0; --gray-100: #F5F5F7; --gray-50: #FAFAFC; /* --- 品牌蓝：5 个蓝收敛为 1 个 --------------------------------------- */ --indigo-900: #1D1D1F; --indigo-800: #0066CC; --indigo-700: #0066CC; --indigo-600: #0066CC; --indigo-500: #0066CC; --indigo-100: #E8F1FC; --indigo-50: #E8F1FC; /* --- 语义色：只表示状态 --------------------------------------------- */ --amber-500: #B45309; --amber-400: #B45309; --amber-100: #FBF0E0; --amber-50: #FBF0E0; --emerald-500: #157A3C; --emerald-100: #E7F4EC; --rose-500: #C4322B; --rose-100: #FBE9E7; --violet-500: #0066CC; --violet-100: #E8F1FC; --sky-500: #0066CC; --sky-100: #E8F1FC; --primary: #0066CC; --primary-hover: #0058B0; --primary-light: #E8F1FC; --accent: #0066CC; --accent-light: #E8F1FC; --success: #157A3C; --success-light: #E7F4EC; --danger: #C4322B; --danger-light: #FBE9E7; --warning: #B45309; --warning-light: #FBF0E0; --info: #0066CC; --info-light: #E8F1FC; /* --- 面与字 ---------------------------------------------------------- */ --bg: #F5F5F7; --surface: #FFFFFF; --surface-2: #FAFAFC; --surface-dark: #1D1D1F; --sidebar-bg: #FFFFFF; --sidebar-w: 236px; --text-primary: #1D1D1F; --text-secondary: #5A5A5F; --text-tertiary: #5A5A5F; /* ★ 原为一档浅灰（对白 2.6:1），小字不可用 */ --text-disabled: #7A7A7A; --text-on-dark: #FFFFFF; --text-on-dark-muted: #E7E7EA; --border: #E0E0E0; --border-light: #F0F0F0; --border-dark: #E0E0E0; --color-bg: #F5F5F7; --color-card: #FFFFFF; --color-border: #E0E0E0; --color-sidebar: #FFFFFF; --color-pass: #157A3C; --color-fail: #C4322B; --color-neutral: #0066CC; --color-warning: #B45309; /* --- 旧别名收编：JS 内联样式大量引用 --green/--red/--blue/--orange/--purple， 此前桌面端从未定义 → 全站语义色失效为黑/继承色。对齐 h5 端同名定义。 --- */ --green: var(--success); --green-bg: var(--success-light); --red: var(--danger); --red-bg: var(--danger-light); --blue: var(--primary); --blue-bg: var(--primary-light); --orange: var(--warning); --orange-bg: var(--warning-light); --purple: #5A5A5F; --purple-bg: #F0F0F0; /* 紫并入中性灰，与 h5 端一致 */ /* --- 圆角：63 种收敛为 5 档 ----------------------------------------- */ --radius-xs: 5px; --radius-sm: 8px; --radius-md: 11px; --radius-lg: 18px; --radius-xl: 18px; --radius-2xl: 24px; /* --- 高程：全站一条极轻投影 + 发丝环 --------------------------------- */ --shadow-xs: 0 1px 2px rgba(29, 29, 31, .04); --shadow-sm: 0 1px 2px rgba(29, 29, 31, .05); --shadow-md: 0 4px 12px rgba(29, 29, 31, .06); --shadow-lg: 0 12px 32px rgba(29, 29, 31, .10); --shadow-xl: 0 24px 64px rgba(29, 29, 31, .16); --shadow-inset: inset 0 0 0 1px rgba(0, 0, 0, .03); /* --- 字体：撤掉未加载的 DM Serif / Plus Jakarta，改系统栈 ----------- */ --font-display: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: var(--font-display); /* --- apple 皮肤 ------------------------------------------------------ */ --apple-bg: #F5F5F7; --apple-page-bg: #F5F5F7; --apple-card: #FFFFFF; --apple-surface: #FFFFFF; --apple-surface-strong: #FFFFFF; --apple-panel: #FFFFFF; --apple-panel-strong: #FFFFFF; --apple-border: #E0E0E0; --apple-border-strong: #D8D8DA; --apple-soft-line: #F0F0F0; --apple-text: #1D1D1F; --apple-sub: #5A5A5F; --apple-faint: #5A5A5F; --apple-muted: #5A5A5F; --apple-subtle: #5A5A5F; --apple-blue: #0066CC; --apple-teal: #157A3C; --apple-green: #157A3C; --apple-orange: #B45309; --apple-amber: #B45309; --apple-red: #C4322B; --apple-purple: #0066CC; --apple-shadow: 0 1px 2px rgba(29, 29, 31, .05); --apple-soft-shadow: 0 1px 2px rgba(29, 29, 31, .04); --apple-shadow-hover: 0 4px 14px rgba(29, 29, 31, .08); /* --- pro 皮肤 -------------------------------------------------------- */ --pro-bg: #F5F5F7; --pro-ink: #1D1D1F; --pro-muted: #5A5A5F; --pro-faint: #5A5A5F; --pro-line: #E0E0E0; --pro-hairline: #E0E0E0; --pro-glass: #FFFFFF; --pro-glass-strong: #FFFFFF; --pro-blue: #0066CC; --pro-mint: #157A3C; --pro-orange: #B45309; --pro-rose: #C4322B; --pro-violet: #0066CC; --pro-radius: 18px; --pro-radius-sm: 11px; --pro-ease: cubic-bezier(.4, 0, .2, 1); --pro-shadow: 0 1px 2px rgba(29, 29, 31, .05); --pro-shadow-soft: 0 1px 2px rgba(29, 29, 31, .04); --pro-shadow-hover: 0 4px 14px rgba(29, 29, 31, .08); /* --- liquid 皮肤 ----------------------------------------------------- */ --liquid-bg: #F5F5F7; --liquid-bg-2: #FAFAFC; --liquid-ink: #1D1D1F; --liquid-muted: #5A5A5F; --liquid-faint: #5A5A5F; --liquid-blue: #0066CC; --liquid-cyan: #0066CC; --liquid-violet: #0066CC; --liquid-green: #157A3C; --liquid-orange: #B45309; --liquid-red: #C4322B; --liquid-glass: #FFFFFF; --liquid-glass-strong: #FFFFFF; --liquid-line: #E0E0E0; --liquid-hairline: #F0F0F0; --liquid-shadow: 0 1px 2px rgba(29, 29, 31, .05); --liquid-shadow-hover: 0 4px 14px rgba(29, 29, 31, .08); --liquid-radius: 18px; --liquid-radius-sm: 11px; /* --- cu 皮肤 --------------------------------------------------------- */ --cu-bg: #F5F5F7; --cu-bg-deep: #F0F0F2; --cu-surface: #FFFFFF; --cu-surface-solid: #FFFFFF; --cu-sidebar: #FFFFFF; --cu-line: #E0E0E0; --cu-line-strong: #D8D8DA; --cu-text: #1D1D1F; --cu-text-2: #5A5A5F; --cu-text-3: #5A5A5F; --cu-blue: #0066CC; --cu-green: #157A3C; --cu-orange: #B45309; --cu-red: #C4322B; --cu-shadow: 0 1px 2px rgba(29, 29, 31, .04); --cu-shadow-hover: 0 4px 14px rgba(29, 29, 31, .08); /* --- demo 皮肤 ------------------------------------------------------- */ --demo-bg: #F5F5F7; --demo-sidebar: #FFFFFF; --demo-card: #FFFFFF; --demo-line: #E0E0E0; --demo-line-soft: #F0F0F0; --demo-sep: #E0E0E0; --demo-text: #1D1D1F; --demo-muted: #5A5A5F; --demo-faint: #5A5A5F; --demo-blue: #0066CC; --demo-green: #157A3C; --demo-orange: #B45309; --demo-red: #C4322B; --demo-purple: #0066CC; --demo-indigo: #0066CC; --demo-blue-soft: #E8F1FC; --demo-green-soft: #E7F4EC; --demo-orange-soft: #FBF0E0; --demo-red-soft: #FBE9E7; --demo-indigo-soft: #E8F1FC; --demo-shadow: 0 1px 2px rgba(29, 29, 31, .05); --demo-shadow-hover: 0 4px 14px rgba(29, 29, 31, .08); /* --- glass 皮肤 ------------------------------------------------------ */ --glass-bg: #FFFFFF; --glass-bg-soft: #FFFFFF; --glass-border: #E0E0E0; --glass-highlight: #FFFFFF; --glass-shadow: 0 1px 2px rgba(29, 29, 31, .05); --glass-shadow-soft: 0 1px 2px rgba(29, 29, 31, .04); --glass-shadow-hover: 0 4px 14px rgba(29, 29, 31, .08); /* --- 装饰性渐变 → 纯色（渐变不再承担信息）-------------------------- */ --ambient-blue: #0066CC; --ambient-mint: #157A3C; --ambient-orange: #B45309; --ambient-red: #C4322B; --ambient-purple: #0066CC; } /* ========================================================================== 2 · 基础排版与页面底色 ========================================================================== */ html, body { font-family: var(--font-body) !important; letter-spacing: 0; background: #F5F5F7 !important; background-image: none !important; color: #1D1D1F !important; } /* 圆点网格纹理与多层径向渐变一并撤掉：底色是容器，不参与表达 */ body::before, body::after, .main-content::before, .main-content::after { background-image: none !important; } #main-screen, .main-content, .page, .content-area, .dash-demo, .dash-home-v2, .apple-dashboard, .screen { background: #F5F5F7 !important; background-image: none !important; } #main-screen { padding: 0 !important; gap: 0 !important; } .main-content { padding: 0 !important; min-width: 0; } ::selection { background: #C2DCF7; color: #1D1D1F; } /* 滚动条：细、灰、无轨道 */ * { scrollbar-width: thin; scrollbar-color: #C7C7CC transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #C7C7CC; border-radius: 9999px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--c-ink-muted-48, #7A7A7A); background-clip: content-box; } /* ========================================================================== 3 · 外壳：侧栏 / 页头 / 页体 ========================================================================== */ .sidebar { width: var(--sidebar-w) !important; flex: 0 0 var(--sidebar-w) !important; height: 100vh !important; margin: 0 !important; border-radius: 0 !important; background: #FFFFFF !important; background-image: none !important; border: 0 !important; border-right: 1px solid #E0E0E0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .sidebar::after, .sidebar::before { display: none !important; } .sidebar-divider { height: 1px; background: #F0F0F0; margin: 0 16px; border: 0; } .sidebar-brand { min-height: 64px; padding: 16px 16px 12px !important; gap: 11px !important; border-bottom: 1px solid #F0F0F0 !important; background: transparent !important; } .sidebar-brand-logo { width: 34px; height: 34px; border-radius: 11px; background: #0066CC !important; background-image: none !important; display: flex; align-items: center; justify-content: center; flex: none; } .sidebar-brand-logo svg { width: 20px; height: 20px; } .sidebar-brand-name { font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 600 !important; color: #1D1D1F !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.25 !important; max-width: none !important; } .sidebar-brand-sub { font-size: 13px !important; font-weight: 400 !important; color: #5A5A5F !important; letter-spacing: 0 !important; text-transform: none !important; margin-top: 2px !important; } .sidebar-hosp-region { color: #5A5A5F !important; font-size: 13px !important; } .sidebar-nav { padding: 12px 10px 16px !important; } .nav-section { margin-bottom: 14px !important; } .nav-section-title { font-size: 13px !important; font-weight: 600 !important; color: #5A5A5F !important; letter-spacing: 0 !important; text-transform: none !important; padding: 6px 12px !important; } .nav-item { display: flex !important; align-items: center !important; gap: 10px !important; height: auto !important; min-height: 44px !important; /* 触控目标下限 */ padding: 0 12px !important; margin: 2px 0 !important; border-radius: 11px !important; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; color: #333333 !important; font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-decoration: none !important; transition: background-color 150ms, color 150ms !important; } .nav-item svg { width: 18px !important; height: 18px !important; flex: none; opacity: .85; } .nav-item:hover { background: #F5F5F7 !important; color: #1D1D1F !important; } .nav-item.active, .nav-item[aria-current="page"] { background: #E8F1FC !important; color: #0066CC !important; font-weight: 600 !important; } .nav-item.active svg, .nav-item[aria-current="page"] svg { opacity: 1; } .nav-item.active::before, .nav-item.active::after { display: none !important; } .sidebar-footer { margin: 0 !important; padding: 12px 16px !important; border-radius: 0 !important; background: #FFFFFF !important; border: 0 !important; border-top: 1px solid #F0F0F0 !important; box-shadow: none !important; backdrop-filter: none !important; } .user-avatar { width: 34px !important; height: 34px !important; border-radius: 50% !important; border: 0 !important; background: #E8F1FC !important; background-image: none !important; color: #0066CC !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important; } .user-name { color: #1D1D1F !important; font-size: 14px !important; font-weight: 600 !important; } .user-role { color: #5A5A5F !important; font-size: 13px !important; } .btn-logout { min-width: 36px !important; min-height: 36px !important; width: 36px !important; height: 36px !important; border-radius: 8px !important; background: #FAFAFC !important; background-image: none !important; border: 1px solid #E0E0E0 !important; color: #333333 !important; box-shadow: none !important; } .btn-logout:hover { background: #F5F5F7 !important; color: #1D1D1F !important; } .page-header { min-height: 64px !important; padding: 14px 28px !important; gap: 16px !important; align-items: center !important; background: #FFFFFF !important; background-image: none !important; border-bottom: 1px solid #E0E0E0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .page-title { font-family: var(--font-body) !important; font-size: 21px !important; font-weight: 600 !important; color: #1D1D1F !important; letter-spacing: -.011em !important; line-height: 1.25 !important; } .page-subtitle { font-size: 14px !important; font-weight: 400 !important; color: #5A5A5F !important; margin-top: 2px !important; letter-spacing: 0 !important; } .page-body { padding: 24px 28px 40px !important; } .page-actions { gap: 10px !important; flex-wrap: wrap; } h1, h2, h3, h4, h5 { color: #1D1D1F !important; font-weight: 600 !important; letter-spacing: -.011em !important; } h1 { font-size: 28px !important; line-height: 1.2 !important; } h2 { font-size: 21px !important; } h3 { font-size: 17px !important; } h4 { font-size: 17px !important; } /* ========================================================================== 4 · 卡片与容器：发丝描边取代毛玻璃 ========================================================================== */ .card, .chart-card, .stat-card, .content-card, .task-card, .question-card, .settings-card, .table-wrap, .ai-outline-card, .exam-card, .record-card, .dept-tree-sidebar, .demo-card, .dash-risk-card, .dash-heat-card, .dash-trend-card, .dash-recent-card, .dash-home-task-card, .content-upload-card, .content-library-card, .courseware-job-card, .user-search-card, .user-role-card, .question-score-card, .question-capacity-card, .question-bank-card, .q-bank-card, .ai-preset-card, .dash-dept-summary, .dash-chart-box, .table-box, .list-box, .panel, .box { background: #FFFFFF !important; background-image: none !important; border: 1px solid #E0E0E0 !important; box-shadow: 0 1px 2px rgba(29, 29, 31, .04) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .card, .chart-card, .stat-card, .content-card, .task-card, .question-card, .settings-card, .table-wrap, .ai-outline-card, .exam-card, .record-card, .dept-tree-sidebar, .demo-card, .dash-risk-card, .dash-heat-card, .dash-trend-card, .dash-recent-card, .dash-home-task-card, .dash-chart-box, .table-box, .panel { border-radius: 18px !important; } .card-header, .chart-card-header, .content-card-header, .stat-card-header, .demo-card-head, .panel-head { min-height: 56px !important; padding: 16px 22px !important; background: transparent !important; background-image: none !important; border-bottom: 1px solid #F0F0F0 !important; backdrop-filter: none !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; } .card-body, .chart-card-body, .content-card-body, .panel-body { padding: 20px 22px !important; } .card-title, .chart-card-title, .content-card-title, .demo-card-title, .panel-title { font-family: var(--font-body) !important; font-size: 17px !important; font-weight: 600 !important; color: #1D1D1F !important; letter-spacing: -.011em !important; line-height: 1.3 !important; } .dash-card-sub, .demo-card-sub, .card-sub, .card-hint, .meta-label, .form-hint, .text-muted { font-size: 14px !important; font-weight: 400 !important; color: #5A5A5F !important; letter-spacing: 0 !important; } .card-link, .dash-card-link, .demo-card-link { font-size: 14px !important; font-weight: 400 !important; color: #0066CC !important; text-decoration: none !important; } .card-link:hover, .dash-card-link:hover, .demo-card-link:hover { text-decoration: underline !important; } .empty-state, .demo-empty, .dash-compact-empty, .question-filter-empty { color: #5A5A5F !important; font-size: 14px !important; } /* ========================================================================== 5 · 按钮：两档——主/次按钮全圆 44，工具按钮方角 36 ========================================================================== */ .btn, button:not(.nav-item):not(.modal-close):not(.btn-logout):not(.tab-btn) { font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0 !important; min-height: 44px !important; padding: 10px 22px !important; border-radius: 9999px !important; border: 1px solid transparent !important; box-shadow: none !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: background-color 150ms, border-color 150ms, color 150ms, transform 150ms !important; cursor: pointer; } .btn:active, button:active { transform: scale(.95); } .btn-primary { background: #0066CC !important; color: #FFFFFF !important; border-color: #0066CC !important; } .btn-primary:hover { background: #0058B0 !important; border-color: #0058B0 !important; } .btn-secondary, .btn-ghost, .btn-default { background: #FFFFFF !important; color: #0066CC !important; border-color: #0066CC !important; } .btn-secondary:hover, .btn-ghost:hover, .btn-default:hover { background: #E8F1FC !important; } .btn-danger, .btn-delete { background: #FFFFFF !important; color: #C4322B !important; border-color: #C4322B !important; } .btn-danger:hover, .btn-delete:hover { background: #FBE9E7 !important; } .btn-warning { background: #FFFFFF !important; color: #B45309 !important; border-color: #B45309 !important; } .btn-warning:hover { background: #FBF0E0 !important; } .btn-ai { background: #FAFAFC !important; color: #333333 !important; border-color: #E0E0E0 !important; } .btn-ai:hover { background: #F5F5F7 !important; } .btn[disabled], .btn:disabled, button[disabled] { opacity: .4 !important; cursor: not-allowed !important; transform: none !important; } .btn-full { width: 100% !important; } /* 工具按钮档：小号、方角 8px、36 视觉高 */ .btn-sm, .btn-xs, .btn-mini, .btn-icon, .btn-dl-chart, .tab-btn, .content-action-btn, .demo-show-more-btn, .table-actions .btn, .table-actions button, .page-actions .btn-sm, .card-header .btn-sm { min-height: 36px !important; padding: 8px 15px !important; border-radius: 8px !important; font-size: 14px !important; } .btn-icon, .content-action-btn { min-width: 36px !important; padding: 8px !important; } .btn-sm.btn-primary, .btn-dl-chart.btn-primary { background: #0066CC !important; } .content-action-btn { background: #FAFAFC !important; color: #333333 !important; border: 1px solid #E0E0E0 !important; } .content-action-btn:hover { background: #F5F5F7 !important; } /* 表格内的文字操作链接 */ .table-actions { white-space: nowrap !important; } .table-actions a, .table-actions .link, .btn-view, td a { color: #0066CC !important; font-size: 14px !important; text-decoration: none !important; } .table-actions a:hover, td a:hover { text-decoration: underline !important; } /* ========================================================================== 6 · 表单：三类控件严格同高 ========================================================================== */ input[type="text"], input[type="password"], input[type="number"], input[type="search"], input[type="email"], input[type="tel"], input[type="date"], input[type="datetime-local"], input:not([type]), select, textarea, .form-input, .input, .field, .select { min-height: 44px !important; height: 44px !important; padding: 0 14px !important; border-radius: 8px !important; border: 1px solid #E0E0E0 !important; background: #FFFFFF !important; background-image: none !important; color: #1D1D1F !important; font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0 !important; box-shadow: none !important; outline: none !important; appearance: none; -webkit-appearance: none; } textarea { height: auto !important; min-height: 96px !important; padding: 12px 14px !important; line-height: 1.5 !important; } select { background-image: none !important; padding-right: 34px !important; background-color: #FFFFFF !important; } select::-ms-expand { display: none; } input::placeholder, textarea::placeholder { color: #7A7A7A !important; } input:focus, select:focus, textarea:focus, .form-input:focus { border-color: #0071E3 !important; box-shadow: 0 0 0 3px rgba(0, 113, 227, .15) !important; } input[type="checkbox"], input[type="radio"] { min-height: 20px !important; height: 20px !important; width: 20px !important; min-width: 20px !important; accent-color: #0066CC; box-shadow: none !important; } .form-group { margin-bottom: 18px !important; } .form-group > label, .form-label, .field-label { display: block !important; font-size: 14px !important; font-weight: 600 !important; color: #1D1D1F !important; text-transform: none !important; letter-spacing: 0 !important; margin-bottom: 6px !important; } .form-hint { font-size: 14px !important; color: #5A5A5F !important; font-weight: 400 !important; } /* ========================================================================== 7 · 表格：行高 56、表头可读、去四边网格 ========================================================================== */ table { border-collapse: collapse !important; border-spacing: 0 !important; width: 100%; } thead th { height: 44px !important; padding: 0 18px !important; background: #F5F5F7 !important; background-image: none !important; color: #5A5A5F !important; /* 对羊皮纸 6.1:1 */ font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; border: 0 !important; border-bottom: 1px solid #E0E0E0 !important; white-space: nowrap !important; text-align: left !important; position: static !important; } tbody td { height: 56px !important; padding: 0 18px !important; color: #1D1D1F !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0 !important; border: 0 !important; border-top: 1px solid #F0F0F0 !important; vertical-align: middle !important; background-image: none !important; } tbody tr:first-child td { border-top: 0 !important; } tbody tr:hover td { background: #FAFAFC !important; } td.table-empty, td .empty-state { color: #5A5A5F !important; } /* 数值列右对齐并用等宽数字，防跳列 */ td.is-num, th.is-num, .table-num, td.num { text-align: right !important; font-variant-numeric: tabular-nums; } .table-wrap { overflow-x: auto !important; overflow-y: hidden; } .table-wrap table { min-width: 560px; } /* ========================================================================== 8 · 徽标与状态 ========================================================================== */ .badge, .status-badge, .tag, .pill, .dash-mini, .hosp-banner-tag, .content-format-badge, .weak-chip, .role-tag, .demo-status-pill { min-height: 24px !important; padding: 3px 10px !important; border-radius: 9999px !important; border: 1px solid transparent !important; box-shadow: none !important; background-image: none !important; font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.3 !important; display: inline-flex; align-items: center; gap: 4px; } .badge-blue, .badge-info, .status-blue { background: #E8F1FC !important; color: #0066CC !important; } .badge-green, .badge-success, .status-green { background: #E7F4EC !important; color: #157A3C !important; } .badge-red, .badge-danger, .status-red { background: #FBE9E7 !important; color: #C4322B !important; } .badge-orange, .badge-warning, .status-orange { background: #FBF0E0 !important; color: #B45309 !important; } .badge-gray, .badge-default, .badge-purple { background: #F0F0F0 !important; color: #333333 !important; } /* ========================================================================== 9 · 数值与统计 ========================================================================== */ .stat-value, .stat-val, .metric-value, .kpi-value, .demo-stat-num, .dashboard-number, .stat-value-compact { font-family: var(--font-body) !important; font-size: 34px !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -.02em !important; color: #1D1D1F !important; font-variant-numeric: tabular-nums; } .stat-label, .demo-stat-label, .stat-cap, .demo-stat-cap { font-size: 13px !important; font-weight: 400 !important; color: #5A5A5F !important; letter-spacing: 0 !important; text-transform: none !important; } .stat-item, .demo-stat-card, .stat-card { box-shadow: 0 1px 2px rgba(29, 29, 31, .04) !important; } /* 数字统一等宽，KPI 不跳动 */ .stat-value, .stat-val, .demo-stat-num, .kpi-value, .metric-value { font-variant-numeric: tabular-nums; } /* ========================================================================== 10 · 弹层与提示 ========================================================================== */ .modal-overlay, .exam-result-overlay { background: rgba(29, 29, 31, .34) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .modal, .modal-content, .article-preview-modal { background: #FFFFFF !important; background-image: none !important; border: 1px solid #E0E0E0 !important; border-radius: 18px !important; box-shadow: 0 24px 64px rgba(29, 29, 31, .18) !important; /* 弹层是全站唯一需要真实高程的地方 */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; max-height: 88vh !important; } .modal-header { padding: 20px 26px 16px !important; border-bottom: 1px solid #F0F0F0 !important; } .modal-body { padding: 20px 26px !important; font-size: 14px !important; color: #1D1D1F !important; } .modal-footer { padding: 16px 26px 20px !important; border-top: 1px solid #F0F0F0 !important; background: #FAFAFC !important; display: flex !important; justify-content: flex-end !important; gap: 10px !important; } .modal-title, #modal-title { font-size: 21px !important; font-weight: 600 !important; color: #1D1D1F !important; } .modal-close { width: 36px !important; height: 36px !important; min-height: 36px !important; border-radius: 8px !important; border: 0 !important; background: transparent !important; color: #5A5A5F !important; font-size: 20px !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer; } .modal-close:hover { background: #F5F5F7 !important; color: #1D1D1F !important; } .toast { background: #1D1D1F !important; background-image: none !important; color: #FFFFFF !important; border: 0 !important; border-radius: 11px !important; box-shadow: 0 12px 32px rgba(29, 29, 31, .22) !important; font-size: 14px !important; padding: 14px 18px !important; backdrop-filter: none !important; } .toast-important { background: #FFFFFF !important; color: #1D1D1F !important; border: 1px solid #E0E0E0 !important; } .spinner { border-color: #E0E0E0 !important; border-top-color: #0066CC !important; } /* ========================================================================== 11 · 登录页 / 启动页 ========================================================================== */ #login-screen, #boot-screen, .login-bg, .boot-bg { background: #F5F5F7 !important; background-image: none !important; } .login-orb, .boot-orb { display: none !important; } .login-card, .boot-card { background: #FFFFFF !important; background-image: none !important; border: 1px solid #E0E0E0 !important; border-radius: 18px !important; box-shadow: 0 24px 64px rgba(29, 29, 31, .10) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; width: min(420px, calc(100vw - 32px)) !important; padding: 36px 32px 30px !important; } .login-hospital-logo, .boot-logo { border-radius: 11px !important; background: #0066CC !important; background-image: none !important; } /* 登录头部容器只负责布局，不带背景——否则医院名称会被整块压在蓝色底上 */ .login-logo { background: transparent !important; } .login-title, .boot-title { font-family: var(--font-body) !important; font-size: 21px !important; font-weight: 600 !important; color: #1D1D1F !important; letter-spacing: -.011em !important; } .login-subtitle { font-size: 14px !important; font-weight: 400 !important; color: #5A5A5F !important; letter-spacing: 0 !important; } .login-hint a { color: #5A5A5F !important; font-size: 14px !important; } .login-hint a:hover { color: #0066CC !important; } .login-card .error-msg, .error-msg { background: #FBE9E7 !important; color: #C4322B !important; border: 1px solid #F0C9C4 !important; border-radius: 8px !important; font-size: 14px !important; padding: 10px 14px !important; } .login-card button[onclick*="togglePwd"] { color: #5A5A5F !important; font-size: 14px !important; right: 14px !important; } .login-card button[onclick*="togglePwd"]:hover { color: #0066CC !important; } /* ========================================================================== 12 · 可访问性 ========================================================================== */ :focus-visible { outline: 2px solid #0071E3 !important; outline-offset: 2px !important; } .nav-item:focus-visible, .btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #0071E3 !important; outline-offset: 2px !important; } /* 状态色只在有文字时才用；纯色块不作为唯一信息载体 */ [aria-hidden="true"].badge { color: transparent !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media (prefers-reduced-transparency: reduce) { .modal, .toast, .login-card, .sidebar { backdrop-filter: none !important; } } /* ========================================================================== 13 · 响应式：五档断点 1440 / 1180 / 1024 / 834 / 640 ========================================================================== */ /* 抽屉触发器（≤1024 由 JS 显示） */ .ui-burger { display: none; position: fixed; top: 12px; left: 12px; z-index: 70; width: 44px; height: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 11px !important; padding: 0 !important; background: #FFFFFF !important; color: #1D1D1F !important; border: 1px solid #E0E0E0 !important; box-shadow: 0 1px 2px rgba(29, 29, 31, .06) !important; cursor: pointer; } .ui-scrim { display: none; position: fixed; inset: 0; z-index: 55; background: rgba(29, 29, 31, .32); border: 0; } @media (max-width: 1440px) { .page-body { padding: 22px 24px 36px !important; } } @media (max-width: 1180px) { :root, html:root { --sidebar-w: 212px; } .page-header { padding: 14px 20px !important; } .page-body { padding: 20px 20px 32px !important; } .nav-item { font-size: 14px !important; } } /* —— 1024 以下：侧栏离场，改为抽屉；内容区拿回整幅宽度 —— */ @media (max-width: 1024px) { .sidebar { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; z-index: 60 !important; width: 264px !important; flex: 0 0 264px !important; height: 100vh !important; margin: 0 !important; border-radius: 0 18px 18px 0 !important; border-right: 1px solid #E0E0E0 !important; box-shadow: 0 24px 64px rgba(29, 29, 31, .16) !important; transform: translateX(-100%); transition: transform 220ms cubic-bezier(.4, 0, .2, 1) !important; will-change: transform; } body.ui-nav-open .sidebar { transform: translateX(0); } body.ui-nav-open .ui-scrim { display: block; } .ui-burger { display: inline-flex; } .main-content { width: 100% !important; max-width: 100% !important; } .page-header { padding-left: 68px !important; } .demo-topbar, .dash-home-header, .question-bank-topbar { padding-left: 68px !important; } .form-row, .form-3col, .form-4col, .form-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 834px) { .page-header { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; padding: 14px 16px 14px 68px !important; } .page-actions { justify-content: flex-start !important; } .page-body { padding: 16px 16px 28px !important; } .card-body, .chart-card-body { padding: 16px 16px !important; } .card-header, .chart-card-header { padding: 14px 16px !important; } .card, .chart-card, .content-card, .task-card, .question-card, .settings-card, .table-wrap, .demo-card, .record-card, .exam-card { border-radius: 11px !important; } .form-row, .form-3col, .form-4col, .form-grid { grid-template-columns: 1fr !important; } thead th { padding: 0 12px !important; } tbody td { padding: 0 12px !important; } .stat-value, .stat-val, .demo-stat-num { font-size: 28px !important; } .page-title { font-size: 21px !important; } } @media (max-width: 640px) { .sidebar { width: 248px !important; flex-basis: 248px !important; } .page-body { padding: 14px 12px 24px !important; } .page-header { padding: 12px 12px 12px 64px !important; } .modal { border-radius: 11px !important; max-height: 92vh !important; } .modal-header, .modal-body, .modal-footer { padding-left: 18px !important; padding-right: 18px !important; } .login-card { padding: 28px 22px 24px !important; border-radius: 11px !important; } .table-wrap table { min-width: 480px; } .btn, .btn-sm { padding: 10px 16px !important; } } /* ========================================================================== 14 · 权重收口：压过 main.css 尾段的同属性 !important -------------------------------------------------------------------------- 实测（why.json / resid.json）：main.css 尾部还有一层「末段微调」，用 `.sidebar .nav-item`（0,2,0）、`table thead th`（0,0,3）这类更高权重的 !important 压过了本层的单类选择器（0,1,0）。造成的残留： · 侧栏导航项实测 36px 高 —— 低于 44px 触控下限 · 选中项被判成 #FFFFFF 纯白 + 轻投影，与白色侧栏同色 —— 选中态不可辨 · 表头底色停在「近乎纯白、偏蓝」的半透明灰，未令牌化 本节只把选择器权重提上去（.nav-item 重复一次 → 0,3,0），不改 DOM 结构、 不动 main.css，仍可整层删除回滚。 ========================================================================== */ /* —— 侧栏导航项：44px 触控 + 可辨选中态 —— */ .sidebar .nav-item.nav-item { min-height: 44px !important; height: auto !important; margin: 2px 0 !important; padding: 0 12px !important; gap: 10px !important; border-radius: 11px !important; background: transparent !important; background-image: none !important; color: #333333 !important; font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0 !important; box-shadow: none !important; } .sidebar .nav-item.nav-item:hover { background: #F5F5F7 !important; color: #1D1D1F !important; transform: none !important; } .sidebar .nav-item.nav-item.active, .sidebar .nav-item.nav-item[aria-current="page"] { background: #E8F1FC !important; color: #0066CC !important; font-weight: 600 !important; box-shadow: none !important; } .sidebar .nav-item.nav-item svg { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; opacity: .85 !important; } .sidebar .nav-item.nav-item:hover svg { color: #333333 !important; opacity: 1 !important; } .sidebar .nav-item.nav-item.active svg, .sidebar .nav-item.nav-item[aria-current="page"] svg { color: #0066CC !important; opacity: 1 !important; } .sidebar .nav-item.nav-item.active::before, .sidebar .nav-item.nav-item.active::after { display: none !important; } .sidebar .nav-section-title.nav-section-title { font-size: 13px !important; font-weight: 600 !important; /* 段落小标题 600，不抢 700 */ color: #5A5A5F !important; letter-spacing: 0 !important; text-transform: none !important; padding: 6px 12px !important; } .sidebar-footer { background: #FFFFFF !important; background-image: none !important; } .sidebar-footer .user-name { font-size: 14px !important; font-weight: 600 !important; color: #1D1D1F !important; } .sidebar-footer .user-role { font-size: 13px !important; font-weight: 400 !important; color: #5A5A5F !important; } /* —— 表头：令牌化底色 #F5F5F7 + 44px 高 —— */ table thead th, .page-body .table-wrap thead th, .page-body .table-wrap table thead th { height: 44px !important; padding: 0 18px !important; background: #F5F5F7 !important; background-image: none !important; color: #5A5A5F !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; border: 0 !important; border-bottom: 1px solid #E0E0E0 !important; position: static !important; white-space: nowrap !important; } /* 窄屏仍需收紧表头内边距，需与上面的权重持平才生效 */ @media (max-width: 834px) { table thead th, .page-body .table-wrap table thead th { padding: 0 12px !important; } } /* ========================================================================== 15 · 内联样式兜底：把 13px 下限守住 -------------------------------------------------------------------------- 页面 JS 里原有 146 处内联 <13px 字号，已在源头（js/ 与 h5/）一并收敛为 13px。这里再留一道属性选择器兜底，覆盖运行时新插入、绕过源头收敛的节点 —— 内联样式不带 !important，因此选择器 + !important 可以合法胜出。 ========================================================================== */ [style*="font-size:10px"], [style*="font-size:11px"], [style*="font-size:12px"], [style*="font-size:10.5px"], [style*="font-size:11.5px"], [style*="font-size:12.5px"], [style*="font-size: 10px"], [style*="font-size: 11px"], [style*="font-size: 12px"] { font-size: 13px !important; } /* 字重只走 300/400/600/700 四级，去掉 500 与 800/900 */ [style*="font-weight:500"], [style*="font-weight: 500"] { font-weight: 400 !important; } [style*="font-weight:800"], [style*="font-weight: 800"], [style*="font-weight:900"], [style*="font-weight: 900"] { font-weight: 700 !important; } /* ========================================================================== 16 · 看板「重点任务完成进度」科室筛选下拉（豁免全局表单规格） -------------------------------------------------------------------------- main.css 的 demo 看板筛选器是「36px 蓝边容器 + 内嵌透明 select」，而第 9 节 全局表单规则（44px !important + 灰边框 !important）同样命中内嵌 select， 两者叠加把下拉撑爆、溢出容器，渲染成「中间竖线劈开 + 右侧错位白块」的 破碎形态。本节给出专属豁免：容器与内嵌 select 一体化为白底发丝边框胶囊， focus 蓝环落在容器上；不改动全局规则，整段删除即可回滚。 ========================================================================== */ .dash-demo .demo-task-dept-select { width: 200px !important; height: 34px !important; min-height: 0 !important; padding: 0 30px 0 12px !important; background: #FFFFFF !important; background-image: none !important; border: 1px solid #E0E0E0 !important; border-radius: 8px !important; box-shadow: none !important; display: flex !important; align-items: center !important; transition: border-color 150ms ease, box-shadow 150ms ease; } .dash-demo .demo-task-dept-select:hover { border-color: #C7C7CC !important; } .dash-demo .demo-task-dept-select:focus-within { border-color: #0066CC !important; box-shadow: 0 0 0 3px rgba(0, 102, 204, .15) !important; } .dash-demo .demo-task-dept-select select { height: 100% !important; min-height: 0 !important; border: 0 !important; background: transparent !important; background-image: none !important; padding: 0 !important; color: #1D1D1F !important; font-size: 13px !important; font-weight: 600 !important; line-height: normal !important; box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; } /* focus 态交给容器的 focus-within，select 自身不出双环 */ .dash-demo .demo-task-dept-select select:focus, .dash-demo .demo-task-dept-select select:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; } /* 箭头沿用 main.css 定位，颜色提为中性灰 #7A7A7A（原 #E0E0E0 过淡） */ .dash-demo .demo-task-dept-select::after { border-right: 1.7px solid #7A7A7A !important; border-bottom: 1.7px solid #7A7A7A !important; } /* ========================================================================== 17 · 任务下发卡片：操作按钮组（重新开始/通知/二维码/进度/删除…） -------------------------------------------------------------------------- 问题：全局按钮规格（36px 高）+ .table-actions 的 nowrap !important，把最多 7 个按钮压成一行塞进 252px 固定容器，溢出压到任务标题/徽章；整组又顶在 header 右上角，与标题第一行挤在一条线上。 改法：按钮组沉到 header 右下角（与标题区底部对齐）、允许换行、间距收紧、 按钮缩一号；标题行从此只和按钮组的"上边缘"以下区域无关，不再重叠。 纯加法覆盖，整段删除即可回滚。 ========================================================================== */ .task-card > .card-header .table-actions { white-space: normal !important; /* 抵消上方全局 nowrap，允许按钮组换行 */ flex-wrap: wrap !important; justify-content: flex-end !important; /* 尽量靠右 */ align-content: flex-end !important; /* 换行后的行也贴底 */ align-self: flex-end !important; /* 整组沉到 header 底部，避开标题第一行 */ gap: 5px !important; /* 缩小按钮间距（原 8px） */ row-gap: 5px !important; min-width: 0 !important; /* 去掉固定 252px，按内容自适应 */ max-width: 300px; margin-left: auto; } .task-card > .card-header .table-actions .btn.btn { min-height: 28px !important; /* 缩一号（第5节全局 44px 对卡片行内操作过大） */ height: auto !important; padding: 4px 11px !important; font-size: 13px !important; border-radius: 7px !important; white-space: nowrap; /* 单个按钮文字不折行，整组靠 wrap 换行 */ line-height: 1.3 !important; } /* ========================================================================== 18 · 成绩记录页 · 顶部统计概览（总次数 / 通过 / 未通过 / 平均分） -------------------------------------------------------------------------- 问题：四张 .stat-card 的数字此前被全局规则统一盖成墨色，四张卡片毫无 语义层次；卡片顶部的 nth-child 彩虹条（橙/蓝/绿/橙）语义还是反的 （未通过=绿条、通过=蓝条），误导视线；数字 700 偏重、间距松散。 改法：下线彩虹条；数字按语义着色（总次数·中性墨 / 通过·语义绿 / 未通过·语义红 / 平均分·主蓝），字重 700→600，间距收紧。 仅作用于 .stats-grid-records（records 页专属 class，不误伤他页）。 纯加法覆盖，整段删除即可回滚。 ========================================================================== */ .stats-grid-records { gap: 12px !important; } .stats-grid-records > .stat-card { padding: 16px 18px 14px !important; border: 1px solid #E0E0E0 !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(29, 29, 31, .04) !important; } /* 下线原顶部 3px 彩虹条与 hover 渐变条（语义错乱） */ .stats-grid-records > .stat-card::before, .stats-grid-records > .stat-card::after { display: none !important; } .stats-grid-records > .stat-card .stat-card-header { min-height: 0 !important; /* 抵消全局 56px 最小高（卡片高而空的元凶） */ padding: 0 !important; /* 抵消全局 16px 22px（叠加卡片内边距过空） */ border-bottom: 0 !important; /* 去分隔线，纯排版（Apple 风 KPI） */ margin-bottom: 10px !important; display: block !important; } .stats-grid-records > .stat-card .stat-value { font-weight: 600 !important; } /* 数字语义着色（specificity 0,4,0，高于全局 .stat-value 的 0,1,0 强制墨色） */ .stats-grid-records > .stat-card:nth-child(1) .stat-value { color: #1D1D1F !important; } .stats-grid-records > .stat-card:nth-child(2) .stat-value { color: #157A3C !important; } .stats-grid-records > .stat-card:nth-child(3) .stat-value { color: #C4322B !important; } .stats-grid-records > .stat-card:nth-child(4) .stat-value { color: #0066CC !important; } /* ========================================================================== 19 · 看板 KPI 卡「异常行为告警」· 底部「去处理→」文字按钮 -------------------------------------------------------------------------- 问题：main.css 设计意图是 13px 纯文字链接（float:right），但第 5 节全局 按钮档（button:not(...) 权重 0,4,1）把它强制成 44px 高 + 22px 大内边距 的胶囊，在固定 130px 高的 KPI 卡里装不下，整只探出卡片右下角—— 「去处理」三个字悬在卡片外。 改法：恢复文字链接形态（去高度、去内边距、去边框），13px / 600 主蓝， 悬停加下划线。选择器 0,5,1 确定压过全局档。 纯加法覆盖，整段删除即可回滚。 ========================================================================== */ .dash-demo .demo-hero-stats .demo-stat-card .demo-stat-cap.danger button { min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 0 0 8px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #0066CC !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0 !important; white-space: nowrap; float: right; } .dash-demo .demo-hero-stats .demo-stat-card .demo-stat-cap.danger button:hover { text-decoration: underline !important; } /* ========================================================================== 20 · 题库管理 · 课程目录树（「全部培训内容」+ 各课程行） -------------------------------------------------------------------------- 问题：第 5 节全局按钮档（button:not(...) 权重 0,4,1）把 main.css 设计的 34px 小圆角目录行强制撑成 44px 高、9999px 全圆胶囊、22px 大内边距； 同时课程名与题数都是 700 粗体，整棵树一团黑，和全站「正文 400 / 强调 600」 的层级不匹配，题数数字宽度不一、右侧参差——观感就是「字体别扭」。 改法：行按钮恢复 34px / 8px 圆角 / 9px 内边距；名称 13px/400、 选中行 600（靠蓝字+浅蓝底区分，不靠全家加粗）；题数 400 等宽数字、 浅一档灰。选择器带 #page-questions（1,x,x）稳过全局 0,4,1。 纯加法覆盖，整段删除即可回滚。 ========================================================================== */ #page-questions .question-side-title { font-weight: 600 !important; /* 13px 灰标签用 700 标题重过重 */ } #page-questions .question-course-nav button { min-height: 0 !important; height: 34px !important; /* 钉死行高：grid 行轨被匿名行内 strut 撑到 39px */ line-height: 20px !important; padding: 7px 9px !important; border-width: 0 !important; border-radius: 8px !important; font-size: 13px !important; letter-spacing: 0 !important; } #page-questions .question-course-nav button span { font-size: 13px !important; font-weight: 400 !important; /* 课程名常规字重 */ } #page-questions .question-course-nav button.active span { font-weight: 600 !important; /* 仅选中行强调 */ } #page-questions .question-course-nav button b { font-size: 13px !important; font-weight: 400 !important; /* 题数是次要信息，不需要粗体 */ font-variant-numeric: tabular-nums; /* 等宽数字，右侧列对齐 */ color: #7A7A7A !important; } #page-questions .question-course-nav button.active b { color: #0066CC !important; } /* ========================================================================== 21 · 异常考试行为页 · 统计卡（异常记录 / 切屏相关 / 超时提交 / 作答率低） -------------------------------------------------------------------------- 问题：与成绩记录页同款病灶——数字被全局 .stat-value 强制墨色（inline 的 语义 var 色被 !important 压掉，四个大黑数字无层次）；顶部 nth-child 彩虹条 语义错乱；卡体高而空（全局 56px header 最小高 + 22px 内边距 + 分隔线）。 改法：复用第 18 节方案，专属 class .stats-grid-risks（不误伤他页同结构）： 下线彩虹条与分隔线、收紧卡体，数字按本页语义着色—— 异常记录·语义红 / 切屏相关·警示橙 / 超时提交·语义红 / 作答率低·主蓝。 纯加法覆盖，整段删除即可回滚。 ========================================================================== */ .stats-grid-risks { gap: 12px !important; } .stats-grid-risks > .stat-card { padding: 16px 18px 14px !important; border: 1px solid #E0E0E0 !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(29, 29, 31, .04) !important; } .stats-grid-risks > .stat-card::before, .stats-grid-risks > .stat-card::after { display: none !important; } .stats-grid-risks > .stat-card .stat-card-header { min-height: 0 !important; padding: 0 !important; border-bottom: 0 !important; margin-bottom: 10px !important; display: block !important; } .stats-grid-risks > .stat-card .stat-value { font-weight: 600 !important; font-variant-numeric: tabular-nums; } .stats-grid-risks > .stat-card:nth-child(1) .stat-value { color: #C4322B !important; } .stats-grid-risks > .stat-card:nth-child(2) .stat-value { color: #B45309 !important; } .stats-grid-risks > .stat-card:nth-child(3) .stat-value { color: #C4322B !important; } .stats-grid-risks > .stat-card:nth-child(4) .stat-value { color: #0066CC !important; } /* ========================================================================== 22 · KPI 卡 · Apple Health 式浅色 tint（看板 hero 卡 + 成绩记录 + 异常考试行为） -------------------------------------------------------------------------- 问题：前三轮把统计卡收敛成"白底 + 黑字 + 语义数字"，治好了土味渐变与 彩虹条，但整卡无色显得素——真正的苹果数据卡（iOS 健康 / 健身）靠大面积 浅色 tint 底 + 同色发丝边框 + 语义色数字表达层次，而非纯白。 改法：每卡按语义铺 6~8% 同色系 tint 底；图标 chip 提为白底浮起； 数字用完整语义色。成绩记录页"总次数"保留白卡作中性基准锚点。 tint 值与语义令牌同源：蓝 #EFF5FC/#D7E5F5 · 绿 #EEF7F1/#D2E8DB · 橙 #FBF3E3/#F0E1C4 · 红 #FBEEEC/#F2D7D3（底色 / 边框）。 纯加法覆盖，整段删除即可回滚。 ========================================================================== */ /* —— 看板 hero 四卡：蓝 / 绿 / 橙 / 红 —— */ .dash-demo .demo-hero-stats .demo-stat-card.demo-kpi-total { background: #EFF5FC !important; border-color: #D7E5F5 !important; } .dash-demo .demo-hero-stats .demo-stat-card.demo-kpi-rate { background: #EEF7F1 !important; border-color: #D2E8DB !important; } .dash-demo .demo-hero-stats .demo-stat-card.demo-kpi-active { background: #FBF3E3 !important; border-color: #F0E1C4 !important; } .dash-demo .demo-hero-stats .demo-stat-card.demo-kpi-risk { background: #FBEEEC !important; border-color: #F2D7D3 !important; } .dash-demo .demo-hero-stats .demo-stat-card .demo-stat-icon { background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(29, 29, 31, .08) !important; } .dash-demo .demo-hero-stats .demo-stat-icon.blue { color: #0066CC !important; } .dash-demo .demo-hero-stats .demo-stat-icon.green { color: #157A3C !important; } .dash-demo .demo-hero-stats .demo-stat-icon.orange { color: #B45309 !important; } .dash-demo .demo-hero-stats .demo-stat-icon.red { color: #C4322B !important; } .dash-demo .demo-hero-stats .demo-stat-card.demo-kpi-total .demo-stat-num { color: #0066CC !important; } /* —— 成绩记录页：通过·绿 / 未通过·红 / 平均分·蓝（总次数留白卡作基准） —— */ .stats-grid-records > .stat-card:nth-child(2) { background: #EEF7F1 !important; border-color: #D2E8DB !important; } .stats-grid-records > .stat-card:nth-child(3) { background: #FBEEEC !important; border-color: #F2D7D3 !important; } .stats-grid-records > .stat-card:nth-child(4) { background: #EFF5FC !important; border-color: #D7E5F5 !important; } /* —— 异常考试行为页：红 / 橙 / 红 / 蓝 —— */ .stats-grid-risks > .stat-card:nth-child(1) { background: #FBEEEC !important; border-color: #F2D7D3 !important; } .stats-grid-risks > .stat-card:nth-child(2) { background: #FBF3E3 !important; border-color: #F0E1C4 !important; } .stats-grid-risks > .stat-card:nth-child(3) { background: #FBEEEC !important; border-color: #F2D7D3 !important; } .stats-grid-risks > .stat-card:nth-child(4) { background: #EFF5FC !important; border-color: #D7E5F5 !important; } /* ========================================================================== 23 · 题库管理 · 课程目录行图标（ 伪文件夹 → 真 SVG 文件夹） -------------------------------------------------------------------------- 问题：main.css 用 border + ::before 手搓的"文件夹"（14×11 描边框上挂个小 标签）在 1.5px 描边下像素发糊、标签错位，缩到行里像个破损方块，与整列 苹果风排版不搭。 改法：纯 CSS 不换 DOM——把 置空，用 mask 绘制一枚标准 16px 填充式 文件夹 SVG（currentColor 经 mask 染色，随文字色走：默认中性灰、选中行 自动变主蓝）。遮罩图为 data URI，无需改 JS 三份源。 纯加法覆盖，整段删除即可回滚。 ========================================================================== */ #page-questions .question-course-nav i { width: 16px !important; height: 16px !important; border: 0 !important; border-radius: 0 !important; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } #page-questions .question-course-nav i::before { content: none !important; /* 干掉手搓的"文件夹标签" */ } #page-questions .question-course-nav button i { color: #7A7A7A; /* 默认行：中性灰图标，不抢课程名 */ } #page-questions .question-course-nav button:hover i { color: #5A5A5F; } #page-questions .question-course-nav button.active i { color: #0066CC; /* 选中行：跟随蓝字 */ } /* ========================================================================== 24 · 培训内容卡片 · 查看/编辑/删除操作按钮（李总指定提亮） -------------------------------------------------------------------------- 问题：全局工具按钮档把 .content-action-btn 统一压成灰底灰字同款胶囊 （#FAFAFC 底 + #333 字 + #E0E0E0 边），main.css 里的语义色早被 !important 盖掉——查看、编辑、删除三个按钮长得一模一样，扫一眼分不清风险。 改法：按动作语义分色（与 KPI tint 同源）——查看·蓝（信息动作）、 编辑·橙（修改警示）、删除·红（危险动作）；浅 tint 底 + 同色字 + 同色 发丝边，hover 底色加深一档。AI出题保留蓝、重整理/转长图归中性。 纯加法覆盖，整段删除即可回滚。 ========================================================================== */ #page-content .content-action-btn { padding: 7px 12px !important; /* 恢复胶囊内边距（全局 8px 方 padding 偏挤） */ font-size: 13px !important; font-weight: 600 !important; border-radius: 9px !important; } /* 查看 · 蓝 */ #page-content .content-action-btn.action-view { background: #EFF5FC !important; color: #0066CC !important; border-color: #D7E5F5 !important; } #page-content .content-action-btn.action-view:hover { background: #E0EDF9 !important; } /* 编辑 · 警示橙（修改既有内容） */ #page-content .content-action-btn.action-edit { background: #FBF3E3 !important; color: #B45309 !important; border-color: #F0E1C4 !important; } #page-content .content-action-btn.action-edit:hover { background: #F7E9CF !important; } /* 删除 · 危险红 */ #page-content .content-action-btn.action-delete { background: #FBEEEC !important; color: #C4322B !important; border-color: #F2D7D3 !important; } #page-content .content-action-btn.action-delete:hover { background: #F7DED9 !important; } /* AI出题 · 蓝（与查看同系，但加粗边强调主操作） */ #page-content .content-action-btn.action-ai { background: #EFF5FC !important; color: #0066CC !important; border-color: #C2DCF7 !important; } #page-content .content-action-btn.action-ai:hover { background: #E0EDF9 !important; } /* 重整理 / 转长图 · 中性 */ #page-content .content-action-btn.action-muted { background: #F5F5F7 !important; color: #5A5A5F !important; border-color: #E0E0E0 !important; } #page-content .content-action-btn.action-muted:hover { background: #F0F0F0 !important; color: #1D1D1F !important; } /* ========================================================================== 25 · AI 出题弹窗 · 档位卡 / 题量分值 / 总分校验 / 主按钮 -------------------------------------------------------------------------- 问题（李总反馈"选题目数量时没有颜色变化，很多按钮都没有颜色，没有交互"）： 本层第 4 节把 .ai-preset-card 收进了"卡片发丝描边"白名单，第 5 节的全局 按钮档又给了 `border:1px solid transparent + border-radius:9999px`，两处 都是 !important —— 而 content.js 是用**内联样式**切选中态的，内联非 !important 打不过样式表 !important，于是： · 三张档位卡全部 = 白底 + 全透明边 + 9999px 圆角，连选中那张也一样， 看上去就是三段白底正文，压根不像能点； · 只读/可编辑两种题量框计算样式逐项相同（白底 / #1D1D1F 字 / #E0E0E0 边），选"自由组合"解锁后没有任何视觉反馈； · .btn-ai 被压成 #FAFAFC 灰底灰字，"开始生成"这个主操作像禁用态。 改法：本节全部用 `#modal-body / #modal-footer` 前缀（(1,1,0) 级）压过上面 两处 (0,1,0)/(0,4,1)，纯加法覆盖： · 档位卡恢复真卡片形态（14px 圆角 + 可见发丝边 + 左侧语义色竖条）， 三档各配一色身份，hover 浮起，选中转浅 tint + 同色描边 + 右上 ✓ 徽标； · 题量/分值框分"锁定"与"可改"两态：锁定=灰底灰字、可改=白底蓝字蓝边； · 总分校验条收成一条灰底圆角 strip，数字用等宽数字对齐； · "开始生成"分可用/不可用两态——可用=主蓝实心，不可用=灰填充（不用 半透明，保持苹果风）； · 补回被 `appearance:none` 吃掉的"难易度"下拉箭头（只作用于本弹窗）。 另：两组 content.js 的题量/分值排布不同——A 组（_stage/A，8 个实例）用 .ai-question-config-grid「数量+分值」成对成行，本来就整齐；B 组（_stage/B， 仅 hts2）用两个 form-3col 装 8 个字段，3 列放 4 个会折成 3+1、右边空一格。 用 :has() 精确命中"含第 4 个 form-group"的那两个网格改成 2×2（tasks.js / settings.js 里的 form-3col 只有 3 个子项，不受影响；:has 不支持的浏览器 则本条不生效，等同现状，无副作用。已实测本环境 CSS.supports(':has(*)') = true）。 纯加法覆盖，整段删除即可回滚。 ========================================================================== */ /* —— 档位卡：三档一行，恢复卡片形态 —— */ #modal-body > div:has(> .ai-preset-card) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #modal-body .ai-preset-card { position: relative !important; overflow: hidden !important; text-align: left !important; min-height: 0 !important; padding: 14px 14px 14px 20px !important; border-radius: 14px !important; border: 1px solid #E0E0E0 !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(29, 29, 31, .04) !important; transition: background-color 150ms, border-color 150ms, box-shadow 150ms, transform 150ms !important; } /* 左侧语义色竖条：未选中也保留各档身份色，不再是一片白 */ #modal-body .ai-preset-card::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 3px; border-radius: 0 3px 3px 0; background: currentColor; opacity: .45; transition: opacity 150ms !important; } #modal-body .ai-preset-card[data-preset="standard"] { color: #0066CC !important; } #modal-body .ai-preset-card[data-preset="expanded"] { color: #157A3C !important; } #modal-body .ai-preset-card[data-preset="custom"] { color: #B45309 !important; } #modal-body .ai-preset-card > div:first-child { font-size: 15px !important; font-weight: 700 !important; color: #1D1D1F !important; padding-right: 24px !important; /* 给右上角 ✓ 徽标留位，标题不钻到徽标底下 */ } #modal-body .ai-preset-card > div:last-child { color: #5A5A5F !important; /* 原 --text-tertiary 偏浅，正文级灰更易读 */ } /* hover：浮起 + 边框转本档浅色 + 竖条点亮 */ #modal-body .ai-preset-card:hover { background: #FAFAFC !important; box-shadow: 0 6px 18px rgba(29, 29, 31, .08) !important; transform: translateY(-1px) !important; } #modal-body .ai-preset-card:hover::before { opacity: 1 !important; } #modal-body .ai-preset-card[data-preset="standard"]:hover { border-color: #C2DCF7 !important; } #modal-body .ai-preset-card[data-preset="expanded"]:hover { border-color: #B4D6BF !important; } #modal-body .ai-preset-card[data-preset="custom"]:hover { border-color: #E8CFA3 !important; } /* 选中：浅 tint 底 + 本档色描边（1px 边 + inset 描边叠出 2px 观感，避免位移）+ 右上 ✓ */ #modal-body .ai-preset-card.active { transform: none !important; box-shadow: 0 8px 22px rgba(29, 29, 31, .10) !important; } #modal-body .ai-preset-card.active::before { opacity: 1 !important; } #modal-body .ai-preset-card.active::after { content: "✓"; position: absolute; top: 11px; right: 11px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1; color: #FFFFFF; } /* 徽标底色按档位显式给（不能复用 currentColor——本规则里 currentColor 已被设成白色） */ #modal-body .ai-preset-card[data-preset="standard"].active::after { background: #0066CC; } #modal-body .ai-preset-card[data-preset="expanded"].active::after { background: #157A3C; } #modal-body .ai-preset-card[data-preset="custom"].active::after { background: #B45309; } #modal-body .ai-preset-card[data-preset="standard"].active { background: #EFF5FC !important; border-color: #0066CC !important; box-shadow: 0 8px 22px rgba(0, 102, 204, .16), inset 0 0 0 1px #0066CC !important; } #modal-body .ai-preset-card[data-preset="standard"].active > div:first-child { color: #0066CC !important; } #modal-body .ai-preset-card[data-preset="expanded"].active { background: #EEF7F1 !important; border-color: #157A3C !important; box-shadow: 0 8px 22px rgba(21, 122, 60, .16), inset 0 0 0 1px #157A3C !important; } #modal-body .ai-preset-card[data-preset="expanded"].active > div:first-child { color: #157A3C !important; } #modal-body .ai-preset-card[data-preset="custom"].active { background: #FBF3E3 !important; border-color: #B45309 !important; box-shadow: 0 8px 22px rgba(180, 83, 9, .16), inset 0 0 0 1px #B45309 !important; } #modal-body .ai-preset-card[data-preset="custom"].active > div:first-child { color: #B45309 !important; } #modal-body .ai-preset-card:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(0, 102, 204, .18), 0 8px 22px rgba(29, 29, 31, .10) !important; } /* —— 题量 / 分值框：锁定态 vs 可改态 —— */ #modal-body .ai-qty-input, #modal-body .ai-score-input { font-variant-numeric: tabular-nums !important; letter-spacing: .01em !important; transition: background-color 150ms, border-color 150ms, color 150ms !important; } /* 锁定（预设档）：灰底灰字，明确"由档位决定" */ #modal-body .ai-qty-input[readonly], #modal-body .ai-score-input[readonly] { background: #F5F5F7 !important; border-color: #E8E8ED !important; color: #5A5A5F !important; font-weight: 600 !important; cursor: not-allowed !important; box-shadow: none !important; } #modal-body .ai-qty-input[readonly]:hover, #modal-body .ai-score-input[readonly]:hover { background: #F5F5F7 !important; /* 锁定态不给 hover 反馈，避免误以为可改 */ border-color: #E8E8ED !important; } /* 可改（自由组合）：白底蓝字蓝边，一眼看出解锁了 */ #modal-body .ai-qty-input:not([readonly]), #modal-body .ai-score-input:not([readonly]) { background: #FFFFFF !important; border-color: #C2DCF7 !important; color: #0066CC !important; font-weight: 700 !important; cursor: text !important; box-shadow: 0 1px 2px rgba(0, 102, 204, .06) !important; } #modal-body .ai-qty-input:not([readonly]):hover, #modal-body .ai-score-input:not([readonly]):hover { background: #F7FAFE !important; border-color: #0066CC !important; } #modal-body .ai-qty-input:not([readonly]):focus, #modal-body .ai-score-input:not([readonly]):focus { border-color: #0066CC !important; box-shadow: 0 0 0 3px rgba(0, 102, 204, .18) !important; } /* —— 难易度下拉：补回被 appearance:none 吃掉的箭头 —— */ #modal-body #ai-difficulty { padding-right: 40px !important; font-weight: 600 !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 16px 16px !important; cursor: pointer !important; } /* —— B 组布局（form-3col 版）：3 列装 4 个字段会折成 3+1，改 2×2 —— */ #modal-body > .form-3col:has(> .form-group:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* —— 总分校验条：灰底圆角 strip，数字等宽对齐 —— */ #modal-body #ai-score-preview { background: #F5F5F7 !important; border: 1px solid #E8E8ED !important; border-radius: 11px !important; padding: 10px 14px !important; margin-top: 14px !important; font-size: 13px !important; color: #5A5A5F !important; line-height: 1.6 !important; font-variant-numeric: tabular-nums !important; } #modal-body #ai-score-preview strong { font-size: 15px !important; font-weight: 700 !important; } /* —— 底部主按钮：可用=主蓝实心，不可用=灰填充（不用半透明） —— */ #modal-footer #ai-gen-btn:not([disabled]) { background: #0066CC !important; color: #FFFFFF !important; border-color: #0066CC !important; box-shadow: 0 4px 14px rgba(0, 102, 204, .24) !important; } #modal-footer #ai-gen-btn:not([disabled]):hover { background: #0058B0 !important; border-color: #0058B0 !important; box-shadow: 0 6px 18px rgba(0, 102, 204, .3) !important; } #modal-footer #ai-gen-btn[disabled] { background: #E8E8ED !important; color: #8E8E93 !important; border-color: #E8E8ED !important; opacity: 1 !important; box-shadow: none !important; cursor: not-allowed !important; }