/* ========================================================================== Design tokens Dark mode is driven by [data-theme] on , set by an inline script in header.php before the stylesheet is applied. ========================================================================== */ :root { color-scheme: light; --bg: #ffffff; --bg-alt: #fafafa; --surface: #ffffff; --fg: #1a1a1a; --fg-dim: #444444; --fg-muted: #666666; --fg-faint: #888888; --fg-ghost: #cccccc; --border: #eeeeee; --border-soft: #f2f2f2; --input-border: #dddddd; --accent-bg: #000000; --accent-fg: #ffffff; --accent-hover: #333333; --danger: #ff4d4d; --wrong-bg: #ffebeb; --wrong-border: #ffcaca; --shadow: rgba(0, 0, 0, 0.05); --shadow-lg: rgba(0, 0, 0, 0.08); } [data-theme="dark"] { color-scheme: dark; --bg: #0f1115; --bg-alt: #171a20; --surface: #1c2027; --fg: #e8eaed; --fg-dim: #b3b8c2; --fg-muted: #9aa1ad; --fg-faint: #7d848f; --fg-ghost: #4a505c; --border: #2a2f38; --border-soft: #22262e; --input-border: #363c47; --accent-bg: #e8eaed; --accent-fg: #0f1115; --accent-hover: #ffffff; --danger: #ff6b6b; --wrong-bg: #3a1d21; --wrong-border: #6b2f36; --shadow: rgba(0, 0, 0, 0.5); --shadow-lg: rgba(0, 0, 0, 0.55); } /* Reset & Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: var(--bg); color: var(--fg); line-height: 1.6; transition: background-color .25s ease, color .25s ease; } .container { width: 90%; max-width: 1100px; margin: 0 auto; } a { text-decoration: none; color: inherit; transition: 0.3s; } /* Navigation */ .main-header { background: var(--bg); border-bottom: 1px solid var(--border); padding: 1rem 0; position: sticky; top: 0; z-index: 1000; transition: background-color .25s ease, border-color .25s ease; } .navbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .nav-right { display: flex; align-items: center; gap: 2rem; } .logo a { font-size: 1.4rem; font-weight: 800; letter-spacing: -1px; } .logo span { font-weight: 300; color: var(--fg-faint); } .nav-menu { display: flex; list-style: none; gap: 2rem; flex-wrap: wrap; } .nav-menu a { font-size: 0.9rem; font-weight: 600; color: var(--fg-muted); } .nav-menu a.active, .nav-menu a:hover { color: var(--fg); } /* Mode Switcher & Chips */ .mode-switcher-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 3rem; padding: 1rem; background: var(--bg-alt); border-radius: 16px; border: 1px solid var(--border-soft); } .mode-switcher { display: flex; gap: 0.5rem; flex-wrap: wrap; } .mode-chip { padding: 0.6rem 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 50px; font-size: 0.85rem; font-weight: 700; color: var(--fg-muted); transition: 0.3s; } .mode-chip:hover { border-color: var(--accent-bg); color: var(--fg); } .mode-chip.active { background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg); } .topic-filter-box { display: flex; align-items: center; gap: 0.8rem; font-size: 0.9rem; font-weight: 600; } .topic-filter-box select { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); font-family: inherit; font-weight: 600; cursor: pointer; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: none; border: 1px solid var(--border); border-radius: 50%; color: var(--fg-muted); cursor: pointer; transition: color .2s ease, border-color .2s ease; } .theme-toggle:hover { color: var(--fg); border-color: var(--accent-bg); } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Dashboard Hero */ #dashboard-hero { padding: 3rem 0; border-bottom: 1px solid var(--border-soft); margin-bottom: 3rem; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .stat-card { text-align: center; padding: 2rem; background: var(--bg-alt); border-radius: 12px; } .stat-value { display: block; font-size: 2.5rem; font-weight: 800; letter-spacing: -2px; } .stat-label { font-size: 0.85rem; color: var(--fg-faint); text-transform: uppercase; font-weight: 700; } /* Study Time Section (Restored & Optimized) */ .study-time-section { margin-bottom: 4rem; padding: 2.5rem; background: var(--bg-alt); border-radius: 20px; border: 1px solid var(--border-soft); } .time-grid { display: flex; gap: 1.5rem; margin-bottom: 3rem; } .time-card { flex: 1; background: var(--surface); padding: 1.5rem; border-radius: 12px; text-align: center; border: 1px solid var(--border); transition: all 0.3s ease; } .time-card:hover { border-color: var(--accent-bg); transform: translateY(-2px); } .time-value { display: block; font-size: 1.8rem; font-weight: 800; color: var(--fg); } .time-detail { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; } .bar-chart { display: flex; flex-direction: column; gap: 0.8rem; } .bar-row { display: flex; align-items: center; gap: 1rem; } .bar-label { font-size: 0.75rem; font-weight: 700; color: var(--fg-muted); width: 50px; text-transform: uppercase; } .bar-track { flex: 1; height: 12px; background: var(--surface); border-radius: 6px; overflow: hidden; border: 1px solid var(--border); } .bar { height: 100%; background: var(--accent-bg); transition: width 0.8s ease; min-width: 4px; } .mode-breakdown { display: flex; flex-direction: column; gap: 0.8rem; } .mode-row { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-size: 0.9rem; } .mode-name { font-weight: 600; color: var(--fg-muted); } .mode-time { font-weight: 800; color: var(--fg); } /* Layout Grid */ .main-grid { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; } /* Content Section */ .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap; } .section-title { font-size: 1.8rem; font-weight: 800; letter-spacing: -1px; } /* Buttons */ button, .btn { display: inline-flex; align-items: center; justify-content: center; background-color: var(--accent-bg); color: var(--accent-fg); border: none; padding: 0.8rem 1.5rem; border-radius: 6px; cursor: pointer; font-size: 0.9rem; font-weight: 600; transition: 0.3s; font-family: inherit; gap: 8px; } button:hover, .btn:hover { background-color: var(--accent-hover); transform: translateY(-2px); } /* Reset for specific button types */ button.view-all, button.speak-btn, button.delete-btn { display: inline-block; background: none; color: inherit; padding: 0; border: none; border-radius: 0; width: auto; height: auto; font-weight: normal; transform: none; } button.view-all:hover, button.speak-btn:hover, button.delete-btn:hover { background: none; transform: none; opacity: 0.7; } /* Secondary button */ .btn-ghost { background: var(--bg-alt); color: var(--fg-muted); border: 1px solid var(--border); padding: 0.6rem 1.2rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; transition: 0.3s; } .btn-ghost:hover { background: var(--border-soft); color: var(--fg); } .view-all { font-size: 0.9rem; font-weight: 600; color: var(--fg-muted); cursor: pointer; } .view-all:hover { color: var(--fg); } /* Search & Pagination */ .search-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 2rem; } .search-bar input[type="search"] { flex: 1; min-width: 220px; padding: 0.8rem 1rem; border: 1px solid var(--input-border); border-radius: 6px; background: var(--surface); color: var(--fg); font-family: inherit; } .pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem; margin-top: 3rem; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 0.7rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; font-weight: 600; color: var(--fg-muted); } .pagination .current { background: var(--accent-bg); border-color: var(--accent-bg); color: var(--accent-fg); } /* Word Items */ .word-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } .word-item { padding: 1.5rem; border: 1px solid var(--border); border-radius: 12px; position: relative; transition: 0.3s; } .word-item:hover { transform: translateY(-3px); box-shadow: 0 10px 30px var(--shadow); } .word-item.learned { background: var(--bg-alt); border-color: var(--border-soft); opacity: 0.7; } .word-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem; } .word-english { font-size: 1.2rem; font-weight: 700; } .word-meaning { font-size: 1rem; color: var(--fg-dim); margin-bottom: 1rem; } .topic-tag { font-size: 0.65rem; font-weight: 800; color: var(--fg-faint); text-transform: uppercase; margin-bottom: 0.5rem; display: block; } .word-actions { display: flex; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-soft); align-items: center; } .action-link { font-size: 0.75rem; font-weight: 700; } .action-link.delete { color: var(--danger); margin-left: auto; } /* Word Proficiency Bar */ .word-proficiency-container { height: 6px; background: var(--border-soft); border-radius: 3px; overflow: hidden; margin: 1rem 0; } .word-proficiency-fill { height: 100%; background: linear-gradient(to right, #ff4d4d, #ffc107, #4caf50); background-size: 1100px 100%; /* Giữ màu cố định theo tỉ lệ */ transition: width 0.5s ease; } .word-proficiency-text { font-size: 0.65rem; font-weight: 800; color: var(--fg-faint); float: right; margin-top: -1.2rem; } /* Sidebar */ .side-card { background: var(--bg-alt); padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem; } .side-card h3 { font-size: 1rem; font-weight: 800; margin-bottom: 1.2rem; } .quick-add-form input, .quick-add-form select, .quick-add-form button { width: 100%; padding: 0.8rem; border-radius: 6px; border: 1px solid var(--input-border); margin-bottom: 0.8rem; font-family: inherit; background: var(--surface); color: var(--fg); } .quick-add-form button { background: var(--accent-bg); color: var(--accent-fg); border: none; font-weight: 700; cursor: pointer; } .mode-item { display: block; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.8rem; } .mode-item strong { display: block; font-size: 0.95rem; } .mode-item span { font-size: 0.75rem; color: var(--fg-faint); } .mode-item:hover { border-color: var(--accent-bg); } /* Modal */ .modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface); padding: 2.5rem; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 20px 50px rgba(0,0,0,0.2); z-index: 2000; width: 90%; max-width: 500px; } .modal.is-open { display: block; } .modal-form { display: flex; flex-direction: column; gap: 1rem; } .modal-input { width: 100%; padding: 0.8rem; border-radius: 8px; border: 1px solid var(--input-border); background: var(--bg); color: var(--fg); font-family: inherit; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 1.5rem; } /* Pagination */ .pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem; } .pagination a { padding: 0.5rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-weight: 700; font-size: 0.9rem; color: var(--fg-muted); } .pagination a.current { background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg); } .pagination a:hover:not(.current) { border-color: var(--accent-bg); color: var(--fg); } /* Topics Library */ .topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; } .topic-card { display: block; padding: 2.5rem 2rem; background: var(--bg-alt); border-radius: 12px; text-align: center; border: 1px solid var(--border-soft); height: 100%; transition: 0.3s; position: relative; } .topic-card:hover { border-color: var(--accent-bg); background: var(--surface); transform: translateY(-5px); box-shadow: 0 10px 20px var(--shadow); } .topic-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--fg); } .topic-meta { font-size: 0.85rem; color: var(--fg-muted); } .delete-topic-link { position: absolute; top: 15px; right: 15px; font-size: 0.65rem; color: var(--fg-ghost); font-weight: 700; text-transform: uppercase; } .delete-topic-link:hover { color: var(--danger); } .progress-mini { height: 4px; background: var(--border); border-radius: 2px; margin-top: 10px; overflow: hidden; } .progress-fill { height: 100%; background: var(--accent-bg); transition: 0.5s; } /* Flashcards & Quiz */ .flashcard-container { perspective: 1000px; width: 100%; max-width: 500px; height: 350px; margin: 2rem auto; } .flashcard { position: relative; width: 100%; height: 100%; transition: 0.6s; transform-style: preserve-3d; border-radius: 20px; box-shadow: 0 20px 40px var(--shadow-lg); } .flashcard.flipped { transform: rotateY(180deg); } .flashcard-front, .flashcard-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); } .flashcard-back { transform: rotateY(180deg); background: var(--bg-alt); } .flashcard-word { font-size: 3rem; font-weight: 800; text-align: center; } .flashcard-meaning { font-size: 1.8rem; font-weight: 700; text-align: center; } .quiz-container { max-width: 600px; margin: 0 auto; background: var(--bg-alt); padding: 3rem; border-radius: 20px; transition: background-color .25s ease; } .quiz-question { font-size: 1.6rem; font-weight: 800; text-align: center; margin-bottom: 2rem; } .quiz-options { display: flex; flex-direction: column; gap: 0.8rem; } .option-btn { width: 100%; text-align: left; padding: 1.2rem; background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: 0.3s; font-family: inherit; } .option-btn:hover { border-color: var(--accent-bg); transform: translateX(5px); } .option-btn.correct { background: var(--accent-bg); color: var(--accent-fg); border-color: var(--accent-bg); } .option-btn.wrong { background: var(--wrong-bg); border-color: var(--wrong-border); color: var(--danger); } /* Typing Mode */ .typing-box { background: var(--surface); padding: 2.5rem; border-radius: 20px; border: 1px solid var(--border); box-shadow: 0 10px 30px var(--shadow); } .typing-meaning { font-size: 1.8rem; font-weight: 800; text-align: center; margin-bottom: 1rem; color: var(--fg); } .typing-example { font-size: 1rem; font-style: italic; color: var(--fg-muted); text-align: center; margin-bottom: 2rem; } .typing-input-row { display: flex; gap: 1rem; margin-bottom: 1.5rem; } .typing-input { flex: 1; padding: 1rem 1.5rem; font-size: 1.2rem; border-radius: 10px; border: 2px solid var(--input-border); background: var(--bg); color: var(--fg); font-family: inherit; text-align: center; transition: 0.3s; } .typing-input:focus { outline: none; border-color: var(--accent-bg); } .typing-input.correct { border-color: #4caf50; background: #e8f5e9; } .typing-input.wrong { border-color: var(--danger); background: var(--wrong-bg); } [data-theme="dark"] .typing-input.correct { background: #1b3320; } .typing-feedback { min-height: 1.5rem; text-align: center; margin-bottom: 1.5rem; font-weight: 600; } .typing-feedback.correct { color: #4caf50; } .typing-feedback.wrong { color: var(--danger); } .typing-actions { display: flex; justify-content: center; gap: 1rem; } /* Matching Mode */ .match-status { display: flex; justify-content: space-between; margin-bottom: 2rem; font-weight: 700; color: var(--fg-muted); } .match-board { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .match-col { display: flex; flex-direction: column; gap: 1rem; } .match-card { padding: 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; font-weight: 600; transition: 0.3s; text-align: center; font-family: inherit; font-size: 1rem; color: var(--fg); } .match-card:hover { border-color: var(--accent-bg); transform: translateY(-2px); box-shadow: 0 5px 15px var(--shadow); } .match-card.selected { background: var(--bg-alt); border-color: var(--accent-bg); border-width: 2px; } .match-card.matched { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.9); } .match-result { text-align: center; font-size: 1.5rem; font-weight: 800; margin-top: 3rem; padding: 2rem; background: var(--bg-alt); border-radius: 15px; } /* Shake Animation */ .shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } /* Footer */ .main-footer { border-top: 1px solid var(--border); padding: 4rem 0; margin-top: 5rem; color: var(--fg-faint); font-size: 0.9rem; } .footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .footer-logo { font-weight: 800; color: var(--fg); } /* Responsive */ @media (max-width: 900px) { .main-grid, .time-detail { grid-template-columns: 1fr; } .time-grid { flex-direction: column; } .stats-grid { grid-template-columns: 1fr; } }