/* jbTheme — sdílené barevné tokeny + světlé schéma. :root níže = kanonický TMAVÝ základ (dřív copy-paste v :root každé appky; refactor vrstva 4a ho stáhl sem). Stránky si dál smí cokoli přepsat ve svém inline :root (jde později ve zdroji → vyhrává remízu) — typicky per-app akcenty (--accent-1 apod.) nebo odlišný --serif (kompendium/app). Světlé schéma se aktivuje na a přepisuje tytéž proměnné. Teplá „pergamenová" paleta, ať ladí s fantasy/serif vzhledem. */ :root { /* color-scheme řekne prohlížeči, že web JE tmavý → nativní scrollbary, checkboxy a dropdowny kreslí tmavě (jinak svítily bílé scrollbary v každém přetékajícím kontejneru). Light režim to níž přepíše. */ color-scheme: dark; --bg: #14121a; --bg-soft: #191622; --card: #1e1a28; --card-border: #362f45; --text: #e9e4d8; --text-dim: #aaa4b6; /* sekundarni text: o ~12 % svetlejsi (placeholdery a helper texty byly na hrane citelnosti) */ --serif: "Eagle Lake", "Eagle Lake Fallback", "Palatino Linotype", Palatino, Georgia, serif; --tm-r: 6px; /* jeden polomer tlacitek, poli a ploch v tool appkach (DESIGN.md: Klidna dilna) */ } /* tmavé scrollbary (Firefox) — Chromium je řeší přes color-scheme výš; light blok níž má vyšší specificitu, takže si barvy přepíše */ * { scrollbar-color: #453c5c transparent; } :root[data-theme="light"] { color-scheme: light; /* plochy */ --bg: #ece3d2; --bg-soft: #e3d8c3; --bg2: #e3d8c3; --card: #f8f3e8; --card2: #efe6d5; --panel: #f8f3e8; --panel2: #efe6d5; /* okraje */ --card-border: #d6c9af; --border: #d6c9af; --border-soft: #e1d6c0; /* text */ --text: #2b2620; --text-dim: #6d6350; --muted: #6d6350; /* zlaté akcenty (ztmavené pro kontrast na světlém) */ --accent-2: #9a7526; --accent: #9a7526; --accent2: #b08e3e; --accent-1-light: #b08e3e; --accent-dim: #a98f5c; --accent-1-dim: #a98f5c; /* nepřátelská / varovná červená */ --enemy: #b5454c; --red: #b5454c; --accent-3: #b5454c; } /* jemný přechod při přepnutí (ne při načtení — data-theme se nastaví před vykreslením) */ :root[data-theme] body { transition: background-color .28s ease, color .28s ease; } /* světlé scrollbary v light režimu (kde appka stylovala tmavé) */ :root[data-theme="light"] * { scrollbar-color: #c3b697 transparent; } :root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c9bc9d; } /* ═══ light overrides pro komponenty s natvrdo tmavými barvami ═══ */ /* účet: chip + přihlašovací panel (má vlastní tmavou paletu account systému) */ :root[data-theme="light"] .jb-chip { background: var(--card); border-color: var(--card-border); color: var(--text); } :root[data-theme="light"] .jb-chip:hover { border-color: var(--accent-2); } :root[data-theme="light"] .jb-panel { background: var(--card); border-color: var(--card-border); color: var(--text); } :root[data-theme="light"] .jb-btn { background: var(--bg-soft); border-color: var(--card-border); color: var(--text); } :root[data-theme="light"] .jb-input { background: var(--bg); border-color: var(--card-border); color: var(--text); } :root[data-theme="light"] .jb-overlay { background: rgba(60, 45, 20, .35); } :root[data-theme="light"] .jb-dim, :root[data-theme="light"] .jb-legal { color: var(--text-dim); } /* nápověda (?) — tlačítko, panel, hlavička */ :root[data-theme="light"] .jbhelp-btn { background: var(--card); border-color: var(--card-border); color: var(--accent-2); } :root[data-theme="light"] .jbhelp-btn:hover { border-color: var(--accent-2); color: var(--accent-1-dim); } :root[data-theme="light"] .jbhelp-panel { background: var(--card); border-color: var(--card-border); color: var(--text); } :root[data-theme="light"] .jbhelp-head { background: linear-gradient(180deg, var(--bg-soft), var(--card)); } :root[data-theme="light"] .jbhelp-body { color: var(--text); } /* tučný text a v těle nápovědy: help.js je má natvrdo ve tmavé paletě (#e9e4d8 / #14121a) — ve světlém tématu byl tučný text na pergamenu 1.15:1 (prakticky neviditelný, vč. slovníku stavů F19); tokeny to srovnají */ :root[data-theme="light"] .jbhelp-body b { color: var(--text); } :root[data-theme="light"] .jbhelp-body kbd { background: var(--bg-soft); border-color: var(--card-border); color: var(--text); } :root[data-theme="light"] .jbhelp-overlay { background: rgba(60, 45, 20, .4); } /* horní/spodní lišty aplikací (gradient / glass) */ :root[data-theme="light"] .topbar { background: linear-gradient(180deg, var(--bg-soft), var(--card)); } /* kostky: tmavý „stůl" a štítky */ :root[data-theme="light"] .table-wrap { background: radial-gradient(120% 90% at 50% 10%, #f4eede 0%, #e6dcc7 70%); } :root[data-theme="light"] .die-label { background: var(--card); color: var(--text); } /* primární tlačítka (loot, timer v dashboardu apod.) — v light čistá teplá zlatá místo zlato-zelené směsi, co na světlém pozadí vypadala kalně */ :root[data-theme="light"] button.primary { background: var(--accent-2); color: #1a150e; } /* plochá, bez gradientu (Klidná dílna) */ :root[data-theme="light"] button.primary:hover { filter: brightness(1.05); }