/* Tmavý režim rozhrania /v2 — jedna override vrstva navrch. * * Načítava sa ako POSLEDNÝ štýl, takže sa v ostatných súboroch nemuselo meniť * nič a celá funkcia sa dá vypnúť zmazaním tohto súboru + includu * `templates/v2/_head_theme.html`. Rovnaký postup ako pri redizajne * Bento/Glass: reverzibilné jedným blokom, nie prepisovanie základu. * * Ako sa prepína: atribút `data-theme` na . Nastavuje ho inline skript * v hlavičke EŠTE PRED prvým vykreslením — bez toho by pri každom načítaní * blikla svetlá téma. Voľba sa pamätá v `localStorage` pod kľúčom `v2_theme` * a má TRI stavy: * 'system' (predvolený) → riadi sa `prefers-color-scheme` operačného systému * 'light' / 'dark' → človek rozhodol a jeho rozhodnutie platí * V atribúte `data-theme` je VYHODNOTENÝ výsledok (light|dark), v * `data-theme-pref` pôvodná voľba. Vďaka tomu tu nemusí byť tá istá tabuľka * farieb druhýkrát v `@media (prefers-color-scheme: dark)`. * * Prečo prepis premenných a nie prepis pravidiel: všetky farby /v2 sú tokeny * v `:root` (dashboard.css). Tmavá téma tak stojí na ~20 riadkoch; zvyšok * súboru rieši len miesta, kde je farba zapísaná natvrdo a token ju nezachytí. */ /* ── Tokeny ────────────────────────────────────────────────────────────── * * NIE JE to inverzia svetlej témy. Tri veci sa správajú inak: * 1. Priesvitné plochy. `--surface` bola biela s alfou (plocha „vystúpi" * nad podklad). Na tmavom to nefunguje — biela s alfou dá mliečny závoj. * Preto tmavý modrastý podklad s alfou a povýšenie robí SVETLÝ okraj * (`--stroke` je odteraz biela .1), nie tieň. * 2. Tiene. Na svetlom oddeľujú, na tmavom ich takmer nevidno — sú preto * čierne a hlbšie, a hlavnú prácu preberá okraj. * 3. Akcenty. Sýte farby (rose 500, amber 700, green 700) majú na tmavom * podklade kontrast pod 3:1 — text v nich sa nedá čítať. Posúvajú sa * preto o 2–3 stupne nahor (400-ky), čím kontrast vyskočí nad 6:1. * * Namerané kontrasty voči `--bg` (#0e131d, WCAG 2.1 pomer jasu): * --ink 15.9:1 bežný text (norma pre AA je 4.5:1) * --ink-2 8.7:1 podnadpisy * --ink-3 5.2:1 tlmený text (norma pre veľký/tlmený text 3:1) * --teal 10.0:1 --green 9.7:1 --amber 11.1:1 --rose 6.9:1 * --indigo 6.2:1 --sky 8.7:1 --lime 12.3:1 --purple 7.0:1 * --fuchsia 7.6:1 * (Prepočítava ich test `tests/test_v2_dark.py`, takže sa nedajú ticho pokaziť.) */ :root[data-theme="dark"]{ --bg:#0e131d; --surface:rgba(30,38,55,.72); --surface-strong:rgba(37,46,66,.9); --stroke:rgba(255,255,255,.1); --ink:#e9edf7; --ink-2:#a8b2c8; --ink-3:#7d879e; --teal:#2dd4bf; --indigo:#818cf8; --amber:#fbbf24; --amber-soft:rgba(251,191,36,.16); --rose:#fb7185; --rose-soft:rgba(251,113,133,.16); --green:#34d399; --green-soft:rgba(52,211,153,.15); --led-on:#22c55e; --led-on-line:#4ade80; --led-glow:rgba(74,222,128,.8); --led-halo:rgba(34,197,94,.28); --led-soft:rgba(34,197,94,.2); --indigo-soft:rgba(129,140,248,.16); --teal-soft:rgba(45,212,191,.16); --lime:#a3e635; --sky:#38bdf8; --purple:#c084fc; --fuchsia:#e879f9; --orange:#fb923c; --yellow:#facc15; /* 8,0:1 a 12,4:1 voči --bg */ --safety:#fde047; --safety-soft:rgba(253,224,71,.16); /* citrónová — `--amber` je výstup */ --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 32px -10px rgba(0,0,0,.7); --shadow-lift:0 2px 4px rgba(0,0,0,.55),0 24px 48px -12px rgba(0,0,0,.85); /* Pomocné tokeny LEN pre túto vrstvu. Svetlá téma má desiatky miest so zápisom `rgba(28,35,55,.0X)` — tmavá kresba na svetlom podklade. Na tmavom je taký prekryv neviditeľný, musí sa otočiť na svetlý. Pomenované preto, aby sa dala hodnota doladiť na jednom mieste a nie v šesťdesiatich. */ --d-ov1:rgba(255,255,255,.05); /* dráhy pruhov, jemné podklady buniek */ --d-ov2:rgba(255,255,255,.09); /* hover riadku a ikonového tlačidla */ /* Škála (dashboard.css): hover a vlas sa v tme otáčajú na biely prekryv. */ --hover:rgba(255,255,255,.05); --line-soft:rgba(255,255,255,.08); --hover-row:rgba(45,212,191,.07); --cover:rgba(24,31,46,.97); /* Písmo na vyplnenej akcentovej ploche. Akcenty sú tu 400-ky (svetlé), takže biely text na nich má 1,5–2,7:1 — odznak s počtom alarmov, „Vymazať" alebo číslo kroku sa nedá prečítať. Tmavý atrament dá voči každému akcentu nad 6:1 (--amber 10,7 · --teal 9,7 · --green 9,5 · --rose 6,1 · --indigo 6,0). Je to tá istá hodnota ako --bg, ale ZÁMERNE vlastný token: nie je to pozadie stránky, je to farba písma na akcente. */ --on-accent:#0e131d; --d-ov3:rgba(255,255,255,.14); /* stlačené/aktívne, silnejší hover */ --d-line:rgba(255,255,255,.1); /* oddeľovače a orámovanie */ --d-line2:rgba(255,255,255,.18); /* prerušované okraje, výraznejšie čiary */ --d-field:rgba(6,10,18,.55); /* vstupné pole — ZAPUSTENÉ, tmavšie než plocha */ --field-bg:var(--d-field); /* „takto vyzerá pole" pre legendy a vzorky */ /* Neutrálne podklady: v svetle ink-tint, v tme sa OTÁČAJÚ na biely prekryv (inak zmiznú). Napojené na už existujúce --d-ov*, nech je hodnota na jednom mieste. Tým sa opravia aj stránky, ktoré dark override nemali. */ --fill-1:var(--d-ov1); --fill-2:var(--d-ov2); --fill-3:var(--d-ov3); /* Vlas mriežky a druhá plocha. V svetle sú to atramentové prekryvy, tu sa musia otočiť na biely — inak na #0e131d nie je vidieť nič. `--d-line` bol na to pripravený od začiatku („oddeľovače a orámovanie"), len ho dovtedy nepoužívalo ani jedno pravidlo, lebo `--line` nikde neexistoval. */ --line:var(--d-line); --surface-2:var(--d-ov1); /* Okraj .ghost tlačidiel: vo svetle atramentový nádych (biele tlačidlo na bielom pozadí splývalo), v tme rovnaká biela linka ako --stroke. */ --btn-line:rgba(255,255,255,.14); /* Okraje sfarbených plôch v tme — jasnejšie akcenty tmavej palety. */ --green-line:rgba(52,211,153,.4); --rose-line:rgba(251,113,133,.45); --amber-line:rgba(251,191,36,.4); --indigo-line:rgba(129,140,248,.4); --teal-line:rgba(45,212,191,.4); --d-pop:#1b2436; /* krycia plocha: popover, modal, tooltip */ /* Trvalé varovanie (v2Warn v core.js) sa kreslí inline štýlom z JS — token je jediný spôsob, ako doňho z tejto vrstvy siahnuť. */ --warn-bg:rgba(251,113,133,.14); --warn-ink:#fecdd3; --warn-line:rgba(251,113,133,.4); /* ── Stránkové palety ────────────────────────────────────────────────── Dve obrazovky majú farbu, ktorú paleta akcentov pomenovať nevie: škálu. Ich tokeny vznikajú vo VLASTNOM súbore (`labor.css`, `worktime.css`) — tu je len druhá sada hodnôt, presne tak, ako to robí zvyšok tejto vrstvy. Predtým to bolo 26 stránkových pravidiel `:root[data-theme="dark"] .lb-…`, teda tmavá téma na dvoch miestach. Teplotná škála výkazu hodín: sýte 500-ky majú na tmavom podklade pod 3:1, preto o stupeň hore; atrament v bunke sa otáča na tmavý. */ --lb-l1:rgba(96,165,250,.2); --lb-l1-ink:#bfdbfe; --lb-l2:rgba(96,165,250,.42); --lb-l2-ink:#eff6ff; --lb-l3:#3b82f6; --lb-l3-ink:#fff; --lb-l4:#22c55e; --lb-l4-ink:#052e16; --lb-l5:#f87171; --lb-l5-ink:#450a0a; /* Šrafovaná „chýbajúca" bunka pracovného času: linka musí byť SVETLÁ, inak je chýbajúci deň nerozoznateľný od zapísaného — teda presne to, čo tá obrazovka rieši. */ --wt-miss-line:rgba(255,255,255,.3); color-scheme:dark; /* rolovacie lišty a natívne prvky formulárov */ } /* Svetlá téma sa explicitne prihlási — inak by prehliadač na tmavom systéme nakreslil tmavé rolovacie lišty k svetlej stránke. */ :root[data-theme="light"]{color-scheme:light} /* ── Podklad stránky ───────────────────────────────────────────────────── Farebné škvrny v pozadí sú na svetlom podklade jemné. Pri tých istých hodnotách nad tmavým vyzerá stránka ako zle skalibrovaný monitor — preto nižšia sýtosť a menej šumu. */ :root[data-theme="dark"] body::before{background: radial-gradient(900px 620px at 12% -8%, rgba(45,212,191,.1), transparent 60%), radial-gradient(1000px 700px at 88% 4%, rgba(99,102,241,.12), transparent 62%), radial-gradient(820px 640px at 78% 96%, rgba(251,113,133,.07), transparent 58%), radial-gradient(700px 520px at 6% 88%, rgba(45,212,191,.06), transparent 60%), var(--bg)} :root[data-theme="dark"] body::after{opacity:.28} /* ── Prekryvy: hover, oddeľovače, dráhy ────────────────────────────────── Všetko nižšie je v základe `rgba(28,35,55,.0X)` — tmavý atrament na svetlom. Na tmavom podklade z toho nie je nič, riadok pod myšou prestal reagovať a tabuľka prišla o mriežku. */ :root[data-theme="dark"] .rail-item:hover, :root[data-theme="dark"] .rail-sub-item:hover, :root[data-theme="dark"] .dd-row:hover, :root[data-theme="dark"] .dd-btn:hover, :root[data-theme="dark"] .gear:hover, :root[data-theme="dark"] a.list-row:hover, :root[data-theme="dark"] a.tl-row:hover, :root[data-theme="dark"] .modal-head button, :root[data-theme="dark"] .cp-item:hover, :root[data-theme="dark"] .cp-link:hover, :root[data-theme="dark"] .ad-toc-i:hover, :root[data-theme="dark"] .md-tab:hover, :root[data-theme="dark"] .pf-kind:hover, :root[data-theme="dark"] .rl-perm:hover, :root[data-theme="dark"] .brow:hover, :root[data-theme="dark"] .use-row:hover, :root[data-theme="dark"] .mv-sugg-row:hover, :root[data-theme="dark"] .ss-opt:hover, :root[data-theme="dark"] .ss-opt.act, :root[data-theme="dark"] .al-rank-r:hover, :root[data-theme="dark"] .al-trrow:hover, :root[data-theme="dark"] .al-trname:hover, :root[data-theme="dark"] .kb-col-m:hover, :root[data-theme="dark"] .sc-m:hover, :root[data-theme="dark"] .bl-m:hover, :root[data-theme="dark"] .wtl-row:hover, :root[data-theme="dark"] .tl-row:hover{background:var(--d-ov2)} :root[data-theme="dark"] .ab-btn, :root[data-theme="dark"] .iconbtn, :root[data-theme="dark"] .qchip, :root[data-theme="dark"] .fclear, :root[data-theme="dark"] .seg, :root[data-theme="dark"] .scope-chip, :root[data-theme="dark"] .chip.na, :root[data-theme="dark"] .tstack, :root[data-theme="dark"] .top-track, :root[data-theme="dark"] .uw .bars .track, :root[data-theme="dark"] .uw .stat, :root[data-theme="dark"] .sc-tile-b .bars .track, :root[data-theme="dark"] .sc-tile-b .stat, :root[data-theme="dark"] .sc-tile-b .kpi, :root[data-theme="dark"] .sc-copy, :root[data-theme="dark"] .wf-tname, :root[data-theme="dark"] .wf-key, :root[data-theme="dark"] .ab-chip, :root[data-theme="dark"] .ab-sev, :root[data-theme="dark"] .share-url, :root[data-theme="dark"] .mo-ro, :root[data-theme="dark"] .att-row, :root[data-theme="dark"] .mchip, :root[data-theme="dark"] .abc, :root[data-theme="dark"] .use-t, :root[data-theme="dark"] .mvh-t, :root[data-theme="dark"] .mt-quickreceive, :root[data-theme="dark"] .ptab td.img .noimg, :root[data-theme="dark"] .dr-noimg, :root[data-theme="dark"] .ro-stamp, :root[data-theme="dark"] .ro-bar, :root[data-theme="dark"] .rchip, :root[data-theme="dark"] .rt-bar, :root[data-theme="dark"] .rl-role-c, :root[data-theme="dark"] .rl-who, :root[data-theme="dark"] .rl-admin code, :root[data-theme="dark"] .us-av, :root[data-theme="dark"] .us-hint code, :root[data-theme="dark"] .st-rank-t, :root[data-theme="dark"] .md-up,:root[data-theme="dark"] .md-down, :root[data-theme="dark"] .md-mvp code, :root[data-theme="dark"] .ma-vbar, :root[data-theme="dark"] .ma-person, :root[data-theme="dark"] .ad-doc code, :root[data-theme="dark"] .ad-doc th, :root[data-theme="dark"] .cp-toolshead, :root[data-theme="dark"] .cp-tool-n code, :root[data-theme="dark"] .cp-msg-atts span, :root[data-theme="dark"] .cp-att-bar, :root[data-theme="dark"] .cp-ans code, :root[data-theme="dark"] .cp-ans .md-t th, :root[data-theme="dark"] .lg-msg, :root[data-theme="dark"] .al-sev.info, :root[data-theme="dark"] .al-sevseg.info, :root[data-theme="dark"] .al-rank-bar, :root[data-theme="dark"] .al-trbadge, :root[data-theme="dark"] .sw-cell, :root[data-theme="dark"] .kb-col-c, :root[data-theme="dark"] .kb-pri, :root[data-theme="dark"] .kb-chk, :root[data-theme="dark"] .kb-prog, :root[data-theme="dark"] .mc-n, :root[data-theme="dark"] .mc-col, :root[data-theme="dark"] .mc-arch, :root[data-theme="dark"] .mc-prog, :root[data-theme="dark"] .bl-arch-n, :root[data-theme="dark"] .tl-grid span, :root[data-theme="dark"] .tl-bar, :root[data-theme="dark"] .wtl-grid span, :root[data-theme="dark"] .wo-st, :root[data-theme="dark"] .wo-st.st-off, :root[data-theme="dark"] .wo-pri, :root[data-theme="dark"] .qbar-sep, :root[data-theme="dark"] .al-qsep, :root[data-theme="dark"] .qsep, :root[data-theme="dark"] .crumb, :root[data-theme="dark"] .dd-sep{background:var(--d-ov1)} /* Avatar správcu je VYPLNENÝ akcentom (users.css `.us-av.admin`). Skupina vyššie ho prebila (tri triedy proti dvom) na takmer priehľadný podklad, kým písmo ostalo `--on-accent` — tmavé písmo na tmavom, 1,33:1. Vráti sa výplň: `--on-accent` na `--indigo` je v tme 6,0:1. */ :root[data-theme="dark"] .us-av.admin{background:var(--indigo);color:var(--on-accent)} :root[data-theme="dark"] .ab-btn:hover, :root[data-theme="dark"] .iconbtn:hover, :root[data-theme="dark"] .qchip:hover, :root[data-theme="dark"] .fclear:hover, :root[data-theme="dark"] .cp-toolshead:hover, :root[data-theme="dark"] .al-trtog:hover, :root[data-theme="dark"] .share-foot .md-code-b:hover, :root[data-theme="dark"] .ab-chip.on.info, :root[data-theme="dark"] .al-sev-chip.on.info{background:var(--d-ov3)} /* Oddeľovače a orámovania. `border-color` samostatne, aby sa nezmazal štýl čiary (dashed/dotted) ani jej hrúbka zapísaná v základnom pravidle. */ :root[data-theme="dark"] .list-row, :root[data-theme="dark"] .act-grid, :root[data-theme="dark"] .ab-head, :root[data-theme="dark"] .ab-filters, :root[data-theme="dark"] .ab-row, :root[data-theme="dark"] .uw td, :root[data-theme="dark"] .wf-step, :root[data-theme="dark"] .wfm-foot, :root[data-theme="dark"] .wf-addcol, :root[data-theme="dark"] .wmenu-sizes button, :root[data-theme="dark"] .cat-own button, :root[data-theme="dark"] .uw-def button, :root[data-theme="dark"] .uw-ai-acts button, :root[data-theme="dark"] .wf-chips button, :root[data-theme="dark"] .wf-types button, :root[data-theme="dark"] .wf-col button, :root[data-theme="dark"] .cp-top, :root[data-theme="dark"] .cp-composer, :root[data-theme="dark"] .cp-ans .md-code, :root[data-theme="dark"] .cp-ans .md-pre, :root[data-theme="dark"] .cp-ans .md-tw, :root[data-theme="dark"] .cp-ans .md-t th, :root[data-theme="dark"] .cp-ans .md-t td, :root[data-theme="dark"] .btab thead th, :root[data-theme="dark"] .btab tbody td, :root[data-theme="dark"] .mo-head, :root[data-theme="dark"] .mo-foot, :root[data-theme="dark"] .loc-row, :root[data-theme="dark"] .use-row, :root[data-theme="dark"] .mvh-row, :root[data-theme="dark"] .ro-mfr-t td, :root[data-theme="dark"] .rl-cat-h, :root[data-theme="dark"] .md-tree-i, :root[data-theme="dark"] .ad-doc h2, :root[data-theme="dark"] .ad-doc hr, :root[data-theme="dark"] .ad-doc th,:root[data-theme="dark"] .ad-doc td, :root[data-theme="dark"] .lg-foot, :root[data-theme="dark"] .al-timewrap, :root[data-theme="dark"] .al-rankwrap, :root[data-theme="dark"] .al-trrow.lvl0, :root[data-theme="dark"] .tl-lists, :root[data-theme="dark"] .tl-head, :root[data-theme="dark"] .tl-group, :root[data-theme="dark"] .bl-foot, :root[data-theme="dark"] .bl-arch, :root[data-theme="dark"] .bl-new, :root[data-theme="dark"] .kb-add, :root[data-theme="dark"] .mc-h, :root[data-theme="dark"] .sc-nums, :root[data-theme="dark"] .sc-tile-h, :root[data-theme="dark"] .sc-params, :root[data-theme="dark"] .sc-tile-b th,:root[data-theme="dark"] .sc-tile-b td, :root[data-theme="dark"] .wtl-head, :root[data-theme="dark"] .wtl-row:not(:last-child), :root[data-theme="dark"] .dr-noimg, :root[data-theme="dark"] .rtab .ro-pid{border-color:var(--d-line2)} /* ── Krycie plochy ─────────────────────────────────────────────────────── Popover, modal a tooltip NESMÚ byť priesvitné — prekrývajú obsah a cezeň sa dá čítať. Na svetlom to riešila skoro nepriehľadná biela; tu je to plná tmavá plocha o stupeň svetlejšia než podklad, aby bolo vidieť jej hranu. */ :root[data-theme="dark"] .rail-sub, :root[data-theme="dark"] .mv-sugg, :root[data-theme="dark"] .ss-list, :root[data-theme="dark"] .share-box, :root[data-theme="dark"] .code-prev{background:var(--d-pop)} /* Tooltip a bublinové odznaky boli tmavé už v svetlej téme — na tmavom podklade splynuli s ním, preto svetlejšia plocha a hrana. */ :root[data-theme="dark"] .tip, :root[data-theme="dark"] .tip::before, :root[data-theme="dark"] .spark-tip, :root[data-theme="dark"] .bar-badge, :root[data-theme="dark"] .toast{background:#2b3548;color:var(--ink)} :root[data-theme="dark"] .tip, :root[data-theme="dark"] .spark-tip, :root[data-theme="dark"] .toast{box-shadow:0 12px 28px -8px rgba(0,0,0,.8)} /* Zatemnenie pod modálom/zásuvkou musí byť SILNEJŠIE než na svetlom — tmavý závoj nad tmavou stránkou inak nie je vidieť a nie je jasné, čo je vpredu. */ :root[data-theme="dark"] .modal-back, :root[data-theme="dark"] .drawer-back, :root[data-theme="dark"] .nav-backdrop, :root[data-theme="dark"] .code-prev-back{background:rgba(0,0,0,.62)} /* ── Plochy, ktoré boli natvrdo biele ──────────────────────────────────── Token by ich nezachytil: majú zapísané `#fff` alebo `rgba(255,255,255,.x)` priamo v pravidle. V tmavej téme by z nich ostali svietiace obdĺžniky. */ :root[data-theme="dark"] .inv-card, :root[data-theme="dark"] .cat-item, :root[data-theme="dark"] .uw-def, :root[data-theme="dark"] .uw-ai-ex button, :root[data-theme="dark"] .wf-prevbox, :root[data-theme="dark"] .dr-grid>div, :root[data-theme="dark"] .dr-block, :root[data-theme="dark"] .mem-row, :root[data-theme="dark"] .md-cell:hover, :root[data-theme="dark"] .ro-mfr-b, :root[data-theme="dark"] .ad-missing code, :root[data-theme="dark"] .cp-ans{background:rgba(255,255,255,.06)} :root[data-theme="dark"] .ro-mfr-b:hover{background:rgba(255,255,255,.12)} :root[data-theme="dark"] .seg button.active, :root[data-theme="dark"] .seg a.active, :root[data-theme="dark"] .wmenu-sizes button, :root[data-theme="dark"] .cat-own button, :root[data-theme="dark"] .uw-def button, :root[data-theme="dark"] .uw-ai-acts button, :root[data-theme="dark"] .wf-chips button, :root[data-theme="dark"] .wf-types button, :root[data-theme="dark"] .wf-col button, :root[data-theme="dark"] .code-prev-b, :root[data-theme="dark"] .cp-att-retry{background:var(--surface-strong);color:var(--ink)} /* …a hneď za tým sa musí VRÁTIŤ vybraný chip. Pravidlo vyššie je o triedu špecifickejšie než `.wf-chips button.on` v svetlej vrstve (0,3,1 vs 0,2,1), takže by ho prebilo a vybraný filter widgetu by v tmavom režime vyzeral nevybrane. Rovnaká pasca ako pri `.mc-cl.active` nižšie. */ :root[data-theme="dark"] .wf-chips button.on{background:var(--teal); border-color:transparent;color:var(--on-accent)} /* Náhľad zdieľanej stránky je CUDZÍ obsah v ráme — ten si vlastnú tému nesie sám a musí ostať na bielom, inak by sa čierny text stratil. */ :root[data-theme="dark"] .code-prev-f{background:#fff} :root[data-theme="dark"] .tile.copilot{background: linear-gradient(140deg,rgba(255,255,255,.06),rgba(255,255,255,.02)), linear-gradient(140deg,rgba(45,212,191,.18),rgba(99,102,241,.18) 55%,rgba(251,113,133,.14))} :root[data-theme="dark"] .errbox{background: linear-gradient(160deg,rgba(251,113,133,.16),rgba(255,255,255,.03))} :root[data-theme="dark"] .spark-dot{border-color:var(--bg)} :root[data-theme="dark"] .skl{background:linear-gradient(90deg, rgba(255,255,255,.04) 25%,rgba(255,255,255,.1) 37%,rgba(255,255,255,.04) 63%); background-size:400% 100%} /* ── Vstupné polia ─────────────────────────────────────────────────────── Pole musí byť ZAPUSTENÉ (tmavšie než plocha okolo), nie vystúpené — inak sa na tmavom nedá odlíšiť od tlačidla. Rovnaký princíp ako biele pole na šedom podklade v svetlej téme, len naopak. Zoznam obalov je ZHODNÝ so spoločným pravidlom pre polia v dashboard.css — keď tam pribudne obal, musí pribudnúť aj sem, inak bude to jedno pole v tmavom režime svietiť bielou. Presne to sa stalo `.md-f input[type=text]`: tmavá vrstva menovala len `[type=search]` a `select`, takže textové polia v zásuvke číselníkov ostali biele. */ :root[data-theme="dark"] :is(.us-f,.sc-f,.wf-f,.wf-col,.mv-f,.md-f,.mo-f,.wo-w, .wo-range,.lg-input,.cp-form,.cp-compose,.uw-ai,.md-tree-bar, .fsearch,.us-search,.rl-search,.ad-search,.al-trfind) :is(input:not(:where([type=checkbox],[type=radio],[type=color],[type=file],[type=range])), select,textarea), :root[data-theme="dark"] .field, :root[data-theme="dark"] .field-sm, :root[data-theme="dark"] .dd-search, :root[data-theme="dark"] .md-in, :root[data-theme="dark"] .md-sel, :root[data-theme="dark"] .fin{background-color:var(--d-field);color:var(--ink); border-color:var(--d-line2)} /* POZOR: `background-color`, NIE skratka `background`. Skratka zruší aj `background-repeat` a `background-position`, a tie sem nesú šípku rozbaľovacieho zoznamu. Obrázok šípky pritom prežije (nastavuje ho špecifickejšie pravidlo), takže sa vydláždi po celej šírke poľa — a stane sa to LEN v tmavom režime, kde toto pravidlo platí. */ /* Zaškrtávacie pole a posuvník kreslí prehliadač — `accent-color` mu dá len výplň, dráhu si berie zo systému. Bez `color-scheme:dark` (je v tokenoch vyššie) by boli obe biele. Dráha vypnutého posuvníka je v svetlej téme tmavý atrament s alfou, čo je na tmavom podklade nič. */ :root[data-theme="dark"] .chk:hover{background:var(--d-ov2);color:var(--ink)} /* Dráha VYPNUTÉHO posuvníka je v svetlej téme tmavý atrament s alfou — na tmavom podklade z nej nie je nič a prepínač vyzerá ako chýbajúci prvok. POZOR na špecifickosť: toto pravidlo (`:root[data-theme] .switch>i`) je ŠPECIFICKEJŠIE než zapnutý stav v základe (`.switch[aria-checked]>i`), takže ho prebije — a prepínač potom v tmavom režime vyzerá vypnuto, hoci je zapnutý (nahlásené zo Štruktúry a číselníkov: „aktívna" pri vypnutom posuvníku). Zapnutý stav preto MUSÍ mať tmavý náprotivok, nestačí sa spoliehať, že „farebný prechod sa nemení". */ :root[data-theme="dark"] .switch>i{background:var(--d-ov3); border-color:var(--d-line2)} /* Akcenty o stupeň svetlejšie, rovnako ako `--teal` a `--indigo` v tmavej palete — pôvodný prechod je na tmavom podklade tmavý. */ :root[data-theme="dark"] .switch>input:checked+i, :root[data-theme="dark"] .switch[aria-checked="true"]>i{ background:linear-gradient(135deg,#2dd4bf,#818cf8);border-color:transparent} :root[data-theme="dark"] .switch>i::after{background:#e9edf7; box-shadow:0 1px 3px rgba(0,0,0,.6)} /* ── Grafy a SVG ───────────────────────────────────────────────────────── Farby sú tu v atribútoch (`fill`, `stroke`) v JS šablónach komponentov — token sa na ne nedostane. CSS vlastnosť `fill`/`stroke` ale prezentačný atribút prebíja, takže sa dajú opraviť odtiaľto bez zásahu do JS. */ :root[data-theme="dark"] .gauge text, :root[data-theme="dark"] .pie-svg text{fill:var(--ink)} :root[data-theme="dark"] .gauge line{stroke:var(--ink)} /* Prvý kruh je vždy nevyplnená dráha (`rgba(28,35,55,.08)`), farebné segmenty sa kreslia až za ňou. */ :root[data-theme="dark"] .gauge circle:first-of-type, :root[data-theme="dark"] .pie-svg circle:first-of-type, :root[data-theme="dark"] .ma-ring .track{stroke:rgba(255,255,255,.12)} /* Prerušovaná čiara predpovede (`#c3c8d4`) a čiara 80 % v Paretovi. */ :root[data-theme="dark"] .spark-box polyline[stroke-dasharray], :root[data-theme="dark"] .pareto-80{stroke:var(--ink-3)} :root[data-theme="dark"] .al-axis{stroke:rgba(255,255,255,.22)} :root[data-theme="dark"] .al-cell, :root[data-theme="dark"] .tl-lane{fill:rgba(255,255,255,.06)} :root[data-theme="dark"] .tl-bar.info{fill:rgba(255,255,255,.45)} :root[data-theme="dark"] .tl-shade{background:rgba(0,0,0,.45)} :root[data-theme="dark"] .bars .bar.fut{background:rgba(255,255,255,.14)} :root[data-theme="dark"] .spark-guide{background:rgba(255,255,255,.3)} /* Blok kódu v odpovedi Copilota (`#1e2536`) je tmavý už v svetlej téme — ostáva, len sa mu pridá hrana, aby nesplynul s plochou pod ním. */ :root[data-theme="dark"] .cp-ans .md-pre, :root[data-theme="dark"] .cp-ans .md-code{border-color:rgba(255,255,255,.14)} /* Pätička „Overiť v TIA" pod blokom kódu má ten istý rám ako blok. */ :root[data-theme="dark"] .cp-scl-row{border-color:rgba(255,255,255,.14); border-top-color:rgba(255,255,255,.08)} /* ── Biela, ktorá MUSÍ ostať biela ─────────────────────────────────────── Obrázky dielov sú fotky s odstráneným pozadím a QR kódy sú čierna kresba na bielom. Tmavý podklad by z obrázkov spravil siluety a QR by čítačka NEPREČÍTALA — norma počíta so svetlým podkladom okolo kódu. Pravidlo je tu zapísané zámerne (hoci len opakuje základ) ako poistka proti budúcemu plošnému prepisu pozadí v tejto vrstve. Patrí sem aj náhľad pod myšou (`.v2-zoom`) a miniatúry výrezov z rozkresu manuálu (`.evs-th`, `.rc-evimg`, `.dr-evoffer img`) — čierna kresba na bielom, ukladá sa ako obrázok dielu. */ :root[data-theme="dark"] .ptab td.img img, :root[data-theme="dark"] .dr-img, :root[data-theme="dark"] .dr-imgbox img, :root[data-theme="dark"] .v2-zoom, :root[data-theme="dark"] .evs-th, :root[data-theme="dark"] .rc-evimg, :root[data-theme="dark"] .dr-evoffer img, :root[data-theme="dark"] .dr-qr img{background:#fff} /* ── Prepínač vzhľadu ──────────────────────────────────────────────────── Panel stavia core.js z tried railu (`.rail-sub`, `.rail-sub-item`), takže dedí vzhľad podmenu vrátane tmavej varianty vyššie. Tu ostáva len to, čo panelu v podmenu chýba: kruhová vzorka farby témy pri každej voľbe. */ .theme-sw{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none; border:1px solid rgba(28,35,55,.25)} .theme-sw.light{background:#eef1f8} .theme-sw.dark{background:#0e131d} .theme-sw.system{background:linear-gradient(90deg,#eef1f8 50%,#0e131d 50%)} :root[data-theme="dark"] .theme-sw{border-color:rgba(255,255,255,.35)} /* ── Vysúvacie plochy: zásuvka, modál, ponuky ──────────────────────────── Tie NIE SÚ postavené na tokene `--surface`, ale majú vlastné svetlé pozadie `rgba(247,249,253,.97)` s rozostrením — vznikli skôr, než tokeny existovali, a preto ich prefarbenie premenných minulo. V tmavom režime tak zásuvka aj modál svietili takmer nabielo, hoci stránka pod nimi bola tmavá. Hodnota je tmavšia než `--surface-strong`: plocha má nad obsahom „vystúpiť", a to sa v tmavom robí kontrastom voči pozadiu, nie tieňom. */ :root[data-theme="dark"] .drawer, :root[data-theme="dark"] .modal, :root[data-theme="dark"] .dd-panel, :root[data-theme="dark"] .ab-panel, :root[data-theme="dark"] .rl-bar, :root[data-theme="dark"] .bulkbar, :root[data-theme="dark"] .share-box{ background:rgba(24,31,46,.97); border-color:rgba(255,255,255,.1)} /* Tlačidlo `.ghost` má tiež vlastné biele priesvitné pozadie. Vnútri zásuvky a modálu na tmavom podklade svietilo ako svetlá dlaždica — preto sa tu prekrýva samostatne, nie cez `--surface`. */ :root[data-theme="dark"] .drawer .ghost, :root[data-theme="dark"] .modal .ghost, :root[data-theme="dark"] .dd-panel .ghost, :root[data-theme="dark"] .bulkbar .ghost{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:var(--ink-2)} :root[data-theme="dark"] .drawer .ghost:hover, :root[data-theme="dark"] .modal .ghost:hover, :root[data-theme="dark"] .dd-panel .ghost:hover, :root[data-theme="dark"] .bulkbar .ghost:hover{ background:rgba(255,255,255,.13);color:var(--ink)} /* Chybová hláška Copilota mala svetloružové pozadie — na tmavom by svietila. Farba písma ostáva ružová, len sa zosvetlí (rovnako ako `--rose`). */ :root[data-theme="dark"] .cp-ans.err{ background:rgba(251,113,133,.12);border-color:rgba(251,113,133,.3)} /* ── MCP server (/v2/mcp) ──────────────────────────────────────────────── Katalóg stojí na tokenoch, takže tmavú tému dostal sám. Doplniť treba len plochy kreslené tmavým atramentom s alfou (`rgba(28,35,55,…)`) — tie sú na tmavom podklade neviditeľné, takže z ukážky kontraktu aj z riadka tokenu ostane holý text bez rámu. */ :root[data-theme="dark"] .mc-contract pre, :root[data-theme="dark"] .mc-contract code, :root[data-theme="dark"] .mc-grp-h span, :root[data-theme="dark"] .mc-b, :root[data-theme="dark"] .mc-tok{ background:rgba(255,255,255,.07)} :root[data-theme="dark"] .mc-t + .mc-t, :root[data-theme="dark"] .mc-tbl td, :root[data-theme="dark"] .mc-scope{ border-color:rgba(255,255,255,.09)} /* Farebné odznaky si pozadie nesú samy (`--*-soft` sú v tmavej téme predefinované), preto sa neutrálne pravidlo vyššie nesmie natiahnuť aj na ne — inak by druh nástroja aj transport zošediveli na jednu kôpku. */ :root[data-theme="dark"] .mc-b.k-read{background:var(--green-soft)} :root[data-theme="dark"] .mc-b.k-proposal, :root[data-theme="dark"] .mc-b.perm.free{background:var(--amber-soft)} :root[data-theme="dark"] .mc-b.k-write{background:var(--rose-soft)} :root[data-theme="dark"] .mc-b.tr-mcp{background:rgba(129,140,248,.18)} :root[data-theme="dark"] .mc-b.tr-copilot{background:rgba(192,132,252,.18)} :root[data-theme="dark"] .mc-b.tr-http{background:rgba(56,189,248,.16)} :root[data-theme="dark"] .mc-b.us{background:rgba(240,171,252,.16)} /* Návod na nastavenie klienta: záložka klienta, karta kroku a blok s adresou servera stoja na tmavom atramente s alfou, takže na tmavom podklade z nich neostane nič — z adresy by ostal holý riadok bez rámu a tlačidlo `Kopírovať` by v ňom plávalo samo. */ :root[data-theme="dark"] .mc-cl{background-color:rgba(255,255,255,.07)} :root[data-theme="dark"] .mc-step{background:rgba(255,255,255,.05)} :root[data-theme="dark"] .mc-url{background-color:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12)} /* A hneď za tým sa musia VRÁTIŤ stavy, ktoré nesú význam. Pravidlá vyššie sú o triedu špecifickejšie než `.mc-cl.active` a `.mc-step.no` v svetlej vrstve, takže by ich prebili — vybraná záložka by v tmavom režime vyzerala nevybrane a krok „toto sa nedá" ako každý iný. */ :root[data-theme="dark"] .mc-cl.active{background-color:var(--teal);color:var(--on-accent)} :root[data-theme="dark"] .mc-step.no{background:var(--rose-soft); border-color:rgba(251,113,133,.3)} /* ── Predpisy a normy (/v2/predpisy, /v2/vyhlaska-508) ─────────────────── Stránky stoja na tokenoch, takže tmavú tému dostali samy. Doplniť treba dve skupiny miest: 1. plochy a čiary kreslené tmavým atramentom s alfou (`rgba(28,35,55,…)`) — na tmavom podklade z nich neostane nič a zo zoznamu povinností aj z lehôt sa stane súvislý text bez mriežky, 2. farebné zvýraznenia zapísané SVETLÝM odtieňom akcentu (teal 600, purple 700, indigo 600). Tie sa v tmavej téme posúvajú nahor, takže ich priesvitná verzia musí ísť s nimi — inak zvýraznená položka vyzerá rovnako ako neoznačená. */ :root[data-theme="dark"] .pr-code, :root[data-theme="dark"] .pr-kr, :root[data-theme="dark"] .pr-oblast, :root[data-theme="dark"] .vy-note, :root[data-theme="dark"] .vy-grp-b.c, :root[data-theme="dark"] .vy-leh-i{background-color:rgba(255,255,255,.07)} /* Kód krajiny bol tmavý odznak s bielym písmom — na tmavom splynul s plochou. */ :root[data-theme="dark"] .pr-kr{color:var(--ink)} :root[data-theme="dark"] .vy-tab:hover{background-color:var(--d-ov2)} :root[data-theme="dark"] .pr-pov-r, :root[data-theme="dark"] .pr-rel-i, :root[data-theme="dark"] .vy-item, :root[data-theme="dark"] .vy-row, :root[data-theme="dark"] .vy-legend, :root[data-theme="dark"] .vy-leh-i{border-color:rgba(255,255,255,.1)} :root[data-theme="dark"] .vy-tab.on{background-color:rgba(45,212,191,.18)} :root[data-theme="dark"] .vy-item.on, :root[data-theme="dark"] .vy-vyber{background-color:rgba(45,212,191,.14); border-color:rgba(45,212,191,.32)} :root[data-theme="dark"] .vy-item.on{border-top-color:transparent} :root[data-theme="dark"] .pr-ucel.klas{background-color:rgba(192,132,252,.18)} :root[data-theme="dark"] .pr-ai{background-color:rgba(192,132,252,.12); border-color:rgba(192,132,252,.28)} :root[data-theme="dark"] .pr-ai code{background-color:rgba(192,132,252,.2)} :root[data-theme="dark"] .vy-kto{background-color:rgba(129,140,248,.2)} :root[data-theme="dark"] .pr-todo{border-color:rgba(251,191,36,.35)} :root[data-theme="dark"] .pr-err{border-color:rgba(251,113,133,.35)} /* Vybraný filter: svetlá téma má sýtu tyrkysovú s bielym písmom, v tmavej je `--teal` svetlý odtieň — biele písmo by na ňom nebolo čitateľné. */ :root[data-theme="dark"] .pr-f.on{background-color:rgba(45,212,191,.2); border-color:rgba(45,212,191,.36);color:var(--teal)} /* Blok s príkladom volania je tmavý v OBOCH témach (číta sa v ňom štruktúra, nie próza). Na tmavom podklade mu ale splynie hrana s panelom pod ním — preto tenký rám, nie iná farba. */ :root[data-theme="dark"] .mc-ex pre{ border:1px solid rgba(255,255,255,.09)} /* Tlačidlo `Kopírovať` stojí NAD blokom, teda na ploche panela — v svetlej téme má tmavý atrament s alfou, ktorý na tmavom podklade zmizne. */ :root[data-theme="dark"] .mc-copy{ background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)} :root[data-theme="dark"] .mc-copy:hover{background-color:rgba(255,255,255,.15)} /* ── Čo je nové (/v2/changelog) ─────────────────────────────────────────── Stránka stojí na tokenoch, takže väčšinu témy dostala sama. Doplniť treba dve skupiny miest — rovnaké dve ako pri Predpisoch: 1. čiary a podklady kreslené tmavým atramentom s alfou (`rgba(28,35,55,…)`) — na tmavom podklade z nich neostane nič a z časovej osi sa stane súvislý text bez hraníc, 2. zvýraznenia zapísané SVETLÝM odtieňom akcentu (indigo 600, purple 700). Tmavá téma tie akcenty posúva nahor, takže ich priesvitná verzia musí ísť s nimi — inak odznak „nové" splynie s plochou a AI blok vyzerá ako obyčajný odsek. */ :root[data-theme="dark"] .cl-cat, :root[data-theme="dark"] .fr-st{background-color:rgba(255,255,255,.08)} :root[data-theme="dark"] .cl-line{background-color:rgba(255,255,255,.12)} :root[data-theme="dark"] .fr-cm{border-top-color:rgba(255,255,255,.1)} /* Indigo je v tmavej téme #818cf8, nie #4f46e5 — priesvitná verzia sa musí posunúť s ním, inak je odznak „nové" tmavomodrá škvrna na tmavom. */ :root[data-theme="dark"] .cl-badge, :root[data-theme="dark"] .cl-cat.improvement{background-color:rgba(129,140,248,.18)} :root[data-theme="dark"] .cl-seen::before, :root[data-theme="dark"] .cl-seen::after{border-top-color:rgba(129,140,248,.4)} :root[data-theme="dark"] .fr-vote:hover{border-color:rgba(129,140,248,.45)} :root[data-theme="dark"] .fr-vote.on{background-color:rgba(129,140,248,.18); border-color:rgba(129,140,248,.45)} :root[data-theme="dark"] .fr-ai{background-color:rgba(192,132,252,.12); border-color:rgba(192,132,252,.28)} /* ── Pôdorys haly (/v2/layout) ──────────────────────────────────────────── Stránka stojí na tokenoch, takže väčšinu témy dostala sama. Doplniť treba tri veci: 1. SAMOTNÝ PÔDORYS OSTÁVA BIELY. Je to technická kresba čiernym na bielom — presne ako QR kód vyššie. Invertovať ho ani stmaviť sa NESMIE: čiary by zmizli a priesvitné PNG by ostalo neviditeľné. Značky staníc majú vlastné farby z editora, tie sa témou neriadia tiež — pod nimi je stále ten istý plán. 2. Dráhy a jemné čiary sú v svetlej téme tmavý atrament s alfou — na tmavom podklade z nich neostane nič (ukazovateľ kroku by bol neviditeľný a sprievodca by prestal hovoriť, kde človek je). (Vybraná záložka a odosielacia akcia mali kedysi tretí bod: biely text na svetlom akcente má pod 2:1. Riešia to už tokenom `--on-accent` v samotnom layout.css, takže tu pre ne netreba pravidlo navyše.) */ :root[data-theme="dark"] .lay-wrap{background:#fff} :root[data-theme="dark"] .lay-steps i{background-color:var(--d-ov3)} :root[data-theme="dark"] .lay-repeat{border-color:rgba(251,191,36,.35)} :root[data-theme="dark"] .lay-recent.warn{border-color:rgba(251,113,133,.35)} :root[data-theme="dark"] .lay-pm, :root[data-theme="dark"] .lay-min, :root[data-theme="dark"] .lay-tile, :root[data-theme="dark"] .lay-opt{background-color:var(--d-ov1)} /* ── Analytika prestojov (/v2/analytics) ────────────────────────────────── Stránka stojí na tokenoch, takže väčšinu témy dostala sama. Doplniť treba štyri veci: 1. PÔDORYS HALY OSTÁVA BIELY — je to technická kresba čiernym na bielom, rovnako ako QR kód a pôdorys v editore. Stmaviť ho nesmieme: čiary by zmizli a priesvitné PNG by ostalo neviditeľné. Preto ostávajú svetlé aj popisky staníc, ktoré na ňom sedia. 2. Dráhy pruhov a podklad hlavičky tabuľky sú v svetlej téme tmavý atrament s alfou — na tmavom z nich neostane nič a rebríček by vyzeral ako zoznam plávajúcich čiar. 3. Odznaky (opakujúci, pretrvávajúci, nový…) majú sýte farby textu z svetlej témy; na tmavom podklade sú pod hranicou čitateľnosti, takže sa musia posunúť o pár stupňov nahor. 4. Kumulatívna krivka je SVG so `stroke` v triede — token si ju už berie (`var(--teal)`), ale prerušovaná 80 % čiara má vlastnú farbu. */ :root[data-theme="dark"] .an-map{background:#fff} :root[data-theme="dark"] .an-rank-t, :root[data-theme="dark"] .an-b.b-sh{background-color:var(--d-ov1)} :root[data-theme="dark"] .dr-bd{border-color:var(--d-line2)} :root[data-theme="dark"] .an-rank-t b{background-color:rgba(203,213,225,.55)} :root[data-theme="dark"] .an-b.b-rec{color:#fda4af;background-color:rgba(251,113,133,.18)} :root[data-theme="dark"] .an-b.b-act{color:#fda4af;background-color:rgba(251,113,133,.22)} :root[data-theme="dark"] .an-b.b-per{color:#fcd34d;background-color:rgba(251,191,36,.18)} :root[data-theme="dark"] .an-b.b-new{color:#d8b4fe;background-color:rgba(192,132,252,.18)} :root[data-theme="dark"] .an-b.b-wk{color:#5eead4;background-color:rgba(45,212,191,.16)} /* ── Karta repasu (/v2/repairable-spares/) ──────────────────────────── * * `rs_card.css` stojí zámerne celý na tokenoch, takže tu má JEDINÝ riadok: * dráhu stĺpca peňazí. V svetlej téme je to tmavý atrament s alfou (rovnako * ako dráhy pruhov inde) a na tmavom podklade by z nej neostalo nič — graf by * vyzeral ako pár plávajúcich obdĺžnikov bez mesiacov medzi nimi. * * QR kód na tej istej karte sa ZÁMERNE NEPREFARBUJE ani neinvertuje: má * natvrdo biely podklad (`.rc-qr img`) v oboch témach. Stmavený alebo * prevrátený kód čítačka telefónu neprečíta a štítok je nalepený na kuse, * takže sa nedá „skúsiť znova inak". */ :root[data-theme="dark"] .rc-bstack{background:var(--d-ov1)} /* ── Editor pôdorysu (/v2/layout-editor) ──────────────────────────────────── * * Paleta staníc a polia stoja na bielej s alfou — na tmavej stránke by * svietili nabielo. Úchyty zmeny veľkosti (`.le-h`) ostávajú SVETLÉ v oboch * témach zámerne: sedia na farebnom obdĺžniku stanice nad obrázkom haly, * nie na ploche stránky — tmavý úchyt by na tmavomodrej stanici zmizol. */ :root[data-theme="dark"] .le-pal-i{background:var(--d-ov1)} :root[data-theme="dark"] .le-search, :root[data-theme="dark"] .le-f input[type=number]{ background-color:var(--d-field);color:var(--ink);border-color:var(--d-line2)} :root[data-theme="dark"] .le-h{background:rgba(255,255,255,.85)} /* ── AI konfigurácia (/v2/ai-config) ──────────────────────────────────────── * * Stránka farbí všetko cez tokeny, jediná výnimka je dráha progress baru * bežiacej úlohy — tmavý atrament s alfou, na tmavom podklade neviditeľný. */ :root[data-theme="dark"] .aic-bar{background:var(--d-ov1)} /* ── Pôdorys aktívnych alarmov (/v2/plc/alarms?view=layout) ───────────────── * * PÔDORYS OSTÁVA BIELY — technická kresba čiernym na bielom, rovnako ako * .an-map v analytike a QR kódy. Farby staníc sú preto v alarms.css natvrdo * pre svetlý podklad a tu sa NEPREPISUJÚ. Doladiť treba len to, čo sedí na * ploche stránky, nie na obrázku: prekryvy riadkov, kartu alarmu v zásuvke * a vzorku „bez alarmu" v legende (biely obrys by na tmavej stránke svietil). */ :root[data-theme="dark"] .alb-map{background:#fff} :root[data-theme="dark"] .alb-off-r:hover{background:var(--d-ov2)} :root[data-theme="dark"] .alb-off-n:hover{background:var(--d-ov2)} :root[data-theme="dark"] .alb-dr-r{background-color:var(--d-ov1)} :root[data-theme="dark"] .alb-leg i.mute{border-color:rgba(255,255,255,.4)} /* ── Pôdorys pracovných príkazov (/workorders?view=layout) ────────────────── * To isté pravidlo ako pri pôdoryse alarmov: PÔDORYS OSTÁVA BIELY. Je to * technická kresba čiernym na bielom (rovnako ako .an-map a QR kódy), takže * farby značiek sú vo workorders.css natvrdo pre svetlý podklad a tu sa * NEPREPISUJÚ. Dolaďuje sa len to, čo sedí na ploche stránky, nie na obrázku: * karta príkazu v zásuvke a vzorky legendy, ktoré sú biele — na tmavej * stránke by svietili ako diera. */ /* Kresba pôdorysu príkazov je od v3163 z layout.css (.lay-wrap) — biely podklad drží pravidlo pre .lay-wrap nižšie/vyššie v tomto súbore. */ :root[data-theme="dark"] .wol-dr-r{background-color:var(--d-ov1)} :root[data-theme="dark"] .wol-off-r:hover{background:var(--d-ov2)} :root[data-theme="dark"] .wol-leg i.none{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4)} :root[data-theme="dark"] .wol-segb{background:var(--d-ov2)}