/* * user-appearance.css — applies user pref overrides via attrs. * Loaded globally after design-tokens.css + ui-components.css. * * Scope: only changes design tokens — never component shapes. * Dark mode: overrides surface/text/border tokens. Brand teal/emerald/cyan/amber unchanged. */ /* ─── Font size scaling ──────────────────────────────────────────── */ html[data-font-size="small"] { font-size: 14.5px; } html[data-font-size="default"] { font-size: 16px; } html[data-font-size="large"] { font-size: 17.5px; } /* ─── Reduce animation ───────────────────────────────────────────── */ html[data-reduce-anim="1"] *, html[data-reduce-anim="1"] *::before, html[data-reduce-anim="1"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* ─── Light theme (explicit) ─────────────────────────────────────── */ /* Force browser UI (scrollbars, datepicker, form controls) to light variants. */ html[data-user-theme="light"] { color-scheme: light; } /* ─── Dark theme ─────────────────────────────────────────────────── */ /* Explicit dark — always applies regardless of OS */ html[data-user-theme="dark"] { --color-bg: #0f172a; --color-surface: #1e293b; --color-soft: #273449; --color-border: #334155; --color-line: #1e293b; --color-ink: #f8fafc; --color-text: #e2e8f0; --color-muted: #94a3b8; --color-mute2: #64748b; --color-primary-soft: rgba(20, 184, 166, 0.16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); color-scheme: dark; } /* System — follows OS pref */ @media (prefers-color-scheme: dark) { html[data-user-theme="system"] { --color-bg: #0f172a; --color-surface: #1e293b; --color-soft: #273449; --color-border: #334155; --color-line: #1e293b; --color-ink: #f8fafc; --color-text: #e2e8f0; --color-muted: #94a3b8; --color-mute2: #64748b; --color-primary-soft: rgba(20, 184, 166, 0.16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); color-scheme: dark; } } /* Body background follows token */ html[data-user-theme="dark"] body, html[data-user-theme="system"] body { background: var(--color-bg); color: var(--color-text); } /* ─── Accent color picker — ONLY swaps decorative accents, NOT primary CTA ─── Bug cũ: ghi đè --color-primary làm toàn bộ button Save/Submit chuyển sang amber/cyan → mất brand identity teal. Nay scope chỉ đổi --user-accent (token riêng cho highlight decoration). Primary CTA luôn teal #14B8A6 theo brand. */ html, html[data-accent="teal"] { --user-accent: var(--color-primary); } html[data-accent="emerald"] { --user-accent: #10b981; } html[data-accent="cyan"] { --user-accent: #06b6d4; } html[data-accent="amber"] { --user-accent: #F59E0B; } /* ─── Highlight color (user pref: vocab/reading text highlights) ───── */ html[data-highlight="cyan"] { --color-highlight: #06B6D4; --color-highlight-soft: rgba(6,182,212,0.18); } html[data-highlight="amber"] { --color-highlight: #F59E0B; --color-highlight-soft: rgba(245,158,11,0.20); } html[data-highlight="emerald"] { --color-highlight: #10B981; --color-highlight-soft: rgba(16,185,129,0.18); } mark, .text-highlight, .vb-highlight, .rdg-highlight, .vocab-highlight { background: var(--color-highlight-soft, rgba(6,182,212,0.18)); color: var(--color-highlight, #06B6D4); padding: 1px 4px; border-radius: 4px; font-weight: var(--fw-semibold); } /* ─── Compact sidebar (when user pref enabled) ───────────────────────── */ @media (min-width: 1024px) { html[data-compact-sb="1"] .sb { width: var(--sb-width-mini) !important; } html[data-compact-sb="1"] body.has-sidebar { padding-left: var(--sb-width-mini) !important; } html[data-compact-sb="1"] .sb__label, html[data-compact-sb="1"] .sb__plan { opacity: 0 !important; pointer-events: none !important; } } /* ─── Reading layout (compact = tighter line-height on long-form text) ─ */ html[data-user-theme] .protected-content p, html[data-user-theme] .reading-passage, html[data-user-theme] .passage-body, html[data-user-theme] article { line-height: 1.7; } html[data-reading-layout="compact"] .reading-passage, html[data-reading-layout="compact"] .passage-body, html[data-reading-layout="compact"] article { line-height: 1.5; font-size: 0.95em; } /* IELTS Reading passage font size (per-module pref) */ .rp-page[data-rdg-font="small"] .passage-body, .rp-page[data-rdg-font="small"] .rdg-passage, .rp-page[data-rdg-font="small"] details p { font-size: 0.92em; } .rp-page[data-rdg-font="large"] .passage-body, .rp-page[data-rdg-font="large"] .rdg-passage, .rp-page[data-rdg-font="large"] details p { font-size: 1.1em; line-height: 1.8; } /* Reading focus mode — dim chrome, center content */ .rp-page.is-focus .navbar, .rp-page.is-focus .sb, .rp-page.is-focus .footer, body:has(.rp-page.is-focus) .navbar, body:has(.rp-page.is-focus) .sb { filter: opacity(0.25); transition: filter .25s ease; } body:has(.rp-page.is-focus) .navbar:hover, body:has(.rp-page.is-focus) .sb:hover { filter: opacity(1); }