` (viď NavMenu.razor).
*/
div.gate-nav__group[b-ct2dje5lsj] .nav-link {
padding-block: 10px;
}
/*
Položky ROZBALENEJ skupiny sú odsadené o stupeň (12 px) pod jej popis. Kým stáli s popisom
na jednej osi, rozbalená skupina sa čítala ako plochý zoznam bez hierarchie — popis a jeho
položky splývali (spätná väzba 2026-09-13). Odsadzuje sa TEXT, nie plocha: podklad
zvýraznenej položky siaha ďalej od hrany po hranu a značka ostáva na ľavej hrane panela,
preto sa o jej 3 px opäť odpočíta (16 + 12 − 3).
*/
details.gate-nav__group[b-ct2dje5lsj] .nav-link {
padding-left: 25px;
}
.gate-nav__group[b-ct2dje5lsj] .nav-link:hover {
background-color: var(--gate-nav-hover);
color: var(--gate-nav-fg);
}
/*
Otvorená položka. Značka pri ľavej hrane je akcentová — je to ukazovateľ stavu, nie ozdoba,
a v paneli je to jediná farebná plocha okrem značky aplikácie.
*/
.gate-nav__group[b-ct2dje5lsj] a.active {
background-color: var(--gate-nav-active);
border-left-color: var(--gate-nav-marker);
color: var(--gate-nav-fg);
font-weight: 600;
}
/* Záporný odstup, aby zaostrenie neorezal posúvateľný obal navigácie (WCAG 2.1 AA, 2.4.7). */
.gate-nav__group[b-ct2dje5lsj] .nav-link:focus-visible {
outline: 2px solid var(--gate-nav-marker);
outline-offset: -2px;
}
/* ── zbalený panel (rail) ────────────────────────────────────────────────── */
/*
Kedy sa rail ukazuje, rozhoduje `gate-ui.css` (`:has(#gate-rail:checked)`) — tu je len jeho
kresba. Značka je štvorec bez textu (názov produktu smie byť v DOM-e práve raz), položky sú
38 px ikony s bublinou `title`, teda s tým istým názvom, aký nesie rozbalený panel.
*/
.gate-nav__rail-brand[b-ct2dje5lsj] {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-bottom: 16px;
background: var(--gate-accent);
color: var(--gate-nav-fg);
}
.gate-nav__rail-link[b-ct2dje5lsj] {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
color: color-mix(in srgb, var(--gate-nav-fg) 70%, transparent);
text-decoration: none;
touch-action: manipulation;
transition: background-color 120ms ease, color 120ms ease;
}
.gate-nav__rail-link:hover[b-ct2dje5lsj] {
background-color: var(--gate-nav-hover);
color: var(--gate-nav-fg);
}
.gate-nav__rail-link.active[b-ct2dje5lsj] {
background-color: var(--gate-nav-active);
color: var(--gate-nav-fg);
}
.gate-nav__rail-link:focus-visible[b-ct2dje5lsj] {
outline: 2px solid var(--gate-nav-marker);
outline-offset: -2px;
}
/* ── úzka obrazovka: horná lišta a prekryvná navigácia ───────────────────── */
@media (max-width: 640.98px) {
/*
Značka a prepínač tvoria hornú lištu aplikácie (samotnú lištu drží `.sidebar`
v MainLayout.razor.css). Podtitul sa do jedného riadku lišty nezmestí — inštitúciu
pomenúva úvodná obrazovka aj názov okna.
*/
.top-row[b-ct2dje5lsj] {
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 0;
min-height: var(--gate-nav-bar-h, 3.5rem);
padding: 0 0 0 1rem;
}
.gate-brand__subtitle[b-ct2dje5lsj] {
display: none;
}
/* Dotykový cieľ aj tu: odkaz „domov" je v lište najčastejším únikom z omylu. */
.navbar-brand[b-ct2dje5lsj] {
align-items: center;
min-height: 2.75rem;
font-size: 15px;
}
/*
Dotyková plocha odkazu aj popisu skupiny — na širokej obrazovke sa panel ovláda myšou
a stačí hustejší riadok. Popis je na úzkej obrazovke plnohodnotný ovládač (rozbaľuje
skupinu), takže potrebuje ten istý cieľ 44 px (WCAG 2.2 AA, 2.5.8 Target Size).
*/
/*
`box-sizing` je tu polovica opravy, nie kozmetika: odkaz aj popis skupiny sú prvky
s predvoleným `content-box`, takže sa 44 px minimum počítalo k OBSAHU a odsadenie
(2 × 10 px, resp. 2 × 8 px) sa k nemu pripočítalo — riadok mal reálne 64 px a popis
skupiny 60 px (odmerané pri sweepe 2026-08-18). Celé menu tak žiadalo 1 128 px na
812 px displeji. S border-boxom je 44 px naozaj 44 px: dotykový cieľ ostáva, prázdno
okolo neho mizne.
*/
.gate-nav__group[b-ct2dje5lsj] .nav-link,
summary.gate-nav__label[b-ct2dje5lsj] {
box-sizing: border-box;
min-height: 2.75rem;
}
/*
Odstup nad popisom skupiny sa na telefóne zmenšuje na polovicu. Na širokej obrazovke je
16 px správnych — skupiny sú tam vedľa seba s obsahom a odstup ich delí. V prekryve, kde
má každý riadok 44 px dotykový cieľ, sa z tých istých 16 px stane priepasť: šesť skupín
odtlačí poslednú položku o 96 px nižšie a na 812 px displeji sa menu nezmestí naraz
(nález Fázy A, potvrdený sweepom 2026-08-18). Riadky si výšku ponechávajú — skracuje sa
prázdno medzi nimi, nie cieľ.
*/
.gate-nav__label[b-ct2dje5lsj] {
margin-top: 8px;
}
/*
Otvorená navigácia je PREKRYV pod lištou, nie vysunutý blok, ktorý odtlačí obsah dole.
Zatvorená ostáva `display: none`: posun mimo obrazovky (transform) považuje Playwright
aj čítačka obrazovky za viditeľný obsah, takže by sa dalo tabovať do skrytého menu.
Prechod sa zámerne nerobí — okamžité otvorenie pôsobí rýchlo a `@starting-style`
/ `allow-discrete` by v izolovaných štýloch bolo krehké.
*/
.navbar-toggler:checked ~ .nav-scrollable[b-ct2dje5lsj] {
position: fixed;
/* Od spodnej hrany lišty (aj s bezpečnou zónou displeja) po spodok okna. */
inset: calc(var(--gate-nav-bar-h, 3.5rem) + env(safe-area-inset-top, 0px)) 0 0 0;
z-index: 1;
background-color: var(--gate-nav-bg);
overflow-y: auto;
/* Posun prstom vnútri panela nesmie „prejsť" na stránku pod ním. */
overscroll-behavior: contain;
padding-block: .5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
}
@media (min-width: 641px) {
.navbar-toggler[b-ct2dje5lsj] {
display: none;
}
.nav-scrollable[b-ct2dje5lsj] {
/* Na širokej obrazovke sa panel nikdy nezbaľuje do prekryvu — zbaliť sa dá do railu. */
display: block;
/* Zvyšok výšky bočného panela (stĺpec je definovaný v MainLayout.razor.css). */
flex: 1;
min-height: 0;
}
}
/*
Systémové „obmedziť pohyb" vypína aj tie najkratšie prechody — pre používateľa
s vestibulárnou poruchou je rušivá už zmena farby pod kurzorom (WCAG 2.1 AAA 2.3.3,
ktoré tu držíme dobrovoľne, keďže ide o rám na každej obrazovke).
*/
@media (prefers-reduced-motion: reduce) {
.navbar-toggler[b-ct2dje5lsj],
.gate-nav__group[b-ct2dje5lsj] .nav-link,
.gate-nav__rail-link[b-ct2dje5lsj],
summary.gate-nav__label[b-ct2dje5lsj],
.gate-nav__chevron[b-ct2dje5lsj] {
transition: none;
}
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/*
Viditeľnosť jednotlivých hlásení podľa stavu okruhu. Identifikátory aj triedy sú KONTRAKT
s blazor.web.js (ten na dialóg vešia triedy `components-reconnect-*`) — smú sa štýlovať,
nesmú sa premenovať.
*/
.components-reconnect-first-attempt-visible[b-z5pmkwbsvr],
.components-reconnect-repeated-attempt-visible[b-z5pmkwbsvr],
.components-reconnect-failed-visible[b-z5pmkwbsvr],
.components-pause-visible[b-z5pmkwbsvr],
.components-resume-failed-visible[b-z5pmkwbsvr],
.components-rejoining-animation[b-z5pmkwbsvr] {
display: none;
}
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-z5pmkwbsvr],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-z5pmkwbsvr],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-z5pmkwbsvr],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-z5pmkwbsvr],
#components-reconnect-modal.components-reconnect-retrying[b-z5pmkwbsvr],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-z5pmkwbsvr],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-z5pmkwbsvr],
#components-reconnect-modal.components-reconnect-failed[b-z5pmkwbsvr],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-z5pmkwbsvr] {
display: block;
}
/*
Dve pravidlá vyššie zapínajú `display: block` na samotnom dialógu (stavy „retrying"
a „failed"), čím prebijú predvolené `dialog:not([open]) { display: none }` prehliadača —
zatvorený dialóg by potom ostal visieť v stránke. Šablóna to riešila priehľadnosťou
(neviditeľný, ale stále chytal kliknutia); tu to hovorí priamo stav dialógu. Pravidlo
musí stáť AŽ ZA nimi: špecificita je zhodná, rozhoduje poradie.
*/
#components-reconnect-modal:not([open])[b-z5pmkwbsvr] {
display: none;
}
/* ── dialóg ──────────────────────────────────────────────────────────────── */
#components-reconnect-modal[b-z5pmkwbsvr] {
/*
Plocha aj text z Fluent tokenov: v tmavej schéme je text stránky biely, takže na
natvrdo bielom podklade by hlásenie o strate spojenia zmizlo — a to je práve tá
chvíľa, keď ho používateľ potrebuje prečítať. Panel je neutrálny ako karty v obsahu,
líši sa len tým, čím sa prekryv líšiť má: jedným jemným tieňom.
*/
background-color: var(--neutral-layer-floating, #ffffff);
color: var(--neutral-foreground-rest, #1a1a1a);
/* Na displeji telefónu (375 px) sa pevných 20 rem nezmestí — okraj drží `min()`. */
width: min(22rem, calc(100vw - 2rem));
box-sizing: border-box;
margin: 20vh auto;
padding: 1.5rem;
border: 1px solid var(--gate-border, #e8e8e8);
border-radius: var(--gate-radius-panel, 8px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
/* Otvorenie je krátke a len cez priehľadnosť — žiadny posun ani zväčšovanie panela. */
animation: components-reconnect-modal-fadeInOpacity-b-z5pmkwbsvr 150ms ease-out;
}
#components-reconnect-modal[b-z5pmkwbsvr]::backdrop {
/* Stmavenie stránky pod dialógom: hlásenie o strate spojenia má byť jediná vec v pozornosti. */
background-color: rgba(0, 0, 0, 0.45);
}
@keyframes components-reconnect-modal-fadeInOpacity-b-z5pmkwbsvr {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.components-reconnect-container[b-z5pmkwbsvr] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
#components-reconnect-modal p[b-z5pmkwbsvr] {
margin: 0;
text-align: center;
line-height: 1.45;
}
/* Sekundy do ďalšieho pokusu sa menia každú sekundu — rovnako široké číslice, aby veta neposkakovala. */
#components-seconds-to-next-attempt[b-z5pmkwbsvr] {
font-variant-numeric: tabular-nums;
}
/*
Tlačidlá sú akcentové, ako všade v aplikácii. Text NIE je natvrdo biely: v tmavej schéme
je akcent svetlý (#479ef5) a biele písmo by na ňom malo 2,6 : 1 — token
`--foreground-on-accent-rest` je práve na to (biely v svetlej schéme, tmavý v tmavej, 6,7 : 1).
*/
#components-reconnect-modal button[b-z5pmkwbsvr] {
min-height: 32px;
padding: .35rem 1rem;
border: 1px solid var(--accent-stroke-control-rest, #0f6cbd);
border-radius: var(--gate-radius, 6px);
background-color: var(--accent-fill-rest, #0f6cbd);
color: var(--foreground-on-accent-rest, #ffffff);
font: inherit;
font-weight: 600;
cursor: pointer;
touch-action: manipulation;
transition: background-color 120ms ease;
}
#components-reconnect-modal button:hover[b-z5pmkwbsvr] {
background-color: var(--accent-fill-hover, #115ea3);
border-color: var(--accent-stroke-control-hover, #115ea3);
}
#components-reconnect-modal button:active[b-z5pmkwbsvr] {
background-color: var(--accent-fill-active, #0f548c);
border-color: var(--accent-stroke-control-active, #0f548c);
}
/* Obrys zaostrenia musí byť vidieť aj na akcentovej ploche — preto neutrálny, nie akcentový. */
#components-reconnect-modal button:focus-visible[b-z5pmkwbsvr] {
outline: 2px solid var(--focus-stroke-outer, #000000);
outline-offset: 2px;
}
/* ── ukazovateľ pokusu o obnovenie ───────────────────────────────────────── */
.components-rejoining-animation[b-z5pmkwbsvr] {
position: relative;
width: 40px;
height: 40px;
}
/* Prvý kruh je nehybná dráha, druhý pohyblivý oblúk (obidva kreslí šablóna ako prázdne
). */
.components-rejoining-animation div[b-z5pmkwbsvr] {
position: absolute;
inset: 0;
border: 2px solid var(--gate-border-strong, #d0d0d0);
border-radius: 50%;
}
/*
Animuje sa VÝHRADNE `transform`. Pôvodná šablóna hýbala `top/left/width/height`,
čo pri každom snímku núti prehliadač prepočítať rozloženie — na kancelárskej stanici
sa to trhá práve vtedy, keď je spojenie na hrane a procesor už tak nestíha.
*/
.components-rejoining-animation div:nth-child(2)[b-z5pmkwbsvr] {
border-color: var(--accent-fill-rest, #0f6cbd) transparent transparent;
animation: components-rejoining-animation-b-z5pmkwbsvr 900ms linear infinite;
}
@keyframes components-rejoining-animation-b-z5pmkwbsvr {
to {
transform: rotate(360deg);
}
}
/*
So systémovým „obmedziť pohyb" ostane oblúk stáť. Stav tým nezaniká: nesie ho text hlásenia
aj tvar oblúka nad dráhou (WCAG 2.1 AAA 2.3.3 — pri rámovom prvku ho držíme dobrovoľne).
*/
@media (prefers-reduced-motion: reduce) {
#components-reconnect-modal[b-z5pmkwbsvr],
.components-rejoining-animation div:nth-child(2)[b-z5pmkwbsvr] {
animation: none;
}
#components-reconnect-modal button[b-z5pmkwbsvr] {
transition: none;
}
}
/* /Components/Pages/Auth/Prihlasenie.razor.rz.scp.css */
/*
Vstupná obrazovka. Farby idú z tokenov (gate-ui.css), aby sa prekreslili s tmavou schémou —
jedinou výnimkou je biely názov na značkovom paneli: ten je tmavý v OBOCH schémach, takže je
pevný zámerne (rovnako ako `.navbar-brand` v NavMenu.razor.css). Chróma je neutrálna a akcent
(--accent-*) nesie JEDINÚ vec: tlačidlo „Prihlásiť sa" a zaostrenie. Žiadny prechod
(gradient), žiadna ilustrácia, žiadna žiara: plocha značky je jednoliaty grafit, presne ako
bočný panel aplikácie za ňou.
*/
.prihlasenie[b-mv6yezf195] {
/*
Celá výška okna. `dvh` (nie `vh`) kvôli mobilným prehliadačom: pri `vh` sa pod
vysúvajúcou sa lištou adresy objaví pás pozadia a stránka sa dá zbytočne posúvať.
*/
min-height: 100dvh;
display: grid;
/* Úzka obrazovka: kompaktná hlavička značky NAD kartou, karta si vezme zvyšok výšky. */
grid-template-rows: auto minmax(0, 1fr);
}
/* ── značkový panel ──────────────────────────────────────────────────────── */
.prihlasenie__znacka[b-mv6yezf195] {
background-color: var(--gate-nav-bg);
color: var(--gate-nav-fg);
/*
Panel je tmavý v OBOCH schémach, ale dedí `color-scheme: light dark` z koreňa — bez
tejto deklarácie by naň Windows vo svetlej schéme kreslil svetlé natívne prvky
(posuvník, zaostrenie). Rovnaký dôvod ako pri `.sidebar` v MainLayout.razor.css.
*/
color-scheme: dark;
display: flex;
/* Nárok sa na mobile zalomí pod názov (flex-basis: 100 % nižšie) — bez `wrap` by ostal
v jednom rade a stlačil názov. Na širokej obrazovke je obal blok, takže sa neuplatní. */
flex-wrap: wrap;
align-items: center;
/* Zvislú medzeru po zalomení riadi margin nároku, nie medzera mriežky. */
gap: 0 .625rem;
padding: .875rem 1rem;
padding-top: calc(.875rem + env(safe-area-inset-top, 0px));
/*
Švík aj na úzkej obrazovke. V tmavej schéme majú lišta (#121110) a plocha pod ňou (#1b1a19)
takmer rovnaký jas — odmerané 18 proti 27 z 255, teda deväť stupňov —, takže sa hranica
stráca a z dvoch pásiem je jedno. Tá istá linka a ten istý token, akými sa od obsahu
oddeľuje mobilná lišta aplikácie (MainLayout.razor.css); `--gate-nav-border` je odvodený
od SVETLÉHO písma panela, preto je vidieť v oboch schémach — `--gate-divider` by sa vo
svetlej schéme na grafite stratil.
*/
border-bottom: 1px solid var(--gate-nav-border);
}
/*
Na úzkej obrazovke obal nekreslí nič — logo a názov sú priamo položkami lišty, takže sa
zarovnajú na jednej osi. Na širokej obrazovke sa z neho stane blok so stropom šírky (nižšie).
*/
.prihlasenie__znacka-obsah[b-mv6yezf195] {
display: contents;
}
/*
Značka je akcentový štvorec s kresbou — tá istá, akú nesie bočný panel aplikácie. V lište na
mobile je menší (stojí v jednom riadku s názvom), na širokej obrazovke rastie s kompozíciou.
*/
.prihlasenie__logo[b-mv6yezf195] {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: var(--gate-accent);
color: var(--gate-nav-fg);
}
.prihlasenie__produkt[b-mv6yezf195] {
margin: 0;
min-width: 0;
font-family: var(--gate-font-heading);
font-size: 17px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.01em;
}
/*
Na úzkej obrazovke sa z panela vypúšťa procesný pás — päť krokov by z hlavičky spravilo
tri riadky nad kartou a odtlačilo by prihlásenie pod ohyb.
Nárok ZOSTÁVA aj na mobile: bez neho je z panela holý 57 px pruh s logom a názvom, teda
plocha, ktorá nič nehovorí. Stojí pod názvom v druhom riadku, takže lišta narastie
o jeden riadok textu, nie o zoznam.
*/
.prihlasenie__fazy[b-mv6yezf195] {
display: none;
}
@media (max-width: 640.98px) {
.prihlasenie__claim[b-mv6yezf195] {
/* Vlastný riadok pod názvom — obal je na mobile `display: contents`, takže sú logo,
názov aj nárok priamo položkami flexu lišty a bez zalomenia by nárok stál vedľa
názvu. Odsadenie zľava lícuje s názvom (šírka loga + medzera). */
flex-basis: 100%;
margin: .125rem 0 0 calc(30px + .625rem);
color: var(--gate-nav-label);
font-size: 12px;
line-height: 1.35;
}
}
/* ── prihlasovací panel ──────────────────────────────────────────────────── */
.prihlasenie__panel[b-mv6yezf195] {
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem 1rem calc(2rem + env(safe-area-inset-bottom, 0px));
background-color: var(--gate-bg);
}
.prihlasenie__karta[b-mv6yezf195] {
box-sizing: border-box;
width: 100%;
/* Strop drží riadok textu v čitateľnej dĺžke; pod ním je karta na mobile cez celú šírku. */
max-width: 25rem;
padding: 1.5rem;
border: 0;
/* Karta je plochá plocha bez obrysu aj bez tieňa — rovnako ako .gate-card v gate-ui.css. */
border-radius: var(--gate-radius-panel);
background-color: var(--gate-surface);
}
/*
Vlastná trieda je kvôli špecificite aj kvôli veľkosti: hierarchia nadpisov z app.css sa
viaže na `.content`, ktorý tento holý rám nemá, takže by nadpis ostal na predvolených 2 em.
*/
.prihlasenie__nadpis[b-mv6yezf195] {
margin: 0 0 .75rem;
font-family: var(--gate-font-heading);
font-size: 25px;
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.015em;
}
.prihlasenie__oznam[b-mv6yezf195] {
margin-bottom: .875rem;
}
.prihlasenie__text[b-mv6yezf195] {
margin: 0 0 1.25rem;
font-size: 14px;
line-height: 1.5;
text-wrap: pretty;
}
/*
JEDINÝ akcent obrazovky. Je to odkaz, ktorý sa má správať ako hlavné tlačidlo: plná šírka
karty (na vstupnej obrazovke je len jedna cesta ďalej) a dotykový cieľ nad hranicou
44 × 44 px (WCAG 2.2 AA, 2.5.8 Target Size).
V predvádzacom režime je to naopak SKUTOČNÉ