/* ============================================================================= Temi chiaro / scuro. Il tema attivo è l'attributo (default: dark), impostato da src/viewer/theme.js (pulsante nella barra del titolo) e dall'editor. Tutti i CSS (shell, card, plugin, editor) usano questi token: per un nuovo stile usare var(--…) invece di colori fissi. ============================================================================= */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #0b1220; /* sfondo pagina */ --surface: rgba(15, 23, 42, .7); /* card */ --surface-solid: #0f172a; /* barre, menu */ --surface-2: #1e293b; /* elementi in rilievo, input */ --surface-raised: rgba(15, 23, 42, .97); /* popover, tooltip, dropdown */ --text: #e2e8f0; --text-2: #cbd5e1; --text-muted: #94a3b8; --text-faint: #64748b; --border: rgba(148, 163, 184, .15); --border-strong: rgba(148, 163, 184, .3); --hover: rgba(148, 163, 184, .12); --accent: #3b82f6; --accent-text: #93c5fd; --shadow: 0 8px 24px rgba(0, 0, 0, .45); --footer-bg: #080e1a; --backdrop: rgba(2, 6, 23, .55); } :root[data-theme="light"] { color-scheme: light; --bg: #f1f5f9; --surface: #ffffff; --surface-solid: #ffffff; --surface-2: #e2e8f0; --surface-raised: rgba(255, 255, 255, .98); --text: #0f172a; --text-2: #1e293b; --text-muted: #475569; --text-faint: #64748b; --border: rgba(100, 116, 139, .22); --border-strong: rgba(100, 116, 139, .4); --hover: rgba(100, 116, 139, .12); --accent: #2563eb; --accent-text: #1d4ed8; --shadow: 0 8px 24px rgba(15, 23, 42, .15); --footer-bg: #e2e8f0; --backdrop: rgba(15, 23, 42, .35); } /* Transizione morbida al cambio tema (disattivata con prefers-reduced-motion) */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color .25s ease, color .25s ease, border-color .25s ease, fill .25s ease, stroke .25s ease !important; } @media (prefers-reduced-motion: reduce) { html.theme-transition, html.theme-transition * { transition: none !important; } } /* ---------------------- Pulsante a due stati del tema ----------------------- */ /* Markup: src/viewer/theme.js → themeToggleHtml(). aria-checked="true" = chiaro. */ .theme-toggle { padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 999px; } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle-track { position: relative; display: flex; align-items: center; justify-content: space-between; width: 58px; height: 28px; padding: 0 7px; border-radius: 999px; background: #1e293b; border: 1px solid rgba(148, 163, 184, .35); transition: background-color .3s ease, border-color .3s ease; } .theme-toggle[aria-checked="true"] .theme-toggle-track { background: #bfdbfe; border-color: #93c5fd; } .theme-toggle-icon { font-size: 13px; line-height: 1; z-index: 1; transition: opacity .3s ease; } .theme-toggle-icon.is-moon { color: #fde68a; } .theme-toggle-icon.is-sun { color: #f59e0b; } .theme-toggle-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #e2e8f0; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); transition: transform .3s cubic-bezier(.4, 0, .2, 1), background-color .3s ease; } /* scuro: il cursore copre il sole (a destra), resta visibile la luna; chiaro: il contrario */ .theme-toggle[aria-checked="false"] .theme-toggle-knob { transform: translateX(30px); } .theme-toggle[aria-checked="true"] .theme-toggle-knob { transform: translateX(0); background: #ffffff; } /* durante il cambio tema la regola globale sopra non deve bloccare lo scorrimento del cursore */ html.theme-transition .theme-toggle-knob { transition: transform .3s cubic-bezier(.4, 0, .2, 1), background-color .3s ease !important; } @media (prefers-reduced-motion: reduce) { .theme-toggle-knob, .theme-toggle-track, html.theme-transition .theme-toggle-knob { transition: none !important; } }