@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-5ubp3cp96t] {
position: relative;
display: flex;
flex-direction: column;
}
main[b-5ubp3cp96t] {
flex: 1;
/*
Bez min-width: 0 sa flex položka nezmenší pod šírku svojho obsahu — široká tabuľka registra
by potom roztlačila celú stránku do vodorovného posunu namiesto toho, aby sa posúvala len
vo svojom obale (.gate-table-wrap). WCAG 2.1 AA, 1.4.10 Reflow.
*/
min-width: 0;
}
.sidebar[b-5ubp3cp96t] {
background-color: var(--gate-nav-bg);
/*
Bočný panel je tmavý v OBOCH schémach, ale región dedí `color-scheme: light dark`
z koreňa — vo svetlej schéme by naň Windows nakreslil svetlý klasický posuvník
(a svetlé natívne prvky vôbec). Deklarácia tu hovorí prehliadaču pravdu o tejto
ploche, takže posuvník navigácie kreslí tmavý NATÍVNE — žiadne custom skinovanie.
*/
color-scheme: dark;
}
.top-row[b-5ubp3cp96t] {
/* Plocha aj linka z Fluent tokenov — v tmavej schéme sa prekreslia s ostatnými. */
background-color: var(--neutral-layer-1, #fbfbfb);
border-bottom: 1px solid var(--gate-border, #e8e8e8);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: 3rem;
/*
Odsadenie na úzkej obrazovke: pravidlo nižšie platí až od 641 px. Bez toho by sa
obsah lišty dotýkal okraja displeja.
*/
padding-inline: 1rem;
}
.gate-topbar__title[b-5ubp3cp96t],
.gate-topbar__user[b-5ubp3cp96t] {
font-size: .8125rem;
color: var(--gate-muted, #616161);
}
.gate-topbar__title[b-5ubp3cp96t] {
font-weight: 500;
}
/* Monogram a meno držia spolu; skracuje sa len meno, monogram si veľkosť ponechá. */
.gate-topbar__identity[b-5ubp3cp96t] {
display: flex;
align-items: center;
gap: .5rem;
min-width: 0;
}
/*
Monogram prihláseného. Dvojica tokenov `--neutral-fill-rest` / `--neutral-foreground-rest`
je párovaná zámerne: drží kontrast v oboch schémach bez vlastných farieb (svetlá 16 : 1,
tmavá 9,6 : 1) aj vtedy, keď hodnoty tokenov dodá až design systém FluentUI.
*/
.gate-topbar__avatar[b-5ubp3cp96t] {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: var(--neutral-fill-rest, #f5f5f5);
color: var(--neutral-foreground-rest, #1a1a1a);
font-size: .6875rem;
font-weight: 600;
/* Bez pevného riadkovania „pláva" monogram v kruhu o pár pixelov vyššie. */
line-height: 1;
}
/*
Meno prihláseného sa skracuje: dlhé meno z Entra ID (meno + priezvisko + útvar) by inak
roztlačilo lištu a s ňou celú stránku do vodorovného posunu.
*/
.gate-topbar__user[b-5ubp3cp96t] {
max-width: 40ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
Odhlásenie je tichý odkaz, nie akcia na akcentovej ploche: v lište sa ním nekončí práca,
len sa z nej odchádza. Farbu má tlmenú (rovnakú ako meno vedľa), podčiarknutie až pod
kurzorom. Dotykový cieľ drží výška 44 px (WCAG 2.2 AA, 2.5.8 Target Size) — samotný riadok
textu má sotva 18 px a na telefóne sa doň používateľ netrafí.
*/
.gate-topbar__signout[b-5ubp3cp96t] {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
min-height: 2.75rem;
padding-inline: .375rem;
/* Oddelenie od mena — bez neho by odkaz vyzeral ako pokračovanie identity. */
margin-inline-start: .25rem;
border-radius: var(--gate-radius, 6px);
color: var(--gate-muted, #616161);
font-size: .8125rem;
text-decoration: none;
white-space: nowrap;
touch-action: manipulation;
}
.gate-topbar__signout:hover[b-5ubp3cp96t] {
color: var(--neutral-foreground-rest, #1a1a1a);
text-decoration: underline;
}
.gate-topbar__signout:focus-visible[b-5ubp3cp96t] {
outline: 2px solid var(--accent-fill-rest, #0f6cbd);
outline-offset: 2px;
}
/* ── úzka obrazovka: horná lišta aplikácie ───────────────────────────────── */
@media (max-width: 640.98px) {
/*
Bočný panel sa na mobile stáva hornou lištou: značka vľavo, prepínač navigácie vpravo
(obsah lišty kreslí NavMenu). `sticky`, nie `fixed` — lišta si v toku ponechá miesto,
takže obsah pod ňou nikdy nezmizne pod prekrytím a nemusí sa dorovnávať odsadením.
Zárez displeja (notch) rieši bezpečná zóna; podklad lišty siaha až pod neho.
*/
.sidebar[b-5ubp3cp96t] {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
gap: .5rem;
padding-top: env(safe-area-inset-top, 0px);
padding-inline-end: .5rem;
border-bottom: 1px solid var(--gate-nav-border);
}
}
@media (min-width: 641px) {
.page[b-5ubp3cp96t] {
flex-direction: row;
}
.sidebar[b-5ubp3cp96t] {
width: 260px;
height: 100dvh;
position: sticky;
top: 0;
border-inline-end: 1px solid var(--gate-nav-border);
/*
Stĺpec: pod hlavičkou s názvom si zvyšok výšky vezme posúvateľná navigácia
(.nav-scrollable v NavMenu.razor.css). Bez toho by sa jej výška musela dopočítať
konštantou a pri zmene hlavičky by sa rozišla.
*/
display: flex;
flex-direction: column;
}
.top-row[b-5ubp3cp96t] {
position: sticky;
top: 0;
z-index: 1;
padding-inline: 2rem;
}
.content[b-5ubp3cp96t] {
padding: 1.25rem 2rem 3rem;
}
}
#blazor-error-ui[b-5ubp3cp96t] {
/*
Lišta zostáva svetlá v oboch schémach (`color-scheme: light only`), preto má vlastné,
PEVNÉ farby z rodiny --gate-warning namiesto tokenov: v tmavej schéme by sa text prepol
na svetlý a na svetlom podklade by zmizol — a to je práve tá chvíľa, keď ho používateľ
potrebuje prečítať. Kontrast: text #1a1a1a na #fff4e5 = 16 : 1, odkaz #0b4f8a = 7,7 : 1.
*/
color-scheme: light only;
color: #1a1a1a;
background: #fff4e5;
border-top: 1px solid #e6c68a;
bottom: 0;
/* Jediný tieň mimo prekryvov — lišta musí byť čitateľne oddelená od obsahu pod ňou. */
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.12);
box-sizing: border-box;
display: none;
left: 0;
/* Vpravo miesto pre 44px tlačidlo zatvorenia, aby text nešiel pod neho. */
padding: 0.625rem 3rem 0.625rem 1rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .reload[b-5ubp3cp96t] {
color: #0b4f8a;
}
#blazor-error-ui .dismiss[b-5ubp3cp96t] {
cursor: pointer;
position: absolute;
/* Dotykový cieľ 44 × 44 px (WCAG 2.2 AA, 2.5.8) — znak „×" sám o sebe má sotva 12 px. */
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
right: 0.25rem;
top: 50%;
translate: 0 -50%;
font-size: 1.125rem;
line-height: 1;
touch-action: manipulation;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ── značka ──────────────────────────────────────────────────────────────── */
.top-row[b-ct2dje5lsj] {
/* Podklad presvitá z bočného panela — dve rôzne tmavé plochy nad sebou by rám rozbili. */
background-color: transparent;
padding: 1rem 1.25rem .75rem;
flex: 0 0 auto;
}
.gate-brand[b-ct2dje5lsj] {
display: flex;
flex-direction: column;
min-width: 0;
}
/*
Lockup značky: glyf + názov v jednom odkaze. Glyf má pevných 28 px a medzeru 8 px, takže
podtitul pod ním sa odsadzuje o tú istú vzdialenosť (2,25 rem) a názov aj podtitul stoja
na jednej zvislej osi (4px mriežka rámu). `align-self` drží klikateľnú plochu na šírke
textu — inak by odkaz „domov" zaberal celú šírku panela a zaostrenie by orámovalo prázdno.
*/
.navbar-brand[b-ct2dje5lsj] {
display: flex;
align-items: center;
align-self: flex-start;
gap: .5rem;
min-width: 0;
color: #fff;
font-size: .95rem;
font-weight: 600;
line-height: 1.25;
text-decoration: none;
border-radius: var(--gate-radius, 6px);
/* Bez toho čaká dotykový prehliadač na dvojklik a odkaz reaguje s oneskorením ~300 ms. */
touch-action: manipulation;
}
/* Zaostrenie musí byť vidieť aj na značke (WCAG 2.1 AA, 2.4.7). */
.navbar-brand:focus-visible[b-ct2dje5lsj] {
outline: 2px solid var(--gate-nav-marker);
outline-offset: 2px;
}
/*
Glyf sa farbí cez `currentColor` a nesie jediný akcent rámu — tú istú farbu ako značka
otvorenej položky nižšie (6,5 : 1 na podklade panela; non-text AA žiada 3 : 1).
*/
.gate-brand__glyph[b-ct2dje5lsj] {
flex: 0 0 auto;
width: 28px;
height: 28px;
}
.gate-brand__subtitle[b-ct2dje5lsj] {
display: block;
/* 28 px glyf + 8 px medzera — podtitul začína presne pod názvom. */
margin-inline-start: 2.25rem;
margin-top: 2px;
font-size: .6875rem;
color: var(--gate-nav-label);
}
/* ── prepínač navigácie (úzka obrazovka) ─────────────────────────────────── */
/*
Prepínač je natívny , nie tlačidlo: stav navigácie tak drží samotný
prehliadač (`:checked ~ .nav-scrollable`) — bez JavaScriptu, teda aj skôr, než sa nadviaže
okruh Blazor Serveru. Ikonu nesie pozadie prvku, lebo do sa potomok vložiť nedá;
ťahy majú farbu `--gate-nav-text` (10,3 : 1 na podklade lišty).
*/
.navbar-toggler[b-ct2dje5lsj] {
appearance: none;
/* Dotykový cieľ 44 × 44 px (WCAG 2.2 AA, 2.5.8 Target Size). */
width: 2.75rem;
height: 2.75rem;
flex: 0 0 auto;
margin: 0;
border: 0;
border-radius: var(--gate-radius, 6px);
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%23c9ccd2' stroke-width='2' stroke-linecap='round' d='M4 7h16M4 12h16M4 17h16'/%3e%3c/svg%3e") no-repeat center / 1.5rem;
cursor: pointer;
touch-action: manipulation;
transition: background-color 120ms ease;
}
.navbar-toggler:hover[b-ct2dje5lsj] {
background-color: var(--gate-nav-hover);
}
/*
Otvorený stav nesie tvar ikony (krížik) aj plocha pod ňou — nie iba farba
(EN 301 549 / WCAG 2.1 AA, 1.4.1 Use of Colour).
*/
.navbar-toggler:checked[b-ct2dje5lsj] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' d='M6 6L18 18M18 6L6 18'/%3e%3c/svg%3e");
background-color: var(--gate-nav-active);
}
.navbar-toggler:focus-visible[b-ct2dje5lsj] {
outline: 2px solid var(--gate-nav-marker);
outline-offset: -2px;
}
/* ── navigácia ───────────────────────────────────────────────────────────── */
.nav-scrollable[b-ct2dje5lsj] {
display: none;
padding-block: .25rem 1.5rem;
/*
Tenký NATÍVNY posuvník (štandardná vlastnosť, žiadne ::-webkit- kreslenie). Klasický
široký pruh Windowsu by v úzkom stĺpci navigácie pôsobil ako ďalšia zvislá stena;
farbu mu dáva `color-scheme: dark` na .sidebar (MainLayout.razor.css).
*/
scrollbar-width: thin;
}
.navbar-toggler:checked ~ .nav-scrollable[b-ct2dje5lsj] {
display: block;
}
.gate-nav__group[b-ct2dje5lsj] {
padding: .25rem .75rem;
}
.gate-nav__group + .gate-nav__group[b-ct2dje5lsj] {
margin-top: 1rem;
}
/* Vodorovné odsadenie je zhodné s odkazom nižšie, takže popis a názvy stoja na jednej osi. */
.gate-nav__label[b-ct2dje5lsj] {
padding: .25rem .625rem;
font-size: .6875rem;
font-weight: 600;
color: var(--gate-nav-label);
}
.gate-nav__group[b-ct2dje5lsj] .nav-link {
position: relative;
display: flex;
align-items: center;
min-height: 2rem;
padding: .25rem .625rem;
border-radius: var(--gate-radius, 6px);
color: var(--gate-nav-text);
font-size: .8125rem;
line-height: 1.3;
text-decoration: none;
/* Bez toho čaká dotykový prehliadač na dvojklik a odkaz reaguje s oneskorením ~300 ms. */
touch-action: manipulation;
/* Prechod je len na farbe a krátky — pohyb v navigácii by pri prechode myšou rušil. */
transition: background-color 120ms ease, color 120ms ease;
}
.gate-nav__group[b-ct2dje5lsj] .nav-link:hover {
background-color: var(--gate-nav-hover);
color: #fff;
}
.gate-nav__group[b-ct2dje5lsj] a.active {
background-color: var(--gate-nav-active);
color: #fff;
font-weight: 600;
}
/* Značka otvorenej položky. Je to ukazovateľ stavu, nie ozdoba — preto akcentová farba. */
.gate-nav__group[b-ct2dje5lsj] a.active::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 50%;
translate: 0 -50%;
width: 3px;
height: 1rem;
border-radius: 2px;
background: var(--gate-nav-marker);
}
/* 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;
}
/* ── ú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] {
min-height: 2.75rem;
}
/* Dotyková plocha odkazu — na širokej obrazovke sa panel ovláda myšou a stačí hustejší riadok. */
.gate-nav__group[b-ct2dje5lsj] .nav-link {
min-height: 2.75rem;
}
/*
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. */
display: block;
/* Zvyšok výšky bočného panela (stĺpec je definovaný v MainLayout.razor.css). */
flex: 1;
min-height: 0;
overflow-y: auto;
}
}
/*
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 {
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-text);
/*
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;
align-items: center;
gap: .625rem;
padding: .875rem 1rem;
padding-top: calc(.875rem + env(safe-area-inset-top, 0px));
}
/*
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;
}
.prihlasenie__logo[b-mv6yezf195] {
flex: 0 0 auto;
/* V hlavičke na mobile stačí menší glyf; atribúty v značke držia rozmer pre desktop. */
width: 28px;
height: 28px;
}
.prihlasenie__produkt[b-mv6yezf195] {
margin: 0;
min-width: 0;
color: #fff;
font-size: 1rem;
font-weight: 600;
line-height: 1.25;
}
/*
Na úzkej obrazovke sa hlavička zmestí len na logo a názov — nárok a fázy procesu by z nej
spravili tri riadky nad kartou a odtlačili by prihlásenie pod ohyb. Obidve informácie sú
doplnkové, nie nutné na prihlásenie.
*/
.prihlasenie__claim[b-mv6yezf195],
.prihlasenie__fazy[b-mv6yezf195] {
display: none;
}
/* ── 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(--neutral-layer-1, #fbfbfb);
}
.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: 1px solid var(--gate-border, #e8e8e8);
/* Karta je plochý panel: obrys namiesto tieňa — rovnako ako .gate-card v gate-ui.css. */
border-radius: var(--gate-radius-panel, 8px);
background-color: var(--neutral-layer-floating, #fff);
}
/*
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-size: 1.375rem;
font-weight: 600;
line-height: 1.25;
}
.prihlasenie__oznam[b-mv6yezf195] {
margin-bottom: .875rem;
}
.prihlasenie__text[b-mv6yezf195] {
margin: 0 0 1.25rem;
font-size: .875rem;
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).
*/
.prihlasenie__akcia[b-mv6yezf195] {
display: flex;
align-items: center;
justify-content: center;
/*
Bez `border-box` sa 44 px počíta k OBSAHU a odsadenie sa pripočíta zhora — tlačidlo
vyrastie na 60 px a v karte pôsobí ako panel, nie ako akcia (rovnaký dôvod, prečo majú
natívne vstupy `box-sizing: border-box` v gate-ui.css).
*/
box-sizing: border-box;
min-height: 44px;
padding: .5rem 1rem;
border-radius: var(--gate-radius, 6px);
background-color: var(--accent-fill-rest, #0f6cbd);
color: var(--foreground-on-accent-rest, #fff);
font-size: .9375rem;
font-weight: 600;
line-height: 1.25;
text-align: center;
text-decoration: none;
/* Bez toho čaká dotykový prehliadač na dvojklik a odkaz reaguje s oneskorením ~300 ms. */
touch-action: manipulation;
}
.prihlasenie__akcia:hover[b-mv6yezf195] {
background-color: var(--accent-fill-hover, #115ea3);
color: var(--foreground-on-accent-hover, #fff);
}
.prihlasenie__akcia:active[b-mv6yezf195] {
background-color: var(--accent-fill-active, #0f548c);
color: var(--foreground-on-accent-active, #fff);
}
/* Zaostrenie musí byť vidieť aj na plnej ploche tlačidla (WCAG 2.1 AA, 2.4.7). */
.prihlasenie__akcia:focus-visible[b-mv6yezf195] {
outline: 2px solid var(--accent-fill-rest, #0f6cbd);
outline-offset: 2px;
}
.prihlasenie__poznamka[b-mv6yezf195] {
margin: 1rem 0 0;
color: var(--gate-muted, #616161);
font-size: .8125rem;
line-height: 1.45;
text-wrap: pretty;
}
.prihlasenie__pata[b-mv6yezf195] {
margin: 1.25rem 0 0;
padding-top: .75rem;
border-top: 1px solid var(--gate-border, #e8e8e8);
color: var(--gate-muted, #616161);
font-size: .75rem;
}
/* ── široká obrazovka: rozdelená kompozícia ──────────────────────────────── */
@media (min-width: 641px) {
.prihlasenie[b-mv6yezf195] {
/*
Značka vľavo, prihlásenie vpravo. `minmax(0, …)` v oboch stĺpcoch je poistka reflow —
bez neho by mala mriežka minimálnu šírku podľa obsahu a dlhé slovo by stránku
roztlačilo do vodorovného posunu (WCAG 2.1 AA, 1.4.10).
*/
grid-template-rows: none;
grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
}
.prihlasenie__znacka[b-mv6yezf195] {
/* Panel je plný stĺpec: obsah v ňom stojí vľavo a je zvisle vycentrovaný. */
align-items: center;
padding: 3rem 2.5rem;
}
.prihlasenie__znacka-obsah[b-mv6yezf195] {
display: block;
max-width: 22rem;
}
.prihlasenie__logo[b-mv6yezf195] {
width: 40px;
height: 40px;
margin-bottom: 1.25rem;
}
.prihlasenie__produkt[b-mv6yezf195] {
font-size: 1.25rem;
}
.prihlasenie__claim[b-mv6yezf195] {
display: block;
margin: .35rem 0 0;
font-size: .9375rem;
line-height: 1.45;
}
/*
Procesný pás. Je to popis, nie ponuka — preto veľkosť a farba popisu skupiny z bočného
panela (--gate-nav-label, 6,3 : 1 na podklade panela). Zalomenie je povinné: päť krokov
sa do úzkeho stĺpca v jednom riadku nezmestí.
*/
.prihlasenie__fazy[b-mv6yezf195] {
display: flex;
flex-wrap: wrap;
gap: .25rem .5rem;
margin: 2rem 0 0;
padding: 0;
list-style: none;
color: var(--gate-nav-label);
font-size: .75rem;
line-height: 1.4;
}
/*
Šípka patrí ku kroku ZA ňou, takže na konci riadka po zalomení nikdy nezostane visieť
(rovnaká úvaha ako pri spojnici procesného pásu na úvodnej obrazovke).
*/
.prihlasenie__fazy li:not(:first-child)[b-mv6yezf195]::before {
content: "→";
margin-inline-end: .5rem;
}
.prihlasenie__panel[b-mv6yezf195] {
padding: 3rem 2rem;
}
.prihlasenie__karta[b-mv6yezf195] {
padding: 2rem;
}
}
/*
Na tejto obrazovke ZÁMERNE nie je žiadny pohyb — ani prelnutie tlačidla pod kurzorom, ani
nabiehanie karty. Odozva na vstup do aplikácie má byť okamžitá a čo sa nehýbe, netreba
vypínať cez `prefers-reduced-motion` (WCAG 2.1 AAA, 2.3.3).
*/
/* /Components/Pages/Home.razor.rz.scp.css */
/*
Úvodný rozcestník. Farby idú výhradne z Fluent tokenov (gate-ui.css), takže sa v tmavej
schéme prekreslia samy — vlastné hexy by sa s ňou rozišli. Chróma je neutrálna a akcent
(--accent-*) nesie len tri veci: značku v hlavičke, zaostrenie a glyf pod kurzorom. Nikde
nie je akcent výplňou plochy a farba nikde nenesie informáciu (WCAG 2.1 AA, 1.4.1).
Karta (GateCard) sa tu zámerne nepoužíva: dlaždica je odkaz, nie panel s obsahom. Celá plocha
má byť jeden klikateľný cieľ s jedným zaostrovacím rámčekom — obal by okolo
odkazu pridal ďalšiu vrstvu s vlastným odsadením a vlastným zaoblením, ktoré by sme mu tu
aj tak prebíjali.
*/
.home[b-jtnoopkk13] {
/*
Strop šírky drží riadok textu v čitateľnej dĺžke aj na širokouhlom monitore. Bez neho
by sa veta v pätičke tiahla cez 2 000 px a mriežka dlaždíc by mala 8 stĺpcov.
*/
max-width: 68rem;
}
/* ── hlavička ────────────────────────────────────────────────────────────── */
.home-hero[b-jtnoopkk13] {
display: flex;
align-items: flex-start;
gap: .9rem;
margin-bottom: 1.75rem;
}
/*
Obal glyfu nesie veľkosť aj farbu; samotné