/* ============================================================ common.css - 共通样式（所有页面共享） ============================================================ */ /* 在 common.css 中，修改默认主题为明亮模式 */ /* ---------- CSS 变量（主题色） ---------- */ /* 默认使用明亮主题（移除了原有的暗黑默认） */ :root { /* 明亮主题默认值 */ --bg-primary: #f5f5f5; --bg-card: #ffffff; --bg-input: #e8e8e8; --bg-hover: #e0e0e0; --border-color: #cccccc; --border-accent: #388E3C; --text-primary: #222222; --text-secondary: #555555; --text-muted: #888888; --text-hint: #999999; --color-accent: #2E7D32; --color-danger: #C62828; --color-warning: #E65100; --color-info: #0D47A1; --color-purple: #6A1B9A; --shadow: 0 4px 12px rgba(0, 0, 0, 0.15); --bg-selected: #e3f2fd; --bg-correct: #e8f5e9; --bg-wrong: #ffebee; --bg-show-correct: #e8f5e9; --bg-pending: #fff3e0; --game-bg: #e8e8e8; --game-banner-bg: #e0e0e0; --game-bullet: #222222; --game-option-bg: #E3F2FD; --game-option-border: #64B5F6; --game-option-text: #222222; --game-text-correct: #2E7D32; --game-text-wrong: #C62828; --game-text-miss: #E65100; --game-text-title: #2E7D32; --game-text-title-wrong: #C62828; --game-text-title-miss: #E65100; --game-text-finish: #2E7D32; --game-tank-track: #444444; --game-tank-body: #43A047; --game-tank-body-border: #2E7D32; --game-tank-turret: #66BB6A; --game-tank-turret-border: #2E7D32; --game-tank-gun: #757575; --continuous-on-border: #2E7D32; --continuous-on-color: #2E7D32; --continuous-off-border: #F57C00; --continuous-off-color: #F57C00; --progress-bg: #d0d0d0; --progress-bar: #2E7D32; --progress-text: #2E7D32; --floating-btn-bg: rgba(255, 255, 255, 0.9); --floating-btn-color: #555; --floating-btn-border: rgba(0, 0, 0, 0.15); --floating-btn-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); --popup-bg: #ffffff; --popup-text: #222222; --popup-border: var(--color-accent); --popup-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); --popup-divider: #e0e0e0; --bar-value-bg: rgba(255, 255, 255, 0.85); --bar-value-text: #222222; --bar-value-border: rgba(0, 0, 0, 0.08); --calendar-nav-border: #cccccc; --calendar-nav-color: #555555; --calendar-month-color: #222222; --calendar-day-header: #888888; --calendar-day-num: #333333; --calendar-day-count: #2E7D32; --calendar-cell-hover: #e8f5e9; --calendar-today-border: var(--color-accent); --calendar-has-data-border: var(--color-accent); --stats-num-color: #2E7D32; --filter-btn-color: #555555; --filter-btn-border: #cccccc; --filter-btn-active-bg: var(--color-accent); --filter-btn-active-color: #ffffff; --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; --radius: 12px; --radius-sm: 8px; --shadow: 0 4px 12px rgba(0, 0, 0, 0.15); --color-jp-red: #C62828; /* 日式朱红 */ --color-jp-gold: #F9A825; /* 金色点缀 */ } /* 暗黑主题（在 时生效） */ .theme-dark { --bg-primary: #0f0f1a; --bg-card: #1a1a2e; --bg-input: #0a0a14; --bg-hover: #252545; --border-color: #333; --border-accent: #4CAF50; --text-primary: #fff; --text-secondary: #aaa; --text-muted: #666; --text-hint: #888; --color-accent: #4CAF50; --color-danger: #F44336; --color-warning: #ff9800; --color-info: #2196F3; --color-purple: #9C27B0; --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); --bg-selected: #1a2a4a; --bg-correct: #1a3a1a; --bg-wrong: #3a1a1a; --bg-show-correct: #1a3a1a; --bg-pending: #3a2a1a; --game-bg: #0a0a19; --game-banner-bg: #000000; --game-bullet: #ffffff; --game-option-bg: #1A237E; --game-option-border: #5C6BC0; --game-option-text: #FFFFFF; --game-text-correct: #4CAF50; --game-text-wrong: #F44336; --game-text-miss: #ff9800; --game-text-title: #4CAF50; --game-text-title-wrong: #F44336; --game-text-title-miss: #ff9800; --game-text-finish: #4CAF50; --game-tank-track: #222222; --game-tank-body: #388e3c; --game-tank-body-border: #1b5e20; --game-tank-turret: #4caf50; --game-tank-turret-border: #1b5e20; --game-tank-gun: #9e9e9e; --continuous-on-border: #4CAF50; --continuous-on-color: #4CAF50; --continuous-off-border: #f9f091; --continuous-off-color: #f9f091; --progress-bg: #333; --progress-bar: #4CAF50; --progress-text: #4CAF50; --floating-btn-bg: rgba(26, 26, 46, 0.85); --floating-btn-color: var(--text-secondary); --floating-btn-border: rgba(170, 170, 170, 0.3); --popup-bg: #1a1a2e; --popup-text: #fff; --popup-border: var(--color-accent); --popup-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --popup-divider: #333; --bar-value-bg: rgba(0, 0, 0, 0.7); --bar-value-text: #ffffff; --bar-value-border: rgba(255, 255, 255, 0.1); --calendar-nav-border: #555; --calendar-nav-color: #aaa; --calendar-month-color: #fff; --calendar-day-header: #888; --calendar-day-num: #ccc; --calendar-day-count: #4CAF50; --calendar-cell-hover: #1a2a4a; --calendar-today-border: #4CAF50; --calendar-has-data-border: #4CAF50; --stats-num-color: #4CAF50; --filter-btn-color: #aaa; --filter-btn-border: #555; --filter-btn-active-bg: #4CAF50; --filter-btn-active-color: #000; --color-jp-red: #EF5350; --color-jp-gold: #FFD54F; } /* ---------- 明亮主题下的统计页面样式 ---------- */ .theme-light .calendar-grid .day-cell .day-detail-popup { background: var(--popup-bg); border-color: var(--popup-border); color: var(--popup-text); box-shadow: var(--popup-shadow); } .theme-light .calendar-grid .day-cell .day-detail-popup .lib-name { color: var(--popup-text); } .theme-light .calendar-grid .day-cell .day-detail-popup .lib-stats { color: var(--text-secondary); } .theme-light .calendar-grid .day-cell .day-detail-popup .lib-item { border-bottom-color: var(--popup-divider); } .theme-light .bar-value { color: var(--bar-value-text); text-shadow: 0 0 6px rgba(255, 255, 255, 0.9); background: var(--bar-value-bg); border: 1px solid var(--bar-value-border); padding: 0 6px; border-radius: 4px; } .theme-light .calendar-nav { border-color: var(--calendar-nav-border); color: var(--calendar-nav-color); } .theme-light .calendar-nav:active { background: var(--bg-hover); } .theme-light .calendar-header .month { color: var(--calendar-month-color); } .theme-light .calendar-grid .day-header { color: var(--calendar-day-header); } .theme-light .calendar-grid .day-cell .day-num { color: var(--calendar-day-num); } .theme-light .calendar-grid .day-cell .day-count { color: var(--calendar-day-count); } .theme-light .calendar-grid .day-cell:hover { background: var(--calendar-cell-hover); } .theme-light .calendar-grid .day-cell.today { border-color: var(--calendar-today-border); } .theme-light .calendar-grid .day-cell.has-data { border-bottom-color: var(--calendar-has-data-border); } .theme-light .stats-summary .item .num { color: var(--stats-num-color); } .theme-light .filter-bar .btn-group { border-color: var(--filter-btn-border); } .theme-light .filter-bar .btn-group .dim-btn { color: var(--filter-btn-color); border-right-color: var(--filter-btn-border); } .theme-light .filter-bar .btn-group .dim-btn.active { background: var(--filter-btn-active-bg); color: var(--filter-btn-active-color); } /* ============================================================ 明亮主题下的词库管理样式 ============================================================ */ .theme-light .lib-type-badge.word { background: #e8f5e9; color: #2E7D32; } .theme-light .lib-type-badge.grammar { background: #e3f2fd; color: #0D47A1; } .theme-light .lib-type-badge.quiz { background: #f3e5f5; color: #6A1B9A; } .theme-light #grammar-name, .theme-light #quiz-name, .theme-light #current-name { color: var(--text-primary); } .theme-light .card h3 { color: var(--text-primary); } /* ============================================================ 明亮主题下的单词/语法一览样式 ============================================================ */ .theme-light .grammar-group-header { color: #0D47A1; border-left-color: #0D47A1; } .theme-light .lib-group-header { color: #2E7D32; } .theme-light .grammar-title .group { background: #e3f2fd; color: #0D47A1; } .theme-light .grammar-table-wrap .group-title { color: #0D47A1; background: #e3f2fd; border-bottom-color: #0D47A1; } .theme-light .grammar-table-wrap .group-title::before { color: #0D47A1; } .theme-light .grammar-table th { color: #0D47A1; border-bottom-color: #0D47A1; } .theme-light .grammar-mobile-list .group-title { color: #0D47A1; border-left-color: #0D47A1; } .theme-light .grammar-card .group { background: #e3f2fd; color: #0D47A1; } .theme-light .word-table th { color: #2E7D32; border-bottom-color: #2E7D32; } .theme-light .word-type { background: #e8f5e9; color: #2E7D32; } .theme-light .today-header .title { color: #0D47A1; } .theme-light .today-progress .pbar-fill { background: #0D47A1; } .theme-light .sort-icon { color: #2E7D32; } /* ============================================================ 明亮主题下的弹窗样式 ============================================================ */ .theme-light .modal-content .group { background: #e3f2fd; color: #0D47A1; } .theme-light .modal-content .btn-delete { background: rgba(198, 40, 40, 0.15); color: #C62828; } /* ---------- 主题切换按钮 ---------- */ .btn-theme-dark { background: #1a1a2e; color: #4CAF50; border-color: #4CAF50; } .btn-theme-dark:active { background: #4CAF50; color: #000; } .btn-theme-light { background: #e8e8e8; color: #2E7D32; border-color: #2E7D32; } .btn-theme-light:active { background: #2E7D32; color: #fff; } /* ---------- 全局重置 ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-family); padding: 15px; padding-bottom: 40px; min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- 滚动条 ---------- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-accent); } /* ---------- 标题 ---------- */ h2, h3, h4 { margin-top: 0; color: var(--color-accent); } h2 { font-size: 24px; } h3 { font-size: 20px; } h4 { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; } /* ---------- 卡片 ---------- */ .card { background: var(--bg-card); border: 1px solid var(--border-color); padding: 15px; border-radius: var(--radius); margin-bottom: 16px; } /* ---------- 表单元素 ---------- */ select, input[type="text"], input[type="number"], input[type="date"], input[type="range"], textarea { width: 100%; padding: 12px; background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 16px; outline: none; transition: border-color 0.2s; box-sizing: border-box; font-family: inherit; -webkit-appearance: none; } select:focus, input:focus, textarea:focus { border-color: var(--color-accent); } textarea { resize: vertical; font-family: monospace; } input[type="range"] { padding: 0; height: 6px; background: var(--border-color); border: none; border-radius: 3px; -webkit-appearance: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent); cursor: pointer; } input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); padding: 4px; } /* ---------- 按钮 ---------- */ .btn { background: var(--bg-card); color: var(--color-accent); border: 1px solid var(--color-accent); padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; font-weight: bold; font-size: 14px; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 4px; -webkit-tap-highlight-color: transparent; user-select: none; text-decoration: none; height: 36px; white-space: nowrap; } .btn:hover, .btn:active { background: var(--color-accent); color: #000; } /* 按钮变体 */ .btn-primary { background: var(--color-accent); color: #000; border: none; } .btn-primary:active { background: #388E3C; } .btn-danger { color: var(--color-danger); border-color: var(--color-danger); } .btn-danger:active { background: var(--color-danger); color: #000; } .btn-sm { padding: 6px 12px; font-size: 12px; height: 30px; } .btn-success { background: var(--color-info); color: #fff; border-color: var(--color-info); } .btn-success:active { background: #1976D2; } .btn-warning { background: var(--color-warning); color: #000; border-color: var(--color-warning); } .btn-warning:active { background: #f57c00; } .btn-append { color: var(--color-warning); border-color: var(--color-warning); } .btn-append:active { background: var(--color-warning); color: #000; } .btn-quiz { background: var(--color-purple); color: #fff; border-color: var(--color-purple); } .btn-quiz:active { background: #7B1FA2; } /* 返回按钮包装 */ .btn-back-wrapper { margin-top: 20px; width: 100%; } .btn-back-wrapper .btn { width: 100%; text-align: center; padding: 14px; font-size: 16px; background: var(--bg-card); color: var(--text-hint); border: 1px solid var(--border-color); height: auto; } .btn-back-wrapper .btn:active { background: var(--bg-hover); color: var(--text-secondary); } /* ---------- 布局工具 ---------- */ .flex { display: flex; gap: 10px; flex-wrap: wrap; } .flex .btn { flex: 1; text-align: center; } .flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .row { display: flex; gap: 10px; align-items: center; } .row select { flex: 1; margin-bottom: 0; } .row .btn { flex-shrink: 0; } /* ---------- 提示文字 ---------- */ .hint { font-size: 12px; color: var(--text-hint); margin-bottom: 10px; } /* ---------- 模态框 ---------- */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); z-index: 1000; justify-content: center; align-items: center; padding: 20px; } .modal-overlay.show { display: flex; } .modal-box { background: var(--bg-card); border: 1px solid var(--color-accent); border-radius: 16px; padding: 24px; max-width: 420px; width: 100%; max-height: 90vh; overflow-y: auto; } .modal-box h3 { margin-top: 0; color: var(--color-accent); } .modal-box label { display: block; color: var(--text-secondary); font-size: 14px; margin: 12px 0 4px; } .modal-box .radio-group { display: flex; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; } .modal-box .radio-group label { display: flex; align-items: center; gap: 8px; color: var(--text-primary); cursor: pointer; font-size: 15px; } .modal-box .radio-group input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-accent); } .modal-box .btn-row { display: flex; gap: 10px; margin-top: 16px; } .modal-box .btn-row .btn { flex: 1; text-align: center; } /* ---------- 空状态 ---------- */ .empty { text-align: center; color: var(--text-muted); padding: 80px 20px; } /* ---------- 标签徽章 ---------- */ .lib-type-badge { display: inline-block; font-size: 11px; font-weight: bold; padding: 2px 10px; border-radius: 12px; margin-left: 8px; } .lib-type-badge.word { background: #1a3a1a; color: var(--color-accent); } .lib-type-badge.grammar { background: #1a2a4a; color: var(--color-info); } .lib-type-badge.quiz { background: #2a1a3a; color: #CE93D8; } /* ---------- 浮动返回顶部按钮 ---------- */ .floating-top-btn { position: fixed; bottom: 90px; right: 18px; width: 52px; height: 52px; border-radius: 50%; background: var(--floating-btn-bg, rgba(26, 26, 46, 0.85)); color: var(--floating-btn-color, var(--text-secondary)); border: 1px solid var(--floating-btn-border, rgba(170, 170, 170, 0.3)); font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; z-index: 999; opacity: 0; visibility: hidden; transform: scale(0.85); box-shadow: var(--shadow); -webkit-tap-highlight-color: transparent; } .floating-top-btn.show { opacity: 1; visibility: visible; transform: scale(1); } .floating-top-btn:active { transform: scale(0.92); background: var(--floating-btn-bg, rgba(26, 26, 46, 0.95)); } /* ---------- 浮动返回底部按钮 ---------- */ .btn-back-floating { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 800px; padding: 14px; background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: var(--radius); font-size: 15px; font-weight: bold; cursor: pointer; text-align: center; transition: 0.2s; z-index: 100; box-shadow: var(--shadow); height: auto; } .btn-back-floating:active { background: var(--bg-hover); color: var(--text-primary); transform: translateX(-50%) scale(0.98); } /* ===== 统一：内容区域底部间距 ===== */ .content-with-back-btn { padding-bottom: 80px; } /* ---------- 响应式基础 ---------- */ @media (max-width: 600px) { .flex-between { flex-direction: column; align-items: stretch; } .flex-between>div { display: flex; flex-wrap: wrap; gap: 6px; } .flex-between>div .btn { flex: 1; min-width: 60px; text-align: center; } .flex { flex-direction: column; } .flex .btn { width: 100%; text-align: center; } .row { flex-wrap: wrap; } .row .btn { flex: 1; } .floating-top-btn { width: 48px; height: 48px; font-size: 22px; bottom: 80px; right: 16px; } } @media (max-width: 480px) { body { padding: 10px; } .modal-box { padding: 18px; } .modal-box .radio-group { flex-direction: column; gap: 6px; } .btn { font-size: 13px; padding: 6px 12px; height: 32px; } .btn-back-wrapper .btn { font-size: 14px; padding: 12px; } .card { padding: 12px; } h2 { font-size: 20px; } h3 { font-size: 18px; } .content-with-back-btn { padding-bottom: 70px; } .floating-top-btn { width: 48px; height: 48px; font-size: 22px; bottom: 80px; right: 16px; } .btn-back-floating { padding: 12px; font-size: 14px; width: calc(100% - 20px); bottom: 8px; } } /* ============================================================ 明亮主题下的学习计划页面样式 ============================================================ */ .theme-light .checkbox-group label { background: #e8e8e8; color: var(--text-primary); border: 1px solid #d0d0d0; } .theme-light .checkbox-group label:has(input:checked) { background: #e3f2fd; border-color: var(--color-accent); } .theme-light .checkbox-group input { accent-color: var(--color-accent); } /* ============================================================ 明亮主题下的错题库页面样式 ============================================================ */ .theme-light .item { background: #f0f0f0; border-left-color: #C62828; } .theme-light .item .word-kanji { color: var(--text-primary); } .theme-light .item .word-kana { color: #E65100; } .theme-light .item .word-meaning { color: var(--text-secondary); } .theme-light .item .grammar-title { color: #0D47A1; } .theme-light .item .grammar-sentence { color: var(--text-primary); } .theme-light .item .grammar-core { color: #E65100; background: #fff3e0; } .theme-light .item .quiz-question { color: #6A1B9A; } .theme-light .item .quiz-options { color: var(--text-secondary); } .theme-light .wrong-count { background: #C62828; color: #fff; } /* 错题库空状态 */ .theme-light .empty { color: var(--text-muted); } /* 错题库过滤栏 */ .theme-light #filter-bar select { background: #ffffff; color: var(--text-primary); border-color: #cccccc; } /* 错题库返回按钮 */ .theme-light .btn-back { background: #ffffff; color: var(--text-secondary); border-color: #cccccc; } .theme-light .btn-back:active { background: #e0e0e0; } /* 错题库清空按钮 */ .theme-light .btn-clear { background: rgba(198, 40, 40, 0.1); color: #C62828; border-color: #C62828; } .theme-light .btn-clear:active { background: #C62828; color: #ffffff; } /* ---------- 明亮主题下的设置页面样式 ---------- */ .theme-light .mode-fixed { color: #222222; background: #f0f0f0; border-color: #bbbbbb; } .theme-light .badge-word { background: #e8f5e9; color: #2E7D32; } .theme-light .badge-grammar { background: #e3f2fd; color: #0D47A1; } .theme-light .badge-quiz { background: #f3e5f5; color: #6A1B9A; }