/* ============================================================ LangBooster — Editorial téma Patkový nadpis (Fraunces) + čistý sans (Inter), teplá paleta. ============================================================ */ /* Jemný „swap" při změně obsahu karty (nové slovo) — přes @key přemount. Nenápadné, jen signalizace že se karta změnila. */ @keyframes lb-card-swap { from { opacity: 0; transform: translateY(8px) scale(.992); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { @keyframes lb-card-swap { from { opacity: 0; } to { opacity: 1; } } } /* ============================================================ Design tokeny — LIGHT default + [data-theme="dark"] override. Sémantické tokeny + legacy aliasy (var()), aby se theme propsal všude. ============================================================ */ :root { /* Brand — jedna identitní barva (Boost Orange) */ --lb-accent: #F26B21; --lb-accent-hover: #FF7E36; --lb-accent-strong: #D95714; /* pressed */ --lb-cta-gradient: linear-gradient(135deg, #F26B21 0%, #FF8A3D 100%); /* Rekni prohlizeci, ktery motiv plati, aby se s nim srovnaly i prvky, ktere kresli SAM: vstupni pole, posuvniky, zaskrtavatka. Bez toho zustaly v tmavem motivu bile - prihlasovaci pole byla bila dira v tmave karte. */ color-scheme: light; /* Povrchy (LIGHT) — navzorkováno z mockup-light.png */ --lb-bg: #FCFAF6; --lb-surface: #FFFFFF; --lb-surface-elevated: #FFFFFF; --lb-sidebar: #FAF4EE; /* Text */ --lb-text: #2A2623; --lb-text-secondary: #6B625C; --lb-text-muted: #9E958F; --lb-text-disabled: #C9C2BC; /* Okraje */ --lb-border: #ECE4DC; --lb-border-strong: #DCD2C8; /* Stavy */ --lb-success: #38A169; --lb-warning: #F6AD55; --lb-error: #E53E3E; --lb-info: #3182CE; /* Stíny */ /* Vyska prvku nad strankou. Driv si kazdy soubor psal stin rucne: 84 stinu v 53 hodnotach, z toho devetkrat tentyz a petkrat skoro tentyz, jen jinak zaokrouhleny (rgba(28,25,23,.04) vs rgba(27,24,27,.03)). Brana je poustela, protoze rgba() je povolena. Ctyri stupne staci na vsechno, co appka mela. */ --lb-shadow-xs: 0 1px 2px rgba(28,25,23,.04), 0 2px 6px rgba(28,25,23,.05); --lb-shadow-sm: 0 1px 2px rgba(28,25,23,.04), 0 8px 24px rgba(28,25,23,.06); --lb-shadow-md: 0 2px 6px rgba(28,25,23,.05), 0 14px 32px rgba(28,25,23,.10); /* Ztmaveni pod dialogem a tmavy stitek (hlaseni chyb). Vlastni role, ne --lb-ink: ta je v tmavem motivu svetla, takze stranku pod dialogem misto ztmaveni zesvetlila. */ --lb-scrim: rgba(15, 17, 20, .45); --lb-toast-bg: #1F2623; --lb-toast-text: #FFFFFF; --lb-shadow: 0 8px 32px rgba(0,0,0,.08); --lb-shadow-lg: 0 14px 44px rgba(0,0,0,.12); /* Výška spodní navigační lišty (bez safe-area). Nad ní se drží pevné prvky obrazovky (překlad slova ve čtení) a o ni se odsazuje obsah, aby pod lištu šlo dorolovat. */ --lb-botnav-h: 4.2rem; /* Zare pod akcentnim tlacitkem - neni to vyska, je to barva prvku pod nim, proto vlastni role a v tmavem tematu se nemeni. */ --lb-shadow-cta: 0 6px 16px color-mix(in srgb, var(--lb-accent) 32%, transparent); --lb-shadow-cta-hover: 0 9px 22px color-mix(in srgb, var(--lb-accent) 42%, transparent); --lb-shadow-practice: 0 5px 14px color-mix(in srgb, var(--lb-yellow) 30%, transparent); /* Prstenec stavu (fokus, vybrano, spravne/spatne). Take ne vyska - proto se nesmi michat se stupni vyse; kdyz prvek potrebuje oboji, pisou se za sebou. */ --lb-ring-accent: 0 0 0 3px color-mix(in srgb, var(--lb-accent) 16%, transparent); --lb-ring-success: 0 0 0 3px color-mix(in srgb, var(--lb-success) 28%, transparent); --lb-ring-error: 0 0 0 3px color-mix(in srgb, var(--lb-error) 26%, transparent); --lb-shadow-hairline: 0 0 0 1px rgba(28,25,23,.10); /* Tvar */ /* ---- RADIUSY ------------------------------------------------------------ Aplikace jich mela 23 (2,3,4,6,7,8,9,10,11,12,14,16,18,20px, 999px, 50%), takze tentyz typ karty mel v kazde sekci jiny rob. Skala je pet stupnu; 50% (kolecko) a 999px (pilulka) jsou tvary, ne stupne. */ --lb-radius-2xs: 4px; --lb-radius-xs: 8px; --lb-radius-sm: 12px; --lb-radius: 18px; --lb-radius-lg: 24px; --lb-radius-pill: 999px; /* ---- VELIKOSTI PISMA ---------------------------------------------------- 374 deklaraci ve 57 hodnotach (a to jen proto, ze `.85rem` a `0.85rem` je totez napsane dvakrat). Tentyz prvek mel v kazde sekci jinou velikost: `.bridge-text` 1,25 rem v jedne komponente a 1,15 rem v druhe. Skala je odstupnovana podle SKUTECNYCH spicek aplikace, ne teoreticky - proto neni geometricka. Kdyz nova obrazovka potrebuje jinou velikost, vezme nejblizsi stupen; kdyz zadny nesedi, prida se stupen SEM. */ --lb-fs-2xs: .65rem; /* odznaky, horni indexy */ --lb-fs-ring: .58rem; /* procento v kolecku postupu - „100 %" se do nej musi vejit */ --lb-fs-xs: .72rem; /* popisky pod prvkem */ --lb-fs-sm: .8rem; /* druhotny text */ --lb-fs-base: .85rem; /* zakladni text rozhrani */ --lb-fs-md: .95rem; /* text v obsahu */ --lb-fs-lg: 1.05rem; /* konverzacni text, replika */ --lb-fs-xl: 1.15rem; /* nadpis sekce */ --lb-fs-2xl: 1.3rem; /* nadpis etapy */ --lb-fs-3xl: 1.4rem; /* nadpis obrazovky */ --lb-fs-4xl: 1.7rem; --lb-fs-5xl: 1.9rem; --lb-fs-6xl: 2.3rem; /* lemma na karte slovicka */ --lb-fs-hero: 2.6rem; /* titul obalky, velke ikony prazdneho stavu */ /* Spacing škála (4-8-12-16-24-32-48-64) */ --lb-sp-1: 4px; --lb-sp-2: 8px; --lb-sp-3: 12px; --lb-sp-4: 16px; --lb-sp-6: 24px; --lb-sp-8: 32px; --lb-sp-12: 48px; --lb-sp-16: 64px; /* ---- MEZERY ------------------------------------------------------------- 974 hodnot padding/margin/gap v 69 odstinech: .55 vedle .6, .85 vedle .9, 1.25 vedle 1.3. Rozdil nikdo nevidi, ale dohromady to delalo dojem, ze neco je „nalepene" a neco „rozhazene". --lb-sp-* vys je 4px mrizka pro rozvrzeni. Tahle skala je RYTMUS OBSAHU v rem a je odstupnovana podle spicek aplikace (1rem 122x, .5rem 96x, .6rem 86x), aby sjednoceni nehnulo cely layout. Novy stupen se prida SEM, cislo se do scoped CSS nepise. */ --lb-gap-0: .15rem; /* vlasova mezera (radek odznaku) */ --lb-gap-1: .25rem; --lb-gap-2: .4rem; --lb-gap-3: .5rem; --lb-gap-4: .6rem; --lb-gap-5: .8rem; --lb-gap-6: 1rem; /* zakladni rytmus */ --lb-gap-7: 1.2rem; --lb-gap-8: 1.5rem; --lb-gap-9: 2rem; --lb-gap-10: 2.5rem; --lb-gap-11: 3rem; /* Sekce → barva (vizuální identita stop) */ --lb-teal: #1E6E96; --lb-purple: #6C5CE7; --lb-sun: #FF8703; --lb-yellow: #F5B301; /* žlutá z designu: žárovka u tipů, barva cvičení */ /* Čtecí vrstva (kniha): článek, replika dialogu, fráze oblasti. Dosud byla Georgia a #33271d opsaná natvrdo ve Vyuce i v Oblastech. */ --lb-font-read: Georgia, 'Times New Roman', serif; --lb-ink-read: #33271d; /* Ctecí plocha (clanek, dialog). POZOR: --lb-paper uz existuje niz s jinym vyznamem (pozadi stranky), proto vlastni jmeno. */ /* ── Paleta: role, ne odstiny ────────────────────────────── PRAVIDLO: v aplikaci nesmi byt barva napsana natvrdo. Kdyz zadna role nesedi, zalozi se tady NOVA a zapise do docs/design-system.md. Hlida tools/check_styles.py. Hodnoty jsou vybrane z odstinu, ktery uz aplikace nejcasteji pouzivala, aby sjednoceni neprebarvilo pul aplikace. Kde se sesypalo vic odstinu do jedne role (ctyri teple sede, sest zelenych), je to zamer - prave ta zivelnost delala nejednotny dojem. */ /* text na barevne plose - a NIC JINEHO. Bila je v obou tematech, takze jako pozadi karty nebo dlazdice zustavala v tmavem tematu svetla dira: 41 deklaraci ji tak pouzivalo a napriklad karta lekce v prehledu byla bila s bilym titulkem (1,09:1). Plocha rozhrani je --lb-surface, plovouci prvek --lb-surface-elevated; oba se v tmavem bloku pretezuji. Vyjimka je kolecko prepinace (.cross-knob), ktere skutecne lezi na akcentu. */ --lb-on-accent: #FFFFFF; --lb-on-yellow: #3A2A00; /* „umim / spravne" - zelena skala */ /* -text je TEXT na jemne zelene plose, -solid je VYPLNENA zelena plocha s bilym popisem (odznak hotovo, tecka u spravne odpovedi, tlacitko Znam). Driv to byl jeden token pro oboji, coz v tmavem motivu nejde smirit: text musi zesvetlat, plocha pod bilym popisem naopak tmava zustat. -solid proto tmavou hodnotu nema - je to vivid barva znacky, jako oranzove CTA. */ --lb-success-text: #15803D; --lb-success-solid: #15803D; --lb-success-bg: #F0FDF4; --lb-success-bg-hover: #DCFCE7; --lb-success-border: #86EFAC; /* „chyba / spatne" */ --lb-error-text: #B3261E; --lb-error-bg: #FDECEB; --lb-error-border: #FCA5A5; /* napoveda / upozorneni (zluta vrstva) */ --lb-hint-bg: #FEF3C7; /* Okraj a text te same vrstvy. Pribyly kvuli shrnuti davky: vysledek se barvi podle uspesnosti a slabsi pasmo nema byt cervene jako chyba - to by z „projdi si to jeste" udelalo verdikt. */ --lb-hint-border: #FCD34D; /* informace (modra) a gramatika (fialova) v jemnych vrstvach */ --lb-info-bg: #DBEAFE; --lb-info-text: #1E3A8A; --lb-purple-bg: #EDE9FE; /* obrys fialoveho panelu (napr. pravidla na rozcestniku hotove lekce) */ --lb-purple-border: #DDD6FE; /* Hluboka fialova je konec gradientu na TLACITKU (bily popis na ni lezi), zatimco stitek fáze potrebuje TEXT na fialove plose. Dva ukoly, dva tokeny: v tmavem motivu se plocha i text prevraci, gradient ne. */ --lb-purple-deep: #5B21B6; --lb-purple-text: #5B21B6; /* „Nauč se nazpaměť" v gramatice: co se nedá odvodit pravidlem. Vlastní teplá žlutá, aby se nepletla s tipem Boostera (oranžová) ani s pravidlem (fialová). */ --lb-memo-bg: #FFF6DB; --lb-memo-border: #F2D58A; --lb-memo-text: #7A5200; --lb-memo-ico: #D99A00; /* teple plochy a linky (papirova vrstva mimo cteni: karty, poznamky) */ --lb-warm-tint: #FBF7F1; --lb-warm-tint-2: #F3ECE4; --lb-warm-border: #E0CBB3; /* akcent v jemnych vrstvach */ --lb-accent-tint: #F7E7D4; --lb-accent-border: #E7C2A8; --lb-accent-deep: #9A3412; /* gramaticka napoveda (hneda vrstva vykladu) */ --lb-hint-text: #8A5A2B; /* teply stred a hloubka: karta postupu */ --lb-warm-mid: #C0A890; --lb-warm-deep: #A0785A; /* Panel se zadanim cviceni - dva konce gradientu plus text na nem. Je to PLOCHA, ne inkoust: driv tu hluboky konec drzel --lb-ink-read a jakmile se ctecí inkoust v tmavem tematu prevratil na svetly, panel se rozsvitil pod svetlym textem. Do e77b7ea byl panel svetly (#f3f4f6) a tmave hnedy gradient se neujal - ve svetlem tematu je to ted zase svetla plocha, jen kremova misto sede, a text na ni je tmavy. */ --lb-panel: #FDF3E9; --lb-panel-2: #F8E7D6; --lb-panel-text: #2A2623; --lb-panel-label: var(--lb-accent-deep); --lb-read-paper: #FFFDF9; --lb-read-paper-2: #FDF8F1; /* Mluvci dialogu. Barva se ridi POSTAVOU, ne poradim replik: Anna je vzdycky oranzova, Tom modry - jinak se barvy prohodily z lekce na lekci podle toho, kdo v ni mluvil prvni. Vedlejsi postavy (prodavacka, kolemjdouci) maji jednu spolecnou barvu; v zadne lekci nejsou dve zaraz a jmeno je nad replikou. */ /* Anna ma vlastni hodnotu misto --lb-accent-strong, protoze se v kazdem tematu resi jinak: na papire drzi oranzova (autor ji tam chce a je to barva postavy od zacatku), v tmavem splyvala s oranzovymi prvky rozhrani a jde do ruzova. Je to jedina postava, ktera meni odstin podle tematu. */ --lb-speaker-anna: #D95714; --lb-speaker-tom: var(--lb-teal); /* Zelena, ne fialova: fialova byla od Tomovy modre jen 47 stupnu odstinu a jmena splyvala. Zelena je od Anny 86 a od Toma 94 stupnu, tedy nejdal od obou. */ --lb-speaker-side: var(--lb-green-vivid); /* Sila podbarveni repliky (bezna / prave ctena). Procento, ne barva: bublina je barva mluvciho zamichana do papiru, a na tmavem papire je potreba zamichat vic, aby bublina nesla tutez informaci jako na svetlem. */ --lb-speaker-tint: 5%; --lb-speaker-tint-strong: 14%; --lb-mod-vyuka: var(--lb-accent); /* Oblasti: tataz zelena jako dlazdice na rozcestniku - modul se pozna podle barvy, tak nesmi mit jinou barvu v menu a jinou uvnitr. Na plochy vyrazna zelena, na text tmavsi tehoz odstinu (vyrazna ma na bile kontrast 3,9 - na text nestaci). */ --lb-green-deep: #24800D; --lb-mod-oblasti: var(--lb-green-vivid); --lb-mod-oblasti-text: var(--lb-green-deep); --lb-mod-gramatika: var(--lb-purple); --lb-mod-opakovani: var(--lb-sun); /* Dashboard — výrazná zelená oblastí + barevné plochy (navzorkováno z mockup-dash1.png) */ --lb-green-vivid: #2E9510; --lb-hero-bg: #FCEFE4; --lb-progress-bg: #FEF7EF; --lb-tip-bg: #FDE9D2; /* Silnejsi stupen teze vrstvy - jen na probliknuti, kdyz na tip student doscrolluje. Stejna role jako --lb-howto-bg-silna u modre rady. */ --lb-tip-bg-silna: #FBD9B4; /* Jednorazova rada o OVLADANI appky („klik oznaci, dvojklik posune“). Zamerne jina barva nez --lb-tip-bg: vyukovy tip uci jazyk a zustava, tenhle uci appku a po odkliknuti zmizi. Kdyby mely tutez plochu, student by je nerozlisil. */ --lb-howto-bg: #E8F1FB; --lb-howto-border: #B8D4F0; --lb-howto-head: #2C5D8F; /* Silnejsi stupen teze rodiny. Pribyl kvuli probliknuti, kdyz na radu student doscrolluje: barva na pul vteriny zesili a zase se vrati. */ --lb-howto-bg-silna: #D6E7F8; --lb-howto-border-silna: #8FBCE4; /* Karaoke: lupa, ktera jede po ctenem textu. Zamerne SLABA - je to vodítko, kam se divat, ne zvyrazneni obsahu. Kdyby konkurovala oznacenemu vyrazu v Boosterovi nebo klikatelnemu slovu, prekryla by je pri kazdem cteni. Barvu bere z MISTA, kde zrovna jede: replika ma podklad v barve mluvciho, takze oranzova lupa nad modrou Tomovou replikou byla cizi teleso. `--lb-lupa-barva` si prepise kontext (viz .line ve Vyuka.razor.css) a lupa je pak vzdycky tmavsi odstin toho, nad cim stoji. Bez prepsani plati oranzova vyuky. Michani barvy dela az `.lb-lupa`, ne token: hodnota tokenu se vyhodnoti uz na :root a lokalniho prepisu by si nevsimla. V palete proto zustavaji jen SILY. */ --lb-lupa-barva: var(--lb-accent); --lb-lupa-sila: 16%; --lb-lupa-sila-okraj: 34%; /* Fonty (Inter UI; Lora→Fraunces fallback na nadpisy) */ --lb-font-body: 'Inter', system-ui, -apple-system, sans-serif; --lb-font-head: 'Lora', 'Fraunces', Georgia, serif; /* Sekce (barva stopy) - .lb-btn a spol. z ni kresli hlavni akci a hover. Uvnitr .lb-wizard ji sekce prepise; mimo nej plati oranzova vyuky, jinak by tlacitko za wizardem zustalo bez barvy a gradient by se nevykreslil. */ --lb-section: var(--lb-accent); --lb-section-gradient: var(--lb-cta-gradient); /* Legacy aliasy — stará jména tokenů dál fungují a dědí theme */ --lb-terracotta: var(--lb-accent); --lb-accent-soft: var(--lb-accent-hover); --lb-ink: var(--lb-text); --lb-muted: var(--lb-text-muted); --lb-paper: var(--lb-bg); --lb-paper-warm: var(--lb-sidebar); --lb-card: var(--lb-surface); --lb-line: var(--lb-border); --lb-green: var(--lb-success); --lb-mustard: var(--lb-sun); --lb-olive: var(--lb-success); --lb-mint: #5EEAD4; /* Bootstrap override */ --bs-primary: #F26B21; --bs-body-color: #2A2623; --bs-body-bg: #FCFAF6; --bs-link-color: #F26B21; --bs-link-hover-color: #D95714; --bs-border-color: #ECE4DC; } [data-theme="dark"] { color-scheme: dark; --lb-accent: #F26B21; --lb-accent-hover: #FF7E36; --lb-accent-strong: #FF9A57; /* na tmavém je „silnější" světlejší (glow) */ /* Povrchy (DARK) — navzorkováno z mockup-dark.png (neutrálnější, nižší kontrast) */ --lb-bg: #0F1014; --lb-surface: #14171B; --lb-surface-elevated: #181C21; --lb-sidebar: #0F1216; --lb-text: #F5F5F5; --lb-text-secondary: #B8BEC8; --lb-text-muted: #7E8794; --lb-text-disabled: #5E6673; --lb-border: #20242B; --lb-border-strong: #2C313A; --lb-success: #48BB78; --lb-warning: #ED8936; --lb-error: #FC8181; --lb-info: #63B3ED; /* Na tmavem podkladu je jemny stin neviditelny - stupne drzi tutez roli, jen hlubsi, aby karta sla porad poznat od plochy pod ni. */ --lb-shadow-xs: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.24); --lb-shadow-sm: 0 1px 2px rgba(0,0,0,.32), 0 8px 24px rgba(0,0,0,.30); --lb-shadow-md: 0 2px 6px rgba(0,0,0,.36), 0 14px 32px rgba(0,0,0,.38); --lb-scrim: rgba(0, 0, 0, .62); --lb-toast-bg: #2A2E35; --lb-toast-text: #F5F5F5; --lb-shadow: 0 12px 40px rgba(0,0,0,.35); --lb-shadow-lg: 0 16px 48px rgba(0,0,0,.45); --lb-shadow-hairline: 0 0 0 1px rgba(0,0,0,.35); /* Dashboard plochy v tmavém — tlumené, ne světlé díry */ --lb-green-vivid: #5BC93B; /* V tmavém je „tmavsi na text" naopak SVETLEJSI - tmava zelena by na tmavem podkladu zmizela. Role zustava tataz (zelena na text), hodnota se prevraci. */ --lb-green-deep: #86DD6C; /* Ctecí inkoust se musi prevracet jako kazda jina role: v tmavem tematu je "tmavy inkoust na papire" naopak SVETLY, jinak replika dialogu i nadpis Boosterova tipu zmizely tmave na tmavem. O chlup tepleji nez --lb-text, aby cteni nebylo studene, ale bez hnedeho nadechu - ten dela papir, ne inkoust. */ --lb-ink-read: #E9E6E2; /* Ctecí papir v tmavem tematu ztmavne. Neutralne, ne do tepla: teply hnedy papir si sedl s hnedym panelem cviceni pod nim a cela faze cteni pak byla jedna hneda plocha. Papir je o odstin SVETLEJSI nez --lb-surface pod nim, takze list porad jde poznat od rozhrani, jen uz ne barvou. */ --lb-read-paper: #171A1F; --lb-read-paper-2: #14171B; /* Panel se zadanim je v tmavem tematu tmava plocha se svetlym textem, tedy obracene nez ve svetlem. Neutralni, ne hneda: hneda se sesla s tmavym pozadim a cetla se jako skvrna, ne jako plocha se zadanim. */ --lb-panel: #262B33; --lb-panel-2: #1B1F26; --lb-panel-text: #FBF7F1; --lb-panel-label: #C4BDB5; /* Ruzova Anna se v tmavem tematu rozsvetluje jako kazda jina barva na text. */ --lb-speaker-anna: #E9899B; /* Tomova modra je jedina barva mluvciho, ktera je sama o sobe tmava - na tmavem papire mela kontrast kolem 2,8:1 a jmeno slo precist jen se snahou. Anna i vedlejsi postava uz svetle jsou. Role zustava tataz, hodnota se prevraci - stejne jako u --lb-green-deep. */ --lb-speaker-tom: #5FA8D0; /* Na tmavem papire je 5 % barvy mluvciho neviditelnych: bublina zmizela a zbylo jen jmeno nad replikou. */ --lb-speaker-tint: 14%; --lb-speaker-tint-strong: 26%; --lb-hero-bg: #1C1A18; --lb-progress-bg: #181613; --lb-tip-bg: #15181D; --lb-tip-bg-silna: #1E242C; /* Rada o ovladani - modra rodina i v tmavem, aby se nepletla s oranzovym tipem. */ --lb-howto-bg: #16202B; --lb-howto-border: #2A4055; --lb-howto-head: #8CC4EE; --lb-howto-bg-silna: #1D2C3B; --lb-howto-border-silna: #3A5A78; /* Lupa na tmavem pozadi potrebuje vic, aby byla vubec videt. */ --lb-lupa-sila: 26%; --lb-lupa-sila-okraj: 48%; /* Teple plochy (DARK). Kremova --lb-warm-tint je nejcastejsi jemna plocha v appce - preklad pod clankem, poznamka pod cvicenim, hotova lekce, aktivni kurz v nastaveni. Bez hodnoty v tomto bloku zustavala v tmavem tematu kremova: svetla dira, a navic na ni psal --lb-text, tedy svetle na svetle. Hodnoty drzi o stupen nad --lb-surface, aby plocha zustala "jemne jina" jako ve svetlem, ne aby svitila. */ --lb-warm-tint: #1B1E23; --lb-warm-tint-2: #22262C; --lb-warm-border: #2E343D; /* Stitek fáze cviceni a hinty: --lb-hint-bg musi ztmavnout spolu s --lb-hint-text, protoze ta dvojice se pouziva zaroven (stitek) i zvlast (--lb-hint-text lezi i na --lb-warm-tint vyse). Kdyby ztmavl jen jeden, rozbije se druhe misto. */ --lb-hint-bg: #2A2113; --lb-hint-border: #56411A; --lb-hint-text: #D2A679; /* Stavove plochy (DARK). Prevraci se v PARECH: kdyby ztmavla jen plocha, zustal by na ni tmavy text, a kdyby jen text, plocha sviti dal. Takhle mel panel "Lekce hotova" v tmavem motivu 1,79:1 (kremova karta se sekundarnim textem) a chybova plocha 1,64:1. Obrysy (--lb-*-border) tu nejsou: ty se v tmavem cti jako prstenec a svetle zustat maji. */ --lb-success-text: #7BD79A; --lb-success-bg: #16251C; --lb-success-bg-hover: #1D3325; --lb-error-text: #F5A3A0; --lb-error-bg: #2A1817; --lb-info-bg: #16222E; --lb-info-text: #8CC4EE; --lb-purple-bg: #221C3A; --lb-purple-text: #C4B5FD; --lb-purple-border: #3A3160; --lb-memo-bg: #2A2310; --lb-memo-border: #4A3B12; --lb-memo-text: #F5D27A; --lb-memo-ico: #F5B301; /* Podbarveni slova pod kurzorem v clanku - plocha, takze taky ztmavne. */ --lb-accent-tint: #2A1F18; --bs-body-color: #F5F5F5; --bs-body-bg: #0F1014; --bs-border-color: #20242B; } html, body { font-family: var(--lb-font-body); background-color: var(--lb-paper); color: var(--lb-ink); } h1, h2, h3, h4, h5, h6 { font-family: var(--lb-font-head); font-weight: 600; color: var(--lb-ink); } h1:focus { outline: none; } /* ============================================================ Globální „hotovo" odznak — JEDEN styl napříč všemi stopami (výuka, čtení, slovní zásoba/oblasti, gramatika). Uprav tady → změní se všude. Použití: hotovo (fajfka je z ::before) ============================================================ */ .lb-done-badge { display: inline-flex; align-items: center; gap: .25rem; background: #eef6f0; color: #15803d; border: 1px solid #cbe6d3; border-radius: 999px; padding: .18rem .6rem; font-size: .76rem; font-weight: 600; line-height: 1; } .lb-done-badge::before { content: "✓"; font-weight: 700; } a, .btn-link { color: var(--lb-accent); } a:hover, .btn-link:hover { color: var(--lb-accent-strong); } .btn-primary { color: #fff; background-color: var(--lb-accent); border-color: var(--lb-accent); } .btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-color: var(--lb-accent-strong); border-color: var(--lb-accent-strong); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 .1rem white, 0 0 0 .25rem rgba(194, 65, 12, 0.45); } .form-check-input:checked { background-color: var(--lb-accent); border-color: var(--lb-accent); } .content { padding-top: 1.1rem; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid red; } .validation-message { color: red; } #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } /* ============================================================ DESIGN SYSTEM — pojmenované komponenty (viz docs/design-system.md) PRAVIDLO: nová obrazovka se skládá z těchto tříd. Když se něco nevejde, je to ROZHODNUTÍ: buď se rozšíří komponenta tady (a platí všude), nebo se vědomě založí nový styl a zapíše do docs/design-system.md. Co se nezapíše, za půl roku nikdo nedohledá - a design se rozjede přesně takhle: dnes je v aplikaci 57 různých velikostí písma ve 376 pravidlech. Tyhle třídy NEJSOU scoped (nejsou v .razor.css), takže platí ve všech sekcích. Scoped CSS smí řešit jen ROZMÍSTĚNÍ, ne vzhled. ============================================================ */ /* ── Text ──────────────────────────────────────────────────── */ /* Standardní text aplikace (popisky, próza rozhraní). */ .lb-text { font-family: var(--lb-font-body); font-size: .95rem; line-height: 1.55; color: var(--lb-text); } /* ============================================================ Most ve cviceni - veta v domacim jazyce, kterou si student vyzada. Tentyz prvek zil v peti komponentach ve DVOU identitach: tri mely teplou plochu s oranzovym pruhem a serifovy text v akcentu, dve zlutou plochu hintu a text v hnede. Zluta ale v teto appce znamena TIP (zarovka), a most neni tip - je to preklad zadani. Plati tedy akcentni podoba. Velikost byla xl u tri a 2xl u dvou; plati xl. Rozmisteni (odsazeni nad/pod) zustava ve scoped CSS, protoze v kazdem cviceni sedi most jinde. ============================================================ */ .lb-bridge { background: var(--lb-warm-tint); border-left: 3px solid var(--lb-accent); border-radius: var(--lb-radius-xs); padding: var(--lb-gap-5) var(--lb-gap-6); } .lb-bridge-label { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-bottom: var(--lb-gap-2); } .lb-bridge-text { font-family: var(--lb-font-head); font-size: var(--lb-fs-xl); font-style: italic; color: var(--lb-accent-strong); } /* Konverzační text = to, co říká postava (replika dialogu, článek lekce). Serif, čtecí velikost - je to KNIHA, ne rozhraní. */ .lb-text-talk { font-family: var(--lb-font-read); font-size: 1.05rem; line-height: 1.75; color: var(--lb-ink-read); } /* Překladový text pod replikou/odstavcem - nesmí soupeřit s originálem. */ .lb-text-trans { font-family: var(--lb-font-body); font-size: .9rem; line-height: 1.5; font-style: italic; color: var(--lb-text-muted); } /* Lemma = slovo na kartě slovíčka, hlavní hrdina obrazovky. */ .lb-text-lemma { font-family: var(--lb-font-head); font-size: var(--lb-fs-6xl); font-weight: 700; line-height: 1.1; color: var(--lb-ink); } /* Text Boostera (tip, bublina) - vysvětlení, ne obsah lekce. */ .lb-text-booster { font-family: var(--lb-font-body); font-size: .92rem; line-height: 1.5; color: var(--lb-text); } /* Nadpis a úvodní řádka sekce - stejné v lekci, oblasti i gramatice. Barvu bere ze sekce (--lb-section), takže fialová gramatika se nemusí definovat zvlášť. */ .lb-section-title { font-family: var(--lb-font-head); font-size: 1.1rem; margin: 0 0 .6rem; color: var(--lb-section); } .lb-section-intro { font-family: var(--lb-font-body); font-size: .9rem; color: var(--lb-text-secondary); margin-bottom: .8rem; } /* ── Tlačítko ──────────────────────────────────────────────── */ .lb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--lb-gap-2); font-family: inherit; font-size: var(--lb-fs-md); font-weight: 600; border: 1px solid var(--lb-border-strong); background: var(--lb-surface); color: var(--lb-text); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-4) var(--lb-gap-7); cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s, filter .12s; } .lb-btn:hover:not(:disabled) { border-color: var(--lb-section); color: var(--lb-section); } .lb-btn:disabled { opacity: .55; cursor: default; } /* Hlavní akce sekce - barvu bere ze sekce, takže jedno tlačítko slouží oranžové lekci i fialové gramatice. */ .lb-btn.is-primary { background: var(--lb-section-gradient); color: var(--lb-on-accent); border-color: transparent; box-shadow: 0 6px 16px color-mix(in srgb, var(--lb-section) 32%, transparent); } .lb-btn.is-primary:hover:not(:disabled) { filter: brightness(1.05); color: var(--lb-on-accent); } /* Tlačítko se dvouřádkovým popisem: nahoře název, pod ním malým, CO se stane. Vzniklo u hodnocení slova („Těžké" a „Znám" zněly oba jako hodnocení, ne jako akce) a je to role, ne lokální styl - stejná dvojice stojí v opakování i v objevování slov. Podtitulek dědí barvu od tlačítka, takže u plné výplně je bílý jako název a nemusí se rozepisovat pro každý stav. --lb-fs-xs je v paletě přesně „popisky pod prvkem". */ .lb-btn-2l { flex-direction: column; gap: 0; line-height: 1.15; } .lb-btn-2l .lb-lbl { font-weight: 700; } .lb-btn-2l .lb-sub { font-size: var(--lb-fs-xs); font-weight: 500; opacity: .78; } /* Značka na slovo („Těžké" / „Znám"). V klidu průhledná, stiskem se vybarví - stav slova je pak vidět na první pohled a nepletou se s akcí, která dávku posouvá. Je to role, ne lokální styl: táž dvojice stojí v procvičování i v procházení slovíček a musí vypadat i reagovat stejně. */ .lb-btn-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: var(--lb-gap-2) var(--lb-gap-5); border-radius: var(--lb-radius-pill); font-family: inherit; font-size: var(--lb-fs-base); font-weight: 600; background: transparent; border: 1px solid transparent; cursor: pointer; transition: all .15s; } .lb-btn-mark.is-hard { border-color: var(--lb-error-border); color: var(--lb-error-text); } .lb-btn-mark.is-hard:hover { background: var(--lb-error-bg); border-color: var(--lb-error); } .lb-btn-mark.is-hard.on { background: var(--lb-error); border-color: var(--lb-error); color: var(--lb-on-accent); box-shadow: var(--lb-ring-error); } .lb-btn-mark.is-know { border-color: var(--lb-success-border); color: var(--lb-success-text); } .lb-btn-mark.is-know:hover { background: var(--lb-success-bg); border-color: var(--lb-success-solid); } .lb-btn-mark.is-know.on { background: var(--lb-success-solid); border-color: var(--lb-success-solid); color: var(--lb-on-accent); box-shadow: var(--lb-ring-success); } /* Odbočka do cvičení - žlutá, aby se nepletla s „pokračovat". Na rozcestníku dávky ji autor vrátil na oranžovou (procvičení TAM je ten další krok), takže roli teď nikdo nepoužívá; zůstává pro odbočku, která se pletla s pokračováním. */ .lb-btn.is-practice { background: var(--lb-yellow); color: var(--lb-on-yellow); border-color: transparent; box-shadow: var(--lb-shadow-practice); } .lb-btn.is-practice:hover:not(:disabled) { filter: brightness(1.05); color: var(--lb-on-yellow); border-color: transparent; } /* Tichá akce (přeskočit, zpět) - nese jen text. */ .lb-btn.is-quiet { border-color: transparent; background: transparent; color: var(--lb-text-muted); font-weight: 500; } .lb-btn.is-quiet:hover:not(:disabled) { color: var(--lb-section); } /* ── Sekce wizardu (lekce / oblast / gramatika / opakování) ── Stejné rozvržení a etapová lišta; sekce se odlišuje JEN barvou. */ .lb-wizard { --lb-section: var(--lb-accent); --lb-section-gradient: var(--lb-cta-gradient); } .lb-wizard.is-grammar { --lb-section: var(--lb-purple); --lb-section-gradient: linear-gradient(135deg, #6C5CE7, #8b7ff0); } .lb-wizard.is-domain { --lb-section: var(--lb-green-vivid); --lb-section-gradient: linear-gradient(135deg, #2E9510, #55BF33); } .lb-wizard.is-review { --lb-section: var(--lb-sun); --lb-section-gradient: linear-gradient(135deg, #FF8703, #ffa640); } /* Etapová lišta („zapadající šipky"). Byla zkopírovaná ve Vyuce i v Oblastech - v Oblastech u kopie stál komentář „sdílí vzhled s výukou", i když nesdílela nic. */ .breadcrumb { display: flex; margin-bottom: 1.7rem; } .breadcrumb .crumb { background: color-mix(in srgb, var(--lb-section) 9%, var(--lb-surface)); color: var(--lb-text-muted); font-family: var(--lb-font-body); font-size: .82rem; font-weight: 600; line-height: 1; padding: .7rem 1.3rem .7rem 1.9rem; margin-left: -14px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); } .breadcrumb .crumb:first-child { margin-left: 0; padding-left: 1.3rem; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); } .breadcrumb .crumb:last-child { padding-right: 1.4rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); } /* Etapa, ktera prave dobehla, se jednou tise zazeleni. Bez toho se lista prepne skokem a postup v lekci neni videt - prave to delalo appku staticnou. Animace bezi jen pri zmene tridy, tedy jednou za etapu. */ @keyframes lb-crumb-done { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } } .breadcrumb .crumb.passed { background: color-mix(in srgb, var(--lb-green-vivid) 16%, transparent); color: var(--lb-green-vivid); animation: lb-crumb-done .45s ease-out; } .breadcrumb .crumb { transition: color .3s ease; } @media (prefers-reduced-motion: reduce) { .breadcrumb .crumb.passed { animation: none; } .breadcrumb .crumb { transition: none; } } .breadcrumb .crumb.active { background: var(--lb-section-gradient); color: #fff; } /* Gramatická etapa uvnitř lekce je fialová i tam, kde je sekce oranžová. */ .breadcrumb .crumb.crumb-gram.active { background: linear-gradient(135deg, var(--lb-purple), #8b7ff0); } /* ============================================================ Vyklad gramatiky jako seznam bodu (Zvyrazneni.Body). Globalne: prvky vznikaji v RenderFragmentu staticke tridy, takze scoped CSS stranky na ne nedosahne - stejne jako u word-tipu nize. ============================================================ */ .lb-vyklad-uvod { margin: 0 0 var(--lb-gap-3); } .lb-vyklad-body { margin: 0; padding-left: 1.2em; } .lb-vyklad-body li { margin: var(--lb-gap-2) 0; } .lb-vyklad-body li::marker { color: var(--lb-purple); } /* ============================================================ Word tip + popup — globální (MarkupString nemá Blazor scope) ============================================================ */ .word-tip { border-bottom: 1px dotted rgba(28, 25, 23, 0.35); cursor: help; display: inline; } .lb-word-popup { position: absolute; z-index: 500; min-width: 180px; max-width: 300px; padding: .9rem 1.1rem; background: linear-gradient(165deg, #4A352A 0%, #33251D 100%); border-top: 3px solid rgba(194, 65, 12, 0.5); border-radius: 12px; box-shadow: 0 4px 8px rgba(28,25,23,0.15), 0 12px 28px rgba(28,25,23,0.25); pointer-events: none; } .lb-word-popup[hidden] { display: none; } .wp-lemma-row { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; } .wp-lemma { font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; font-weight: 600; color: #FFF7F0; line-height: 1.2; } .wp-gloss { font-size: .95rem; color: #FBBF24; font-style: italic; font-weight: 500; } .wp-forms { margin-top: .4rem; font-size: .8rem; color: rgba(255, 245, 238, 0.65); font-family: 'JetBrains Mono', 'Consolas', monospace; border-left: 2px solid rgba(255,245,238,0.2); padding-left: .5rem; } /* ============================================================ Loadovací obrazovka — znak + brand + progress ============================================================ */ .app-loader { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.15rem; background: var(--lb-paper); font-family: var(--lb-font-body); } .loader-mark { height: 200px; width: auto; animation: lb-float 2s ease-in-out infinite; filter: drop-shadow(var(--lb-shadow)); } @keyframes lb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .loader-brand { font-family: var(--lb-font-head); font-size: 1.95rem; font-weight: 600; letter-spacing: -.01em; color: var(--lb-ink); } .loader-brand span { color: var(--lb-accent); } .loader-bar { width: 180px; height: 5px; background: var(--lb-line); border-radius: 999px; overflow: hidden; } .loader-bar-fill { display: block; height: 100%; width: var(--blazor-load-percentage, 0%); background: var(--lb-accent); border-radius: 999px; transition: width 0.15s ease-in-out; } .loader-text { font-size: .85rem; letter-spacing: .02em; color: var(--lb-muted); } code { color: #c02d76; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ── Karaoke: lupa jedouci po ctenem textu ───────────────────────────────── Prvek vyrabi js/tts.js, ne Blazor, takze se na nej scoped CSS nechyti a pravidla musi byt tady. Casy slov jsou z ElevenLabs (docs/audio-generovani.md), nic se neodhaduje z delky slov. Posun mezi slovy dela CSS prechod. Diky nemu je plynuly, i kdyz se poloha prepisuje jen na hranici slov - bez toho by lupa skakala. */ .lb-lupa-host { position: relative; } /* Kusy textu musi byt NAD lupou. Absolutne umisteny prvek se jinak kresli pres netransformovany obsah a lupa by prekryla samotna slova. */ .lb-lupa-host .nb { position: relative; z-index: 1; } .lb-lupa { position: absolute; z-index: 0; opacity: 0; pointer-events: none; background: color-mix(in srgb, var(--lb-lupa-barva) var(--lb-lupa-sila), transparent); border: 1px solid color-mix(in srgb, var(--lb-lupa-barva) var(--lb-lupa-sila-okraj), transparent); border-radius: var(--lb-radius-xs); transition: left .12s linear, top .12s linear, width .12s linear, opacity .25s; } /* Kdo si preje omezit pohyb, dostane lupu bez prejezdu - jen preskakuje. */ @media (prefers-reduced-motion: reduce) { .lb-lupa { transition: opacity .25s; } } /* Koncovka nebo přípona se spojovníkem („-n", „ge...t") se nelomí přes řádek. Třídu dává Zvyrazneni v kódu, proto žije tady a ne ve scoped stylu. */ .lb-nowrap { white-space: nowrap; }