/* ====================================================================== 00-tokens/01-semantic.css -- ROLY Význam, nie hodnota. Komponent siaha sem; hodnotu si rola berie z `00-primitives.css`. Témy v `02`-`04` prepisujú tieto isté roly, takže komponent o téme nevie a nemusí vedieť. PRAVIDLO VRSTVY --------------- Iba koreňové rozsahy: `:root` a `.qwick-surface`. Žiadny komponentový selektor, žiadna vlastnosť okrem `--*`. PREČO JE TU AJ `.qwick-surface` ------------------------------- Paleta (`--text`, `--muted`, `--line`, `--accent`, …) je historicky viazaná na `.qwick-surface`, nie na `:root`, a je to jediný rozsah, ktorý si moduly pri montáži nasadzujú (`CTX.root.classList.add( 'qwick-surface')` v `modules/trips/trips.js`). `.qwick-surface` je tu teda koreň aplikačnej plochy, nie komponent. Presun palety na `:root` by zmenil rozsah dedenia. Preto ostáva na `.qwick-surface`; každý samostatný povrch si túto rolu nasadí výslovne. ====================================================================== */ /* ====================================================================== Dokument a plocha ====================================================================== */ /* --bg pozadie aplikácie aj dokumentu, aby okraje bezpečnej zóny a prescroll sedeli s obsahom --surface / --surface2 obe zastávky prechodu `--card-fill`; zámerne nesú tú istú hodnotu, takže gradient sa všade vyrieši na plochú farbu Na `:root`, nie na plochu, aby ich videli aj `html` a `body` a aby sa rozsahy nemohli rozísť. Škrupiny sheetov a hlavičky sa ich zámerne nedotýkajú -- majú vlastný sklenený materiál. */ :root{ --bg:var(--c-ink-900); --surface:var(--c-ink-840); --surface2:var(--c-ink-840); /* `--card-shadow-fixed` je ZRUŠENÝ. Jediným konzumentom bola dvojica MÍNUS/PLUS na dashboarde a tá dnes nesie ten istý tieň ako karta záznamu. Mŕtvy token sa nepresúva, maže sa. */ } /* ====================================================================== Sklo: povrchy, polia a ich tiene ====================================================================== */ /* Alfa je tu súčasťou roly, nie palety -- `rgba(255,255,255,.15)` nie je „biela", je to „výplň poľa". Preto tieto hodnoty nejdú cez primitívu. */ :root{ --glass-field:rgba(255,255,255,.15); /* `--glass-field-focus` je ZRUŠENÝ. Aktívne pole sa dnes označuje tintom vo vlastnej farbe plochy, nie inou bielou -- pozri `styles/17-field.css`. */ /* ROZOSTRENIE NIE JE MATERIÁL. Je to hĺbka PLOCHY, ktorá ustúpila. Tokeny `--glass-blur-field`, `--glass-blur-card` aj `--glass-blur` sú ZRUŠENÉ, nie vynulované: token menom „blur" s hodnotou `none` klame. Rovnako je zrušené posledné `backdrop-filter`, ktoré niesol ovládací prvok. Karta, pole, tlačidlo ani pilulka tagu rozostrenie NEMAJÚ -- každý z nich je priesvitná výplň + okraj + tieň. Rozostruje sa iba to, čo je ZA popredím, a vždy 10 px: dashboard za sheetom a za QWICK MENU `styles/03-controls.css` dashboard modulu `modules/trips/trips.css` sheet za formulárom editora tagov `styles/09-tag-editor.css` Časovanie je pre všetky tri JEDNO (`--qwick-blur-transition` nižšie). Komponent rozhoduje LEN o tom, či je rozostrený -- nikdy o tom, ako dlho mu to trvá. Zatmavenie má sheet, ale QWICK MENU NIE. Voľby menu stoja nad plochou len na okamih a samy sú z čierneho skla; závoj pod nimi by ich zdvojil. Sheet naopak plochu preberá celú, takže ju smie aj potlačiť. */ /* Sklenené povrchy nemajú horný odlesk ani vrhnutý tieň. Príslušné tokeny sú odstránené, aby ich žiadny komponent nemohol potichu vrátiť. */ /* Výplň, ktorú nesú neroztiahnuteľné matné povrchy. */ --card-glass-fill:rgba(11,11,15,.72); --qwick-pill-corner:var(--len-radius-pill-drawn); } /* ====================================================================== Okraje: rola existuje, kreslí sa priehľadne ====================================================================== */ /* Priehľadná farba okraja je zámer, nie vynulovaný token: okraj si drží svoju 1-2px geometriu, takže povrchy neposkočia. `border:none` by ich posunul. Rola teda neklame -- okraj tam je, len ho nevidno. Predtým boli tieto tri role definované dvakrát: raz farebne v `10-materials.css` a `12-themes.css`, raz priehľadne v `11-sheets-and-settings.css` s `!important`. Vyhrával `!important`, takže farebné hodnoty (`#5f5f70`, `rgba(255,255,255,.30)`, `#26262f`, `rgba(45,57,70,.15)`, `rgba(45,57,70,.13)`, `rgba(45,57,70,.14)`) sa nikdy nenakreslili. Zmazané aj s `!important`, ktorý ich prebíjal. */ :root{ --glass-edge:transparent; --glass-field-edge:transparent; } /* ====================================================================== Paleta aplikačnej plochy ====================================================================== */ .qwick-surface{ --surface3:var(--c-ink-820); /* Výplň karty. Ten istý povrch nesie karta pohybu, karta jazdy, obdobie, šípka období, ikonové tlačidlo aj súhrn -- boli to jedenásťkrát vypísané tie isté hodnoty v piatich súboroch vrátane modulu. Zmena vzhľadu karty je zmena tohto riadka. */ --card-fill:linear-gradient(165deg,var(--surface2),var(--surface)); --line:transparent; --text:var(--c-ink-050); --muted:var(--c-ink-400); --ice:var(--c-ice-400); --ice2:var(--c-ice-500); --mint:var(--c-mint-400); /* Medzizastavka trasy. Zaciatok je ladovo modry, ciel zeleny; vsetko medzi nimi nesie tuto farbu -- v cisle riadku aj v cisle na mape. */ --violet:var(--c-violet-400); --mint-dim:var(--c-mint-500); --danger:var(--c-red-400); --amber:var(--c-amber-400); /* Akcent je ROLA, nie farba. Základ (QWICK MOVES) ju má ľadovo modrú, QWICK TRIPS si ju vo svojom rozsahu prepíše na zelenú -- pozri `.trips-scope` v `modules/trips/trips.css`. Zdieľané pravidlá preto siahajú na `--accent`, nie priamo na `--ice`: tá ostáva konkrétnou modrou tam, kde modrá niečo znamená (minúty na karte jazdy). */ --accent:var(--ice); --accent2:var(--ice2); --radius:var(--len-radius-card); /* Mierka stlacenia. Hodnota je zdielana rola -- cita ju FAB (02), press-feedback (03), plocha tagov (08) aj materialy (10) -- takze patri sem. Ktora z dvoch sa pouzije, rozhoduje stav v komponente. */ --tap-scale-press:1.035; --tap-scale-press-lg:1.145; /* `--tap-scale-hidden` (.42) je ZRUSENY. Bola to mierka, v ktorej Spat a dlazdica tagu do plochy prichadzali a z nej odchadzali; prepinanie stavov uz tieto prvky neskaluje, takze rola nema konzumenta. Mierku dnes meni jedine stlacenie. */ /* Miesto, ktore pole necha svojej jednotke. Cita ho aj formular adries (06), takze to nie je sukromna premenna komponentu pola. */ --field-unit-pad:46px; /* Slot tagu na karte pohybu. Kartu a tag kreslia dva rozne subory, ale rozmer musi sediet na pixel: karta si onho opiera vyplnu, tag svoju sirku. Kym bola hodnota napisana len pri karte, tag ju cital cez hranicu suboru a jedna zmena rozladila druhu stranu. */ --move-tag-edge-inset:7px; --move-tag-width:101.485714286px; /* Vyska pasu tagov mimo plochy. Pas nesie editor tagov, pilulku v nom kresli komponent tagu -- ta ista dvojica suborov, ten isty dovod. */ --tag-editor-chain-h:44px; /* Tag nemá vlastný ani zdieľaný horný odlesk. */ /* Farby akcií. Pevné, spoločné pre celú aplikáciu aj moduly: tá istá akcia má všade tú istú farbu. Tlačidlo Uložiť je modré v MOVES aj v TRIPS -- neprebíja sa rolou `--accent`. */ --qwick-save:var(--c-ice-400); --qwick-edit:var(--c-blue-600); --qwick-delete:var(--c-red-500); } /* ====================================================================== Pohyb a jedna spoločná klávesnicová základňa ====================================================================== */ /* Spodná hrana klávesnicovej plochy je fyzicky rovnaká pre Qwick Entry aj pre plochu Novej jazdy na každom zariadení a pri každej bezpečnej zóne. */ :root{ /* ---- QWICK KEYBOARD ---- Vlastna klavesnica je nas prvok, takze jej vysku POZNAME -- spolocna klavesnicova zakladna uz nie je odhad vysky iOS klavesnice. Vsetky nastavitelne hodnoty klavesnice stoja tu, vo vrstve tokenov, lebo su to zdielane roly: cita ich komponent aj kazdy formular nad nou. Menit vzhlad klavesnice znamena menit tieto premenne. */ --qwick-kb-key-height:44px; --qwick-kb-key-gap:6px; --qwick-kb-key-radius:12px; --qwick-kb-pad:8px; --qwick-kb-actions-height:49px; --qwick-kb-actions-gap:10px; /* Spat je siroke PRESNE tretinu riadku, Ulozit ma zvysok. Pomer sa nepise ako `1fr 2fr`: medzera medzi tlacidlami sa v nom rozdeli na obe stopy, takze Spat by vyslo uzsie nez tretina. Tretinu preto nesie lava stopa priamo a prava berie, co zostane. */ --qwick-kb-back-share:calc(100% / 3); --qwick-kb-surface:rgba(14,18,24,.92); --qwick-kb-key-fill:rgba(255,255,255,.10); --qwick-kb-key-fill-active:rgba(255,255,255,.22); --qwick-kb-key-color:var(--text); --qwick-kb-key-font-size:18px; --qwick-kb-key-font-weight:650; --qwick-kb-function-fill:rgba(255,255,255,.06); --qwick-kb-function-color:var(--muted); /* Cas vysunutia a zasunutia klavesnice je ZDIELANA rola: formular nad nou sa objavuje a mizne PRESNE s nou, takze obe strany citaju to iste cislo. Doba stoji zvlast, lebo ju treba aj ako oneskorenie prepnutia `visibility` -- z hodnoty aj s krivkou sa vytiahnut neda. */ --qwick-kb-enter-time:.26s; --qwick-kb-leave-time:.2s; --qwick-kb-enter:var(--qwick-kb-enter-time) cubic-bezier(.22,1,.36,1); --qwick-kb-leave:var(--qwick-kb-leave-time) ease-in; /* Obe rozlozenia maju styri riadky klavesov -- od zrusenia klavesu Ulozit je pri cislach aj pismenach rovnako vysoko, takze formular nad klavesnicou pri prepnuti pola neskace. */ --qwick-keyboard-rows:4; --qwick-keyboard-height:calc( var(--qwick-kb-pad) * 2 + var(--qwick-kb-actions-height) + var(--qwick-kb-actions-gap) + var(--qwick-keyboard-rows) * var(--qwick-kb-key-height) + (var(--qwick-keyboard-rows) - 1) * var(--qwick-kb-key-gap) + env(safe-area-inset-bottom,0px) ); --qwick-keyboard-panel-bottom:calc(var(--qwick-keyboard-height) + 12px); /* ZÁVOJ PLOCHY pod otvoreným sheetom. Jediný konzument je `styles/04-sheets.css`; stojí tu preto, že je to hodnota OBRAZU (ako hlboko plocha ustúpi), nie vlastnosť jedného komponentu. Hĺbku čierneho skla ovládacieho prvku tento token NEURČUJE. Chvíľu to bol jeden token pre oboje a bola to chyba: závoj a prvok stoja v obraze NAD SEBOU, nie vedľa seba, takže sa nemajú riadiť jedným číslom -- prvok musí byť dosť odlišný od podkladu, na ktorom leží, a keď sa podklad prehĺbi, prvok ho nesmie nasledovať, inak zmizne. Sklo prvku je preto späť v `styles/21-control-material.css`, kam ako súkromná premenná komponentu patrí. */ --qwick-veil:rgba(0,0,0,.70); /* JEDEN kontrakt pohybu pre každé rozostrenie plochy v aplikácii. Komponent si vlastný čas ani krivku nepíše -- inak sa dashboard v MOVES a v TRIPS rozíde a jedna zmena bude treba na štyroch miestach. */ --qwick-blur-transition:filter var(--time-blur) var(--ease-qwick); /* JEDEN FADE-IN A JEDEN FADE-OUT PRE CELÚ APLIKÁCIU AJ MODULY. Čokoľvek sa objavuje alebo mizne priehľadnosťou, číta tieto roly -- prechodom (`transition:var(--qwick-fade-in)`), rolou komponentu `.qwick-fade-in` / `.qwick-fade-out` (`styles/20-components/fade.css`) alebo cez `QwickFade` (`scripts/02-qwick-fade.js`). Komponent si vlastný čas ani krivku objavenia nepíše; rozhoduje iba o tom, KEDY sa objaví alebo zmizne. Pravidlo smeru: stav, v ktorom je prvok viditeľný, nesie fade-in; stav, v ktorom je skrytý, nesie fade-out. Prechod CSS sa totiž berie z cieľového stavu. Samostatné časy a krivky sú tu preto, že ich treba aj mimo skratky: ako oneskorenie prepnutia `visibility` a ako trvanie kľúčových snímok v komponente. */ --qwick-fade-in-time:var(--time-fade-in); --qwick-fade-in-ease:var(--ease-fade-in); --qwick-fade-out-time:var(--time-fade-out); --qwick-fade-out-ease:var(--ease-fade-out); --qwick-fade-in:opacity var(--time-fade-in) var(--ease-fade-in); --qwick-fade-out:opacity var(--time-fade-out) var(--ease-fade-out); /* `--qwick-appear-time` a `--qwick-appear-ease` su ZRUSENE spolu s komponentom `20-components/scale-appear.css`, ktory ich jediny cital. Spat ani dlazdica tagu sa pri prepnuti stavu uz neskaluju, takze cas ani krivka takeho pohybu nemaju co popisovat. */ }