/* ==========================================================================
POLIA FORMULÁROV A PRVKY
==========================================================================
Vzhľad a správanie podľa karty "Backend - Definícia polí formulárov
a prvkov". Nadväzuje na backend.css, ktorý rieši rám administrácie -
tento súbor rieši to, čo je v ňom.
ODKIAĽ POCHÁDZAJÚ HODNOTY
--------------------------------------------------------------------------
Rovnako ako pri ráme: návrh prišiel ako PNG náhľady v mierke 1:1, takže
každý rozmer aj farba nižšie sú odmerané priamo z pixelov.
(Z) = hodnota je v zadaní vypísaná slovom
(M) = hodnota je odmeraná z náhľadu
Kde sa odmerané líši od zadaného, platí ZADANÉ - rozdiel je zaokrúhlenie
v náhľade, nie zámer návrhára.
PREČO NIE JE VŠETKO ČISTO V CSS
--------------------------------------------------------------------------
Návrh chce, aby názov poľa bol pri prázdnom poli VO VNÚTRI poľa a po
kliknutí (alebo keď je pole vyplnené) vyskočil na jeho horný okraj.
Zaostrenie CSS zvládne samo cez :focus-within. "Vyplnené" ale nie:
selektor :placeholder-shown funguje len na poliach, ktoré naozaj majú
atribút placeholder, a Filament ho na väčšine polí nemá. Preto triedu
be-plne dopĺňa skript backend-formulare.js. Skript rieši aj presúvanie
názvu poľa, keď hodnotu zmení Livewire, nie používateľ.
Skript nie je podmienkou čitateľnosti: keď sa nespustí, polia vyzerajú
ako prázdne, ale sú plne použiteľné.
========================================================================== */
/* --------------------------------------------------------------------------
1. PREMENNÉ
--------------------------------------------------------------------------
Premenné rámu (--be-rail-*, --be-active, --be-inactive ...) sú v
backend.css. Tu pribúdajú len tie, ktoré sa týkajú polí.
-------------------------------------------------------------------------- */
:root {
/* Rozmery poľa */
--be-pole-vyska: 45px; /* (M) vonkajšia výška poľa */
--be-pole-radius: 10px; /* štandard prvkov (fGaWyseJ, 28. 9. 2026): zaoblenie 10 px */
--be-pole-odsadenie: 20px; /* štandard prvkov (28. 9. 2026): text a popis 20 px od ľavého okraja */
--be-pole-medzera: 20px; /* pravidlo zadávateľa (24. 9. 2026): medzi poľami vždy 20 px */
/* Farby poľa v pokoji - návrh ich vypisuje slovom */
--be-pole-okraj: #CCCCCC; /* (Z) */
--be-pole-text: #CCCCCC; /* (Z) názov v prázdnom poli */
/* Farby poľa po kliknutí alebo keď je vyplnené */
--be-pole-okraj-akt: #000000; /* (Z) */
--be-pole-text-akt: #000000; /* (Z) */
/* Veľkosti písma v poli */
--be-pole-pismo: 16px; /* štandard prvkov (28. 9. 2026): Open Sans 16 px Light */
--be-pole-pismo-male: 13px; /* štandard prvkov (28. 9. 2026): popis na okraji 13 px Light */
/* Povinné pole a chyby */
--be-povinne: #E30014; /* (M) hviezdička; zhoduje sa
s farbou bubliny notifikácií */
--be-chyba: #E30014; /* (M) namerané DB011C na okraji
chybného poľa - rovnaká červená */
/* Krížik "odstrániť". Je to ovládanie, nie hlásenie chyby, a v návrhu má
aj inú, mäkšiu červenú - odmerané z fotky2/image (5).png. */
--be-zrusit: #D33249; /* (M) */
--be-zrusit-tmavsi: #AF2739; /* stmavené o 15 % - návrh farbu pri
prejdení myšou neuvádza */
/* Plochy */
--be-panel: #F2F2F2; /* (M) sivý pruh s tlačidlom Uložiť
a podklad nahrávacieho poľa */
--be-frame-okraj: #F2F2F2; /* (M) okraj obsahového rámu */
/* Tlačidlo
-------------------------------------------------------------------
Zadanie hovorí, že farba tlačidla sa berie z Nastavení backendu.
Kým tá časť Nastavení nie je hotová, je tu odmeraná farba z návrhu
ako predvolená. Až pribudne, stačí prepísať túto jedinú premennú -
nikde inde v súbore sa farba tlačidla neopakuje. */
--be-tlacidlo: #DB9633; /* štandard prvkov (28. 9. 2026): bežné tlačidlo */
--be-tlacidlo-prechod: #C07E22; /* (M) stmavená o 10 % - návrh
prechodovú farbu neuvádza */
--be-tlacidlo-text: #FFFFFF; /* (M) */
--be-tlacidlo-radius: 10px; /* štandard prvkov (28. 9. 2026) */
/* Nápoveda (bublina nad poľom) */
--be-napoveda-podklad: #555555; /* (M) odmerané z návrhu */
--be-napoveda-text: #FFFFFF; /* (M) */
--be-napoveda-ikona: #000000; /* (M) krúžok, písmeno je biele */
}
/* --------------------------------------------------------------------------
2. NADPIS A TEXT
--------------------------------------------------------------------------
Zadanie: nadpis vždy H1 až H6 a vždy čierny (#000000), text vždy #7F7F7F.
Obidvoje vždy z prekladov - to nie je vec vzhľadu, rieši to helper t()
v samotných stránkach.
-------------------------------------------------------------------------- */
.fi-body h1,
.fi-body h2,
.fi-body h3,
.fi-body h4,
.fi-body h5,
.fi-body h6,
.fi-body .fi-header-heading,
.fi-body .fi-sc-section-label {
color: var(--be-active) !important; /* #000000 */
font-weight: 700 !important;
}
/* Sprievodný text pod nadpisom. Filament preň má vlastnú triedu pre popis
stránky aj pre popis sekcie - obe majú mať rovnakú sivú. */
.fi-body .fi-header-subheading,
.fi-body .fi-sc-section-description,
.fi-body .fi-sc-text {
color: var(--be-inactive) !important; /* #7F7F7F */
}
/* --------------------------------------------------------------------------
2b. SEKCIA FORMULÁRA - LEN NADPIS, ŽIADNA KARTA
--------------------------------------------------------------------------
V návrhoch (nastavenia_farebnost.jpg, nastavenia_fonty.jpg,
nastavenia_identita.jpg) je sekcia iba tučný nadpis a pod ním polia. Žiadny
biely rámček, žiadne zaoblenie, žiadna deliaca linka.
Filament ju kreslí ako kartu: biele pozadie, zaoblenie 12 px, odsadenie
16/24 px a linku medzi hlavičkou a obsahom. Nikto to dovtedy neprepísal,
takže formuláre vyzerali ako poskladané z kariet a polia začínali o 24 bodov
ďalej vpravo než nadpis.
Ruší sa len vzhľad karty - štruktúra Filamentu zostáva, takže mriežka
stĺpcov, chybové hlášky ani nič iné sa nemenia.
Platí len vnútri .fi-main: prihlasovacia obrazovka má vlastný návrh, v ktorom
karta naopak JE.
-------------------------------------------------------------------------- */
.fi-body .fi-main .fi-section {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Nadpis sekcie zarovnaný s poliami pod ním, nie odsadený o 24 px.
Medzera pod nadpisom je 20 px - pravidlo zadávateľa z 24. 9. 2026 pre
všetky formuláre: nadpis sekcie -> prvé pole vždy 20 px. */
.fi-body .fi-main .fi-section-header {
/* Štandard prvkov (fGaWyseJ, 28. 9. 2026): pod H2 sekcie 10 px, pod textom
sekcie 20 px - text (popis) má vlastný spodný okraj nižšie. */
padding: 0 0 10px 0 !important;
}
.fi-body .fi-main .fi-section-header:not(:has(.fi-section-header-description)) {
padding-bottom: 20px !important;
}
.fi-body .fi-main .fi-section-header-description {
margin: 10px 0 10px !important;
font-size: 14px !important;
font-weight: 300 !important;
line-height: 1.45 !important;
color: var(--be-inactive) !important;
}
.fi-body .fi-main .fi-section-header-text-ctn {
padding: 0 !important;
}
/* Linka medzi nadpisom a obsahom v návrhu nie je. */
.fi-body .fi-main .fi-section-content-ctn {
border: 0 !important;
}
.fi-body .fi-main .fi-section-content {
padding: 0 !important;
background: transparent !important;
}
/* Medzeru medzi poľami určuje pole, nie mriežka.
-------------------------------------------------------------------------
Filament dáva mriežke sekcie medzeru 24 px v oboch smeroch. Každé pole si
pritom už nesie vlastnú spodnú medzeru (--be-pole-medzera), takže zvislý
rozostup bol 36 px namiesto dvanástich, ktoré má návrh. Pri desiatich
poliach za sebou to je 240 bodov rozdielu a spodok stránky nesedel
s návrhom ani zďaleka.
Ruší sa LEN zvislá medzera. Vodorovná zostáva - tá oddeľuje ľavý a pravý
stĺpec.
PRAVIDLO ZADÁVATEĽA (24. 9. 2026) PRE VŠETKY FORMULÁRE
-------------------------------------------------------------------------
Vždy 20 px: nadpis sekcie -> prvé pole, medzi poľami zvislo (dáva
--be-pole-medzera) aj medzi ľavým a pravým stĺpcom (column-gap tu).
Platí pre každý nový formulár bez ďalšieho zadania. */
.fi-body .fi-main .fi-section-content,
.fi-body .fi-main .fi-sc-form .fi-grid {
row-gap: 0 !important;
column-gap: 20px !important;
}
/* Trieda zo starších stránok (Identita, Farebnosť), keď medzera 20 px platila
len pre ne. Dnes je 20 px predvolených, trieda zostáva bez účinku, aby sa
nemuseli meniť stránky, ktoré ju dávajú. */
.fi-body .be-sekcia-riedka {
--be-pole-medzera: 20px;
}
/* Medzera medzi sekciami - v návrhu je medzi "Hlavné farby" a "Farby písma"
výrazne viac miesta než medzi poliami. */
.fi-body .fi-main .fi-sc-section + .fi-sc-section {
margin-top: 28px; /* (M) */
}
/* Veľkosť nadpisu sekcie podľa návrhu. Farbu a hrúbku rieši oddiel 2. */
.fi-body .fi-main .fi-section-header-text-ctn .fi-section-header-heading,
.fi-body .fi-main .fi-sc-section-label {
font-size: 20px !important; /* štandard prvkov (28. 9. 2026): H2 20 px Bold #000 */
line-height: 1.3 !important;
}
/* --------------------------------------------------------------------------
3. OBSAHOVÝ FRAME
--------------------------------------------------------------------------
Zadanie: "bude sa používať na zobrazovanie rôznych obsahov".
V návrhu je to biela plocha s veľmi svetlým okrajom a zaoblením - napr.
náhľad nahratého loga vedľa nahrávacieho poľa.
Je to pomocná trieda, nie prepis Filamentu: dáva sa tam, kde ju stránka
potrebuje.
-------------------------------------------------------------------------- */
.be-frame {
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-height: var(--be-pole-vyska);
padding: 16px;
background: var(--be-surface);
border: 1px solid var(--be-frame-okraj);
border-radius: 10px; /* (M) */
}
/* Obsah sa nikdy nesmie roztiahnuť cez rám. */
.be-frame > img,
.be-frame > svg {
max-width: 100%;
height: auto;
}
/* Krížik na odstránenie obsahu - v návrhu je v pravom hornom rohu a presahuje
cez okraj rámu.
Farba je odmeraná z návrhu (fotky2/image (5).png) a je zámerne INÁ než
červená pri chybách: krížik nič nehlási, je to ovládanie. Používa ju aj
krížik nad nahratým súborom v oddiele 11. */
.be-frame-zrusit {
position: absolute;
top: -11px;
right: -11px;
width: 22px;
height: 22px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--be-zrusit);
color: #FFFFFF;
border: 2px solid var(--be-surface);
border-radius: 50%;
font-size: 12px;
line-height: 1;
cursor: pointer;
}
.be-frame-zrusit:hover {
background: var(--be-zrusit-tmavsi);
}
/* --------------------------------------------------------------------------
4. SPOLOČNÝ ZÁKLAD POĽA - VYSKAKUJÚCI NÁZOV
--------------------------------------------------------------------------
Toto je jadro celej karty. Filament vykresľuje názov poľa ako samostatný
blok NAD poľom:
div.fi-fo-field
div.fi-fo-field-label-col <- názov
div.fi-fo-field-content-col <- samotné pole
Návrh ho chce mať v pokoji vo vnútri poľa a po kliknutí na jeho hornom
okraji. Namiesto prepisovania šablóny (ktorá by sa pri aktualizácii
Filamentu rozbila) sa názov len vyberie z toku a položí sa nad pole.
Skript backend-formulare.js označí obal poľa triedou be-pole; bez nej sa
nič z tohto nepoužije, takže prípadné cudzie polia zostanú nedotknuté.
-------------------------------------------------------------------------- */
.fi-body .be-pole {
position: relative;
margin-bottom: var(--be-pole-medzera);
}
/* Názov poľa v pokoji: vnútri poľa, zvisle na stred, sivý.
pointer-events: none je dôležité - bez toho by názov zachytával kliknutia
a do poľa by sa nedalo kliknúť v mieste, kde názov leží. */
.fi-body .be-pole > .fi-fo-field-label-col {
position: absolute;
left: var(--be-pole-odsadenie);
top: 0;
z-index: 2;
height: var(--be-pole-vyska);
margin: 0;
padding: 0;
display: flex;
align-items: center;
/* Názov leží NAD poľom, takže musí kliknutia prepúšťať - inak by sa do
poľa nedalo kliknúť práve v mieste, kde názov je. */
pointer-events: none;
transition: top 0.12s ease, height 0.12s ease;
}
/*
Výnimka: ovládacie prvky vnútri názvu.
--------------------------------------------------------------------------
Vlastnosť pointer-events sa DEDÍ. Pri zaškrtávacom políčku a prepínači dáva
Filament samotný .
--------------------------------------------------------------------------
Pri plávajúcom názve je práve tým prvkom, ktorý leží nad poľom.
Keď kliknutia prijíma, zachytí ich namiesto poľa - a hoci kliknutie na
názov pole zaostrí, kurzor sa nedá umiestniť na konkrétne miesto v texte.
Odhalil to test, ktorý sa do poľa nevedel dokliknúť.
Typy, pri ktorých názov nad poľom NELEŽÍ (výbery, nahrávanie, editor), majú
kliknutia povolené na celom bloku - viď pravidlo hneď nižšie.
*/
.fi-body .be-pole > .fi-fo-field-label-col :where(input, select, textarea, button, a) {
pointer-events: auto;
}
/* Typy, pri ktorých názov nad poľom neleží, ho prepúšťať nemusia vôbec. */
.fi-body .be-pole-vyber > .fi-fo-field-label-col,
.fi-body .be-pole-media > .fi-fo-field-label-col,
.fi-body .be-pole-wysiwyg > .fi-fo-field-label-col {
pointer-events: auto;
}
/*
POISTKA: pole s odkazom vedľa názvu neplává.
--------------------------------------------------------------------------
Filament vie k názvu poľa pripojiť nápovedu (hint) - napríklad odkaz.
Vykreslí ju do toho istého bloku ako názov, takže by plávala nad formulárom
a brala kliknutia prvkom pod sebou.
Presne to sa stalo na prihlasovacej obrazovke: odkaz "Zabudnuté heslo"
ležal nad prihlasovacím tlačidlom a tlačidlo sa nedalo stlačiť. Tam je to
vyriešené v App\Filament\Auth\Login (odkaz je samostatný prvok), ale iné
formuláre môžu nápovedu použiť tiež - a tam nech radšej nepláva nič.
*/
.fi-body .be-pole > .fi-fo-field-label-col:has(a, .fi-link) {
position: static;
height: auto;
margin-bottom: 6px;
pointer-events: auto;
}
.fi-body .be-pole > .fi-fo-field-label-col:has(a, .fi-link) .fi-fo-field-label {
background: transparent;
padding: 0;
color: var(--be-pole-text-akt);
font-size: var(--be-pole-pismo-male);
}
/*
Pole s predponou (napríklad € pri cenách).
--------------------------------------------------------------------------
Predpona leží vnútri poľa pri ľavom okraji - teda presne tam, kde v pokoji
leží plávajúci názov. Prekrývali sa a na obrazovke sa čítalo "€Cena od".
Názov sa preto v pokoji posunie za predponu. Jej šírku meria
backend-formulare.js a odovzdáva ju sem ako premennú - napevno zapísaná
by sedela len na jednoznakovej predpone, a Filament ňou vie vypísať aj slovo.
Keď názov vyskočí na horný okraj, predpona mu už nezavadzia a vracia sa na
bežné miesto. Rieši to pravidlo hneď pod týmto.
*/
.fi-body .be-pole.be-ma-predponu > .fi-fo-field-label-col {
left: calc(var(--be-pole-odsadenie) + var(--be-predpona-sirka, 0px));
}
.fi-body .be-pole.be-ma-predponu:focus-within > .fi-fo-field-label-col,
.fi-body .be-pole.be-ma-predponu.be-plne > .fi-fo-field-label-col,
.fi-body .be-pole.be-ma-predponu.be-stale-aktivne > .fi-fo-field-label-col {
left: var(--be-pole-odsadenie);
}
.fi-body .be-pole .fi-fo-field-label {
margin: 0;
padding: 0 5px;
color: var(--be-pole-text);
font-size: var(--be-pole-pismo);
/* Light, nie Regular: šírky názvov v prázdnych poliach v predlohách
("Nadpis H1" 70 px, "Širokouhlá obrazovka" 152 px) sedia na Open Sans
300 pri 15 px. Vyskočený názov na okraji je Regular - pravidlo nižšie. */
font-weight: 300 !important;
line-height: 1.2;
white-space: nowrap;
/* Podklad je priehľadný, kým názov leží vnútri poľa. Až keď vyskočí na
okraj, prekryje ho bielou - inak by cezeň prechádzala čiara okraja. */
background: transparent;
transition: color 0.12s ease, font-size 0.12s ease;
}
/* Text názvu farbu dedí. Filament mu dáva vlastnú tmavú (text-gray-950),
takže farba nastavená o úroveň vyššie sa k nemu nedostala a prázdne pole
malo čierny názov namiesto #CCCCCC. Hviezdička má svoju červenú zvlášť. */
.fi-body .be-pole .fi-fo-field-label-content {
color: inherit !important;
}
/* Hviezdička povinného poľa. Zadanie: zobrazuje sa ZA textom a len vtedy,
keď je pole povinné - o čo sa stará Filament sám.
Filament ju píše ako posunutý nahor; v predlohe (image (1).png,
image (13).png) stojí na tom istom riadku ako text: "Desktop *". */
.fi-body .fi-fo-field-label-required-mark {
position: static !important;
top: auto !important;
color: var(--be-povinne) !important;
font-size: 1em;
line-height: inherit !important;
vertical-align: baseline !important;
margin-left: 3px;
}
/* --- Aktívny stav ----------------------------------------------------------
Nastáva v dvoch prípadoch, ktoré návrh kladie na rovnakú úroveň:
:focus-within - v poli je kurzor
.be-plne - pole má hodnotu (dopĺňa skript)
Zadanie to hovorí výslovne: "Vyplnené a zvalidované pole zostáva vždy
v stave Aktívne."
-------------------------------------------------------------------------- */
.fi-body .be-pole:focus-within > .fi-fo-field-label-col,
.fi-body .be-pole.be-plne > .fi-fo-field-label-col,
.fi-body .be-pole.be-stale-aktivne > .fi-fo-field-label-col {
top: -8px;
height: 16px;
}
.fi-body .be-pole:focus-within .fi-fo-field-label,
.fi-body .be-pole.be-plne .fi-fo-field-label,
.fi-body .be-pole.be-stale-aktivne .fi-fo-field-label {
color: var(--be-pole-text-akt);
font-size: var(--be-pole-pismo-male);
font-weight: 300 !important; /* štandard prvkov (28. 9. 2026): 13 px Light */
/* Bielym podkladom názov "prereže" okraj poľa - presne ako v návrhu. */
background: var(--be-surface);
}
/* --- Rámček poľa -----------------------------------------------------------
Filament kreslí okraj aj zaostrenie cez box-shadow (Tailwind ring).
Prepisuje sa naraz, aby sa tieň a okraj nebili.
-------------------------------------------------------------------------- */
.fi-body .be-pole .fi-input-wrp,
.fi-body .be-pole .fi-fo-select-wrp,
.fi-body .be-pole .fi-fo-textarea-wrp {
background: var(--be-surface) !important;
border: 1px solid var(--be-pole-okraj) !important;
border-radius: var(--be-pole-radius) !important;
box-shadow: none !important;
outline: none !important;
transition: border-color 0.12s ease;
}
.fi-body .be-pole:focus-within .fi-input-wrp,
.fi-body .be-pole.be-plne .fi-input-wrp,
.fi-body .be-pole.be-stale-aktivne .fi-input-wrp,
.fi-body .be-pole:focus-within .fi-fo-select-wrp,
.fi-body .be-pole.be-plne .fi-fo-select-wrp,
.fi-body .be-pole.be-stale-aktivne .fi-fo-select-wrp,
.fi-body .be-pole:focus-within .fi-fo-textarea-wrp,
.fi-body .be-pole.be-plne .fi-fo-textarea-wrp {
border-color: var(--be-pole-okraj-akt) !important;
}
/* --- Samotné vstupné pole -------------------------------------------------- */
.fi-body .be-pole .fi-input,
.fi-body .be-pole .fi-select-input {
height: calc(var(--be-pole-vyska) - 2px); /* -2 px = okraje */
padding: 0 var(--be-pole-odsadenie);
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: none !important;
color: var(--be-pole-text-akt);
font-size: var(--be-pole-pismo);
}
/* Vlastný placeholder prehliadača sa nepoužíva - túto úlohu plní názov poľa.
Keby ho niektoré pole malo nastavený, prekryl by sa s názvom. */
.fi-body .be-pole .fi-input::placeholder {
color: transparent;
}
/*
Ikony na konci poľa (napr. oko pri hesle) patria DOVNÚTRA rámčeka.
--------------------------------------------------------------------------
Filament im dáva vlastný podklad a orámovanie, takže vedľa poľa vznikol
druhý samostatný štvorček - na prihlasovacej obrazovke to vyzeralo ako dve
políčka vedľa seba. Návrh má jedno pole s ikonou v ňom.
*/
.fi-body .be-pole .fi-input-wrp > *:not(.fi-input),
.fi-body .be-pole .fi-input-wrp-actions {
background: transparent !important;
border: 0 !important;
border-inline-start: 0 !important;
box-shadow: none !important;
}
.fi-body .be-pole .fi-input-wrp-actions {
padding-right: 8px;
}
.fi-body .be-pole .fi-input-wrp-actions .fi-icon-btn {
background: transparent !important;
box-shadow: none !important;
color: var(--be-inactive) !important;
}
.fi-body .be-pole .fi-input-wrp-actions .fi-icon-btn:hover {
color: var(--be-active) !important;
}
/* Klávesnicová dostupnosť: obrys sa vypol vyššie, takže zaostrenie musí byť
vidieť inak. Rieši to zhrubnutý čierny okraj. */
.fi-body .be-pole:focus-within .fi-input-wrp,
.fi-body .be-pole:focus-within .fi-fo-select-wrp,
.fi-body .be-pole:focus-within .fi-fo-textarea-wrp {
box-shadow: 0 0 0 1px var(--be-pole-okraj-akt) !important;
}
/* --------------------------------------------------------------------------
5. POLE TEXT (1 RIADOK)
--------------------------------------------------------------------------
Nemá nič navyše oproti spoločnému základu - je to jeho predloha.
Pravidlá zo zadania, ktoré zabezpečuje oddiel 4:
- v pokoji je názov obsahom poľa, okraj aj text #CCCCCC
- po kliknutí sa názov presunie na horný okraj, okraj aj text #000000
- hviezdička za textom len pri povinnom poli
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
6. POLE TEXTAREA
--------------------------------------------------------------------------
Zadanie: funguje rovnako ako Text, na výšku má 4 riadky.
Názov nesmie byť zvisle na stred - pri štyroch riadkoch by skončil
v polovici plochy. Drží sa preto pri hornom okraji.
-------------------------------------------------------------------------- */
.fi-body .be-pole-textarea > .fi-fo-field-label-col {
height: var(--be-pole-vyska);
align-items: center;
}
.fi-body .be-pole-textarea .fi-input {
height: auto;
min-height: calc(4 * 1.5em + 22px); /* (Z) štyri riadky + odsadenie */
padding: 11px var(--be-pole-odsadenie);
line-height: 1.5;
resize: vertical;
}
/* --------------------------------------------------------------------------
7. POLE WYSIWYG EDITOR
--------------------------------------------------------------------------
Zadanie: funguje rovnako ako Text, 4 riadky, obsahuje HTML editor
(CK Editor alebo TinyMCE). V projekte je CK Editor - viď
Core/app/Filament/Forms/Components/CkEditor.php.
Editor si vykresľuje vlastný rámik a lištu nástrojov, takže sa mu tu
zjednocuje len okraj a zaoblenie so zvyškom formulára.
-------------------------------------------------------------------------- */
.fi-body .be-pole-wysiwyg .ck.ck-editor__main > .ck-editor__editable,
.fi-body .be-pole-wysiwyg .fi-fo-rich-editor-content {
min-height: calc(4 * 1.5em + 22px); /* (Z) štyri riadky */
border: 0 !important;
box-shadow: none !important;
}
.fi-body .be-pole-wysiwyg .ck.ck-toolbar,
.fi-body .be-pole-wysiwyg .fi-fo-rich-editor-toolbar {
background: var(--be-surface) !important;
border: 0 !important;
border-bottom: 1px solid var(--be-frame-okraj) !important;
border-radius: var(--be-pole-radius) var(--be-pole-radius) 0 0 !important;
}
.fi-body .be-pole-wysiwyg .ck.ck-editor__editable_inline,
.fi-body .be-pole-wysiwyg .fi-fo-rich-editor {
border: 1px solid var(--be-pole-okraj) !important;
border-radius: var(--be-pole-radius) !important;
overflow: hidden;
}
/* Editor má vlastný priestor pre názov poľa, takže názov zostáva nad ním -
dnu by ho prekryla lišta nástrojov. */
.fi-body .be-pole-wysiwyg > .fi-fo-field-label-col {
position: static;
height: auto;
margin-bottom: 6px;
}
.fi-body .be-pole-wysiwyg .fi-fo-field-label {
background: transparent;
color: var(--be-pole-text-akt);
font-size: var(--be-pole-pismo-male);
padding: 0;
}
/* --------------------------------------------------------------------------
8. POLE SELECT
--------------------------------------------------------------------------
Zadanie: je VŽDY aktívny, pretože vždy obsahuje predvolenú hodnotu.
Názov je preto vždy na hornom okraji; keď zadaný nie je, nezobrazuje sa
(o čo sa stará Filament - bez názvu label-col vôbec nevykreslí).
Triedu be-stale-aktivne dáva skript, takže čierny okraj platí od začiatku
bez ohľadu na to, či je v poli kurzor.
-------------------------------------------------------------------------- */
/* Filament 5 kreslí select ako tlačidlo (.fi-select-input-btn) a svoju
tenkú šípku mu dáva ako CSS pozadie. Bez tohto boli šípky dve - Filamentova
tenká vedľa hrubšej z návrhu (zistené pri karte Mestá a PSČ). */
.fi-body .be-pole-select .fi-select-input-btn {
background-image: none !important;
}
.fi-body .be-pole-select .fi-select-input,
.fi-body .be-pismo .fi-select-input {
/* Vlastná šípka prehliadača sa skryje - návrh má svoju, hrubšiu. */
appearance: none;
-webkit-appearance: none;
padding-right: 42px;
cursor: pointer;
}
/* Šípka nadol. Kreslí sa ako podkladový obrázok, aby nepribúdala ďalšia
značka do šablóny. Platí aj pre váhu a veľkosť v poli Písmo - majú vlastnú
šablónu (pismo.blade.php), preto nedostanú triedu be-pole-select. */
.fi-body .be-pole-select .fi-fo-select-wrp,
.fi-body .be-pismo .fi-fo-select-wrp,
.fi-body .be-pole-select .fi-input-wrp {
position: relative;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5L8 8l6.5-6.5' fill='none' stroke='%23000000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 15px center !important;
}
/* Rozbalený zoznam. Návrh ho má bez vlastného okraja hore, priamo nadviazaný
na pole, so zaoblením len dole. */
.fi-body .fi-dropdown-panel,
.fi-body .fi-fo-select-panel {
border: 1px solid var(--be-pole-okraj) !important;
border-radius: 0 0 var(--be-pole-radius) var(--be-pole-radius) !important;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06) !important;
}
/* --------------------------------------------------------------------------
9. RADIO BUTTON A CHECKBOX
--------------------------------------------------------------------------
Zadanie pre obidva: sú vždy aktívne (vždy majú predvolenú hodnotu), názov
je nad zoznamom a keď zadaný nie je, nezobrazuje sa.
V návrhu je vybraná možnosť čierna a tučná, nevybraná sivá a obyčajná.
-------------------------------------------------------------------------- */
.fi-body .be-pole-vyber > .fi-fo-field-label-col {
/* Názov nad zoznamom, nie v ňom - zoznam nemá rámik, do ktorého by sa
dal vložiť. */
position: static;
height: auto;
margin-bottom: 8px;
}
.fi-body .be-pole-vyber .fi-fo-field-label {
background: transparent;
padding: 0;
color: var(--be-pole-text-akt);
font-size: var(--be-pole-pismo-male);
}
/* Samotné prepínače a zaškrtávacie políčka: hranaté, čierne, bez výplne. */
.fi-body .fi-checkbox-input,
.fi-body .fi-radio-input {
width: 18px;
height: 18px;
background-color: var(--be-surface) !important;
border: 2px solid var(--be-active) !important;
box-shadow: none !important;
color: var(--be-active) !important; /* farba značky vnútri */
}
.fi-body .fi-checkbox-input {
border-radius: 3px; /* (M) takmer hranaté */
}
.fi-body .fi-radio-input {
border-radius: 50%;
}
/* Zaškrtnuté a vybrané.
--------------------------------------------------------------------------
Značku vnútri si Filament kreslí podkladovým obrázkom v bielej farbe, aby
bola vidieť na svojej modrej výplni. Naša výplň bola biela, takže by bola
biela značka na bielom - políčko vyzeralo prázdne aj zaškrtnuté.
Zaškrtnuté políčko má preto ČIERNU výplň a bielu fajku. Pôvodne tu bola
biela výplň s čiernou fajkou, ale rozdiel medzi zaškrtnutým a nezaškrtnutým
bol príliš slabý - na prvý pohľad sa nedalo povedať, či je políčko
zaškrtnuté. Plná farba je vidieť okamžite, aj kútikom oka. */
.fi-body .fi-checkbox-input:checked,
.fi-body .fi-radio-input:checked {
background-color: var(--be-active) !important; /* #000000 */
border-color: var(--be-active) !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
/* Fajka v zaškrtávacom políčku - biela na čiernom, hrubá. */
.fi-body .fi-checkbox-input:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.3l3 3 6-6.6' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-size: 13px 13px !important;
}
/* Bodka v prepínači - biela na čiernom. */
.fi-body .fi-radio-input:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='3.2' fill='%23FFFFFF'/%3E%3C/svg%3E") !important;
background-size: 14px 14px !important;
}
/* Medzera medzi políčkom a jeho textom je VŽDY 10 px.
-------------------------------------------------------------------------
Pravidlo zadávateľa (24. 9. 2026, pri karte Prihlasovacia obrazovka):
"medzera medzi checkboxom a textom má byť štandardne 10 px - globálne na
všetky ďalšie checkboxy". Filament dáva 12 px; platí pre samostatné
políčko, políčko v zozname možností aj prepínač. Vlastné okraje políčka
sa nulujú, aby sa k medzere nič nepripočítalo. */
.fi-body .fi-fo-field-label:has(> .fi-checkbox-input),
.fi-body .fi-fo-field-label:has(> .fi-radio-input),
.fi-body label:has(> .fi-checkbox-input),
.fi-body label:has(> .fi-radio-input),
.fi-body .fi-fo-checkbox-list-option-label,
.fi-body .fi-fo-radio-label {
column-gap: 10px !important; /* (Z) */
gap: 10px !important;
}
.fi-body .fi-checkbox-input,
.fi-body .fi-radio-input {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Popis vedľa zaškrtnutého políčka stmavne a stučnie.
-------------------------------------------------------------------------
Rovnaké rozlíšenie, aké má návrh pri prepínačoch (vybraná možnosť čierna
a tučná, nevybraná sivá). Tu je to navyše druhý signál k farbe políčka -
takže je stav jasný aj pri pohľade na text, nielen na štvorček. */
.fi-body .fi-fo-field-label-col:has(.fi-checkbox-input) .fi-fo-field-label,
.fi-body label:has(> .fi-checkbox-input) {
color: var(--be-inactive);
}
.fi-body .fi-fo-field-label-col:has(.fi-checkbox-input:checked) .fi-fo-field-label,
.fi-body label:has(> .fi-checkbox-input:checked) {
color: var(--be-active);
font-weight: 700;
}
/* Popis pri vybranej možnosti je čierny a tučný, pri nevybranej sivý. */
.fi-body .be-pole-vyber .fi-fo-radio-label-text,
.fi-body .be-pole-vyber .fi-fo-checkbox-list-option-label {
color: var(--be-inactive);
font-weight: 400;
}
.fi-body .be-pole-vyber .fi-fo-radio-label:has(:checked) .fi-fo-radio-label-text,
.fi-body .be-pole-vyber .fi-fo-checkbox-list-option:has(:checked) .fi-fo-checkbox-list-option-label {
color: var(--be-active);
font-weight: 700;
}
/* --------------------------------------------------------------------------
10. POLE ODKAZ / LINK
--------------------------------------------------------------------------
Zadanie: textové tlačidlo, vždy aktívne, názov vždy viditeľný.
V návrhu (obrázok "Zabudnuté heslo") je to podčiarknutý text, nie tlačidlo
s podkladom.
-------------------------------------------------------------------------- */
.fi-body .be-odkaz,
.fi-body .fi-link {
display: inline;
padding: 0;
background: none !important;
border: 0 !important;
box-shadow: none !important;
color: var(--be-active) !important;
font-size: var(--be-pole-pismo);
font-weight: 400 !important;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.fi-body .be-odkaz:hover,
.fi-body .fi-link:hover {
color: var(--be-tlacidlo) !important;
}
/* --------------------------------------------------------------------------
11. POLE MEDIA (UPLOAD)
--------------------------------------------------------------------------
Zadanie:
- je vždy aktívne
- obsahom poľa je názov A PARAMETRE (rozmer, formáty, veľkosť)
- parametre sa dopĺňajú automaticky podľa toho, na čo upload slúži
- po nahratí sa VEDĽA uploadu zobrazí obsahový frame s obrázkom
Parametre dopĺňa PHP (vie, aké obmedzenia pole má) - tu je len ich vzhľad.
-------------------------------------------------------------------------- */
/* Názov patrí dovnútra sivej plochy pod šípku, nie nad ňu.
Podmienkou je, že tam presunutý názov naozaj JE - preto :has(), a nie
trieda na obale. Livewire pri prekreslení triedy na obale nemusí zachovať
a názov by sa potom zobrazil dvakrát: raz pôvodný, raz presunutý. (Presne
to bolo vidieť na prvej snímke testu.) Takto sa pravidlo opraví samo. */
.fi-body .be-pole-media:has(.be-media-obsah) > .fi-fo-field-label-col {
display: none;
}
/* Blok, ktorý skript do plochy vloží: šípka, názov, parametre. */
.be-media-obsah {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
/* Dva stĺpce vedľa seba, presne ako v návrhu:
vľavo sivá plocha s tým, čo sa má nahrať, vpravo biely obsahový frame
s náhľadom nahratého obrázka.
Samotný obal je priehľadný - sivú má len ľavý stĺpec. Keby bola na obale,
bola by sivá aj pod náhľadom a biely frame by z nej nevystúpil. */
.fi-body .be-pole-media .fi-fo-file-upload {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: stretch;
padding: 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
text-align: center;
}
/*
Sivá plocha je aj miestom, kam sa dá súbor pustiť.
--------------------------------------------------------------------------
Vyzerá tak (veľká šípka nadol), takže ňou aj byť musí. Obsluhu dopĺňa
backend-formulare.js; tu je len to, že sa na nej dá kurzorom poznať, že je
klikateľná, a ako vyzerá, keď je nad ňou ťahaný súbor.
*/
.fi-body .be-pole-media .be-media-obsah {
cursor: pointer;
transition: background 0.12s ease, outline-color 0.12s ease;
outline: 2px dashed transparent;
outline-offset: -6px;
}
.fi-body .be-pole-media .be-media-obsah.be-media-nad {
background: #E6E6E6;
outline-color: var(--be-pole-okraj-akt);
}
/* Ľavý stĺpec - sivá plocha s názvom a parametrami. */
.fi-body .be-pole-media .be-media-obsah {
min-height: 180px; /* (M) */
padding: 22px 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
background: var(--be-panel);
border-radius: 10px; /* (M) */
}
/* Pravý stĺpec - obsahový frame, v ktorom je náhľad nahratého obrázka.
Karta: "po uploade sa zobrazí vedľa uploadu obsahové pole" - kým nič
nahraté nie je, frame nie je vidieť (pravidlo nižšie). */
.fi-body .be-pole-media .fi-fo-file-upload-input-ctn {
min-height: 180px; /* rovnako vysoké ako ľavý stĺpec */
display: flex;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 12px;
background: var(--be-surface) !important;
border: 1px solid var(--be-frame-okraj) !important;
border-radius: 10px !important; /* (M) */
box-shadow: none !important;
}
/* Prázdny frame sa skryje, ale miesto si podrží (visibility, nie display),
aby sa rozloženie po nahratí neposúvalo. Súbor sa vtedy vyberá kliknutím
alebo pustením na sivú plochu - obsluhu má backend-formulare.js.
Aj vnútro: FilePond svojim prvkom (výzva "Natiahnuť súbor") nastavuje
visibility: visible sám, takže by cez skrytý rám presvitali.
Podmienka je sivá plocha (.be-media-obsah) hneď vedľa, nie trieda na
obale - tú Livewire po odoslaní formulára zahodí (viď pravidlo pre názov
vyššie). Bez plochy by nebolo kam kliknúť, takže frame zostane. */
.fi-body .fi-fo-file-upload:has(> .be-media-obsah) > .fi-fo-file-upload-input-ctn:not(:has(.filepond--item)),
.fi-body .fi-fo-file-upload:has(> .be-media-obsah) > .fi-fo-file-upload-input-ctn:not(:has(.filepond--item)) * {
visibility: hidden !important;
}
/* Vnútro od FilePondu. Rám kreslí stĺpec vyššie, takže tu sa len odoberie
vlastný podklad a orámovanie - inak by boli rámy dva v sebe.
Výška sa NESMIE naťahovať: FilePond má vnútri prázdny zoznam súborov,
ktorý sa v pružnom rozložení roztiahne na celú plochu a v strede poľa sa
objaví zvislá čiara (bolo to vidieť na prvej snímke testu). */
.fi-body .be-pole-media .filepond--root,
.fi-body .be-pole-media .filepond--panel-root {
width: 100%;
min-height: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Zoznam nahratých súborov nemá zaberať miesto, kým je prázdny. */
.fi-body .be-pole-media .filepond--list-scroller:empty,
.fi-body .be-pole-media .filepond--list:empty {
display: none;
}
/*
NAHRATÝ SÚBOR: LEN OBRÁZOK A ČERVENÝ KRÍŽIK
--------------------------------------------------------------------------
Návrh (fotky2/image (5).png): v bielom ráme je náhľad obrázka a v jeho
pravom hornom rohu červený krížik. Nič iné - žiadny názov súboru, žiadna
veľkosť, žiadny pruh s priebehom.
FilePond ku každému súboru vypisuje názov, veľkosť a stav, a tlačidlá
ukladá do spodného pruhu. Tu sa to prebytočné skryje a krížik sa presunie
do rohu.
PREČO SÚ V ZOZNAME DVE TLAČIDLÁ
--------------------------------------------------------------------------
FilePond ich má na to isté dve a striedajú sa podľa stavu:
- remove pri súbore, ktorý už bol uložený
- revert pri súbore práve nahratom a ešte neuloženom
Používateľ ten rozdiel nevidí ani vidieť nemá - v oboch prípadoch je to
"odstráň to". Preto vyzerajú rovnako.
*/
.fi-body .be-pole-media .filepond--file-info,
.fi-body .be-pole-media .filepond--file-status,
.fi-body .be-pole-media .filepond--file-info-sub {
display: none !important;
}
/*
Tmavá plocha pod súborom.
--------------------------------------------------------------------------
FilePond kreslí za každý súbor tmavý panel a mení mu farbu podľa stavu
(zelená po nahratí, červená pri chybe). V návrhu je za obrázkom biely
rám - nič iné. Panel sa preto zneviditeľní.
Farba stavu tým zmizne, ale neprichádza sa o ňu: chybu ohlási notifikácia
aj zoznam chýb nad tlačidlom Uložiť, kde je aj napísané, čo je zle.
*/
.fi-body .be-pole-media .filepond--item-panel,
.fi-body .be-pole-media .filepond--panel-root {
background: transparent !important;
box-shadow: none !important;
}
/* Tmavý závoj cez obrázok, ktorým FilePond podkladá názov a stav. Bez textov
nemá čo podkladať a obrázok len stmavuje. */
.fi-body .be-pole-media .filepond--file-poster::before,
.fi-body .be-pole-media .filepond--image-preview-overlay {
display: none !important;
}
/* Náhľad sa vpisuje do rámu, neroztiahne sa cezeň. */
.fi-body .be-pole-media .filepond--image-preview-wrapper,
.fi-body .be-pole-media .filepond--image-preview {
background: transparent !important;
}
.fi-body .be-pole-media .filepond--action-remove-item,
.fi-body .be-pole-media .filepond--action-revert-item-processing {
/* left/top/right prepisuje FilePond vlastnými pravidlami podľa stavu,
preto !important - inak by krížik odskakoval podľa toho, či sa súbor
práve nahráva alebo je už uložený. */
position: absolute !important;
top: 8px !important;
right: 8px !important;
left: auto !important;
bottom: auto !important;
width: 24px !important;
height: 24px !important;
/* Ikona delete.svg (biely krížik v červenom kruhu) z prílohy karty
"Backend - Nastavenia - Copyright" - nesie aj kruh, preto je pozadím
celého tlačidla a vlastný krížik FilePondu sa skrýva. */
background: url("../icons/zrusit.svg") center / contain no-repeat !important;
color: #FFFFFF !important;
border-radius: 50% !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
cursor: pointer;
}
.fi-body .be-pole-media .filepond--action-remove-item:hover,
.fi-body .be-pole-media .filepond--action-revert-item-processing:hover {
filter: brightness(0.85);
}
.fi-body .be-pole-media .filepond--action-remove-item svg,
.fi-body .be-pole-media .filepond--action-revert-item-processing svg {
display: none;
}
/* Šípka nadol nad názvom. */
.be-media-sipka {
display: block;
width: 30px;
height: 30px;
margin-bottom: 6px;
color: var(--be-active);
}
/* Názov nahrávacieho poľa - čierny, normálnej veľkosti. */
.be-media-nazov {
color: var(--be-active);
font-size: var(--be-pole-pismo);
}
/* Parametre pod názvom - menšie a sivé, každý na vlastnom riadku. */
.be-media-parametre {
margin: 0;
padding: 0;
list-style: none;
color: var(--be-inactive);
font-size: 12px; /* (M) */
line-height: 1.6;
}
/* Upload a náhľad vedľa seba. Pod hraničným bodom pre mobil sa zalomia
pod seba - to rieši oddiel 16. */
.be-media-riadok {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: stretch;
}
/* --------------------------------------------------------------------------
12. POLE COLOR PICKER
--------------------------------------------------------------------------
Zadanie:
- funguje rovnako ako Text
- farba sa píše ručne ako #xxxxxx alebo vyberie z ponuky
- po zvalidovaní sa plocha pod ikonkou NA ZAČIATKU RIADKU zafarbí na
zadanú farbu
- predvolená farba čierna #000000
V návrhu je ikonka v samostatnom štvorčeku VĽAVO OD poľa, nie v ňom.
-------------------------------------------------------------------------- */
:root {
/* nastavenia_farebnost.jpg: štvorec 351-399 x 224-268, pole od x=420. */
--be-pipeta-strana: 49px; /* (M) šírka štvorca */
--be-pipeta-vyska: 45px; /* (M) vysoký ako pole */
--be-pipeta-medzera: 20px; /* (M) odstup štvorca od poľa */
}
/*
Štvorček s pipetou VEDĽA poľa.
--------------------------------------------------------------------------
Návrh ho má ako samostatný zaoblený štvorec vľavo od poľa, nie vnútri.
Značky preň dopĺňa backend-formulare.js.
Predtým tu bola Filamentova ukážka farby presunutá dovnútra poľa - to bol
ústupok, lebo sa zdalo, že dostať ju von znamená prestavať komponent.
Nakoniec to prestavovať netreba: stačí, aby bol obal poľa pružný riadok
a štvorček sa doň vloží pred rámček.
*/
.fi-body .be-pole-farba .be-ma-pipetu {
display: flex;
align-items: center;
gap: var(--be-pipeta-medzera);
}
/* Rámček poľa zaberie zvyšok riadku. */
.fi-body .be-pole-farba .be-ma-pipetu > .fi-input-wrp {
flex: 1 1 auto;
min-width: 0;
}
.fi-body .be-pipeta-blok {
position: relative;
flex: 0 0 auto;
width: var(--be-pipeta-strana);
height: var(--be-pipeta-vyska);
}
/*
Samotné tlačidlo. Podklad mu nastavuje skript na zvolenú farbu - zadanie:
"plocha pod ikonkou sa zafarbí na zadanú farbu".
*/
.fi-body .be-pipeta {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--be-pole-okraj);
border-radius: var(--be-pole-radius);
color: var(--be-pole-okraj-akt);
cursor: pointer;
}
.fi-body .be-pipeta svg {
width: 22px;
height: 22px;
}
/* Na tmavej farbe by čierna pipeta zanikla. */
.fi-body .be-pipeta-tmava {
color: #FFFFFF;
}
.fi-body .be-pipeta:focus-visible {
outline: 2px solid var(--be-pole-okraj-akt);
outline-offset: 2px;
}
/*
Skutočný výber farby prehliadača.
--------------------------------------------------------------------------
Leží POD tlačidlom a je priehľadný, nie display: none. Skrytý prvok sa
v niektorých prehliadačoch nedá otvoriť zo skriptu (.click() na ňom nič
neurobí) a paleta by sa neotvorila vôbec.
Rovnaké miesto ako tlačidlo má aj preto, že prehliadač paletu otvára pri
prvku, ktorý ju vyvolal - takto sa objaví presne pri štvorčeku, ako
v návrhu.
*/
.fi-body .be-pipeta-vstup {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
padding: 0;
border: 0;
opacity: 0;
pointer-events: none;
}
/* Filamentova vlastná ukážka farby vnútri poľa je teraz zbytočná - farbu
ukazuje štvorček s pipetou. Dve ukážky vedľa seba by len mýlili. */
.fi-body .be-pole-farba .fi-fo-color-picker-preview {
display: none !important;
}
/*
Názov poľa musí začínať až za štvorčekom.
--------------------------------------------------------------------------
Názov je položený absolútne voči celému obalu poľa (.be-pole), nie voči
rámčeku - a ten sa teraz začína až za štvorčekom a medzerou. Bez posunutia
by názov ležal na pipete.
Platí to v oboch stavoch rovnako: rámček poľa je posunutý vždy, nielen keď
je pole prázdne.
*/
.fi-body .be-pole-farba > .fi-fo-field-label-col {
left: calc(var(--be-pipeta-strana) + var(--be-pipeta-medzera) + var(--be-pole-odsadenie));
}
/* --------------------------------------------------------------------------
13. POLE FONT
--------------------------------------------------------------------------
Zadanie:
- funguje rovnako ako Text
- do poľa sa píše názov písma (Google Fonts) alebo sa vyberie z ponuky
- po výbere sa písmo prednastaví do poľa
- AŽ POTOM sa zobrazia dva ďalšie výbery: váha a veľkosť
- predvolené "Arial, 14px, Regular"
Značku vykresľuje vlastný komponent - viď
Core/app/Filament/Forms/Components/Pismo.php.
-------------------------------------------------------------------------- */
/* Návrh (nastavenia_fonty.jpg) má názov písma cez CELÝ riadok a pod ním
dvojicu váha + veľkosť. Pôvodne boli všetky tri vedľa seba, takže názov
bol o polovicu užší než v návrhu a riadok o polovicu nižší. */
.be-pismo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px; /* (M) */
align-items: start;
}
.be-pismo .be-pismo-nazov {
grid-column: 1 / -1;
}
/* Kým nie je vybrané písmo, oba výbery sú preč. Nie sú len zosvetlené -
zadanie hovorí "zobrazia sa až po výbere písma". */
.be-pismo:not(.be-pismo-vybrane) .be-pismo-vaha,
.be-pismo:not(.be-pismo-vybrane) .be-pismo-velkost {
display: none;
}
/* Pri jednom poli namiesto troch by zvyšné dva stĺpce zostali prázdne. */
.be-pismo:not(.be-pismo-vybrane) {
grid-template-columns: 1fr;
}
/* Kým sa Alpine nespustí, prvky s x-cloak nesmú preblikať - ponuka písiem by
sa na okamih ukázala rozbalená. */
[x-cloak] {
display: none !important;
}
/* Ponuka písiem. Každá položka je vypísaná vlastným písmom, aby bolo vidieť,
ako vyzerá - tak to má aj návrh. */
.be-pismo-ponuka {
position: absolute;
top: calc(var(--be-pole-vyska) + 2px);
left: 0;
right: 0;
z-index: 30;
max-height: 260px;
overflow-y: auto;
margin: 0;
padding: 6px 0;
list-style: none;
background: var(--be-surface);
border: 1px solid var(--be-pole-okraj);
border-radius: 0 0 var(--be-pole-radius) var(--be-pole-radius);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}
.be-pismo-ponuka li {
padding: 9px var(--be-pole-odsadenie);
font-size: var(--be-pole-pismo);
color: var(--be-active);
cursor: pointer;
}
.be-pismo-ponuka li:hover,
.be-pismo-ponuka li[aria-selected="true"] {
background: var(--be-panel);
}
/* Hláška, keď napísanému textu nezodpovedá žiadne písmo. Nie je to voľba,
takže sa nezvýrazňuje a nedá sa na ňu kliknúť. */
.be-pismo-ziadne {
color: var(--be-inactive);
cursor: default;
}
.be-pismo-ponuka li.be-pismo-ziadne:hover {
background: transparent;
}
/* --------------------------------------------------------------------------
13b. NÁPOVEDA
--------------------------------------------------------------------------
Zadanie:
- ak má pole v prekladoch text nápovedy, na jeho konci je ikona Info
- po kliknutí na ikonu sa NAD poľom otvorí bublina so šírkou poľa
Značky vyrába backend-formulare.js: sivý text, ktorý Filament kreslí pod
poľom, sa presunie do bubliny a na koniec poľa pribudne ikona. Bez skriptu
nápoveda zostane obyčajným textom pod poľom - teda čitateľná, len bez
bubliny.
PREČO SÚ OBE ČASTI POLOŽENÉ ABSOLÚTNE
--------------------------------------------------------------------------
Keby blok nápovedy zaberal v toku miesto, roztlačil by pole od nasledujúceho
o výšku ikony - a formulár by sa pri každom otvorení bubliny prekresľoval.
Takto pole nechá presne tam, kde bolo, a bublina sa nad neho len položí.
-------------------------------------------------------------------------- */
.fi-body .be-ma-napovedu {
position: relative;
}
/* Obal je len súradnicová sústava: rozprestrie sa cez celé pole, aby bublina
mala jeho šírku, a kliknutia prepúšťa - inak by neviditeľná plocha cez celé
pole bránila písaniu. Klikať sa dá len na samotnú ikonu. */
.fi-body .be-napoveda {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
}
/* Ikona na konci poľa, NA HORNEJ ČIARE rámčeka - stred ikony leží presne na
linke, ako popis poľa vľavo (návrh nastavenia_copyright.jpg, pripomienka
zadávateľa z 24. 9. 2026). Blok má výšku poľa a ikona je v ňom v strede,
takže posun o polovicu výšky nahor ju posadí na čiaru bez ohľadu na
výšku poľa. Pri viacriadkovom poli sedí tiež pri hornom okraji. */
/*
GLOBÁLNE PRAVIDLO (zadávateľ 29. 9. 2026): ikona nápovedy je na KAŽDOM
poli vždy na hornej hrane, vpravo hore, 10 px od pravého okraja poľa -
aj pri výbere (šípka), dátumovníku, hesle (oko) či prípone (€). Tie sú
zvislo v strede poľa, s ikonou na hornej čiare sa nekrížia, takže sa im
už netreba vyhýbať. Platí aj pre budúce polia - netreba nič nastavovať.
Výnimky len tam, kde rámček poľa nie je celý obal: výber farby (tlačidlo
vedľa poľa, nižšie) a Médiá (vlastná karta, oddiel Médiá).
*/
.fi-body .be-napoveda-ikona {
position: absolute;
right: 10px;
top: calc(var(--be-pole-vyska) / -2);
width: var(--be-pole-vyska);
height: var(--be-pole-vyska);
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0;
border: 0;
background: transparent;
color: var(--be-napoveda-ikona);
cursor: pointer;
pointer-events: auto;
}
.fi-body .be-napoveda-ikona svg {
width: 18px;
height: 18px;
/* Čiara rámčeka nesmie prechádzať cez ikonu - podklad v farbe stránky
ju za ikonou prekryje, rovnako ako pri popise poľa vľavo. */
background: var(--be-surface, #FFFFFF);
border-radius: 50%;
box-shadow: 0 0 0 3px var(--be-surface, #FFFFFF);
}
.fi-body .be-napoveda-ikona:focus-visible {
outline: 2px solid var(--be-pole-okraj-akt);
outline-offset: 2px;
border-radius: 50%;
}
/* Nápoveda za textom prepínača / zaškrtávacieho poľa - 10 px za textom,
ikona 18 px na výšku textu, bublina nad ňou (Vojto 30. 9. 2026). */
/* Bublina sa zarovnáva na šírku poľa (nie ikony) - na mobile by vyšla
mimo obrazovku. */
.fi-body .fi-fo-field:has(> .fi-fo-field-label-col .be-napoveda-za-textom) {
position: relative;
}
.fi-body .be-napoveda.be-napoveda-za-textom {
position: static;
inset: auto;
display: inline-flex;
align-items: center;
vertical-align: middle;
margin-left: 10px;
pointer-events: auto;
}
.fi-body .be-napoveda-za-textom .be-napoveda-ikona {
position: static;
width: 18px;
height: 18px;
justify-content: center;
}
.fi-body .be-napoveda-za-textom .be-napoveda-bublina {
left: 0;
right: 0;
width: auto;
max-width: 590px;
bottom: calc(100% + 14px);
font-weight: 400;
white-space: normal;
}
/* Text v poli sa musí ikone vyhnúť, inak by posledné napísané písmená mizli
pod ňou. 10 px okraj + 18 px ikona + 10 px medzera. */
.fi-body .be-ma-napovedu .fi-input,
.fi-body .be-ma-napovedu textarea.fi-input {
padding-right: 38px;
}
/*
Pri výbere sa musí odsadenie PRIPOČÍTAŤ.
--------------------------------------------------------------------------
Rozdiel oproti textovému poľu: tlačidlo pri hesle je samostatný prvok VEDĽA
vstupu, takže text sa oň neobtrie. Šípka výberu ale žiadny prvok nie je -
miesto pre ňu si drží samotný výber svojím odsadením. Ikona sedí v tom
istom páse, takže odsadenie musí stačiť na oboje.
Pôvodnú hodnotu si skript zapamätá pri prvom meraní, inak by tu vznikol
kruh: prečítalo by sa už zväčšené odsadenie a pripočítalo by sa znova.
*/
.fi-body .be-ma-napovedu select.fi-select-input {
padding-right: calc(var(--be-pripona-sirka, 0px) + 30px);
}
/* Výber farby: rámček poľa končí pred farebným tlačidlom (pipetou) -
ikona ide na hornú hranu poľa, nie na tlačidlo: šírka tlačidla + medzera
+ 10 px (globálne pravidlo 29. 9. 2026). */
.fi-body .be-pole-farba .be-napoveda-ikona {
/* 45 px tlačidlo (štandard prvkov, oddiel Farba) + 20 px medzera + 10 px */
right: calc(45px + var(--be-pipeta-medzera) + 10px);
}
/* Bublina nad poľom. left/right na nulu jej dávajú presne šírku poľa, ako
žiada zadanie ("nad šírku poľa"). */
.fi-body .be-napoveda-bublina {
position: absolute;
left: 0;
right: 0;
/*
Odstup od poľa.
----------------------------------------------------------------------
20 px, nie 10. Názov poľa leží na hornom okraji rámčeka a vyčnieva nad
neho asi o 6 px - pri menšom odstupe ho bublina prekryla a pod ňou sa
črtal kus písmen. Vyzeralo to, akoby bola bublina vlepená medzi dve
polia.
*/
/* Predloha (Definícia polí, image.png): bublina končí 27 px nad poľom,
jeden riadok textu v nej je vysoký 95 px, písmo asi 16 px. */
bottom: calc(100% + 27px); /* (M) */
padding: 36px 20px; /* (M) */
border-radius: 10px; /* (M) */
background: var(--be-napoveda-podklad);
color: var(--be-napoveda-text);
font-size: 16px; /* (M) */
line-height: 1.4;
/* Tieň odlíši bublinu od poľa nad ňou. Bez neho obe splývali do jedného
bloku a nebolo poznať, čo je vyskakovacie okno a čo formulár. */
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
/* Nápoveda smie byť HTML, takže sa v nej môže objaviť odkaz - ten musí
zostať kliknuteľný, hoci obal kliknutia neprepúšťa. */
pointer-events: auto;
}
/* Odkaz v nápovede musí byť na tmavom podklade vidieť. */
.fi-body .be-napoveda-bublina a {
color: var(--be-napoveda-text);
text-decoration: underline;
}
/* Prvý a posledný odsek nesmú pridávať medzeru navyše - bublina má vlastné
odsadenie a s ním by bola zhora aj zdola nerovnomerná. */
.fi-body .be-napoveda-bublina > :first-child {
margin-top: 0;
}
.fi-body .be-napoveda-bublina > :last-child {
margin-bottom: 0;
}
/* Hrot smerujúci na ikonu, teda k pravému okraju - tak je to v návrhu. */
.fi-body .be-napoveda-bublina::after {
content: "";
position: absolute;
top: 100%;
right: 13px;
/* Hrot 16 x 12 px ako v predlohe. */
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 12px solid var(--be-napoveda-podklad);
}
/* --------------------------------------------------------------------------
14. TLAČIDLO
--------------------------------------------------------------------------
Zadanie:
- je vždy aktívne
- obsahom je jeho názov
- šírka, zarovnanie a ikona sa určujú v každom formulári zvlášť
- farba aj prechodová farba sa berú z Nastavení backendu
Preto tu nie je ani šírka, ani zarovnanie - to patrí stránke. Tu je len
to, čo majú všetky tlačidlá spoločné.
-------------------------------------------------------------------------- */
.fi-body .fi-btn:not(.fi-icon-btn) {
height: var(--be-pole-vyska);
padding: 0 22px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--be-tlacidlo) !important;
border: 0 !important;
border-radius: var(--be-tlacidlo-radius) !important;
box-shadow: none !important;
color: var(--be-tlacidlo-text) !important;
font-size: var(--be-pole-pismo);
font-weight: 700 !important;
cursor: pointer;
transition: background-color 0.15s ease;
}
.fi-body .fi-btn:not(.fi-icon-btn):hover {
background: var(--be-tlacidlo-prechod) !important;
}
/* Ikona v tlačidle je vždy vľavo od názvu a rovnako biela ako text. */
.fi-body .fi-btn:not(.fi-icon-btn) .fi-icon {
width: 18px;
height: 18px;
color: var(--be-tlacidlo-text) !important;
}
/* Zablokované tlačidlo. Návrh ho neuvádza, takže len zosvetlenie - nie iná
farba, ktorú by nikto neschválil. */
.fi-body .fi-btn:not(.fi-icon-btn):disabled,
.fi-body .fi-btn:not(.fi-icon-btn)[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
}
/* --------------------------------------------------------------------------
15. VALIDÁCIA
--------------------------------------------------------------------------
Zadanie:
- nevalidné pole dostane pri uložení červený okraj
- NAD tlačidlom Uložiť sa zobrazí notifikácia s názvom poľa
- kliknutím na názov poľa v notifikácii sa stránka odscrolluje na to pole
Červený okraj zvládne samotné CSS cez :has() - Filament vloží do obalu poľa
prvok s atribútom data-validation-error. Netreba naň teda čakať na skript
a okraj sčervenie v tom istom vykreslení, v ktorom chyba vznikne.
Zoznam nad tlačidlom skladá backend-formulare.js, lebo musí prečítať názvy
polí a poprepájať ich.
-------------------------------------------------------------------------- */
.fi-body .fi-fo-field:has([data-validation-error]) .fi-input-wrp,
.fi-body .fi-fo-field:has([data-validation-error]) .fi-fo-select-wrp,
.fi-body .fi-fo-field:has([data-validation-error]) .fi-fo-textarea-wrp {
border-color: var(--be-chyba) !important;
box-shadow: 0 0 0 1px var(--be-chyba) !important;
}
/* Názov chybného poľa je červený rovnako ako jeho okraj. */
.fi-body .fi-fo-field:has([data-validation-error]) .fi-fo-field-label {
color: var(--be-chyba);
}
/* Pôvodnú hlášku pod poľom návrh nemá - všetko sa hlási v zozname nad
tlačidlom.
Skrýva sa LEN v prehliadači, ktorý pozná :has() - lebo práve ten selektor
zoznam nad tlačidlom skladá. Bez neho by sa hláška skryla a nič by ju
nenahradilo, takže by sa používateľ o chybe nedozvedel vôbec. */
@supports selector(:has(*)) {
.fi-body .fi-fo-field-wrp-error-message,
.fi-body .fi-fo-field-wrp-error-list {
display: none;
}
}
/* --- Zoznam chýb nad tlačidlom --------------------------------------------- */
.be-chyby {
margin: 0 0 14px;
padding: 0;
list-style: none;
text-align: center;
}
.be-chyby li {
color: var(--be-chyba);
font-size: var(--be-pole-pismo);
line-height: 1.6;
margin-bottom: 8px;
}
/* Konkrétny dôvod na druhom riadku - menší a tlmenejší, aby veta s názvom
poľa zostala tou hlavnou informáciou a dôvod ju len dopĺňal. */
.be-chyby-preco {
display: block;
margin-top: 2px;
color: var(--be-inactive);
font-size: 13px;
}
/* Názov poľa v hláške. Je to tlačidlo, nie odkaz - nikam nevedie, len
posunie stránku. */
.be-chyby button {
padding: 0;
background: none;
border: 0;
color: inherit;
font: inherit;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.be-chyby button:hover {
color: var(--be-tlacidlo);
}
/* Pole, na ktoré sa práve preskočilo, sa na chvíľu zvýrazní - inak by pri
dlhom formulári nebolo jasné, kam sa stránka posunula. */
@keyframes be-zvyraznenie {
from { box-shadow: 0 0 0 4px rgba(227, 0, 20, 0.25); }
to { box-shadow: 0 0 0 4px rgba(227, 0, 20, 0); }
}
.be-pole.be-najdene .fi-input-wrp,
.be-pole.be-najdene .fi-fo-select-wrp,
.be-pole.be-najdene .fi-fo-textarea-wrp {
animation: be-zvyraznenie 1.1s ease-out 2;
}
/* Pri vypnutých animáciách sa nič nehýbe - zvýraznenie zostane statické. */
@media (prefers-reduced-motion: reduce) {
.fi-body .be-pole > .fi-fo-field-label-col,
.fi-body .be-pole .fi-fo-field-label,
.fi-body .fi-btn:not(.fi-icon-btn) {
transition: none !important;
}
.be-pole.be-najdene .fi-input-wrp,
.be-pole.be-najdene .fi-fo-select-wrp,
.be-pole.be-najdene .fi-fo-textarea-wrp {
animation: none;
box-shadow: 0 0 0 4px rgba(227, 0, 20, 0.25) !important;
}
}
/* --------------------------------------------------------------------------
16. SIVÝ PRUH S TLAČIDLOM
--------------------------------------------------------------------------
V návrhu sedí spodok formulára na sivej ploche, tlačidlo je v nej na
stred a nad ním je zoznam chýb.
-------------------------------------------------------------------------- */
/* Trieda be-form-actions je vlastná - používajú ju stránky projektu
(napr. Nastavenia → Identita). fi-sc-actions je Filamentova, na ňu sedia
lišty tlačidiel na stránkach resourcov.
POZOR NA CESTU K LIŠTE (zistené 21. 9. pri karte Jazyky)
--------------------------------------------------------------------------
Filament 5 nekreslí lištu ako priame dieťa formulára, ale zabalenú:
form.fi-sc-form > .fi-grid > .fi-grid-col > .fi-sc-component > .fi-sc-actions
Pôvodné pravidlo ".fi-sc-form > .fi-sc-actions" preto nesedelo na ŽIADNOM
formulári zdroja a sivý pás tam chýbal - tri zelené tlačidlá stáli vľavo
na bielom. Pravidlo je ohraničené na .fi-main (obsah bežných stránok):
prihlasovacia obrazovka má tú istú štruktúru, ale je v jednoduchom
rozložení bez .fi-main a sivý pás tam podľa návrhu nie je. */
.fi-body .be-form-actions,
.fi-body .fi-sc-form > .fi-sc-actions,
.fi-body .fi-main .fi-sc-form > .fi-grid > .fi-grid-col > .fi-sc-component > .fi-sc-actions,
.be-pruh-ulozit {
margin-top: 24px;
padding: 26px 20px;
display: flex;
flex-direction: column;
align-items: center;
background: var(--be-panel);
border-radius: 10px; /* (M) */
}
/* Miesto pre zoznam chýb na začiatku formulára - stránky, ktoré majú
tlačidlá v hlavičke (karta Copyright: "hláška pod tlačidlami"). Kým je
prázdne, nezaberá nič. */
.fi-body .be-chyby-miesto:empty {
display: none;
}
.fi-body .be-chyby-miesto .be-chyby {
margin: 0 0 24px;
text-align: left;
}
/* Disketa na "Uložiť zmeny" je v predlohe výrazná - asi 22 x 25 px, nie
18 px ako bežné ikony tlačidiel (nastavenia_identita.jpg). */
.fi-body .be-form-actions .fi-btn > .fi-icon {
width: 26px; /* (M) */
height: 26px;
}
/* --------------------------------------------------------------------------
16b. TLAČIDLÁ FORMULÁRA V HLAVIČKE STRÁNKY
--------------------------------------------------------------------------
Vpravo hore tlačidlo "Zrušiť" s červeným krížikom a vedľa neho zelené
"Uložiť zmeny" s disketou. Akcie pridáva App\Support\TlacidlaVHlavicke
a NastavenieStranka.
Karta "Tlačidlo Zrušiť" (Trello 2NrW60Nd, 24. 9. 2026): na všetkých
formulárových stránkach jednotne SIVÉ tlačidlo bez orámovania - podklad
#F2F2F2 (M, z priloženého obrázka), čierny tučný text, zaoblenie ako
ostatné tlačidlá. Rovnaké má Správca médií (.be-sm-zrusit). Predtým bolo
biele so sivým okrajom.
-------------------------------------------------------------------------- */
.fi-body .fi-btn.be-tlacidlo-zrusit,
.fi-body .fi-btn:not(.fi-icon-btn).be-tlacidlo-zrusit {
background: var(--be-panel) !important;
color: var(--be-active) !important;
border: 0 !important;
box-shadow: none !important;
}
.fi-body .fi-btn:not(.fi-icon-btn).be-tlacidlo-zrusit:hover {
background: #E6E6E6 !important; /* (M) o stupeň tmavšia, ako v Správcovi médií */
}
/* Text tlačidla je čierny, takže ikona nesmie dediť bielu z bežných tlačidiel;
svoju červenú si nesie súbor icons/zavriet.svg. */
.fi-body .fi-btn:not(.fi-icon-btn).be-tlacidlo-zrusit .fi-icon {
color: inherit !important;
}
/* Krížik má vlastnú červenú priamo v súbore icons/zavriet.svg, aby nesčernel
spolu s textom tlačidla. */
.fi-body .be-tlacidlo-zrusit .fi-icon {
width: 20px !important;
height: 20px !important;
}
.fi-body .be-tlacidlo-ulozit .fi-icon {
width: 22px !important;
height: 22px !important;
}
/* --------------------------------------------------------------------------
17. RESPONZÍVNOSŤ
--------------------------------------------------------------------------
Hraničné body sú zo zadania (bod 4): 2400 / 1366 / 1200 / 1024 / 880 / 767.
Polia sa musia zalamovať skôr, než sa začnú zmenšovať pod čitateľnú mieru.
-------------------------------------------------------------------------- */
/* Tablet stojato a menej: nahrávacie pole a jeho náhľad pod seba. */
/* Mobil: všetko pod seba. */
/* ==========================================================================
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.
========================================================================== */
/* --------------------------------------------------------------------------
KONFIGURÁCIA E-SHOPU (karta pbbew3au, 26. 9. 2026)
--------------------------------------------------------------------------
Hlavička kroku: názov modulu 18 px Bold, vpravo „Krok 3 z 9“, pod ním pruh
postupu (zelený ako tlačidlo Uložiť) a veta, koľko ešte chýba.
Zoznam krokov Filamentu nad formulárom sa skrýva - pri deviatich krokoch
by sa nezmestil a postup ukazuje pruh.
-------------------------------------------------------------------------- */
.be-konfigurator .fi-sc-wizard-header {
display: none !important;
}
.be-konfigurator-hlavicka {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 10px;
}
.be-konfigurator-riadok {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
}
.be-konfigurator-modul {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #000;
}
.be-konfigurator-krok,
.be-konfigurator-zostava {
margin: 0;
font-size: 13px;
color: #7F7F7F;
}
.be-konfigurator-progres {
height: 8px;
border-radius: 4px;
background: #EDEDED;
overflow: hidden;
}
.be-konfigurator-progres-vypln {
height: 100%;
border-radius: 4px;
background: var(--be-ta-pridat, #92C32B);
transition: width 0.3s ease;
}
/* Tlačidlá Späť / Ďalej / Uložiť: ikony 24 px ako všade. */
.be-konfigurator .fi-sc-wizard-footer .fi-icon,
.be-konfigurator .be-konfigurator-odoslat .fi-icon {
width: 24px !important;
height: 24px !important;
}
/* Späť / Ďalej sú sivé tlačidlá ako „Otvoriť filtre“ (Filament im farbu
z akcie nedá - kreslí ich vlastnou farbou panelu). */
.be-konfigurator .fi-sc-wizard-footer .fi-btn:not(.be-konfigurator-odoslat) {
background: var(--be-ta-sive-tlacidlo, #F2F2F2) !important;
color: var(--be-active, #000) !important;
gap: 10px !important;
}
.be-konfigurator .fi-sc-wizard-footer .fi-btn:not(.be-konfigurator-odoslat):hover {
background: #E6E6E6 !important;
}
.be-konfigurator .fi-sc-wizard-footer .fi-btn:not(.be-konfigurator-odoslat) .fi-icon {
color: var(--be-active, #000) !important;
}
/* Prepínač, za ktorým nasleduje ďalšie pole (detail produktu: Zdaňovanie? ->
Sadzba DPH, Spravovať sklad? -> Prah): názov ďalšieho poľa leží nad jeho
rámikom a zasahoval do prepínača. Medzera pod prepínačom dorovná odstup
polí na 20 px (pravidlo formulárov). */
.fi-body .fi-fo-field:has(.fi-fo-toggle) {
margin-bottom: 20px;
}
/* Import produktov cez CSV - zoznam chýb pod priebehom (karta uiT0arho). */
.be-import-chyby {
margin: 0;
padding-left: 20px;
font-size: 13px;
color: #D33249;
line-height: 1.6;
}
/* Pole súboru bez okna Médií (CSV pri importe produktov, karta uiT0arho):
po výbere sa súbor hneď nahráva, preto sa v bielom ráme ukáže názov,
veľkosť a stav / priebeh nahrávania (pri obrázkoch sú skryté). */
.fi-body [data-be-bez-medii] .filepond--file-info,
.fi-body [data-be-bez-medii] .filepond--file-status {
display: flex !important;
color: #000;
}
.fi-body [data-be-bez-medii] .filepond--file-info-main,
.fi-body [data-be-bez-medii] .filepond--file-status-main {
font-size: 14px;
}
.fi-body [data-be-bez-medii] .filepond--file-info-sub,
.fi-body [data-be-bez-medii] .filepond--file-status-sub {
display: block !important;
font-size: 12px;
color: #7F7F7F;
}
.fi-body [data-be-bez-medii] .filepond--progress-indicator {
color: #92C32B;
}
/* ==========================================================================
18. ŠTANDARD PRVKOV BACKENDU (Trello fGaWyseJ, komentáre 28. 9. 2026)
==========================================================================
„Ideme zjednotiť všetky prvky na všetkých layoutoch v Backende. Pravidlá
sa uložia ako globálne a vždy ich aplikuj pri tvorbe nových modulov.“
Hodnoty zo zadania; kde oddiely vyššie mali staršie namerané hodnoty,
tu sa zjednocujú. Premenné (výška 45 px, zaoblenie 10 px, odsadenie
20 px, písmo 16/13 px) sú v oddiele 1.
========================================================================== */
/* --- Nápoveda: ikona informacie.svg 15 x 15 px, 10 px od pravého okraja ---- */
.fi-body .be-napoveda-ikona svg {
width: 15px;
height: 15px;
}
.fi-body .be-ma-napovedu .fi-input,
.fi-body .be-ma-napovedu textarea.fi-input {
padding-right: 35px; /* 10 px okraj + 15 px ikona + 10 px */
}
/* --- Textové okno: výška 300 px, text vždy hore ------------------------------ */
.fi-body .be-pole-textarea .fi-input,
.fi-body .be-pole-textarea textarea {
min-height: 300px;
padding-top: 12px;
vertical-align: top;
}
.fi-body .be-pole-textarea > .fi-fo-field-label-col {
/* V pokoji leží popis v prvom riadku textu, nie v strede okna. */
height: 48px;
}
/* --- Textové okno HTML: výška 500 px, CKEditor 5 hore v poli ---------------- */
.fi-body .be-pole-wysiwyg .ck.ck-editor__main > .ck-editor__editable {
min-height: 460px !important; /* 500 px spolu s lištou nástrojov */
}
.fi-body .be-pole-wysiwyg > .fi-fo-field-label-col {
/* Popis poľa na hornom okraji rámu ako pri ostatných poliach. */
position: absolute;
top: -8px;
left: var(--be-pole-odsadenie);
height: 16px;
margin: 0;
z-index: 3;
}
.fi-body .be-pole-wysiwyg .fi-fo-field-label {
padding: 0 5px;
background: var(--be-surface);
color: var(--be-pole-text-akt);
font-size: var(--be-pole-pismo-male);
font-weight: 300 !important;
}
.fi-body .be-pole-wysiwyg .ck.ck-editor {
border: 1px solid var(--be-pole-okraj-akt);
border-radius: var(--be-pole-radius);
overflow: hidden;
padding-top: 6px;
}
.fi-body .be-pole-wysiwyg .ck.ck-editor__editable_inline,
.fi-body .be-pole-wysiwyg .ck.ck-toolbar {
border: 0 !important;
border-radius: 0 !important;
}
.fi-body .be-pole-wysiwyg .ck.ck-toolbar {
border-bottom: 1px solid #EEEEEE !important;
}
/* Náhľad textu pred spustením editora (spúšťa sa až klikom, Vojto 3. 10. 2026):
rovnaký rám a výška ako editor s lištou, kurzor textu. */
.fi-body .be-pole-wysiwyg .ck-editor-nahlad {
min-height: 500px;
padding: 52px var(--be-pole-odsadenie) 15px;
border: 1px solid var(--be-pole-okraj-akt);
border-radius: var(--be-pole-radius);
cursor: text;
overflow-wrap: anywhere;
}
.fi-body .be-pole-wysiwyg .ck-editor-nahlad:hover,
.fi-body .be-pole-wysiwyg .ck-editor-nahlad:focus {
border-color: var(--be-pole-text-akt);
outline: none;
}
/* --- Textové okno HTML - TinyMCE (Vojto 5. 10. 2026, namiesto CKEditora) -----
Rám ako ostatné polia; rámik, lištu a text rieši css/html-editor.css,
tu len farby a zaoblenie Backendu. */
.fi-body .be-pole-wysiwyg .html-editor {
border-color: var(--be-pole-okraj-akt);
border-radius: var(--be-pole-radius);
background: var(--be-surface);
}
.fi-body .be-pole-wysiwyg .html-editor-lista {
border-radius: var(--be-pole-radius) var(--be-pole-radius) 0 0;
}
.fi-body .be-pole-wysiwyg .html-editor-obsah {
padding: 12px var(--be-pole-odsadenie) 15px;
}
/* --- Radiobutton a Checkbox -------------------------------------------------
Riadok 25 px, medzi položkami 10 px, ikona 24 x 24 px #000, text Open Sans
16 px Light #000 (HTML v preklade smie text stučniť), text sa zalamuje pod
text - nie pod ikonu. Ikona pri jednom riadku v strede, pri viacerých
hore (riadok textu má výšku ikony, takže oboje platí naraz). */
.fi-body .fi-checkbox-input,
.fi-body .fi-radio-input {
flex: none;
width: 24px !important;
height: 24px !important;
border: 2px solid var(--be-active) !important;
background-color: var(--be-surface) !important;
}
.fi-body .fi-checkbox-input {
border-radius: 4px;
}
/* Zaškrtnuté: biele pole s čiernou fajkou (návrh 28. 9. 2026). */
.fi-body .fi-checkbox-input:checked {
background-color: var(--be-surface) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.3l3 3 6-6.6' fill='none' stroke='%23000000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-size: 16px 16px !important;
}
/* Vybraný: čierny krúžok s čiernou bodkou. */
.fi-body .fi-radio-input:checked {
background-color: var(--be-surface) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='4' fill='%23000000'/%3E%3C/svg%3E") !important;
background-size: 20px 20px !important;
}
.fi-body label:has(> .fi-checkbox-input),
.fi-body label:has(> .fi-radio-input),
.fi-body .fi-fo-field-label:has(> .fi-checkbox-input),
.fi-body .fi-fo-checkbox-list-option-label,
.fi-body .fi-fo-radio-label {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
min-height: 25px;
font-size: 16px !important;
font-weight: 300 !important;
line-height: 24px !important;
color: var(--be-active) !important;
}
/* Nevybraná možnosť je svetlejšia, vybraná čierna (návrh). Tučné je len to,
čo tučné píše preklad (HTML). */
.fi-body .be-pole-vyber .fi-fo-radio-label-text,
.fi-body .be-pole-vyber .fi-fo-checkbox-list-option-label,
.fi-body .fi-fo-field-label-col:has(.fi-checkbox-input) .fi-fo-field-label,
.fi-body label:has(> .fi-checkbox-input) {
color: var(--be-inactive) !important;
font-weight: 300 !important;
}
.fi-body .be-pole-vyber .fi-fo-radio-label:has(:checked) .fi-fo-radio-label-text,
.fi-body .be-pole-vyber .fi-fo-checkbox-list-option:has(:checked) .fi-fo-checkbox-list-option-label,
.fi-body .fi-fo-field-label-col:has(.fi-checkbox-input:checked) .fi-fo-field-label,
.fi-body label:has(> .fi-checkbox-input:checked) {
color: var(--be-active) !important;
font-weight: 300 !important;
}
/* Samostatný checkbox (napr. Produkt → Obmedziť nákupy…): text je vo
vnorenom .fi-fo-field-label-content, ktorý má od Filamentu 14 px / 500 -
rovnaké písmo ako možnosti zoznamu (Filter na úvode): 16 px Light
(Vojto 1. 10. 2026). Farbu (sivá / čierna podľa stavu) dedí z labelu. */
.fi-body .fi-fo-field-label:has(> .fi-checkbox-input) .fi-fo-field-label-content,
.fi-body label:has(> .fi-checkbox-input) .fi-fo-field-label-content {
font-size: 16px !important;
font-weight: 300 !important;
line-height: 24px !important;
color: inherit !important;
}
/* Medzera medzi položkami zoznamu 10 px. */
.fi-body .fi-fo-radio,
.fi-body .fi-fo-checkbox-list {
row-gap: 10px !important;
gap: 10px !important;
}
/* --- Select: roletka max. 300 px, hore pevné vyhľadávanie, ~5 hodnôt --------- */
.fi-body .fi-select-input-dropdown,
.fi-body .fi-dropdown-panel.fi-select-input-dropdown {
max-height: 300px !important;
overflow-y: auto !important;
border-radius: 0 0 var(--be-pole-radius) var(--be-pole-radius) !important;
}
.fi-body .fi-select-input-search-ctn {
position: sticky;
top: 0;
z-index: 2;
padding: 15px 20px 10px !important;
background: var(--be-surface);
}
.fi-body .fi-select-input-search-ctn .fi-input-wrp {
height: 45px;
border: 1px solid var(--be-pole-okraj) !important;
border-radius: var(--be-pole-radius) !important;
box-shadow: none !important;
}
.fi-body .fi-select-input-option {
padding: 11px 20px !important;
font-size: 16px !important;
font-weight: 300 !important;
color: var(--be-active) !important;
line-height: 22px;
}
/* --- Tlačidlo ----------------------------------------------------------------
Výška 45 px, zaoblenie 10 px, Open Sans 16 px Bold, ikona 24 x 24 px
10 px od textu, ikona a text zarovnané vľavo, 10 px pred ikonou a za
textom (v návrhu opticky viac - 15 px). Farby:
bežné #DB9633 / biely text a ikona
potvrdenie #92C22D / biely text, ikona podľa súboru (zvyčajne biela)
zrušenie, #F2F2F2 / čierny text, ikona podľa súboru (zvyčajne čierna)
funkcia */
.fi-body .fi-btn:not(.fi-icon-btn) {
height: 45px;
padding: 0 15px !important;
gap: 10px !important;
justify-content: flex-start;
border-radius: 10px !important;
font-size: 16px !important;
font-weight: 700 !important;
}
.fi-body .fi-btn:not(.fi-icon-btn) .fi-icon {
width: 24px !important;
height: 24px !important;
}
.fi-body .fi-btn.fi-color-gray:not(.fi-icon-btn),
.fi-body .fi-btn.be-tlacidlo-zrusit:not(.fi-icon-btn) {
background: #F2F2F2 !important;
color: #000000 !important;
font-weight: 700 !important;
}
.fi-body .fi-btn.fi-color-success:not(.fi-icon-btn) {
background: #92C22D !important;
color: #FFFFFF !important;
}
/* --- Uploader Media / Súbor / Galéria ----------------------------------------
Pole 180 x 180 px. Čaká na súbor: sivá plocha #F2F2F2 s prerušovaným
okrajom, šípka 32 px, „Nahrajte obrázok“ a parametre. Počas nahrávania:
„Súbor sa nahráva“, pruh %, Zrušiť, názov. Po nahratí: biela plocha
s tieňom, obrázok s odsadením 10 px; pri prejdení sa zdola vysunie panel
s názvom (13 px Bold), rozmerom a veľkosťou (11 px #7F7F7F) a krížikom.
Názov poľa je na hornom okraji, nápoveda vpravo hore - ako pri ostatných
poliach. Galéria: pole na nahratie a vedľa mriežka 4 obrázkov na riadok. */
.fi-body .be-pole-media {
width: 180px;
max-width: 100%;
}
.fi-body .be-pole-media.be-media-viac {
width: 100%;
}
/* Názov poľa zostáva viditeľný na hornom okraji (predtým bol presunutý do
plochy - teraz je tam výzva „Nahrajte obrázok“). */
.fi-body .be-pole-media[data-be-nadpis]:has(.be-media-obsah) > .fi-fo-field-label-col {
display: flex !important;
position: absolute;
top: -8px;
left: 10px;
height: 16px;
z-index: 3;
pointer-events: none;
}
.fi-body .be-pole-media[data-be-nadpis] .fi-fo-field-label {
padding: 0 5px;
background: var(--be-surface);
color: var(--be-pole-text-akt);
font-size: var(--be-pole-pismo-male);
font-weight: 300 !important;
}
.fi-body .be-pole-media[data-be-nadpis] .fi-fo-file-upload {
display: flex !important;
flex-wrap: wrap;
align-items: flex-start;
gap: 20px !important;
}
/* Prázdne pole - sivá plocha. */
.fi-body .be-pole-media[data-be-nadpis] .be-media-obsah {
box-sizing: border-box;
flex: none;
width: 180px;
height: 180px;
min-height: 180px;
padding: 18px 12px;
background: #F2F2F2;
border: 1px dashed #BDBDBD;
border-radius: 10px;
outline: 0;
}
.fi-body .be-pole-media[data-be-nadpis] .be-media-sipka {
width: 32px;
height: 32px;
margin-bottom: 10px;
color: #000000;
}
.fi-body .be-pole-media[data-be-nadpis] .be-media-nazov {
font-size: 16px;
color: #000000;
}
.fi-body .be-pole-media[data-be-nadpis] .be-media-parametre {
font-size: 11px;
line-height: 1.45;
color: var(--be-inactive);
}
/* Jeden súbor: keď je nahratý, plocha na nahratie sa skryje a jej miesto
zaujme náhľad. Galéria plochu nechá - pridávajú sa ďalšie obrázky. */
.fi-body .be-pole-media[data-be-nadpis]:not(.be-media-viac) .fi-fo-file-upload:has(.filepond--item) > .be-media-obsah {
display: none !important;
}
/* FilePond: bez súboru neviditeľný (drží vstup na súbor), so súborom
biela plocha 180 x 180 s tieňom. */
.fi-body .be-pole-media[data-be-nadpis] .fi-fo-file-upload-input-ctn {
flex: 1 1 auto;
min-height: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.fi-body .be-pole-media[data-be-nadpis] .fi-fo-file-upload-input-ctn:not(:has(.filepond--item)) {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
}
.fi-body .be-pole-media[data-be-nadpis]:not(.be-media-viac) .fi-fo-file-upload-input-ctn {
flex: none;
width: 180px;
}
.fi-body .be-pole-media[data-be-nadpis] .filepond--root {
margin: 0 !important;
}
.fi-body .be-pole-media[data-be-nadpis] .filepond--drop-label {
display: none !important;
}
.fi-body .be-pole-media[data-be-nadpis] .filepond--item {
width: 180px !important;
height: 180px !important;
margin: 0 20px 20px 0 !important;
overflow: hidden;
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.fi-body .be-pole-media[data-be-nadpis] .filepond--item-panel,
.fi-body .be-pole-media[data-be-nadpis] .filepond--panel-root {
background: #FFFFFF !important;
}
.fi-body .be-pole-media[data-be-nadpis] .filepond--image-preview-wrapper,
.fi-body .be-pole-media[data-be-nadpis] .filepond--image-preview {
background: #FFFFFF !important;
}
.fi-body .be-pole-media[data-be-nadpis] .filepond--image-preview-wrapper {
inset: 10px !important;
border-radius: 0 !important;
}
/* Vlastné tlačidlá a texty FilePondu nahrádzajú panel a priebeh nižšie. */
.fi-body .be-pole-media[data-be-nadpis] .filepond--file-action-button,
.fi-body .be-pole-media[data-be-nadpis] .filepond--file-info,
.fi-body .be-pole-media[data-be-nadpis] .filepond--file-status,
.fi-body .be-pole-media[data-be-nadpis] .filepond--progress-indicator {
opacity: 0 !important;
pointer-events: none !important;
}
/* Priebeh nahrávania. */
.be-media-priebeh {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 12px;
background: #F2F2F2;
border: 1px dashed #BDBDBD;
border-radius: 10px;
text-align: center;
}
.be-media-priebeh-nadpis {
font-size: 16px;
font-weight: 700;
color: #000000;
}
.be-media-pruh {
position: relative;
display: flex;
align-items: center;
gap: 4px;
width: 100%;
height: 20px;
padding: 0 10px;
background: #FFFFFF;
border-radius: 10px;
}
.be-media-pruh-vypln {
height: 4px;
max-width: calc(100% - 34px);
background: #92C22D;
border-radius: 2px;
transition: width 0.2s ease;
}
.be-media-pruh-text {
font-size: 11px;
color: var(--be-inactive);
}
.be-media-zrusit {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
font-size: 14px;
color: var(--be-inactive);
background: none;
border: 0;
cursor: pointer;
}
.be-media-krizik {
display: inline-block;
width: 20px;
height: 20px;
background: url("../icons/zrusit.svg") center / contain no-repeat;
}
.be-media-priebeh-subor {
max-width: 100%;
overflow: hidden;
font-size: 11px;
color: var(--be-inactive);
text-overflow: ellipsis;
white-space: nowrap;
}
/* Panel s údajmi - vysunie sa zdola pri prejdení myšou. */
.be-media-info {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
background: #FFFFFF;
border-top: 1px solid #EEEEEE;
transform: translateY(101%);
transition: transform 0.2s ease;
}
.filepond--item:hover > .be-media-info,
.filepond--item:focus-within > .be-media-info {
transform: translateY(0);
}
.be-media-nahrava > .be-media-info {
display: none;
}
.be-media-info-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.35;
}
.be-media-info-text strong {
overflow: hidden;
font-size: 13px;
font-weight: 700;
color: #000000;
text-overflow: ellipsis;
white-space: nowrap;
}
.be-media-info-rozmer,
.be-media-info-velkost {
font-size: 11px;
color: var(--be-inactive);
}
.be-media-info-rozmer:empty,
.be-media-info-velkost:empty {
display: none;
}
.be-media-info-akcie {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.be-media-odstranit {
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.be-media-odstranit .be-media-krizik {
width: 24px;
height: 24px;
}
/* Ikona zoradenia ťahaním - len v galérii (ťahá sa celý obrázok). */
.be-media-presun {
display: none;
width: 24px;
height: 24px;
background: url("../icons/zoradit-tahanim-krizik.svg") center / contain no-repeat;
}
.be-media-viac .be-media-presun {
display: inline-block;
}
/* Galéria: mriežka 4 obrázkov na riadok vedľa poľa na nahratie. FilePond
rozloženie počíta sám podľa šírky položky (180 px) a šírky zoznamu -
zoznam má preto šírku presne 4 položiek s medzerami. Ťahanie na
zoradenie zostáva FilePondu. */
.fi-body .be-pole-media.be-media-viac .fi-fo-file-upload-input-ctn {
flex: none;
width: calc(4 * 200px);
max-width: 100%;
}
/* FilePond si mriežku rozloží sám, keď má položka šírku v percentách
zoznamu (4 na riadok) - pevná šírka s okrajmi mu rozhádzala polohy. */
.fi-body .be-pole-media.be-media-viac .filepond--item {
width: calc(25% - 20px) !important;
margin: 0 10px 20px !important;
}
.fi-body .be-pole-media.be-media-viac .filepond--panel-root {
background: transparent !important;
}
/* --- Farba --------------------------------------------------------------------
Štandard prvkov (28. 9. 2026): pole ako Text, za poľom tlačidlo s ikonou
picker.svg (45 x 45 px), ktorého pozadie má zvolenú farbu. Klik do poľa
alebo na ikonu otvorí paletu v roletke pod poľom. Popis poľa je 20 px od
ľavého okraja rámu (pipeta už nie je pred poľom). */
.fi-body .be-pole-farba > .fi-fo-field-label-col {
left: var(--be-pole-odsadenie) !important;
}
.fi-body .be-pipeta-blok {
width: 45px;
height: 45px;
}
.fi-body .be-pipeta {
border: 1px solid var(--be-pole-okraj) !important;
border-radius: 10px !important;
}
.fi-body .be-pipeta svg {
width: 24px;
height: 24px;
}
.fi-body .be-pole-farba .fi-fo-color-picker-panel,
.fi-body .be-pole-farba [x-ref="panel"] {
z-index: 40;
}
/* --- Písmo -------------------------------------------------------------------
Štandard prvkov (28. 9. 2026): pole ako Text, za ním tri tlačidlá 45 x 45 px
(veľkosť, váha, farba) s panelmi pod nimi, pod poľom súhrn nastavení. */
.be-pismo {
display: block !important;
}
.be-pismo-riadok {
display: flex;
align-items: flex-start;
gap: 20px;
}
.be-pismo .be-pismo-nazov {
position: relative;
flex: 1 1 auto;
min-width: 0;
}
.be-pismo .be-pismo-nazov .fi-input {
cursor: pointer;
}
.be-pismo-tlacidla {
display: flex;
gap: 20px;
}
.be-pismo-tl-obal {
position: relative;
}
.be-pismo-tl {
display: inline-flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
padding: 0;
background: #F2F2F2;
border: 1px solid var(--be-pole-okraj);
border-radius: 10px;
cursor: pointer;
}
.be-pismo-tl.je-otvorene,
.be-pismo-tl:hover {
border-color: var(--be-pole-okraj-akt);
}
.be-pismo-tl img {
width: 24px;
height: 24px;
}
/* Tlačidlo farby na tmavej zvolenej farbe - biela ikona (karta eZ4Su0qy). */
.be-pismo-tl-farba.je-tmava img {
filter: invert(1);
}
/* Panel pod tlačidlom (návrh: biela karta s okrajom a zaoblením 10 px). */
.be-pismo-panel {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 40;
width: 272px;
padding: 25px 15px 15px;
background: #FFFFFF;
border: 1px solid var(--be-pole-okraj);
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.be-pismo-panel-farba {
display: flex;
flex-direction: column;
gap: 20px;
}
.be-pismo-paleta {
width: 100%;
height: 140px;
padding: 0;
border: 0;
border-radius: 8px;
cursor: pointer;
background: none;
}
.be-pismo-pole {
position: relative;
display: block;
}
.be-pismo-pole > span {
position: absolute;
top: -8px;
left: 15px;
z-index: 1;
padding: 0 5px;
background: #FFFFFF;
font-size: 13px;
font-weight: 300;
line-height: 16px;
color: #000000;
}
.be-pismo-pole > span sup {
top: 0;
margin-left: 3px;
color: var(--be-povinne);
font-size: 1em;
}
.be-pismo-pole input,
.be-pismo-pole select {
width: 100%;
height: 45px;
padding: 0 15px;
font-size: 16px;
color: #000000;
background: #FFFFFF;
border: 1px solid #000000;
border-radius: 10px;
outline: none;
}
/* Roletka písiem - hore pevné hľadanie, položky vlastným písmom. */
.be-pismo .be-pismo-ponuka {
display: flex;
flex-direction: column;
max-height: 300px;
padding: 0;
overflow: hidden;
}
.be-pismo-hladanie {
flex: none;
padding: 15px 20px 10px;
background: #FFFFFF;
}
.be-pismo-hladanie input {
width: 100%;
height: 45px;
padding: 0 15px 0 42px;
font-size: 16px;
font-weight: 300;
border: 1px solid var(--be-pole-okraj);
border-radius: 10px;
outline: none;
background: #FFFFFF url("../icons/vyhladavanie.svg") 12px center / 22px 22px no-repeat;
}
.be-pismo .be-pismo-ponuka ul {
margin: 0;
padding: 0 0 8px;
list-style: none;
overflow-y: auto;
}
.be-pismo .be-pismo-ponuka li {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
/* Súhrn pod poľom: „veľkosť: 12 px štýl: Bold farba: #000000“. */
.be-pismo-suhrn {
display: flex;
flex-wrap: wrap;
gap: 6px 30px;
margin-top: 8px;
padding-left: var(--be-pole-odsadenie);
font-size: 11px;
color: var(--be-inactive);
}
.be-pismo-suhrn strong {
font-weight: 700;
}
/* --- Select s dlhou hodnotou (Vojto 30. 9. 2026): keď sa hodnota zalomí do
dvoch a viac riadkov, pole narastie na výšku, aby ich celé opísalo. Jeden
riadok = 45 px ako doteraz. -------------------------------------------- */
.fi-body .be-pole-select .fi-select-input {
height: auto;
min-height: calc(var(--be-pole-vyska) - 2px);
}
.fi-body .be-pole-select .fi-select-input-btn {
padding-top: 10px !important;
padding-bottom: 10px !important;
line-height: 1.3;
}
.fi-body .be-pole-select .fi-select-input-btn .fi-select-input-value-ctn {
min-height: 0;
height: auto;
}
/* --- Select: výška 45 px aj pri výbere s vyhľadávaním (tlačidlo Filamentu) -- */
.fi-body .be-pole .fi-select-input-btn {
min-height: calc(var(--be-pole-vyska) - 2px) !important;
padding-left: var(--be-pole-odsadenie) !important;
display: flex !important;
align-items: center !important;
font-size: var(--be-pole-pismo) !important;
}
/* Roletka výberu: šírka ako pole, vyhľadávanie s lupou (návrh 28. 9. 2026). */
.fi-body .be-pole .fi-select-input .fi-dropdown-panel {
width: 100% !important;
}
.fi-body .fi-select-input-search-ctn .fi-input {
width: 100%;
height: 45px !important;
padding: 0 15px 0 42px !important;
font-size: 16px !important;
font-weight: 300;
color: #000000;
background: #FFFFFF url("../icons/vyhladavanie.svg") 12px center / 22px 22px no-repeat !important;
border: 1px solid var(--be-pole-okraj) !important;
border-radius: 10px !important;
box-shadow: none !important;
}
.fi-body .fi-select-input-search-ctn .fi-input::placeholder {
color: var(--be-pole-okraj) !important;
}
.fi-body .be-pole .fi-select-input-btn .fi-select-input-value-ctn,
.fi-body .be-pole .fi-select-input-btn .fi-select-input-placeholder {
padding-left: 0 !important;
margin-left: 0 !important;
}
.fi-body .be-pole-media[data-be-nadpis] .fi-fo-file-upload {
justify-content: flex-start !important;
}
.fi-body .be-pole-media[data-be-nadpis] .fi-fo-file-upload > * {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Galéria: pole na nahratie a mriežka obrázkov vedľa seba (mriežka CSS -
pružný riadok nechával medzi nimi voľné miesto). */
.fi-body .be-pole-media.be-media-viac .fi-fo-file-upload {
display: grid !important;
grid-template-columns: 180px minmax(0, 800px);
column-gap: 20px !important;
row-gap: 0 !important;
}
.fi-body .be-pole-media.be-media-viac .fi-fo-file-upload-input-ctn {
width: 100% !important;
}
/* Uploader Súbor: nahratý súbor nemá náhľad - panel s názvom, veľkosťou
a krížikom je v bielej ploche viditeľný stále (návrh 28. 9. 2026). */
.fi-body .be-pole-media[data-be-subor] .filepond--item {
height: auto !important;
min-height: 70px;
}
.fi-body .be-pole-media[data-be-subor] .be-media-info {
position: relative;
transform: none;
border-top: 0;
}
/* --- Pruh s tlačidlami pod formulárom: bez sivého podkladu -------------------
Zadávateľ 28. 9. 2026: „odstráň vo všetkých formulároch toto pole za
tlačidlami, tým pádom môže ostať farba tlačidla“ - sivé Zrušiť (#F2F2F2)
by na sivom pruhu splývalo. Tlačidlá a zoznam chýb zostávajú. */
.fi-body .be-form-actions,
.fi-body .fi-sc-form > .fi-sc-actions,
.fi-body .fi-main .fi-sc-form > .fi-grid > .fi-grid-col > .fi-sc-component > .fi-sc-actions,
.be-pruh-ulozit {
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
/* Nápoveda pri nahrávacom poli: ikona na hornom okraji plochy 180 x 180,
10 px od pravého okraja; bublina môže byť širšia než pole. */
.fi-body .be-pole-media .be-ma-napovedu {
position: relative;
width: 180px;
}
.fi-body .be-pole-media.be-media-viac .be-ma-napovedu {
width: auto;
}
.fi-body .be-pole-media .be-napoveda-ikona {
top: -22px;
right: 10px;
z-index: 6;
}
.fi-body .be-pole-media .be-napoveda-bublina {
right: auto;
width: 320px;
}
.fi-body .be-pole-media .be-napoveda-bublina::after {
right: calc(320px - 180px + 13px); /* hrot nad ikonou poľa 180 px */
}
/* --- Nahratý obrázok: karta s rámikom z tieňa (fGaWyseJ, komentár 28. 9. 12:04) --
Návrh: biela karta so zaoblením 10 px a tieňom okolo celého poľa, obrázok
s odsadením 10 px. Názov poľa a ikona „i“ sedia na HORNEJ HRANE karty
(komentár 28. 9. 13:03: „na hornej hrane poľa, nie vo vnútri“), rovnako
ako v prázdnom poli. */
.fi-body .be-pole-media[data-be-nadpis]:not(.be-media-viac):has(.filepond--item) {
width: 200px;
padding: 10px;
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.16);
}
.fi-body .be-pole-media[data-be-nadpis]:not(.be-media-viac):has(.filepond--item) > .fi-fo-field-label-col {
top: -8px;
left: 10px;
}
.fi-body .be-pole-media[data-be-nadpis]:not(.be-media-viac):has(.filepond--item) .be-ma-napovedu {
position: static;
width: auto;
}
.fi-body .be-pole-media[data-be-nadpis]:not(.be-media-viac):has(.filepond--item) .be-napoveda-ikona {
top: -23px; /* stred ikony na hornej hrane karty */
right: 10px;
}
.fi-body .be-pole-media[data-be-nadpis]:not(.be-media-viac):has(.filepond--item) .be-napoveda-bublina {
bottom: calc(100% + 10px);
}
.fi-body .be-pole-media[data-be-nadpis]:not(.be-media-viac) .fi-fo-file-upload-input-ctn:has(.filepond--item) {
width: 180px;
}
.fi-body .be-pole-media[data-be-nadpis]:not(.be-media-viac) .filepond--item {
box-shadow: none !important;
border-radius: 6px;
}
/* Galéria: každý obrázok je karta s tieňom (bez názvu poľa v nej). */
.fi-body .be-pole-media.be-media-viac .filepond--item {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.16) !important;
}
/* Nápoveda sa pri nahrávacom poli nikdy nevypisuje ako text pod poľom -
len ako ikona „i“ s bublinou (backend-formulare.js). */
.fi-body .be-pole-media > .fi-fo-field-content-col > .fi-sc-text,
.fi-body .be-pole-media .fi-fo-field-content-col > .fi-sc-text {
display: none;
}
/* =============================================================================
19. OKNO „NESPRÁVNY OBSAH“ (Trello fGaWyseJ, 28. 9. 2026)
-----------------------------------------------------------------------------
Nevalidné polia po uložení - biela karta 330 px v strede, sivá ikona
informacie.svg, zoznam chýb vľavo červeno (názov poľa podčiarknutý, klik
posunie na pole), zelené tlačidlo Rozumiem s ikonou oznacenie.svg a v rohu
červený krúžok zrusit.svg (ikony zo sady).
============================================================================= */
.be-okno-chyb {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
background: rgba(0, 0, 0, 0.1);
overflow-y: auto;
}
.be-okno-chyb-karta {
position: relative;
width: 330px;
max-width: 100%;
margin: auto;
padding: 30px 25px 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
text-align: center;
}
.be-okno-chyb-zavriet {
position: absolute;
top: -12px;
right: -12px;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: 50%;
background: url("../icons/zrusit.svg") center / contain no-repeat;
cursor: pointer;
}
.be-okno-chyb-ikona {
width: 56px;
height: 56px;
margin: 0 auto;
background: #BDBDBD;
-webkit-mask: url("../icons/informacie.svg") center / contain no-repeat;
mask: url("../icons/informacie.svg") center / contain no-repeat;
}
.be-okno-chyb-nadpis {
margin: 20px 0 10px;
font-size: 16px;
font-weight: 700;
color: #000;
}
.be-okno-chyb-popis {
margin: 0 0 20px;
font-size: 14px;
font-weight: 300;
line-height: 1.45;
color: #7F7F7F;
}
.be-okno-chyb .be-chyby {
margin: 0 0 20px;
max-height: 50vh;
overflow-y: auto;
text-align: left;
}
.be-okno-chyb .be-chyby li {
margin-bottom: 20px;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
}
.be-okno-chyb .be-chyby li:last-child {
margin-bottom: 0;
}
.be-okno-chyb .be-chyby-preco {
margin-top: 0;
color: var(--be-chyba, #E30014);
font-size: 14px;
font-weight: 300;
}
.be-okno-chyb .be-chyby button:hover {
color: #000;
}
.be-okno-chyb-rozumiem {
display: inline-flex;
align-items: center;
gap: 10px;
height: 45px;
padding: 0 20px 0 15px;
border: 0;
border-radius: 10px;
background: var(--be-ta-pridat, #92C22D);
color: #fff;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.be-okno-chyb-fajka {
width: 24px;
height: 24px;
background: #000;
-webkit-mask: url("../icons/oznacenie.svg") center / contain no-repeat;
mask: url("../icons/oznacenie.svg") center / contain no-repeat;
}
/* =============================================================================
20. ZVISLÉ MEDZERY: POLIA 20 PX, NAD NADPISOM SEKCIE 40 PX (28. 9. 2026)
-----------------------------------------------------------------------------
Zadanie Vojta (Farebnosť, globálne pre celý Backend): „medzi všetky
formulárové polia daj 20 px medzeru na výšku; nad každou hlavičkou sekcie
daj 40 px medzeru“.
Popis vyplneného poľa sedí na jeho hornej čiare a vytŕča nad pole o 10 px -
pri medzere 20 px medzi rámčekmi bolo od spodku poľa po popis ďalšieho
len 10 px. Pole s plávajúcim popisom preto dostane 10 px navrch, takže
viditeľná medzera (spodok poľa → popis ďalšieho) je 20 px.
Sekcie ležia v stĺpcoch hlavnej mriežky formulára. Posledné pole sekcie
nesie spodných 20 px, mriežka pridá ďalších 20 px = 40 px nad nadpisom
nasledujúcej sekcie.
============================================================================= */
.fi-body .fi-main .be-pole:not(.be-pole-media):not(.be-pole-vyber) {
margin-top: 10px; /* uploader a radio/checkbox popis nad čiarou nemajú */
}
.fi-body .fi-main .fi-grid:has(> .fi-grid-col > .fi-sc-component > .fi-sc-section) {
row-gap: 20px !important;
}
/* =============================================================================
21. ROLETKA NAHOR (Trello fGaWyseJ, 28. 9. 2026)
-----------------------------------------------------------------------------
Vlastná roletka, ktorá by pri spodku stránky pretiekla okno, sa otvorí nad
poľom. Triedu be-nahor dáva backend-formulare.js (oddiel 4c).
============================================================================= */
.fi-body .be-pismo-ponuka.be-nahor {
top: auto;
bottom: calc(100% + 12px); /* nad popisom poľa na hornej čiare */
border-radius: var(--be-pole-radius) var(--be-pole-radius) 0 0;
box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.06);
}
.fi-body .be-pismo-panel.be-nahor {
top: auto;
bottom: calc(100% + 10px);
}
.fi-body .fi-dropdown-panel.be-nahor {
border-radius: var(--be-pole-radius) var(--be-pole-radius) 0 0 !important;
box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.06) !important;
}
/* =============================================================================
22. POLE POSUVNÍK (Trello fGaWyseJ, 28. 9. 2026)
-----------------------------------------------------------------------------
Pole ako Text; pod ním roletka (o 15 px užšia z každej strany, bez horného
okraja): šípka vľavo, zelený posuvník s bielym jazdcom a čiernym stredom,
hodnota sivo, šípka vpravo. Ikony sipka-vlavo / sipka-vpravo zo sady.
============================================================================= */
.be-posuvnik {
position: relative;
}
.be-posuvnik-ponuka {
position: absolute;
top: 100%;
left: 15px;
right: 15px;
z-index: 30;
display: flex;
align-items: center;
gap: 15px;
height: 70px;
padding: 0 20px;
background: #FFFFFF;
border: 1px solid var(--be-pole-okraj-aktivne, #000);
border-top: 0;
border-radius: 0 0 10px 10px;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}
.be-posuvnik-ponuka.be-nahor {
top: auto;
bottom: calc(100% + 12px);
border-top: 1px solid var(--be-pole-okraj-aktivne, #000);
border-bottom: 0;
border-radius: 10px 10px 0 0;
}
.be-posuvnik-sipka {
flex: none;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: #000;
cursor: pointer;
}
.be-posuvnik-vlavo {
-webkit-mask: url("../icons/sipka-vlavo.svg") center / 20px 20px no-repeat;
mask: url("../icons/sipka-vlavo.svg") center / 20px 20px no-repeat;
}
.be-posuvnik-vpravo {
-webkit-mask: url("../icons/sipka-vpravo.svg") center / 20px 20px no-repeat;
mask: url("../icons/sipka-vpravo.svg") center / 20px 20px no-repeat;
}
.be-posuvnik-hodnota {
flex: none;
min-width: 44px;
font-size: 14px;
font-weight: 300;
color: #7F7F7F;
text-align: right;
}
.be-posuvnik-draha {
flex: 1 1 auto;
min-width: 0;
height: 14px;
margin: 0;
background: transparent;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.be-posuvnik-draha::-webkit-slider-runnable-track {
height: 14px;
border-radius: 7px;
background: var(--be-ta-pridat, #92C22D);
}
.be-posuvnik-draha::-moz-range-track {
height: 14px;
border-radius: 7px;
background: var(--be-ta-pridat, #92C22D);
}
.be-posuvnik-draha::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
margin-top: -3px;
border: 1px solid #000;
border-radius: 50%;
background: radial-gradient(circle, #000 0 5.5px, #FFF 6px);
}
.be-posuvnik-draha::-moz-range-thumb {
width: 18px;
height: 18px;
border: 1px solid #000;
border-radius: 50%;
background: radial-gradient(circle, #000 0 5.5px, #FFF 6px);
}
/* =============================================================================
23. POLIA MÉDIÁ V JEDNOM RIADKU (Identita, Trello uqiKLYvU, 28. 9. 2026)
-----------------------------------------------------------------------------
Sekcia s triedou be-media-rad radí polia Médiá (180 x 180) vedľa seba
s medzerou 40 px ako na obrázku karty; na úzkej obrazovke sa zalomia.
============================================================================= */
.fi-body .fi-main .be-media-rad .fi-section-content > .fi-grid,
.fi-body .fi-main .be-media-rad .fi-section-content.fi-grid {
display: flex !important;
flex-wrap: wrap;
column-gap: 40px !important;
}
.fi-body .fi-main .be-media-rad .fi-section-content .fi-grid-col {
flex: none;
width: auto !important;
}
/* =============================================================================
24. POLE MÉDIÁ S POLAMI VEDĽA (Farebnosť, Trello N2JudpPQ, 28. 9. 2026)
-----------------------------------------------------------------------------
Vľavo pole Médiá (180 x 180), vpravo vedľa neho ďalšie polia nad sebou
(Pozadie hlavičky + posuvníky), spolu na šírku ľavého stĺpca.
============================================================================= */
.fi-body .fi-main .be-media-s-polami > .fi-grid,
.fi-body .fi-main .be-media-s-polami.fi-grid {
display: flex !important;
align-items: flex-start;
column-gap: 20px !important;
}
.fi-body .fi-main .be-media-s-polami > .fi-grid > .fi-grid-col:first-child,
.fi-body .fi-main .be-media-s-polami.fi-grid > .fi-grid-col:first-child {
flex: none;
width: auto !important;
}
.fi-body .fi-main .be-media-s-polami > .fi-grid > .fi-grid-col + .fi-grid-col,
.fi-body .fi-main .be-media-s-polami.fi-grid > .fi-grid-col + .fi-grid-col {
flex: 1 1 auto;
min-width: 0;
}
/* Polia vedľa Médií ležia v skupine s vlastnou mriežkou Filamentu (medzera
24 px) - zvislú medzeru dáva pole samo (20 px), ako všade inde. */
.fi-body .fi-main .be-media-s-polami .fi-grid-col .fi-grid {
row-gap: 0 !important;
}
/* =============================================================================
25. VÝBER FARBY - PICKER (Trello fGaWyseJ, 28. 9. 2026)
-----------------------------------------------------------------------------
Podľa grafiky karty: plocha sýtosti/jasu, posuvník odtieňa a priehľadnosti,
riadok formát / hodnota / %, uložené farby. Jeden vzhľad pre pole Písmo aj
pre všetky polia Farba (ColorPicker Filamentu). Správanie js/backend-farby.js.
============================================================================= */
.be-fp {
display: flex;
flex-direction: column;
gap: 14px;
width: 226px;
font-size: 13px;
color: #111827;
}
.be-fp-plocha {
position: relative;
height: 142px;
border-radius: 4px;
background-image:
linear-gradient(to top, #000, transparent),
linear-gradient(to right, #fff, transparent);
cursor: crosshair;
touch-action: none;
}
.be-fp-draha {
position: relative;
height: 8px;
border-radius: 4px;
cursor: pointer;
touch-action: none;
}
.be-fp-odtien {
background: linear-gradient(to right, #F00 0%, #FF0 17%, #0F0 33%, #0FF 50%, #00F 67%, #F0F 83%, #F00 100%);
}
.be-fp-alfa {
margin-top: -4px;
background: repeating-conic-gradient(#E5E7EB 0 25%, #FFFFFF 0 50%) 0 0 / 8px 8px;
}
.be-fp-alfa-farba {
position: absolute;
inset: 0;
border-radius: inherit;
}
.be-fp-jazdec {
position: absolute;
top: 50%;
width: 12px;
height: 12px;
border: 2px solid #FFFFFF;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%);
pointer-events: none;
}
.be-fp-plocha .be-fp-jazdec {
top: 0;
}
.be-fp-draha .be-fp-jazdec {
background: #FFFFFF;
}
.be-fp-riadok {
display: flex;
gap: 6px;
}
.be-fp-format,
.be-fp-hodnota,
.be-fp-percento {
height: 30px;
border: 1px solid #E5E7EB;
border-radius: 6px;
background: #FFFFFF;
font-size: 13px;
}
.be-fp-format {
flex: none;
width: 70px;
padding: 0 6px;
}
.be-fp-hodnota {
display: flex;
flex: 1 1 auto;
align-items: center;
gap: 4px;
min-width: 0;
padding: 0 8px;
}
.be-fp-mriezka {
color: #9CA3AF;
}
.be-fp-hodnota input,
.be-fp-percento input {
width: 100%;
min-width: 0;
padding: 0;
border: 0;
outline: none;
background: transparent;
font: inherit;
color: inherit;
}
.be-fp-percento {
display: flex;
flex: none;
align-items: center;
width: 58px;
padding: 0 8px;
}
/* Uložené farby sú skryté (Vojto 30. 9. 2026) - picker ponúka len plochu,
odtieň, priehľadnosť a hodnotu. Kód v backend-farby.js ostáva, stačí
zmazať toto pravidlo, keby sa mali vrátiť. */
.be-fp-ulozene-hlavicka,
.be-fp-ulozene {
display: none !important;
}
.be-fp-ulozene-hlavicka {
display: flex;
align-items: center;
justify-content: space-between;
color: #6B7280;
font-size: 12px;
}
.be-fp-pridat {
padding: 0;
border: 0;
background: none;
color: #6B7280;
font-size: 12px;
cursor: pointer;
}
.be-fp-pridat:hover {
color: #000000;
}
.be-fp-ulozene {
display: grid;
grid-template-columns: repeat(7, 24px);
justify-content: space-between;
row-gap: 10px;
margin-top: -4px;
}
.be-fp-farba {
width: 24px;
height: 24px;
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
}
.be-fp-farba.je-vybrana {
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #9CA3AF;
}
/* Panel poľa Písmo: len picker. */
.be-pismo-panel.be-pismo-panel-farba {
width: auto;
padding: 20px;
}
/* Panel ColorPickera Filamentu: pôvodný výber skrytý, biela karta. */
.fi-body .fi-fo-color-picker-panel[data-be-fp] {
padding: 20px !important;
background: #FFFFFF !important;
border: 1px solid var(--be-pole-okraj) !important;
border-radius: 10px !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}
.fi-body .fi-fo-color-picker-panel[data-be-fp] > :not(.be-fp) {
display: none !important;
}
/* =============================================================================
26. DÁTUMOVNÍK (Textové informácie, Trello gCu2mGUf, 28. 9. 2026)
-----------------------------------------------------------------------------
Filament kreslí dátum ako tlačidlo s vlastným vstupom - štandard textového
poľa (výška 45 px, odsadenie 20 px, písmo 16 px) naň nesiahal a pole bolo
nižšie (38 px).
============================================================================= */
.fi-body .be-pole .fi-fo-date-time-picker-trigger {
width: 100%;
height: calc(var(--be-pole-vyska) - 2px);
padding: 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.fi-body .be-pole .fi-fo-date-time-picker-display-text-input {
height: calc(var(--be-pole-vyska) - 2px) !important;
padding: 0 var(--be-pole-odsadenie) !important;
color: var(--be-pole-text-akt);
font-size: var(--be-pole-pismo) !important;
font-weight: 300;
}
/* Dlhý názov poľa Médiá na hornej hrane karty (180 px) sa nesmie prekryť
s ikonou „i“ vpravo - skráti sa „…“ (28. 9. 2026, Obsah → SEO: „Obrázok
pre sociálne siete“). Celý názov je v bubline nápovedy aj v atribúte title. */
.fi-body .be-pole-media[data-be-nadpis] > .fi-fo-field-label-col {
max-width: calc(100% - 55px); /* ikona „i“ 15 px + 10 px od kraja + medzera */
}
.fi-body .be-pole-media[data-be-nadpis] > .fi-fo-field-label-col .fi-fo-field-label {
display: flex !important;
min-width: 0;
max-width: 100%;
overflow: hidden;
}
.fi-body .be-pole-media[data-be-nadpis] > .fi-fo-field-label-col .fi-fo-field-label-content {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fi-body .be-pole-media[data-be-nadpis] > .fi-fo-field-label-col {
overflow: hidden;
}
.fi-body .be-pole-media[data-be-nadpis] > .fi-fo-field-label-col * {
min-width: 0;
max-width: 100%;
}
/* =============================================================================
27. SELECT: TEXT ZAROVNANÝ AKO V TEXTOVOM POLI, BEZ KRÍŽIKA (28. 9. 2026)
-----------------------------------------------------------------------------
Zadávateľ (Údaje o firme): „zrušiť pri číselníkoch odsadenie textu, nech je
zarovnaný štandardne ako text v poli pod hlavičkou, a zrušiť ikonu na
vymazanie poľa X“. Odsadenie 20 px dáva už obal selectu - tlačidlo vnútri
pridávalo ďalších 20 px. Select je podľa štandardu vždy povinný, krížik na
vymazanie výberu preto netreba.
============================================================================= */
.fi-body .be-pole .fi-select-input-btn {
padding-left: 0 !important;
}
.fi-body .be-pole .fi-select-input-value-remove-btn {
display: none !important;
}
/* =============================================================================
MENU STRÁNKY - výber zo štruktúry stránky (Trello N4tcWUkc, 29. 9. 2026)
-----------------------------------------------------------------------------
Dvojriadkové záznamy v selecte: názov položky a pod ním typ
„(Kategória produktov)“ - Open Sans, 11 px, #7B7B7B.
============================================================================= */
.be-menu-ciel {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.be-menu-ciel-typ {
font-family: "Open Sans", sans-serif;
font-size: 11px;
color: #7B7B7B;
}
/* =============================================================================
NA ZAČIATOK (zadávateľ 29. 9. 2026) - ikona vpravo dole na formulárových
stránkach po posunutí o 100 px, klik posunie späť k Uložiť / Zrušiť
(backend-formulare.js, časť 4c3). Ikona icons/na-zaciatok.svg.
============================================================================= */
.be-na-zaciatok {
position: fixed;
right: 44px;
bottom: 36px;
z-index: 40;
width: 54px;
height: 54px;
padding: 0;
border: 0;
border-radius: 50%;
background: #FFFFFF url('../icons/na-zaciatok.svg') center / contain no-repeat;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.be-na-zaciatok.je-viditelne {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
.be-na-zaciatok:hover {
opacity: 0.7;
}
@media (max-width: 767px) {
.be-na-zaciatok {
right: 16px;
bottom: 16px;
width: 44px;
height: 44px;
}
}
/* Prípona za hodnotou (€, g, %, dní) - globálne, Trello I43LjB2P (29. 9. 2026).
Polohu (left) počíta backend-formulare.js 4c5; vstup sa roztiahne na celú
šírku, takže šípky číselného poľa sú na konci riadka. */
.fi-body .fi-input-wrp.be-pripona-za-hodnotou {
position: relative;
}
.fi-body .fi-input-wrp.be-pripona-za-hodnotou > .fi-input-wrp-suffix {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
padding: 0;
border: 0;
background: none;
pointer-events: none;
white-space: nowrap;
}
.fi-body .fi-input-wrp.be-pripona-za-hodnotou > .fi-input-wrp-suffix .fi-input-wrp-label {
font-size: inherit;
line-height: inherit;
color: #000;
}
/* =============================================================================
ROLETKY PRI SELECTOCH - VŠADE (Vojto 30. 9. 2026)
-----------------------------------------------------------------------------
- roletka nadväzuje na pole bez medzery (0 px) a má jeho šírku
- okraj #000000, horný okraj 0 px (pri roletke otvorenej nahor spodný)
- pole Hľadať v roletke pri kliknutí dostane aktívny okraj #000000
- položka pod kurzorom má pozadie #EEEEEE
Roletku umiestňuje Filament (vložené top/left); tu sa pripne k rámčeku
poľa (.fi-input-wrp), ktorý je pre ňu východiskom.
============================================================================= */
.fi-body .fi-input-wrp:has(.fi-select-input) {
position: relative;
}
/* Medzi rámčekom a roletkou nesmie byť iný východiskový prvok - vnútorný
obal selectu (.fi-select-input-ctn) je odsadený o 20 px. */
.fi-body .fi-input-wrp .fi-select-input,
.fi-body .fi-input-wrp .fi-select-input-ctn,
.fi-body .fi-input-wrp:has(.fi-select-input) .fi-input-wrp-content-ctn {
position: static !important;
}
.fi-body .fi-input-wrp .fi-select-input .fi-dropdown-panel {
position: absolute !important;
top: 100% !important;
bottom: auto !important;
left: -1px !important;
right: -1px !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
transform: none !important;
border: 1px solid #000000 !important;
border-top: 0 !important;
border-radius: 0 0 var(--be-pole-radius) var(--be-pole-radius) !important;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06) !important;
}
/* Otvorená nahor (pri spodku stránky, backend-formulare.js ROLETKY). */
.fi-body .fi-input-wrp .fi-select-input .fi-dropdown-panel.be-nahor {
top: auto !important;
bottom: 100% !important;
border-top: 1px solid #000000 !important;
border-bottom: 0 !important;
border-radius: var(--be-pole-radius) var(--be-pole-radius) 0 0 !important;
}
/* Kým je roletka otvorená, pole s ňou tvorí jeden celok - čierny okraj
a bez zaoblenia na strane, kde je roletka. */
.fi-body .fi-input-wrp:has(.fi-select-input-btn[aria-expanded="true"]) {
border-color: #000000 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.fi-body .fi-input-wrp:has(.fi-dropdown-panel.be-nahor):has(.fi-select-input-btn[aria-expanded="true"]) {
border-radius: 0 0 var(--be-pole-radius) var(--be-pole-radius) !important;
}
/* Pole Hľadať v roletke - aktívny okraj. */
.fi-body .fi-select-input-search-ctn .fi-input:focus,
.fi-body .fi-select-input-search-ctn .fi-input-wrp:focus-within,
.fi-body .fi-select-input-search-ctn .fi-input-wrp:focus-within .fi-input {
border-color: #000000 !important;
outline: none !important;
}
/* Položka pod kurzorom (aj pri pohybe šípkami). */
.fi-body .fi-select-input-option:hover,
.fi-body .fi-select-input-option.fi-focused,
.fi-body .fi-select-input-option:focus {
background: #EEEEEE !important;
}
/* Okraj všetkých roletiek #000 (Vojto 30. 9. 2026) - rovnako ako roletka
Selectu: zoznam písiem (aj jeho hľadanie), panely Písma (veľkosť, váha, farba), ColorPicker
a kalendár DatePickera. */
.fi-body .be-pismo-ponuka,
.fi-body .be-pismo-ponuka.be-nahor,
.fi-body .be-pismo-hladanie input,
.fi-body .be-pismo-panel,
.fi-body .fi-fo-color-picker-panel[data-be-fp],
.fi-body .fi-fo-color-picker-panel {
border-color: #000000 !important;
}
/* Kalendár DatePickera - Filament kreslí okraj tieňom (ring), preto
vlastný okraj a tieň len mäkký. */
.fi-body .fi-fo-date-time-picker-panel {
border: 1px solid #000000 !important;
--tw-ring-shadow: 0 0 #0000 !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}
/* Pozadie položky pod kurzorom #EEEEEE vo všetkých roletkách so zoznamom
možností (Vojto 30. 9. 2026) - rovnako ako pri Selecte: zoznam písiem,
ponuky okna Médiá a menu akcií (Filament dropdown). */
.fi-body .be-pismo-ponuka li:not(.be-pismo-ziadne):hover,
.fi-body .be-pismo-ponuka li[aria-selected="true"],
.fi-body .be-sm-hromadne-ponuka button:hover,
.fi-body .be-sm-menu-ponuka button:hover,
.fi-body .fi-dropdown-panel .fi-dropdown-list-item:hover,
.fi-body .fi-dropdown-panel .fi-dropdown-list-item:focus-visible {
background: #EEEEEE !important;
}
/* RESPONZÍVNE POLE - PREPÍNAČ ROZLÍŠENÍ (Vojto 1. 10. 2026, Trello kOVpdAvo)
Pole, ktoré má inú hodnotu pre každé rozlíšenie z Nastavenia → Rozlíšenie
(prvé: Obsah → Úvodná stránka → Počet kategórií na riadok). Pixel presne
podľa návrhu Vojta (namerané v mierke 1:1):
- pod poľom rad „uší“ 15 px od ľavého okraja poľa, vysokých 36 px od
spodnej čiary poľa; nad neaktívnym uchom čiara poľa nie je (ucho je
do poľa otvorené), okraj 1 px #000, spodné rohy 10 px, uši na seba
nadväzujú (rozstup 46 px, spoločná deliaca čiara);
- neaktívne ucho 47 x 36 px, pozadie #F2F2F2, len ikona 24 px;
- aktívne čierne, biela ikona 9 px od okraja, za ňou 8 px text 13 px
Bold s riadkovaním 12 px - každé slovo na vlastnom riadku, vpravo 10 px.
Použitie: Tabs::make()->extraAttributes(['class' => 'be-rozlisenia']),
v každej karte jedno pole (viď UvodnaStranka::form()). */
.fi-body .be-rozlisenia {
display: flex;
flex-direction: column;
}
/* Pole hore, uši pod ním. Spodných 20 px poľa (.be-pole) patrí až pod uši. */
.fi-body .be-rozlisenia [role="tabpanel"],
.fi-body .be-rozlisenia .fi-sc-tabs-tab {
order: 1;
margin: 0 !important;
padding: 0 !important;
}
.fi-body .be-rozlisenia .be-pole {
margin-bottom: 0 !important;
}
.fi-body .be-rozlisenia .fi-tabs {
order: 2;
position: relative;
z-index: 5; /* nad čiarou poľa - ucho ju prekryje */
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
gap: 0;
margin: -1px 0 20px 15px; /* od spodnej čiary poľa */
padding: 0 !important;
overflow: visible;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
--tw-ring-shadow: 0 0 #0000 !important;
}
.fi-body .be-rozlisenia .fi-tabs-item {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
width: 47px;
min-width: 0;
height: 36px;
margin: 0 0 0 -1px; /* susedné okraje splynú do jednej čiary */
padding: 0 0 0 10px; /* ikona 11 px od deliacej čiary - celé pixely */
background: #F2F2F2 !important; /* Vojto 1. 10. 2026 */
border: 1px solid #000000;
border-top: 0;
border-radius: 0 0 10px 10px;
outline: none;
box-shadow: none !important;
color: #000000 !important;
cursor: pointer;
}
.fi-body .be-rozlisenia .fi-tabs-item:first-child {
margin-left: 0;
}
.fi-body .be-rozlisenia .fi-tabs-item:hover:not(.fi-active) {
background: #E6E6E6 !important;
}
.fi-body .be-rozlisenia .fi-tabs-item.fi-active {
position: relative;
z-index: 1;
width: auto;
padding: 0 9px 0 9px;
background: #000000 !important;
border-color: #000000;
color: #FFFFFF !important;
}
.fi-body .be-rozlisenia .fi-tabs-item .fi-icon,
.fi-body .be-rozlisenia .fi-tabs-item svg {
flex: none;
width: 24px;
height: 24px;
margin: 0;
color: inherit !important;
}
.fi-body .be-rozlisenia .fi-tabs-item-label {
width: min-content; /* každé slovo na vlastnom riadku */
color: inherit !important;
position: relative;
top: 1px;
font-size: 13px;
font-weight: 700 !important;
line-height: 12px;
letter-spacing: -0.2px;
text-align: left;
white-space: normal;
}
/* Neaktívne len ikona - názov ostáva pre čítačky. */
.fi-body .be-rozlisenia .fi-tabs-item:not(.fi-active) .fi-tabs-item-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Na mobile užšie neaktívne uši - všetkých šesť sa zmestí pod pole. */
@media (max-width: 767px) {
.fi-body .be-rozlisenia .fi-tabs-item {
width: 41px;
}
.fi-body .be-rozlisenia .fi-tabs-item.fi-active {
width: auto;
gap: 6px;
padding: 0 8px 0 7px;
}
.fi-body .be-rozlisenia .fi-tabs-item-label {
font-size: 11px;
line-height: 11px;
}
}
/* POLE ZOZNAM (Trello dIUynYUd, 1. 10. 2026)
Podľa obrázka z komentára: pole s roletkou (hľadanie + položky, vzhľad ako
roletka poľa Písmo), vedľa 20 px zelené tlačidlo Pridať (45 px, ikona
plus, biely tučný text); pod poľom pridané položky - text 16 px, riadky
oddelené čiarou #CCCCCC, na konci ikona zoradenia potiahnutím a kôš
(24 px, 10 px od seba). Šablóna filament/forms/components/zoznam. */
.fi-body .be-zoznam-riadok {
display: flex;
align-items: flex-start;
gap: 20px;
}
.fi-body .be-zoznam-pole {
position: relative;
flex: 1 1 auto;
min-width: 0;
}
.fi-body .be-zoznam-pole .fi-input[readonly] {
cursor: pointer;
}
/* Chybný text pri voľnom texte (napr. nie je odkaz na YouTube). */
.fi-body .be-zoznam-chyba {
margin: 6px 0 0;
font-size: 13px;
color: #EA001C;
}
.fi-body .be-zoznam .be-zoznam-ponuka {
display: flex;
flex-direction: column;
max-height: 300px;
padding: 0;
overflow: hidden;
border-color: #000000;
}
.fi-body .be-zoznam .be-zoznam-ponuka ul {
margin: 0;
padding: 0 0 8px;
list-style: none;
overflow-y: auto;
}
.fi-body .be-zoznam .be-zoznam-ponuka li {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.fi-body .be-zoznam .be-zoznam-ponuka li:not(.be-pismo-ziadne):hover,
.fi-body .be-zoznam .be-zoznam-ponuka li[aria-selected="true"] {
background: #EEEEEE;
}
.fi-body .be-zoznam-pridat {
flex: none;
display: inline-flex;
align-items: center;
gap: 10px;
height: 45px;
padding: 0 15px;
background: #92C22D;
border: 0;
border-radius: 10px;
color: #FFFFFF;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.fi-body .be-zoznam-pridat img {
width: 24px;
height: 24px;
filter: brightness(0) invert(1); /* biela ikona plus */
}
.fi-body .be-zoznam-pridat:disabled {
opacity: 0.5;
cursor: default;
}
.fi-body .be-zoznam-polozky {
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.fi-body .be-zoznam-polozka {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
border-bottom: 1px solid #CCCCCC;
background: #FFFFFF;
}
.fi-body .be-zoznam-polozka:last-child {
border-bottom: 0;
}
.fi-body .be-zoznam-nazov {
flex: 1 1 auto;
min-width: 0;
font-size: 16px;
color: #000000;
overflow-wrap: anywhere;
}
.fi-body .be-zoznam-tl {
flex: none;
display: inline-flex;
width: 24px;
height: 24px;
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.fi-body .be-zoznam-tl img {
width: 24px;
height: 24px;
}
.fi-body .be-zoznam-presun {
cursor: grab;
}
.fi-body .be-zoznam-polozka.fi-sortable-ghost {
opacity: 0.4;
}
@media (max-width: 767px) {
.fi-body .be-zoznam-riadok {
gap: 10px;
}
.fi-body .be-zoznam-pridat span {
display: none; /* na mobile len ikona plus */
}
}
/* ZOBRAZIŤ / SKRYŤ ČASŤ STRÁNKY (Obsah → Úvodná stránka, grafika Vojta
1. 10. 2026): riadky 44 px s okrajom #CCCCCC a zaoblením 8 px, medzi nimi
10 px; názov 16 px vľavo (16 px od okraja), vpravo úchyt na zoradenie
a prepínač (10 px od pravého okraja). */
.fi-body .be-uvod-sekcie {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 430px; /* šírka riadkov podľa grafiky */
margin: 0;
padding: 0;
list-style: none;
}
.fi-body .be-uvod-sekcia {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 18px;
height: 44px;
padding: 0 10px 0 16px;
background: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 8px;
}
.fi-body .be-uvod-sekcia-nazov {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
font-size: 16px;
font-weight: 400;
color: #000000;
white-space: nowrap;
text-overflow: ellipsis;
}
.fi-body .be-uvod-sekcia-presun {
flex: none;
display: inline-flex;
width: 24px;
height: 24px;
padding: 0;
background: none;
border: 0;
cursor: grab;
}
.fi-body .be-uvod-sekcia-presun img {
width: 24px;
height: 24px;
}
.fi-body .be-uvod-sekcia .fi-toggle {
flex: none;
}
.fi-body .be-uvod-sekcia.fi-sortable-ghost {
opacity: 0.4;
}
/* Vybrané hodnoty vo viacnásobnom selecte (napr. Produkt → Súvisiace
produkty), Vojto 1. 10. 2026: bez farebného pozadia, Open Sans 13 px
Regular čierna, X červené (#EA001C) v rovnakej veľkosti ako text. */
.fi-body .fi-select-input .fi-badge {
padding: 0 !important;
background: none !important;
box-shadow: none !important;
border: 0 !important;
gap: 5px !important;
margin-right: 10px;
}
.fi-body .fi-select-input .fi-badge .fi-badge-label {
font-family: 'Open Sans', sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 18px !important;
color: #000000 !important;
}
.fi-body .fi-select-input .fi-badge-delete-btn {
display: inline-flex;
align-items: center;
padding: 0 !important;
margin: 0 !important;
}
.fi-body .fi-select-input .fi-badge-delete-btn-icon {
display: block;
width: 13px !important;
height: 13px !important;
background-color: #EA001C !important;
color: transparent !important;
font-size: 0 !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 2.5l9 9M11.5 2.5l-9 9' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 2.5l9 9M11.5 2.5l-9 9' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fi-body .fi-select-input .fi-badge-delete-btn-icon::before,
.fi-body .fi-select-input .fi-badge-delete-btn-icon::after {
content: none !important;
}
.fi-body .fi-select-input .fi-badge-delete-btn:hover .fi-badge-delete-btn-icon {
background-color: #B80016 !important;
}
/* Väčší odstup nad poľom - 40 px medzi poľami namiesto 20 px (Produkt →
Obrázky a video, Vojto 1. 10. 2026). */
.fi-body .fi-fo-field.be-odstup-40 {
margin-top: 20px;
}
/* Pole Zoznam za galériou: názov sedí na hornej čiare, galéria nemá spodný
okraj ako ostatné polia - 40 px sa meria po čiaru poľa. */
.fi-body .fi-fo-field.be-odstup-40.be-pole-zoznam {
margin-top: 20px !important;
}
/* ==========================================================================
SKLADACIE SEKCIE - všetky formuláre (body.be-formular-sekcie, JS 4c6)
a .be-sekcia-zbalitelna; Produkt 1. 10. 2026, globálne 1. 10. 2026
--------------------------------------------------------------------------
Hlavička sekcie: sivé pozadie #E5E5E5 (Vojto 5. 10. 2026, predtým #D1D1D1), na konci riadka ikona podmenu.svg
(zbaliť). Pri posúvaní nadol sa hlavičky, ktoré dorazia na horný okraj,
skladajú pod seba do zásobníka (.be-sekcie-zasobnik); klik na hlavičku
v zásobníku otvorí sekciu na jej mieste. Správanie: backend-formulare.js
(4c6). Výška hlavičky je pevná, aby sa pozície dali presne vypočítať.
========================================================================== */
.fi-body .fi-main .be-sekcia-zbalitelna > .fi-section > .fi-section-header,
.be-formular-sekcie .fi-main .fi-sc-section:not(.fi-sc-section .fi-sc-section):not(.fi-modal .fi-sc-section) > .fi-section > .fi-section-header,
.be-sekcie-zasobnik .be-zasobnik-hlavicka {
display: flex !important;
align-items: center !important;
gap: 10px;
box-sizing: border-box;
height: 44px;
padding: 0 15px 0 20px !important;
margin-bottom: 20px;
background: #E5E5E5; /* Vojto 5. 10. 2026 - všetky formuláre */
border-radius: 8px;
}
.fi-body .fi-main .be-sekcia-zbalitelna > .fi-section > .fi-section-header .fi-section-header-text-ctn,
.be-formular-sekcie .fi-main .fi-sc-section:not(.fi-sc-section .fi-sc-section):not(.fi-modal .fi-sc-section) > .fi-section > .fi-section-header .fi-section-header-text-ctn {
flex: 1 1 auto;
min-width: 0;
}
.fi-body .fi-main .be-sekcia-zbalitelna > .fi-section > .fi-section-header .fi-section-header-heading,
.be-formular-sekcie .fi-main .fi-sc-section:not(.fi-sc-section .fi-sc-section):not(.fi-modal .fi-sc-section) > .fi-section > .fi-section-header .fi-section-header-heading {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hlavička s popisom sekcie (text pod nadpisom) - výška podľa obsahu. */
.be-formular-sekcie .fi-main .fi-sc-section:not(.fi-sc-section .fi-sc-section):not(.fi-modal .fi-sc-section) > .fi-section > .fi-section-header:has(.fi-section-header-description),
.fi-body .fi-main .be-sekcia-zbalitelna > .fi-section > .fi-section-header:has(.fi-section-header-description) {
height: auto !important;
min-height: 44px;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.be-formular-sekcie .fi-main .fi-sc-section > .fi-section > .fi-section-header .fi-section-header-description {
margin: 2px 0 0 !important;
}
/* Ikona zbaliť / otvoriť - podmenu.svg, 15 x 15 px, čierna. */
.be-sekcia-ikona {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 30px;
height: 30px;
margin-left: auto;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.be-sekcia-ikona::before {
content: "";
display: block;
width: 15px;
height: 15px;
margin: auto;
background: #000000;
-webkit-mask: url("/icons/podmenu.svg") center / contain no-repeat;
mask: url("/icons/podmenu.svg") center / contain no-repeat;
}
.be-sekcia-ikona:hover::before {
background: #7F7F7F;
}
/* Zbalená sekcia (posledná v poradí - ďalšia už nie je, kam posunúť). */
.fi-body .fi-main .be-sekcia-zbalitelna.be-sekcia-zbalena > .fi-section > .fi-section-content-ctn,
.be-formular-sekcie .fi-main .fi-sc-section.be-sekcia-zbalena > .fi-section > .fi-section-content-ctn {
display: none !important;
}
/* Jedna hlavička zatvorených sekcií na hornom okraji okna; zoznam
zatvorených sekcií sa ukáže po prejdení myšou alebo kliknutí. */
.be-sekcie-zasobnik {
position: fixed;
z-index: 30;
}
.be-sekcie-zasobnik[hidden] {
display: none;
}
.be-sekcie-zasobnik .be-zasobnik-hlavicka {
margin: 0;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 20px; /* ako H2 sekcie */
font-weight: 700;
color: #000000;
}
.be-sekcie-zasobnik:hover .be-zasobnik-hlavicka,
.be-sekcie-zasobnik.je-otvoreny .be-zasobnik-hlavicka {
border-radius: 8px 8px 0 0;
}
.be-sekcie-zasobnik .be-zasobnik-nazov {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.be-zasobnik-zoznam {
display: none;
max-height: calc(100vh - 120px);
overflow-y: auto;
background: #FFFFFF;
border: 1px solid #CCCCCC;
border-top: 0;
border-radius: 0 0 8px 8px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
@media (hover: hover) {
.be-sekcie-zasobnik:hover .be-zasobnik-zoznam {
display: block;
}
}
.be-sekcie-zasobnik.je-otvoreny .be-zasobnik-zoznam {
display: block;
}
.be-zasobnik-polozka {
display: flex;
align-items: center;
height: 44px;
padding: 0 20px;
border-top: 1px solid #EEEEEE;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 400;
color: #000000;
cursor: pointer;
}
.be-zasobnik-polozka:first-child {
border-top: 0;
}
.be-zasobnik-polozka:hover {
background: #EEEEEE;
}
.be-zasobnik-polozka.je-aktualna {
font-weight: 700;
}
/* Produkt → Recenzie a komentáre: zoznam pod prepínačom (Vojto 1. 10. 2026). */
.be-produkt-prehlad {
margin: -10px 0 10px;
padding: 0;
list-style: none;
border-top: 1px solid #EEEEEE;
}
.be-produkt-prehlad li {
border-bottom: 1px solid #EEEEEE;
}
.be-produkt-recenzie li {
padding: 6px 0;
}
.be-hviezdy {
font-size: 18px;
letter-spacing: 2px;
color: #F5A623;
}
.be-hviezdy-prazdne {
color: #CCCCCC;
}
.be-produkt-komentare a {
display: block;
padding: 8px 0;
color: #000000;
text-decoration: none;
}
.be-produkt-komentare a:hover .be-komentar-text {
text-decoration: underline;
}
.be-komentar-hlavicka {
display: flex;
gap: 10px;
font-size: 13px;
color: #7F7F7F;
}
.be-komentar-hlavicka strong {
color: #000000;
font-weight: 600;
}
.be-komentar-text {
display: block;
margin-top: 2px;
font-size: 14px;
font-weight: 300;
}
/* Práva - hlavička hlavného menu nad zoznamom modulov (Vojto 2. 10. 2026):
Open Sans 16 px Bold, 40 px nad každou (okrem prvej). */
.fi-body .be-prava-menu .fi-fo-field-label-content {
font-family: 'Open Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #000000 !important;
}
.fi-body .fi-grid-col:has(.be-prava-menu) ~ .fi-grid-col:has(.be-prava-menu) {
margin-top: 20px; /* + 20 px medzery mriežky = 40 px */
}
/* Prepínač celého menu - názov menu ako hlavička (16 px Bold, čierna). */
.fi-body .be-prava-menu label,
.fi-body .be-prava-menu .fi-fo-field-label-content {
font-size: 16px !important;
font-weight: 700 !important;
color: #000000 !important;
}
/* Bez prístupu (Nastavenia → Práva, Vojto 2. 10. 2026): ikona 200 x 200 px,
text a Späť na stred obsahovej časti. */
.be-bez-pristupu {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
min-height: 60vh;
text-align: center;
}
.be-bez-pristupu img {
width: 200px;
height: 200px;
object-fit: contain;
}
.be-bez-pristupu p {
margin: 0;
font-size: 20px;
font-weight: 600;
color: #000000;
}
.fi-body .be-bez-pristupu .be-bez-pristupu-spat {
display: inline-flex;
align-items: center;
gap: 8px;
height: 44px;
padding: 0 20px;
border-radius: 8px;
background: #EEEEEE;
font-size: 16px;
font-weight: 600;
color: #000000;
text-decoration: none;
}
.fi-body .be-bez-pristupu .be-bez-pristupu-spat span {
font-size: 24px;
line-height: 1;
}
.fi-body .be-bez-pristupu .be-bez-pristupu-spat:hover {
background: #E0E0E0;
}
/* Uploader Súborov - nahratý súbor, ktorý nie je obrázok (pdf, docx …):
ikona dokumentu, prípona a názov súboru (Vojto 3. 10. 2026). */
.fi-body .be-pole-media .filepond--item.be-media-je-subor > .be-media-subor {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 14px 12px;
background: #FFFFFF;
border-radius: inherit;
text-align: center;
pointer-events: none;
}
.be-media-subor-ikona {
width: 56px;
height: 56px;
background: #7F7F7F;
-webkit-mask: url("/icons/media-pdf.svg") center / contain no-repeat;
mask: url("/icons/media-pdf.svg") center / contain no-repeat;
}
.be-media-subor-pripona {
font-size: 14px;
font-weight: 700;
color: #000000;
}
.be-media-subor-nazov {
display: -webkit-box;
max-width: 100%;
overflow: hidden;
font-size: 12px;
line-height: 1.3;
color: #7F7F7F;
word-break: break-all;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* ==========================================================================
VIZUÁLNY EDITOR (Obsah → Stránky, Vojto 4. 10. 2026) - Builder .be-ve
--------------------------------------------------------------------------
Prerušovaná plocha s názvom na hornej hrane; prázdna = veľké plus a texty,
inak sekcie (prerušované boxy) a pod nimi plus. Výber sekcie = popup
s ikonami (sekcia-1, sekcia-1-doprava, sekcia-2), v sekcii Zvoľte typ
obsahu (Text / Obrázok) -> HTML okno alebo Upload Media.
========================================================================== */
.fi-body .fi-fo-builder.be-ve {
position: relative;
margin: 10px 0 30px;
padding: 20px;
border: 1px dashed #BFBFBF;
border-radius: 10px;
}
.fi-body .fi-fo-builder.be-ve::before {
content: attr(data-nazov) " *";
position: absolute;
top: -10px;
left: 14px;
padding: 0 6px;
background: #FFFFFF;
font-size: 14px;
line-height: 20px;
color: #000000;
}
.fi-body .be-ve .fi-fo-builder-items {
gap: 20px;
}
/* Sekcia (návrh Vojto 4. 10. 2026): nad obsahom názov vľavo („Sekcia 2/1“)
a vpravo sivá záložka s ikonami Presunúť / Zbaliť / ⋮ (Presunúť hore,
dole, Duplikovať - backend-formulare.js) / Odstrániť. Obsahy sekcie sú
boxy so sivým okrajom 3 px (.be-ve-box, položky Repeateru). */
.fi-body .be-ve .fi-fo-builder-items {
gap: 10px;
}
.fi-body .be-ve .fi-fo-builder-item {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.fi-body .be-ve .fi-fo-builder-item-header {
display: flex !important;
align-items: flex-end !important;
gap: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
cursor: default;
}
.fi-body .be-ve .fi-fo-builder-item-header-icon {
display: none !important;
}
.fi-body .be-ve .fi-fo-builder-item-header-label {
order: 1;
flex: 1 1 auto;
padding: 0 0 8px 10px;
font-size: 14px !important;
font-weight: 400 !important;
color: #000000 !important;
}
/* Záložka: ľavá časť = Presunúť (start-actions), pravá = zvyšok. */
.fi-body .be-ve .fi-fo-builder-item-header-start-actions,
.fi-body .be-ve .fi-fo-builder-item-header-end-actions {
display: flex !important;
align-items: center;
gap: 12px !important;
height: 38px;
margin: 0 0 -1px !important;
padding: 0 12px;
border: 1px solid #CCCCCC;
border-bottom: 0;
background: #EEEEEE;
position: relative;
z-index: 1;
}
.fi-body .be-ve .fi-fo-builder-item-header-start-actions {
order: 2;
padding-right: 6px;
border-right: 0;
border-radius: 10px 0 0 0;
}
.fi-body .be-ve .fi-fo-builder-item-header-end-actions {
order: 3;
margin-right: 20px !important;
padding-left: 6px;
border-left: 0;
border-radius: 0 10px 0 0;
}
/* Presunúť hore / dole a Duplikovať sú v menu ⋮ (tlačidlo Duplikovať
slúži ako ⋮ - JS otvorí menu). */
.fi-body .be-ve .fi-fo-builder-item-header-start-actions > li:not(:first-child) {
display: none !important;
}
.fi-body .be-ve .fi-fo-builder-item-header-end-actions > li {
display: flex;
}
.fi-body .be-ve .fi-fo-builder-item-header-end-actions > li:has([wire\:click*="'clone'"]) { order: 2; }
.fi-body .be-ve .fi-fo-builder-item-header-end-actions > li:has([wire\:click*="'delete'"]) { order: 3; }
.fi-body .be-ve .fi-fo-builder-item-header-end-actions > .fi-fo-builder-item-header-collapsible-actions { order: 1; }
.fi-body .be-ve .fi-fo-builder-item-header .fi-icon-btn {
width: 30px !important;
height: 30px !important;
padding: 0 !important;
color: #000000 !important;
}
.fi-body .be-ve .fi-fo-builder-item-header .fi-icon-btn > * {
display: none !important;
}
.fi-body .be-ve .fi-fo-builder-item-header .fi-icon-btn::before {
content: "";
display: block;
width: 24px;
height: 24px;
margin: auto;
background: #000000;
-webkit-mask: var(--be-ve-ikona) center / contain no-repeat;
mask: var(--be-ve-ikona) center / contain no-repeat;
}
.fi-body .be-ve .fi-fo-builder-item-header [x-sortable-handle] {
--be-ve-ikona: url("/icons/zoradit-tahanim-krizik.svg");
cursor: grab;
}
.fi-body .be-ve .fi-fo-builder-item-header-collapse-action .fi-icon-btn,
.fi-body .be-ve .fi-fo-builder-item-header-expand-action .fi-icon-btn {
--be-ve-ikona: url("/icons/sipka-menu-hore.svg");
}
.fi-body .be-ve .fi-fo-builder-item-header-expand-action .fi-icon-btn::before {
transform: rotate(180deg);
}
.fi-body .be-ve .fi-fo-builder-item-header [wire\:click*="'clone'"] {
--be-ve-ikona: url("/icons/menu-vertikalne.svg");
}
.fi-body .be-ve .fi-fo-builder-item-header [wire\:click*="'delete'"]::before {
width: 26px;
height: 26px;
background: url("/icons/zrusit.svg") center / contain no-repeat;
-webkit-mask: none;
mask: none;
}
/* Obsah sekcie bez rámu - rám majú jednotlivé obsahy. */
.fi-body .be-ve .fi-fo-builder-item-content {
padding: 0 !important;
border: 0 !important;
}
.fi-body .be-ve .be-ve-box,
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-item {
position: relative;
min-height: 120px;
padding: 10px;
border: 1px solid #CCCCCC !important;
border-radius: 10px !important;
background: #FFFFFF !important;
box-shadow: none !important;
}
.fi-body .be-ve .be-ve-box .be-ve-typ,
.fi-body .be-ve .be-ve-obsahy .be-ve-typ {
border: 0;
}
/* Zbalená sekcia - len hlavička s čiarou zospodu. */
.fi-body .be-ve .fi-fo-builder-item.fi-collapsed .fi-fo-builder-item-header {
border-bottom: 1px solid #CCCCCC !important;
}
/* Názvy polí Text / Obrázok sa v boxe nezobrazujú (návrh 4. 10. 2026). */
.fi-body .be-ve .be-ve-box .fi-fo-field-label-col,
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-item .fi-fo-field-label-col {
display: none !important;
}
.fi-body .be-ve .be-ve-box .be-ve-typ .fi-fo-field-label-col,
.fi-body .be-ve .be-ve-obsahy .be-ve-typ .fi-fo-field-label-col {
display: flex !important;
}
.fi-body .be-ve .be-ve-box .be-pole-media,
.fi-body .be-ve .be-ve-obsahy .be-pole-media {
margin: 0 auto;
}
/* Sekcia 1/1 a 1/1 vedľa seba: hlavička obsahu (presun, odstrániť) len
ako malé sivé ikony v pravom hornom rohu boxu, „Pridať obsah“ ako odkaz. */
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-item-header {
position: absolute;
top: 4px;
right: 6px;
z-index: 2;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
opacity: 0.5;
}
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-item-header:hover {
opacity: 1;
}
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-item-content {
padding: 0 !important;
border: 0 !important;
}
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-add .fi-btn,
.fi-body .be-ve .be-ve-obsahy > .fi-fo-repeater-add-ctn .fi-btn,
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-actions .fi-btn {
height: auto !important;
padding: 4px 6px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-size: 13px !important;
font-weight: 400 !important;
color: #7F7F7F !important;
text-decoration: underline;
}
/* Sivé plus medzi sekciami (Pridať medzi bloky), čierne plus na konci. */
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn {
position: static !important;
display: flex;
justify-content: center;
height: auto !important;
margin: 0 !important;
padding: 6px 0 0 !important;
background: transparent !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items {
position: static !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn {
width: 40px !important;
height: 40px !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-size: 0 !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn > * {
display: none !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn::before {
content: "";
display: block;
width: 32px;
height: 32px;
margin: auto;
background: #B2B2B2;
-webkit-mask: url("/icons/pridat-b.svg") center / contain no-repeat;
mask: url("/icons/pridat-b.svg") center / contain no-repeat;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn:hover::before {
background: #000000;
}
/* „Zbaliť všetky sekcie“ - modrý podčiarknutý odkaz v strede; ukazuje sa
len jeden z odkazov podľa stavu (backend-formulare.js, .be-ve-zbalene). */
.fi-body .be-ve > .fi-fo-builder-actions {
justify-content: center;
margin: 4px 0 20px !important;
}
.fi-body .be-ve > .fi-fo-builder-actions .fi-link {
font-size: 16px !important;
color: #2B2BD9 !important;
text-decoration: underline;
}
.fi-body .be-ve > .fi-fo-builder-actions > span:nth-child(2),
.fi-body .be-ve.be-ve-zbalene > .fi-fo-builder-actions > span:nth-child(1) {
display: none;
}
.fi-body .be-ve.be-ve-zbalene > .fi-fo-builder-actions > span:nth-child(2) {
display: inline;
}
/* Menu ⋮ sekcie (vytvára backend-formulare.js). */
.be-ve-menu {
position: absolute;
z-index: 60;
min-width: 180px;
padding: 6px 0;
border-radius: 8px;
background: #FFFFFF;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
}
.be-ve-menu button {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 16px;
border: 0;
background: transparent;
font-size: 14px;
text-align: left;
color: #000000;
cursor: pointer;
}
.be-ve-menu button:hover:not(:disabled) {
background: #F2F2F2;
}
.be-ve-menu button:disabled {
color: #BFBFBF;
cursor: default;
}
/* Pridať: prázdny editor - plocha s plus a textami; inak len plus. */
.fi-body .be-ve .fi-fo-builder-actions {
justify-content: center;
margin-top: 16px;
}
.fi-body .be-ve .be-ve-pridat.fi-btn {
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
padding: 4px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-size: 0 !important;
color: #000000 !important;
}
.fi-body .be-ve .be-ve-pridat.fi-btn > * {
display: none !important;
}
.fi-body .be-ve .be-ve-pridat.fi-btn::before {
content: "";
display: block;
width: 32px;
height: 32px;
background: #000000;
-webkit-mask: url("/icons/pridat-b.svg") center / contain no-repeat;
mask: url("/icons/pridat-b.svg") center / contain no-repeat;
}
/* Popup výberu sekcie - dlaždice s veľkou ikonou a názvom pod ňou. */
.fi-body .be-ve .fi-fo-builder-block-picker .fi-dropdown-list,
.fi-body .be-ve .fi-fo-builder-block-picker {
padding: 16px !important;
}
.fi-body .be-ve .fi-dropdown-panel {
min-width: 520px;
border-radius: 12px !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18) !important;
}
.fi-body .be-ve .fi-fo-builder-block-picker .fi-dropdown-list-item {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
min-height: 130px;
padding: 16px 10px !important;
border: 1px solid #EEEEEE !important;
border-radius: 10px !important;
text-align: center;
white-space: normal;
}
.fi-body .be-ve .fi-fo-builder-block-picker .fi-dropdown-list-item:hover {
border-color: #BFBFBF !important;
background: #F7F7F7 !important;
}
.fi-body .be-ve .fi-fo-builder-block-picker .fi-dropdown-list-item .fi-icon {
width: 64px !important;
height: 64px !important;
color: #000000 !important;
}
.fi-body .be-ve .fi-fo-builder-block-picker .fi-dropdown-list-item-label {
font-size: 14px !important;
color: #000000 !important;
white-space: normal !important;
overflow: visible !important;
}
/* Zvoľte obsah (návrh 4. 10. 2026): nadpis v strede tučne, pod ním
dlaždice Text / Obrázok / Galéria so sivými ikonami. */
.fi-body .be-ve .be-ve-typ {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 20px !important;
padding: 16px 10px;
}
.fi-body .be-ve .be-ve-typ .fi-fo-field-label-col {
display: flex !important;
justify-content: center;
}
.fi-body .be-ve .be-ve-typ .fi-fo-field-label-content {
font-size: 16px !important;
font-weight: 700 !important;
text-align: center;
color: #000000 !important;
}
.fi-body .be-ve .be-ve-typ .fi-fo-toggle-buttons {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center;
gap: 20px !important;
}
.fi-body .be-ve .be-ve-typ .fi-fo-toggle-buttons label.fi-btn,
.fi-body .be-ve .be-ve-typ .fi-fo-toggle-buttons .fi-btn {
flex-direction: column !important;
gap: 10px !important;
width: 100px !important;
height: 100px !important;
padding: 10px !important;
border: 0 !important;
border-radius: 10px !important;
background: #FFFFFF !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #000000 !important;
}
.fi-body .be-ve .be-ve-typ .fi-fo-toggle-buttons .fi-btn .fi-icon {
width: 44px !important;
height: 44px !important;
color: #B2B2B2 !important;
}
.fi-body .be-ve .be-ve-typ .fi-fo-toggle-buttons .fi-btn:hover {
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.16) !important;
}
.fi-body .be-ve .be-ve-typ .fi-fo-toggle-buttons .fi-btn:hover .fi-icon {
color: #7F7F7F !important;
}
/* Prázdny editor (Vojto 4. 10. 2026): Builder je skrytý (výber sekcie ostáva
v DOM - dlaždice naň klikajú), namiesto neho .be-ve-prazdny. */
.fi-body .fi-fo-builder.be-ve:not(:has(.fi-fo-builder-item)) {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0);
}
.fi-body .fi-grid-col:has(.fi-fo-builder.be-ve:not(:has(.fi-fo-builder-item))) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
}
.fi-body .be-ve-prazdny {
position: relative;
--be-pole-vyska: 20px;
display: flex;
flex-direction: column;
align-items: center;
margin: 10px 0 30px;
padding: 50px 20px 58px;
border: 1px dashed #BFBFBF;
border-radius: 10px;
background: #F2F2F2;
}
.fi-body .be-ve-prazdny-nazov {
position: absolute;
top: -10px;
left: 14px;
padding: 0 6px;
background: #FFFFFF;
font-size: 14px;
line-height: 20px;
color: #000000;
}
.fi-body .be-ve-prazdny-nazov i {
font-style: normal;
color: #E30014;
}
.fi-body .be-ve-prazdny .be-napoveda-bublina {
top: 14px;
right: 0;
left: auto;
}
.fi-body .be-ve-prazdny-plus {
display: block;
width: 32px;
height: 32px;
background: #000000;
-webkit-mask: url("/icons/pridat-b.svg") center / contain no-repeat;
mask: url("/icons/pridat-b.svg") center / contain no-repeat;
}
.fi-body .be-ve-prazdny-titul {
margin-top: 24px;
font-size: 16px;
font-weight: 700;
color: #000000;
}
.fi-body .be-ve-prazdny-bloky {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.fi-body .be-ve-prazdny-blok {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
width: 100px;
height: 100px;
padding: 10px 6px;
border: 0;
border-radius: 10px;
background: #FFFFFF;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
font-size: 14px;
line-height: 1.2;
color: #000000;
cursor: pointer;
transition: box-shadow 0.15s ease;
}
.fi-body .be-ve-prazdny-blok:hover {
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.16);
}
.fi-body .be-ve-prazdny-ikona {
width: 40px;
height: 40px;
color: #B2B2B2;
}
.fi-body .be-ve-prazdny-blok:hover .be-ve-prazdny-ikona {
color: #7F7F7F;
}
/* --------------------------------------------------------------------------
Rámik editora so sekciami (návrh 4. 10. 2026): hlavička (.be-ve-hlavicka)
+ Builder (.be-ve) + panel dlaždíc (.be-ve-prazdny--pod) tvoria jeden
prerušovaný rámik - sú to 3 polia formulára, medzera 20 px medzi nimi sa
preto prekryje zápornými okrajmi.
-------------------------------------------------------------------------- */
.fi-body .be-ve-hlavicka {
position: relative;
--be-pole-vyska: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin: 10px 0 -20px;
padding: 26px 20px 0;
border: 1px dashed #BFBFBF;
border-bottom: 0;
border-radius: 10px 10px 0 0;
}
.fi-body .be-ve-hlavicka .be-napoveda-bublina {
top: 14px;
right: 0;
left: auto;
}
.fi-body .be-ve-hlavicka-odkaz {
align-self: flex-end; /* vpravo (Vojto 4. 10. 2026) */
padding: 0;
border: 0;
background: transparent;
font-size: 16px;
color: #2B2BD9;
text-decoration: underline;
cursor: pointer;
}
.fi-body .be-ve-hlavicka-plus {
position: relative;
height: 0;
}
.fi-body .be-ve-plus-sive {
position: absolute;
top: 0; /* stred na hornej hrane prvej sekcie (Vojto 4. 10. 2026) */
left: 50%;
z-index: 3;
width: 40px;
height: 40px;
padding: 0;
border: 0;
background: transparent;
transform: translateX(-50%);
cursor: pointer;
}
.fi-body .be-ve-plus-sive::before {
content: "";
display: block;
width: 32px;
height: 32px;
margin: auto;
background: #B2B2B2;
-webkit-mask: url("/icons/pridat-b.svg") center / contain no-repeat;
mask: url("/icons/pridat-b.svg") center / contain no-repeat;
}
.fi-body .be-ve-plus-sive:hover::before {
background: #000000;
}
.fi-body .be-ve-hlavicka-vyber {
position: absolute;
top: 46px;
left: 50%;
z-index: 30;
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 14px;
padding: 16px;
border-radius: 12px;
background: #FFFFFF;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
transform: translateX(-50%);
}
.fi-body .be-ve-hlavicka-vyber .be-ve-prazdny-blok {
box-shadow: 0 0 0 1px #EEEEEE;
}
/* Builder medzi hlavičkou a panelom - len bočné čiary rámika, bez názvu,
bez vlastných odkazov Zbaliť / Rozbaliť a bez čierneho plus. */
.fi-body .fi-fo-builder.be-ve:has(.fi-fo-builder-item) {
margin: 0 !important;
/* 40 px pod poslednou sekciou po panel dlaždíc (panel prekrýva 20 px). */
padding: 40px 20px 60px !important;
border-top: 0 !important;
border-bottom: 0 !important;
border-radius: 0 !important;
}
.fi-body .fi-fo-builder.be-ve:has(.fi-fo-builder-item)::before,
.fi-body .be-ve > .fi-fo-builder-actions {
display: none !important;
}
.fi-body .be-ve:has(.fi-fo-builder-item) .fi-fo-builder-block-picker-ctn:has(.be-ve-pridat),
.fi-body .be-ve:has(.fi-fo-builder-item) .fi-fo-builder-block-picker:has(.be-ve-pridat),
.fi-body .be-ve:has(.fi-fo-builder-item) .be-ve-pridat {
display: none !important;
}
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-actions,
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-add {
margin: 6px 0 4px !important;
}
/* Panel dlaždíc pod sekciami - spodná časť rámika, sivé pozadie,
prerušovaná čiara nad ním. */
.fi-body .be-ve-prazdny.be-ve-prazdny--pod {
margin: -20px 0 30px;
padding: 30px 20px 40px;
border-radius: 0 0 10px 10px;
}
/* --------------------------------------------------------------------------
Obsah v boxe (návrh 4. 10. 2026): obrázok cez šírku boxu, galéria ako
mriežka 3 obrázkov na riadok (plocha na nahratie pod ňou), bez názvov.
-------------------------------------------------------------------------- */
.fi-body .be-ve .be-ve-box .be-pole-media > .fi-fo-field-label-col,
.fi-body .be-ve .be-ve-obsahy .be-pole-media > .fi-fo-field-label-col {
display: none !important;
}
.fi-body .be-ve .be-pole-media,
.fi-body .be-ve .be-pole-media .be-ma-napovedu {
width: 100% !important;
max-width: 100% !important;
}
/* Obrázok: plocha na nahratie v strede, nahratý obrázok cez šírku (max 320). */
.fi-body .be-ve .be-pole-media:not(.be-media-viac) .fi-fo-file-upload {
align-items: center;
}
.fi-body .be-ve .be-pole-media[data-be-nadpis]:not(.be-media-viac) .fi-fo-file-upload-input-ctn:has(.filepond--item) {
width: 100% !important;
max-width: 320px;
margin: 0 auto;
}
.fi-body .be-ve .be-pole-media[data-be-nadpis]:not(.be-media-viac) .filepond--item {
width: 100% !important;
height: 190px !important;
}
/* Galéria: mriežka 3 na riadok, plocha na nahratie pod ňou (nižšia). */
.fi-body .be-ve .be-pole-media.be-media-viac .fi-fo-file-upload {
grid-template-columns: minmax(0, 1fr) !important;
row-gap: 10px !important;
}
.fi-body .be-ve .be-pole-media.be-media-viac .fi-fo-file-upload-input-ctn {
order: 1;
width: 100% !important;
}
.fi-body .be-ve .be-pole-media.be-media-viac .fi-fo-file-upload:has(.filepond--item) > .be-media-obsah {
order: 2;
width: 100% !important;
height: 56px !important;
min-height: 0 !important;
flex-direction: row;
gap: 10px;
}
.fi-body .be-ve .be-pole-media.be-media-viac .fi-fo-file-upload:has(.filepond--item) > .be-media-obsah .be-media-parametre {
display: none;
}
.fi-body .be-ve .be-pole-media.be-media-viac .filepond--item {
width: calc(33.333% - 10px) !important;
height: 100px !important;
margin: 0 5px 10px !important;
}
/* Sekcia 1/1 (jeden box) - bez hlavičky obsahu. */
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-item:only-child .fi-fo-repeater-item-header:not(:has(button)) {
display: none;
}
/* Sivé plus medzi sekciami v riadku s názvom nasledujúcej sekcie. */
.fi-body .be-ve .fi-fo-builder-items {
gap: 24px !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn {
position: relative !important;
z-index: 3;
/* Filament ho bez kurzora skrýva - plus je zobrazený stále (Vojto 4. 10. 2026). */
opacity: 1 !important;
visibility: visible !important;
height: 0 !important;
margin: 0 0 -24px !important;
padding: 0 !important;
overflow: visible;
}
.fi-body .be-ve .fi-fo-builder-add-between-items {
position: absolute !important;
top: 58px; /* o 2 x 10 px nižšie (Vojto 4. 10. 2026) */
left: 50%;
transform: translateX(-50%) !important;
}
/* Text v boxe - nižšie okno (návrh: box ~200 px), nie 500 px ako vo formulároch. */
.fi-body .be-ve .be-pole-wysiwyg .ck.ck-editor__main > .ck-editor__editable,
.fi-body .be-ve .be-pole-wysiwyg .ck-editor-nahlad {
min-height: 140px !important;
height: auto !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items,
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-fo-builder-block-picker-ctn,
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-dropdown-trigger {
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* Jeden rámik (box) - text bez vlastného čierneho rámu, obrázok bez karty
s tieňom (Vojto 4. 10. 2026). */
.fi-body .be-ve .be-pole-wysiwyg .ck.ck-editor__editable_inline,
.fi-body .be-ve .be-pole-wysiwyg .ck-editor-nahlad,
.fi-body .be-ve .be-pole-wysiwyg .ck.ck-editor {
border: 0 !important;
box-shadow: none !important;
}
.fi-body .be-ve .be-pole-wysiwyg .ck.ck-toolbar {
border-bottom: 1px solid #EEEEEE !important;
}
.fi-body .be-ve .be-pole-wysiwyg .html-editor {
border: 0;
border-radius: 0;
background: transparent;
}
.fi-body .be-ve .be-pole-media[data-be-nadpis]:not(.be-media-viac) .fi-fo-file-upload-input-ctn:has(.filepond--item),
.fi-body .be-ve .be-pole-media[data-be-nadpis]:not(.be-media-viac) .filepond--item {
box-shadow: none !important;
background: transparent !important;
}
/* Sivé plus Pridať (Vojto 4. 10. 2026) - na začiatku aj medzi sekciami
rovnako: ukáže sa len pri kurzore v riadku s názvom sekcie (na celú
šírku editora), na pluse alebo pri otvorenom výbere sekcie; farba
#E5E5E5, kurzor priamo na pluse = čierne. */
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn,
.fi-body .be-ve-plus-sive {
/* Zobrazené stále, ako ikona Vymeniť (Vojto 4. 10. 2026). */
opacity: 1 !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn::before,
.fi-body .be-ve-plus-sive::before {
background: #E5E5E5 !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn:hover .fi-btn,
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn:has(+ .fi-fo-builder-item > .fi-fo-builder-item-header:hover) .fi-btn,
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn:has([aria-expanded="true"]) .fi-btn,
.fi-body .be-ve-plus-sive:hover,
.fi-body .be-ve-plus-sive:focus-visible,
.fi-body .be-ve-hlavicka-plus:has(.be-ve-hlavicka-vyber:not([style*="display: none"])) .be-ve-plus-sive,
.fi-body .fi-section-content:has(.be-ve .fi-fo-builder-items > .fi-fo-builder-item:first-child > .fi-fo-builder-item-header:hover) .be-ve-plus-sive {
opacity: 1 !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn:hover::before,
.fi-body .be-ve-plus-sive:hover::before,
.fi-body .be-ve-plus-sive:focus-visible::before {
background: #000000 !important;
}
/* Widget Doprava / Platba v boxe - ikona, názov, popis; Zmeniť obsah. */
.fi-body .be-ve .be-ve-widget {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 10px 0;
text-align: center;
}
.fi-body .be-ve .be-ve-widget-ikona {
width: 44px;
height: 44px;
color: #B2B2B2;
}
.fi-body .be-ve .be-ve-widget strong {
font-size: 16px;
color: #000000;
}
.fi-body .be-ve .be-ve-widget span {
max-width: 420px;
font-size: 13px;
color: #7F7F7F;
}
.fi-body .be-ve .be-ve-zmenit .fi-link {
font-size: 13px !important;
color: #2B2BD9 !important;
text-decoration: underline;
}
/* Ikony v menu ⋮ sekcie (sipka-menu-hore / -dole, duplikuj). */
.be-ve-menu-ikona {
flex: none;
width: 24px; /* 24 x 24 px (Vojto 4. 10. 2026) */
height: 24px;
background: currentColor;
-webkit-mask: var(--be-ve-menu-ikona) center / contain no-repeat;
mask: var(--be-ve-menu-ikona) center / contain no-repeat;
}
/* Podklad sivých plusov a ikona výmeny obsahov (návrh 4. 10. 2026): biely
štvorček 40 px, zaoblenie 8 px, jemný tieň. */
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn,
.fi-body .be-ve-plus-sive,
.fi-body .be-ve-vymenit {
width: 40px !important;
height: 40px !important;
border-radius: 8px !important;
background: #FFFFFF !important;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12) !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn::before,
.fi-body .be-ve-plus-sive::before {
width: 26px !important;
height: 26px !important;
}
/* Ikona výmeny - v strede medzery medzi boxom a nasledujúcim boxom; pri
poslednom boxe (alebo jedinom) sa nezobrazí. */
.fi-body .be-ve .be-ve-box,
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-item {
overflow: visible !important;
}
.fi-body .be-ve-vymenit {
position: absolute;
top: 50%;
right: -31px;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
transform: translateY(-50%);
cursor: pointer;
}
.fi-body .be-ve-vymenit::before {
content: "";
width: 22px;
height: 22px;
background: #E5E5E5; /* bez prejdenia myšou (Vojto 4. 10. 2026) */
-webkit-mask: url("/icons/vymenit-pozicie.svg") center / contain no-repeat;
mask: url("/icons/vymenit-pozicie.svg") center / contain no-repeat;
}
.fi-body .be-ve-vymenit:hover::before {
background: #000000;
}
.fi-body .be-ve .fi-grid-col:last-child > .fi-sc-component > .be-ve-box .be-ve-vymenit,
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-item:last-child .be-ve-vymenit {
display: none;
}
/* Pridať / Vymeniť pri prejdení myšou (Vojto 4. 10. 2026): ikona 100 %
čierna a nad ňou bublina s textom (data-be-titulok). */
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn[data-be-titulok],
.fi-body .be-ve-plus-sive[data-be-titulok],
.fi-body .be-ve-vymenit[data-be-titulok] {
overflow: visible !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn[data-be-titulok]::after,
.fi-body .be-ve-plus-sive[data-be-titulok]::after,
.fi-body .be-ve-vymenit[data-be-titulok]::after {
content: attr(data-be-titulok);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
z-index: 10;
padding: 5px 10px;
border-radius: 6px;
background: #000000;
font-size: 12px !important;
font-weight: 400;
line-height: 1.3;
color: #FFFFFF;
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateX(-50%);
transition: opacity 0.15s ease;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn[data-be-titulok]:hover::after,
.fi-body .be-ve-plus-sive[data-be-titulok]:hover::after,
.fi-body .be-ve-vymenit[data-be-titulok]:hover::after {
opacity: 1;
visibility: visible;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn:hover::before,
.fi-body .be-ve-plus-sive:hover::before,
.fi-body .be-ve-vymenit:hover::before {
background: #000000 !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn {
position: relative;
}
/* Plus Pridať všade rovnaký (Vojto 4. 10. 2026): ikona v strede štvorčeka
aj medzi sekciami (tlačidlo Filamentu má vlastné zarovnanie a odsadenie). */
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn,
.fi-body .be-ve-plus-sive {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
padding: 0 !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn::before,
.fi-body .be-ve-plus-sive::before {
flex: none;
margin: 0 !important;
}
/* ==========================================================================
VIZUÁLNY EDITOR - OKNÁ SEKCIÍ A STĹPCOV (grafika Vojto 4. 10. 2026)
--------------------------------------------------------------------------
Sekcia = rámik #CCCCCC so sivou hlavičkou: vľavo zbaliť (šípka) a názov,
vpravo presun a ⋮ (menu sekcie). Stĺpec = rámik so sivou hlavičkou
(ve-stlpec-hlavicka): názov + šírka, Zmeniť obsah, presun, ⋮.
Prebíja predošlé pravidlá (záložka nad boxom).
========================================================================== */
.fi-body .be-ve .fi-fo-builder-item {
border: 1px solid #CCCCCC !important;
border-radius: 6px !important;
background: #FFFFFF !important;
overflow: visible !important;
}
.fi-body .be-ve .fi-fo-builder-item-header {
display: flex !important;
align-items: center !important;
gap: 12px !important;
height: 40px;
padding: 0 16px !important;
border: 0 !important;
border-bottom: 1px solid #CCCCCC !important;
border-radius: 6px 6px 0 0;
background: #F5F5F5 !important;
}
.fi-body .be-ve .fi-fo-builder-item.fi-collapsed .fi-fo-builder-item-header {
border-bottom: 0 !important;
border-radius: 6px;
}
.fi-body .be-ve .fi-fo-builder-item-header-start-actions,
.fi-body .be-ve .fi-fo-builder-item-header-end-actions {
display: contents !important;
}
.fi-body .be-ve .fi-fo-builder-item-header-start-actions > li,
.fi-body .be-ve .fi-fo-builder-item-header-end-actions > li {
display: none !important;
}
/* Viditeľné: zbaliť (vľavo), názov, presun, ⋮ (tlačidlo Duplikovať). */
.fi-body .be-ve .fi-fo-builder-item-header-end-actions > .fi-fo-builder-item-header-collapsible-actions {
display: flex !important;
order: 0;
}
.fi-body .be-ve .fi-fo-builder-item-header-label {
order: 1;
flex: 1 1 auto;
padding: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #000000 !important;
}
.fi-body .be-ve .fi-fo-builder-item-header-start-actions > li:first-child {
display: flex !important;
order: 2;
}
.fi-body .be-ve .fi-fo-builder-item-header-end-actions > li:has([wire\:click*="'clone'"]) {
display: flex !important;
order: 3;
}
.fi-body .be-ve .fi-fo-builder-item-header .fi-icon-btn {
width: 28px !important;
height: 28px !important;
}
.fi-body .be-ve .fi-fo-builder-item-header-collapse-action .fi-icon-btn,
.fi-body .be-ve .fi-fo-builder-item-header-expand-action .fi-icon-btn {
--be-ve-ikona: url("/icons/sipka-menu-hore.svg");
}
.fi-body .be-ve .fi-fo-builder-item-content {
padding: 20px !important;
}
/* Medzi sekciami 40 px, plus na hornej hrane nasledujúcej sekcie. */
.fi-body .be-ve .fi-fo-builder-items {
gap: 40px !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn {
margin: 0 0 -40px !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items {
top: 47px !important; /* stred plusu na hornej hrane sekcie */
}
/* Stĺpec - box so sivou hlavičkou. */
.fi-body .be-ve .be-ve-box,
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-item {
min-height: 0;
padding: 0 !important;
border: 1px solid #CCCCCC !important;
border-radius: 6px !important;
overflow: hidden !important;
}
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-item-header {
display: none !important;
}
.fi-body .be-ve .be-ve-box > .fi-grid,
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-item-content > .fi-grid {
row-gap: 0 !important;
}
.fi-body .be-ve .be-ve-box > .fi-grid > .fi-grid-col:not(:first-child),
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-item-content > .fi-grid > .fi-grid-col:not(:first-child) {
padding: 20px;
}
.fi-body .be-ve-stlpec-hlavicka {
display: flex;
align-items: center;
gap: 12px;
height: 40px;
padding: 0 12px 0 12px;
border-bottom: 1px solid #CCCCCC;
background: #F5F5F5;
}
.fi-body .be-ve-stlpec-nazov {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
font-size: 14px;
color: #000000;
white-space: nowrap;
text-overflow: ellipsis;
}
.fi-body .be-ve-stlpec-nazov i {
font-style: normal;
color: #BFBFBF;
}
.fi-body .be-ve-stlpec-zmenit {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
border: 0;
background: transparent;
font-size: 14px;
color: #000000;
white-space: nowrap;
cursor: pointer;
}
.fi-body .be-ve-stlpec-zmenit::before {
content: "";
width: 18px;
height: 18px;
background: #000000;
-webkit-mask: url("/icons/widgety.svg") center / contain no-repeat;
mask: url("/icons/widgety.svg") center / contain no-repeat;
}
.fi-body .be-ve-stlpec-zmenit:hover {
text-decoration: underline;
}
.fi-body .be-ve-stlpec-presun,
.fi-body .be-ve-stlpec-viac {
flex: none;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: #000000;
-webkit-mask: var(--be-ve-ikona) center / contain no-repeat;
mask: var(--be-ve-ikona) center / contain no-repeat;
cursor: pointer;
}
.fi-body .be-ve-stlpec-presun {
--be-ve-ikona: url("/icons/zoradit-tahanim-krizik.svg");
cursor: grab;
}
.fi-body .be-ve-stlpec-viac {
--be-ve-ikona: url("/icons/menu-vertikalne.svg");
}
/* Cieľ pri ťahaní stĺpca. */
.fi-body .be-ve .be-ve-ciel {
border-color: #000000 !important;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15) !important;
}
/* Spodný panel bez veľkého plusu (grafika). */
.fi-body .be-ve-prazdny--pod .be-ve-prazdny-plus {
display: none;
}
.fi-body .be-ve-prazdny--pod .be-ve-prazdny-titul {
margin-top: 0;
}
/* Číslo stĺpca pri sekcii „vedľa seba“ (počet položiek sa mení). */
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-items {
counter-reset: be-ve-stlpec;
}
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-item {
counter-increment: be-ve-stlpec;
}
.fi-body .be-ve-stlpec-cislo::before {
content: counter(be-ve-stlpec);
}
/* Hlavička sekcie (Vojto 4. 10. 2026): názov vľavo, vpravo zoradiť ťahaním,
zbaliť / rozbaliť, menu ⋮; medzi sekciami 20 px (plus na hornej hrane). */
.fi-body .be-ve .fi-fo-builder-item-header-label { order: 0 !important; }
.fi-body .be-ve .fi-fo-builder-item-header-start-actions > li:first-child { order: 2 !important; }
/* Zbaliť / rozbaliť len v menu ⋮ (Vojto 4. 10. 2026) - tlačidlo ostáva
v DOM skryté, menu naň klikne. */
.fi-body .be-ve .fi-fo-builder-item-header-end-actions > .fi-fo-builder-item-header-collapsible-actions { display: none !important; }
.fi-body .be-ve .fi-fo-builder-item-header-end-actions > li:has([wire\:click*="'clone'"]) { order: 4 !important; }
.fi-body .be-ve .fi-fo-builder-items {
gap: 20px !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn {
margin: 0 0 -20px !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items {
top: 27px !important;
}
/* Roletka „Pridať sekciu medzi“ v štýle roletky „Pridať sekciu nad“
(Vojto 4. 10. 2026): dlaždice 100 x 100, sivé ikony, 3 v riadku. */
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-dropdown-panel {
z-index: 40 !important;
width: 360px !important; /* 3 x 100 + 2 x 14 + 2 x 16 */
min-width: 0 !important;
max-width: none !important;
padding: 0 !important;
border: 0 !important;
border-radius: 12px !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18) !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-dropdown-list {
padding: 16px !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-dropdown-list > .fi-grid {
display: grid !important;
grid-template-columns: repeat(3, 100px) !important;
grid-auto-flow: row !important;
gap: 14px !important;
columns: auto !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-dropdown-list-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
width: 100px !important;
height: 100px !important;
min-height: 0 !important;
margin: 0 !important;
padding: 10px 6px !important;
border: 0 !important;
border-radius: 10px !important;
background: #FFFFFF !important;
box-shadow: 0 0 0 1px #EEEEEE !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-dropdown-list-item:hover {
background: #FFFFFF !important;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.16) !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-dropdown-list-item .fi-icon {
width: 40px !important;
height: 40px !important;
color: #B2B2B2 !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-dropdown-list-item:hover .fi-icon {
color: #7F7F7F !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-dropdown-list-item-label {
font-size: 14px !important;
line-height: 1.2 !important;
color: #000000 !important;
text-align: center;
white-space: nowrap !important;
}
/* Otvorená roletka nad ostatnými plusmi. */
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn:has([aria-expanded="true"]) {
z-index: 30 !important;
}
/* ==========================================================================
POPUP DIZAJN SEKCIE / STĹPCA (grafika Vojto 4. 10. 2026)
--------------------------------------------------------------------------
Šírka + šírka okraja, farby, čiara, Písmo, čiara, mriežka strán Hore /
(magnet) / Dole / Vľavo / Vpravo pre Okraj, Odsadenie a Rádius.
========================================================================== */
/* Horný riadok: Šírka | Farba pozadia | Písmo. */
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-hore:has(> .fi-grid-col),
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-hore > .fi-grid:has(> .fi-grid-col) {
display: grid !important;
grid-template-columns: 140px 220px minmax(0, 1fr) !important;
column-gap: 20px !important;
align-items: start;
}
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-hore .fi-grid-col {
grid-column: auto !important;
}
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-ciara {
margin: 0;
border: 0;
border-top: 1px solid #DDDDDD;
}
/* Medzery 20 px medzi rámikmi polí (Vojto 4. 10. 2026): riadky polí, nad
a pod hlavičkou Hore / Dole / …, Okraj / Odsadenie / Rádius, tlačidlá. */
.fi-body .be-ve-dizajn-okno .fi-modal-content .fi-sc,
.fi-body .be-ve-dizajn-okno .fi-modal-content .fi-grid {
row-gap: 20px !important;
}
.fi-body .be-ve-dizajn-okno .fi-modal-content .be-pole,
.fi-body .be-ve-dizajn-okno .fi-modal-content .fi-fo-field {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.fi-body .be-ve-dizajn-okno .fi-modal-content {
padding-bottom: 0 !important;
}
.fi-body .be-ve-dizajn-okno .fi-modal-footer {
padding-top: 20px !important;
}
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-hlavicky,
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-strany:has(> .fi-grid-col),
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-strany > .fi-grid:has(> .fi-grid-col) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
align-items: center;
column-gap: 12px !important;
}
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-strany .fi-grid-col {
grid-column: auto !important;
}
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-hlavicky {
text-align: center;
font-size: 16px;
color: #000000;
}
/* Magnet - zaškrtávacie pole ako ikona: čierna = spojené, sivá = nie.
Checkbox Filamentu je v popise poľa (label). */
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-magnet .fi-fo-field-label-col {
display: block !important;
position: static !important;
padding: 0 !important;
background: transparent !important;
}
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-magnet .fi-fo-field-label-ctn label {
position: relative;
display: block;
width: 28px;
height: 28px;
margin: 0 auto;
padding: 0 !important;
cursor: pointer;
}
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-magnet .fi-fo-field-label-ctn label::before {
content: "";
position: absolute;
inset: 0;
background: #CCCCCC;
-webkit-mask: url("/icons/magnet.svg") center / contain no-repeat;
mask: url("/icons/magnet.svg") center / contain no-repeat;
}
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-magnet:has(input:checked) .fi-fo-field-label-ctn label::before {
background: #000000;
}
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-magnet input[type="checkbox"] {
position: absolute;
inset: 0;
z-index: 1;
width: 28px !important;
height: 28px !important;
margin: 0;
opacity: 0;
cursor: pointer;
}
/* Posuvník v roletke pod číselným poľom (data-be-posuvnik). */
.be-posuvnik-plavajuci {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 30;
padding: 14px 16px;
border-radius: 8px;
background: #FFFFFF;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
}
/* Popup Dizajn - tlačidlá ako v ostatných popupoch (2 rovnaké, 48 px). */
.fi-body .be-ve-dizajn-okno .fi-modal-footer-actions {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 14px !important;
max-width: 340px;
margin: 0 auto;
}
.fi-body .be-ve-dizajn-okno .fi-modal-footer-actions .fi-btn {
width: 100%;
height: 48px;
justify-content: center;
border-radius: 8px !important;
font-size: 16px !important;
box-shadow: none !important;
}
.fi-body .be-ve-dizajn-okno .fi-modal-footer-actions .be-potvrdenie-zrusit {
background: #F2F2F2 !important;
color: #000000 !important;
font-weight: 400 !important;
}
.fi-body .be-ve-dizajn-okno .fi-modal-footer-actions .be-potvrdenie-suhlasim {
background: #92C22D !important;
color: #FFFFFF !important;
font-weight: 700 !important;
}
.fi-body .be-ve-dizajn-okno .fi-modal-footer-actions .be-potvrdenie-suhlasim .fi-icon {
color: #000000 !important;
}
.fi-body .be-ve-dizajn-okno .fi-modal-close-btn {
position: absolute !important;
top: -12px !important;
right: -12px !important;
width: 28px !important;
height: 28px !important;
padding: 0 !important;
border-radius: 50%;
background: url('/icons/zrusit.svg') center / contain no-repeat !important;
}
.fi-body .be-ve-dizajn-okno .fi-modal-close-btn > * {
visibility: hidden;
}
.fi-body .be-ve-dizajn-okno .fi-modal-icon-bg,
.fi-body .be-ve-dizajn-okno .fi-modal-icon-ctn {
background: transparent !important;
box-shadow: none !important;
}
.fi-body .be-ve-dizajn-okno .fi-modal-icon-ctn .fi-icon,
.fi-body .be-ve-dizajn-okno .fi-modal-icon-bg .fi-icon {
width: 56px !important;
height: 56px !important;
color: #BDBDBD !important;
}
/* ==========================================================================
POPUP DIZAJN - NÁKRES A VÝBER ČASTI (grafika Vojto 4. 10. 2026)
========================================================================== */
.fi-body .be-ve-dizajn-okno .fi-modal-content .fi-sc {
row-gap: 20px !important;
}
.be-ve-nakres {
display: flex;
justify-content: center;
padding: 10px 0 6px;
}
.be-ve-nakres-box {
position: relative;
width: 180px;
height: 160px;
margin: 0 60px;
font-size: 12px;
color: #000000;
}
.be-ve-nakres-hrana {
position: absolute;
border-color: #BFBFBF;
border-style: dashed;
border-width: 0;
}
.be-ve-nakres-hrana--hore { top: 0; left: 0; right: 0; border-top-width: 2px; }
.be-ve-nakres-hrana--dole { bottom: 0; left: 0; right: 0; border-bottom-width: 2px; }
.be-ve-nakres-hrana--vlavo { top: 0; bottom: 0; left: 0; border-left-width: 2px; }
.be-ve-nakres-hrana--vpravo { top: 0; bottom: 0; right: 0; border-right-width: 2px; }
.be-ve-nakres-roh {
position: absolute;
width: 18px;
height: 18px;
margin: -8px;
border-radius: 50%;
background: #CCCCCC;
}
.be-ve-nakres-roh--lh { top: 0; left: 0; }
.be-ve-nakres-roh--ph { top: 0; right: 0; }
.be-ve-nakres-roh--pd { bottom: 0; right: 0; }
.be-ve-nakres-roh--ld { bottom: 0; left: 0; }
.be-ve-nakres-hodnota {
position: absolute;
white-space: nowrap;
line-height: 16px;
}
/* Rádius pri rohoch (zvonka). */
.be-ve-nakres-r--lh { top: -8px; right: calc(100% + 14px); }
.be-ve-nakres-r--ld { bottom: -8px; right: calc(100% + 14px); }
.be-ve-nakres-r--ph { top: -8px; left: calc(100% + 14px); }
.be-ve-nakres-r--pd { bottom: -8px; left: calc(100% + 14px); }
/* Okraj (vonku) a odsadenie (vnútri) pri hranách. */
.be-ve-nakres-o--hore { bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); }
.be-ve-nakres-i--hore { top: 6px; left: 50%; transform: translateX(-50%); }
.be-ve-nakres-o--dole { top: calc(100% + 4px); left: 50%; transform: translateX(-50%); }
.be-ve-nakres-i--dole { bottom: 6px; left: 50%; transform: translateX(-50%); }
.be-ve-nakres-o--vlavo { top: 50%; right: calc(100% + 8px); transform: translateY(-50%); }
.be-ve-nakres-i--vlavo { top: 50%; left: 8px; transform: translateY(-50%); }
.be-ve-nakres-o--vpravo { top: 50%; left: calc(100% + 8px); transform: translateY(-50%); }
.be-ve-nakres-i--vpravo { top: 50%; right: 8px; transform: translateY(-50%); }
.be-ve-nakres .je-aktivna { color: #E30014; }
.be-ve-nakres .be-ve-nakres-roh.je-aktivna { background: #E30014; }
.be-ve-nakres .be-ve-nakres-hrana.je-aktivna { border-color: #E30014; }
/* „Zachovaj pri všetkých stranách rovnako“ - magnet pred textom. */
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-magnet .fi-fo-field-label-ctn label {
width: auto !important;
height: auto !important;
margin: 0 !important;
display: flex !important;
align-items: center;
gap: 12px;
padding-left: 40px !important;
min-height: 28px;
font-size: 13px;
line-height: 1.3;
}
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-magnet .fi-fo-field-label-ctn label::before {
inset: auto !important;
left: 0 !important;
top: 50% !important;
width: 28px;
height: 28px;
transform: translateY(-50%);
}
.fi-body .be-ve-dizajn-okno .be-ve-dizajn-magnet input[type="checkbox"] {
inset: auto !important;
left: 0;
top: 50%;
transform: translateY(-50%);
}
/* Písmo v úzkom popupe (grafika): pole, súhrn, pod nimi tlačidlá v strede. */
.fi-body .be-ve-dizajn-okno .be-pismo {
display: flex !important;
flex-direction: column;
}
.fi-body .be-ve-dizajn-okno .be-pismo-riadok {
display: contents !important;
}
.fi-body .be-ve-dizajn-okno .be-pismo-nazov { order: 1; width: 100%; }
.fi-body .be-ve-dizajn-okno .be-pismo-suhrn { order: 2; align-self: center; justify-content: center; }
.fi-body .be-ve-dizajn-okno .be-pismo-tlacidla {
order: 3;
align-self: center;
justify-content: center;
margin-top: 10px;
}
/* ==========================================================================
VIZUÁLNY EDITOR - PREKRYTIE OBSAHU (Vojto 4. 10. 2026)
--------------------------------------------------------------------------
Tlačidlo Vizuálny editor v hlavičke (ako Zoradiť pri kategóriách) zapne
editor: ostatné sekcie a polia formulára sa skryjú a plocha editora ich
prekryje ako biela karta s červeným krížikom v rohu (ve-zavriet).
========================================================================== */
.fi-body .fi-btn.be-tlacidlo-ve {
background: var(--be-ta-sive-tlacidlo, #F2F2F2) !important;
color: #000000 !important;
}
.fi-body .fi-btn.be-tlacidlo-ve:hover {
background: #E6E6E6 !important;
}
.fi-body .fi-btn.be-tlacidlo-ve .fi-icon {
width: 24px !important;
height: 24px !important;
color: #000000 !important;
}
.fi-body .fi-btn.be-tlacidlo-ve--zapnuty .fi-icon {
color: inherit !important;
}
.fi-body .fi-sc-form:has(.be-ve-prekryv-znacka) .fi-section:not(:has(.be-ve-prekryv-znacka)),
.fi-body .fi-sc-form:has(.be-ve-prekryv-znacka) .be-zasobnik,
.fi-body .fi-section:has(.be-ve-prekryv-znacka) .fi-section-header {
display: none !important;
}
.fi-body .fi-section:has(.be-ve-prekryv-znacka) .fi-section-content > .fi-grid-col:not(:has(.be-ve-prekryv-znacka, .be-ve, .be-ve-hlavicka, .be-ve-prazdny)) {
display: none !important;
}
.fi-body .fi-section:has(.be-ve-prekryv-znacka) {
position: relative;
padding: 30px !important;
border: 1px solid #EEEEEE !important;
border-radius: 10px !important;
background: #FFFFFF !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}
.fi-body .fi-section:has(.be-ve-prekryv-znacka) .fi-section-content-ctn,
.fi-body .fi-section:has(.be-ve-prekryv-znacka) .fi-section-content {
padding: 0 !important;
border: 0 !important;
}
.fi-body .fi-section:has(.be-ve-prekryv-znacka) .fi-grid-col:has(> .fi-sc-component > .be-ve-prekryv-znacka),
.fi-body .fi-section:has(.be-ve-prekryv-znacka) .fi-grid-col:has(.be-ve-prekryv-zavriet) {
position: static !important;
height: 0;
margin: 0 !important;
}
.be-ve-prekryv-zavriet {
position: absolute;
top: -12px;
right: -12px;
z-index: 5;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50%;
background: url("/icons/zrusit.svg") center / contain no-repeat;
cursor: pointer;
}
/* Hlavička sekcie pod prekrytím - vyššia špecifickosť než zbaľovateľné sekcie. */
html body.fi-body .fi-sc-form .fi-section.fi-section:has(.be-ve-prekryv-znacka) > header.fi-section-header,
html body.fi-body .fi-sc-form .fi-section.fi-section:has(.be-ve-prekryv-znacka) > .fi-section-header {
display: none !important;
/* JS zbaľovateľných sekcií jej nastavuje display priamo - preto aj nulová výška. */
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
/* ==========================================================================
VIZUÁLNY EDITOR - NÁHĽADOVÝ REŽIM (Vojto 4. 10. 2026)
--------------------------------------------------------------------------
Sekcia bez kurzora = len náhľad obsahu ako na webe (ve-nahlad), bez
rámikov a hlavičiek. Kurzor nad sekciou alebo práca v nej (focus) =
sekcia sa orámuje a ukáže doterajšie ovládanie (hlavička, stĺpce, polia).
Záchytný bod pred touto zmenou: git tag ve-pred-nahladom-2026-10-04.
========================================================================== */
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena):not(.fi-collapsed) {
border-color: transparent !important;
background: transparent !important;
}
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena):not(.fi-collapsed) > .fi-fo-builder-item-header {
visibility: hidden;
}
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .fi-fo-builder-item-content > .fi-grid > .fi-grid-col:not(:has(.be-ve-nahlad)) {
display: none !important;
}
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-content > .fi-grid > .fi-grid-col:has(.be-ve-nahlad) {
display: none !important;
}
/* Kurzor nad sekciou (náhľad): rámik a okienko Upraviť ako na Frontende. */
.fi-body .be-ve-nahlad-obal {
position: relative;
border-radius: 6px;
outline: 1px dashed transparent;
outline-offset: 6px;
transition: outline-color 0.15s ease;
}
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena):hover .be-ve-nahlad-obal {
outline-color: #BFBFBF;
}
/* Čierna vrstva 70 % pod okienkom Upraviť (Vojto 5. 10. 2026, predtým biela)
a klik kdekoľvek na náhľad (ako Predvolené bloky) - otvorenie rieši
backend-formulare.js (data-be-ve-upravit-sekciu / .be-ve-nahlad-obal). */
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .be-ve-nahlad-obal {
cursor: pointer;
}
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .be-ve-nahlad-obal::after {
content: '';
position: absolute;
inset: 0;
z-index: 5;
border-radius: inherit;
background: rgba(0, 0, 0, .7);
opacity: 0;
pointer-events: none;
transition: opacity .15s ease;
}
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena):hover .be-ve-nahlad-obal::after {
opacity: 1;
}
.fi-body .be-ve-upravit-sekciu {
position: absolute;
top: 50%;
left: 50%;
z-index: 6;
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 14px 0 12px;
border: 0;
border-radius: 8px;
background: #FFFFFF;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
font-family: "Open Sans", sans-serif;
font-size: 15px;
color: #000000;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translate(-50%, -50%);
transition: opacity 0.15s ease, visibility 0.15s ease;
}
.fi-body .be-ve-upravit-sekciu::before {
content: "";
width: 22px;
height: 22px;
background: #000000;
-webkit-mask: url("/icons/upravit.svg") center / contain no-repeat;
mask: url("/icons/upravit.svg") center / contain no-repeat;
}
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena):hover .be-ve-upravit-sekciu,
.fi-body .be-ve-upravit-sekciu:focus-visible {
opacity: 1;
visibility: visible;
}
.fi-body .be-ve-upravit-sekciu:hover {
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.28);
}
/* Náhľad - písmo Text a nadpisy z Nastavenia → Písma (premenné z
PismaFrontendu, len v náhľade - nemení písmo administrácie). */
.fi-body :is(.be-ve-nahlad, .be-ve-box-nahlad) {
font-family: var(--pismo-text-rodina, inherit);
font-size: var(--pismo-text-velkost, 15px);
font-weight: var(--pismo-text-vaha, 400);
color: var(--pismo-text-farba, #000000);
line-height: 1.5;
}
.fi-body :is(.be-ve-nahlad, .be-ve-box-nahlad) h1 { font-family: var(--pismo-h1-rodina); font-size: var(--pismo-h1-velkost); font-weight: var(--pismo-h1-vaha); color: var(--pismo-h1-farba); margin: 0 0 .5em; }
.fi-body :is(.be-ve-nahlad, .be-ve-box-nahlad) h2 { font-family: var(--pismo-h2-rodina); font-size: var(--pismo-h2-velkost); font-weight: var(--pismo-h2-vaha); color: var(--pismo-h2-farba); margin: 0 0 .5em; }
.fi-body :is(.be-ve-nahlad, .be-ve-box-nahlad) h3 { font-family: var(--pismo-h3-rodina); font-size: var(--pismo-h3-velkost); font-weight: var(--pismo-h3-vaha); color: var(--pismo-h3-farba); margin: 0 0 .5em; }
.fi-body :is(.be-ve-nahlad, .be-ve-box-nahlad) h4 { font-family: var(--pismo-h4-rodina); font-size: var(--pismo-h4-velkost); font-weight: var(--pismo-h4-vaha); color: var(--pismo-h4-farba); margin: 0 0 .5em; }
.fi-body :is(.be-ve-nahlad, .be-ve-box-nahlad) p { margin: 0 0 1em; }
.fi-body :is(.be-ve-nahlad, .be-ve-box-nahlad) ul, .fi-body :is(.be-ve-nahlad, .be-ve-box-nahlad) ol { margin: 0 0 1em; padding-left: 1.4em; list-style: revert; }
.fi-body .be-ve-nahlad a { color: var(--pismo-odkaz-farba, #2B2BD9); text-decoration: underline; }
.fi-body .be-ve-nahlad-prazdne {
margin: 0;
padding: 20px;
border: 1px dashed #DDDDDD;
border-radius: 6px;
font-family: "Open Sans", sans-serif;
font-size: 13px;
text-align: center;
color: #9A9A9A;
}
/* Sivé plusy Pridať (nad prvou sekciou aj medzi sekciami) zatiaľ skryté -
kedy sa majú zobrazovať, upresní Vojto (4. 10. 2026). Sekcie sa pridávajú
z panela „Zvoľte si obsahový prvok“ dole. */
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn,
.fi-body .be-ve-hlavicka-plus {
display: none !important;
}
/* Plus nad sekciou len pri kurzore nad ňou (Vojto 4. 10. 2026): pred prvou
sekciou plus v hlavičke editora, inak plus pred danou sekciou. Ostane aj
pri kurzore na samotnom pluse a pri otvorenom výbere sekcie. */
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn:has(+ .fi-fo-builder-item:hover),
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn:hover,
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn:has([aria-expanded="true"]) {
display: flex !important;
}
.fi-body .fi-section-content:has(.be-ve .fi-fo-builder-items > .fi-fo-builder-item:first-child:hover) .be-ve-hlavicka-plus,
.fi-body .be-ve-hlavicka-plus:hover,
.fi-body .be-ve-hlavicka-plus:has(.be-ve-hlavicka-vyber:not([style*="display: none"])) {
display: block !important;
}
/* ==========================================================================
LIŠTA SEKCIE NA HORNEJ HRANE (Vojto 4. 10. 2026)
--------------------------------------------------------------------------
Pridať - Menu - Zoradiť - Uložiť: biele štvorčeky 40 px s ikonou
(ako plus), 10 px od seba, v strede hornej hrany sekcie; popis v bubline
pri prejdení myšou. Pri kurzore nad sekciou alebo pri otvorenej sekcii;
Uložiť (zavrieť a uložiť úpravy) len pri otvorenej.
========================================================================== */
.fi-body .be-ve .fi-fo-builder-item {
position: relative;
}
.fi-body .be-ve .fi-fo-builder-item-header {
position: static !important;
}
/* Plus - prvý zľava: skupina 4 x 40 + 3 x 10 = 190 px na stred. */
.fi-body .be-ve .fi-fo-builder-add-between-items,
.fi-body .be-ve-plus-sive {
margin-left: -75px !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn:has(+ .fi-fo-builder-item.be-ve-otvorena),
.fi-body .fi-section-content:has(.be-ve .fi-fo-builder-items > .fi-fo-builder-item.be-ve-otvorena:first-child) .be-ve-hlavicka-plus {
display: flex !important;
}
.fi-body .be-ve .fi-fo-builder-item-header-start-actions > li:first-child,
.fi-body .be-ve .fi-fo-builder-item-header-end-actions > li:has([wire\:click*="'clone'"]),
.fi-body .be-ve .fi-fo-builder-item-header-end-actions > li:has(.be-ve-zavriet-sekciu) {
position: absolute !important;
top: -20px;
z-index: 4;
display: none !important;
visibility: visible !important;
}
.fi-body .be-ve .fi-fo-builder-item-header-end-actions > li:has([wire\:click*="'clone'"]) { left: calc(50% - 45px); }
.fi-body .be-ve .fi-fo-builder-item-header-start-actions > li:first-child { left: calc(50% + 5px); }
.fi-body .be-ve .fi-fo-builder-item-header-end-actions > li:has(.be-ve-zavriet-sekciu) { left: calc(50% + 55px); }
.fi-body .be-ve .fi-fo-builder-item:is(:hover, .be-ve-otvorena) .fi-fo-builder-item-header-start-actions > li:first-child,
.fi-body .be-ve .fi-fo-builder-item:is(:hover, .be-ve-otvorena) .fi-fo-builder-item-header-end-actions > li:has([wire\:click*="'clone'"]),
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-zavriet-sekciu) {
display: flex !important;
}
.fi-body .be-ve .fi-fo-builder-item-header :is([x-sortable-handle], [wire\:click*="'clone'"], .be-ve-zavriet-sekciu) {
position: relative;
width: 40px !important;
height: 40px !important;
padding: 0 !important;
border-radius: 8px !important;
background: #FFFFFF !important;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12) !important;
overflow: visible !important;
}
.fi-body .be-ve .fi-fo-builder-item-header :is([x-sortable-handle], [wire\:click*="'clone'"], .be-ve-zavriet-sekciu) > * {
display: none !important;
}
.fi-body .be-ve .fi-fo-builder-item-header :is([x-sortable-handle], [wire\:click*="'clone'"], .be-ve-zavriet-sekciu)::before {
content: "";
display: block;
width: 24px !important;
height: 24px !important;
margin: auto;
background: #E5E5E5 !important;
-webkit-mask: var(--be-ve-ikona) center / contain no-repeat !important;
mask: var(--be-ve-ikona) center / contain no-repeat !important;
}
.fi-body .be-ve .fi-fo-builder-item-header .be-ve-zavriet-sekciu {
--be-ve-ikona: url("/icons/ulozit.svg");
}
.fi-body .be-ve .fi-fo-builder-item-header :is([x-sortable-handle], [wire\:click*="'clone'"], .be-ve-zavriet-sekciu):hover::before {
background: #000000 !important;
}
/* Bublina s popisom (aria-label akcie Filamentu). */
.fi-body .be-ve .fi-fo-builder-item-header :is([x-sortable-handle], [wire\:click*="'clone'"], .be-ve-zavriet-sekciu)::after {
content: attr(aria-label);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
z-index: 10;
padding: 5px 10px;
border-radius: 6px;
background: #000000;
font-size: 12px;
line-height: 1.3;
color: #FFFFFF;
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateX(-50%);
transition: opacity 0.15s ease;
}
.fi-body .be-ve .fi-fo-builder-item-header :is([x-sortable-handle], [wire\:click*="'clone'"], .be-ve-zavriet-sekciu):hover::after {
opacity: 1;
visibility: visible;
}
/* Bez hlavičky sekcie (Vojto 4. 10. 2026): sivý pás zrušený, stĺpce cez
celú plochu sekcie od okraja po okraj; názov sekcie ako biely štítok
na hornej hrane pred ikonou Pridať. */
.fi-body .be-ve .fi-fo-builder-item > .fi-fo-builder-item-header {
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
visibility: visible !important;
}
.fi-body .be-ve .fi-fo-builder-item .fi-fo-builder-item-content {
padding: 0 !important;
}
.fi-body .be-ve .fi-fo-builder-item-header-label {
position: absolute !important;
top: -20px;
left: calc(50% - 105px);
z-index: 4;
display: none !important;
height: 40px;
padding: 0 14px !important;
border-radius: 8px;
background: #FFFFFF;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
line-height: 40px;
white-space: nowrap;
transform: translateX(-100%);
}
.fi-body .be-ve .fi-fo-builder-item:is(:hover, .be-ve-otvorena) .fi-fo-builder-item-header-label {
display: block !important;
}
/* Lišta sekcie (názov, Pridať, Menu, Zoradiť, Uložiť) len pri otvorenej
sekcii; sekcie bez medzier - odstupy len z Dizajnu sekcie, ako na webe
(Vojto 4. 10. 2026). */
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .fi-fo-builder-item-header-label,
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .fi-fo-builder-item-header-start-actions > li,
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .fi-fo-builder-item-header-end-actions > li {
display: none !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn:has(+ .fi-fo-builder-item:not(.be-ve-otvorena)):not(:has([aria-expanded="true"])) {
display: none !important;
}
.fi-body .fi-section-content:not(:has(.be-ve .fi-fo-builder-items > .fi-fo-builder-item.be-ve-otvorena:first-child)) .be-ve-hlavicka-plus:not(:has(.be-ve-hlavicka-vyber:not([style*="display: none"]))) {
display: none !important;
}
.fi-body .be-ve .fi-fo-builder-items {
gap: 0 !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn {
margin: 0 !important;
}
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) {
border-width: 0 !important;
}
.fi-body .be-ve-nahlad-obal {
outline-offset: 0;
}
/* Otvorená sekcia - odstup okolo, aby lišta na hornej hrane neprekrývala
susednú sekciu ani hlavičky stĺpcov. */
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena {
margin: 30px 0 10px;
}
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-content {
padding-top: 30px !important;
}
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .fi-fo-builder-item-header-start-actions > li:first-child,
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .fi-fo-builder-item-header-end-actions > li:has([wire\:click*="'clone'"]),
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .fi-fo-builder-item-header-end-actions > li:has(.be-ve-zavriet-sekciu) {
display: none !important;
}
/* Náhľad ako na webe - posledný odsek obsahu bez spodného okraja. */
.fi-body .be-ve-nahlad .ve-obsah > :first-child { margin-top: 0; }
.fi-body .be-ve-nahlad .ve-obsah > :last-child { margin-bottom: 0; }
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .fi-fo-builder-item-content,
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .fi-fo-builder-item-content > .fi-grid {
padding: 0 !important;
row-gap: 0 !important;
}
/* Sekcie na sebe bez medzery (okraj medzi položkami Builderu). */
.fi-body .be-ve .fi-fo-builder-items > .fi-fo-builder-item:not(.be-ve-otvorena) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Hlavička stránky H1 nad prvou sekciou - písmo H1 z Nastavenia → Písma,
ako na webe (stranky/show: st-nadpis pismo-h1). */
.fi-body .be-ve-h1 {
align-self: stretch;
margin: 0 0 20px;
font-family: var(--pismo-h1-rodina, inherit);
font-size: var(--pismo-h1-velkost, 28px);
font-weight: var(--pismo-h1-vaha, 700);
line-height: 1.2;
color: var(--pismo-h1-farba, #000000);
text-align: left;
}
/* Otvorená sekcia: lišta celá nad sekciou (10 px nad hranou), rovnako
Pridať; nad sekciou 60 px (lišta + 2 x 10), pod ňou 20 px. */
.fi-body .be-ve .fi-fo-builder-items > .fi-fo-builder-item.be-ve-otvorena {
margin: 60px 0 20px !important;
}
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-content {
padding-top: 0 !important;
}
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-label,
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-start-actions > li:first-child,
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li {
top: -51px !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn:has(+ .fi-fo-builder-item.be-ve-otvorena) .fi-fo-builder-add-between-items {
top: 10px !important;
}
/* Zarovnanie lišty do jednej výšky (merané v prehliadači). */
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-start-actions > li:first-child,
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li {
height: 40px;
align-items: flex-start !important;
}
.fi-body .be-ve .fi-fo-builder-add-between-items-ctn:has(+ .fi-fo-builder-item.be-ve-otvorena) .fi-fo-builder-add-between-items {
top: 22px !important;
}
.fi-body .fi-section-content:has(.be-ve .fi-fo-builder-items > .fi-fo-builder-item.be-ve-otvorena:first-child) .be-ve-plus-sive {
top: 30px !important;
}
/* Ikony lišty bez záporného okraja tlačidla Filamentu (fi-icon-btn). */
.fi-body .be-ve .fi-fo-builder-item-header :is([x-sortable-handle], [wire\:click*="'clone'"], .be-ve-zavriet-sekciu) {
margin: 0 !important;
}
/* ==========================================================================
LIŠTA SEKCIE BEZ MENU (Vojto 4. 10. 2026): názov, Pridať sekciu,
Duplikovať, Zoradiť ťahaním, Presunúť hore, Presunúť dole, Vymazať,
Dizajn sekcie, Uložiť - 8 ikon x 40 px + 7 x 10 px = 390 px na stred.
Zbaliť / Zbaliť všetky sekcie skryté.
========================================================================== */
.fi-body .be-ve .fi-fo-builder-add-between-items,
.fi-body .be-ve-plus-sive {
margin-left: -175px !important;
}
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-label {
left: calc(50% - 205px) !important;
}
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena :is(.fi-fo-builder-item-header-start-actions, .fi-fo-builder-item-header-end-actions) > li:is(
:has([wire\:click*="'clone'"]), :has([x-sortable-handle]), :has([wire\:click*="'moveUp'"]),
:has([wire\:click*="'moveDown'"]), :has([wire\:click*="'delete'"]), :has(.be-ve-dizajn-sekcie), :has(.be-ve-zavriet-sekciu)) {
position: absolute !important;
top: -51px !important;
z-index: 4;
display: flex !important;
height: 40px;
align-items: flex-start !important;
visibility: visible !important;
}
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has([wire\:click*="'clone'"]) { left: calc(50% - 145px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has([x-sortable-handle]) { left: calc(50% - 95px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has([wire\:click*="'moveUp'"]) { left: calc(50% - 45px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has([wire\:click*="'moveDown'"]) { left: calc(50% + 5px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has([wire\:click*="'delete'"]) { left: calc(50% + 55px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-dizajn-sekcie) { left: calc(50% + 105px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-zavriet-sekciu) { left: calc(50% + 155px) !important; }
.fi-body .be-ve .fi-fo-builder-item-header :is([x-sortable-handle], [wire\:click*="'clone'"], [wire\:click*="'moveUp'"], [wire\:click*="'moveDown'"], [wire\:click*="'delete'"], .be-ve-dizajn-sekcie, .be-ve-zavriet-sekciu) {
position: relative;
width: 40px !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 8px !important;
background: #FFFFFF !important;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12) !important;
overflow: visible !important;
}
.fi-body .be-ve .fi-fo-builder-item-header :is([wire\:click*="'moveUp'"], [wire\:click*="'moveDown'"], [wire\:click*="'delete'"], .be-ve-dizajn-sekcie) > * {
display: none !important;
}
.fi-body .be-ve .fi-fo-builder-item-header :is([wire\:click*="'moveUp'"], [wire\:click*="'moveDown'"], [wire\:click*="'delete'"], .be-ve-dizajn-sekcie)::before {
content: "";
display: block;
width: 24px !important;
height: 24px !important;
margin: auto;
background: #E5E5E5 !important;
-webkit-mask: var(--be-ve-ikona) center / contain no-repeat !important;
mask: var(--be-ve-ikona) center / contain no-repeat !important;
}
.fi-body .be-ve .fi-fo-builder-item-header [wire\:click*="'clone'"] { --be-ve-ikona: url("/icons/duplikuj.svg") !important; }
.fi-body .be-ve .fi-fo-builder-item-header [wire\:click*="'moveUp'"] { --be-ve-ikona: url("/icons/poziciu-vyssie.svg"); }
.fi-body .be-ve .fi-fo-builder-item-header [wire\:click*="'moveDown'"] { --be-ve-ikona: url("/icons/poziciu-nizsie.svg"); }
.fi-body .be-ve .fi-fo-builder-item-header [wire\:click*="'delete'"] { --be-ve-ikona: url("/icons/vymazat.svg"); }
.fi-body .be-ve .fi-fo-builder-item-header .be-ve-dizajn-sekcie { --be-ve-ikona: url("/icons/nastavenia.svg"); }
.fi-body .be-ve .fi-fo-builder-item-header [wire\:click*="'delete'"]::before {
background: #E5E5E5 !important;
-webkit-mask: var(--be-ve-ikona) center / contain no-repeat !important;
mask: var(--be-ve-ikona) center / contain no-repeat !important;
}
.fi-body .be-ve .fi-fo-builder-item-header :is([wire\:click*="'moveUp'"], [wire\:click*="'moveDown'"], [wire\:click*="'delete'"], .be-ve-dizajn-sekcie):not(:disabled):hover::before {
background: #000000 !important;
}
.fi-body .be-ve .fi-fo-builder-item-header :is([wire\:click*="'moveUp'"], [wire\:click*="'moveDown'"]):disabled {
opacity: 0.45;
cursor: default;
}
.fi-body .be-ve .fi-fo-builder-item-header :is([wire\:click*="'moveUp'"], [wire\:click*="'moveDown'"], [wire\:click*="'delete'"], .be-ve-dizajn-sekcie)::after {
content: attr(aria-label);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
z-index: 10;
padding: 5px 10px;
border-radius: 6px;
background: #000000;
font-size: 12px;
line-height: 1.3;
color: #FFFFFF;
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateX(-50%);
}
.fi-body .be-ve .fi-fo-builder-item-header :is([wire\:click*="'moveUp'"], [wire\:click*="'moveDown'"], [wire\:click*="'delete'"], .be-ve-dizajn-sekcie):hover::after {
opacity: 1;
visibility: visible;
}
/* Zbaliť všetky sekcie a zbalenie sekcie skryté. */
.fi-body .be-ve-hlavicka-odkaz {
display: none !important;
}
/* Tlačidlo Vizuálny editor pod Názvom stránky. */
.fi-body .fi-btn.be-tlacidlo-ve--formular {
display: inline-flex;
align-items: center;
gap: 10px;
height: 44px;
padding: 0 18px;
border: 0;
border-radius: 8px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
/* Lišta sekcie - ikony čierne, aby boli dobre vidieť; názov sekcie ako
biely štítok pred Pridať (Vojto 4. 10. 2026). */
.fi-body .be-ve .fi-fo-builder-item-header :is([x-sortable-handle], [wire\:click*="'clone'"], [wire\:click*="'moveUp'"], [wire\:click*="'moveDown'"], [wire\:click*="'delete'"], .be-ve-dizajn-sekcie, .be-ve-zavriet-sekciu)::before,
.fi-body .be-ve .fi-fo-builder-add-between-items .fi-btn::before,
.fi-body .be-ve-plus-sive::before {
background: #000000 !important;
}
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-label {
height: 40px !important;
padding: 0 14px !important;
border-radius: 8px !important;
background: #FFFFFF !important;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12) !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 40px !important;
color: #000000 !important;
}
/* ==========================================================================
NÁZOV SEKCIE A LIŠTA POD SEKCIOU (Vojto 4. 10. 2026)
========================================================================== */
.fi-body .be-ve .fi-fo-builder-item-header-label {
display: none !important;
}
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .fi-fo-builder-item-header-end-actions > li:is(:has(.be-ve-nazov-sekcie), :has(.be-ve-dole)) {
display: none !important;
}
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:is(:has(.be-ve-nazov-sekcie), :has(.be-ve-dole)) {
position: absolute !important;
z-index: 4;
display: flex !important;
height: 40px;
align-items: flex-start !important;
visibility: visible !important;
}
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-nazov-sekcie) {
top: -51px !important;
left: calc(50% - 205px) !important;
transform: translateX(-100%);
}
.fi-body .be-ve .be-ve-nazov-sekcie {
height: 40px !important;
padding: 0 14px !important;
border-radius: 8px !important;
background: #FFFFFF !important;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #000000 !important;
text-decoration: none !important;
white-space: nowrap;
cursor: default !important;
pointer-events: none;
}
.fi-body .be-ve .be-ve-nazov-sekcie .fi-icon,
.fi-body .be-ve .be-ve-nazov-sekcie .fi-loading-indicator {
display: none !important;
}
/* Lišta pod sekciou - 11 px pod spodnou hranou, rovnaké poradie bez názvu. */
.fi-body .be-ve .fi-fo-builder-items > .fi-fo-builder-item.be-ve-otvorena {
margin-bottom: 60px !important;
}
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-dole) { top: calc(100% + 11px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-dole--pridat) { left: calc(50% - 195px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-dole--duplikovat) { left: calc(50% - 145px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-dole--zoradit) { left: calc(50% - 95px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-dole--hore) { left: calc(50% - 45px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-dole--dole) { left: calc(50% + 5px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-dole--vymazat) { left: calc(50% + 55px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-dole--dizajn) { left: calc(50% + 105px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-dole--ulozit) { left: calc(50% + 155px) !important; }
.fi-body .be-ve .fi-fo-builder-item-header .be-ve-dole {
position: relative;
width: 40px !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 8px !important;
background: #FFFFFF !important;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12) !important;
overflow: visible !important;
}
.fi-body .be-ve .fi-fo-builder-item-header .be-ve-dole > * {
display: none !important;
}
.fi-body .be-ve .fi-fo-builder-item-header .be-ve-dole::before {
content: "";
display: block;
width: 24px;
height: 24px;
margin: auto;
background: #000000;
-webkit-mask: var(--be-ve-ikona) center / contain no-repeat;
mask: var(--be-ve-ikona) center / contain no-repeat;
}
.fi-body .be-ve .be-ve-dole--pridat { --be-ve-ikona: url("/icons/pridat-b.svg"); }
.fi-body .be-ve .be-ve-dole--duplikovat { --be-ve-ikona: url("/icons/duplikuj.svg"); }
.fi-body .be-ve .be-ve-dole--zoradit { --be-ve-ikona: url("/icons/zoradit-tahanim-krizik.svg"); cursor: grab; }
.fi-body .be-ve .be-ve-dole--hore { --be-ve-ikona: url("/icons/poziciu-vyssie.svg"); }
.fi-body .be-ve .be-ve-dole--dole { --be-ve-ikona: url("/icons/poziciu-nizsie.svg"); }
.fi-body .be-ve .be-ve-dole--vymazat { --be-ve-ikona: url("/icons/vymazat.svg"); }
.fi-body .be-ve .be-ve-dole--dizajn { --be-ve-ikona: url("/icons/nastavenia.svg"); }
.fi-body .be-ve .be-ve-dole--ulozit { --be-ve-ikona: url("/icons/ulozit.svg"); }
/* Presunúť hore / dole nedostupné (prvá / posledná sekcia) aj dole. */
.fi-body .be-ve .fi-fo-builder-items > .fi-fo-builder-item:first-child .be-ve-dole--hore,
.fi-body .be-ve .fi-fo-builder-items > .fi-fo-builder-item:last-child .be-ve-dole--dole {
opacity: 0.45;
cursor: default;
}
.fi-body .be-ve .fi-fo-builder-item-header .be-ve-dole::after {
content: attr(aria-label);
position: absolute;
top: calc(100% + 8px);
left: 50%;
z-index: 10;
padding: 5px 10px;
border-radius: 6px;
background: #000000;
font-size: 12px;
line-height: 1.3;
color: #FFFFFF;
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateX(-50%);
}
.fi-body .be-ve .fi-fo-builder-item-header .be-ve-dole:hover::after {
opacity: 1;
visibility: visible;
}
/* Zoradiť pod sekciou - prebije umiestnenie horného úchytu (x-sortable-handle). */
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-dole--zoradit) {
top: calc(100% + 11px) !important;
left: calc(50% - 95px) !important;
}
/* Stĺpce bez vnútorného odsadenia - obsah od okraja po okraj stĺpca, ako
na webe (odsadenie len z Dizajnu stĺpca); obrázok cez celú plochu bez
rámika a tieňa (Vojto 4. 10. 2026). */
.fi-body .be-ve .be-ve-box > .fi-grid > .fi-grid-col:not(:first-child),
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-item-content > .fi-grid > .fi-grid-col:not(:first-child) {
padding: 0 !important;
}
.fi-body .be-ve .be-pole-media[data-be-nadpis]:not(.be-media-viac) .fi-fo-file-upload-input-ctn:has(.filepond--item) {
max-width: none !important;
margin: 0 !important;
}
.fi-body .be-ve .be-pole-media[data-be-nadpis]:not(.be-media-viac) .filepond--item,
.fi-body .be-ve .be-pole-media[data-be-nadpis]:not(.be-media-viac) .filepond--item-panel,
.fi-body .be-ve .be-pole-media[data-be-nadpis]:not(.be-media-viac) .filepond--image-preview-wrapper,
.fi-body .be-ve .be-pole-media[data-be-nadpis]:not(.be-media-viac) .filepond--image-preview {
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.fi-body .be-ve .be-pole-media[data-be-nadpis]:not(.be-media-viac) .filepond--image-preview-wrapper {
inset: 0 !important;
margin: 0 !important;
}
/* Bez medzery medzi hlavičkou stĺpca a obsahom. */
.fi-body .be-ve .be-ve-box > .fi-grid,
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-item-content > .fi-grid {
gap: 0 !important;
}
/* Popup Dizajn - nákres vrátane popisov okraja pod / nad ním (popisy sú
mimo obdĺžnika), medzery 20 px (Vojto 4. 10. 2026). */
.be-ve-nakres {
padding: 24px 0 20px !important;
}
/* Ikona Uložiť v lište sekcie zelená #80BA3A (Vojto 4. 10. 2026). */
.fi-body .be-ve .fi-fo-builder-item-header .be-ve-zavriet-sekciu::before,
.fi-body .be-ve .fi-fo-builder-item-header .be-ve-dole--ulozit::before {
background: #80BA3A !important;
}
.fi-body .be-ve-dizajn-okno .fi-modal-footer {
padding-top: 18px !important;
}
/* Poradie ikon lišty (Vojto 4. 10. 2026): Pridať, Dizajn, Duplikovať,
Vymazať, Presunúť hore, Presunúť dole, Zoradiť, Uložiť. */
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-dizajn-sekcie),
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-dole--dizajn) { left: calc(50% - 145px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has([wire\:click*="'clone'"]),
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-dole--duplikovat) { left: calc(50% - 95px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has([wire\:click*="'delete'"]),
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-dole--vymazat) { left: calc(50% - 45px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has([wire\:click*="'moveUp'"]),
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-dole--hore) { left: calc(50% + 5px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has([wire\:click*="'moveDown'"]),
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-dole--dole) { left: calc(50% + 55px) !important; }
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-start-actions > li:has([x-sortable-handle]),
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-dole--zoradit) { left: calc(50% + 105px) !important; }
/* Uložiť zostáva zelené aj pri prejdení myšou. */
html body.fi-body .be-ve .fi-fo-builder-item-header .be-ve-zavriet-sekciu::before,
html body.fi-body .be-ve .fi-fo-builder-item-header .be-ve-zavriet-sekciu:hover::before,
html body.fi-body .be-ve .fi-fo-builder-item-header .be-ve-dole--ulozit::before,
html body.fi-body .be-ve .fi-fo-builder-item-header .be-ve-dole--ulozit:hover::before {
background: #80BA3A !important;
}
/* Upravovaná sekcia bez celkového rámika - rámik majú len stĺpce (Vojto 4. 10. 2026). */
html body.fi-body .be-ve .fi-fo-builder-items > .fi-fo-builder-item.be-ve-otvorena {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* Pri otvorenom vizuálnom editore bez prilepených hlavičiek sekcií
formulára (zásobník pri scrollovaní) - Vojto 4. 10. 2026. */
body:has(.be-ve-prekryv-znacka) .be-sekcie-zasobnik {
display: none !important;
}
/* Mobil (do 767 px): lišta sekcie po 4 ikonách v dvoch riadkoch nad aj pod
sekciou, názov sekcie nad nimi (Vojto 5. 10. 2026). */
@media (max-width: 767px) {
html body.fi-body .be-ve .fi-fo-builder-items > .fi-fo-builder-item.be-ve-otvorena { margin: 160px 0 110px !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-nazov-sekcie) { top: -151px !important; left: 50% !important; transform: translateX(-50%) !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-dole--pridat) { left: calc(50% - 95px + 0px) !important; top: calc(100% + 11px) !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-dizajn-sekcie) { left: calc(50% - 95px + 50px) !important; top: -101px !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-dole--dizajn) { left: calc(50% - 95px + 50px) !important; top: calc(100% + 11px) !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has([wire\:click*="'clone'"]) { left: calc(50% - 95px + 100px) !important; top: -101px !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-dole--duplikovat) { left: calc(50% - 95px + 100px) !important; top: calc(100% + 11px) !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has([wire\:click*="'delete'"]) { left: calc(50% - 95px + 150px) !important; top: -101px !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-dole--vymazat) { left: calc(50% - 95px + 150px) !important; top: calc(100% + 11px) !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has([wire\:click*="'moveUp'"]) { left: calc(50% - 95px + 0px) !important; top: -51px !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-dole--hore) { left: calc(50% - 95px + 0px) !important; top: calc(100% + 61px) !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has([wire\:click*="'moveDown'"]) { left: calc(50% - 95px + 50px) !important; top: -51px !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-dole--dole) { left: calc(50% - 95px + 50px) !important; top: calc(100% + 61px) !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has([x-sortable-handle]) { left: calc(50% - 95px + 100px) !important; top: -51px !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-dole--zoradit) { left: calc(50% - 95px + 100px) !important; top: calc(100% + 61px) !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-zavriet-sekciu) { left: calc(50% - 95px + 150px) !important; top: -51px !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-dole--ulozit) { left: calc(50% - 95px + 150px) !important; top: calc(100% + 61px) !important; }
/* Pridať nad sekciou - prvé miesto prvého riadka. */
html body.fi-body .be-ve .fi-fo-builder-add-between-items,
html body.fi-body .be-ve-plus-sive { margin-left: -75px !important; }
html body.fi-body .be-ve .fi-fo-builder-add-between-items-ctn:has(+ .fi-fo-builder-item.be-ve-otvorena) .fi-fo-builder-add-between-items { top: 72px !important; }
html body.fi-body .fi-section-content:has(.be-ve .fi-fo-builder-items > .fi-fo-builder-item.be-ve-otvorena:first-child) .be-ve-plus-sive { top: 80px !important; }
}
@media (max-width: 767px) {
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena :is(.fi-fo-builder-item-header-start-actions, .fi-fo-builder-item-header-end-actions) > li:has(.be-ve-dizajn-sekcie) { top: -101px !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena :is(.fi-fo-builder-item-header-start-actions, .fi-fo-builder-item-header-end-actions) > li:has([wire\:click*="'clone'"]) { top: -101px !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena :is(.fi-fo-builder-item-header-start-actions, .fi-fo-builder-item-header-end-actions) > li:has([wire\:click*="'delete'"]) { top: -101px !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena :is(.fi-fo-builder-item-header-start-actions, .fi-fo-builder-item-header-end-actions) > li:has([wire\:click*="'moveUp'"]) { top: -51px !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena :is(.fi-fo-builder-item-header-start-actions, .fi-fo-builder-item-header-end-actions) > li:has([wire\:click*="'moveDown'"]) { top: -51px !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena :is(.fi-fo-builder-item-header-start-actions, .fi-fo-builder-item-header-end-actions) > li:has([x-sortable-handle]):not(:has(.be-ve-dole)) { top: -51px !important; }
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena :is(.fi-fo-builder-item-header-start-actions, .fi-fo-builder-item-header-end-actions) > li:has(.be-ve-zavriet-sekciu) { top: -51px !important; }
}
@media (max-width: 767px) {
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena :is(.fi-fo-builder-item-header-start-actions, .fi-fo-builder-item-header-end-actions) > li:has([x-sortable-handle]):not(:has(.be-ve-dole)) {
left: calc(50% + 5px) !important;
}
}
/* Názov / typ sekcie pred Pridať ako text bez rámika (Vojto 5. 10. 2026). */
html body.fi-body .be-ve .be-ve-nazov-sekcie {
padding: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 40px !important;
}
/* Pôvodný názov bloku Filamentu skrytý - názov je v štítku be-ve-nazov-sekcie. */
html body.fi-body .be-ve .fi-fo-builder-item .fi-fo-builder-item-header > .fi-fo-builder-item-header-label {
display: none !important;
}
/* Mobil: nad lištou sekcie 40 px (názov sekcie malým textom v tejto medzere). */
@media (max-width: 767px) {
html body.fi-body .be-ve .fi-fo-builder-items > .fi-fo-builder-item.be-ve-otvorena {
margin-top: 87px !important;
}
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-nazov-sekcie) {
top: -127px !important;
height: 20px !important;
}
html body.fi-body .be-ve .be-ve-nazov-sekcie {
height: 20px !important;
font-size: 13px !important;
line-height: 20px !important;
}
html body.fi-body .be-ve .fi-fo-builder-add-between-items-ctn:has(+ .fi-fo-builder-item.be-ve-otvorena) .fi-fo-builder-add-between-items { top: -1px !important; }
html body.fi-body .fi-section-content:has(.be-ve .fi-fo-builder-items > .fi-fo-builder-item.be-ve-otvorena:first-child) .be-ve-plus-sive { top: 6px !important; }
}
/* Názov sekcie čierny vždy - aj vnútorný popis odkazu Filamentu, aj pri
hover a v tmavom režime prehliadača (inak biely text na bielom). */
html body.fi-body .be-ve .be-ve-nazov-sekcie,
html body.fi-body .be-ve .be-ve-nazov-sekcie *,
html body.fi-body .be-ve .be-ve-nazov-sekcie:hover,
html body.fi-body .be-ve .be-ve-nazov-sekcie:hover *,
html.dark body.fi-body .be-ve .be-ve-nazov-sekcie,
html.dark body.fi-body .be-ve .be-ve-nazov-sekcie * {
color: #000000 !important;
opacity: 1 !important;
visibility: visible !important;
text-decoration: none !important;
}
/* Názov sekcie ako pseudo-prvok z data-nazov (Safari nevykresľoval vnútro
odkazu Filamentu) - Vojto 5. 10. 2026. */
html body.fi-body .be-ve .be-ve-nazov-sekcie > * {
display: none !important;
}
html body.fi-body .be-ve .be-ve-nazov-sekcie::before {
content: attr(data-nazov);
display: block;
font-size: 15px;
font-weight: 400;
line-height: 40px;
color: #000000;
white-space: nowrap;
}
@media (max-width: 767px) {
html body.fi-body .be-ve .be-ve-nazov-sekcie::before {
font-size: 13px;
line-height: 20px;
}
}
/* Safari nevykreslil názov sekcie v li s transform - umiestnenie bez
transformácie: pravý okraj 10 px pred ikonou Pridať (Vojto 5. 10. 2026). */
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-nazov-sekcie) {
left: auto !important;
right: calc(50% + 205px) !important;
transform: none !important;
justify-content: flex-end;
}
/* Bublina popisu ikony nad susednými ikonami (mobil aj počítač). */
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header li:hover {
z-index: 30 !important;
}
@media (max-width: 767px) {
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .fi-fo-builder-item-header-end-actions > li:has(.be-ve-nazov-sekcie) {
left: 0 !important;
right: 0 !important;
justify-content: center;
}
}
/* ==========================================================================
NÁZOV SEKCIE A LIŠTA POD SEKCIOU - HTML (ve-lista), Vojto 5. 10. 2026
========================================================================== */
.fi-body .be-ve .fi-fo-builder-item .fi-fo-builder-item-content,
.fi-body .be-ve .fi-fo-builder-item .fi-fo-builder-item-content > .fi-grid,
.fi-body .be-ve .fi-fo-builder-item-content > .fi-grid > .fi-grid-col:has(> .fi-sc-component > .be-ve-lista),
.fi-body .be-ve .fi-fo-builder-item-content > .fi-grid > .fi-grid-col > .fi-sc-component:has(> .be-ve-lista) {
position: static !important;
}
.fi-body .be-ve .fi-fo-builder-item-content > .fi-grid > .fi-grid-col:has(> .fi-sc-component > .be-ve-lista) {
height: 0;
margin: 0 !important;
padding: 0 !important;
}
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .be-ve-lista {
display: none;
}
.fi-body .be-ve-lista-nazov {
position: absolute;
top: -51px;
right: calc(50% + 205px);
z-index: 4;
font-size: 15px;
line-height: 40px;
color: #000000;
white-space: nowrap;
}
.fi-body .be-ve-lista-dole {
position: absolute;
top: calc(100% + 11px);
left: calc(50% - 195px);
z-index: 4;
display: grid;
grid-template-columns: repeat(8, 40px);
gap: 10px;
}
.fi-body .be-ve-lista-dole .be-ve-dole {
position: relative;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 8px;
background: #FFFFFF;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
cursor: pointer;
}
.fi-body .be-ve-lista-dole .be-ve-dole:hover { z-index: 30; }
.fi-body .be-ve-lista-dole .be-ve-dole::before {
content: "";
display: block;
width: 24px;
height: 24px;
margin: auto;
background: #000000;
-webkit-mask: var(--be-ve-ikona) center / contain no-repeat;
mask: var(--be-ve-ikona) center / contain no-repeat;
}
.fi-body .be-ve-lista-dole .be-ve-dole--ulozit::before { background: #80BA3A; }
.fi-body .be-ve-lista-dole .be-ve-dole::after {
content: attr(aria-label);
position: absolute;
top: calc(100% + 8px);
left: 50%;
z-index: 10;
padding: 5px 10px;
border-radius: 6px;
background: #000000;
font-size: 12px;
line-height: 1.3;
color: #FFFFFF;
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateX(-50%);
}
.fi-body .be-ve-lista-dole .be-ve-dole:hover::after { opacity: 1; visibility: visible; }
@media (max-width: 767px) {
.fi-body .be-ve-lista-nazov {
top: -127px;
left: 0;
right: 0;
font-size: 13px;
line-height: 20px;
text-align: center;
}
.fi-body .be-ve-lista-dole {
left: calc(50% - 95px);
grid-template-columns: repeat(4, 40px);
}
}
/* --- Nastavenia → Mailing → Predvolené bloky (Vojto 5. 10. 2026) -----------
Náhľad bloku - prerušovaný rámik ako plocha editora, obsah ako na
Frontende (css/stranka.css). Prejdením myšou ho prekryje 70 % čierna a v strede
sa ukáže tlačidlo Vizuálny editor; klik kdekoľvek otvorí editor. */
.fi-body .be-predvoleny-blok {
position: relative;
min-height: 84px; /* tlačidlo sa zmestí aj pri krátkom obsahu */
padding: 10px;
border: 1px dashed #CCCCCC;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
}
/* Prázdny obsah - sivý text v strede náhľadu (výška ako tlačidlo + okraj). */
.fi-body .be-predvoleny-blok--prazdny {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
}
.fi-body .be-predvoleny-blok-prazdny {
margin: 0;
font-size: 14px;
color: #9A9A9A;
text-align: center;
}
/* Pri prejdení myšou čierna vrstva 70 % cez náhľad (Vojto 5. 10. 2026),
tlačidlo nad ňou. */
.fi-body .be-predvoleny-blok::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: rgba(0, 0, 0, .7);
opacity: 0;
pointer-events: none;
transition: opacity .15s;
}
.fi-body .be-predvoleny-blok:hover::after {
opacity: 1;
}
.fi-body .be-predvoleny-blok .be-predvoleny-blok-tlacidlo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
z-index: 2;
transition: opacity .15s;
box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.fi-body .be-predvoleny-blok:hover .be-predvoleny-blok-tlacidlo,
.fi-body .be-predvoleny-blok:focus-within .be-predvoleny-blok-tlacidlo {
opacity: 1;
pointer-events: auto;
}
/* HTML editor v úzkom stĺpci (Vojto 5. 10. 2026): rozbalené ikony „…“ lišty
TinyMCE nesmie orezať box obsahu ani rám formulára. */
.fi-body .be-ve .be-ve-box:has(.tox-toolbar__overflow),
.fi-layout:has(.be-ve .tox-toolbar__overflow) {
overflow: visible !important;
}
.fi-body .be-ve .be-ve-box:has(.tox-toolbar__overflow),
.fi-body .be-ve .fi-grid-col:has(.tox-toolbar__overflow),
.fi-body .be-ve .fi-sc-component:has(.tox-toolbar__overflow) {
position: relative;
z-index: 40;
}
.fi-body .be-ve .html-editor-lista .tox-toolbar__overflow {
z-index: 40;
}
/* --- Vizuálny editor - Zobraziť kód (Vojto 5. 10. 2026) ---------------------
Vpravo hore na čiare rámika, vľavo od ikony „i“; popup s textovým poľom
(kód obsahu ako JSON, písmo s pevnou šírkou). */
.fi-body .be-ve-kod {
position: absolute;
top: -11px;
right: 44px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 6px;
border: 0;
background: #FFFFFF;
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 22px;
color: #000000;
cursor: pointer;
}
.fi-body .be-ve-kod:hover {
text-decoration: underline;
}
.fi-body .be-ve-kod-ikona {
width: 18px;
height: 18px;
}
.fi-body .be-ve-kod-okno .be-ve-kod-pole {
min-height: 420px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
font-size: 13px !important;
line-height: 1.45 !important;
white-space: pre;
tab-size: 4;
}
/* --- Vizuálny editor - tlačidlá v náhľade sekcie (Vojto 5. 10. 2026) --------
Upraviť, Vymazať, Presunúť ťahaním vedľa seba v strede náhľadu, viditeľné
pri prejdení myšou (nad čiernou vrstvou 70 %). */
.fi-body .be-ve-nahlad-tlacidla {
position: absolute;
top: 50%;
left: 50%;
z-index: 6;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
width: max-content;
max-width: calc(100% - 20px);
transform: translate(-50%, -50%);
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.15s ease;
}
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena):hover .be-ve-nahlad-tlacidla,
.fi-body .be-ve-nahlad-tlacidla:has(:focus-visible) {
opacity: 1;
visibility: visible;
}
.fi-body .be-ve-nahlad-tlacidla .be-ve-upravit-sekciu {
position: static;
transform: none;
opacity: 1;
visibility: inherit;
white-space: nowrap;
}
.fi-body .be-ve-nahlad-tlacidla .be-ve-nahlad-vymazat::before {
-webkit-mask-image: url("/icons/vymazat.svg");
mask-image: url("/icons/vymazat.svg");
}
.fi-body .be-ve-nahlad-tlacidla .be-ve-nahlad-presun {
cursor: grab;
}
.fi-body .be-ve-nahlad-tlacidla .be-ve-nahlad-presun::before {
-webkit-mask-image: url("/icons/zoradit-tahanim-krizik.svg");
mask-image: url("/icons/zoradit-tahanim-krizik.svg");
}
/* Otvorená sekcia (Vojto 5. 10. 2026): zatiaľ bez Vymazať, Presunúť hore,
Presunúť dole a Zoradiť ťahaním - v lište nad sekciou aj pod ňou. Zatvorená
sekcia ich má v náhľade (Vymazať, Zoradiť). Uložiť sa posunie hneď za
Duplikovať (lišta pod sekciou je grid, zúži sa sama). */
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena > .fi-fo-builder-item-header li:has([wire\:click*="'delete'"], [wire\:click*="'moveUp'"], [wire\:click*="'moveDown'"], [x-sortable-handle]),
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .be-ve-lista :is(.be-ve-dole--vymazat, .be-ve-dole--hore, .be-ve-dole--dole, .be-ve-dole--zoradit) {
display: none !important;
}
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-zavriet-sekciu) {
left: calc(50% - 45px) !important;
}
@media (max-width: 767px) {
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-zavriet-sekciu) {
left: calc(50% - 95px + 150px) !important;
top: -101px !important;
}
}
.fi-body .be-ve-nahlad-tlacidla .be-ve-nahlad-duplikovat::before {
-webkit-mask-image: url("/icons/duplikuj.svg");
mask-image: url("/icons/duplikuj.svg");
}
/* Sekcia 1/1 doprava sa už nepridáva (Vojto 5. 10. 2026) - ani z výberu
Filamentu; existujúce sekcie tohto typu ostávajú. */
.fi-body .be-ve .fi-fo-builder-block-picker .fi-dropdown-list-item[wire\:click*="sekcia-1-doprava"] {
display: none !important;
}
/* --- Otvorená sekcia: len názov, Pridať a Uložiť na stred (Vojto 5. 10. 2026)
Dizajn sekcie a Duplikovať sú v náhľade sekcie (s Upraviť, Vymazať,
Zoradiť); lišta pod sekciou skrytá. --be-ve-nazov-w = šírka názvu
(backend-formulare.js). Skupina: názov + 10 + Pridať 40 + 10 + Uložiť 40. */
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena > .fi-fo-builder-item-header li:has(.be-ve-dizajn-sekcie, [wire\:click*="'clone'"]),
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .be-ve-lista-dole {
display: none !important;
}
html body.fi-body .be-ve .fi-fo-builder-items > .fi-fo-builder-item.be-ve-otvorena {
margin-bottom: 20px !important;
}
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .be-ve-lista-nazov {
right: auto !important;
left: calc(50% - (var(--be-ve-nazov-w, 80px) + 100px) / 2) !important;
}
html body.fi-body .be-ve .fi-fo-builder-add-between-items,
html body.fi-body .be-ve-plus-sive {
margin-left: calc(var(--be-ve-nazov-w, 80px) / 2 - 20px) !important;
}
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-zavriet-sekciu) {
left: calc(50% + var(--be-ve-nazov-w, 80px) / 2 + 10px) !important;
}
.fi-body .be-ve-nahlad-tlacidla .be-ve-nahlad-dizajn::before {
-webkit-mask-image: url("/icons/nastavenia.svg");
mask-image: url("/icons/nastavenia.svg");
}
/* Mobil: názov, Pridať a Uložiť v jednom riadku nad sekciou ako na počítači. */
@media (max-width: 767px) {
html body.fi-body .be-ve .fi-fo-builder-items > .fi-fo-builder-item.be-ve-otvorena {
margin-top: 70px !important;
}
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .be-ve-lista-nazov {
top: -51px !important;
right: auto !important;
font-size: 13px;
line-height: 40px;
white-space: nowrap;
}
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-zavriet-sekciu) {
top: -51px !important;
}
html body.fi-body .be-ve .fi-fo-builder-add-between-items-ctn:has(+ .fi-fo-builder-item.be-ve-otvorena) .fi-fo-builder-add-between-items {
translate: 0 4px;
}
html body.fi-body .fi-section-content:has(.be-ve .fi-fo-builder-items > .fi-fo-builder-item.be-ve-otvorena:first-child) .be-ve-plus-sive {
top: 39px !important;
}
}
/* Menu sekcie v náhľade (⋮) - len ikona, roletka .be-ve-menu ako pri stĺpci. */
.fi-body .be-ve-nahlad-tlacidla .be-ve-nahlad-menu {
width: 40px;
padding: 0;
justify-content: center;
}
.fi-body .be-ve-nahlad-tlacidla .be-ve-nahlad-menu::before {
-webkit-mask-image: url("/icons/menu-vertikalne.svg");
mask-image: url("/icons/menu-vertikalne.svg");
}
/* Otvorené menu sekcie (⋮) drží hover sekcie - vrstva, rámik, tlačidlá -
kým sa nevyberie položka alebo neklikne vedľa (Vojto 5. 10. 2026). */
.fi-body .be-ve .fi-fo-builder-item.be-ve-menu-aktivna:not(.be-ve-otvorena) .be-ve-nahlad-obal {
outline-color: #BFBFBF;
}
.fi-body .be-ve .fi-fo-builder-item.be-ve-menu-aktivna:not(.be-ve-otvorena) .be-ve-nahlad-obal::after,
.fi-body .be-ve .fi-fo-builder-item.be-ve-menu-aktivna:not(.be-ve-otvorena) .be-ve-nahlad-tlacidla {
opacity: 1;
visibility: visible;
}
/* --- Otvorená sekcia: bez Pridať, Uložiť s textom „Uložiť obsah“ ------------
(Vojto 5. 10. 2026). Skupina názov + 10 px + Uložiť na stred podľa
šírok --be-ve-nazov-w a --be-ve-ulozit-w (backend-formulare.js). */
html body.fi-body .be-ve .fi-fo-builder-add-between-items-ctn:has(+ .fi-fo-builder-item.be-ve-otvorena) .fi-fo-builder-add-between-items,
html body.fi-body .fi-section-content:has(.be-ve .fi-fo-builder-items > .fi-fo-builder-item.be-ve-otvorena:first-child) .be-ve-plus-sive {
display: none !important;
}
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .be-ve-lista-nazov {
left: calc(50% - (var(--be-ve-nazov-w, 80px) + 10px + var(--be-ve-ulozit-w, 150px)) / 2) !important;
}
html body.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena li:has(.be-ve-zavriet-sekciu) {
left: calc(50% - (var(--be-ve-nazov-w, 80px) + 10px + var(--be-ve-ulozit-w, 150px)) / 2 + var(--be-ve-nazov-w, 80px) + 10px) !important;
}
html body.fi-body .be-ve .fi-fo-builder-item-header .be-ve-zavriet-sekciu {
width: auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px;
padding: 0 14px 0 8px !important;
white-space: nowrap;
}
html body.fi-body .be-ve .fi-fo-builder-item-header .be-ve-zavriet-sekciu::before {
margin: 0 !important;
flex: none;
}
html body.fi-body .be-ve .fi-fo-builder-item-header .be-ve-zavriet-sekciu::after {
content: attr(aria-label) !important;
position: static !important;
display: block !important;
transform: none !important;
padding: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
color: #000000 !important;
font-family: "Open Sans", sans-serif;
font-size: 15px !important;
font-weight: 400;
line-height: 40px !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: none;
}
/* --- Náhľad sekcie s viacerými stĺpcami (Vojto 5. 10. 2026) ------------------
Čierna vrstva 70 % a tlačidlá pri každom stĺpci zvlášť (Upraviť, Zoradiť,
Zmeniť obsah, Menu). Tlačidlá celej sekcie (Upraviť, Zoradiť, Menu) sú pri
prejdení myšou na hornej hrane sekcie. */
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .be-ve-nahlad-obal--stlpce::after {
display: none;
}
.fi-body .be-ve .be-ve-nahlad-obal--stlpce .be-ve-nahlad-tlacidla {
top: 0;
z-index: 8;
/* Na stred hornej čiary sekcie (Vojto 5. 10. 2026). */
transform: translate(-50%, -50%);
}
.fi-body .be-ve .be-ve-n-stlpec {
position: relative;
}
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .be-ve-n-stlpec::after {
content: '';
position: absolute;
inset: 0;
z-index: 5;
background: rgba(0, 0, 0, .7);
opacity: 0;
pointer-events: none;
transition: opacity .15s ease;
}
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .be-ve-n-stlpec:is(:hover, .be-ve-menu-aktivna)::after {
opacity: 1;
}
.fi-body .be-ve .be-ve-stlpec-tlacidla {
position: absolute;
top: 50%;
left: 50%;
z-index: 6;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
width: max-content;
max-width: calc(100% - 16px);
transform: translate(-50%, -50%);
opacity: 0;
visibility: hidden;
transition: opacity .15s ease, visibility .15s ease;
}
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .be-ve-n-stlpec:is(:hover, .be-ve-menu-aktivna) > .be-ve-stlpec-tlacidla {
opacity: 1;
visibility: visible;
}
.fi-body .be-ve .be-ve-stlpec-tlacidla .be-ve-upravit-sekciu {
position: static;
transform: none;
opacity: 1;
visibility: inherit;
white-space: nowrap;
}
.fi-body .be-ve .be-ve-stlpec-tlacidla .be-ve-nahlad-zmenit::before {
background: #000000; /* ikona widgety.svg (Vojto 7. 10. 2026) */
-webkit-mask-image: url("/icons/widgety.svg");
mask-image: url("/icons/widgety.svg");
}
.fi-body .be-ve .be-ve-n-stlpec.je-ciel {
outline: 2px dashed #80BA3A;
outline-offset: -2px;
}
/* Ikony tlačidiel stĺpca - rovnaké ako pri sekcii. */
.fi-body .be-ve .be-ve-stlpec-tlacidla .be-ve-nahlad-presun {
cursor: grab;
}
.fi-body .be-ve .be-ve-stlpec-tlacidla .be-ve-nahlad-presun::before {
-webkit-mask-image: url("/icons/zoradit-tahanim-krizik.svg");
mask-image: url("/icons/zoradit-tahanim-krizik.svg");
}
.fi-body .be-ve .be-ve-stlpec-tlacidla .be-ve-nahlad-menu {
width: 40px;
padding: 0;
justify-content: center;
}
.fi-body .be-ve .be-ve-stlpec-tlacidla .be-ve-nahlad-menu::before {
-webkit-mask-image: url("/icons/menu-vertikalne.svg");
mask-image: url("/icons/menu-vertikalne.svg");
}
/* Kurzor na tlačidlách sekcie (alebo otvorené menu sekcie) - čierna vrstva
cez celú sekciu so stĺpcami (Vojto 5. 10. 2026). */
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .be-ve-nahlad-obal--stlpce:has(> .be-ve-nahlad-tlacidla:hover)::after,
.fi-body .be-ve .fi-fo-builder-item.be-ve-menu-aktivna:not(.be-ve-otvorena) .be-ve-nahlad-obal--stlpce::after {
display: block;
opacity: 1;
}
/* Sekcia so stĺpcami - bez Upraviť celej sekcie, upravuje sa po stĺpcoch
(Vojto 5. 10. 2026). */
.fi-body .be-ve .be-ve-nahlad-obal--stlpce > .be-ve-nahlad-tlacidla > [data-be-ve-upravit-sekciu] {
display: none;
}
/* Názov a šírka stĺpca nad tlačidlami stĺpca v náhľade (Vojto 5. 10. 2026). */
.fi-body .be-ve .be-ve-n-stlpec-nazov {
flex: 0 0 100%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: #FFFFFF;
text-align: center;
}
.fi-body .be-ve .be-ve-n-stlpec-nazov i {
font-style: normal;
font-weight: 400;
color: rgba(255, 255, 255, .7);
}
/* Názov sekcie pri tlačidlách sekcie (Vojto 5. 10. 2026): pri jednom stĺpci
biely text nad tlačidlami, pri sekcii so stĺpcami (tlačidlá na hornej
čiare) biela kartička pred Zoradiť. */
.fi-body .be-ve .be-ve-nahlad-nazov {
flex: 0 0 100%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: #FFFFFF;
text-align: center;
white-space: nowrap;
}
.fi-body .be-ve .be-ve-nahlad-obal--stlpce .be-ve-nahlad-nazov {
flex: none;
height: 40px;
padding: 0 14px;
border-radius: 8px;
background: #FFFFFF;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
color: #000000;
font-weight: 400;
line-height: 40px;
}
/* Zmeniť widget / obsah pri Sekcii 1/1 - ikona widgety.svg ako pri stĺpcoch. */
.fi-body .be-ve .be-ve-nahlad-tlacidla .be-ve-nahlad-zmenit::before {
background: #000000; /* ikona widgety.svg (Vojto 7. 10. 2026) */
-webkit-mask-image: url("/icons/widgety.svg");
mask-image: url("/icons/widgety.svg");
}
/* Sekcia so stĺpcami: názov sekcie v strede stmavenej sekcie (kurzor na
tlačidlách sekcie alebo otvorené menu sekcie) - Vojto 5. 10. 2026. */
.fi-body .be-ve .be-ve-nahlad-sekcia-nazov {
position: absolute;
top: 50%;
left: 50%;
z-index: 7;
transform: translate(-50%, -50%);
font-family: "Open Sans", sans-serif;
font-size: 15px;
font-weight: 600;
color: #FFFFFF;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .15s ease, visibility .15s ease;
}
.fi-body .be-ve .fi-fo-builder-item:not(.be-ve-otvorena) .be-ve-nahlad-obal--stlpce:has(> .be-ve-nahlad-tlacidla:hover) > .be-ve-nahlad-sekcia-nazov,
.fi-body .be-ve .fi-fo-builder-item.be-ve-menu-aktivna:not(.be-ve-otvorena) .be-ve-nahlad-obal--stlpce > .be-ve-nahlad-sekcia-nazov {
opacity: 1;
visibility: visible;
}
/* Šírka v % pri názve sekcie rovnako ako pri stĺpci (Vojto 5. 10. 2026). */
.fi-body .be-ve :is(.be-ve-nahlad-nazov, .be-ve-nahlad-sekcia-nazov) i {
font-style: normal;
font-weight: 400;
color: rgba(255, 255, 255, .7);
}
/* =============================================================================
POLE TEXT NASTAVENIA A LIŠTA NASTAVENÍ (Vojto 5. 10. 2026)
Ikona nastavenia.svg 24 x 24 px na konci poľa (TextNastavenia); lišta sprava
350 px, od hlavičky po spodok okna (poloha cez --be-lista-* z JS), obsah sa
posúva. Otvorenie: vysunutie sprava + fade, zatvorenie naopak.
============================================================================= */
.fi-body .be-pole-nastavenia .fi-input-wrp-suffix {
pointer-events: auto !important;
position: absolute !important;
top: 50%;
right: 12px;
z-index: 3;
display: flex !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
transform: translateY(-50%);
}
.fi-body .be-pole-nastavenia .fi-input-wrp {
position: relative;
}
.fi-body .be-pole-nastavenia input.fi-input {
padding-right: 48px !important;
}
/* Priehľadná klikacia plocha ikony nápovedy (45 px) zasahovala do hornej
polovice kolieska Nastavenia - klik tam otváral nápovedu (7. 10. 2026).
Pri poli s kolieskom sa spodok plochy pod ikonou „i“ oreže (clip-path
obmedzí aj klik), ikona sama ostane celá. */
.fi-body .fi-fo-field:has(.be-pole-nastavenia-ikona) .be-napoveda-ikona {
clip-path: inset(0 0 15px 0);
}
.fi-body .be-pole-nastavenia-ikona {
display: block;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: #000000;
-webkit-mask: url("/icons/nastavenia.svg") center / contain no-repeat;
mask: url("/icons/nastavenia.svg") center / contain no-repeat;
cursor: pointer;
transition: opacity .15s;
}
.fi-body .be-pole-nastavenia-ikona:hover {
opacity: .6;
}
.fi-body .be-lista {
position: fixed;
top: var(--be-lista-hore, 120px);
right: var(--be-lista-vpravo, 20px);
bottom: 0;
z-index: 35;
display: flex;
width: 350px;
max-width: calc(100vw - 32px);
border-radius: 10px 10px 0 0;
background: #FFFFFF;
box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
opacity: 0;
visibility: hidden;
transform: translateX(40px);
transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.fi-body .be-lista.je-otvorena {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .25s ease, transform .25s ease, visibility 0s;
}
.fi-body .be-lista-obsah {
flex: 1;
min-width: 0;
padding: 20px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.fi-body .be-lista-zavriet {
position: absolute;
top: -12px;
left: -12px;
z-index: 2;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50%;
background: url("/icons/zrusit.svg") center / contain no-repeat;
cursor: pointer;
}
.fi-body .be-lista-nadpis,
.fi-body .be-lista-blok-hlavicka {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 20px;
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-weight: 700;
color: #000000;
}
.fi-body .be-lista-blok + .be-lista-blok {
margin-top: 25px;
}
.fi-body .be-lista-blok-rozlisenie {
flex: none;
width: 24px;
height: 24px;
background: #000000;
-webkit-mask: url("/icons/rozlisenie-pocitac.svg") center / contain no-repeat;
mask: url("/icons/rozlisenie-pocitac.svg") center / contain no-repeat;
}
/* Polia v lište na celú šírku lišty (nie v ľavom stĺpci formulára). */
.fi-body .be-lista .fi-grid-col,
.fi-body .be-lista .fi-sc-component {
grid-column: 1 / -1 !important;
}
@media (max-width: 767px) {
.fi-body .be-lista {
right: 0 !important;
width: 100%;
max-width: none;
}
.fi-body .be-lista-zavriet {
top: 8px;
left: auto;
right: 8px;
}
}
/* Lišta nastavení na mobile: koniec obsahu nad spodným panelom administrácie. */
@media (max-width: 767px) {
.fi-body .be-lista-obsah {
padding-bottom: 110px;
}
}
/* Písmo v lište nastavení (Vojto 5. 10. 2026): pole na celú šírku, pod ním
súhrn a tlačidlá na stred - ako v úzkom popupe Dizajnu. */
.fi-body .be-lista .be-pismo {
display: flex !important;
flex-direction: column;
}
.fi-body .be-lista .be-pismo-riadok {
display: contents !important;
}
.fi-body .be-lista .be-pismo-nazov { order: 1; width: 100%; }
.fi-body .be-lista .be-pismo-suhrn { order: 2; align-self: center; justify-content: center; padding-left: 0; }
.fi-body .be-lista .be-pismo-tlacidla {
order: 3;
align-self: center;
justify-content: center;
margin-top: 10px;
}
/* Panely písma v lište vycentrované pod tlačidlami (inak by vyšli z lišty). */
.fi-body .be-lista .be-pismo-tlacidla {
position: relative;
}
.fi-body .be-lista .be-pismo-tl-obal {
position: static;
}
.fi-body .be-lista .be-pismo-panel {
left: 50%;
right: auto;
transform: translateX(-50%);
}
/* Písmo v lište: pole - súhrn - tlačidlá s medzerami 5 px (Vojto 5. 10. 2026). */
.fi-body .be-lista .be-pismo {
gap: 0 !important;
}
.fi-body .be-lista .be-pismo-suhrn {
margin-top: 5px !important;
}
.fi-body .be-lista .be-pismo-tlacidla {
margin-top: 5px !important;
}
/* Otvorená lišta nastavení: čierna vrstva 70 % pod lištou cez zvyšok stránky,
pozadie sa neposúva (Vojto 5. 10. 2026). */
.be-lista-vrstva {
position: fixed;
inset: 0;
z-index: 34;
background: rgba(0, 0, 0, .7);
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility 0s linear .25s;
}
.be-lista-vrstva.je-viditelna {
opacity: 1;
visibility: visible;
transition: opacity .25s ease, visibility 0s;
}
html.be-lista-zamok,
html.be-lista-zamok body {
overflow: hidden !important;
}
/* =============================================================================
LIŠTA DIZAJN SEKCIE / STĹPCA (Vojto 5. 10. 2026) - slide-over Filamentu
v podobe Lišty nastavení: 350 px sprava pod hlavičkou, vrstva 70 %, krížik
vľavo hore (zavrie a uloží), bez pätičky s tlačidlami.
============================================================================= */
.fi-modal:has(.be-ve-dizajn-lista) .fi-modal-close-overlay {
background: rgba(0, 0, 0, .7) !important;
}
.fi-modal:has(.be-ve-dizajn-lista) .fi-modal-window-ctn {
padding: 0 !important;
}
.fi-modal-window.be-ve-dizajn-lista {
position: fixed !important;
top: var(--be-dizajn-hore, 120px) !important;
right: var(--be-dizajn-vpravo, 20px) !important;
bottom: 0 !important;
left: auto !important;
width: 350px !important;
max-width: calc(100vw - 32px) !important;
height: auto !important;
max-height: none !important;
display: flex !important;
flex-direction: column;
overflow: visible !important;
border-radius: 10px 10px 0 0 !important;
background: #FFFFFF !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, .18) !important;
}
.be-ve-dizajn-lista .fi-modal-header {
padding: 20px 20px 0 !important;
}
.be-ve-dizajn-lista .fi-modal-heading {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-family: "Open Sans", sans-serif;
font-size: 16px !important;
font-weight: 700 !important;
color: #000000;
}
.be-ve-dizajn-lista .fi-modal-heading::after {
content: "";
width: 24px;
height: 24px;
background: #000000;
-webkit-mask: url("/icons/rozlisenie-pocitac.svg") center / contain no-repeat;
mask: url("/icons/rozlisenie-pocitac.svg") center / contain no-repeat;
}
.be-ve-dizajn-lista .fi-modal-close-btn {
position: absolute !important;
top: -12px;
left: -12px;
right: auto !important;
z-index: 3;
width: 28px !important;
height: 28px !important;
padding: 0 !important;
border-radius: 50%;
background: url("/icons/zrusit.svg") center / contain no-repeat !important;
}
.be-ve-dizajn-lista .fi-modal-close-btn > * {
display: none !important;
}
.be-ve-dizajn-lista .fi-modal-content {
flex: 1;
min-height: 0;
padding: 20px !important;
overflow-y: auto;
overscroll-behavior: contain;
}
.be-ve-dizajn-lista .fi-modal-footer {
display: none !important;
}
.be-ve-dizajn-lista .fi-grid-col,
.be-ve-dizajn-lista .fi-sc-component {
grid-column: 1 / -1 !important;
}
.be-ve-dizajn-blok {
margin: 5px 0 0;
}
@media (max-width: 767px) {
.fi-modal-window.be-ve-dizajn-lista {
right: 0 !important;
width: 100% !important;
max-width: none !important;
}
.be-ve-dizajn-lista .fi-modal-close-btn {
top: 8px;
left: auto;
right: 8px !important;
}
.be-ve-dizajn-lista .fi-modal-content {
padding-bottom: 110px !important;
}
}
/* Rozmer s jednotkou (VeRozmer / VeRozmerStrany): jednotka „% ⌄“ vpravo
nad poľom, roletka s jednotkami (a posuvníkom pri jednom poli). */
.be-rozmer {
position: relative;
}
.be-rozmer-jednotka-obal {
position: absolute;
top: -24px;
right: 0;
z-index: 4;
}
.be-rozmer-jednotka {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 0 0 6px;
border: 0;
background: #FFFFFF;
font-family: "Open Sans", sans-serif;
font-size: 14px;
font-weight: 600;
color: #000000;
cursor: pointer;
}
.be-rozmer-jednotka::after {
content: "";
width: 12px;
height: 12px;
background: #000000;
-webkit-mask: url("/icons/sipka-dole.svg") center / contain no-repeat;
mask: url("/icons/sipka-dole.svg") center / contain no-repeat;
}
.be-rozmer-panel {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 40;
width: 220px;
padding: 12px;
border: 1px solid var(--be-pole-okraj, #CCCCCC);
border-radius: 10px;
background: #FFFFFF;
box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}
.be-rozmer-jednotky {
display: flex;
gap: 8px;
}
.be-rozmer-jednotky button {
flex: 1;
height: 34px;
border: 1px solid #CCCCCC;
border-radius: 6px;
background: #FFFFFF;
font-weight: 600;
cursor: pointer;
}
.be-rozmer-jednotky button.je-aktivna {
border-color: #000000;
background: #000000;
color: #FFFFFF;
}
.be-rozmer-pole {
position: relative;
}
.be-rozmer-pole .fi-input {
padding-right: 40px !important;
-moz-appearance: textfield;
}
.be-rozmer-pole .fi-input::-webkit-outer-spin-button,
.be-rozmer-pole .fi-input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.be-rozmer-pripona {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
pointer-events: none;
}
.be-rs-polia {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)) 42px;
height: 45px;
border: 1px solid var(--be-pole-okraj-akt, #000000);
border-radius: var(--be-pole-radius, 10px);
overflow: hidden;
}
.be-rs-pole {
min-width: 0;
border: 0;
border-right: 1px solid var(--be-pole-okraj-akt, #000000);
background: #FFFFFF;
font: inherit;
font-size: 16px;
text-align: center;
-moz-appearance: textfield;
}
.be-rs-pole::-webkit-outer-spin-button,
.be-rs-pole::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.be-rs-pole:focus {
outline: 2px solid #000000;
outline-offset: -2px;
}
.be-rs-magnet {
border: 0;
background: #FFFFFF;
cursor: pointer;
}
.be-rs-magnet::before {
content: "";
display: block;
width: 22px;
height: 22px;
margin: auto;
background: #9A9A9A;
-webkit-mask: url("/icons/magnet.svg") center / contain no-repeat;
mask: url("/icons/magnet.svg") center / contain no-repeat;
}
.be-rs-magnet.je-aktivny {
background: #E5E5E5;
}
.be-rs-magnet.je-aktivny::before {
background: #000000;
}
.be-rs-popisy {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)) 42px;
margin-top: 4px;
font-size: 13px;
text-align: center;
color: #000000;
}
/* Farba s priehľadnosťou: tlačidlo % ako ostatné tlačidlá písma. */
.be-ve-farba .be-ve-farba-percento {
font-size: 18px;
font-weight: 600;
color: #000000;
}
.be-ve-farba .be-pismo-riadok {
gap: 10px;
}
.be-ve-farba .be-pismo-tlacidla {
gap: 10px;
}
.be-ve-farba-panel {
width: 220px;
}
/* Typ poľa „rozmer“ (VeRozmer, VeRozmerStrany): názov na hornej čiare poľa,
jednotka vpravo na tej istej čiare (Vojto 5. 10. 2026). */
.fi-body .be-pole-rozmer {
position: relative;
padding-top: 0;
}
.fi-body .be-pole-rozmer > .fi-fo-field-label-col {
position: absolute;
top: -8px;
left: var(--be-pole-odsadenie, 20px);
z-index: 3;
height: 16px;
margin: 0;
}
.fi-body .be-pole-rozmer .fi-fo-field-label {
padding: 0 5px;
background: #FFFFFF;
color: #000000;
font-size: var(--be-pole-pismo-male, 13px);
font-weight: 300 !important;
line-height: 16px;
}
.fi-body .be-pole-rozmer .be-rozmer-jednotka-obal {
top: -11px;
right: 12px;
}
.fi-body .be-pole-rozmer .be-rozmer-jednotka {
padding: 0 5px;
line-height: 20px;
}
.fi-body .be-pole-rozmer .be-rozmer-pole.fi-input-wrp {
height: 45px;
border: 1px solid var(--be-pole-okraj-akt, #000000) !important;
border-radius: var(--be-pole-radius, 10px) !important;
box-shadow: none !important;
}
.fi-body .be-pole-rozmer .be-rozmer-pole .fi-input {
height: 100%;
padding-left: var(--be-pole-odsadenie, 20px) !important;
font-size: 16px;
}
/* Nadpis lišty Dizajn - zarovnaný vľavo s obsahom, ikona monitora vpravo. */
.be-ve-dizajn-lista .fi-modal-header {
padding: 20px 20px 10px !important;
border-bottom: 0 !important;
}
.be-ve-dizajn-lista .fi-modal-heading {
margin: 0 !important;
padding: 0 !important;
}
.be-ve-dizajn-lista .fi-modal-header > :not(.fi-modal-close-btn) {
flex: 1;
min-width: 0;
}
/* Otvorená sekcia (Upraviť): bez sivej lišty stĺpca (názov, Zmeniť obsah,
presun, menu) - tieto funkcie sú v náhľade stĺpca (Vojto 5. 10. 2026). */
.fi-body .be-ve .fi-fo-builder-item.be-ve-otvorena .be-ve-stlpec-hlavicka {
display: none !important;
}
/* Lepivá lišta HTML editora (Vojto 5. 10. 2026): rodičia s overflow hidden
by ju zablokovali - clip orezáva rovnako, ale nevytvára posuvnú oblasť.
Box stĺpca / obsahu bez orezania - roletka „…“ lišty TinyMCE v úzkom
stĺpci presahuje box. */
.fi-body .fi-layout:has(.html-editor) {
overflow: clip !important;
}
.fi-body .be-ve .be-ve-box:has(.html-editor),
.fi-body .be-ve .be-ve-obsahy .fi-fo-repeater-item:has(.html-editor) {
overflow: visible !important;
}
.fi-body .be-ve .html-editor-lista:has(.tox-toolbar__overflow) {
z-index: 30;
}
/* Otvorená lišta Dizajn: stránka pod ňou sa neposúva, posúva sa len obsah lišty. */
html:has(.fi-modal-open .be-ve-dizajn-lista),
html:has(.fi-modal-open .be-ve-dizajn-lista) body {
overflow: hidden !important;
}
/* Mobil: html/body s overflow hidden/auto robili z body vlastný posúvací
kontajner, ktorý sa nikdy neposúva - lišta HTML editora (sticky) sa
potom neprichytila hore. clip orezáva rovnako, ale kontajner nevytvára. */
html.fi:not(:has(.fi-modal-open)),
html.fi:not(:has(.fi-modal-open)) body.fi-body {
overflow-x: clip !important;
overflow-y: visible !important;
}
/* Lišta Dizajn sekcie / stĺpca (Vojto 5. 10. 2026): medzi poliami, nadpismi
blokov a obrázkom na výšku presne 20 px - bez okrajov polí formulára
(10 / 20 px) a bez medzery mriežky Filamentu (24 px). */
/* Popis poľa sedí na hornej čiare (10 px nad rámikom) - medzera mriežky
30 px = 20 px od spodku poľa po text popisu. Nadpis bloku popis nemá,
preto nad ním o 10 px menej. */
.be-ve-dizajn-lista .fi-modal-content {
padding-top: 20px !important;
}
.be-ve-dizajn-lista .fi-sc-has-gap {
row-gap: 30px !important;
}
.be-ve-dizajn-lista .fi-grid-col:not(:first-child):has(.be-ve-dizajn-blok) {
margin-top: -10px;
}
.be-ve-dizajn-lista .fi-fo-field {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.be-ve-dizajn-lista .be-ve-dizajn-blok {
margin: 0;
}
/* Otvorená lišta (Dizajn aj Lišta nastavení poľa): bez šípky Na začiatok. */
html:has(.fi-modal-open .be-ve-dizajn-lista) .be-na-zaciatok,
html.be-lista-zamok .be-na-zaciatok {
display: none !important;
}
/* Úprava jedného stĺpca (Vojto 5. 10. 2026): ostatné stĺpce otvorenej
sekcie len ako náhľad, bez úprav (backend-formulare.js veUplatniStlpec). */
.be-ve .be-ve-box--zamknuty > :not(.be-ve-box-nahlad) {
display: none !important;
}
.be-ve .be-ve-box-nahlad {
pointer-events: none;
user-select: none;
}
.be-ve .be-ve-box-nahlad > .ve-stlpec {
width: 100% !important;
max-width: none !important;
flex: none !important;
}
.fi-body .be-ve .be-ve-box.be-ve-box--zamknuty {
border-color: transparent !important;
background: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Nadpis „Nastavenie sekcie / stĺpca“ je prvý blok formulára a posúva sa
s poliami (Vojto 5. 10. 2026) - hlavička okna ostáva len pre krížik
a čítačky obrazovky. */
.be-ve-dizajn-lista .fi-modal-header {
padding: 0 !important;
min-height: 0 !important;
height: 0;
}
.be-ve-dizajn-lista .fi-modal-header > :not(.fi-modal-close-btn) {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.be-ve-dizajn-lista .fi-modal-content {
border-radius: 10px 10px 0 0;
}
/* Mobil: krížik je vpravo hore v lište - nadpis bloku pod ním. */
@media (max-width: 767px) {
.be-ve-dizajn-lista .fi-modal-content {
padding-top: 48px !important;
}
}
/* Rozmer (VeRozmer, VeRozmerStrany) - v lište aj vo formulároch (Vojto 5. a 6. 10. 2026): názov poľa a roletka
jednotky (% / px) nad poľom, 3 px nad horným okrajom - nezasahujú do
čiary poľa. Medzera nad názvom ostáva 20 px (o 13 px viac ako pri poli
s názvom na čiare). */
.fi-body .fi-grid-col:has(> .fi-sc-component > .be-pole-rozmer),
.fi-body .fi-grid-col:has(> .be-pole-rozmer) {
padding-top: 13px;
}
.fi-body .be-pole-rozmer > .fi-fo-field-label-col {
top: -23px !important;
left: 0 !important;
height: 20px !important;
}
.fi-body .be-pole-rozmer .fi-fo-field-label {
padding: 0 !important;
background: none !important;
line-height: 16px !important;
}
.fi-body .be-pole-rozmer .be-rozmer-jednotka-obal {
top: -23px;
right: 0;
}
.fi-body .be-pole-rozmer .be-rozmer-jednotka {
padding: 0;
background: none;
}
/* POSUVNÍK - GLOBÁLNY ŠTANDARD (Vojto 5. 10. 2026): každý posuvník Backendu
(nastavenie hodnoty ťahaním, napr. %) vyzerá ako Pole posuvník - šípka
vľavo, zelená dráha s bielym jazdcom a čiernym stredom, hodnota sivo,
šípka vpravo (triedy be-posuvnik-sipka / -draha / -hodnota, sekcia 22).
Riadok mimo Poľa posuvník (roletka jednotky, krytie farby, plávajúci). */
.be-posuvnik-riadok {
display: flex;
align-items: center;
gap: 10px;
min-height: 40px;
}
.be-ve-farba-panel,
.be-posuvnik-plavajuci {
min-width: 260px;
}
/* Otvorená roletka jednotky nad jednotkou ďalšieho poľa. */
.be-rozmer-jednotka-obal:has(.be-rozmer-jednotka[aria-expanded="true"]) {
z-index: 50;
}
/* Tlačidlá náhľadu sekcie / stĺpca len s ikonou v rade (Vojto 5. 10. 2026) -
bez textu a bez Menu ⋮; názov funkcie v title. Záloha s textom: git tag
ve-tlacidla-s-textom-2026-10-05. */
.fi-body .be-ve .be-ve-ikona-tl {
width: 40px;
padding: 0 !important;
justify-content: center;
gap: 0;
}
.fi-body .be-ve .be-ve-ikona-tl[style*="--be-ve-ikona"]::before {
-webkit-mask-image: var(--be-ve-ikona);
mask-image: var(--be-ve-ikona);
}
/* Popup Zobraziť kód (Vojto 5. 10. 2026): nadpis 20 px od horného okraja,
rámik poľa ako Textové okno HTML (#CCCCCC, 10 px), tlačidlá štandardnej
veľkosti ako v potvrdzovacom okne (2 x 139 px + 14 px), v strede. */
.fi-body .fi-modal-window.be-okno.be-ve-kod-okno {
padding-top: 20px !important;
}
.fi-body .be-ve-kod-okno .fi-modal-header {
padding-top: 0 !important;
margin-top: 0 !important;
}
.fi-body .be-ve-kod-okno .fi-modal-heading {
margin-top: 0 !important;
line-height: 24px;
}
.fi-body .be-ve-kod-okno .fi-input-wrp:has(.be-ve-kod-pole) {
border: 1px solid #CCCCCC !important;
border-radius: 10px !important;
box-shadow: none !important;
outline: 0 !important;
--tw-ring-shadow: 0 0 #0000 !important;
}
.fi-body .be-ve-kod-okno .be-ve-kod-pole {
border: 0 !important;
box-shadow: none !important;
}
.fi-body .be-okno.be-ve-kod-okno .fi-modal-footer-actions {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
}
.fi-body .be-ve-kod-okno .fi-modal-footer-actions .fi-btn {
min-width: 0 !important;
width: 139px;
}
/* Ikona Nastavenia obrázka vpravo hore v boxe obrázka (Vojto 5. 10. 2026). */
.fi-body .be-ve :is(.be-ve-box, .fi-fo-repeater-item):has(> * .be-ve-obrazok-nastavenia) {
position: relative;
}
.fi-body .be-ve .be-ve-obrazok-nastavenia {
position: absolute;
top: 10px;
right: 10px;
z-index: 5;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: #000000;
-webkit-mask: url("/icons/nastavenia.svg") center / contain no-repeat;
mask: url("/icons/nastavenia.svg") center / contain no-repeat;
cursor: pointer;
}
.fi-body .be-ve .be-ve-obrazok-nastavenia:hover {
background: #555555;
}
/* Zarovnanie obrázka v lište - len ikony v rade (biele s rámikom, zvolené
čierne), názov v title / čítačke. */
.be-ve-dizajn-lista .be-ve-zarovnanie .fi-fo-toggle-buttons {
display: flex !important;
flex-wrap: nowrap !important;
gap: 10px !important;
}
.be-ve-dizajn-lista .be-ve-zarovnanie .fi-btn {
width: 45px !important;
height: 45px !important;
padding: 0 !important;
justify-content: center;
gap: 0 !important;
font-size: 0 !important;
border: 1px solid #CCCCCC !important;
border-radius: 10px !important;
background: #FFFFFF !important;
color: #000000 !important;
box-shadow: none !important;
--tw-ring-shadow: 0 0 #0000 !important;
}
.be-ve-dizajn-lista .be-ve-zarovnanie .fi-btn .fi-icon {
width: 24px !important;
height: 24px !important;
color: inherit !important;
}
.be-ve-dizajn-lista .be-ve-zarovnanie input:checked + .fi-btn,
.be-ve-dizajn-lista .be-ve-zarovnanie .fi-btn.fi-active {
border-color: #000000 !important;
background: #000000 !important;
color: #FFFFFF !important;
}
/* Rozmer: posuvník pod poľom ako Pole posuvník (Vojto 5. 10. 2026) -
vnútri .fi-input-wrp by inak stratil pozadie a rámik. */
.fi-body .be-rozmer .be-rozmer-pole .be-posuvnik-ponuka {
top: 100% !important;
z-index: 45;
background: #FFFFFF !important;
border: 1px solid #000000 !important;
border-top: 0 !important;
border-radius: 0 0 10px 10px !important;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06) !important;
}
/* Dlaždice „Zvoľte obsah“: dvojriadkový názov (Ikony s textom) na stred. */
.fi-body .be-ve .be-ve-typ .fi-fo-toggle-buttons .fi-btn,
.fi-body .be-ve .be-ve-typ .fi-fo-toggle-buttons .fi-btn > * {
text-align: center !important;
justify-content: center;
}
/* Verzia hlavičky / pätičky mailu (Zákazník / Admin) pod kartou widgetu. */
.fi-body .be-ve .be-ve-verzia {
margin-top: 10px;
}
.fi-body .be-ve .be-ve-verzia .fi-fo-toggle-buttons {
display: flex !important;
justify-content: center;
gap: 10px !important;
}
.fi-body .be-ve .be-ve-verzia .fi-btn {
height: 40px !important;
padding: 0 18px !important;
border: 1px solid #CCCCCC !important;
border-radius: 10px !important;
background: #FFFFFF !important;
color: #000000 !important;
font-weight: 400 !important;
box-shadow: none !important;
--tw-ring-shadow: 0 0 #0000 !important;
}
.fi-body .be-ve .be-ve-verzia input:checked + .fi-btn {
border-color: #000000 !important;
background: #000000 !important;
color: #FFFFFF !important;
}
/* Widget Tlačidlo (Vojto 5. 10. 2026): nadpis „Tlačidlo N“ s ikonou
Nastavenia vpravo, počet a zarovnanie v strede. */
.fi-body .be-ve .be-ve-tlacidlo-hlavicka {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 24px;
margin-top: 10px;
font-size: 15px;
}
.fi-body .be-ve .be-ve-tlacidlo-hlavicka .be-ve-tlacidlo-nastavenia {
position: static;
}
.fi-body .be-ve .be-ve-tlacidla-zarovnanie .fi-fo-toggle-buttons {
display: flex !important;
gap: 10px !important;
}
.fi-body .be-ve .be-ve-tlacidla-zarovnanie .fi-btn {
width: 45px !important;
height: 45px !important;
padding: 0 !important;
justify-content: center;
font-size: 0 !important;
border: 1px solid #CCCCCC !important;
border-radius: 10px !important;
background: #FFFFFF !important;
color: #000000 !important;
box-shadow: none !important;
}
.fi-body .be-ve .be-ve-tlacidla-zarovnanie .fi-btn .fi-icon {
width: 24px !important;
height: 24px !important;
color: inherit !important;
}
.fi-body .be-ve .be-ve-tlacidla-zarovnanie input:checked + .fi-btn {
border-color: #000000 !important;
background: #000000 !important;
color: #FFFFFF !important;
}
/* Ikony widgetov v „Zvoľte obsah“ - GLOBÁLNE PRAVIDLO (Vojto 5. 10. 2026):
všetky rovnakou farbou (#B2B2B2, pri kurzore #7F7F7F) a veľkosťou 44 px.
Dvojriadkový názov ikonu nezmenší; ikona bez vlastnej farby (výplň
čierna z SVG) prevezme farbu dlaždice. Nový widget = ikona 24 x 24
viewBox v public/icons s currentColor. */
.fi-body .be-ve .be-ve-typ .fi-fo-toggle-buttons .fi-btn .fi-icon {
flex: none !important;
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
color: #B2B2B2 !important;
}
.fi-body .be-ve .be-ve-typ .fi-fo-toggle-buttons .fi-btn .fi-icon:not([fill="none"]) path:not([fill]) {
fill: currentColor;
}
.fi-body .be-ve .be-ve-typ .fi-fo-toggle-buttons .fi-btn:hover .fi-icon {
color: #7F7F7F !important;
}
/* Widget Tlačidlo: polia s názvom (v boxe sa názvy polí inak skrývajú). */
.fi-body .be-ve .be-ve-box .be-ve-s-nazvom .fi-fo-field-label-col,
.fi-body .be-ve .be-ve-obsahy .be-ve-s-nazvom .fi-fo-field-label-col {
display: flex !important;
}
.fi-body .be-ve .be-ve-tlacidla-pocet .fi-fo-toggle-buttons,
.fi-body .be-ve .be-ve-tlacidla-zarovnanie .fi-fo-toggle-buttons {
justify-content: flex-start;
}
/* Neaktívne pole (disabled) - GLOBÁLNE PRAVIDLO (Vojto 6. 10. 2026):
jemne sivé pozadie #E5E5E5 (text, číslo, výber, textové okno). */
.fi-body .fi-input-wrp:has(:is(input, textarea, select):disabled),
.fi-body .fi-input-wrp.fi-disabled,
.fi-body .fi-select-input:has(.fi-select-input-btn:disabled) .fi-input-wrp {
background: #E5E5E5 !important;
}
.fi-body .fi-input-wrp :is(input, textarea, select):disabled {
background: transparent !important;
}
/* Výber s ikonou Nastavenia (SelectNastavenia, Vojto 6. 10. 2026): ikona
na konci poľa pred šípkou roletky (šípka 15 px od kraja, ikona 10 px
pred ňou); text výberu končí pred ikonou. */
.fi-body .be-select-nastavenia .fi-input-wrp {
position: relative;
}
.fi-body .be-select-nastavenia .fi-input-wrp-suffix {
position: absolute;
top: 50%;
right: 41px;
z-index: 2;
padding: 0 !important;
border: 0 !important;
background: none !important;
transform: translateY(-50%);
}
.fi-body .be-select-nastavenia .fi-select-input {
padding-right: 80px !important;
}
/* Obsah → Katalógy: prehľad strán vo formulári (Vojto 6. 10. 2026). */
.fi-body .be-katalog-prehlad {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 15px;
}
.fi-body .be-katalog-prehlad p {
margin: 0;
}
.fi-body .be-katalog-napoveda {
color: #7F7F7F;
font-size: 14px;
}
/* Bočná lišta s tlačidlami dole (Vytvoriť nový parameter, Trello AL1As0IK):
vzhľad lišty Dizajn, ale päta s Zrušiť / Vytvoriť ostáva viditeľná. */
.be-ve-dizajn-lista.be-lista-s-tlacidlami .fi-modal-footer {
display: block !important;
padding: 20px !important;
border-top: 1px solid #EEEEEE;
}
.be-ve-dizajn-lista.be-lista-s-tlacidlami .fi-modal-footer-actions {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 14px !important;
}
.be-ve-dizajn-lista.be-lista-s-tlacidlami .fi-modal-footer-actions .fi-btn {
height: 45px;
justify-content: center;
}
.be-ve-dizajn-lista.be-lista-s-tlacidlami .fi-modal-footer-actions .fi-color-gray {
order: -1;
}
/* Tlačidlo Vytvoriť nový parameter nad poľom Parametre. */
.fi-body .be-novy-parameter {
margin-bottom: 10px;
}
.fi-body .be-novy-parameter .fi-btn {
height: 45px;
}
/* Widget Ikony s textom - tlačidlo Nastaviť v karte widgetu (Trello tX69QH7f). */
.fi-body .be-ve .be-ve-widget-nastavit {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
margin-top: 10px;
margin-bottom: 20px; /* 20 px pod tlačidlom (Vojto 6. 10. 2026) */
padding: 0 16px;
border: 0;
border-radius: 10px;
background: #F2F2F2;
font: inherit;
font-size: 15px;
font-weight: 700;
color: #000000;
cursor: pointer;
}
.fi-body .be-ve .be-ve-widget-nastavit .fi-icon {
width: 22px;
height: 22px;
}
.fi-body .be-ve .be-ve-widget-nastavit:hover {
background: #E5E5E5;
}
/* Odkaz na modul v popise widgetu (Ikony s textom, Trello tX69QH7f). */
.fi-body .be-ve .be-ve-widget-odkaz {
color: inherit;
text-decoration: underline;
}
.fi-body .be-ve .be-ve-widget-odkaz:hover {
color: #000000;
}
/* Hodnoty parametra (Produkty → Parametre, Trello PS8Kdnyh, 7. 10. 2026) -
vizuál poľa Zoznam s druhým poľom Merná jednotka a počtom produktov. */
/* Polia v štandardnom formáte (komentár 7. 10. 2026 6:30): 45 px, čierny
okraj 1 px, zaoblenie 10 px, názov 13 px na hornej čiare, text 16 px. */
.fi-body .be-param-pole {
position: relative;
display: block;
flex: 1 1 auto;
height: var(--be-pole-vyska);
border: 1px solid var(--be-pole-okraj-akt);
border-radius: var(--be-pole-radius);
background: #FFFFFF;
}
.fi-body .be-param-pole-select {
flex: 0 0 200px;
}
.fi-body .be-param-pole-nazov {
position: absolute;
top: -9px;
left: calc(var(--be-pole-odsadenie) - 5px);
padding: 0 5px;
background: #FFFFFF;
font-size: var(--be-pole-pismo-male);
font-weight: 400;
line-height: 16px;
color: #000000;
}
.fi-body .be-param-pole-nazov sup {
margin-left: 3px;
color: #CC334A;
font-size: 14px;
top: 0;
}
.fi-body .be-param-pole input,
.fi-body .be-param-pole select {
width: 100%;
height: 100%;
padding: 0 var(--be-pole-odsadenie);
border: 0;
border-radius: var(--be-pole-radius);
background: transparent;
font: inherit;
font-size: var(--be-pole-pismo);
font-weight: 300;
color: #000000;
outline: none;
box-shadow: none;
}
.fi-body .be-param-pole select {
padding-right: 44px;
appearance: none;
-webkit-appearance: none;
background: url('../icons/sipka-dole.svg') no-repeat right 14px center / 24px 24px;
}
.fi-body .be-param-pole .be-zoznam-chyba {
position: absolute;
left: 0;
top: calc(100% + 4px);
}
.be-parameter-pocet {
margin-left: auto;
padding-right: 10px;
font-size: 13px;
font-weight: 300;
color: var(--be-inactive, #7F7F7F);
white-space: nowrap;
}
.be-parameter-hodnoty .be-zoznam-polozka {
cursor: pointer; /* celý riadok = Upraviť */
}
/* ==========================================================================
LIŠTA NASTAVENÍ - spoločné pravidlá (Trello tX69QH7f, 7. 10. 2026)
Platí pre dizajn sekcie / stĺpca / widgetu (.be-ve-dizajn-lista) aj Lištu
nastavení poľa (.be-lista); ostatné formuláre sa nemenia.
========================================================================== */
/* Názov KAŽDÉHO poľa nad poľom, 3 px nad horným okrajom (ako pri rozmere) -
nezasahuje do čiary poľa. Prepínače a nahrávanie médií majú vlastný vzhľad. */
/* :has() nesmie byť vnorené v :has() - výnimky (prepínač, políčko, médiá)
preto samostatným pravidlom. Spolu s medzerou mriežky 30 px = 20 px od
spodku poľa po názov ďalšieho poľa (komentár 6:46). */
.fi-body :is(.be-ve-dizajn-lista, .be-lista) .fi-grid-col:has(> .fi-sc-component > .be-pole) {
padding-top: 13px;
}
.fi-body :is(.be-ve-dizajn-lista, .be-lista) .fi-grid-col:has(> .fi-sc-component > :is(.be-pole-media, .be-pole .fi-toggle, .be-pole .fi-checkbox-input)) {
padding-top: 0;
}
.fi-body :is(.be-ve-dizajn-lista, .be-lista) .be-pole:not(.be-pole-media):not(:has(.fi-toggle, .fi-checkbox-input)) > .fi-fo-field-label-col {
top: -23px !important;
left: 0 !important;
height: 20px !important;
}
.fi-body :is(.be-ve-dizajn-lista, .be-lista) .be-pole:not(.be-pole-media):not(:has(.fi-toggle, .fi-checkbox-input)) .fi-fo-field-label {
padding: 0 !important;
background: none !important;
line-height: 16px !important;
font-size: var(--be-pole-pismo-male) !important;
color: var(--be-pole-text-akt) !important;
}
/* Sivé vysvetľujúce texty pod poľami sa v lište neukazujú (komentár 6:07). */
.fi-body :is(.be-ve-dizajn-lista, .be-lista) .fi-fo-field-content-col .fi-sc-text {
display: none !important;
}
/* Hlavičky blokov = akordeón (komentár 6:23): ikona podmenu.svg na konci,
klik otvorí blok a ostatné zavrie (backend-formulare.js, beListaAkordeon). */
.fi-body :is(.be-ve-dizajn-lista, .be-lista) .be-lista-blok-hlavicka {
cursor: pointer;
user-select: none;
}
.fi-body :is(.be-ve-dizajn-lista, .be-lista) .be-lista-blok-rozlisenie {
width: 15px;
height: 15px;
background: #000000;
-webkit-mask: url("/icons/podmenu.svg") center / contain no-repeat;
mask: url("/icons/podmenu.svg") center / contain no-repeat;
}
/* Hlavička bez ikony rozlíšenia (blok nie je responzívny) - ikona podmenu. */
.fi-body :is(.be-ve-dizajn-lista, .be-lista) .be-lista-blok-hlavicka:not(:has(.be-lista-blok-rozlisenie))::after {
content: "";
flex: none;
width: 15px;
height: 15px;
background: #000000;
-webkit-mask: url("/icons/podmenu.svg") center / contain no-repeat;
mask: url("/icons/podmenu.svg") center / contain no-repeat;
}
.fi-body :is(.be-ve-dizajn-lista, .be-lista) .je-zbalena .be-lista-blok-rozlisenie {
background: #7F7F7F;
}
.fi-body .be-lista-skryte {
display: none !important;
}
/* Ikona rozlíšenia pri názve poľa lišty (komentár 6:15) - 16 px za názvom,
roletka rozlíšení ako px / %. Iné rozlíšenie ako Počítač = zelená ikona. */
.fi-body .be-ve-dizajn-lista .fi-fo-field-label-ctn,
.fi-body .be-ve-dizajn-lista .fi-fo-field-label-col {
pointer-events: auto;
}
.fi-body .be-ve-dizajn-lista .be-rozlisenie-pole {
flex: none;
width: 16px;
height: 16px;
margin-left: 5px;
padding: 0;
border: 0;
background: #000000;
-webkit-mask: var(--be-rozlisenie-ikona) center / contain no-repeat;
mask: var(--be-rozlisenie-ikona) center / contain no-repeat;
cursor: pointer;
vertical-align: middle;
}
.fi-body .be-ve-dizajn-lista .be-rozlisenie-pole.je-ine {
background: #80BA3A;
}
.be-rozlisenie-panel {
position: fixed;
z-index: 100;
width: 220px;
padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;
}
.be-rozlisenie-moznost {
display: flex;
align-items: center;
gap: 10px;
height: 34px;
padding: 0 10px;
border: 0;
border-radius: 6px;
background: #FFFFFF;
font-size: 13px;
font-weight: 300;
text-align: left;
cursor: pointer;
}
.be-rozlisenie-moznost i {
flex: none;
width: 20px;
height: 20px;
background: currentColor;
-webkit-mask: var(--be-rozlisenie-ikona) center / contain no-repeat;
mask: var(--be-rozlisenie-ikona) center / contain no-repeat;
}
.be-rozlisenie-moznost:hover {
background: #F2F2F2;
}
.be-rozlisenie-moznost.je-aktivna {
background: #000000;
color: #FFFFFF;
font-weight: 600;
}
.be-rozlisenie-moznost.ma-hodnotu:not(.je-aktivna) {
font-weight: 600;
}
/* Hlavičky Lišty sivé ako hlavička sekcie formulára (#E5E5E5), na celú šírku
lišty (komentár 7. 10. 2026 7:20). Zatvorené hlavičky pod sebou majú medzi
sebou 1 px - dorovnáva backend-formulare.js (beListaMedzeryHlaviciek). */
.fi-body :is(.be-ve-dizajn-lista, .be-lista) .be-lista-blok-hlavicka,
.fi-body .be-lista .be-lista-nadpis {
box-sizing: border-box;
min-height: 44px;
margin-left: -20px;
margin-right: -20px;
padding: 0 20px;
background: #E5E5E5;
}
.fi-body .be-ve-dizajn-lista .fi-grid > .fi-grid-col:first-child .be-lista-blok-hlavicka,
.fi-body .be-lista .be-lista-blok:first-child > .be-lista-blok-hlavicka,
.fi-body .be-lista .be-lista-nadpis:first-child {
margin-top: -20px;
}
/* Pole s nápovedou a voľbou % / px (komentár 7. 10. 2026 7:25): ikona
nápovedy v riadku názvu poľa, naľavo pred „% / px“, 10 px od neho -
nebijú sa. Jednotka má pevnú šírku (% aj px), ikona preto stojí stále
na rovnakom mieste. */
.fi-body .be-rozmer .be-rozmer-jednotka {
min-width: 34px;
justify-content: flex-end;
}
.fi-body .be-rozmer > .be-napoveda .be-napoveda-ikona {
top: -22px;
right: 44px;
width: 18px;
height: 18px;
justify-content: center;
}
.fi-body .be-rozmer > .be-napoveda .be-napoveda-bublina {
bottom: calc(100% + 38px); /* hrot 4 px nad ikonou v riadku názvu */
}
.fi-body .be-rozmer > .be-napoveda .be-napoveda-bublina::after {
right: 45px; /* hrot nad ikonou (44 px + polovica ikony) */
}
/* Konfigurácia e-shopu - krok Obchodné podmienky (Trello iYNByw1C). */
.fi-body .be-konfigurator-stranky {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.fi-body .be-konfigurator-stranka {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 20px;
padding: 12px 20px;
border: 1px solid #CCCCCC;
border-radius: 10px;
font-size: 16px;
}
.fi-body .be-konfigurator-stranka-stav {
color: #EA001C;
font-size: 14px;
font-weight: 600;
}
.fi-body .be-konfigurator-stranka-stav.je-ok {
color: #80BA3A;
}
/* Zrušiť pod výberom widgetov (Vojto 7. 10. 2026): 10 px nad aj pod
tlačidlom; len keď je pôvodný obsah na vrátenie (je-viditelne). */
.fi-body .be-ve .be-ve-zrusit-vyber {
display: none;
justify-content: center;
padding: 10px 0;
}
.fi-body .be-ve .be-ve-zrusit-vyber.je-viditelne {
display: flex;
}
.fi-body .be-ve .be-ve-zrusit-vyber-tl {
display: inline-flex;
align-items: center;
gap: 10px;
height: 45px;
padding: 0 20px;
border: 0;
border-radius: 10px;
background: #F2F2F2;
font-size: 16px;
font-weight: 700;
color: #000000;
cursor: pointer;
}
.fi-body .be-ve .be-ve-zrusit-vyber-tl:hover {
background: #E5E5E5;
}
.fi-body .be-ve .be-ve-zrusit-vyber-ikona {
width: 24px;
height: 24px;
}
/* Riadok mriežky so Zrušiť: skrytý bez medzery, viditeľný bez medzery
mriežky - od výberu widgetov presne 10 px (padding tlačidla). */
.fi-body .be-ve .fi-grid-col:has(.be-ve-zrusit-vyber:not(.je-viditelne)) {
display: none;
}
.fi-body .be-ve .fi-grid-col:has(.be-ve-zrusit-vyber.je-viditelne) {
margin-top: calc(-1 * var(--be-ve-medzera-mriezky, 20px));
}