/* ========================================================= * CodeShare 大厂级科技蓝设计系统（三主题：Azure / Lark / Nova） * 严格遵循去 AI 味规范：扁平、克制、信息密度对标飞书/Notion/Linear * 通过切换主题 * 默认主题：Azure（微软 Fluent 风） * ========================================================= */ /* ---------- 默认 Azure 主题（微软 Fluent 风） ---------- */ :root, :root[data-theme="azure"] { --brand: #0F6CBD; --brand-hover: #0B5CA6; --brand-soft: #E8F1FA; --brand-2: #0F6CBD; --bg: #F5F6F7; --card: #FFFFFF; --border: #E0E3E8; --text: #1F2733; --text-2: #5F6B7A; --text-3: #9AA3AF; --nav-bg: #FFFFFF; --nav-text: #3A4657; --nav-soft: #E8F1FA; --nav-active-text: var(--brand); --text-on-nav: #3A4657; --radius: 6px; --radius-lg: 8px; --shadow: 0 1px 2px rgba(16, 32, 48, .06); --shadow-card: 0 1px 2px rgba(16, 32, 48, .06); /* ===== 设计系统扩展令牌（2026-09 UI 整改：间距/字号/层级/动效/焦点/控件）===== */ /* 间距：4px 基准 8pt 栅格 */ --space-1: 0.25rem; /* 4px 图标内紧凑间距 */ --space-2: 0.5rem; /* 8px 相关控件内间距 */ --space-3: 0.75rem; /* 12px 表单项间距 */ --space-4: 1rem; /* 16px 卡片内边距 */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px 卡片间距/区块内边距 */ --space-8: 2rem; /* 32px 大区块间距 */ --space-10: 2.5rem; /* 40px 页面级留白 */ /* 字号阶（中小学护眼场景，整体偏大半级；后台密集界面用 base） */ --fs-xs: 0.75rem; /* 12px 徽章/时间戳 */ --fs-sm: 0.8125rem; /* 13px 表格/次级文字 */ --fs-base: 0.875rem; /* 14px 管理后台默认正文 */ --fs-md: 0.9375rem; /* 15px */ --fs-lg: 1rem; /* 16px 学生端正文 */ --fs-xl: 1.125rem; /* 18px 卡片标题/题面 */ --fs-2xl: 1.25rem; /* 20px 页面副标题 */ --fs-3xl: 1.5rem; /* 24px 页面主标题 */ /* 行高 */ --lh-xs: 1.25; /* 标题 */ --lh-sm: 1.4; /* 控件/短文本 */ --lh-base: 1.6; /* 正文 */ --lh-lg: 1.8; /* 长文本阅读（护眼） */ /* 圆角（遵循 6-8px 规范，禁止大圆角），sm 为输入框/小徽章 */ --radius-sm: 4px; --radius-xl: 10px; /* 大型容器上限 */ /* 阴影三档（克制，hover 才允许升档），sm 跟随主题卡片阴影 */ --shadow-sm: var(--shadow-card); --shadow-md: 0 2px 8px rgba(16, 32, 48, .08); --shadow-lg: 0 8px 24px rgba(16, 32, 48, .12); /* 层级：收敛全站 24 个野生 z-index，新代码必须引用令牌 */ --z-base: 1; --z-sticky: 100; /* 吸顶栏/分页 */ --z-dropdown: 1000; /* 下拉菜单 */ --z-header: 1001; /* 顶部导航（高于下拉） */ --z-modal: 2000; /* 弹窗 */ --z-toast: 3000; /* 全局提示 */ --z-tooltip: 9999; /* 文字气泡（最高） */ /* 动效：时长三档（150/200/300ms，禁用 transition:all 默认 0.3s） */ --dur-fast: 150ms; /* 按钮/开关即时反馈 */ --dur-base: 200ms; /* hover/菜单 */ --dur-slow: 300ms; /* 弹窗/面板 */ --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* 键盘焦点环（白底外环+品牌蓝内环，任何底色上都可见） */ --focus-ring: 0 0 0 2px var(--card), 0 0 0 4px var(--brand); /* 控件尺寸：主按钮 36-40px（用户既定规范） */ --control-height: 2.25rem; /* 36px 默认按钮/输入框 */ --control-height-lg: 2.5rem; /* 40px 主操作按钮 */ --success: #16A34A; --warning: #D97706; --danger: #DC2626; --info: var(--brand); /* 语义色：文字加深档（浅底上的文字，对比度达 AA）+ 浅底档（徽章/提示条） */ --success-text: #15803D; --warning-text: #B45309; --danger-text: #B91C1C; --success-soft: #E9F6EE; --warning-soft: #FCF3E2; --danger-soft: #FCEBEB; /* 品牌渐变（替代旧紫渐变 #667eea→#764ba2），同色系克制渐变 */ --brand-gradient: linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 100%); --font-stack: "Segoe UI", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; /* 兼容旧变量名（base.css/style.css 中使用） */ --primary-color: var(--brand); --primary-hover: var(--brand-hover); --secondary-color: var(--brand-2); --warning-color: var(--warning); --danger-color: var(--danger); --info-color: var(--brand); --success-color: var(--success); --text-color: var(--text); --text-light: var(--text-2); --bg-color: var(--bg); --bg-dark: var(--nav-bg); --border-color: var(--border); --login-primary: var(--brand); --login-primary-hover: var(--brand-hover); --login-primary-light: var(--brand-soft); --login-text: var(--text); --login-text-secondary: var(--text-2); --login-text-muted: var(--text-3); --login-border: var(--border); --login-border-focus: var(--brand); --login-bg: var(--bg); --login-white: var(--card); --login-error: var(--danger); /* ===== 子系统变量别名（dazi / student-mgmt / modals-v2 等）===== */ --primary: var(--brand); --primary-dark: var(--brand-hover); --primary-hover: var(--brand-hover); --primary-light: var(--brand-soft); --primary-bg: var(--brand-soft); --primary-gradient: var(--brand); --bg-card: var(--card); --bg-light: var(--bg); --text-light: var(--text-2); --text-lighter: var(--text-3); --m2-primary: var(--brand); --m2-primary-dark: var(--brand-hover); --m2-bg: var(--card); --m2-bg-secondary: var(--bg); --m2-border: var(--border); --m2-text: var(--text); --m2-text-secondary: var(--text-2); --m2-text-light: var(--text-3); --m2-shadow: var(--shadow-card); --m2-radius: var(--radius); --m2-radius-sm: var(--radius); --m2-radius-lg: var(--radius-lg); } /* ---------- Lark 蓝（飞书风） ---------- */ :root[data-theme="lark"] { --brand: #3370FF; --brand-hover: #2B5FE8; --brand-soft: #EDF2FF; --brand-2: #588AFF; --bg: #F5F6F7; --card: #FFFFFF; --border: #E8EAED; --text: #1F2329; --text-2: #646A73; --text-3: #A8ABB3; --nav-bg: #FFFFFF; --nav-text: #1F2329; --nav-soft: #EDF2FF; --nav-active-text: var(--brand); --text-on-nav: #1F2329; --radius: 8px; --radius-lg: 10px; --radius-xl: 12px; --shadow: 0 2px 8px rgba(31, 35, 41, .06); --shadow-card: 0 2px 8px rgba(31, 35, 41, .06); --shadow-md: 0 2px 8px rgba(31, 35, 41, .08); --shadow-lg: 0 8px 24px rgba(31, 35, 41, .12); --font-stack: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; } /* ---------- Nova 深空蓝（深色侧边栏，专业感） ---------- */ :root[data-theme="nova"] { --brand: #2E6BE6; --brand-hover: #2459C9; --brand-soft: #E9F0FE; --brand-2: #3B7BFF; --bg: #F4F6FA; --card: #FFFFFF; --border: #E3E8F0; --text: #1B2537; --text-2: #5A6B85; --text-3: #93A1BB; --nav-bg: #0C1B33; --nav-text: #8FA3C4; --nav-soft: rgba(46, 107, 230, .18); --nav-active-text: #FFFFFF; --text-on-nav: #FFFFFF; --radius: 6px; --radius-lg: 8px; --shadow: 0 1px 3px rgba(12, 27, 51, .08); --shadow-card: 0 1px 3px rgba(12, 27, 51, .08); --shadow-md: 0 2px 10px rgba(12, 27, 51, .10); --shadow-lg: 0 8px 28px rgba(12, 27, 51, .16); } /* ========================================================= * 全局基础重置 * 注意：body.cs-raw-theme 为全屏应用/游戏页豁免（Scratch 编辑器、 * 监控大屏、太空打字游戏等自带深色场景），不强制浅底深字。 * ========================================================= */ html { background: var(--bg); } body:not(.cs-raw-theme) { background: var(--bg) !important; color: var(--text) !important; /* v3 护眼排版：基准字号 15px，行高 1.65，降低长时间阅读疲劳 */ font-size: 15px !important; line-height: 1.65 !important; } html, body { font-family: var(--font-stack) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 链接主色 */ a { color: var(--brand); } a:hover { color: var(--brand-hover); } /* ========================================================= * 卡片统一规范：白底 + 1px 细边框 + 6-8px 圆角 + 极淡投影 * ========================================================= */ .admin-container, .admin-header, .admin-sidebar, .admin-content > div, .card, .course-card, .problem-card, .modal, .modal-content, .login-wrapper, .classroom-monitor-container, .student-mgmt-container, .course-manage-container, .campus-card, .class-card, .user-card, .question-card, .tab-content, .tab-pane, .data-panel, .stats-card, .info-card, .profile-card, .achievement-card, .quiz-mode-card, .exam-card, .contest-card, .training-card, .homework-card { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-card) !important; } /* 大圆角降级到 6-8px */ .admin-header, .admin-sidebar, .login-wrapper, .modal-content, .course-card { border-radius: var(--radius-lg) !important; } /* ========================================================= * 顶部导航/页面头：取消紫蓝渐变，统一品牌色或浅色 * ========================================================= */ .page-header, .admin-header, .classroom-monitor-header, .student-mgmt-header, .course-manage-header, .tab-header, .problem-header, .exam-header, .contest-header, .training-header, .homework-header { background: var(--nav-bg) !important; color: var(--text) !important; box-shadow: var(--shadow-card) !important; border-bottom: 1px solid var(--border) !important; } /* 页面标题字色 */ .page-header h1, .page-header h2, .admin-header h1, .admin-header h2, .classroom-monitor-header h1, .classroom-monitor-header h2, .student-mgmt-header h1, .student-mgmt-header h2, .course-manage-header h1, .course-manage-header h2 { color: var(--text) !important; font-weight: 600 !important; } /* Nova 主题：顶栏与侧边栏深色 */ :root[data-theme="nova"] .page-header, :root[data-theme="nova"] .admin-header, :root[data-theme="nova"] .classroom-monitor-header, :root[data-theme="nova"] .student-mgmt-header, :root[data-theme="nova"] .course-manage-header, :root[data-theme="nova"] .admin-sidebar, :root[data-theme="nova"] .sidebar-menu { background: var(--nav-bg) !important; color: #FFFFFF !important; } :root[data-theme="nova"] .page-header h1, :root[data-theme="nova"] .page-header h2, :root[data-theme="nova"] .admin-header h1, :root[data-theme="nova"] .admin-header h2, :root[data-theme="nova"] .admin-header .user-info, :root[data-theme="nova"] .admin-header .user-info span, :root[data-theme="nova"] .sidebar-info, :root[data-theme="nova"] .sidebar-info div, :root[data-theme="nova"] .sidebar-info span, :root[data-theme="nova"] .sidebar-menu li { color: var(--nav-text) !important; } :root[data-theme="nova"] .admin-header .user-info .btn, :root[data-theme="nova"] .page-header .btn, :root[data-theme="nova"] .admin-header .role-badge { color: #FFFFFF !important; } /* ========================================================= * 侧边栏导航：激活项浅蓝底 + 蓝字 + 6px 圆角 * ========================================================= */ .sidebar-menu li, .nav-item, .menu-item { color: var(--nav-text) !important; border-radius: var(--radius) !important; transition: background-color .15s ease, color .15s ease !important; } .sidebar-menu li:hover, .nav-item:hover, .menu-item:hover { background: var(--brand-soft) !important; color: var(--brand) !important; } .sidebar-menu li.active, .nav-item.active, .menu-item.active, .sidebar-menu li.active > span { background: var(--brand-soft) !important; color: var(--brand) !important; font-weight: 600 !important; border-radius: var(--radius) !important; margin-right: 0 !important; background-image: none !important; } /* Nova 深色侧边栏：激活项白字 + 半透明蓝底 */ :root[data-theme="nova"] .sidebar-menu li.active, :root[data-theme="nova"] .nav-item.active, :root[data-theme="nova"] .menu-item.active, :root[data-theme="nova"] .sidebar-menu li.active > span { background: var(--nav-soft) !important; color: #FFFFFF !important; } :root[data-theme="nova"] .sidebar-menu li:hover, :root[data-theme="nova"] .nav-item:hover, :root[data-theme="nova"] .menu-item:hover { background: rgba(255, 255, 255, .06) !important; color: #FFFFFF !important; } /* ========================================================= * 按钮：主按钮实心品牌蓝 / 次按钮白底蓝字 * ========================================================= */ .btn, .btn-login, .nav-btn, .btn-primary, .btn-secondary, .btn-info, button { border-radius: var(--radius) !important; font-weight: 500 !important; transition: background-color .15s ease, border-color .15s ease, color .15s ease !important; box-shadow: none !important; } /* 主按钮：实心品牌蓝、白字 */ .btn-primary, .btn-login, .nav-btn-primary, .btn.btn-primary, button.btn-primary, input[type="submit"].btn-primary { background: var(--brand) !important; color: #FFFFFF !important; border: 1px solid var(--brand) !important; background-image: none !important; } .btn-primary:hover, .btn-login:hover:not(:disabled), .nav-btn-primary:hover { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; color: #FFFFFF !important; transform: none !important; box-shadow: none !important; } /* 次按钮：白底 + 浅灰边框，hover 文字变蓝 */ .btn-secondary, .nav-btn-secondary, .btn-info, .nav-btn-info, .btn-success, .nav-btn-success, .btn-warning, .nav-btn-warning, .btn-danger, .nav-btn-danger, .btn.btn-secondary, .btn.btn-info, .btn.btn-success, .btn.btn-warning, .btn.btn-danger { background: var(--card) !important; color: var(--text) !important; border: 1px solid var(--border) !important; background-image: none !important; } .btn-secondary:hover, .nav-btn-secondary:hover, .btn-info:hover, .nav-btn-info:hover, .btn-success:hover, .nav-btn-success:hover, .btn-warning:hover, .nav-btn-warning:hover, .btn-danger:hover, .nav-btn-danger:hover { color: var(--brand) !important; border-color: var(--brand) !important; background: var(--brand-soft) !important; transform: none !important; box-shadow: none !important; } /* 仅保留 danger 按钮的红色提示 */ .btn-danger, .nav-btn-danger { color: var(--danger) !important; border-color: rgba(220, 38, 38, .4) !important; background: var(--card) !important; } .btn-danger:hover, .nav-btn-danger:hover { background: rgba(220, 38, 38, .08) !important; color: var(--danger) !important; border-color: var(--danger) !important; } /* 仅保留 success 按钮的绿色提示 */ .btn-success, .nav-btn-success { color: var(--success) !important; border-color: rgba(22, 163, 74, .4) !important; } .btn-success:hover, .nav-btn-success:hover { background: rgba(22, 163, 74, .08) !important; color: var(--success) !important; border-color: var(--success) !important; } /* 仅保留 warning 按钮的橙色提示 */ .btn-warning, .nav-btn-warning { color: var(--warning) !important; border-color: rgba(217, 119, 6, .4) !important; } .btn-warning:hover, .nav-btn-warning:hover { background: rgba(217, 119, 6, .08) !important; color: var(--warning) !important; border-color: var(--warning) !important; } /* ========================================================= * 输入框：聚焦时品牌蓝边框 + 1px ring * ========================================================= */ input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], textarea, select { border: 1px solid var(--border) !important; border-radius: var(--radius) !important; background: var(--card) !important; color: var(--text) !important; font-family: var(--font-stack) !important; transition: border-color .15s ease, box-shadow .15s ease !important; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="url"]:focus, input[type="tel"]:focus, textarea:focus, select:focus { outline: none !important; border-color: var(--brand) !important; box-shadow: 0 0 0 1px var(--brand), 0 0 0 3px rgba(15, 108, 189, .12) !important; } /* ========================================================= * 登录页：保留背景图（不透光遮罩、不模糊） * ========================================================= */ .login-page { background: transparent !important; background-image: none !important; } .login-background { opacity: 1 !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .login-wrapper { border-radius: var(--radius-lg) !important; box-shadow: 0 8px 32px rgba(16, 32, 48, .10) !important; } /* 顶部装饰条改为品牌色 */ .login-wrapper::before { background: var(--brand) !important; background-image: none !important; } .login-panel-header h2 { color: var(--text) !important; } .login-panel-header p, .login-panel-footer p { color: var(--text-2) !important; } .login-form input { border: 1px solid var(--border) !important; border-radius: var(--radius) !important; background: var(--card) !important; color: var(--text) !important; } /* 密码框右侧保留眼睛切换按钮，需 40px 右内边距防止文字被眼睛遮挡；左侧装饰图标已移除，统一使用全局 12px 内边距 */ .login-form input[type="password"] { padding-right: 40px !important; } .login-form input:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 1px var(--brand), 0 0 0 3px rgba(15, 108, 189, .12) !important; } /* 登录按钮：扁平品牌蓝 */ .btn-login { background: var(--brand) !important; background-image: none !important; border: none !important; color: #FFFFFF !important; border-radius: var(--radius) !important; font-weight: 600 !important; box-shadow: none !important; } .btn-login:hover:not(:disabled) { background: var(--brand-hover) !important; transform: none !important; box-shadow: none !important; } /* ========================================================= * 表格：表头浅灰小字、行分隔线、无斑马纹 * ========================================================= */ table, .table { background: var(--card) !important; border-collapse: collapse !important; border-radius: var(--radius) !important; overflow: hidden; } table thead th, table thead td, .table thead th { background: var(--bg) !important; color: var(--text-3) !important; font-weight: 500 !important; font-size: 13px !important; text-transform: none !important; border-bottom: 1px solid var(--border) !important; } table tbody tr, .table tbody tr { border-bottom: 1px solid var(--border) !important; background: var(--card) !important; } table tbody tr:hover, .table tbody tr:hover { background: var(--brand-soft) !important; } /* ========================================================= * 徽章/标签：圆角胶囊、浅底深字 * ========================================================= */ .badge, .role-badge, .campus-badge, .tag, .label, .chip, .pill { border-radius: 999px !important; font-size: 12px !important; font-weight: 500 !important; padding: 2px 10px !important; background-image: none !important; } .role-badge { background: var(--brand-soft) !important; color: var(--brand) !important; } .campus-badge { background: rgba(22, 163, 74, .1) !important; color: var(--success) !important; } /* ========================================================= * 模态框：白底 + 6-8px 圆角 + 极淡投影 * ========================================================= */ .modal, .modal-content, .dialog, .popup { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: 0 8px 32px rgba(16, 32, 48, .12) !important; } .modal-header, .dialog-header, .popup-header { border-bottom: 1px solid var(--border) !important; color: var(--text) !important; } /* ========================================================= * 选项卡 / Tabs * ========================================================= */ .tab, .tab-btn, .nav-tab { color: var(--text-2) !important; border-radius: var(--radius) !important; transition: background-color .15s ease, color .15s ease !important; } .tab.active, .tab-btn.active, .nav-tab.active { color: var(--brand) !important; background: var(--brand-soft) !important; font-weight: 600 !important; } /* ========================================================= * 渐变背景全局清除（去 AI 味） * ========================================================= */ [style*="linear-gradient(135deg, #667eea"], [style*="linear-gradient(135deg,#667eea"], [style*="linear-gradient(135deg, #1e3a5f"], [style*="linear-gradient(135deg, #5d4037"], [style*="linear-gradient(135deg, #1e3a5f 0%, #2563eb"], [style*="linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb"] { background: var(--brand) !important; background-image: none !important; color: #FFFFFF !important; } /* CSS 文件中的渐变类（用类选择器逐一覆盖太繁琐，统一用属性选择器降级） */ .admin-header[style*="gradient"], .sidebar-menu li.active[style*="gradient"], .btn-login[style*="gradient"], .role-badge[style*="gradient"] { background: var(--brand) !important; background-image: none !important; } /* ========================================================= * 数字看板：大号粗体数字 + 小标签 * ========================================================= */ .stat-number, .stat-value, .metric-value, .kpi-number, .dashboard-number { font-size: 28px !important; font-weight: 700 !important; color: var(--text) !important; font-variant-numeric: tabular-nums; } .stat-label, .metric-label, .kpi-label { font-size: 13px !important; color: var(--text-3) !important; font-weight: 500 !important; } /* ========================================================= * 空状态/加载：居中灰字 * ========================================================= */ .empty-state, .empty, .no-data, .loading, .loading-text { color: var(--text-3) !important; text-align: center !important; } /* ========================================================= * 分页器 * ========================================================= */ .pagination button, .pagination .page-btn, .pager button, .pager .page-btn { border: 1px solid var(--border) !important; background: var(--card) !important; color: var(--text-2) !important; border-radius: var(--radius) !important; } .pagination button.active, .pagination .page-btn.active, .pagination button:hover, .pagination .page-btn:hover, .pager button.active, .pager .page-btn:hover { background: var(--brand-soft) !important; color: var(--brand) !important; border-color: var(--brand) !important; } /* ========================================================= * 主题切换器组件样式（login.html 登录按钮下方） * ========================================================= */ .cs-theme-switcher { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; } .cs-theme-switcher-label { font-size: 12px; color: var(--text-3); margin-right: 4px; font-weight: 500; white-space: nowrap; } .cs-theme-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--border); background: var(--card); color: var(--text-2); border-radius: 999px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s ease; font-family: inherit; line-height: 1.4; } .cs-theme-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } .cs-theme-btn.active { background: var(--brand); color: #FFFFFF; border-color: var(--brand); box-shadow: 0 2px 6px rgba(15, 108, 189, .2); } .cs-theme-btn .cs-theme-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, .08); } .cs-theme-btn[data-theme="azure"] .cs-theme-dot { background: #0F6CBD; } .cs-theme-btn[data-theme="lark"] .cs-theme-dot { background: #3370FF; } .cs-theme-btn[data-theme="nova"] .cs-theme-dot { background: #2E6BE6; } .cs-theme-btn.active .cs-theme-dot { border-color: rgba(255, 255, 255, .4); } /* ========================================================= * 移动端响应式：手机单列、平板两列 * ========================================================= */ @media (max-width: 768px) { .cs-theme-switcher { gap: 6px; } .cs-theme-btn { padding: 5px 10px; font-size: 11px; } .cs-theme-switcher-label { display: none; } } /* ========================================================= * 滚动条统一（极简灰） * ========================================================= */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); } /* ========================================================= * 焦点可见性（无障碍） * ========================================================= */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ========================================================= * 字体平滑（macOS） * ========================================================= */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; } /* ################################################################### * # 以下为第二批统一覆盖（v2）：导航按钮 / 弹窗 / 看板 / 子系统页面 * ################################################################### */ /* ========================================================= * 学生端 / 教师端顶部导航（v3 专家重设计） * 导航栏改为实心品牌蓝底（Azure/Lark），层级清晰、突出显示； * Nova 主题保持深空蓝侧顶栏。按钮统一 14px / 高 34px， * 主操作白底蓝字，次操作半透明白描边，消除字号不一。 * ========================================================= */ .page-header .user-name, .page-header .class-name { background: rgba(255, 255, 255, .16) !important; color: #FFFFFF !important; font-size: 13px !important; font-weight: 500 !important; padding: 3px 12px !important; border-radius: var(--radius) !important; } /* 校区名称：与“教师端/学生端”标题同等大小字重（HTML 内联样式已移除）；字号随视口平滑缩放 */ .page-header .user-campus { color: rgba(255, 255, 255, .9) !important; font-size: clamp(15px, calc(10.4px + 0.4vw), 18px) !important; font-weight: 600 !important; opacity: 1 !important; margin-left: 8px !important; white-space: nowrap !important; } /* 学生端/教师端顶栏：品牌蓝实心底（Azure/Lark/默认） */ .student-page .page-header, .teacher-page .page-header { background: var(--brand) !important; background-image: none !important; color: #FFFFFF !important; border-bottom: none !important; box-shadow: 0 2px 10px rgba(15, 108, 189, .28) !important; } .student-page .page-header h2, .teacher-page .page-header h2 { color: #FFFFFF !important; font-size: clamp(15px, calc(10.4px + 0.4vw), 18px) !important; font-weight: 600 !important; letter-spacing: .3px !important; white-space: nowrap !important; } .student-page .page-header .status-text, .teacher-page .page-header .status-text, .student-page .page-header .sync-status, .teacher-page .page-header .sync-status, .student-page .page-header .class-selector label, .teacher-page .page-header .class-selector label { color: rgba(255, 255, 255, .9) !important; } .student-page .page-header .coin-amount, .teacher-page .page-header .coin-amount { color: #FFFFFF !important; } /* Nova 主题：保留深空蓝顶栏，不使用品牌蓝 */ :root[data-theme="nova"] .student-page .page-header, :root[data-theme="nova"] .teacher-page .page-header { background: var(--nav-bg) !important; box-shadow: var(--shadow-card) !important; } .student-page .nav-group, .teacher-page .nav-group { background: transparent !important; padding: 0 !important; gap: clamp(3px, 0.42vw, 6px) !important; } /* 顶栏整体间距随视口平滑缩放（学生端/教师端），保证 14 寸笔记本单行容纳全部按钮 */ .student-page .page-header, .teacher-page .page-header { gap: clamp(4px, 0.7vw, 10px) !important; padding-right: clamp(8px, 1vw, 16px) !important; padding-left: clamp(8px, 1vw, 16px) !important; } .student-page .page-header .header-right, .teacher-page .page-header .header-right { gap: clamp(4px, 0.6vw, 10px); } /* 校区名过长时省略号收尾，避免顶栏被挤换行 */ .student-page .page-header .user-campus, .teacher-page .page-header .user-campus { max-width: clamp(96px, 12vw, 220px) !important; overflow: hidden !important; text-overflow: ellipsis !important; vertical-align: bottom; } .student-page .page-header .user-menu-name, .teacher-page .page-header .user-menu-name { font-size: clamp(12px, calc(9.5px + 0.23vw), 14px) !important; } /* 学生端/教师端（蓝底顶栏）按钮：半透明白幽灵样式 * 字号/高度/内边距随视口宽度平滑缩放（14寸笔记本 1366/1280 下仍保持单行）， * 宽屏封顶 14px/34px 不放大；平板/手机断点由下方媒体查询接管。 */ .student-page .page-header .nav-btn, .teacher-page .page-header .nav-btn { font-size: clamp(12px, calc(6px + 0.44vw), 14px) !important; font-weight: 500 !important; line-height: 1.4 !important; height: clamp(28px, calc(13px + 1.09vw), 34px) !important; min-height: clamp(28px, calc(13px + 1.09vw), 34px) !important; padding: 0 clamp(6px, 0.72vw, 14px) !important; min-width: auto !important; border-radius: var(--radius) !important; border: 1px solid rgba(255, 255, 255, .35) !important; background: rgba(255, 255, 255, .12) !important; color: #FFFFFF !important; box-shadow: none !important; transform: none !important; transition: background-color .15s ease, border-color .15s ease, color .15s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; flex-shrink: 0 !important; } .student-page .nav-btn:hover, .teacher-page .nav-btn:hover { opacity: 1 !important; transform: none !important; box-shadow: none !important; border-color: rgba(255, 255, 255, .75) !important; color: #FFFFFF !important; background: rgba(255, 255, 255, .24) !important; } /* 其他浅色顶栏页面（题库/竞赛/训练等）：白底深字按钮，统一 14px / 34px */ .page-header .nav-btn { font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important; height: 34px !important; min-height: 34px !important; padding: 0 14px !important; border-radius: var(--radius) !important; border: 1px solid var(--border) !important; background: var(--card) !important; color: var(--text) !important; box-shadow: none !important; } .page-header .nav-btn:hover { border-color: var(--brand) !important; color: var(--brand) !important; background: var(--brand-soft) !important; } .page-header .nav-btn-primary { background: var(--brand) !important; border-color: var(--brand) !important; color: #FFFFFF !important; } .page-header .nav-btn-primary:hover { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; color: #FFFFFF !important; } /* 主操作：白底蓝字（蓝底上的最高优先级，仅学生/教师端） */ .student-page .nav-btn-primary, .teacher-page .nav-btn-primary { background: #FFFFFF !important; border-color: #FFFFFF !important; color: var(--brand) !important; font-weight: 600 !important; } .student-page .nav-btn-primary:hover, .teacher-page .nav-btn-primary:hover { background: rgba(255, 255, 255, .9) !important; border-color: #FFFFFF !important; color: var(--brand-hover) !important; } /* 其余工具/状态按钮：统一为半透明白幽灵按钮（蓝底上语义彩色会显脏） */ .student-page .nav-btn-secondary, .teacher-page .nav-btn-secondary, .student-page .nav-btn-success, .teacher-page .nav-btn-success, .student-page .nav-btn-warning, .teacher-page .nav-btn-warning, .student-page .nav-btn-info, .teacher-page .nav-btn-info, .student-page .nav-btn-danger, .teacher-page .nav-btn-danger { background: rgba(255, 255, 255, .12) !important; color: #FFFFFF !important; border-color: rgba(255, 255, 255, .35) !important; } .student-page .nav-btn-secondary:hover, .teacher-page .nav-btn-secondary:hover, .student-page .nav-btn-success:hover, .teacher-page .nav-btn-success:hover, .student-page .nav-btn-warning:hover, .teacher-page .nav-btn-warning:hover, .student-page .nav-btn-info:hover, .teacher-page .nav-btn-info:hover, .student-page .nav-btn-danger:hover, .teacher-page .nav-btn-danger:hover { background: rgba(255, 255, 255, .24) !important; color: #FFFFFF !important; border-color: rgba(255, 255, 255, .75) !important; } /* 顶栏内 select 保持白底（蓝底上可读） */ .page-header select { height: 32px; border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--radius); background: #FFFFFF; color: var(--text); font-size: 13px; padding: 0 8px; } .page-header .mini-countdown { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; background: rgba(255, 255, 255, .16); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius); font-size: 13px; } /* ========================================================= * 数据看板统计卡片：白底深字 + 细边框 + 状态色左条 * （替换原紫蓝/彩色渐变卡片，解决白字不可见） * ========================================================= */ .stats-card { background: var(--card) !important; background-image: none !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-left: 3px solid var(--brand) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-card) !important; padding: 18px 20px !important; transition: border-color .15s ease, box-shadow .15s ease !important; } .stats-card:hover { transform: none !important; box-shadow: 0 2px 8px rgba(16, 32, 48, .10) !important; } .stats-card .stats-value { color: var(--text) !important; font-size: 28px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; line-height: 1.25 !important; } .stats-card .stats-label { color: var(--text-3) !important; font-size: 13px !important; opacity: 1 !important; } .stats-card .stats-icon { font-size: 28px !important; margin-bottom: 8px !important; } /* 系统状态四类卡片：成功/警示/信息/危险左条 */ .stats-card.stats-card-success { border-left-color: var(--success) !important; } .stats-card.stats-card-warning { border-left-color: var(--warning) !important; } .stats-card.stats-card-info { border-left-color: var(--brand) !important; } .stats-card.stats-card-danger { border-left-color: var(--danger) !important; } /* admin 题库管理小统计条 */ .question-stats .stat-item, .mini-stat { background: var(--card) !important; border: 1px solid var(--border) !important; border-left: 3px solid var(--brand) !important; border-radius: var(--radius) !important; color: var(--text) !important; } .question-stats .stat-value, .mini-stat .mini-value { color: var(--text) !important; } .question-stats .stat-label, .mini-stat .mini-label { color: var(--text-3) !important; } .mini-stat:nth-child(2) { border-left-color: var(--success) !important; } .mini-stat:nth-child(3) { border-left-color: var(--warning) !important; } .mini-stat:nth-child(4) { border-left-color: var(--danger) !important; } /* ========================================================= * 弹窗统一（含 modal-v2 / form-modal / modal-overlay / 通用 modal） * 头部改白底深字 + 底部分隔线（Fluent 风），不再使用整面蓝头 * ========================================================= */ .modal-v2-content, .form-modal-content, .custom-modal-content { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: 0 8px 32px rgba(16, 32, 48, .14) !important; color: var(--text) !important; } .modal-v2-header, .form-modal-header { background: var(--card) !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; padding: 14px 20px !important; } .modal-v2-header h3, .form-modal-header h3, .form-modal-header .modal-title { color: var(--text) !important; font-size: 16px !important; } .modal-v2-close, .form-modal-close { background: transparent !important; color: var(--text-2) !important; border: none !important; } .modal-v2-close:hover, .form-modal-close:hover { background: var(--brand-soft) !important; color: var(--brand) !important; } .modal-v2-body, .form-modal-body { color: var(--text) !important; } .modal-v2-footer, .form-modal-footer { background: var(--bg) !important; border-top: 1px solid var(--border) !important; } .btn-m2-primary, .btn-m2.btn-primary, .modal-v2-footer .btn-primary { background: var(--brand) !important; color: #FFFFFF !important; border: 1px solid var(--brand) !important; border-radius: var(--radius) !important; } .btn-m2-primary:hover { background: var(--brand-hover) !important; } .btn-m2-secondary, .btn-m2.btn-secondary { background: var(--card) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; } .btn-m2-secondary:hover { color: var(--brand) !important; border-color: var(--brand) !important; } .btn-m2-danger { background: rgba(220, 38, 38, .08) !important; color: var(--danger) !important; border: 1px solid rgba(220, 38, 38, .35) !important; border-radius: var(--radius) !important; } /* 通用弹窗头部/底部（style.css 体系） */ .modal-header { background: var(--card) !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; } .modal-header h3, .modal-header .modal-title { color: var(--text) !important; } .modal-close, .close-btn { color: var(--text-2) !important; background: transparent !important; border: none !important; } .modal-close:hover, .close-btn:hover { color: var(--brand) !important; background: var(--brand-soft) !important; } .modal-body { color: var(--text) !important; } .modal-footer { background: var(--card) !important; border-top: 1px solid var(--border) !important; } .form-modal { background: rgba(15, 23, 42, .45) !important; } .form-modal > div, .modal-box, .modal-panel { background: var(--card) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: 0 8px 32px rgba(16, 32, 48, .14) !important; } /* 弹窗内 label / 文字 */ .modal label, .modal-v2-content label, .form-modal-content label { color: var(--text) !important; } /* 弹窗遮罩统一（保留半透明，去掉纯黑死沉感） */ .modal-overlay, .modal-mask, .custom-modal-overlay { background: rgba(15, 23, 42, .45) !important; } /* ========================================================= * 宠物乐园（pet-park）：头部/标签/按钮跟随主题，保留游戏化元素 * ========================================================= */ body:not(.cs-raw-theme) .pet-header { background: var(--nav-bg) !important; background-image: none !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; box-shadow: none !important; } .pet-header-left h1 { color: var(--text) !important; } .pet-nav-tab { color: var(--text-2) !important; } .pet-nav-tab:hover { background: var(--brand-soft) !important; color: var(--brand) !important; } .pet-nav-tab.active { background: var(--brand-soft) !important; color: var(--brand) !important; font-weight: 600 !important; } .pet-user-info { background: var(--brand-soft) !important; color: var(--brand) !important; } .pet-logout-btn { background: rgba(220, 38, 38, .08) !important; border: 1px solid rgba(220, 38, 38, .35) !important; color: var(--danger) !important; } .pet-logout-btn:hover { background: rgba(220,38,38,.14) !important; } /* 宠物展示区/商店/日志等内容卡片白底化（保留金币、宠物场景等游戏色） */ .pet-display-section, .pet-store-item, .pet-log-item, .pet-dex-grid > div { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-card) !important; color: var(--text) !important; } .pet-store-item .item-name { color: var(--text) !important; } .pet-store-item .item-desc { color: var(--text-3) !important; } .pet-store-item .buy-btn { background: var(--brand) !important; background-image: none !important; border: 1px solid var(--brand) !important; border-radius: var(--radius) !important; box-shadow: none !important; } .pet-store-item .buy-btn:hover { background: var(--brand-hover) !important; box-shadow: none !important; } .pet-tab-btn { color: var(--text-3) !important; } .pet-tab-btn.active { color: var(--brand) !important; } .pet-empty-state { color: var(--text-3) !important; } /* 宠物弹窗：橙色渐变头 → 白底深字 + 分隔线 */ .pet-modal-overlay { background: rgba(15, 23, 42, .45) !important; } .pet-modal { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; color: var(--text) !important; box-shadow: 0 8px 32px rgba(16, 32, 48, .14) !important; } .pet-modal-header { background: var(--card) !important; background-image: none !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; } .pet-modal-header h2 { color: var(--text) !important; } .pet-modal-body { color: var(--text) !important; } .pet-btn-primary, .pet-action-btn, .pet-modal-btn.primary { background: var(--brand) !important; color: #FFFFFF !important; border: 1px solid var(--brand) !important; border-radius: var(--radius) !important; background-image: none !important; } .pet-btn-primary:hover { background: var(--brand-hover) !important; } /* ========================================================= * Scratch 作业列表（scratch-list）：头部去紫渐变 * 注意：裸 .header 被考试/评测系列页面（exam、gesp、cie 等 14 个 * 自定义深色渐变头部页面）复用，这些页面在上加 * cs-preserve-header 豁免，保留各自头部配色与白色按钮对比度。 * ========================================================= */ body:not(.cs-preserve-header) .header { background: var(--nav-bg) !important; background-image: none !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; box-shadow: none !important; } body:not(.cs-preserve-header) .header h1 { color: var(--text) !important; } body:not(.cs-preserve-header) .header .btn-light, body:not(.cs-preserve-header) .header .btn-sm { background: var(--card) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; } body:not(.cs-preserve-header) .header .btn-light:hover { color: var(--brand) !important; border-color: var(--brand) !important; } .btn-scratch-enter { background: var(--brand) !important; color: #FFFFFF !important; border: 1px solid var(--brand) !important; border-radius: var(--radius) !important; box-shadow: none !important; } .btn-scratch-enter:hover { background: var(--brand-hover) !important; color: #FFFFFF !important; transform: none !important; box-shadow: none !important; } /* Scratch 图标（标题前的小猫 logo） */ .cs-scratch-logo { width: 22px; height: 22px; vertical-align: -5px; margin-right: 6px; border-radius: 4px; } /* community 标签条 */ .ct-tab { color: var(--text-2) !important; border-radius: var(--radius) var(--radius) 0 0 !important; } .ct-tab.active { color: var(--brand) !important; background: var(--brand-soft) !important; font-weight: 600 !important; } /* ========================================================= * 教务管理系统（student-management）：深紫侧边栏 → 主题化 * ========================================================= */ .app-sidebar { background: var(--nav-bg) !important; background-image: none !important; border-right: 1px solid var(--border) !important; } .sidebar-brand .brand-text h1, .sidebar-brand .brand-text p { color: var(--text) !important; } .sidebar-brand .brand-text p { color: var(--text-3) !important; } .nav-section-title { color: var(--text-3) !important; } .nav-menu-item { color: var(--nav-text) !important; border-radius: var(--radius) !important; } .nav-menu-item:hover { background: var(--brand-soft) !important; color: var(--brand) !important; } .nav-menu-item.active { background: var(--brand-soft) !important; color: var(--brand) !important; box-shadow: none !important; } .nav-menu-item.active::before { background: var(--brand) !important; } :root[data-theme="nova"] .app-sidebar { background: var(--nav-bg) !important; border-right: none !important; } :root[data-theme="nova"] .sidebar-brand .brand-text h1 { color: #FFFFFF !important; } :root[data-theme="nova"] .sidebar-brand .brand-text p { color: var(--nav-text) !important; } :root[data-theme="nova"] .nav-section-title { color: var(--nav-text) !important; } :root[data-theme="nova"] .nav-menu-item { color: var(--nav-text) !important; } :root[data-theme="nova"] .nav-menu-item:hover { background: rgba(255,255,255,.06) !important; color: #FFFFFF !important; } :root[data-theme="nova"] .nav-menu-item.active { background: var(--nav-soft) !important; color: #FFFFFF !important; } :root[data-theme="nova"] .sidebar-version, :root[data-theme="nova"] .btn-back-home { color: var(--nav-text) !important; } :root[data-theme="nova"] .btn-back-home { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.15) !important; } /* 教务彩色概览卡 → 白底 + 状态色左条/图标 */ .ov-card-1, .ov-card-2, .ov-card-3, .ov-card-4 { background: var(--card) !important; background-image: none !important; border: 1px solid var(--border) !important; border-left: 3px solid var(--brand) !important; border-radius: var(--radius) !important; color: var(--text) !important; box-shadow: var(--shadow-card) !important; } .ov-card-2 { border-left-color: #7C3AED !important; } .ov-card-3 { border-left-color: var(--brand) !important; } .ov-card-4 { border-left-color: var(--success) !important; color: var(--text) !important; } .ov-card-1 *, .ov-card-2 *, .ov-card-3 *, .ov-card-4 * { color: var(--text) !important; } .ov-card-4 * { color: var(--text) !important; } .btn-back-home { background: var(--card) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; } .btn-back-home:hover { color: var(--brand) !important; border-color: var(--brand) !important; } .sidebar-version { color: var(--text-3) !important; } /* 教务残留紫色元素：内联按钮 / 学生卡片头 / 日期标签 */ .btn-inline { background: var(--brand) !important; background-image: none !important; border: 1px solid var(--brand) !important; color: #FFFFFF !important; border-radius: var(--radius) !important; } .btn-inline:hover { background: var(--brand-hover) !important; } .student-card .card-header { background: var(--nav-bg) !important; background-image: none !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; } .day-badge { background: var(--brand-soft) !important; color: var(--brand) !important; } /* 教务主内容按钮主色 */ .app-main .btn-primary, .app-main button.primary { background: var(--brand) !important; background-image: none !important; border-color: var(--brand) !important; color: #FFFFFF !important; border-radius: var(--radius) !important; } /* toast 去渐变 */ .toast { background: var(--text) !important; color: #FFFFFF !important; } .toast.success { background: var(--success) !important; } .toast.error { background: var(--danger) !important; } .toast.info { background: var(--brand) !important; } .toast.warning { background: var(--warning) !important; } /* ========================================================= * 打字模块（dazi）导航去紫渐变 * ========================================================= */ .navbar { background: var(--nav-bg) !important; background-image: none !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important; backdrop-filter: none !important; } .navbar .logo-text { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: var(--text) !important; } .nav-tab { color: var(--text-2) !important; border: 1px solid transparent !important; background: transparent !important; box-shadow: none !important; } .nav-tab:hover { background: var(--brand-soft) !important; color: var(--brand) !important; } .nav-tab.active { background: var(--brand-soft) !important; color: var(--brand) !important; border-color: transparent !important; font-weight: 600 !important; box-shadow: none !important; } .sidebar-login-btn, button.primary, .btn-primary-dazi { background: var(--brand) !important; color: #FFFFFF !important; border: 1px solid var(--brand) !important; border-radius: var(--radius) !important; background-image: none !important; } /* ========================================================= * 教学白板（whiteboard）：紫色渐变工具条 → 白底 * ========================================================= */ .topbar { background: var(--nav-bg) !important; background-image: none !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; } .topbar .back { background: var(--bg) !important; color: var(--text-2) !important; border: 1px solid var(--border) !important; } .topbar .back:hover { background: var(--brand-soft) !important; color: var(--brand) !important; } /* ========================================================= * SVG 图标跟随文字色（导航/侧边栏内） * ========================================================= */ .sidebar-menu li svg, .nav-menu-item svg, .pet-nav-tab svg, .ct-tab svg { fill: none; } /* ========================================================= * 通用带渐变的头部/区块兜底（h1/h2 标题色） * ========================================================= */ [class*="header"] h1, [class*="header"] h2 { /* 不做强制，交由具体选择器；此规则仅防止遗漏的深紫渐变头里白字 */ } /* ========================================================= * v3 全站护眼排版：正文/表格/表单/卡片字号统一上调 * 原则：正文不小于 14px、辅助文字不小于 13px，行高放宽； * 不触碰代码编辑器（ace / CodeMirror / .code-editor）与 * cs-raw-theme 全屏应用页，避免破坏固定布局。 * ========================================================= */ body:not(.cs-raw-theme) p, body:not(.cs-raw-theme) li, body:not(.cs-raw-theme) dd, body:not(.cs-raw-theme) blockquote { font-size: 15px; line-height: 1.7; } body:not(.cs-raw-theme) h1 { font-size: 22px; line-height: 1.35; } body:not(.cs-raw-theme) h2 { font-size: 19px; line-height: 1.35; } body:not(.cs-raw-theme) h3 { font-size: 17px; line-height: 1.4; } body:not(.cs-raw-theme) h4 { font-size: 15px; line-height: 1.45; } body:not(.cs-raw-theme) h5 { font-size: 14px; line-height: 1.5; } /* 面板标题 */ body:not(.cs-raw-theme) .panel-header h3, body:not(.cs-raw-theme) .panel-header h4, body:not(.cs-raw-theme) .panel-title { font-size: 16px !important; line-height: 1.45 !important; } /* 数据表格：13→14px，行高放松，长时阅读不费眼 */ body:not(.cs-raw-theme) table th, body:not(.cs-raw-theme) table td { font-size: 14px !important; line-height: 1.6 !important; } /* 表单：输入控件统一 14px（排除编辑器工具栏与代码编辑区） */ body:not(.cs-raw-theme) input:not([type="checkbox"]):not([type="radio"]):not(.font-size-select), body:not(.cs-raw-theme) select, body:not(.cs-raw-theme) textarea, body:not(.cs-raw-theme) .form-control, body:not(.cs-raw-theme) .form-select { font-size: 14px; } body:not(.cs-raw-theme) label, body:not(.cs-raw-theme) .form-group label, body:not(.cs-raw-theme) .filter-label { font-size: 14px; } /* 通用按钮（.nav-btn 已单独定义；图标按钮 .tool-btn 不放大） */ body:not(.cs-raw-theme) .btn:not(.tool-btn):not(.btn-icon):not(.btn-small):not(.btn-sm) { font-size: 14px !important; } body:not(.cs-raw-theme) .btn-small, body:not(.cs-raw-theme) .btn-sm { font-size: 13px !important; } /* 卡片/列表正文与标题 */ body:not(.cs-raw-theme) .card-title, body:not(.cs-raw-theme) .course-card .title, body:not(.cs-raw-theme) .question-title, body:not(.cs-raw-theme) .list-item-title { font-size: 15px !important; line-height: 1.5 !important; } body:not(.cs-raw-theme) .card-body, body:not(.cs-raw-theme) .card-sub, body:not(.cs-raw-theme) .subtitle, body:not(.cs-raw-theme) .desc, body:not(.cs-raw-theme) .description { font-size: 14px !important; line-height: 1.65 !important; } /* 辅助/说明文字：最低 13px（原 11-12px 上调，保证教室投影可读） */ body:not(.cs-raw-theme) .stat-label, body:not(.cs-raw-theme) .stats-label, body:not(.cs-raw-theme) .mini-stat .label, body:not(.cs-raw-theme) .text-muted, body:not(.cs-raw-theme) .text-secondary, body:not(.cs-raw-theme) .hint, body:not(.cs-raw-theme) .tip, body:not(.cs-raw-theme) .help-text, body:not(.cs-raw-theme) .placeholder, body:not(.cs-raw-theme) .empty, body:not(.cs-raw-theme) .empty-tip, body:not(.cs-raw-theme) .meta, body:not(.cs-raw-theme) .card-meta, body:not(.cs-raw-theme) .card-count, body:not(.cs-raw-theme) .card-tag, body:not(.cs-raw-theme) .count, body:not(.cs-raw-theme) .sidebar-version { font-size: 13px !important; line-height: 1.55 !important; } /* 侧边/菜单导航：14px 更易点读 */ body:not(.cs-raw-theme) .sidebar-menu li, body:not(.cs-raw-theme) .nav-menu-item, body:not(.cs-raw-theme) .menu-item, body:not(.cs-raw-theme) .side-menu li, body:not(.cs-raw-theme) .tab-btn, body:not(.cs-raw-theme) .sub-tab-btn { font-size: 14px !important; } /* 弹窗正文 */ body:not(.cs-raw-theme) .modal-v2-body, body:not(.cs-raw-theme) .modal-body, body:not(.cs-raw-theme) .form-modal-body { font-size: 15px !important; line-height: 1.7 !important; } body:not(.cs-raw-theme) .modal-v2-header h3, body:not(.cs-raw-theme) .modal-header h3, body:not(.cs-raw-theme) .form-modal-header h3 { font-size: 17px !important; } /* 学生/教师端业务面板文字（公告、讲解、状态等） */ .student-page .announcement-placeholder, .teacher-page .announcement-placeholder, .student-page .share-hint, .teacher-page .reward-tip, .student-page .placeholder-text { } /* ========================================================= * problem-list.html / problem-manage.html * 棕金色硬编码 → 主题变量覆盖（不影响难度标签语义色） * ========================================================= */ body:not(.cs-raw-theme) .page-header { background: var(--brand) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(15,108,189,.28) !important; } body:not(.cs-raw-theme) .page-header .header-left h1 { color: #fff !important; } body:not(.cs-raw-theme) .page-header .nav-tab { color: rgba(255,255,255,.82) !important; } body:not(.cs-raw-theme) .page-header .nav-tab:hover { background: rgba(255,255,255,.14) !important; } body:not(.cs-raw-theme) .page-header .nav-tab.active { background: #fff !important; color: var(--brand) !important; font-weight: 600 !important; } body:not(.cs-raw-theme) .page-header .user-info { color: #fff !important; } /* 角色徽章：实心品牌色 + 白字（替代之前的半透明，对比度足够） */ body:not(.cs-raw-theme) .page-header .user-role, body:not(.cs-raw-theme) .page-header .role-badge, body:not(.cs-raw-theme) .page-header .admin-badge { background: rgba(255,255,255,.2) !important; border: 1px solid rgba(255,255,255,.35) !important; color: #fff !important; font-weight: 500 !important; padding: 3px 11px !important; border-radius: 14px !important; font-size: 12px !important; } /* admin-btn 改为浅灰幽灵按钮，hover 变品牌蓝 */ body:not(.cs-raw-theme) .admin-btn { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.35) !important; color: #fff !important; border-radius: 6px !important; padding: 7px 14px !important; } body:not(.cs-raw-theme) .admin-btn:hover { background: rgba(255,255,255,.25) !important; } /* problem-manage.html 左侧深色渐变侧栏 → 品牌色渐变 */ body:not(.cs-raw-theme) .sidebar, body:not(.cs-raw-theme) .left-sidebar { background: var(--brand) !important; color: #fff !important; } /* 仅作用于深色品牌侧栏（.sidebar 内），避免误伤 admin 白色侧栏导致 hover 白字不可读 */ body:not(.cs-raw-theme) .sidebar .sidebar-menu li:hover { background: rgba(255,255,255,.14) !important; color: #fff !important; } body:not(.cs-raw-theme) .sidebar .sidebar-menu li.active { background: #fff !important; color: var(--brand) !important; border-left: 3px solid #fff !important; } body:not(.cs-raw-theme) .sidebar .sidebar-title, body:not(.cs-raw-theme) .sidebar-title { color: rgba(255,255,255,.75) !important; } /* body 背景统一 */ body:not(.cs-raw-theme) body, body:not(.cs-raw-theme) body { background: var(--bg) !important; } /* 通用链接/强调色 */ body:not(.cs-raw-theme) .breadcrumb .crumb-current { color: var(--text) !important; } body:not(.cs-raw-theme) .breadcrumb .crumb-link { color: var(--text-2) !important; } body:not(.cs-raw-theme) .breadcrumb .crumb-link:hover { color: var(--brand) !important; } /* 表单 focus 边框色 */ body:not(.cs-raw-theme) input:focus, body:not(.cs-raw-theme) textarea:focus, body:not(.cs-raw-theme) select:focus { border-color: var(--brand) !important; outline: none !important; } /* 表格 hover 行 */ body:not(.cs-raw-theme) .data-table tbody tr:hover, body:not(.cs-raw-theme) table tbody tr:hover { background: var(--brand-soft) !important; } /* 分页按钮 hover */ body:not(.cs-raw-theme) .pagination button:hover:not(:disabled) { border-color: var(--brand) !important; color: var(--brand) !important; } body:not(.cs-raw-theme) .pagination button.active { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; } /* 通用按钮（problem-manage 的工具栏按钮等） */ body:not(.cs-raw-theme) .toolbar button, body:not(.cs-raw-theme) .toolbar .btn, body:not(.cs-raw-theme) button.primary, body:not(.cs-raw-theme) .btn-primary { background: var(--brand) !important; color: #fff !important; border: 1px solid var(--brand) !important; border-radius: 6px !important; } body:not(.cs-raw-theme) .toolbar button:hover, body:not(.cs-raw-theme) .toolbar .btn:hover, body:not(.cs-raw-theme) button.primary:hover, body:not(.cs-raw-theme) .btn-primary:hover { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; } body:not(.cs-raw-theme) .toolbar button.ghost, body:not(.cs-raw-theme) button.secondary, body:not(.cs-raw-theme) .btn-secondary { background: #fff !important; color: var(--text) !important; border: 1px solid var(--border) !important; } body:not(.cs-raw-theme) .toolbar button.ghost:hover, body:not(.cs-raw-theme) button.secondary:hover, body:not(.cs-raw-theme) .btn-secondary:hover { color: var(--brand) !important; border-color: var(--brand) !important; } /* 编辑/删除 icon 按钮 */ body:not(.cs-raw-theme) .btn-icon.edit { background: var(--brand-soft) !important; color: var(--brand) !important; } body:not(.cs-raw-theme) .btn-icon.edit:hover { background: var(--brand) !important; color: #fff !important; } /* stat 卡片 */ body:not(.cs-raw-theme) .stat-card .stat-icon { color: var(--brand) !important; background: var(--brand-soft) !important; } /* 上传区域 */ body:not(.cs-raw-theme) .upload-area { border-color: var(--border) !important; background: #fff !important; } body:not(.cs-raw-theme) .upload-area:hover { border-color: var(--brand) !important; background: var(--brand-soft) !important; } body:not(.cs-raw-theme) .upload-area .upload-icon { color: var(--brand) !important; } /* ===== problem-list.html / problem-manage.html 剩余棕金色覆盖 ===== */ /* filter-banner（problem-list）：原棕金渐变 → 品牌色 */ body:not(.cs-raw-theme) .filter-banner { background: var(--brand) !important; color: #fff !important; } body:not(.cs-raw-theme) .filter-clear-btn { background: rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.4) !important; color: #fff !important; } body:not(.cs-raw-theme) .filter-clear-btn:hover { background: rgba(255,255,255,.3) !important; } /* search-box:focus */ body:not(.cs-raw-theme) .search-box input:focus, body:not(.cs-raw-theme) .toolbar .search-input:focus, body:not(.cs-raw-theme) .toolbar select:focus { border-color: var(--brand) !important; } /* filter-chip 激活态（problem-list 通用 + 分类独立） */ body:not(.cs-raw-theme) .filter-chip.active { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; } body:not(.cs-raw-theme) .filter-chip:hover { border-color: var(--brand) !important; } /* refresh-btn（problem-list） */ body:not(.cs-raw-theme) .refresh-btn { background: var(--brand) !important; color: #fff !important; border: none !important; } body:not(.cs-raw-theme) .refresh-btn:hover { background: var(--brand-hover) !important; } /* tag-chip 激活态（problem-list 标签区） */ body:not(.cs-raw-theme) .tag-chip { background: var(--brand-soft) !important; color: var(--brand) !important; border-color: transparent !important; } body:not(.cs-raw-theme) .tag-chip:hover { background: #fff !important; border-color: var(--brand) !important; } body:not(.cs-raw-theme) .tag-chip.active { background: var(--brand) !important; color: #fff !important; } /* 表格表头 th.sortable:hover */ body:not(.cs-raw-theme) table.problem-table th.sortable:hover { color: var(--brand) !important; } /* problem-manage sidebar-brand logo 棕金渐变 → 品牌色 */ body:not(.cs-raw-theme) .sidebar-brand .logo-icon { background: var(--brand-hover) !important; } /* problem-manage menu-group.open 棕色调 → 半透明白 */ body:not(.cs-raw-theme) .sidebar-menu .menu-group.open .menu-parent { background: rgba(255,255,255,.15) !important; } body:not(.cs-raw-theme) .sidebar-menu .submenu li:hover::before { background: #fff !important; } body:not(.cs-raw-theme) .sidebar-menu .submenu li.active { background: rgba(255,255,255,.15) !important; border-left-color: #fff !important; } /* problem-manage top-bar */ body:not(.cs-raw-theme) .top-bar { background: var(--card) !important; border-bottom-color: var(--border) !important; } /* problem-manage breadcrumb */ body:not(.cs-raw-theme) .breadcrumb { color: var(--text-2) !important; } body:not(.cs-raw-theme) .breadcrumb .crumb-sep { color: var(--text-3) !important; } body:not(.cs-raw-theme) .breadcrumb .crumb-current { color: var(--text) !important; } body:not(.cs-raw-theme) .breadcrumb .crumb-link:hover { color: var(--brand) !important; } /* problem-manage user-chip + role-tag */ body:not(.cs-raw-theme) .top-actions .user-chip { background: var(--brand-soft) !important; color: var(--text) !important; } body:not(.cs-raw-theme) .top-actions .role-tag { background: var(--brand) !important; color: #fff !important; } /* problem-manage panel */ body:not(.cs-raw-theme) .panel { box-shadow: 0 2px 8px rgba(0,0,0,.04) !important; } body:not(.cs-raw-theme) .panel-header { background: var(--bg) !important; border-bottom-color: var(--border) !important; } body:not(.cs-raw-theme) .panel-header h2 { color: var(--text) !important; } /* problem-manage data-table 表头 */ body:not(.cs-raw-theme) .data-table thead { background: var(--bg) !important; } body:not(.cs-raw-theme) .data-table th { color: var(--text) !important; border-bottom-color: var(--border) !important; } body:not(.cs-raw-theme) .data-table td { color: var(--text) !important; border-bottom-color: var(--border) !important; } body:not(.cs-raw-theme) .data-table tbody tr:hover { background: var(--brand-soft) !important; } body:not(.cs-raw-theme) .table-wrapper { border-color: var(--border) !important; } /* problem-manage 空状态 */ body:not(.cs-raw-theme) .empty-state { color: var(--text-3) !important; } body:not(.cs-raw-theme) .empty-state h3 { color: var(--text-2) !important; } /* problem-manage toolbar filter-group 文字色 */ body:not(.cs-raw-theme) .toolbar .filter-group { color: var(--text-2) !important; } body:not(.cs-raw-theme) .toolbar .search-input, body:not(.cs-raw-theme) .toolbar select { border-color: var(--border) !important; background: var(--card) !important; color: var(--text) !important; } body:not(.cs-raw-theme) .toolbar select option { color: var(--text) !important; } /* problem-manage btn-secondary 浅灰棕 → 主题灰 */ body:not(.cs-raw-theme) .btn-secondary { background: var(--card) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } body:not(.cs-raw-theme) .btn-secondary:hover { background: var(--bg) !important; border-color: var(--brand) !important; color: var(--brand) !important; } /* ================================================================== * 学生阅读排版 & 护眼三态（标准 / 护眼米绿 / 夜间） 2026-09 * 仅引入 js/reading-theme.js 的学生页会在上设置 * data-reading="normal|eye|dark"，管理页不受影响。 * 字号档位：正文 18px / 行距 1.9（中小学护眼档） * ================================================================== */ :root { --fs-content: 18px; /* 题面、题干等长文本 */ --fs-content-title: 19px; /* 小节标题（输入格式/输出格式） */ --fs-content-sm: 16px; /* 选项、表格、列表等次级阅读文字 */ --fs-code: 15px; /* 样例、代码块（过大会横向溢出） */ --lh-content: 1.9; --lh-tight: 1.7; } /* 三态下学生页基准字号上调（覆盖全局 15px 基准），管理页不带 data-reading 不受影响 */ html[data-reading] body:not(.cs-raw-theme) { font-size: 16px !important; line-height: 1.8 !important; } /* ---- 护眼米绿：低饱和高明度，仅阅读区换色，导航保持品牌蓝 ---- */ /* 选择器须用 :root 与品牌主题 :root[data-theme] 同特异性，靠后置规则胜出 */ :root[data-reading="eye"] { --bg: #E9F1E1; --card: #F6FAF1; --border: #D2DEC3; --text: #2B3526; --text-2: #55604C; --text-3: #87917A; --reading-surface: #F6FAF1; --reading-surface-2: #EDF3E3; --reading-surface-border: #D2DEC3; --reading-input-bg: #F2F7EB; } html[data-reading="eye"] body:not(.cs-raw-theme) { background: var(--bg) !important; color: var(--text) !important; } /* ---- 夜间模式：晚自习场景，深墨绿灰底，对比度达 WCAG AA ---- */ :root[data-reading="dark"] { --bg: #161B18; --card: #212823; --border: #36413A; --text: #D8E0D2; --text-2: #9FAA97; --text-3: #707B6D; --brand-soft: #20303E; --reading-surface: #212823; --reading-surface-2: #19201C; --reading-surface-border: #36413A; --reading-input-bg: #1B221E; } html[data-reading="dark"] body:not(.cs-raw-theme) { background: var(--bg) !important; color: var(--text) !important; } /* ---- 三态下学生页高频硬编码白底容器统一换肤（标准态为白，无需覆盖） ---- */ html[data-reading="eye"] .training-card, html[data-reading="eye"] .problem-card, html[data-reading="eye"] .course-card, html[data-reading="eye"] .card, html[data-reading="eye"] .panel, html[data-reading="eye"] .search-box, html[data-reading="eye"] .filter-bar, html[data-reading="eye"] .filter-banner, html[data-reading="eye"] .modal-content, html[data-reading="eye"] .toolbar, html[data-reading="eye"] .table-container, html[data-reading="eye"] .page-btn, html[data-reading="eye"] .problem-left, html[data-reading="eye"] .left-scroll, html[data-reading="eye"] .problem-right, html[data-reading="eye"] .main-content, html[data-reading="eye"] .sidebar, html[data-reading="eye"] .question-desc, html[data-reading="eye"] .action-bar, html[data-reading="eye"] .question-header, html[data-reading="dark"] .training-card, html[data-reading="dark"] .problem-card, html[data-reading="dark"] .course-card, html[data-reading="dark"] .card, html[data-reading="dark"] .panel, html[data-reading="dark"] .search-box, html[data-reading="dark"] .filter-bar, html[data-reading="dark"] .filter-banner, html[data-reading="dark"] .modal-content, html[data-reading="dark"] .toolbar, html[data-reading="dark"] .table-container, html[data-reading="dark"] .page-btn, html[data-reading="dark"] .problem-left, html[data-reading="dark"] .left-scroll, html[data-reading="dark"] .problem-right, html[data-reading="dark"] .main-content, html[data-reading="dark"] .sidebar, html[data-reading="dark"] .question-desc, html[data-reading="dark"] .action-bar, html[data-reading="dark"] .question-header { background: var(--reading-surface) !important; border-color: var(--reading-surface-border) !important; color: var(--text) !important; } html[data-reading="eye"] input:not([type="checkbox"]):not([type="radio"]), html[data-reading="eye"] textarea, html[data-reading="eye"] select, html[data-reading="dark"] input:not([type="checkbox"]):not([type="radio"]), html[data-reading="dark"] textarea, html[data-reading="dark"] select { background: var(--reading-input-bg) !important; color: var(--text) !important; border-color: var(--reading-surface-border) !important; } html[data-reading="dark"] input::placeholder, html[data-reading="dark"] textarea::placeholder { color: var(--text-3) !important; } /* ---- 三态悬浮开关（右下角，不遮挡阅读区，无投影） ---- */ /* 猫头鹰草稿纸按钮为 90px 圆形：right:20 bottom:20，中心轴距右 65px、顶边距底 110px；开关 46px 置于其正上方 12px 间隙并同轴对齐 */ .reading-theme-toggle { position: fixed; right: 42px; bottom: 122px; z-index: 9998; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: none; transition: border-color .15s ease, transform .15s ease; } .reading-theme-toggle:hover { border-color: var(--brand); transform: translateY(-2px); } html[data-reading="dark"] .reading-theme-toggle { background: #2A332D; } @media (max-width: 768px) { /* 移动端猫头鹰缩为 64px：right/bottom 15px，中心轴距右 47px、顶边距底 79px */ .reading-theme-toggle { right: 24px; bottom: 90px; } } /* ---- 学生页核心阅读排版（只要引入 reading-theme.js 即生效，含标准态） ---- */ /* problem.html 题面 */ html[data-reading] .section-body { font-size: var(--fs-content) !important; line-height: var(--lh-content) !important; color: var(--text); } html[data-reading] .section-body p { margin-bottom: 14px; } html[data-reading] .section-body pre, html[data-reading] .section-body code { font-size: var(--fs-code); } html[data-reading] .section-body pre { line-height: var(--lh-tight); } html[data-reading] .section-header { font-size: var(--fs-content-title) !important; } html[data-reading] .sample-content, html[data-reading] .sample-label { font-size: var(--fs-code) !important; } html[data-reading] .sample-box, html[data-reading] .sample-content, html[data-reading] .section-body pre { background: var(--reading-surface-2, #F6F8FA); border-color: var(--reading-surface-border, #E0E3E8); color: var(--text); } /* exam.html 题干与选项 */ html[data-reading] .question-text { font-size: var(--fs-content) !important; line-height: var(--lh-content) !important; } html[data-reading] .option-item { font-size: var(--fs-content-sm) !important; line-height: var(--lh-content) !important; } /* problem-list.html 表格阅读字号 */ html[data-reading] table.problem-table td, html[data-reading] table.problem-table th { font-size: var(--fs-content-sm) !important; } /* 学生页通用：搜索框、筛选 chip、导航页签上调到 15px，点击目标更友好 */ html[data-reading] .search-box input, html[data-reading] .filter-chip, html[data-reading] .nav-tab, html[data-reading] .tag-chip { font-size: 15px !important; } /* problem-manage btn-icon.edit */ body:not(.cs-raw-theme) .btn-icon.edit { background: var(--brand-soft) !important; color: var(--brand) !important; } body:not(.cs-raw-theme) .btn-icon.edit:hover { background: var(--brand) !important; color: #fff !important; } /* badge-info / badge-default 浅棕 → 主题灰 */ body:not(.cs-raw-theme) .badge-info { background: var(--brand-soft) !important; color: var(--brand) !important; } body:not(.cs-raw-theme) .badge-default { background: var(--bg) !important; color: var(--text-2) !important; } .student-page .explanation-textarea, .teacher-page .explanation-textarea { font-size: 14px !important; line-height: 1.7 !important; } /* ========================================================= * 响应式：小尺寸屏幕 / 窗口缩放适配 * ========================================================= */ /* 笔记本及以下（其它页面）：顶栏可换行，按钮组横向滚动 */ @media (max-width: 1280px) { .page-header { flex-wrap: wrap !important; overflow: visible !important; padding: 8px 12px !important; gap: 8px !important; } .header-right { width: 100%; overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 4px; } } /* 学生端/教师端：1201~1280 窄笔记本窗口仍保持单行——按钮尺寸由上方 clamp 平滑缩到最小档，覆盖全局 1280 换行规则；仅 ≤1200（iPad 横屏及更窄）才换成两行布局 */ @media (min-width: 1201px) and (max-width: 1280px) { .student-page .page-header, .teacher-page .page-header { flex-wrap: nowrap !important; overflow: hidden !important; padding: 0 8px !important; gap: 4px !important; } .student-page .page-header .header-left, .teacher-page .page-header .header-left, .student-page .page-header .header-center, .teacher-page .page-header .header-center { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; } .student-page .page-header .header-right, .teacher-page .page-header .header-right { width: auto !important; flex: 1 1 auto !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; padding-bottom: 0 !important; scrollbar-width: none; -ms-overflow-style: none; } .student-page .page-header .header-right::-webkit-scrollbar, .teacher-page .page-header .header-right::-webkit-scrollbar { display: none; height: 0; } } /* ≤1366 笔记本：隐藏“当前班级：”文字标签（保留下拉框），为按钮组让出空间 */ @media (max-width: 1366px) { .teacher-page .page-header .class-selector label { display: none !important; } } /* iPad / 平板（≤1200，含 1024/1180/1194 横屏与竖屏）：顶栏换两行，第一行标题+状态，第二行按钮组自动换行，按钮保持触控尺寸 */ @media (max-width: 1200px) { .student-page .page-header, .teacher-page .page-header { flex-wrap: wrap !important; overflow: visible !important; padding: 8px 10px !important; row-gap: 8px !important; } .student-page .page-header .header-right, .teacher-page .page-header .header-right { flex: 1 0 100% !important; width: 100% !important; flex-wrap: wrap !important; overflow: visible !important; justify-content: flex-start !important; padding-bottom: 0 !important; } .student-page .page-header .header-left, .teacher-page .page-header .header-left, .student-page .page-header .header-center, .teacher-page .page-header .header-center { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; } /* 按钮分组内部也允许折行：教师端按钮多（11 个），iPad 竖屏 820/810/768 下单组最宽约 1000px，若组内 nowrap 会产生横向溢出。折行后全部按钮可见可点，无横滚 */ .student-page .page-header .nav-group, .teacher-page .page-header .nav-group { flex-wrap: wrap !important; justify-content: flex-start !important; row-gap: 6px !important; } } /* 平板：侧边栏收窄，统计卡两列 */ @media (max-width: 1024px) { .admin-content { grid-template-columns: 200px 1fr !important; gap: 12px !important; } .stats-overview { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } /* 学生端/教师端换行布局下按钮维持 13px/30px 触控尺寸（不继续缩小） */ .student-page .page-header .nav-btn, .teacher-page .page-header .nav-btn { font-size: 13px !important; height: 30px !important; min-height: 30px !important; padding: 0 11px !important; } .page-header .nav-btn { font-size: 13px !important; height: 30px !important; min-height: 30px !important; padding: 0 11px !important; } } /* 手机：单列、侧边栏抽屉化由各页面自身处理，这里保证按钮可用 */ @media (max-width: 768px) { body { font-size: 14px; } .page-header { padding: 8px 10px !important; } .page-header .header-left h2 { font-size: 16px !important; } .student-page .page-header h2, .teacher-page .page-header h2 { font-size: 16px !important; } /* 学生/教师端保持“标题一行 + 按钮区一行”的横向换行布局： responsive.css 在本断点把 .page-header 改为 flex-direction:column，纵向多列会把 100% 宽的按钮区挤出屏幕造成横向滚动，这里覆盖回 row */ .student-page .page-header, .teacher-page .page-header { flex-direction: row !important; align-items: flex-start !important; } /* 校区名称手机端收小，避免顶栏挤压换行 */ .page-header .user-campus { font-size: 14px !important; margin-left: 4px !important; } .header-right { gap: 6px !important; } .student-page .page-header .nav-btn, .teacher-page .page-header .nav-btn, .page-header .nav-btn { font-size: 13px !important; height: 32px !important; min-height: 32px !important; padding: 0 11px !important; } .student-page .nav-group, .teacher-page .nav-group { gap: 4px !important; } .stats-overview, .question-stats { grid-template-columns: 1fr 1fr !important; } .stats-card { padding: 14px !important; } .stats-card .stats-value { font-size: 22px !important; } /* 教务侧边栏在手机端改为横向滚动条 */ .app-layout { grid-template-columns: 1fr !important; } .app-sidebar { position: static !important; width: 100% !important; max-height: none !important; } .app-sidebar .sidebar-nav { display: flex !important; overflow-x: auto !important; gap: 6px !important; padding-bottom: 8px; } .app-sidebar .nav-section-title, .app-sidebar .sidebar-footer { display: none !important; } .app-sidebar .nav-menu-item { white-space: nowrap !important; } /* 弹窗手机端满宽 */ .modal-v2-content, .form-modal-content, .modal-content, .modal-box, .pet-modal { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; } /* admin 顶栏不挤压 */ .admin-header { flex-wrap: wrap !important; gap: 8px !important; } } @media (max-width: 480px) { .stats-overview { grid-template-columns: 1fr !important; } .student-page .page-header .nav-btn, .teacher-page .page-header .nav-btn, .page-header .nav-btn { font-size: 12px !important; height: 30px !important; min-height: 30px !important; padding: 0 9px !important; } } /* ========================================================= * 无障碍基础（2026-09 UI 整改 D1/D2） * ========================================================= */ /* D1 动效降级：尊重系统"减少动态效果"设置，关闭装饰性动画与长过渡，覆盖全站 106 组 keyframes 与 242 处 transition（含登录猫、计时器 pulse） */ @media (prefers-reduced-motion: reduce) { html, body { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } /* D2 键盘焦点环：品牌蓝 2px outline + 2px 间隙，跟随元素自身圆角，不占布局空间；鼠标点击不显示（:focus-visible 仅键盘 Tab 触发），为被 outline:none 抹掉焦点指示的交互元素兜底 */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible, [role="menuitem"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); } /* ========================================================= * 批2 组件统一层（2026-09 UI 整改 B1/B2/B3） * 设计规范（用户既定）：主按钮实心品牌蓝白字高36-40px圆角6-8px， * hover 仅变深色；次按钮白底+1px浅灰边框，hover 文字/边框变蓝； * 文字按钮无框；全部扁平、无投影、无位移。 * 本层收口六套历史按钮（base/style/components/admin/student-mgmt/modals-v2）， * 不改任何 HTML class。 * ========================================================= */ /* ---------- B1-1 按钮基座：统一尺寸/字重/动效（导航类按钮除外，见下方豁免） ---------- */ .btn, .btn-m2, .action-btn, button.btn, input[type="button"].btn, input[type="submit"].btn, .quick-actions button { height: var(--control-height); min-height: var(--control-height); padding: 0 var(--space-4) !important; border-radius: var(--radius) !important; font-size: var(--fs-base) !important; font-weight: 500 !important; line-height: 1 !important; box-shadow: none !important; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out) !important; vertical-align: middle; } /* 通用 hover：仅颜色变化，禁止上浮位移与投影（覆盖六套旧 hover） */ .btn:hover, .btn-m2:hover, .action-btn:hover, .quick-actions button:hover { transform: none !important; opacity: 1 !important; box-shadow: none !important; } .btn:active, .btn-m2:active { transform: none !important; } /* 尺寸档 */ .btn-small, .btn-sm, .btn-xs, .btn-m2-small, .btn-m2-sm { height: 30px !important; min-height: 30px !important; padding: 0 12px !important; font-size: var(--fs-sm) !important; border-radius: var(--radius) !important; } .btn-large, .btn-lg, .btn-m2-large { height: var(--control-height-lg) !important; min-height: var(--control-height-lg) !important; padding: 0 20px !important; font-size: var(--fs-md) !important; } /* ---------- B1-2 主按钮：实心品牌蓝 ---------- */ .btn-primary, .btn-info, .btn-m2-primary, input[type="submit"], button[type="submit"] { background: var(--brand) !important; background-image: none !important; border: 1px solid var(--brand) !important; color: #FFFFFF !important; } .btn-primary:hover, .btn-info:hover, .btn-m2-primary:hover, input[type="submit"]:hover, button[type="submit"]:hover:not(.btn-secondary):not(.btn-text) { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; color: #FFFFFF !important; } /* ---------- B1-3 次按钮：白底浅灰边框，hover 文字/边框变蓝 ---------- */ .btn-secondary, .btn-m2-secondary { background: var(--card) !important; background-image: none !important; border: 1px solid var(--border) !important; color: var(--text) !important; } .btn-secondary:hover, .btn-m2-secondary:hover { background: var(--card) !important; border-color: var(--brand) !important; color: var(--brand) !important; } /* ---------- B1-4 语义按钮：实心态色（保持原用途） ---------- */ .btn-success, .btn-m2-success { background: var(--success) !important; border: 1px solid var(--success) !important; color: #FFFFFF !important; } .btn-success:hover, .btn-m2-success:hover { background: #128A3E !important; border-color: #128A3E !important; } .btn-warning, .btn-m2-warning { background: var(--warning) !important; border: 1px solid var(--warning) !important; color: #FFFFFF !important; } .btn-warning:hover, .btn-m2-warning:hover { background: #B45309 !important; border-color: #B45309 !important; } .btn-danger, .btn-m2-danger { background: var(--danger) !important; border: 1px solid var(--danger) !important; color: #FFFFFF !important; } .btn-danger:hover, .btn-m2-danger:hover { background: var(--danger-text) !important; border-color: var(--danger-text) !important; } /* ---------- B1-5 文字按钮：无框无底，蓝色文字（提供给后续页面使用，并收编 .btn-link） ---------- */ .btn-text, .btn-link { background: transparent !important; border: 1px solid transparent !important; color: var(--brand) !important; box-shadow: none !important; padding: 0 var(--space-2) !important; height: auto !important; min-height: 0 !important; } .btn-text:hover, .btn-link:hover { background: transparent !important; color: var(--brand-hover) !important; text-decoration: none !important; } /* 危险文字按钮（表格行内"删除"类） */ .btn-text-danger { background: transparent !important; border: 1px solid transparent !important; color: var(--danger) !important; } .btn-text-danger:hover { color: var(--danger-text) !important; background: var(--danger-soft) !important; } /* 禁用态统一 */ .btn:disabled, .btn-m2:disabled, button[disabled].btn { opacity: 0.55 !important; cursor: not-allowed !important; transform: none !important; } /* 顶栏导航按钮豁免：保持小而紧凑（30-32px），只统一色彩/圆角/无位移动画 */ .nav-btn { border-radius: var(--radius) !important; box-shadow: none !important; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out) !important; } .nav-btn:hover { transform: none !important; box-shadow: none !important; } /* ---------- B2-1 表格：单元格节奏统一（表头/行规则已在上方收口） ---------- */ .data-table th, .data-table td, table th, table td { padding: 10px 14px !important; font-size: var(--fs-base) !important; vertical-align: middle !important; } .data-table th, table thead th { white-space: nowrap; } /* 表格内操作按钮统一为小号，行内多按钮不再大小不一 */ .data-table .btn, .data-table .action-buttons .btn, table .btn, table .action-buttons .btn, table .action-btn { height: 30px !important; min-height: 30px !important; padding: 0 10px !important; font-size: var(--fs-sm) !important; } /* ---------- B2-2 空状态：卡通图标 + 两级文案，留白充足 ---------- */ .empty-state, .empty, .no-data { padding: var(--space-10) var(--space-4) !important; color: var(--text-3) !important; } .empty-state .icon, .empty .icon, .no-data .icon { font-size: 44px !important; line-height: 1 !important; margin-bottom: var(--space-3) !important; opacity: 0.9; } .empty-state h3, .empty h3, .no-data h3 { font-size: var(--fs-md) !important; font-weight: 500 !important; color: var(--text-2) !important; margin: 0 0 var(--space-1) !important; } .empty-state p, .empty p, .no-data p { font-size: var(--fs-sm) !important; color: var(--text-3) !important; margin: 0 !important; } /* ---------- B2-3 分页器：尺寸统一、间距、active 实心品牌蓝 ---------- */ .pagination, .pagination-container, .pager, .hw-pagination { display: flex !important; align-items: center !important; justify-content: center !important; gap: var(--space-2) !important; flex-wrap: wrap !important; padding: var(--space-4) !important; } .pagination-info { color: var(--text-3) !important; font-size: var(--fs-sm) !important; margin: 0 var(--space-2) !important; } .pagination button, .pagination .page-btn, .pagination-btn, .pager button, .pager .page-btn, .hw-pagination button { min-width: 32px !important; height: 32px !important; padding: 0 10px !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; background: var(--card) !important; color: var(--text-2) !important; font-size: var(--fs-sm) !important; line-height: 1 !important; cursor: pointer !important; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out) !important; } .pagination button:hover:not(:disabled), .pagination .page-btn:hover, .pagination-btn:hover:not(:disabled), .pager button:hover:not(:disabled), .pager .page-btn:hover, .hw-pagination button:hover:not(:disabled) { border-color: var(--brand) !important; color: var(--brand) !important; background: var(--card) !important; } .pagination button.active, .pagination .page-btn.active, .pager button.active, .pager .page-btn.active, .hw-pagination button.active { background: var(--brand) !important; border-color: var(--brand) !important; color: #FFFFFF !important; } .pagination button:disabled, .pagination-btn:disabled, .pager button:disabled, .hw-pagination button:disabled { opacity: 0.45 !important; cursor: not-allowed !important; } /* ---------- B3-1 弹窗：遮罩/头/体/脚节奏 + 入场 ---------- */ .modal-overlay, .modal-mask, .modal-v2-overlay, .form-modal-overlay, .overlay { background: rgba(15, 23, 42, .45) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: var(--z-modal) !important; } .modal-header, .modal-v2-header, .form-modal-header, .dialog-header, .popup-header { padding: var(--space-4) var(--space-5) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: var(--space-3) !important; } .modal-header h2, .modal-header h3, .modal-v2-header h2, .modal-v2-header h3, .form-modal-header h2, .form-modal-header h3, .dialog-header h2, .dialog-header h3 { font-size: var(--fs-xl) !important; font-weight: 600 !important; margin: 0 !important; color: var(--text) !important; } .modal-body, .modal-v2-body, .form-modal-body, .dialog-body, .popup-body { padding: var(--space-5) !important; font-size: var(--fs-base) !important; line-height: var(--lh-base) !important; color: var(--text) !important; } .modal-footer, .modal-v2-footer, .form-modal-footer, .dialog-footer, .popup-footer { padding: var(--space-3) var(--space-5) var(--space-4) !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: var(--space-2) !important; } /* 弹窗入场（轻量 200ms；reduced-motion 时批1全局规则会自动压到 0） */ .modal-content, .modal-v2-content, .form-modal-content, .dialog, .popup { animation: csModalIn var(--dur-slow) var(--ease-out) both; } @keyframes csModalIn { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------- B3-2 徽章状态色：浅底深字（覆盖 .badge/.tag/.label/.chip 及判题状态） ---------- */ .badge-success, .tag-success, .label-success, .status-badge.status-active, .status-badge.online, .badge-passed, .tag-passed { background: var(--success-soft) !important; color: var(--success-text) !important; border-color: transparent !important; } .badge-warning, .tag-warning, .label-warning, .status-badge.status-pending, .status-badge.warning, .badge-pending { background: var(--warning-soft) !important; color: var(--warning-text) !important; border-color: transparent !important; } .badge-danger, .tag-danger, .label-danger, .status-badge.status-inactive, .status-badge.status-disabled, .badge-failed, .tag-failed { background: var(--danger-soft) !important; color: var(--danger-text) !important; border-color: transparent !important; } .badge-info, .tag-info, .label-info, .badge-running, .badge-processing { background: var(--brand-soft) !important; color: var(--brand) !important; border-color: transparent !important; } /* 状态徽章中性档（禁用/过期/未知） */ .badge-default, .tag-default, .label-default, .badge-muted, .badge-disabled { background: var(--bg) !important; color: var(--text-3) !important; border-color: transparent !important; } /* ---------- B3-3 表单控件：高度/内边距/字号/disabled/placeholder 补齐 ---------- */ input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="datetime-local"], select, textarea, .form-control { height: var(--control-height); padding: 0 12px !important; font-size: var(--fs-base) !important; line-height: var(--lh-sm) !important; } textarea { height: auto !important; padding: 10px 12px !important; min-height: 80px; } select { padding-right: 28px !important; cursor: pointer; } input:disabled, select:disabled, textarea:disabled, .form-control:disabled { background: var(--bg) !important; color: var(--text-3) !important; cursor: not-allowed !important; opacity: 1; } input::placeholder, textarea::placeholder { color: var(--text-3) !important; } /* 表单 label 节奏 */ .form-group label, .form-item label, label.form-label { display: inline-block; font-size: var(--fs-base) !important; font-weight: 500 !important; color: var(--text) !important; margin-bottom: 6px !important; } .form-group, .form-item { margin-bottom: var(--space-4); }