/* ============================================================ AI tvorba kurzů — sdílený základ nad tokens.css Pořadí stylů: tokens.css → app.css → styl stránky. Alias vrstva mapuje názvy proměnných používané stránkovými styly (převzatými z mockupů) na závazné tokeny; barvy se nikde jinde nedefinují natvrdo. ============================================================ */ /* Ikonfont (BRIEF: emoji ikony nahradit ikonfontem s aria-label) — subset Material Symbols jen s používanými ikonami; helper ikona(). Font se hostuje LOKÁLNĚ (fonts.css) — na Google se neposílá nic (GDPR). Tento seznam je zdroj pravdy o obsahu subsetu: hlídá ho VzhledTest a podle něj se generuje public/assets/fonts/material-symbols-subset.woff2. Přidáváš ikonu? Doplň ji sem A stáhni soubor znovu — jinak se vykreslí holý text. icon_names=account_circle,celebration,check,close,content_copy,contrast,dashboard,delete,domain,download,edit,edit_note,feedback,flag,group,history,local_offer,lock,menu,menu_book,monitoring,more_vert,push_pin,receipt_long,search,sell,star,thumb_down,thumb_up,visibility */ :root{ /* --- Aliasy na tokeny --- */ --primary:var(--brand-primary); --primary-dark:var(--brand-primary-dark); --primary-soft:var(--brand-primary-soft); --accent:var(--brand-accent); --accent-dark:var(--brand-accent-dark); --accent-ink:var(--brand-accent-ink); --accent-hover:var(--brand-accent-hover); --muted:var(--ink-muted); --display:var(--font-display); --body:var(--font-body); --mono:var(--font-mono); /* --- Odvozené odstíny z mockupů (mimo základní paletu tokenů) --- */ --primary-mid:#818CF8; /* světlejší indigo — hover rámečků, sekundární akcenty */ --ok-soft:#E6F6EE; /* podklad zelených pilulek */ --warn-soft:#FEF3C7; /* podklad jantarových pilulek */ --err:#B91C1C; /* text chybových stavů */ --err-soft:#FDECEA; /* podklad chybových stavů */ --err-line:#F5C6CB; /* rámečky chybových/danger prvků (mockup ucet) */ /* --- Layout (jeden zdroj pravdy pro horní lištu a šířku obsahu) --- */ --topbar-h:72px; /* výška horní lišty na všech stránkách (čtečka je výjimka: 52px) */ --page-w:1180px; /* šířka horní lišty a širokého obsahu — dle knihovny promptů */ } *{box-sizing:border-box;margin:0;padding:0} /* Co JS schová atributem `hidden`, musí opravdu zmizet. UA styl má `[hidden]{display:none}` se specificitou 0-1-0 — stejnou jako jakékoli `.trida{display:…}`, které se navíc načítá později, takže `hidden` tiše přebije a prvek zůstane vidět, ačkoli `element.hidden === true`. Do té doby se to látalo po jednotlivých třídách (`.fbpop[hidden]`, `.field-err[hidden]`, `.sp-overlay[hidden]`…), což je hra na honěnou — past sklapla pokaždé, když někdo přidal `display` k další skrývané třídě. Naposledy na /ucet/vraceni, kde se pak ukazovalo pole pro číslo účtu i bez zvolení převodu. `!important` je tu nutné: bez něj má pravidlo tutéž specificitu jako ta třída a prohraje pořadím. Hlídá VzhledTest::testPrvkySkryvaneAtributemHiddenSeOpravduSkryji. */ [hidden]{display:none !important} /* Ikony z ikonfontu — ligatura (název ikony) uvnitř spanu, viz helper ikona() */ .ikona{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;font-size:1.25em;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;vertical-align:-0.22em} /* Jednotné logo (badge + wordmark) dle mockupů — obsah dodává templates/_logo.php */ .logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)} .logo b{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink)} /* Jednotná patička napříč webem — jediný zdroj vzhledu (obsah dodává _paticka). Class .foot-page přebíjí starší per-page pravidla pro element footer specificitou. */ .foot-page{border-top:1px solid var(--line);margin-top:56px;padding:30px 24px 40px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.6} .foot-page a{color:var(--muted)} /* Řádek tlačítek — sdílená konvence napříč stránkami (chyba/dekujeme/ucet mají vlastní variantu ve stylu stránky). Tlačítka vedle sebe v řádkovém toku se na mobilu po zalomení slepí (řádkový box je nižší než pilulka), proto flex s gapem a wrapem. */ .btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center} /* Kanonická tlačítka. Dřív žila jen ve stylech jednotlivých stránek, takže plochy, které si jen půjčily `stranka.css` (vrácení peněz, smazání účtu, odstoupení), vykreslily `.btn` jako holý prvek prohlížeče — na stránce, kde se žádá o peníze nebo maže účet, to vypadá jako rozbitý web. Hlídá VzhledTest. Stránkové styly (landing/admin/pokladna/ucet…) se načítají POZDĚJI a smí to přebít — proto tu jsou hodnoty a ne !important. `.btn-danger` je VYPLNĚNÉ, ne jemný obrys: u smazání účtu musí být stejně výrazné jako nabídka alternativy, jinak by web ztěžoval výkon práva na výmaz (čl. 12 GDPR). */ /* `line-height` je tu VÝSLOVNĚ a metriky obou variant se shodují — jinak vyjde `