/* ========================================================= 暗黑极简科技风 · 主题体系 - 默认暗黑（#0A0E17 底 / #18202F 磨砂卡片 / #369EFF 冷蓝主色） - [data-theme="light"] 复用基础 style.css 的浅色为底，干净可用 - 主题切换由 static/js/theme.js + 内联脚本（防闪烁）控制 ========================================================= */ /* ---------- 设计变量 ---------- */ :root { --accent: #369EFF; --accent-hover: #5cb0ff; --accent-weak: rgba(54, 158, 255, 0.15); --accent-glow: 0 0 0 1px rgba(54, 158, 255, 0.45), 0 0 14px rgba(54, 158, 255, 0.25); --bg: #0A0E17; --bg-elev: #111827; --card: rgba(24, 32, 47, 0.72); /* 磨砂玻璃卡片 #18202F */ --card-solid: #18202F; --card-border: rgba(255, 255, 255, 0.08); --hover-bg: rgba(255, 255, 255, 0.04); --text: #E6EDF6; --text-dim: #8A97A8; --text-mute: #5B6675; --input-bg: #0F1623; --input-border: rgba(255, 255, 255, 0.12); --table-head: #1A2334; --table-row: rgba(255, 255, 255, 0.02); --table-row-alt: rgba(255, 255, 255, 0.045); --table-border: rgba(255, 255, 255, 0.06); --danger: #FF5C5C; --warning: #FFB02E; --success: #2ECC71; --shadow: 0 8px 30px rgba(0, 0, 0, 0.45); --radius: 10px; } /* 浅色主题：干净可用版（主体沿用基础 style.css 的浅色硬编码，这里只切换变量，供用到 var() 的少量地方） */ [data-theme="light"] { --accent: #369EFF; --accent-hover: #2b8ae6; --accent-weak: rgba(54, 158, 255, 0.12); --accent-glow: 0 0 0 1px rgba(54, 158, 255, 0.4); --bg: #f0f2f5; --bg-elev: #ffffff; --card: #ffffff; --card-solid: #ffffff; --card-border: #e8e8e8; --hover-bg: #f2f6ff; --text: #333333; --text-dim: #666666; --text-mute: #999999; --input-bg: #ffffff; --input-border: #d9d9d9; --table-head: #fafafa; --table-row: #ffffff; --table-row-alt: #fafafa; --table-border: #f0f0f0; --danger: #e74c3c; --warning: #f39c12; --success: #27ae60; --shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } /* ========================================================= 暗黑主题覆盖（仅 [data-theme="dark"] 生效） ========================================================= */ [data-theme="dark"] body { background: var(--bg); color: var(--text); } [data-theme="dark"] a { color: var(--text); } /* ---- 顶部导航 ---- */ [data-theme="dark"] .top-bar { background: rgba(13, 18, 28, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--card-border); box-shadow: none; } [data-theme="dark"] .logo { color: var(--text); } [data-theme="dark"] .current-user { color: var(--text-dim); } [data-theme="dark"] .nav-tab { color: var(--text-dim); } [data-theme="dark"] .nav-tab:hover { background: var(--accent-weak); color: var(--text); } [data-theme="dark"] .nav-tab.active { background: var(--accent); color: #fff; } [data-theme="dark"] .logout-btn { background: var(--card-solid); color: var(--text-dim); border-color: var(--input-border); } [data-theme="dark"] .logout-btn:hover { background: rgba(255, 92, 92, 0.12); color: var(--danger); } /* ---- 工具栏 / 筛选 ---- */ [data-theme="dark"] .week-label { color: var(--text); } [data-theme="dark"] .filter-select { background: var(--input-bg); color: var(--text); border-color: var(--input-border); } [data-theme="dark"] .filter-select:focus { border-color: var(--accent); } /* ---- 按钮 ---- */ [data-theme="dark"] .btn { background: var(--card-solid); color: var(--text); border-color: var(--input-border); } [data-theme="dark"] .btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--accent-glow); } [data-theme="dark"] .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } [data-theme="dark"] .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 0 12px rgba(54, 158, 255, 0.4); } [data-theme="dark"] .btn-danger { background: var(--danger); border-color: var(--danger); } [data-theme="dark"] .btn-danger:hover { background: #e04545; } [data-theme="dark"] .btn-warning { background: var(--warning); border-color: var(--warning); } [data-theme="dark"] .btn-warning:hover { background: #e09b1f; } [data-theme="dark"] .btn-success { background: var(--success); border-color: var(--success); } [data-theme="dark"] .btn-success:hover { background: #28b463; } [data-theme="dark"] .btn-week-copy { background: linear-gradient(135deg, #2e7d32, #43a047); border-color: #1b5e20; box-shadow: 0 2px 10px rgba(46, 125, 50, 0.4); } [data-theme="dark"] .btn-week-copy:hover { background: linear-gradient(135deg, #388e3c, #4caf50); box-shadow: 0 4px 14px rgba(46, 125, 50, 0.5); } [data-theme="dark"] .btn-icon { background: var(--card-solid); color: var(--text); border-color: var(--input-border); } /* ---- 主题切换按钮 ---- */ .theme-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: var(--card-solid); color: var(--text); border: 1px solid var(--input-border); border-radius: 16px; padding: 4px 14px; font-size: 13px; cursor: pointer; transition: all 0.2s; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--accent-glow); } /* ---- 卡片 / 盒子 ---- */ [data-theme="dark"] .card-box, [data-theme="dark"] .plan-card, [data-theme="dark"] .lp-tree, [data-theme="dark"] .legend, [data-theme="dark"] .week-stats, [data-theme="dark"] .salary-hint, [data-theme="dark"] .rollcall-card, [data-theme="dark"] .bulk-course, [data-theme="dark"] .unattended-item, [data-theme="dark"] .dash-today-course, [data-theme="dark"] .dash-stat-card, [data-theme="dark"] .att-student, [data-theme="dark"] .bulk-student, [data-theme="dark"] .salary-table, [data-theme="dark"] .schedule-grid, [data-theme="dark"] .hour-quick-results, [data-theme="dark"] .modal, [data-theme="dark"] .delete-progress-box { background: var(--card-solid); border: 1px solid var(--card-border); box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } [data-theme="dark"] .card-box { background: var(--card); } [data-theme="dark"] .card-box h4 { color: var(--text); } [data-theme="dark"] .empty-hint { color: var(--text-mute); } /* 教案/测评 */ [data-theme="dark"] .plan-title { color: var(--text); } [data-theme="dark"] .plan-goal, [data-theme="dark"] .plan-chapters { color: var(--text-dim); } [data-theme="dark"] .plan-remarks { background: var(--input-bg); color: var(--text-dim); } [data-theme="dark"] .plan-meta { color: var(--text-mute); } [data-theme="dark"] .plan-class-tag { background: var(--accent); color: #fff; } [data-theme="dark"] .chapter-row input { background: var(--input-bg); color: var(--text); border-color: var(--input-border); } /* ---- 数据表格 ---- */ [data-theme="dark"] .data-table th { background: var(--table-head); color: var(--text); border-bottom: 2px solid var(--table-border); } [data-theme="dark"] .data-table td { border-bottom: 1px solid var(--table-border); color: var(--text); } [data-theme="dark"] .data-table tbody tr:nth-child(even) td { background: var(--table-row-alt); } [data-theme="dark"] .data-table tr:hover td { background: var(--accent-weak) !important; } [data-theme="dark"] .text-bold { color: var(--accent); } [data-theme="dark"] .data-table td .student-hours .remaining { color: var(--success); } [data-theme="dark"] .data-table td .student-hours.low, [data-theme="dark"] .data-table td .student-hours.low .remaining { color: var(--danger); } [data-theme="dark"] .data-table td .action-btn { background: var(--card-solid); color: var(--accent); border-color: var(--input-border); } [data-theme="dark"] .data-table td .action-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } [data-theme="dark"] .data-table td .action-btn.danger { color: var(--danger); } [data-theme="dark"] .data-table td .action-btn.danger:hover { background: var(--danger); color: #fff; } [data-theme="dark"] .data-table td .level-tag { background: var(--accent-weak); color: var(--accent); } [data-theme="dark"] .hours-badge.ok { background: rgba(46, 204, 113, 0.15); color: var(--success); } [data-theme="dark"] .hours-badge.low { background: rgba(255, 176, 46, 0.15); color: var(--warning); } [data-theme="dark"] .hours-badge.empty { background: rgba(255, 92, 92, 0.15); color: var(--danger); } /* 工资结算表 */ [data-theme="dark"] .salary-table th { background: var(--accent); color: #fff; } [data-theme="dark"] .salary-table td { border-bottom: 1px solid var(--table-border); color: var(--text); } [data-theme="dark"] .salary-table .total-row { background: var(--accent-weak); } [data-theme="dark"] .salary-table .total-row td { color: var(--accent); } [data-theme="dark"] .salary-hint p { color: var(--text-dim); } [data-theme="dark"] .salary-rule { background: rgba(255, 176, 46, 0.12); border-left-color: var(--warning); color: var(--text); } [data-theme="dark"] .coach-fee-cell.coach-fee-ov { background: rgba(255, 176, 46, 0.12); } [data-theme="dark"] .coach-fee-cell.coach-fee-ov .cf-input { background: var(--input-bg); border-color: var(--warning); color: var(--warning); } /* ---- 弹窗 / 表单 ---- */ [data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); } [data-theme="dark"] .modal-header { border-bottom: 1px solid var(--card-border); } [data-theme="dark"] .modal-header h3 { color: var(--text); } [data-theme="dark"] .modal-close { color: var(--text-mute); } [data-theme="dark"] .modal-close:hover { color: var(--text); } [data-theme="dark"] .form-row label { color: var(--text-dim); } [data-theme="dark"] .form-row label small { color: var(--text-mute); } [data-theme="dark"] .form-row input, [data-theme="dark"] .form-row select { background: var(--input-bg); color: var(--text); border-color: var(--input-border); } [data-theme="dark"] .form-row input:focus, [data-theme="dark"] .form-row select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak); } [data-theme="dark"] .form-actions { border-top: 1px solid var(--card-border); } [data-theme="dark"] .hour-detail-summary .hd-card { background: rgba(46, 204, 113, 0.15); color: var(--success); } [data-theme="dark"] .hour-detail-summary .hd-card.low { background: rgba(255, 92, 92, 0.15); color: var(--danger); } [data-theme="dark"] .hd-meta { color: var(--text-dim); } /* ---- Toast ---- */ [data-theme="dark"] .toast { background: #1c2433; color: var(--text); border: 1px solid var(--card-border); } [data-theme="dark"] .toast.success { background: rgba(46, 204, 113, 0.92); color: #06210f; } [data-theme="dark"] .toast.error { background: rgba(255, 92, 92, 0.92); color: #2a0606; } /* ---- 子导航 ---- */ [data-theme="dark"] .sub-tabs { border-bottom-color: var(--card-border); } [data-theme="dark"] .sub-tab { color: var(--text-dim); } [data-theme="dark"] .sub-tab:hover { color: var(--accent); } [data-theme="dark"] .sub-tab.active { color: var(--accent); border-bottom-color: var(--accent); } /* ---- 课表网格 ---- */ [data-theme="dark"] .schedule-table th, [data-theme="dark"] .schedule-table td { border-color: var(--table-border); } [data-theme="dark"] .schedule-table thead th { background: var(--table-head); color: var(--text); } [data-theme="dark"] .schedule-table thead th .date-num { color: var(--text-mute); } [data-theme="dark"] .year-row th.year-header { background: #0f1623; color: var(--accent); } [data-theme="dark"] .slot-label { background: var(--table-head); color: var(--text-dim); } [data-theme="dark"] .cell.empty:hover { background: rgba(255, 255, 255, 0.03); } [data-theme="dark"] .cell.empty::after { color: var(--text-mute); } /* 课程卡片 */ [data-theme="dark"] .course-card { background: var(--card-solid); border: 1px solid var(--card-border); color: var(--text); } [data-theme="dark"] .course-card:hover { box-shadow: var(--accent-glow); } [data-theme="dark"] .course-card .time { color: var(--text-dim); } [data-theme="dark"] .course-card .coach { color: var(--accent); } [data-theme="dark"] .course-card .venue { color: var(--text-mute); } [data-theme="dark"] .course-card .students { color: var(--text-dim); } [data-theme="dark"] .course-card .type-tag { background: var(--accent-weak); color: var(--accent); } /* 课程类型配色（暗黑：半透明色调 + 亮色文字，保留左侧色条辨识度） */ [data-theme="dark"] .course-card.type-adult { background: rgba(25, 118, 210, 0.18); border-left-color: #1976d2; } [data-theme="dark"] .course-card.type-adult .type-tag { background: #1976d2; color: #fff; } [data-theme="dark"] .course-card.type-1v1 { background: rgba(123, 31, 162, 0.18); border-left-color: #b052d6; } [data-theme="dark"] .course-card.type-1v1 .type-tag { background: #7b1fa2; color: #fff; } [data-theme="dark"] .course-card.type-1v2 { background: rgba(0, 105, 92, 0.18); border-left-color: #26a69a; } [data-theme="dark"] .course-card.type-1v2 .type-tag { background: #00695c; color: #fff; } [data-theme="dark"] .course-card.type-1v3 { background: rgba(230, 81, 0, 0.18); border-left-color: #ff8a4c; } [data-theme="dark"] .course-card.type-1v3 .type-tag { background: #e65100; color: #fff; } [data-theme="dark"] .course-card.type-longterm { background: rgba(46, 125, 50, 0.18); border-left-color: #4caf50; } [data-theme="dark"] .course-card.type-longterm .type-tag { background: #2e7d32; color: #fff; } [data-theme="dark"] .course-card.type-camp { background: rgba(198, 40, 40, 0.18); border-left-color: #ef5350; } [data-theme="dark"] .course-card.type-camp .type-tag { background: #c62828; color: #fff; } [data-theme="dark"] .course-card.type-club { background: rgba(97, 97, 97, 0.22); border-left-color: #9e9e9e; } [data-theme="dark"] .course-card.type-club .type-tag { background: #616161; color: #fff; } /* 图例（仅文字/卡片底色，dot 保持实色） */ [data-theme="dark"] .legend-title { color: var(--text-dim); } [data-theme="dark"] .legend-item { color: var(--text-dim); } /* 周统计 */ [data-theme="dark"] .week-stats { color: var(--text-dim); } [data-theme="dark"] .stat-item b { color: var(--accent); } /* ---- 考勤点名 ---- */ [data-theme="dark"] .rollcall-card-info { color: var(--text); } [data-theme="dark"] .rollcall-card-info .time { color: var(--text); } [data-theme="dark"] .rollcall-card-info .coach { color: var(--accent); } [data-theme="dark"] .rollcall-card-info .type-tag-sm { background: var(--accent-weak); color: var(--accent); } [data-theme="dark"] .rollcall-status-tag.done { background: rgba(46, 204, 113, 0.15); color: var(--success); } [data-theme="dark"] .rollcall-status-tag.pending { background: rgba(255, 176, 46, 0.15); color: var(--warning); } [data-theme="dark"] .unattended-panel { background: rgba(255, 176, 46, 0.1); border-color: rgba(255, 176, 46, 0.3); } [data-theme="dark"] .unattended-header h4 { color: var(--warning); } [data-theme="dark"] .unattended-count { background: var(--warning); color: #1a1a1a; } [data-theme="dark"] .unattended-info .unattended-date { color: var(--text); } [data-theme="dark"] .unattended-info .unattended-time, [data-theme="dark"] .unattended-info .coach { color: var(--accent); } [data-theme="dark"] .unattended-info .unattended-students { color: var(--text-dim); } [data-theme="dark"] .salary-alert-banner { background: rgba(255, 176, 46, 0.1); border-color: rgba(255, 176, 46, 0.35); color: var(--warning); } [data-theme="dark"] .salary-alert-list { color: var(--text-dim); } [data-theme="dark"] .bulk-course-head .unattended-date { color: var(--text); } [data-theme="dark"] .bulk-course-head .coach { color: var(--accent); } [data-theme="dark"] .bulk-student-name { color: var(--text); } [data-theme="dark"] .bulk-toggle { background: var(--card-solid); border-color: var(--input-border); color: var(--text-dim); } [data-theme="dark"] .bulk-toggle.present.active { background: var(--success); border-color: var(--success); color: #fff; } [data-theme="dark"] .bulk-toggle.leave.active { background: var(--warning); border-color: var(--warning); color: #1a1a1a; } [data-theme="dark"] .bulk-toggle.absent.active { background: var(--danger); border-color: var(--danger); color: #fff; } [data-theme="dark"] .att-student-name { color: var(--text); } [data-theme="dark"] .hour-badge { background: rgba(46, 204, 113, 0.15); color: var(--success); } [data-theme="dark"] .hour-badge.low { background: rgba(255, 92, 92, 0.15); color: var(--danger); } [data-theme="dark"] .att-btn { background: var(--card-solid); border-color: var(--input-border); color: var(--text-dim); } [data-theme="dark"] .att-btn:hover { border-color: var(--accent); } [data-theme="dark"] .att-btn.active.present { background: var(--success); border-color: var(--success); color: #fff; } [data-theme="dark"] .att-btn.active.leave { background: var(--warning); border-color: var(--warning); color: #1a1a1a; } [data-theme="dark"] .att-btn.active.absent { background: var(--danger); border-color: var(--danger); color: #fff; } /* 续费表单 */ [data-theme="dark"] .renewal-form input, [data-theme="dark"] .renewal-form select { background: var(--input-bg); color: var(--text); border-color: var(--input-border); } [data-theme="dark"] .renewal-form input:focus, [data-theme="dark"] .renewal-form select:focus { border-color: var(--accent); } /* 课后点评 */ [data-theme="dark"] .feedback-content { color: var(--text-dim); } [data-theme="dark"] .send-tag.sent { background: rgba(46, 204, 113, 0.15); color: var(--success); } [data-theme="dark"] .send-tag.unsent { background: rgba(255, 176, 46, 0.15); color: var(--warning); } /* ---- 待办提醒 ---- */ [data-theme="dark"] .dash-stat-card:hover { border-color: var(--accent); } [data-theme="dark"] .dash-stat-card .dash-stat-num { color: var(--accent); } [data-theme="dark"] .dash-stat-card .dash-stat-label { color: var(--text-mute); } [data-theme="dark"] .dash-stat-card.dash-salary { background: rgba(255, 176, 46, 0.12); } [data-theme="dark"] .dash-stat-card.dash-salary .dash-stat-num { color: var(--warning); } [data-theme="dark"] .month-input { background: var(--card); color: var(--text); border-color: var(--border); } [data-theme="dark"] .biz-alert-badge { background: rgba(255, 176, 46, 0.15); color: var(--warning); } [data-theme="dark"] .biz-alert-count { color: var(--danger); } [data-theme="dark"] .biz-alert-names { color: var(--text-mute); } [data-theme="dark"] .biz-alert-row { border-bottom-color: var(--border); } [data-theme="dark"] .dash-today-course .time { color: var(--text); } [data-theme="dark"] .dash-today-course .coach { color: var(--accent); } [data-theme="dark"] .dash-today-course .type-tag-sm { background: var(--accent-weak); color: var(--accent); } [data-theme="dark"] .dash-today-course .status-tag.done { background: rgba(46, 204, 113, 0.15); color: var(--success); } [data-theme="dark"] .dash-today-course .status-tag.pending { background: rgba(255, 176, 46, 0.15); color: var(--warning); } [data-theme="dark"] .dash-conflict-item { background: rgba(255, 92, 92, 0.12); color: var(--danger); } [data-theme="dark"] .dash-conflict-item b { color: var(--text); } [data-theme="dark"] .dash-empty { color: var(--success); } /* ---- 框选 / 复制 ---- */ [data-theme="dark"] .drag-select-rect { border: 2px dashed var(--accent); background: rgba(54, 158, 255, 0.12); } [data-theme="dark"] .course-card.drag-highlight { outline: 2px solid var(--accent) !important; outline-offset: -1px; background-color: var(--accent-weak) !important; } [data-theme="dark"] .batch-hint { color: var(--text-mute); background: var(--input-bg); } [data-theme="dark"] .course-card.copy-selected { outline: 2px solid var(--success) !important; } /* ---- 删除进度遮罩 ---- */ [data-theme="dark"] .delete-progress-overlay { background: rgba(0, 0, 0, 0.6); } [data-theme="dark"] .delete-spinner { border-color: var(--card-border); border-top-color: var(--danger); } [data-theme="dark"] .delete-progress-text { color: var(--text); } [data-theme="dark"] .delete-progress-sub { color: var(--text-mute); } /* ---- 全局搜索 ---- */ [data-theme="dark"] #search-results-table tr:hover td { background: var(--accent-weak); } [data-theme="dark"] .search-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak); } /* ---- 顶部课时快查 ---- */ [data-theme="dark"] .hour-quick-search input { background: var(--input-bg); color: var(--text); border-color: var(--input-border); } [data-theme="dark"] .hour-quick-search input:focus { border-color: var(--accent); } [data-theme="dark"] .hour-quick-item { color: var(--text); } [data-theme="dark"] .hour-quick-item:hover { background: var(--accent-weak); } /* ---- 教案库 ---- */ [data-theme="dark"] .lp-path { color: var(--text-mute); } [data-theme="dark"] .lp-item:hover { background: var(--accent-weak); } [data-theme="dark"] .lp-folder-form { background: var(--accent-weak); } [data-theme="dark"] .lp-folder-form input { background: var(--input-bg); color: var(--text); border-color: var(--input-border); } /* ========================================================= 暗黑滚动条（webkit） ========================================================= */ [data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #243047; border-radius: 6px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #2f3e5c; } /* ---------- 工作台首页：浅色主题微调 ---------- */ [data-theme="light"] .wb-course, [data-theme="light"] .wb-stat, [data-theme="light"] .wb-row { box-shadow: 0 1px 3px rgba(0, 0, 0, .06); } [data-theme="light"] .wb-coach-bar .wb-bar-track { background: #eef1f5; } [data-theme="light"] .wb-status.done { background: #eaf9f0; } [data-theme="light"] .wb-status.pending { background: #fff6e6; } [data-theme="light"] .wb-badge { background: #ffecec; } [data-theme="light"] .wb-badge.warn { background: #fff6e6; } [data-theme="light"] .wb-badge.ok { background: #eaf9f0; } /* 暗黑：工作台卡片改磨砂玻璃 */ [data-theme="dark"] .wb-course, [data-theme="dark"] .wb-stat, [data-theme="dark"] .wb-row { background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }