/* ========================================================================== PRIHLASOVACIA OBRAZOVKA ========================================================================== Vzhľad podľa karty "Backend - Prihlasovacia obrazovka". Platí pre všetky obrazovky, ktoré Filament vykresľuje pred prihlásením: /admin/login prihlásenie /admin/password-reset/request zabudnuté heslo /admin/password-reset/reset zadanie nového hesla Všetky tri majú podľa karty rovnakú grafiku - fotografiu na pozadí, logo nad bielou kartou - a líšia sa len obsahom karty. NADVÄZUJE NA OSTATNÉ ŠTÝLY -------------------------------------------------------------------------- Polia formulára (vyskakujúci názov, okraje, výška) rieši backend-formulare.css. Tu je len to, čo je na prihlasovacej obrazovke iné. ODKIAĽ POCHÁDZAJÚ HODNOTY -------------------------------------------------------------------------- Odmerané z podkladov v priečinku fotky4 (prihlasovacia_obrazovka_desktop.jpg a výrezy). Označenie (M) = odmerané, (Z) = v zadaní vypísané slovom. ========================================================================== */ :root { --be-prih-karta-sirka: 374px; /* (M) šírka bielej karty */ --be-prih-karta-radius: 16px; /* (M) */ --be-prih-odkaz: #1910C5; /* (M) modrá odkazu "Zabudnuté heslo" */ --be-prih-chyba: #DB0D10; /* (M) rámček chybovej hlášky */ } /* -------------------------------------------------------------------------- 1. POZADIE -------------------------------------------------------------------------- Fotografia z podkladov, cez celú plochu okna. Je pripnutá (fixed), takže sa pri posúvaní obsahu nehýbe - na mobile, kde sa formulár nemusí zmestiť, tak pôsobí ako stále pozadie a nie ako dlhý obrázok. Podkladová farba pod ňou je priemerná farba tej fotografie. Drží vzhľad v okamihu, kým sa obrázok stiahne, a aj vtedy, keby sa nestiahol vôbec. -------------------------------------------------------------------------- */ .fi-body.fi-simple-layout, .fi-simple-layout { background-color: #8A7A63; /* (M) priemerná farba fotografie */ background-image: url('/images/prihlasenie-pozadie.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } /* -------------------------------------------------------------------------- 2. LOGO NAD KARTOU -------------------------------------------------------------------------- Logo sa berie z Nastavení (Identita), nie je napevno v štýle - viď ->brandLogo() v AdminPanelProvider. Tu sa určuje len jeho veľkosť a odstup. -------------------------------------------------------------------------- */ /* Filament v tejto verzii žiadny .fi-simple-layout-header nekreslí - logo dáva DOVNÚTRA karty, do .fi-simple-header nad nadpis. Pôvodné pravidlo tak mierilo na prvok, ktorý na stránke nie je, a logo zostávalo malé a v karte. Návrh (image (5).png) ho má nad kartou, samostatne na pozadí. Vyberá sa preto z toku a pripína nad horný okraj karty. */ .fi-simple-main { position: relative; } .fi-simple-main .fi-logo, .fi-simple-header .fi-logo { position: absolute; left: 50%; transform: translateX(-50%); /* image (5).png: logo asi 150 x 135 px, spodok nápisu ~50 px nad kartou (predloha je v mierke 0,97 - karta 364 px proti našim 374 px). */ bottom: calc(100% + 45px); /* (M) odstup od karty */ /* !important je nutné - Filament dáva logu vlastnú výšku triedou a bez neho zostalo 122 x 24 bodov namiesto rozmeru z návrhu. */ max-height: 137px !important; /* (M) */ max-width: 160px !important; width: auto !important; height: auto !important; object-fit: contain; margin: 0; } /* -------------------------------------------------------------------------- 3. BIELA KARTA -------------------------------------------------------------------------- */ .fi-simple-main { width: 100%; max-width: var(--be-prih-karta-sirka) !important; padding: 30px 24px !important; /* (M) */ background: var(--be-surface) !important; border: 0 !important; border-radius: var(--be-prih-karta-radius) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .18) !important; } /* Nadpis a sprievodný text - čierny nadpis, sivý text, oboje na stred. */ .fi-simple-header { text-align: center; } .fi-simple-header-heading { color: var(--be-active) !important; font-size: 21px; /* (M) */ font-weight: 700 !important; } /* Prvý riadok podnadpisu je v predlohe 22 px pod stredom nadpisu. */ .fi-simple-header-subheading { margin-top: -1px; /* (M) */ color: var(--be-inactive) !important; font-size: 13px; /* (M) */ line-height: 1.45; } /* -------------------------------------------------------------------------- 3b. ROZOSTUPY -------------------------------------------------------------------------- Odmerané z predlohy (Backend - Prihlasovacia obrazovka/image (1).png), vzdialenosti od stredu nadpisu "Prihlásenie": výber jazyka +68, meno +133, heslo +198 (riadok polí = 65 px) odkaz "Zabudnuté heslo" 8 px pod heslom, tlačidlo 19 px pod odkazom, "Zostať prihlásený" 12 px pod tlačidlom. Filament dáva mriežke 24 px, pole si nesie ešte 12 px pod sebou - všetko bolo o 14 až 25 px ďalej od seba než v predlohe. -------------------------------------------------------------------------- */ .fi-simple-main .fi-simple-header { margin-bottom: -7px; /* 24 px od Filamentu -> 17 px (podnadpis je o 7 px vyššie) */ } .fi-simple-main .fi-sc-form, .fi-simple-main .fi-sc-form .fi-grid { row-gap: 8px !important; /* pole 45 + 12 + 8 = 65 */ } /* Odkaz leží tesne pod heslom: zruší sa spodná medzera poľa nad ním. Len odkaz hneď za poľom - "Späť na prihlásenie" na obrazovke obnovy hesla stojí pod tlačidlom a so zápornou medzerou by doň vošiel. */ .fi-simple-main .fi-grid-col:has(.be-pole) + .fi-grid-col > .fi-sc-component:has(> .fi-sc-text) { margin-top: -12px; /* (M) */ margin-bottom: 11px; /* (M) 8 + 11 = 19 px k tlačidlu */ } /* Obrazovka zabudnutého hesla: tlačidlo je hneď za poľom (odkaz "Späť na prihlásenie" je presunutý pod tlačidlo) a má byť 20 px pod ním (zadávateľ, 24. 9. 2026). Pole nesie pod sebou 20 px (pravidlo "20 px medzi poľami" z backend-formulare.css) + 8 px mriežky = 28 px; tu je pole posledné, takže 12 + 8 = 20. Triedu dáva poľu ZabudnuteHeslo.php (extraFieldWrapperAttributes). */ .fi-simple-main .fi-fo-field.be-pred-tlacidlom { margin-bottom: 12px; /* (Z) 12 + 8 px mriežky = 20 px */ } /* -------------------------------------------------------------------------- 4. ODKAZ "ZABUDNUTÉ HESLO" A "SPÄŤ NA PRIHLÁSENIE" -------------------------------------------------------------------------- Podľa karty modrý, podčiarknutý a na stred. Inde v administrácii je odkaz čierny (viď backend-formulare.css) - tu je to zámerne iné, lebo je to jediné miesto, kde odkaz stojí sám a musí byť nájditeľný na prvý pohľad. -------------------------------------------------------------------------- */ .fi-simple-main .be-odkaz, .fi-simple-main .fi-sc-text { display: block; text-align: center; } .fi-simple-main .be-odkaz { color: var(--be-prih-odkaz) !important; font-size: 14px; /* (M) */ text-decoration: underline; text-underline-offset: 2px; } .fi-simple-main .be-odkaz:hover { color: var(--be-tlacidlo) !important; } /* -------------------------------------------------------------------------- 5. TLAČIDLO -------------------------------------------------------------------------- Podľa karty NIE je cez celú šírku - je len tak široké, ako potrebuje, a stojí na stred. Filament mu predvolene dáva plnú šírku. -------------------------------------------------------------------------- */ .fi-simple-main .fi-form-actions, .fi-simple-main .fi-ac { display: flex !important; justify-content: center !important; } .fi-simple-main .fi-btn:not(.fi-icon-btn) { width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; padding: 0 26px; /* (M) */ } /* Ikona v tlačidle je biela a o niečo väčšia než v bežných tlačidlách. */ .fi-simple-main .fi-btn:not(.fi-icon-btn) .fi-icon, .fi-simple-main .fi-btn:not(.fi-icon-btn) svg { width: 20px; height: 20px; color: #FFFFFF !important; } /* -------------------------------------------------------------------------- 6. "ZOSTAŤ PRIHLÁSENÝ" POD TLAČIDLOM -------------------------------------------------------------------------- Samotný presun robí public/js/backend-formulare.js - políčko a tlačidlo sú v dvoch rôznych blokoch, takže vlastnosť order by ich neprehodila. Dôvod je vysvetlený tam. Tu je len to, ako má políčko po presune vyzerať: na stred a s odstupom od tlačidla. -------------------------------------------------------------------------- */ .fi-simple-main .fi-fo-field:has(.fi-checkbox-input) { display: flex; justify-content: center; margin-top: 4px; /* (M) 8 px mriežky + 4 = 12 px pod tlačidlom */ margin-bottom: 0; } /* Samotné políčko - podľa návrhu, nie Filamentov. -------------------------------------------------------------------------- Karta "Prihlasovacia obrazovka", komentár z 24. 9. 2026 (Trello N7vDpjf4): "Opraviť správnu ikonu Checkboxu, keď je zakliknutý - teraz nie je správna ani veľkosť, ani zakliknutá." Filament kreslí políčko 18 px s modrou fajkou; návrh (prihlasovacia_obrazovka_desktop.jpg) má čierny zaoblený štvorček 22 x 22 px (M) a zaškrtnutý stav s fajkou vnútri. Obidva tvary sú z príloh karty: check-mark-disabled.svg -> icons/checkbox-neaktivny.svg, check-mark-enabled.svg -> icons/checkbox-aktivny.svg. Vlastný vzhľad prehliadača sa vypína a políčko sa kreslí ako obrázok na pozadí; zostáva skutočným políčkom, takže klávesnica, čítačky obrazovky aj Livewire (wire:model) fungujú ako doteraz. */ .fi-simple-main .fi-checkbox-input { appearance: none !important; -webkit-appearance: none !important; width: 22px !important; /* (M) */ height: 22px !important; margin: 0 !important; /* medzeru k textu (10 px) drží backend-formulare.css */ padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: url('../icons/checkbox-neaktivny.svg') center / 22px 22px no-repeat !important; cursor: pointer; } /* Filament dáva zaškrtnutému políčku plné pozadie v hlavnej farbe (tu čierne) a bielu fajku - pod čiernou ikonou by z toho bol čierny štvorec. */ .fi-simple-main .fi-checkbox-input:checked, .fi-simple-main .fi-checkbox-input:checked:hover, .fi-simple-main .fi-checkbox-input:checked:focus { background-color: transparent !important; background-image: url('../icons/checkbox-aktivny.svg') !important; background-size: 22px 22px !important; /* Filament dáva fajke 13 px */ background-position: center !important; background-repeat: no-repeat !important; } .fi-simple-main .fi-checkbox-input:focus-visible { outline: 2px solid var(--be-tlacidlo); outline-offset: 2px; } /* -------------------------------------------------------------------------- 7. CHYBOVÁ HLÁŠKA -------------------------------------------------------------------------- Podľa karty červený rámček pod celým formulárom, text na stred. Zoznam chýb skladá public/js/backend-formulare.js (trieda be-chyby) - ten istý, ktorý ho robí vo zvyšku administrácie. Tu dostáva len iný vzhľad, pretože karta ho takto ukazuje. -------------------------------------------------------------------------- */ .fi-simple-main .be-chyby { margin: 16px 0 0; padding: 12px 14px; border: 2px solid var(--be-prih-chyba); border-radius: 8px; /* (M) */ text-align: center; } .fi-simple-main .be-chyby li { margin: 0; color: var(--be-prih-chyba); font-size: 13px; /* (M) */ line-height: 1.5; } /* -------------------------------------------------------------------------- 8. MOBIL -------------------------------------------------------------------------- Karta sa zúži a priľne k okrajom, logo sa zmenší. Hraničný bod je "mobil nastojato" zo zadania. -------------------------------------------------------------------------- */ /* ========================================================================== RESPONZÍVNE PRAVIDLÁ TU NIE SÚ ========================================================================== Hľadáš, kedy sa toto preskladá na tablete alebo mobile? Je to v Core/app/Services/ResponzivitaService.php Nie je to rozmar: šesť hraničných bodov sa zadáva v Nastaveniach → Identita a pravidlo @media hodnotu z premennej prečítať nevie. Jediný spôsob, ako tie hodnoty naozaj riadiť z Nastavení, je pravidlá vygenerovať. Kým boli tu napevno, nastavenia sa síce uložili, ale nerobili nič. V tom súbore sú pohromade pravidlá pre administráciu aj pre verejnú časť, usporiadané od najširšej obrazovky po najužšiu. ========================================================================== */