/* ========== BINGO ALEVEL 全域主题系统 ========== */ /* 通过 切换，6 套完整配色：背景 + 卡片 + 文字 + 按钮 + 导航 + 输入框联动 */ /* --theme-body-text: 渐变背景上的文字色（高对比度，与渐变各段均兼容） */ /* --theme-body-text-shadow: 渐变背景上的文字阴影（增强可读性） */ /* --theme-text: 卡片/面板内部的文字色 */ /* ---------- 经典紫 ---------- */ :root, [data-theme="default"] { --theme-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --theme-bg-solid: #667eea; --theme-body-text: rgba(230, 233, 255, 0.94); --theme-body-text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); --theme-accent: #667eea; --theme-accent-2: #764ba2; --theme-surface: #ffffff; --theme-surface-hover: #f5f7fa; --theme-surface-alt: rgba(255,255,255,0.92); --theme-text: #2c3e50; --theme-text-secondary: #718096; --theme-text-muted: #64748b; --gray: #556270; --text-secondary: #64748b; --primary-color: #667eea; --text-color: #2c3e50; --card-bg: #ffffff; --bg-primary: #ffffff; --theme-border: #e2e8f0; --theme-navbar-bg: rgba(255,255,255,0.95); --theme-navbar-text: #2c3e50; --theme-input-bg: #ffffff; --theme-input-text: #2c3e50; --theme-input-border: #cbd5e0; --theme-btn-primary: #667eea; --theme-btn-primary-text: #ffffff; --theme-btn-outline: #cbd5e0; --theme-btn-outline-text: #4a5568; --theme-shadow: 0 4px 15px rgba(0,0,0,0.10); --theme-picker-bg: #ffffff; --theme-picker-text: #2c3e50; --theme-flash-success: #d4edda; --theme-flash-error: #f8d7da; --theme-stat-value: #2c3e50; } /* ---------- 海洋蓝 ---------- */ [data-theme="ocean"] { --theme-bg: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); --theme-bg-solid: #2193b0; --theme-body-text: rgba(13, 32, 51, 0.95); --theme-body-text-shadow: 0 1px 3px rgba(255, 255, 255, 0.2); --theme-accent: #2193b0; --theme-accent-2: #6dd5ed; --theme-surface: #ffffff; --theme-surface-hover: #f0f8fb; --theme-surface-alt: rgba(255,255,255,0.92); --theme-text: #1a365d; --theme-text-secondary: #4a6a8a; --theme-text-muted: #5a7a9a; --gray: #4a6078; --text-secondary: #5a7a9a; --primary-color: #2193b0; --text-color: #1a365d; --card-bg: #ffffff; --bg-primary: #ffffff; --theme-border: #cbe4f0; --theme-navbar-bg: rgba(255,255,255,0.95); --theme-navbar-text: #1a365d; --theme-input-bg: #ffffff; --theme-input-text: #1a365d; --theme-input-border: #a0cce0; --theme-btn-primary: #2193b0; --theme-btn-primary-text: #ffffff; --theme-btn-outline: #a0cce0; --theme-btn-outline-text: #2b6a82; --theme-shadow: 0 4px 15px rgba(0,0,0,0.10); --theme-picker-bg: #ffffff; --theme-picker-text: #1a365d; --theme-flash-success: #d4edda; --theme-flash-error: #f8d7da; --theme-stat-value: #1a365d; } /* ---------- 落日橙 ---------- */ [data-theme="sunset"] { --theme-bg: linear-gradient(135deg, #f2994a 0%, #eb5757 100%); --theme-bg-solid: #eb5757; --theme-body-text: rgba(26, 6, 6, 0.95); --theme-body-text-shadow: 0 1px 4px rgba(255, 255, 255, 0.22); --theme-accent: #eb5757; --theme-accent-2: #f2994a; --theme-surface: #ffffff; --theme-surface-hover: #fef5f2; --theme-surface-alt: rgba(255,255,255,0.92); --theme-text: #3d1a10; --theme-text-secondary: #8b5a4a; --theme-text-muted: #8b6a5a; --gray: #6e5548; --text-secondary: #8b6a5a; --primary-color: #eb5757; --text-color: #3d1a10; --card-bg: #ffffff; --bg-primary: #ffffff; --theme-border: #f0d5cb; --theme-navbar-bg: rgba(255,255,255,0.95); --theme-navbar-text: #3d1a10; --theme-input-bg: #ffffff; --theme-input-text: #3d1a10; --theme-input-border: #e8c8b8; --theme-btn-primary: #eb5757; --theme-btn-primary-text: #ffffff; --theme-btn-outline: #e8c8b8; --theme-btn-outline-text: #8b3a2a; --theme-shadow: 0 4px 15px rgba(0,0,0,0.10); --theme-picker-bg: #ffffff; --theme-picker-text: #3d1a10; --theme-flash-success: #d4edda; --theme-flash-error: #f8d7da; --theme-stat-value: #3d1a10; } /* ---------- 樱花粉 ---------- */ [data-theme="sakura"] { --theme-bg: linear-gradient(135deg, #ec6ead 0%, #3494e6 100%); --theme-bg-solid: #ec6ead; --theme-body-text: rgba(26, 10, 22, 0.95); --theme-body-text-shadow: 0 1px 4px rgba(255, 255, 255, 0.22); --theme-accent: #ec6ead; --theme-accent-2: #3494e6; --theme-surface: #ffffff; --theme-surface-hover: #fdf5f9; --theme-surface-alt: rgba(255,255,255,0.92); --theme-text: #3d1a2e; --theme-text-secondary: #7a5a6e; --theme-text-muted: #8b6a7e; --gray: #705565; --text-secondary: #8b6a7e; --primary-color: #ec6ead; --text-color: #3d1a2e; --card-bg: #ffffff; --bg-primary: #ffffff; --theme-border: #f0d8e8; --theme-navbar-bg: rgba(255,255,255,0.95); --theme-navbar-text: #3d1a2e; --theme-input-bg: #ffffff; --theme-input-text: #3d1a2e; --theme-input-border: #e8c4d8; --theme-btn-primary: #ec6ead; --theme-btn-primary-text: #ffffff; --theme-btn-outline: #e8c4d8; --theme-btn-outline-text: #8b3a6e; --theme-shadow: 0 4px 15px rgba(0,0,0,0.10); --theme-picker-bg: #ffffff; --theme-picker-text: #3d1a2e; --theme-flash-success: #d4edda; --theme-flash-error: #f8d7da; --theme-stat-value: #3d1a2e; } /* ---------- 翡翠绿（深色系） ---------- */ [data-theme="forest"] { --theme-bg: linear-gradient(135deg, #134e5e 0%, #71b280 100%); --theme-bg-solid: #134e5e; --theme-body-text: rgba(232, 245, 233, 0.94); --theme-body-text-shadow: 0 1px 4px rgba(0, 0, 0, 0.40); --theme-accent: #4ade80; --theme-accent-2: #71b280; --theme-surface: rgba(18, 55, 65, 0.85); --theme-surface-hover: rgba(28, 75, 88, 0.88); --theme-surface-alt: rgba(15, 45, 55, 0.92); --theme-text: #e8f5e9; --theme-text-secondary: #a5d6a7; --theme-text-muted: #6a9e7a; --gray: #8baa90; --text-secondary: #8baa90; --primary-color: #4ade80; --text-color: #e8f5e9; --card-bg: rgba(18, 55, 65, 0.85); --bg-primary: #0e2d34; --theme-border: rgba(113, 178, 128, 0.25); --theme-navbar-bg: rgba(15, 45, 55, 0.94); --theme-navbar-text: #e8f5e9; --theme-input-bg: rgba(255,255,255,0.12); --theme-input-text: #e8f5e9; --theme-input-border: rgba(113, 178, 128, 0.35); --theme-btn-primary: #4ade80; --theme-btn-primary-text: #0a2a12; --theme-btn-outline: rgba(74, 222, 128, 0.3); --theme-btn-outline-text: #a5d6a7; --theme-shadow: 0 4px 20px rgba(0,0,0,0.35); --theme-picker-bg: #1e3a40; --theme-picker-text: #e8f5e9; --theme-flash-success: rgba(46, 204, 113, 0.2); --theme-flash-error: rgba(231, 76, 60, 0.2); --theme-stat-value: #4ade80; } /* ---------- 暗夜黑（深色系） ---------- */ [data-theme="dark"] { --theme-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); --theme-bg-solid: #1a1a2e; --theme-body-text: rgba(224, 230, 240, 0.90); --theme-body-text-shadow: 0 1px 4px rgba(0, 0, 0, 0.50); --theme-accent: #4a90d9; --theme-accent-2: #6ba3e0; --theme-surface: rgba(30, 32, 48, 0.88); --theme-surface-hover: rgba(40, 42, 62, 0.90); --theme-surface-alt: rgba(22, 24, 38, 0.94); --theme-text: #e0e6f0; --theme-text-secondary: #9ca3b8; --theme-text-muted: #5a6070; --gray: #6e7a90; --text-secondary: #9ca3b8; --primary-color: #4a90d9; --text-color: #e0e6f0; --card-bg: rgba(30, 32, 48, 0.88); --bg-primary: #16182a; --theme-border: rgba(255,255,255,0.08); --theme-navbar-bg: rgba(20, 22, 36, 0.94); --theme-navbar-text: #e0e6f0; --theme-input-bg: rgba(255,255,255,0.08); --theme-input-text: #e0e6f0; --theme-input-border: rgba(255,255,255,0.12); --theme-btn-primary: #4a90d9; --theme-btn-primary-text: #ffffff; --theme-btn-outline: rgba(74, 144, 217, 0.25); --theme-btn-outline-text: #9fb8d8; --theme-shadow: 0 4px 20px rgba(0,0,0,0.50); --theme-picker-bg: #242438; --theme-picker-text: #e0e6f0; --theme-flash-success: rgba(46, 204, 113, 0.15); --theme-flash-error: rgba(231, 76, 60, 0.15); --theme-stat-value: #4a90d9; } /* ========== 全局 UI 应用 ========== */ /* 背景 + 身体文字（渐变背景上的文字色，独立于卡片内文字） */ body { background: var(--theme-bg) !important; background-attachment: fixed !important; color: var(--theme-body-text, var(--theme-text)); } /* 首页 Hero 区域：文字着色 + 阴影增强可读性 */ .hero-title, .hero-subtitle, .hero-badge, .hero-badge span, .hero-stats .stat-number, .hero-stats .stat-label { text-shadow: var(--theme-body-text-shadow, none); } .hero-title { color: var(--theme-body-text, #fff) !important; } .hero-subtitle { color: var(--theme-body-text, var(--gray)) !important; } .hero-stats .stat-number { color: var(--theme-body-text, var(--theme-text)) !important; } .hero-stats .stat-label { color: var(--theme-body-text, var(--gray)) !important; opacity: 0.80; } /* 导航栏 */ .navbar { background: var(--theme-navbar-bg) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .nav-links a, .nav-link { color: var(--theme-navbar-text) !important; font-weight: 500; } .nav-links a:hover, .nav-link:hover { opacity: 0.8; } .nav-logo, .nav-logo span { color: var(--theme-accent) !important; } .nav-auth .user-name { color: var(--theme-navbar-text); } /* 卡片 —— 覆盖所有白色/浅色卡片 */ .card, .stat-card, .stat-card-modern, .student-card, .auth-card, .auth-container .auth-card, .note-card, .paper-card, .question-card, .form-container, .review-container, .exam-container .paper-panel, .appointment-card, .booking-card, .notification-card, .topic-card, .dashboard-card, .progress-card, .student-detail-card, .papers-container .paper-item, .filter-card, .settings-card, .feature-card { background: var(--theme-surface) !important; color: var(--theme-text); border: 1px solid var(--theme-border); box-shadow: var(--theme-shadow); } /* 卡片 hover */ .student-card:hover, .question-card:hover, .card:hover, .note-card:hover, .paper-card:hover, .feature-card:hover { background: var(--theme-surface-hover) !important; } /* 页面标题和段落（卡片内） */ h1, h2, h3, h4, h5, h6 { color: var(--theme-text); } .page-title, .auth-header h1, .auth-header p { color: var(--theme-text); } p, td, th, li { color: var(--theme-text); } .text-muted, .stat-label, .stat-label-modern, label { color: var(--theme-text-secondary); } .stat-value, .stat-value-modern { color: var(--theme-stat-value); } .auth-header p { color: var(--theme-text-secondary); } .feature-card p { color: var(--gray); } /* 表单 */ input, textarea, select { background: var(--theme-input-bg) !important; color: var(--theme-input-text) !important; border-color: var(--theme-input-border) !important; } input::placeholder, textarea::placeholder { color: var(--theme-text-muted); } input:focus, textarea:focus, select:focus { border-color: var(--theme-accent) !important; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15); } /* 按钮 */ .btn-primary, .btn.btn-primary, button.btn-primary { background: var(--theme-btn-primary) !important; color: var(--theme-btn-primary-text) !important; border-color: var(--theme-btn-primary) !important; } .btn-primary:hover { filter: brightness(1.12); } .btn-outline, .btn.btn-outline, button.btn-outline, .btn-small.btn-outline { background: transparent !important; color: var(--theme-btn-outline-text) !important; border: 1px solid var(--theme-btn-outline) !important; } .btn-outline:hover, .btn-small.btn-outline:hover { background: var(--theme-surface-hover) !important; } .btn-success, .btn.btn-success { background: #38a169 !important; color: #ffffff !important; } .btn-secondary, button.btn-secondary { background: var(--theme-text-muted) !important; color: var(--theme-btn-primary-text) !important; } .btn-icon { color: var(--theme-text-secondary); } .btn-icon:hover { color: var(--theme-text); } .btn-refresh { color: var(--theme-text-secondary); } .btn-refresh:hover { color: var(--theme-accent); } /* 搜索和筛选 */ .search-box, .search-filter, .filter-controls { background: var(--theme-surface); border: 1px solid var(--theme-border); } .search-box i { color: var(--theme-text-muted); } /* 进度条 */ .progress-bar, .progress-fill { background: var(--theme-accent); } /* 通知/Flash消息 */ .flash-messages.flash-success, .alert-success, .flash-message.flash-success, .flash-success { background: var(--theme-flash-success) !important; color: var(--theme-text); } .flash-messages.flash-error, .alert-error, .flash-message.flash-error, .flash-error { background: var(--theme-flash-error) !important; color: var(--theme-text); } /* 模态框 */ .modal, .modal-content, .modal-container { background: var(--theme-surface) !important; color: var(--theme-text); } .modal-header h3, .modal-title { color: var(--theme-text); } /* 表格 */ table, thead, tbody { color: var(--theme-text); } thead { background: var(--theme-surface-hover); } th { color: var(--theme-text-secondary); border-bottom: 1px solid var(--theme-border); } td { border-bottom: 1px solid var(--theme-border); } /* 文件上传 */ .upload-area, .upload-zone { background: var(--theme-surface-hover); border: 2px dashed var(--theme-border); } /* 下拉和标签 */ .student-badge, .badge { background: var(--theme-surface-hover); color: var(--theme-text-secondary); } /* 链接 */ a:not(.btn):not(.nav-link):not(.nav-links a):not(.btn-pdf-link) { color: var(--theme-accent); } /* ========== 终极兜底：直接覆盖所有常见的浅色/深色硬编码文字 ========== */ /* 这些规则在 CSS 文件最末尾，配合 !important 确保不会被任何页内样式覆盖 */ /* 渐变背景上的文字 → 用 body-text（已按主题优化对比度） */ .meta-item, .meta-item span, .meta-item i, .meta-item-modern, .meta-item-modern span, .meta-item-modern i, .welcome-content-improved h1, .welcome-content-improved p, .welcome-content-improved .welcome-subtitle, .herosubtitle, .welcome-subtitle, .welcome-meta, .daily-goal h3, .daily-goal p, .daily-goal-section p, .daily-goal-section h3 { color: var(--theme-body-text, var(--theme-text)) !important; } /* 卡片内部的次要文字 */ .progress-label, .stat-details, .stat-label-modern, .stat-card .stat-label, .feature-desc, .topic-meta, .paper-meta, .student-meta, .note-meta span, .notification-message, .exam-mode-toggle span, .paper-info span, .dashboard-card p { color: var(--theme-text) !important; } /* 表单 placeholder 灰字 */ input::placeholder, textarea::placeholder, .form-input::placeholder { color: var(--theme-text-muted, #64748b) !important; opacity: 1 !important; } /* 统计数字（Stat 卡片内的大数字） */ .stat-card .stat-number, .stat-card .stat-value, .stat-value, .stat-card-modern .stat-value-modern { color: var(--theme-accent) !important; } /* 白色文字下沉到暗色背景上的元素（按钮、标签等）→ 保持白色不变 */ .btn-primary, .btn-primary span, .btn-primary i, .btn-success, .btn-success span, .btn-submit, .tab-btn.active, .tool-btn.active, .mode-btn.active, .paper-tab.active { /* 不覆盖 —— 这些是有深色背景的按钮/标签，白字是设计的 */ } /* 特意白字的地方（深色背景徽章、暗色面板内文字） */ .student-badge, .badge, .daily-goal-section { /* 这些元素本身有暗色背景，白字合理 */ } /* ========== 主题选择器 UI ========== */ .theme-picker-btn { position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px; border-radius: 50%; background: var(--theme-surface); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9999; font-size: 1.3rem; transition: transform 0.2s, box-shadow 0.2s; border: 1px solid var(--theme-border); user-select: none; } .theme-picker-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } .theme-picker-panel { position: fixed; right: 20px; bottom: 80px; background: var(--theme-picker-bg); border-radius: 16px; padding: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.30); z-index: 9999; width: 240px; display: none; border: 1px solid var(--theme-border); } .theme-picker-panel.open { display: block; animation: themePanelIn 0.2s ease-out; } @keyframes themePanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .theme-picker-panel h4 { margin: 0 0 12px 0; font-size: 0.95rem; color: var(--theme-picker-text); font-family: 'Inter', -apple-system, sans-serif; } .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .theme-option { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; padding: 8px 4px; border-radius: 10px; border: 2px solid transparent; transition: all 0.15s; background: none; } .theme-option:hover { background: var(--theme-surface-hover); } .theme-option.active { border-color: var(--theme-accent); background: var(--theme-surface-hover); } .theme-swatch { width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.15); } .theme-name { font-size: 0.75rem; color: var(--theme-picker-text); font-family: 'Inter', -apple-system, sans-serif; } /* ========== 移动端响应式 ========== */ @media (max-width: 768px) { .nav-container { flex-wrap: wrap; gap: 8px; } .nav-links { flex-wrap: wrap; gap: 4px; } .nav-links a, .nav-link { font-size: 0.75rem; padding: 4px 8px; } .exam-container { flex-direction: column !important; } .paper-panel, .code-panel { width: 100% !important; min-width: unset !important; } .topic-content-grid { grid-template-columns: 1fr !important; } .exercises-list .exercise-item { padding: 12px; } .hero-stats { flex-direction: column; gap: 1rem; } .dashboard-grid { grid-template-columns: 1fr !important; } .auth-card, .auth-container { width: 90% !important; max-width: 400px; margin: 0 auto; } .admin-layout { padding: 12px; } .pdf-viewer iframe { height: 400px !important; } .stat-card { padding: 12px; } .stat-card h3 { font-size: 1.2rem; } h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } .btn { padding: 6px 14px; font-size: 0.85rem; } .toolbar { flex-direction: column; } .toolbar select { width: 100%; } .theme-picker-btn { right: 10px; bottom: 10px; width: 40px; height: 40px; } .theme-picker-panel { right: 10px; bottom: 60px; width: 200px; } }