/* ========================================================================== theme.css — Globální barevné téma a základní styly pro RIO Platform ========================================================================== Podporuje tři módy: - Dark theme (výchozí) — tmavé pozadí, světlý text - Light theme [data-theme=light] — světlé pozadí, tmavý text - Modern mode [data-mode=modern] — alternativní font (Play) Accent barva (#00d4aa / #008f72) je konzistentní přes oba motivy. Všechny průhledné varianty jsou definovány jako CSS proměnné (--a08 atd.) pro snadné použití bez opakování rgba() volání v komponentách. ========================================================================== */ /* ========================================================================== Base styles — box model reset ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ========================================================================== Dark theme (default) Definice CSS proměnných pro tmavý motiv — platí pro celou aplikaci, pokud není přepsáno atributem [data-theme=light]. ========================================================================== */ :root { /* Základní barvy pozadí a textu */ --bg: #0d0f12; --fg: #e8e6e3; --fg-h: #ffffff; /* Zvýrazněný text (nadpisy, aktivní prvky) */ /* Průhledné vrstvy bílé — pro borders, overlays, subtextů */ --a70: rgba(255, 255, 255, .7); --a60: rgba(255, 255, 255, .6); --a50: rgba(255, 255, 255, .5); --a40: rgba(255, 255, 255, .4); --a35: rgba(255, 255, 255, .35); --a30: rgba(255, 255, 255, .3); --a25: rgba(255, 255, 255, .25); --a20: rgba(255, 255, 255, .2); --a15: rgba(255, 255, 255, .15); --a10: rgba(255, 255, 255, .1); --a08: rgba(255, 255, 255, .08); --a06: rgba(255, 255, 255, .06); --a05: rgba(255, 255, 255, .05); --a04: rgba(255, 255, 255, .04); --a03: rgba(255, 255, 255, .03); /* Accent barva (zeleno-tyrkysová) a její odvozené varianty */ --acc: #00d4aa; --acc-fg: #0d0f12; /* Text na accent pozadí */ --acc-bg: rgba(0, 212, 170, .08); /* Jemné accent pozadí */ --acc-bd: rgba(0, 212, 170, .2); /* Accent border */ --acc-hl: rgba(0, 212, 170, .15); /* Accent highlight (hover) */ /* Barva pozadí pro SVG grafiku */ --svgbg: #0d0f12; } /* ========================================================================== Light theme Přepsání proměnných pro světlý motiv. Průhledné vrstvy používají černou místo bílé. Accent barva je tmavší pro dostatečný kontrast na světlém pozadí. ========================================================================== */ [data-theme=light] { /* Základní barvy */ --bg: #f8f7f5; --fg: #1a1a1a; --fg-h: #0d0f12; /* Průhledné vrstvy černé */ --a70: rgba(0, 0, 0, .65); --a60: rgba(0, 0, 0, .55); --a50: rgba(0, 0, 0, .5); --a40: rgba(0, 0, 0, .4); --a35: rgba(0, 0, 0, .35); --a30: rgba(0, 0, 0, .35); /* Záměrně stejné jako --a35 pro vyrovnání kontrastu */ --a25: rgba(0, 0, 0, .25); --a20: rgba(0, 0, 0, .18); --a15: rgba(0, 0, 0, .15); --a10: rgba(0, 0, 0, .12); --a08: rgba(0, 0, 0, .1); --a06: rgba(0, 0, 0, .09); --a05: rgba(0, 0, 0, .06); --a04: rgba(0, 0, 0, .05); --a03: rgba(0, 0, 0, .04); /* Tmavší accent pro dostatečný kontrast na světlém pozadí */ --acc: #008f72; --acc-fg: #ffffff; --acc-bg: rgba(0, 143, 114, .08); --acc-bd: rgba(0, 143, 114, .2); --acc-hl: rgba(0, 143, 114, .12); --svgbg: #f8f7f5; } /* ========================================================================== Modern mode Alternativní typografie — font Play (Google Fonts, načítán v HTML). Aktivuje se atributem data-mode="modern" na nebo . ========================================================================== */ [data-mode=modern] { --ff: 'Play', sans-serif; } /* ========================================================================== Body — základní typografie a přechody ========================================================================== */ body { background: var(--bg); color: var(--fg); font-family: var(--ff); min-height: 100vh; /* Plynulý přechod při přepínání motivu */ transition: background .25s, color .25s; } /* ========================================================================== Theme bar — plovoucí přepínač motivu a módu (vpravo dole) ========================================================================== */ #thBar { position: fixed; bottom: 16px; right: 16px; z-index: 200; display: flex; gap: 6px; } #thBar button { background: var(--a08); border: 1px solid var(--a10); border-radius: 8px; color: var(--a50); padding: 7px 11px; font-size: 12px; cursor: pointer; font-family: inherit; transition: all .2s; } #thBar button:hover { color: var(--fg); border-color: var(--a25); }