/* ====================================================================== QWICK -- KOMPONENT: materiál ovládacieho prvku Sklo vo vlastnej farbe. JEDINÝ ZDROJ výplne a okraja pre každé tlačidlo a pilulku tagu v aplikácii aj v moduloch. ODKIAĽ MATERIÁL JE ------------------ Je to doslovný materiál tlačidla QWICK z Qwick 1.0. Tam ho niesol jediný selektor `.app-scope-index .fab` a znel takto: border:1.5px solid var(--ice); background:rgba(105,215,255,.14); color:var(--ice); backdrop-filter:blur(18px) saturate(125%); box-shadow:0 16px 34px -10px rgba(0,0,0,.4); Tri z tých piatich riadkov sú materiál a sú tu: OKRAJ vo vlastnej farbe pri plnej sýtosti, VÝPLŇ v tej istej farbe pri 14 % a ROZOSTRENIE. Zvyšné dva materiál nenastavuje -- `color` si nesie prvok (a materiál si ju z neho berie) a `box-shadow` je zdvih, ktorý má každý prvok iný. `rgba(105,215,255,.14)` je `--ice` pri 14 %, teda tá istá farba ako okraj, len priesvitná. Preto je tu jedna premenná (`--qwick-control-tint`) a dve jej použitia -- nie dve nezávislé hodnoty, ktoré by sa mohli rozísť. ROZOSTRENIE MÁ IBA QWICK ------------------------ To je jediné, čím sa tento súbor od originálu odchyľuje, a je to zámer. `backdrop-filter` sa prepočítava pri každom snímku pohybu, ktorý cez prvok prejde -- pri tlačidle, ktoré pláva nad celou plochou, sa to oplatí, pri pilulke v páse alebo pri Uložiť v sheete nie. Rozostrený je preto výhradne `.fab` a stojí to v jednom pravidle na konci receptu. NEPRIDÁVAJ ho ďalším prvkom. ČO BOLO PREDTÝM --------------- Najprv si ten istý materiál opisovalo štrnásť selektorov v ôsmich súboroch ako nepriehľadný gradient `linear-gradient(165deg, …)`. Pôvodné deklarácie sú odstavené v `_odstavene/2026-09-05-material-tlacidiel-gradient.css`. Potom to bolo dvojvrstvové sklo -- vlastná farba pri 50 % a POD ňou čierne sklo pri 50 % -- s priehľadným okrajom a bez rozostrenia. Tá vrstva je zrušená celá: tmavý podklad bol náhradou za rozostrenie a identitu niesol tint namiesto okraja. Materiál z Qwick 1.0 rieši oboje inak, takže `--qwick-control-shade` ani zoznam rolí bez neho už neexistujú. Nevracaj ich. TINT SI PRVOK NESIE SÁM ----------------------- Predvolená hodnota je `currentColor`, takže drvivá väčšina prvkov nepotrebuje ani riadok navyše: modré QWICK má `color:var(--accent)`, červené Vymazať `color:var(--qwick-delete)`, tag `color:var(--qwick-tag-ink)`. Farba textu a farba identity sú u nich tá istá vec. Výnimku deklaruje prvok cez `--qwick-control-tint` a všetky stoja v tomto súbore, na jednom mieste (viď koniec). ZDVIH NIE JE MATERIÁL --------------------- `box-shadow` tento súbor nenastavuje. Horný odlesk je odstránený a prípadný zdvih ostáva vlastnosťou konkrétneho prvku. PORADIE V KASKÁDE ----------------- Súbor sa načítava POSLEDNÝ, takže prebíja bez `!important`. Preto smie používať tú istú špecificitu, akú mali pôvodné pravidlá. ====================================================================== */ /* ---- recept ------------------------------------------------------------ Tokeny nižšie neopúšťajú tento súbor, takže sú to súkromné premenné komponentu a patria sem, nie do vrstvy tokenov -- presunúť ich by znamenalo rozdeliť jeden materiál na dve miesta. */ .qwick-surface .fab, .qwick-surface .fab-choice, .qwick-surface .qwick-control-surface, .qwick-surface .qwick-tag-pill, .qwick-surface .qwick-history-surface, .qwick-surface .tag-editor-type, .qwick-surface .tag-editor-action, .qwick-surface .qwick-action-save, .qwick-surface .qwick-action-edit, .qwick-surface .qwick-action-delete, .qwick-surface .qwick-action-navigate, .qwick-surface .backup-settings-pill, .qwick-surface .metric-card, .qwick-surface .date-control, .qwick-surface .qwick-entry-date, .qwick-surface .qwick-entry-back, .qwick-surface .qwick-back-yellow, .qwick-surface .tag-editor-overlay .tag-settings-back, .qwick-surface .swipe-delete-trigger, .qwick-surface .swipe-delete-cancel{ /* Vlastná farba prvku. Prepíše ju iba ten, komu sa farba textu a farba identity rozchádzajú -- zoznam je na konci súboru. */ --qwick-control-tint:currentColor; /* Okraj štandardne kopíruje identitu výplne. Výrazný 70 % variant ho prepne na plnú farbu textu, aby bola výplň tmavšia a text s rámom tvorili jeden svetlejší popredný tón. */ --qwick-control-edge:var(--qwick-control-tint); /* 14 % je hodnota z Qwick 1.0: `rgba(105,215,255,.14)` je `--ice` pri 14 %. Je to jedna hodnota pre celú aplikáciu, nie odhad na prvok -- práve preto stojí v premennej a nie v pravidle. */ --qwick-control-tint-alpha:14%; /* VÝPLŇ. `background-color`, nie skratka `background`: skratka by ticho zmazala aj `background-image`, ktorý si niektoré prvky kreslia samy (glyf, šípka, pás). */ background-color:color-mix(in srgb, var(--qwick-control-tint) var(--qwick-control-tint-alpha),transparent); /* OKRAJ vo vlastnej farbe pri plnej sýtosti, 1,5px -- presne ako v Qwick 1.0. Priehľadný `1px solid var(--glass-field-edge)`, ktorý tu stál predtým, je zrušený: identitu dnes nesie okraj, nie tmavý podklad pod výplňou. */ border:1.5px solid var(--qwick-control-edge); border-top-color:transparent; } /* Geometricky maly stavovy prvok moze pouzit rovnaky farebny material bez kreslenia ramika. Stale cita ten isty tint a jeho hlbku zo spolocneho receptu; modifikator odstrani iba viditelnost okraja. */ .qwick-surface .qwick-control-borderless{ border-color:transparent; } /* ---- rozostrenie: IBA QWICK ------------------------------------------- Jediný prvok, ktorý naozaj pláva nad celou plochou, takže je jediný, ktorému sa prepočet za každý snímok oplatí. Hodnota je doslovná z Qwick 1.0. Nedávaj ju ďalším selektorom -- pridať sem druhý prvok znamená pridať mu prepočet pri každom pohybe pod ním. */ .qwick-surface .fab{ -webkit-backdrop-filter:blur(18px) saturate(125%); backdrop-filter:blur(18px) saturate(125%); /* Rozostrenie ma zostat na PRIPRAVENEJ vrstve. Bez toho ho WebKit prepocitava az vtedy, ked sa kompozicia pod tlacidlom zmeni -- a prave to sa deje v snimke, v ktorej sa runtime modulu prvy raz zobrazi. Vysledkom bolo prebliknutie pri tahu DO modulu, ale nie spat: spat sa uz ziadna nova vrstva nevytvara. `will-change` drzi vrstvu pripravenu, takze vznik vrstvy pod tlacidlom uz jeho vlastne rozostrenie nezhodi. Je to ta ista poistka, aku uz nesu sklenene polia. */ will-change:-webkit-backdrop-filter,backdrop-filter; } /* Horný okraj aj horný odlesk sú odstránené v zdroji materiálu. Spodný a bočné okraje ďalej nesú identitu prvku; horná hrana je priehľadná. */ /* ---- hlbší tint: tagy a typy ------------------------------------------ Tag a prepínač typu sú prvky, ktoré NESÚ IDENTITU FARBOU a nič iné na nich farbu nemá -- popisok je len meno. Pri 14 % sa farba tagu dala od farby vedľajšieho tagu rozoznať len ťažko, takže rozlíšenie, kvôli ktorému tag farbu vôbec má, nefungovalo. 30 % je preto ich hodnota, nie chyba oproti receptu: krytie je jediná vec, ktorá sa im mení. Patria sem tagy vo všetkých piatich veľkostiach (vrátane náhľadu v formulári Nový tag, ktorý je tá istá rola), voľby, ktoré sa rozvinú po QWICK (MINUS/PLUS v MOVES, KLIENT a JAZDA v TRIPS -- jedna rola `.fab-choice` pre obe obrazovky) a prepínač typu v editore tagov. MINUS a PLUS na dashboarde (`.metric-card`) sem NEPATRIA: tie farbu nesú aj v sume vnútri, takže identitu majú aj bez hlbšieho tintu. */ .qwick-surface .qwick-tag-pill, .qwick-surface .fab-choice, .qwick-surface .tag-editor-type{ --qwick-control-tint-alpha:30%; } /* História adries má siluetu a rám tagovej pilulky, ale pôvodný neutrálny biely tint poľa. Odistenie mení iba materiál na rolu Vymazať; text ostáva čitateľný v pôvodnej farbe. */ .qwick-surface .qwick-history-surface{ --qwick-control-tint:#fff; --qwick-control-tint-alpha:15%; color:var(--text); } .qwick-surface .qwick-history-delete-armed{ --qwick-control-tint:var(--qwick-delete); --qwick-control-tint-alpha:30%; color:var(--text); } /* POMENOVANÉ HĹBKY TINTU nie sú lokálne prepisy. Staršie hĺbky ostávajú dostupné pre nemapové plochy; výrazné farebné ovládanie používa 70 %. Modifikátor mení iba spoločnú premennú materiálu; nekreslí druhú výplň. Stojí za receptom aj za hlbším tintom voľby (`.fab-choice` 30 %), takže pri rovnakej špecificite vyhrá poradím. */ .qwick-surface .qwick-control-tint-15{ --qwick-control-tint-alpha:15%; } .qwick-surface .qwick-control-tint-30{ --qwick-control-tint-alpha:30%; } .qwick-surface .qwick-control-tint-50{ --qwick-control-tint-alpha:50%; } .qwick-surface .qwick-control-tint-70{ --qwick-control-tint-alpha:70%; --qwick-control-edge:currentColor; } /* ---- výnimky: text a identita sa rozchádzajú --------------------------- Sú tu VŠETKY. Keď prvku farba textu sadne na jeho identitu, nepatrí sem -- `currentColor` mu stačí. */ /* Upraviť nesie tmavomodrú výplň, ale svetlejší text. Pri 70 % variante spoločný recept použije tú istú svetlú farbu textu aj na okraj, takže ZÁPIS a ostatné výrazné akcie už nepotrebujú lokálne border pravidlo. */ .qwick-surface .qwick-action-edit{ --qwick-control-tint:var(--qwick-edit); } /* MINUS a PLUS na dashboarde majú biely titulok a farbu nesie až suma vnútri, takže `currentColor` by im dal biely tint. Identitu tu určuje okraj: červená pre výdavok, zelená pre príjem. Adresuje sa ROLA (`.metric-card.expense`), nie `#expenseCard` -- ID by pravidlo zamklo za MOVES. */ .qwick-surface .metric-card.expense{ --qwick-control-tint:var(--danger); } .qwick-surface .metric-card.income{ --qwick-control-tint:var(--mint); } /* Späť má bielu šípku na žltej identite -- rovnaký rozchod ako Upraviť. `.qwick-back-yellow` je zdieľaná značka: nesie ju každé tlačidlo Späť s touto identitou aj v module, takže základ nemusí poznať názvy prvkov modulu. */ .qwick-surface .qwick-entry-back, .qwick-surface .qwick-back-yellow, .qwick-surface .tag-editor-overlay .tag-settings-back{ --qwick-control-tint:#ffd43b; } /* Dátumová pilulka je modrá naprieč celým QWICK -- aj v module, kde je akcent zelený. Farbu textu jej dáva `styles/15-sheet.css` (`color:var(--ice)`), takže `currentColor` by tu stačilo; napriek tomu je vypísaná, lebo pilulka stojí aj v kontextoch, ktoré si farbu textu prepisujú na stav (dnes/prázdne), a identita sa s tým meniť nesmie. */ .qwick-surface .date-control, .qwick-surface .qwick-entry-date{ --qwick-control-tint:var(--ice); } /* ---- stav: dátum v detaile záznamu nie je ovládací prvok --------------- V detaile sa dátum číta, neklikáva. Vtedy má vyzerať ako POLE, nie ako tlačidlo: biely tint 15 % a priehľadný okraj, teda presne materiál poľa a karty záznamu. Stav sa tu prepisuje cez tie isté dve premenné ako všetko ostatné, takže výplň má naďalej jediný zdroj -- keby si ho `08-fab-and-tag-surfaces.css` kreslil sám, materiál by mal druhého majiteľa a rozišli by sa. */ .qwick-surface :is(#entryOverlay.move-detail-mode,.qwick-record-detail-mode) .date-control{ --qwick-control-tint:#fff; --qwick-control-tint-alpha:15%; border-color:var(--glass-field-edge); } /* ---- jedno tlačidlo, farba podľa aktívnej plochy ----------------------- QWICK je JEDEN prvok pre celú aplikáciu, takže farbu nemôže dostať z plochy, na ktorej stojí -- žiadnu takú nemá. Rolu `--accent` mu na jeho vrstvu zapisuje ťah medzi plochami (`scripts/22-qwick-module-crossfade.js`), a to MIEŠANÚ tým istým `progress`, akým sa miešajú priehľadnosť a rozostrenie -- farba sa teda vezie na prste a ide oboma smermi rovnako rýchlo. Keď ťah dosadne, definitívnu hodnotu zapíše `scripts/21-qwick-modules.js` podľa plochy, ktorá zostala. Základ tak nepozná zelenú TRIPS ani farbu žiadneho ďalšieho modulu -- iba ju odmeria. PREČO TU NIE JE ŽIADNY PRECHOD FARBY. Počas ťahu sa hodnota prepisuje každý snímok, takže akýkoľvek `transition` by ju za prstom oneskoroval. Prechod má zmysel jedine pri DOSADNUTÍ a nestojí tu, ale v `styles/08-fab-and-tag-surfaces.css` -- pri pravidle, ktoré `transition` tlačidla vlastní s `!important`. Tento súbor `!important` nepoužíva a používať nesmie. */