/* ========================================================= * 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); --success: #16A34A; --warning: #D97706; --danger: #DC2626; --info: var(--brand); --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; --shadow: 0 2px 8px rgba(31, 35, 41, .06); --shadow-card: 0 2px 8px rgba(31, 35, 41, .06); --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); } /* ========================================================= * 全局基础重置 * 注意：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: var(--bg) !important; background-image: none !important; } .login-background { opacity: .35 !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; } .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: 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: 18px !important; font-weight: 600 !important; letter-spacing: .3px !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: 6px !important; } /* 学生端/教师端（蓝底顶栏）按钮：半透明白幽灵样式 */ .student-page .nav-btn, .teacher-page .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; 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; } body:not(.cs-raw-theme) .sidebar .sidebar-menu li:hover, body:not(.cs-raw-theme) .sidebar-menu li:hover { background: rgba(255,255,255,.14) !important; color: #fff !important; } body:not(.cs-raw-theme) .sidebar .sidebar-menu li.active, body:not(.cs-raw-theme) .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; } } /* 平板：侧边栏收窄，统计卡两列 */ @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; } .student-page .nav-btn, .teacher-page .nav-btn, .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; } /* 校区名称手机端收小，避免顶栏挤压换行 */ .page-header .user-campus { font-size: 14px !important; margin-left: 4px !important; } .header-right { gap: 6px !important; } .student-page .nav-btn, .teacher-page .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 .nav-btn, .teacher-page .nav-btn, .page-header .nav-btn { font-size: 12px !important; height: 30px !important; min-height: 30px !important; padding: 0 9px !important; } }