:root { /* --------------------------------- Brand palette (do not theme here) --------------------------------- */ --color-primary: #226cff; /* vibrant blue */ --color-secondary: #e5a85a; /* muted amber */ --color-accent-green: #2baa62; /* friendly green */ --color-accent-brown: #8d6e63; /* warm brown */ /* --------------------------------- Neutral palette (reference only) --------------------------------- */ /* Note: Some legacy CSS references raw grays directly. Prefer semantic tokens below. */ --gray-100: #ffffff; --gray-200: #f9f9f9; --gray-300: #f3f3f3; --gray-400: #e0e0e0; --gray-500: #cccccc; --gray-900: #333333; /* --------------------------------- Semantic theme tokens (preferred) --------------------------------- */ /* Backgrounds / surfaces */ --color-bg: var(--gray-100); --color-surface-0: var(--gray-100); --color-surface-1: var(--gray-200); --color-surface-2: var(--gray-300); --color-text: var(--gray-900); /* Text */ --color-text-muted: #5b5f6a; --color-border: var(--gray-400); /* Borders / dividers */ --color-accent: var(--color-primary); /* Accent (maps to brand) */ --color-accent-contrast: #ffffff; /* Focus ring and elevation */ --ring: 0 0 0 3px color-mix(in oklab, var(--color-accent) 35%, transparent); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.08); /* --------------------------------- Legacy alias tokens (compatibility) --------------------------------- */ --primary-color: var(--color-accent); --secondary-color: var(--color-secondary); --border-color: var(--color-border); --text-color: var(--color-text); --background-color: var(--color-surface-0); /* --------------------------------- Spacing scale – 4-point grid --------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ /* --------------------------------- Radii --------------------------------- */ --radius-sm: 4px; --radius-md: 8px; /* --------------------------------- Component tokens (defaults) --------------------------------- */ --card-select-bg: var(--color-surface-2); --card-select-bg-selected: color-mix(in oklab, var(--color-accent) 18%, var(--color-bg)); } /* --------------------------------- Automatic dark-mode overrides --------------------------------- */ @media (prefers-color-scheme: dark) { :root { /* Keep neutral references available for legacy uses */ --gray-100: #0f1115; --gray-200: #12141a; --gray-300: #181b22; --gray-400: #2a2f3a; --gray-500: #3a4150; --gray-900: #e7e9ee; /* Semantic overrides */ --color-bg: #0f1115; --color-surface-0: #12141a; --color-surface-1: #181b22; --color-surface-2: #202532; --color-text: #e7e9ee; --color-text-muted: #a6adbb; --color-border: rgba(255, 255, 255, 0.12); --color-accent: #6aa5ff; /* slightly desaturated for dark */ --color-accent-contrast: #0b0d11; --ring: 0 0 0 3px color-mix(in oklab, var(--color-accent) 55%, transparent); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.45); /* Legacy aliases follow semantic tokens */ --border-color: var(--color-border); --text-color: var(--color-text); --background-color: var(--color-surface-0); /* Component-specific tweaks */ --card-select-bg: color-mix(in oklab, var(--color-surface-2) 75%, var(--color-bg) 25%); } } /* --------------------------------- Explicit theme override classes Add to to force theme: or \"theme-light\" --------------------------------- */ :root.theme-dark { --color-bg: #0f1115; --color-surface-0: #12141a; --color-surface-1: #181b22; --color-surface-2: #202532; --color-text: #e7e9ee; --color-text-muted: #a6adbb; --color-border: rgba(255, 255, 255, 0.12); --color-accent: #6aa5ff; --color-accent-contrast: #0b0d11; --ring: 0 0 0 3px color-mix(in oklab, var(--color-accent) 55%, transparent); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.45); /* Keep legacy aliases in sync */ --border-color: var(--color-border); --text-color: var(--color-text); --background-color: var(--color-surface-0); /* Component-specific tweaks */ --card-select-bg: color-mix(in oklab, var(--color-surface-2) 75%, var(--color-bg) 25%); } :root.theme-light { --color-bg: #ffffff; --color-surface-0: #ffffff; --color-surface-1: #f9f9f9; --color-surface-2: #f3f3f3; --color-text: #333333; --color-text-muted: #5b5f6a; --color-border: #e0e0e0; --color-accent: var(--color-primary); --color-accent-contrast: #ffffff; --ring: 0 0 0 3px color-mix(in oklab, var(--color-accent) 35%, transparent); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.08); /* Legacy aliases */ --border-color: var(--color-border); --text-color: var(--color-text); --background-color: var(--color-surface-0); } *, *::before, *::after { box-sizing: border-box; } /* Ensure icon fonts inherit current text color */ .fa, .fas, .far, .fal, .fab { color: inherit; } body { font-family: "Inter", "Segoe UI", Roboto, sans-serif; padding: var(--space-4); color: var(--text-color); background: var(--color-bg); /* Enable sticky footer layout */ display: flex; flex-direction: column; min-height: 100vh; } /* ---------------- Global Form Controls ---------------- */ input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="number"], input[type="url"], select, textarea { background: var(--color-surface-1); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.55rem 0.9rem; font-size: 1rem; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } input::placeholder, textarea::placeholder { color: var(--color-text-muted); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--ring); } /* ---------------- Global Button Baseline ---------------- */ button { -webkit-appearance: none; appearance: none; background: var(--color-surface-1); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } button:hover, button:focus { background: var(--color-surface-2); } /* Audio play buttons */ .audio-btn { background: var(--color-surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.25rem 0.75rem; font-size: 0.9rem; cursor: pointer; transition: background 0.2s ease; margin: 0 0.25rem; color: var(--color-text); } .audio-btn:hover, .audio-btn:focus { background: var(--color-surface-2); } /* Ensure the main content expands to fill any leftover space, pushing the footer to the very bottom when the page content is short. */ main#content { flex: 1 0 auto; } /* Footer styling – always at the bottom, tiny text and centred */ footer { font-size: 0.75rem; /* very small text */ margin-top: auto; /* push to bottom when space allows */ width: 100%; padding: 0.5rem 1rem; color: var(--text-color, #000); } .footer-content { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } footer p { margin: 0; } footer a { color: inherit; text-decoration: none; } footer a:hover { text-decoration: underline; } table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; } .word-card table { margin-bottom: 0; } .word-header, .word-footer { display: flex; justify-content: space-between; align-items: center; background-color: var(--color-surface-2); padding: 0.5em; font-size: 1.2em; } .definition { display: none; background-color: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: 6px; padding: 10px; margin-top: 8px; font-size: 0.95em; } .dict-entry { margin-bottom: 1em; padding-bottom: 0.5em; border-bottom: 1px dashed var(--color-border); } .def-badges { display: flex; flex-wrap: wrap; gap: 0.3em; justify-content: center; margin-top: 4px; margin-bottom: 0.5em; } .badge { display: inline-block; background: var(--color-surface-2); color: var(--color-text); padding: 0.2em 0.6em; border-radius: 4px; font-size: 0.85em; line-height: 1.2; } /* ---------------- Search Page Styling ---------------- */ .search-form { display: flex; gap: 0.5rem; } .search-form input[type="text"] { flex: 1 1 auto; /* inherits global form control styling */ } .search-form input[type="text"]:focus { outline: none; border-color: var(--primary-color, #0077ff); box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.2); } .search-results .gridjs-container { margin-top: 1rem; color: var(--color-text); } /* Theme-aware table styling like vocab grid */ .search-results .gridjs-table { width: 100%; background: var(--color-surface-0); border: 1px solid var(--color-border); border-collapse: collapse; } .search-results .gridjs-container .gridjs-th, .search-results .gridjs-container .gridjs-td { color: var(--color-text); border-color: var(--color-border); } .search-results .gridjs-table thead th { background: var(--color-surface-1); border-bottom: 2px solid var(--color-border); } .search-results .gridjs-table tbody td, .search-results .gridjs-container .gridjs-td { background: var(--color-surface-0); border-top: 1px solid color-mix(in oklab, var(--color-border) 80%, var(--color-text) 20%); transition: background-color 0.15s ease; } .search-results .gridjs-table tbody tr:hover td, .search-results .gridjs-table tbody tr:focus-within td { background: color-mix(in oklab, var(--color-accent) 8%, var(--color-surface-0)); } /* Search results footer/pagination themed */ .search-results .gridjs-footer { background: var(--color-surface-1); border-top: 1px solid var(--color-border); color: var(--color-text); } .search-results .gridjs-footer .gridjs-summary, .search-results .gridjs-footer .gridjs-pagination { color: var(--color-text); } .search-results .gridjs-footer .gridjs-pages button { background: var(--color-surface-1); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .search-results .gridjs-footer .gridjs-pages button:hover, .search-results .gridjs-footer .gridjs-pages button:focus { background: var(--color-surface-2); } .search-results .gridjs-footer .gridjs-pages button.gridjs-currentPage { background: var(--color-accent); color: var(--color-accent-contrast); border-color: var(--color-accent); } /* Search results table layout */ .search-results .gridjs-table { width: 100%; } .search-results .gridjs-container .gridjs-th, .search-results .gridjs-container .gridjs-td { color: var(--color-text); } /* Centre align all columns by default */ .search-results .gridjs-table th, .search-results .gridjs-table td { text-align: center; } /* Column width constraints for better readability */ .search-results [data-column-id="simplified"], .search-results [data-column-id="traditional"] { width: 13%; } .search-results [data-column-id="pinyin"], .search-results [data-column-id="bopomofo"] { width: 17%; } /* Definitions column: allow wrapping and constrain width */ .search-results [data-column-id="definitions"] { white-space: normal; width: 40%; } /* Larger font for Chinese text in search results */ .search-results .cn-text { font-size: 1.2rem; font-weight: 600; } /* Import & Edit button in search results */ .search-action-btn { background: var(--color-surface-0); color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); padding: 0.35rem 0.5rem; font-size: 1rem; cursor: pointer; transition: background 0.15s, color 0.15s; display: inline-flex; align-items: center; justify-content: center; } .search-action-btn:hover { background: var(--color-accent); color: var(--color-accent-contrast); } .dict-link { color: var(--color-accent); cursor: pointer; } .dict-link:hover { text-decoration: underline; } /* ---------------- Import Review Table Styling ---------------- */ .review-table th, .review-table td { text-align: center; border: 1px solid var(--color-border); padding: 0.4em; } /* Corrections page Fix buttons – match site buttons and theme */ .fix-pinyin-btn, .fix-zhuyin-btn { appearance: none; -webkit-appearance: none; background: var(--color-surface-1); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.25rem 0.75rem; font-size: 0.9rem; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .fix-pinyin-btn:hover, .fix-pinyin-btn:focus, .fix-zhuyin-btn:hover, .fix-zhuyin-btn:focus { background: var(--color-surface-2); outline: none; box-shadow: var(--ring); } /* ---------------- Vocab Table Styling ---------------- */ #vocab-container .gridjs-container { color: var(--color-text); } #vocab-container .gridjs-table { width: 100%; background: var(--color-surface-0); border: 1px solid var(--color-border); } #vocab-container .gridjs-table th, #vocab-container .gridjs-table td { color: var(--color-text); border-color: var(--color-border); } #vocab-container .gridjs-table thead th { background: var(--color-surface-1); } #vocab-container .gridjs-table tbody td, #vocab-container .gridjs-container .gridjs-td { background: var(--color-surface-0); } #vocab-container .gridjs-table tbody td { transition: background-color 0.15s ease; } #vocab-container .gridjs-table { border-collapse: collapse; } #vocab-container .gridjs-table thead th { border-bottom: 2px solid var(--color-border); } #vocab-container .gridjs-table tbody td { border-top: 1px solid color-mix(in oklab, var(--color-border) 80%, var(--color-text) 20%); } /* Subtle row highlight on hover/focus, theme-aware */ #vocab-container .gridjs-table tbody tr:hover td, #vocab-container .gridjs-table tbody tr:focus-within td { background: color-mix(in oklab, var(--color-accent) 8%, var(--color-surface-0)); } /* Vocab table footer/pagination themed */ #vocab-container .gridjs-footer { background: var(--color-surface-1); border-top: 1px solid var(--color-border); color: var(--color-text); } #vocab-container .gridjs-footer .gridjs-summary, #vocab-container .gridjs-footer .gridjs-pagination { color: var(--color-text); } #vocab-container .gridjs-footer .gridjs-pages button { background: var(--color-surface-1); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } #vocab-container .gridjs-footer .gridjs-pages button:hover, #vocab-container .gridjs-footer .gridjs-pages button:focus { background: var(--color-surface-2); } #vocab-container .gridjs-footer .gridjs-pages button.gridjs-currentPage { background: var(--color-accent); color: var(--color-accent-contrast); border-color: var(--color-accent); } /* Vocab table search input follows theme */ #vocab-container .gridjs-search input { background: var(--color-surface-1); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } /* Adjust gridjs-head to flex layout for search + controls */ #vocab-container .gridjs-head { display: flex !important; justify-content: space-between; align-items: center; gap: 1rem; } #vocab-container .gridjs-search { flex: 1; } /* Larger font for Chinese text in vocab table */ #vocab-container .cn-text { font-size: 1.2rem; } /* Actions column layout */ #vocab-container .vocab-actions { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.5rem; } #vocab-container .vocab-action-btn { appearance: none; -webkit-appearance: none; padding: 0.4rem 0.55rem; border-radius: var(--radius-sm); line-height: 1; } #vocab-container .gridjs-table th:last-child, #vocab-container .gridjs-table td:last-child { width: 1%; white-space: nowrap; } /* Column visibility controls */ .vocab-column-controls { position: relative; flex-shrink: 0; } .column-menu-toggle { background: var(--color-surface-1); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.5rem 0.65rem; font-size: 1.1rem; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; display: inline-flex; align-items: center; justify-content: center; } .column-menu-toggle:hover, .column-menu-toggle:focus { background: var(--color-surface-2); border-color: var(--color-accent); outline: none; } .column-menu { position: absolute; top: 100%; right: 0; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); min-width: 220px; margin-top: 0.5rem; z-index: 1000; } .column-menu.hidden { display: none; } .column-menu-content { padding: 1rem; } .column-checkboxes { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.75rem; } .column-toggle { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; user-select: none; font-size: 0.95rem; color: var(--color-text); } .column-toggle input[type="checkbox"] { cursor: pointer; width: 18px; height: 18px; accent-color: var(--color-accent); } .reset-btn { width: 100%; padding: 0.5rem; font-size: 0.85rem; background: white; color: #333; border: 2px solid #333; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .reset-btn:hover, .reset-btn:focus { background: var(--color-accent); color: white; border-color: var(--color-accent); outline: none; } .import-table .notes-cell { padding: 4px; vertical-align: top; min-width: 180px; display: flex; flex-direction: column; } .review-table .notes-cell { padding: 4px; vertical-align: top; min-width: 180px; display: flex; flex-direction: column; } .notes-input { width: 100%; font-size: 0.9em; min-height: 40px; resize: vertical; box-sizing: border-box; } /* Ensure compact copy button overrides generic .secondary-btn sizing */ .import-table .copy-frag-btn { display: block; margin: 0 auto 4px auto; font-size: 0.85em; padding: 2px 6px; } .review-table .copy-frag-btn { display: block; margin: 0 auto 4px auto; font-size: 0.85em; padding: 2px 6px; } /* Center the Finish Import button */ #finish-import { display: block; margin: 0 auto; } .review-table .definition-col { width: 40%; } .review-table tbody tr:nth-child(even) { background: color-mix(in oklab, var(--color-accent) 14%, var(--color-bg)); } .definition-card { margin-top: 0.5em; margin-bottom: 1em; background-color: var(--color-surface-1); border: 1px solid var(--color-border); padding: 1em; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); display: none; } .dict-header { font-weight: bold; font-size: 1.1em; color: var(--color-text); margin-bottom: 0.5em; border-bottom: 1px solid var(--color-border); padding-bottom: 0.3em; } .word-card { border: 2px solid var(--color-border); border-radius: 8px; margin-bottom: 2rem; overflow: hidden; /* Ensures the child corners also look rounded */ } .character-box { border: 2px solid var(--color-border); padding: 10px; margin: 10px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; } .current-char .character-box { border-color: #007bff; } .char-side { font-size: 2rem; font-weight: bold; width: 2em; text-align: center; } .char-center { display: flex; flex-direction: column; align-items: center; flex-grow: 1; } .character-box button { margin-bottom: 0.5em; } .char-container { width: 100%; max-width: 200px; /* Modern: force square */ aspect-ratio: 1 / 1; /* Fallback for older browsers */ position: relative; } .char-container::before { content: ""; display: block; padding-top: 100%; /* fallback square aspect ratio */ } .char-container>* { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* Styling */ .char-container { border: 2px solid var(--color-border); border-radius: 8px; padding: 0.5em; background-color: var(--color-surface-0); box-sizing: border-box; } .quiz-layer, .animate-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .animate-layer { pointer-events: none; display: none; z-index: 2; } #quiz-status { font-style: italic; margin: 0.5em 0; } /* Review flashcards styling */ #review-form { display: flex; flex-direction: column; align-items: center; margin-top: 0; } #review-form h2 { margin-bottom: 1rem; } #review-form label { display: block; margin-top: 0.5rem; margin-bottom: 0.5rem; font-weight: 600; } /* Quick review button row */ .quick-review { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; width: 100%; } .quick-review .quick-btn { margin: 0; /* Fixed width to accommodate "Review XXX due now/today" for up to 999 reviews */ /* Using min-width to allow larger numbers to expand if needed */ min-width: 220px; } #review-session { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-surface-0); z-index: 1000; } #flashcard { display: flex; flex-direction: column; align-items: center; height: 100%; width: 100%; position: relative; } .card-chars { /* Responsive character size: between 3rem and 6rem depending on viewport */ font-size: clamp(3rem, 10vw, 6rem); text-align: center; padding: 0.5rem 1rem; margin-top: 3.25rem; /* extra top margin to clear back-button row */ word-break: break-word; display: flex; flex-direction: column; align-items: center; justify-content: center; } .card-simplified, .card-traditional { display: block; } .card-pron-mainland, .card-pron-taiwan { font-size: 1.25rem; color: var(--color-accent-brown); margin: 0.25rem 0; visibility: hidden; /* Hidden on front, shown on back */ height: auto; min-height: 1.5rem; /* Reserve space for pronunciation */ } .card-front, .card-back { width: 100%; } .card-back { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; overflow-y: auto; } .card-back-content { padding: 1rem 1.5rem 6rem; /* bottom padding to avoid overlap with buttons */ box-sizing: border-box; width: 100%; text-align: center; line-height: 1.4; } .card-back-buttons { display: flex; justify-content: space-around; width: 100%; margin-top: 1rem; } .exit-btn { /* vertically align center with progress indicator */ position: absolute; top: 0.5rem; right: 1rem; background: none; border: none; font-size: 2rem; cursor: pointer; z-index: 10; } /* Position review progress next to exit button */ #review-progress { /* position to the left of the exit button */ position: absolute; top: 1rem; right: 4rem; margin: 0; font-style: italic; font-size: 1rem; z-index: 10; } .card-def { font-size: 1rem; margin: 0.5rem 0; color: var(--color-text); text-align: center; } .card-notes { font-size: 0.9rem; font-style: italic; color: var(--color-text-muted); margin: 0.5rem 0; } .card-front .reveal-btn { position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%); /* Increase size for desktop */ padding: 0.75rem 1.5rem; font-size: 1rem; width: 70%; max-width: 20rem; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background-color 0.2s ease; } .card-front .reveal-btn:hover, .card-front .reveal-btn:focus { background: color-mix(in oklab, var(--color-primary) 92%, black); } /* Microphone toggle above Reveal */ #stt-btn.stt-toggle { position: absolute; bottom: 7.3rem; left: 50%; transform: translateX(-50%); border: 1px solid var(--border-color); background: var(--color-surface-1); color: var(--color-text); width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; } #stt-btn.stt-toggle.active { border-color: transparent; background: var(--color-accent-green); color: #fff; position: absolute; /* ensure pseudo-element positions correctly */ } #stt-btn.stt-toggle.active::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 0 rgba(43, 170, 98, 0.55); animation: stt-pulse 1.6s ease-out infinite; } @keyframes stt-pulse { 0% { box-shadow: 0 0 0 0 rgba(43, 170, 98, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(43, 170, 98, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 170, 98, 0); } } #stt-btn.stt-toggle:disabled { cursor: not-allowed; opacity: 0.8; } #stt-btn.stt-toggle .stt-ban-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ff5a5a; font-size: 1.1em; pointer-events: none; } /* Compact STT result line on back */ .stt-result { margin: 0.25rem 0 0.5rem; font-size: 0.95rem; color: var(--color-text); cursor: pointer; } .stt-token { padding: 0 0.25rem; border-radius: 4px; margin-right: 0.125rem; } .stt-w-good { background: color-mix(in oklab, var(--color-accent-green) 25%, transparent); } .stt-w-avg { background: color-mix(in oklab, var(--color-secondary) 25%, transparent); } .stt-w-bad { background: color-mix(in oklab, #ff5a5a 25%, transparent); } .stt-detail { font-size: 0.9rem; color: var(--color-text); margin: 0 0 0.5rem; } .stt-detail-table { margin: 0.25rem auto 0.5rem; border-collapse: separate; border-spacing: 0; min-width: 260px; width: auto; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; } .stt-detail-table th { text-align: center; padding: 0.25rem 0.5rem; color: var(--color-text); background: var(--color-surface-1); border-bottom: 1px solid var(--color-border); } .stt-detail-table td { padding: 0.15rem 0.5rem; border-bottom: 1px solid color-mix(in oklab, var(--color-border) 60%, transparent); } .stt-detail-table td.stt-k { text-align: right; color: var(--color-text-muted); white-space: nowrap; width: 50%; } .stt-detail-table td.stt-v { text-align: left; width: 50%; } /* Desktop: group got/missed into centered bottom button bar */ .card-back-buttons { position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%); display: flex; gap: 1rem; width: 70%; max-width: 20rem; justify-content: center; } .card-back-buttons button { flex: 1; padding: 0.75rem 1.5rem; font-size: 1rem; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background-color 0.2s ease; } .got-btn { background: var(--color-accent-green); color: #fff; } .got-btn:hover, .got-btn:focus { background: color-mix(in oklab, var(--color-accent-green) 92%, black); } .got-btn:disabled { background: var(--color-surface-2); color: var(--color-text-muted); cursor: not-allowed; filter: none; } .miss-btn { background: var(--color-primary); color: #fff; } .miss-btn:hover, .miss-btn:focus { background: color-mix(in oklab, var(--color-primary) 92%, black); } .miss-btn:disabled { background: var(--color-surface-2); color: var(--color-text-muted); cursor: not-allowed; filter: none; } .quiz-action-btn { padding: var(--space-2) var(--space-3); font-size: 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--color-surface-1); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .quiz-action-btn:hover:not(:disabled) { background: var(--color-surface-2); } .quiz-action-btn.import-btn { background: var(--color-primary); color: #ffffff; } /* Subtle shade shift for coloured variants */ .quiz-action-btn.import-btn:hover:not(:disabled), .quiz-action-btn.import-btn:focus:not(:disabled) { background: color-mix(in oklab, var(--color-primary) 92%, black); } .quiz-action-btn.got-btn { background: var(--color-accent-green); color: #ffffff; } .quiz-action-btn.got-btn:hover:not(:disabled), .quiz-action-btn.got-btn:focus:not(:disabled) { background: color-mix(in oklab, var(--color-accent-green) 92%, black); } .quiz-action-btn.miss-btn { background: var(--color-primary); color: #ffffff; } .quiz-action-btn.miss-btn:hover:not(:disabled), .quiz-action-btn.miss-btn:focus:not(:disabled) { background: color-mix(in oklab, var(--color-primary) 92%, black); } .quiz-action-btn:disabled { background: var(--color-surface-2); color: var(--color-text-muted); cursor: not-allowed; filter: none; } /* Quiz footer controls layout */ .quiz-footer-controls { display: flex; align-items: center; gap: 0.5rem; } .quiz-correction-label { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 500; } /* Score badge shown after auto/manual scoring */ .quiz-score-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; animation: scorePopIn 0.3s ease; } .quiz-score-badge.got { background: var(--color-accent-green); color: #fff; } .quiz-score-badge.missed { background: #e53935; color: #fff; } @keyframes scorePopIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } .back-btn { position: absolute; top: 1rem; left: 1rem; background: var(--color-surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.9rem; padding: 0.25rem 0.75rem; cursor: pointer; transition: background 0.2s ease; } .back-btn:hover, .back-btn:focus { background: var(--color-surface-2); } /* Navigation styling */ nav#nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; justify-content: center; } nav#nav button { padding: var(--space-2) var(--space-3); font-size: 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--color-surface-1); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } nav#nav button:hover, nav#nav button:focus { background: var(--color-primary); color: #ffffff; } /* -------- Header & Navigation -------- */ header { position: relative; background: var(--color-surface-2); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-color); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); max-width: 1200px; margin: 0 auto; } .header-left { display: flex; align-items: center; gap: var(--space-3); } .header-center { display: flex; align-items: center; gap: var(--space-3); } .header-right { display: flex; align-items: center; gap: var(--space-3); } .site-title { font-size: 1.5rem; margin: 0; cursor: pointer; } .site-logo { display: block; height: 48px; width: auto; } /* Review button – prominent accent colour */ .review-btn { padding: var(--space-2) var(--space-3); font-size: 1rem; background: var(--color-accent-green); color: #ffffff; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background-color 0.2s ease; } .review-btn:hover, .review-btn:focus { background: color-mix(in oklab, var(--color-accent-green) 92%, black); } /* Account menu */ .account-menu { position: relative; display: inline-block; } .icon-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-color); } /* Compact, bordered icon button variant for inline actions (e.g., create vocab '+') */ .create-vocab-btn { margin-left: var(--space-2); font-size: 0.9rem; line-height: 1; padding: 0.2rem 0.35rem; background: var(--color-surface-0); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-1); } .create-vocab-btn:hover, .create-vocab-btn:focus { border-color: var(--color-accent); box-shadow: var(--ring); outline: none; background: color-mix(in oklab, var(--color-accent) 8%, var(--color-surface-0)); } .create-vocab-btn:disabled { cursor: default; opacity: 0.7; box-shadow: none; } .dropdown-content { display: none; position: absolute; background-color: var(--color-surface-1); min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 101; } .dropdown-content button { color: var(--color-text); padding: 12px 16px; text-decoration: none; display: block; width: 100%; text-align: center; background: none; border: none; cursor: pointer; font-size: 1rem; font-weight: normal; } .dropdown-content button:hover { background-color: var(--color-surface-2); } .dropdown-content.show { display: block; } #menu-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 99; } #menu-backdrop.hidden { display: none; } /* Hamburger button – hidden on desktop */ .hamburger { display: none; font-size: 1.5rem; background: none; border: none; cursor: pointer; color: var(--text-color); } /* -------- Auth (login / signup) -------- */ .auth-card { max-width: 420px; margin: var(--space-6) auto; background: var(--color-surface-1); padding: var(--space-5); border-radius: var(--radius-md); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); } .auth-card h2 { text-align: center; margin-top: 0; margin-bottom: var(--space-4); } .auth-form label { display: block; margin-bottom: var(--space-3); font-weight: 600; } .auth-form input { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 1rem; box-sizing: border-box; } .auth-form button { width: 100%; margin-top: var(--space-4); background: var(--color-primary); color: #ffffff; border: none; border-radius: var(--radius-sm); padding: var(--space-3); font-size: 1rem; cursor: pointer; transition: background-color 0.2s ease; } .auth-form button:hover, .auth-form button:focus { background: color-mix(in oklab, var(--color-primary) 92%, black); } .auth-alt { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: var(--space-3); } .auth-alt a { color: var(--color-primary); text-decoration: none; } .auth-alt a:hover, .auth-alt a:focus { text-decoration: underline; } /* Error messages in forms */ .form-error { margin-top: var(--space-3); margin-bottom: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); background-color: #ffebee; color: #c62828; font-size: 0.95rem; border-left: 4px solid #c62828; } /* Inline error messages (below form fields) */ .inline-error { margin-top: var(--space-2); margin-bottom: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background-color: #ffebee; color: #c62828; font-size: 0.875rem; border-left: 3px solid #c62828; } @media (prefers-color-scheme: dark) { .form-error { background-color: #3d1f1f; color: #ff8a80; border-left-color: #ff8a80; } .inline-error { background-color: #3d1f1f; color: #ff8a80; border-left-color: #ff8a80; } } :root.theme-dark .form-error { background-color: #3d1f1f; color: #ff8a80; border-left-color: #ff8a80; } :root.theme-dark .inline-error { background-color: #3d1f1f; color: #ff8a80; border-left-color: #ff8a80; } /* Success messages in forms */ .form-success { margin-top: var(--space-3); margin-bottom: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); background-color: #e8f5e9; color: #2e7d32; font-size: 0.95rem; border-left: 4px solid #2e7d32; } @media (prefers-color-scheme: dark) { .form-success { background-color: #1b3d1b; color: #81c784; border-left-color: #81c784; } } :root.theme-dark .form-success { background-color: #1b3d1b; color: #81c784; border-left-color: #81c784; } .auth-card-wide { max-width: 640px; } /* -------- Preferences Page -------- */ .preferences-container { max-width: 800px; margin: 2rem auto; padding: 2rem; background-color: var(--background-color); border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .preferences-layout { display: flex; gap: 1.5rem; align-items: flex-start; } .preferences-left { flex: 0 0 260px; } .preferences-right { flex: 1; } .preference-group { margin-bottom: 2rem; text-align: center; } .preference-group h3 { margin-bottom: 1rem; color: var(--text-color); } .preference-group .muted { color: var(--color-text-muted); margin: 0 0 0.75rem 0; } .btn-group { display: flex; gap: 1rem; justify-content: center; } /* Generic button style to match group buttons */ .btn { background-color: var(--color-surface-1); color: var(--text-color); border: 1px solid var(--border-color); padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; transition: background-color 0.3s, color 0.3s; } .btn:hover { background-color: var(--primary-color); color: white; } .btn.active { background-color: var(--primary-color); color: white; font-weight: bold; } .btn-group .btn { background-color: var(--color-surface-1); color: var(--text-color); border: 1px solid var(--border-color); padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; transition: background-color 0.3s, color 0.3s; } .btn-group .btn:hover { background-color: var(--primary-color); color: white; } .btn-group .btn.active { background-color: var(--primary-color); color: white; font-weight: bold; } .btn-group.disabled-group { opacity: 0.5; pointer-events: none; } .btn-group.disabled-group .btn { cursor: not-allowed; opacity: 0.6; } .font-sample { border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.75rem; background: var(--color-surface-1); font-size: 2rem; line-height: 1.6; } /* Apply chosen Chinese font to elements marked .cn-text */ .cn-font-default .cn-text { font-family: "Inter", "Segoe UI", Roboto, "Noto Sans CJK SC", "Noto Sans CJK TC", "Source Han Sans", sans-serif !important; } .cn-font-default-cursive .cn-text { font-family: "KaiTi", "Kaiti SC", "STKaiti", "DFKai-SB", "BiauKai", "LXGW WenKai TC", cursive, serif !important; } .cn-font-noto-sans .cn-text { font-family: "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans SC", "Noto Sans TC", "Source Han Sans SC", "Source Han Sans TC", "Noto Sans", "Inter", "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif !important; } .cn-font-noto-serif .cn-text { font-family: "Noto Serif CJK SC", "Noto Serif CJK TC", "Source Han Serif SC", "Source Han Serif TC", "Noto Serif", "Songti SC", "Songti TC", Georgia, serif !important; } .cn-font-lxgw-wenkai-tc .cn-text { font-family: "LXGW WenKai TC", "Noto Serif TC", "Noto Serif CJK TC", "Source Han Serif TC", serif !important; } .cn-font-cactus-classical-serif .cn-text { font-family: "Cactus Classical Serif", "Noto Serif TC", "Noto Serif CJK TC", "Source Han Serif TC", serif !important; } .inline-input { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; justify-content: center; } .inline-input input[type="number"] { max-width: 120px; } /* Hide number input spinners for the Daily New Words input */ #new-words-input::-webkit-outer-spin-button, #new-words-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #new-words-input[type="number"] { -moz-appearance: textfield; } .multiplier-header { margin-bottom: 0.5rem; } .multiplier-header h4 { margin: 0 0 0.25rem 0; } .multiplier-arrow-label { margin: 0; font-size: 0.85rem; color: var(--color-text-muted, #666); display: none; } .multiplier-arrow-label-horizontal { margin: 0; font-size: 0.85rem; color: var(--color-text-muted, #666); } .multiplier-controls { display: flex; align-items: center; gap: 0.75rem; justify-content: center; } .multiplier-buttons-input { display: flex; align-items: center; gap: 0.75rem; } .multiplier-input { padding: 0.5rem 0.75rem; border: 1px solid var(--color-border, #ccc); border-radius: 4px; font-size: 1rem; width: 100px; text-align: center; } .multiplier-input::-webkit-outer-spin-button, .multiplier-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .multiplier-input[type="number"] { -moz-appearance: textfield; } .multiplier-row { margin-bottom: 1.5rem; } .voice-button-list { display: flex; flex-direction: column; gap: 0.5rem; } .voice-row { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-start; } .voice-select-btn { flex: 1 1 auto; text-align: center; position: relative; padding-right: 4.25rem; /* room for provider chip */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .voice-provider-chip { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); display: inline-block; font-size: 0.7rem; line-height: 1; padding: 0.2rem 0.4rem; border-radius: 999px; background: var(--color-surface-1); color: var(--text-color); border: 1px solid var(--border-color); pointer-events: none; /* don't steal clicks from the button */ } .voice-provider-chip.provider-gcp { background: rgba(34, 108, 255, 0.12); border-color: rgba(34, 108, 255, 0.35); color: #1b4fb8; } .voice-provider-chip.provider-azure { background: rgba(43, 170, 98, 0.12); border-color: rgba(43, 170, 98, 0.35); color: #1c7843; } .play-btn { flex: 0 0 auto; padding: 0.5rem 0.75rem; } .tone-color-example th, .tone-color-example td { text-align: center; } .tone-color-example { border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.5rem; } .tone-color-example tr:not(:last-child) { border-bottom: 1px solid var(--color-border); } /* -------- Review: count selector -------- */ .count-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .count-btn { padding: var(--space-2) var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--color-surface-1); cursor: pointer; font-size: 1rem; min-width: 3.5rem; transition: background 0.2s ease, color 0.2s ease; } .count-btn.active, .count-btn:hover, .count-btn:focus { background: var(--color-primary); color: #ffffff; } /* Generic primary action button (used across pages) */ .primary-btn { background: var(--color-primary); color: #ffffff; border: none; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: 1rem; cursor: pointer; transition: background-color 0.2s ease; } .primary-btn:hover, .primary-btn:focus { /* Subtle shade shift without dimming text */ background: color-mix(in oklab, var(--color-primary) 92%, black); } .primary-btn:disabled { background: var(--color-surface-2); color: var(--color-text-muted); cursor: not-allowed; filter: none; } /* Generic secondary action button (used across pages) */ .secondary-btn { background: var(--color-surface-1); color: var(--text-color); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: 1rem; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .secondary-btn:hover, .secondary-btn:focus { background: var(--color-primary); color: #ffffff; border-color: var(--color-primary); } /* Import/Export actions layout */ .import-export-actions { display: flex; gap: var(--space-3); margin: var(--space-4) 0; } .import-export-actions button { flex: 1; } /* Dictionary overlay styles */ .overlay { /* Fullscreen overlay backdrop */ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); z-index: 2000; } .overlay-content { position: relative; background: var(--color-surface-0); max-width: 90%; max-height: 90%; z-index: 2001; /* ensure overlay content is above backdrop */ overflow-y: auto; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); color: var(--color-text); } .overlay-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1; } /* Help overlay has higher z-index to appear above other overlays */ #help-overlay { z-index: 3000; } #help-overlay .overlay-content { z-index: 3001; } /* Audio buttons row underneath main controls */ .audio-buttons { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 1rem; width: 70%; max-width: 20rem; justify-content: center; } .audio-buttons button { flex: 1; margin: 0; padding: 0.5rem 0.75rem; font-size: 0.9rem; } .dict-section { margin-bottom: 1rem; } .dict-section h3 { margin: 0 0 0.5rem 0; border-bottom: 1px solid var(--color-border); padding-bottom: 0.25rem; font-size: 1.25rem; } .dict-entry { margin-bottom: 1rem; } .dict-entry .dict-word { font-weight: bold; margin-bottom: 0.25rem; } .dict-defs { margin-top: 0.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .overlay-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 2000; } /* Header in dictionary overlay: word and import button */ .dict-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } /* ---------------- Edit Vocabulary Overlay Layout ---------------- */ .vocab-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; } .vocab-head-words { font-size: 1.8rem; font-weight: 600; } /* Character edit display and edit modes */ .char-display { display: inline-flex; align-items: center; gap: 0.5rem; } .char-edit-btn { background: transparent; border: none; padding: 0; margin: 0; color: var(--color-text-muted); cursor: pointer; font-size: 0.75em; transition: color 0.2s ease, opacity 0.2s ease; opacity: 0.6; } .char-edit-btn:hover, .char-edit-btn:focus { color: var(--color-text); opacity: 1; outline: none; } .char-edit-mode { display: inline-flex; align-items: center; gap: 0.5rem; } .char-edit-inputs { display: flex; align-items: center; gap: 0.5rem; } .char-edit-buttons { display: inline-flex; gap: 0.5rem; } .char-input { font-size: 1.8rem; font-weight: 600; padding: 0.25rem 0.5rem; border: 2px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-surface-1); color: var(--color-text); width: auto; max-width: 16ch; } .char-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2); } .char-sep { font-size: 1.8rem; font-weight: 600; color: var(--color-text-muted); } .char-action-btn { background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.25rem 0.5rem; color: var(--color-text); cursor: pointer; font-size: 0.9rem; transition: background 0.2s ease, border-color 0.2s ease; } .char-action-btn:hover, .char-action-btn:focus { background: var(--color-surface-2); border-color: var(--color-accent); outline: none; } .char-save-btn { color: var(--color-accent); } .char-save-btn:hover, .char-save-btn:focus { background: rgba(var(--color-accent-rgb), 0.1); } .char-cancel-btn { color: var(--color-text-muted); } .char-cancel-btn:hover, .char-cancel-btn:focus { background: var(--color-surface-2); } .vocab-checkboxes { display: flex; gap: 1rem; align-items: center; flex: 0 1 auto; } .vocab-checkboxes label { margin-left: 0; white-space: nowrap; font-size: 0.95rem; } .dates-row { font-size: 0.9rem; color: var(--color-text-muted); margin: 0.25rem 0 1rem 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .dates-text { display: flex; align-items: center; gap: 0; flex: 1 1 auto; min-width: 0; } .date-item { white-space: nowrap; } .date-separator { display: inline; margin: 0 0.25rem; } .two-col-row { display: flex; gap: 1rem; margin-bottom: 1rem; } .two-col-row .col { flex: 1; } .pron-display-row { display: flex; gap: 1rem; margin-bottom: 1rem; } .pron-display { flex: 1; } .definition-chooser-row { margin-bottom: 1rem; } .save-row { text-align: center !important; margin-top: 1rem; } /* MOEDict additional metadata */ .dict-meta { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 0.5rem; } /* Inline radical/stroke info in title */ .dict-meta-inline { font-size: 0.9rem; color: var(--color-text-muted); margin-left: 0.5rem; } /* Synonyms/Antonyms styling */ .dict-synonyms, .dict-antonyms { margin-top: 0.25rem; font-size: 0.9rem; color: var(--color-text); } /* Dictionary cross-reference links styling */ .dict-links { margin-top: 0.25rem; font-size: 0.9rem; color: var(--color-text); } .dict-links p { margin: 0; display: inline; } /* Inline reference links within link text */ .dict-link-ref { color: var(--color-link); text-decoration: underline dotted; text-underline-offset: 4px; cursor: pointer; } .dict-link-ref:hover { color: var(--color-link-hover); } .dict-link-badge { background: var(--color-link); color: white; margin-left: 0.25rem; } .dict-link-badge:hover { background: var(--color-link-hover); } /* Examples and quotes sections */ .dict-altsection { margin-top: 0.5rem; } .dict-altheader { font-weight: bold; margin-bottom: 0.25rem; } .dict-example, .dict-quote { margin: 0.25rem 0; font-size: 0.9rem; color: var(--color-text-muted); } /* Dashed separator line */ .dict-separator { border: none; border-top: 1px dashed var(--color-border); margin: 0.5rem 0; } /* Definition with type and quote styling */ .dict-definition { margin: 0.5rem 0; } .dict-type { font-style: italic; color: var(--color-accent); margin-right: 0.5rem; } .dict-deftext { color: var(--color-text); } .dict-quote { margin-left: 1rem; font-size: 0.9rem; color: var(--color-text-muted); border-left: 2px solid var(--color-border); padding-left: 0.5rem; } /* Import page table */ .import-table { width: 100%; border-collapse: collapse; } .import-table col.word-col { width: 10%; } .import-table col.import-col { width: 10%; } .import-table col.mainland-col, .import-table col.taiwan-col { width: 40%; } .import-table td, .import-table th { padding: 4px; border: 1px solid var(--color-border); } .import-table td.word-cell { text-align: center; font-weight: bold; } .row-ok { background: color-mix(in oklab, var(--color-accent-green) 14%, var(--color-bg)); } .row-choose { background: color-mix(in oklab, var(--color-secondary) 20%, var(--color-bg)); } .duplicate-word { background-color: var(--color-surface-2) !important; color: var(--color-text-muted); cursor: not-allowed; } .duplicate-word input[type="checkbox"] { pointer-events: none; } .duplicate-word .def-chooser-cell { opacity: 0.5; pointer-events: none; } /* Dashboard styles */ .dashboard-container { padding: 2rem; } .dashboard-header { margin-bottom: 2rem; text-align: center; } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } .grid-item.card { background-color: var(--color-surface-0); border-radius: 8px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; } .grid-item.card:hover { transform: translateY(-5px); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15); } .grid-item.card h2 { text-align: center; } .card h2 { margin-top: 0; font-size: 1.25rem; color: var(--color-text); } .review-stats { display: flex; justify-content: space-around; text-align: center; margin-top: 1rem; } .stat-value { display: block; font-size: 2.5rem; font-weight: 600; } .stat-label { font-size: 1rem; color: var(--color-text-muted); } .vocab-total { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); display: flex; justify-content: space-around; text-align: center; gap: 1rem; } .vocab-total>div { flex: 1; } .vocab-total .stat-value { font-size: 2rem; } .import-label { display: block; margin-bottom: 0.5rem; } .import-textarea, .import-input { width: 100%; margin-bottom: 0.5rem; } /* Form message styles for feedback */ .form-message { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: 0.95rem; text-align: center; display: none; } .form-message.error, .form-message.success { display: block; } .form-message.error { background-color: var(--color-error-bg, #fee); color: var(--color-error-text, #c33); border: 1px solid var(--color-error, #c33); } .form-message.success { background-color: var(--color-success-bg, #efe); color: var(--color-success-text, #3c3); border: 1px solid var(--color-success, #3c3); } @media (min-width: 768px) { .auth-card-import { max-width: 50%; } /* Ensure default button text follows theme */ button { color: var(--color-text); } } /* Loading screen overlay */ #import-loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .loading-container { background: var(--color-surface-0); padding: 2rem; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-2); } .spinner { width: 40px; height: 40px; border: 4px solid var(--color-border); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 1rem; } @keyframes spin { to { transform: rotate(360deg); } } #loading-message { color: var(--color-text); margin: 0; font-size: 0.95rem; } /* Progress message styling */ #import-progress, #migrate-progress { display: inline-block; background: var(--color-surface-1); color: var(--color-text); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border-left: 4px solid var(--color-accent); font-size: 0.9rem; margin-top: var(--space-3); margin-left: auto; margin-right: auto; box-shadow: var(--shadow-1); transition: all 0.2s ease; animation: slideInUp 0.3s ease-out; } #import-progress, #migrate-progress { display: block; text-align: center; } /* Complete state styling */ #import-progress.complete, #migrate-progress.complete { border-left-color: var(--color-accent-green); } @keyframes slideInUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Toast notification system */ #toast-container { position: fixed; bottom: 2rem; right: 2rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.75rem; pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: var(--radius-sm); font-size: 0.95rem; box-shadow: var(--shadow-2); pointer-events: auto; animation: slideIn 0.3s ease-out; max-width: 350px; word-wrap: break-word; } .toast.success { background-color: #e8f5e9; color: #2e7d32; border-left: 4px solid #2e7d32; } .toast.error { background-color: #ffebee; color: #c62828; border-left: 4px solid #c62828; } .toast.info { background-color: #e3f2fd; color: #1565c0; border-left: 4px solid #1565c0; } .toast.warning { background-color: #fff3e0; color: #f57f17; border-left: 4px solid #f57f17; } @media (prefers-color-scheme: dark) { .toast.success { background-color: #1b3d1b; color: #81c784; border-left-color: #81c784; } .toast.error { background-color: #3d1f1f; color: #ff8a80; border-left-color: #ff8a80; } .toast.info { background-color: #1a237e; color: #64b5f6; border-left-color: #64b5f6; } .toast.warning { background-color: #3d2817; color: #ffb74d; border-left-color: #ffb74d; } } :root.theme-dark .toast.success { background-color: #1b3d1b; color: #81c784; border-left-color: #81c784; } :root.theme-dark .toast.error { background-color: #3d1f1f; color: #ff8a80; border-left-color: #ff8a80; } :root.theme-dark .toast.info { background-color: #1a237e; color: #64b5f6; border-left-color: #64b5f6; } :root.theme-dark .toast.warning { background-color: #3d2817; color: #ffb74d; border-left-color: #ffb74d; } .toast-message { flex: 1; } .toast-close { flex-shrink: 0; background: none; border: none; color: inherit; cursor: pointer; padding: 0; font-size: 1.25rem; line-height: 1; opacity: 0.7; transition: opacity 0.2s ease; } .toast-close:hover { opacity: 1; } @keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } } .toast.removing { animation: fadeOut 0.3s ease-out forwards; } /* Review page network status indicator */ .review-network-status { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background-color: #ffebee; color: #c62828; border-radius: var(--radius-sm); border: 1px solid #c62828; font-size: 0.9rem; z-index: 100; white-space: nowrap; } .review-network-status i { font-size: 1.1rem; } .review-network-status-text { font-weight: 500; } @media (prefers-color-scheme: dark) { .review-network-status { background-color: #3d1f1f; color: #ff8a80; border-color: #ff8a80; } } :root.theme-dark .review-network-status { background-color: #3d1f1f; color: #ff8a80; border-color: #ff8a80; } /* Quiz form styling */ .quiz-form-centered { display: flex; flex-direction: column; align-items: center; } .quiz-form-section { margin-bottom: 2em; display: flex; flex-direction: column; align-items: center; width: 100%; } .button-group { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; } .char-btn, .type-btn, .count-btn { padding: var(--space-2) var(--space-3); background: var(--color-surface-1); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease; font-size: 0.95rem; } .char-btn:hover, .type-btn:hover, .count-btn:hover { background: var(--color-surface-2); } .char-btn.active, .type-btn.active, .count-btn.active { background: var(--color-primary); color: #ffffff; border-color: var(--color-primary); } .no-reviews { text-align: center; padding: var(--space-3); font-size: 1rem; color: var(--color-text-muted); } /* Import table column widths */ .import-table col.word-col { width: 12%; } .import-table col.def-chooser-col { width: 50%; } .import-table col.import-col { width: 10%; } .import-table col.notes-col { width: 28%; } /* Import checkbox cell - centered on desktop */ .import-table .import-checkbox-cell { text-align: center; } .review-table col.word-col { width: 12%; } .review-table col.definition-col { width: 35%; } .review-table col:nth-child(3) { width: 20%; } .review-table col:nth-child(4) { width: 15%; } .review-table col.notes-col { width: 18%; } /* --------------------------------- Mobile-specific style overrides --------------------------------- Place all responsive tweaks for small screens in this file so they’re easy to locate & edit. */ /* Larger tablets and wider mobile devices */ @media (max-width: 992px) { /* Dates row: stack vertically on larger mobile/tablets (992px and below) */ .dates-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; width: 100%; } .date-separator { display: none; } /* Dates row and checkboxes: arranged horizontally on larger mobile/tablets (992px and below) */ .dates-row { flex-direction: row; align-items: flex-start; gap: 1rem; justify-content: space-between; } .dates-text { flex: 1; } .vocab-checkboxes { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-end; width: auto; margin-top: 0; } .vocab-checkboxes label { display: flex; align-items: center; margin: 0; width: auto; font-size: 0.9rem; flex-direction: row-reverse; gap: 0.5rem; } .vocab-checkboxes input[type="checkbox"] { width: auto; padding: 0; margin: 0; } } /* Slightly-mobile (tablets & phones) */ @media (max-width: 768px) { /* Show hamburger and make header/nav mobile-friendly */ body { padding: 0; margin: 0; } header { padding: var(--space-2) 0 !important; margin: 0; } main { padding: var(--space-2); } .hamburger { display: block; } .header-inner { justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-4); } .header-left { gap: var(--space-2); } .header-center { gap: var(--space-2); } .header-right { gap: var(--space-2); } .icon-btn { font-size: 1.25rem; } .site-logo { margin-left: -0.5rem; margin-right: -0.5rem; } .account-menu { margin-left: -0.5rem; } /* Collapse nav links by default on mobile */ #nav.nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface-2); flex-direction: column; align-items: stretch; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-color); z-index: 100; margin: 0; } #nav.nav-links.open { display: flex; } } /* Small screens (phones and small tablets) */ @media (max-width: 600px) { /* Lists page detail header: stack stats vertically on narrow screens */ #lists-detail-stats { display: flex !important; flex-direction: column !important; gap: 0.25rem !important; } /* Global type and spacing */ body { padding: 0; margin: 0; font-size: 1.1rem; } header { padding: var(--space-2) 0 !important; } main { padding: var(--space-2); } header h1 { font-size: 1.8rem; margin-bottom: 0.5rem; } .site-logo { margin-left: -0.75rem; margin-right: -0.75rem; } .account-menu { margin-left: -0.75rem; } /* Header nav buttons */ nav#nav button { width: 100%; padding: 0.625rem 0.75rem; font-size: 0.95rem; } /* Dropdown buttons on mobile */ .dropdown-content button { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; } /* Form controls */ form label { display: block; margin: 0.5rem 0; } form input, form button, form textarea { width: 100%; padding: 0.75rem; font-size: 1rem; box-sizing: border-box; } /* Hide "Review" word on very narrow screens for space */ .date-label-review { display: none; } /* Tables and character card tweaks */ table { font-size: 0.9rem; } .char-side { font-size: 1.5rem; width: 3em; } .character-box { margin: 0; } .word-card { margin-left: -0.5rem; margin-right: -0.5rem; border-radius: 0; border-left: none; border-right: none; } .card-chars { font-size: 5rem; /* Slightly smaller characters for mobile */ padding: 0.25rem 0.5rem; /* Reduce padding to bring characters together */ line-height: 1; /* Tighter line height for multi-character words */ } .card-pron-mainland, .card-pron-taiwan, .card-def, .card-notes { font-size: 1.5rem; } .badge { padding: 0.3em 0.7em; font-size: 1rem; } /* Updated layout: shared spacing adjustments */ .card-front .reveal-btn, .card-back-buttons { width: 90%; max-width: none; gap: 0.5rem; } .audio-buttons { gap: 0.75rem; } /* Preferences page: stack option buttons */ .preferences-container .btn-group { flex-direction: column; align-items: stretch; gap: 0.5rem; } .preferences-container .btn-group .btn { width: 100%; } /* Multiplier controls: vertical layout on mobile */ .multiplier-header { margin-bottom: 0.5rem; } .multiplier-header h4 { margin: 0; } .multiplier-controls { display: flex; align-items: stretch; gap: 0.5rem; justify-content: center; } .multiplier-arrow-label { display: block; writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; font-size: 0.75rem; margin: 0; padding: 0; } .multiplier-arrow-label-horizontal { display: none; } .multiplier-buttons-input { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; } .multiplier-controls .btn-group { flex-direction: column; align-items: stretch; width: auto; } .multiplier-controls .btn-group .btn { width: 100%; } .multiplier-input { width: auto; max-width: 80px; } .preferences-layout { flex-direction: column; } /* Ensure preferences columns fill width when stacked */ .preferences-left, .preferences-right { flex: none; width: 100%; } /* Voice selector rows stretch full width with play button on right */ .voice-button-list { align-items: stretch; } .voice-row { justify-content: flex-start; width: 100%; } .voice-select-btn { flex: 1 1 auto; width: 100%; padding-right: 2rem; /* smaller chip on mobile */ } /* Search page: stack input and button */ .search-form { flex-direction: column; align-items: stretch; } .search-form .primary-btn { width: 100%; } /* Misc small-layout helpers */ .two-col-row { flex-direction: column; } /* Stack vocab action buttons vertically on narrow screens */ #vocab-container .vocab-actions { flex-direction: column; align-items: center; justify-content: center; } /* Column visibility menu: adjust for mobile */ .column-menu { min-width: 180px; } .column-menu-content { padding: 0.75rem; } .column-checkboxes { gap: 0.5rem; margin-bottom: 0.5rem; } .column-toggle { font-size: 0.9rem; } .reset-btn { padding: 0.4rem; font-size: 0.8rem; } /* Import page: fix fragment container and table layout */ .fragment { overflow-x: visible; } /* Convert tables to card layout on mobile */ .import-table, .review-table { display: block; margin-bottom: 1rem; } .import-table colgroup, .review-table colgroup { display: none; } .import-table thead, .review-table thead { display: none; } .import-table tbody, .review-table tbody { display: flex; flex-direction: column; gap: 1rem; } .import-table tr, .review-table tr { display: grid; grid-template-columns: minmax(100px, 1fr) 1fr; gap: 1rem; border: 1px solid var(--color-border); border-radius: 6px; padding: 1.25rem; background: var(--color-surface-0); } .import-table td, .review-table td { display: flex; flex-direction: column; border: none; padding: 0.75rem; text-align: left; background: var(--color-surface-1); border-radius: 4px; } /* Add labels via data attributes (we'll add CSS content) */ .import-table tr.word-row td:nth-child(1)::before { content: "Word"; font-weight: bold; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.25rem; } .import-table tr.word-row td:nth-child(2)::before { content: "Definitions"; font-weight: bold; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.25rem; } .import-table tr.word-row td:nth-child(3)::before { content: "Import"; font-weight: bold; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.25rem; } .import-table tr.word-row td:nth-child(4)::before { content: "Notes"; font-weight: bold; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.25rem; } .review-table tr.word-row td:nth-child(1)::before { content: "Word"; font-weight: bold; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.25rem; } .review-table tr.word-row td:nth-child(2)::before { content: "Definitions"; font-weight: bold; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.25rem; } .review-table tr.word-row td:nth-child(3)::before { content: "Pronunciations"; font-weight: bold; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.25rem; } .review-table tr.word-row td:nth-child(4)::before { content: "Review"; font-weight: bold; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.25rem; } .review-table tr.word-row td:nth-child(5)::before { content: "Notes"; font-weight: bold; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.25rem; } /* Style the word cell specially - larger, spans full width, subtle prominence */ .import-table .word-cell, .review-table .word-cell { grid-column: 1 / -1; font-size: 1.3rem; font-weight: 600; background: var(--color-surface-1); } /* Definitions and Notes cells span full width */ .import-table .def-chooser-cell, .import-table .notes-cell, .review-table .notes-cell { grid-column: 1 / -1; min-width: auto; } /* Center Notes label */ .import-table .notes-cell::before, .review-table .notes-cell::before { text-align: center; width: 100%; } /* Checkbox/button cells - centered and span full width */ .import-table .import-checkbox-cell, .review-table td:nth-child(4) { grid-column: 1 / -1; align-items: center; justify-content: center; text-align: center; } /* Center import checkbox */ .import-table .import-checkbox-cell input[type="checkbox"] { margin: 0; width: auto; height: auto; } /* Center review checkbox and label */ .review-table td:nth-child(4) label { margin: 0; justify-content: center; } /* Adjust badge sizing for mobile cards */ .import-table .badge, .review-table .badge { font-size: 0.75rem; padding: 0.2em 0.5em; } /* Make Definitions and Pronunciations full width in review table */ .review-table tr.word-row td:nth-child(2), .review-table tr.word-row td:nth-child(3) { grid-column: 1 / -1; } /* Center word, definitions, and pronunciations in review cards */ .review-table .word-cell { text-align: center; align-items: center; } .review-table .word-cell::before { text-align: center; } .review-table td:nth-child(2), .review-table td:nth-child(3) { text-align: center; align-items: center; } .review-table td:nth-child(2)::before, .review-table td:nth-child(3)::before { text-align: center; width: 100%; } /* Allow definitions to flow naturally */ .review-table td:nth-child(2) { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .review-table td:nth-child(2)::before { flex-basis: 100%; } /* Import controls: stack on small screens */ div#import-controls { flex-direction: column !important; gap: 0.5rem !important; align-items: flex-end !important; } div#import-controls label { font-size: 0.9rem; flex-direction: row-reverse; gap: 0.25rem !important; white-space: nowrap; } /* Schedule new words: stack label and buttons vertically on mobile */ #schedule-new-words-group { flex-direction: column !important; gap: 0.75rem !important; } #schedule-new-words-group>label { text-align: center; margin: 0; } #schedule-new-words-group>div { justify-content: center; } /* Review network status: hide text on mobile, show only icon */ .review-network-status-text { display: none; } /* Character edit mode: stack vertically on mobile */ .char-edit-mode { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; } .char-edit-inputs { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; width: 100%; } .char-edit-inputs .char-input { width: auto; max-width: 100%; } .char-edit-inputs .char-sep { display: none; } .char-edit-buttons { display: flex; gap: 0.75rem; justify-content: center; width: 100%; } } /* Very-narrow phones */ @media (max-width: 420px) { body { padding: 0; margin: 0; } header { padding: var(--space-2) 0 !important; } main { padding: var(--space-2); } /* Further compress header on very small screens */ .header-inner { gap: var(--space-2); padding: var(--space-1) var(--space-3); } .header-left { gap: var(--space-2); } .header-center { gap: var(--space-2); } .header-right { gap: var(--space-2); } .icon-btn { font-size: 1.1rem; } .site-logo { margin-left: -1rem; margin-right: -0.375rem; } .account-menu { margin-left: -0.375rem; } /* Condense provider chip to first letter */ .voice-provider-chip { font-size: 0; padding: 0.2rem 0.3rem; min-width: 1.1rem; text-align: center; } .voice-provider-chip::after { content: attr(data-short); font-size: 0.72rem; line-height: 1; } } #pronunciation-chooser-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 2001; display: flex; align-items: center; justify-content: center; } #pronunciation-chooser-overlay.hidden { display: none; } #pronunciation-chooser { background-color: var(--color-surface-0); padding: 20px; border-radius: 5px; max-width: 90%; width: 500px; position: relative; } #pronunciation-chooser-text { display: flex; flex-wrap: wrap; margin-bottom: 10px; } .pronunciation-segment { margin-right: 10px; margin-bottom: 10px; position: relative; display: flex; align-items: center; gap: 5px; } .pronunciation-segment span { cursor: pointer; padding: 5px; border: 1px solid var(--color-border); border-radius: 3px; } #pronunciation-chooser-inputs input { width: auto; min-width: 2.25em; margin-top: 5px; padding: 2px 6px; text-align: center; box-sizing: content-box; /* so size attribute reflects character width */ } .syllable-inputs { display: flex; gap: 5px; } #pronunciation-chooser-keyboard.inactive { pointer-events: none; opacity: 0.5; } #pronunciation-chooser-selection-display { height: 2em; font-size: 1.5em; text-align: center; margin-bottom: 10px; position: relative; } #pronunciation-chooser-selection-display::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid var(--color-border); } #pronunciation-chooser-inputs input.active { border-color: var(--color-accent); box-shadow: var(--ring); } #pronunciation-chooser-keyboard-container { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; } .keyboard-row { display: flex; justify-content: center; gap: 5px; width: 100%; box-sizing: border-box; } #pronunciation-chooser-keyboard button { margin: 0; padding: 5px; font-size: 1.2em; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); background-color: var(--color-surface-2); } #pronunciation-chooser-keyboard button:disabled { opacity: 0.5; cursor: not-allowed; } #pronunciation-chooser-buttons { text-align: center; margin-top: 20px; } .pronunciation-menu { position: absolute; top: 100%; left: 0; background-color: var(--color-surface-0); border: 1px solid var(--color-border); border-radius: 3px; z-index: 1001; max-height: 200px; overflow-y: auto; } .pronunciation-menu-item { padding: 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .pronunciation-menu-item:hover { background-color: var(--color-surface-2); } .pronunciation-menu-item .pronunciation { font-weight: bold; margin-right: 10px; } .definition-badge { background-color: var(--color-surface-2); padding: 2px 5px; border-radius: 3px; font-size: 0.8em; } #pronunciation-chooser-keyboard .button-double-width { width: 80px; } .keyboard-blank-key { width: 40px; height: 40px; margin: 0; } @media (max-width: 600px) { #pronunciation-chooser { width: 100%; height: 95%; max-width: 100%; padding: 1rem; border-radius: 0; box-sizing: border-box; } #pronunciation-chooser-keyboard { width: 100%; } #pronunciation-chooser-keyboard .pronunciation-chooser-cancel-btn { font-size: 0.9rem; padding: 0 2px; /* Reduce padding to fit text */ } #pronunciation-chooser-buttons button { width: 100%; } } .definition-chooser-container { width: 100%; } .definition-cards-list { display: flex; flex-direction: column; gap: 0.5rem; } .def-card { position: relative; border: 1px solid var(--color-border); border-radius: 6px; padding: 8px; cursor: pointer; background: var(--card-select-bg); box-shadow: var(--shadow-1); user-select: none; transition: border-color 0.2s, background-color 0.2s; } .def-card:hover { border-color: color-mix(in oklab, var(--color-border) 50%, var(--color-text) 50%); } .def-card.selected { border-color: var(--color-accent); background: var(--card-select-bg-selected); } .def-card.dragging { opacity: 0.5; cursor: move; } .def-card.dragging::after { content: ''; position: absolute; inset: 0; border: 2px dashed var(--color-accent); border-radius: 6px; pointer-events: none; } .pron-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 500; font-size: 0.95em; gap: 6px; } .pron-checkbox { flex-shrink: 0; cursor: pointer; width: 14px; height: 14px; accent-color: var(--color-accent); } .mainland-pron { flex: 1; } .taiwan-pron { flex: 1; text-align: right; } .center-characters { flex-shrink: 0; text-align: center; font-size: 0.9em; color: var(--color-text-secondary); min-width: 50px; } .source-badge { position: absolute; bottom: 4px; right: 4px; font-size: 0.65em; padding: 2px 5px; border-radius: 3px; font-weight: 600; letter-spacing: 0.5px; text-transform: lowercase; } .source-badge.source-ce { background: var(--color-surface-3); color: var(--color-text-secondary); } .source-badge.source-moe { background: color-mix(in oklab, var(--color-accent) 80%, var(--color-surface)); color: var(--color-text); } /* Lists page styles */ #lists-page { max-width: 900px; margin: 0 auto; padding: 0 1rem; } /* Loading state */ #lists-loading { justify-content: center; align-items: center; min-height: 200px; } /* List cards in overview */ #lists-overview { display: flex; flex-direction: column; gap: 2rem; } /* Groups of wordlists */ .wordlist-group { display: flex; flex-direction: column; gap: 0.5rem; } /* Group toggle button */ .group-toggle { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--color-surface-1); border: none; border-radius: var(--radius-md); font-size: 1rem; font-weight: 600; cursor: pointer; color: var(--color-text); transition: background-color 0.2s; } .group-toggle:hover { background: var(--color-surface-2); } .group-toggle-icon { display: inline-block; transition: transform 0.2s; } .group-toggle.collapsed .group-toggle-icon { transform: rotate(-90deg); } /* List items within a group */ .group-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-left: 1rem; } .group-lists.collapsed { display: none; } .list-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1rem; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; } .list-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .list-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; } .list-card-title { margin: 0; font-size: 1.1rem; font-weight: 600; } /* Detail view table */ #lists-detail-table-wrapper { overflow-x: auto; margin: 0 -1rem; padding: 0 1rem; } #lists-detail-table { width: 100%; border-collapse: collapse; } #lists-detail-table th, #lists-detail-table td { padding: 0.75rem 0.5rem; text-align: left; border-bottom: 1px solid var(--color-border); } #lists-detail-table th { font-weight: 600; background: var(--color-surface-secondary); position: sticky; top: 0; } #lists-detail-table tbody tr:hover { background: var(--color-surface-secondary); } .word-cell { font-size: 1.1rem; white-space: nowrap; } .pinyin-cell { color: var(--color-text-muted); white-space: nowrap; } .def-cell { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status-cell { white-space: nowrap; } .status-learned { color: var(--color-success); font-size: 0.85rem; } .status-new { color: var(--color-primary); font-size: 0.85rem; font-weight: 500; } .status-queued { color: var(--color-warning); font-size: 0.85rem; font-weight: 500; } .row-learned { opacity: 0.7; } /* Progress bar */ .progress-bar-container { height: 8px; background: var(--color-surface-secondary); border-radius: 4px; overflow: hidden; } .progress-bar { height: 100%; background: var(--color-primary); transition: width 0.3s ease; border-radius: 4px; }