/* Editor na místě. Načítá se JEN v režimu úprav, do vydaného souboru se
nikdy nedostane. Barvy a písmo jsou schválně cizí proti webu pod ním,
ať je poznat, co je nástroj a co je web. */
:root {
--up-modra: #0F2338;
--up-modra-sv: #14508C;
--up-akce: #CC5803;
--up-ok: #1B7F4B;
--up-chyba: #B3261E;
--up-lista: 58px;
}
/* Okno stojí uvnitř cizího webu, takže všechno v něm dědí jeho styly. Web
ukázky například sází `section { padding: 78px 0 }` a v okně by to udělalo
půl obrazovky prázdna. Prvky se proto vrací na nulu a teprve pravidla níž
je obléknou do svého. Kdyby se tohle řešilo výběrem „bezpečných“ značek,
rozbil by editor první web, který nastyluje něco jiného. */
/* Totéž platí pro panel: stojí v témže cizím webu. Musí to být tady nahoře,
aby pravidla editoru níž vyhrála nad resetem. */
.up-okno *, .up-panel * {
margin: 0; padding: 0; border: 0; background: none;
font: inherit; color: inherit; text-align: inherit; text-transform: none;
letter-spacing: normal; line-height: inherit; box-sizing: border-box;
max-width: none; min-width: 0; width: auto; float: none; position: static;
}
.up-okno option, .up-panel option { background-color: #fff; color: #0D141C; }
/* Lišta sedí nahoře napevno, obsah webu se pod ni posune. Lepkavou
i přišpendlenou hlavičku posune pod lištu editor.js (odsadPevne): pravidlo
`header {top}` tady platilo i pro hlavičku s position:relative a posunulo
ji o výšku lišty přes úvod (veterinář). */
html.up-rezim { scroll-padding-top: calc(var(--up-lista) + 72px); }
/* Dole místo navíc, ať jde poslední tlačítko editoru odrolovat nad
přišpendlený odkaz „Zpět na Webrenovace.cz“ v levém dolním rohu. */
html.up-rezim body { padding-top: var(--up-lista); padding-bottom: 140px; }
.up-lista {
position: fixed; inset: 0 0 auto 0; z-index: 9000;
display: flex; align-items: center; gap: 10px;
/* Minimum je pevné číslo. Kdyby se bralo z proměnné, do které editor
zapisuje naměřenou výšku, vznikla by západka: po zalomení do tří řad na
mobilu by se lišta už nikdy nezmenšila. */
min-height: 58px; padding: 6px 12px;
background: var(--up-modra); color: #fff;
font: 600 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
box-shadow: 0 2px 14px rgba(8, 18, 30, .35);
}
.up-lista__pocet { display: flex; flex-direction: column; gap: 1px; margin-right: auto; min-width: 11em; }
/* Tlačítka vedle sebe; co se nevejde, přesune editor.js do nabídky „⋯“. */
.up-lista__akce { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.up-lista__pocet b { font-size: 15px; font-weight: 800; }
.up-lista__pocet small { font-size: 12px; opacity: .78; font-weight: 500; }
.up-lista__pocet small.je-chyba { opacity: 1; color: #FFC2BC; }
.up-tl {
appearance: none; border: 1px solid rgba(255, 255, 255, .26); border-radius: 9px;
background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
font: 700 15px/1 inherit; padding: 0 14px; min-height: 44px; min-width: 44px;
white-space: nowrap; transition: background .15s, border-color .15s;
}
/* Jen zapnuté tlačítko. Vypnuté „+ Přidat“ na bílém podkladu okna po najetí
zbělalo a zmizelo. */
.up-tl:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
.up-odkaz { color: var(--up-akce); text-decoration: underline; font-weight: 700; }
.up-tl:disabled { opacity: .42; cursor: default; }
.up-tl--hlavni { background: var(--up-akce); border-color: transparent; }
.up-tl--hlavni:hover:not(:disabled) { background: #E06504; }
/* Přepínač zvýraznění drží stav v aria-pressed, ne ve třídě: co je zapnuté,
ví tak i odečítač obrazovky. */
.up-tl--ukazat[aria-pressed="true"] {
background: #fff; color: var(--up-modra); border-color: #fff;
box-shadow: inset 0 0 0 2px var(--up-akce);
}
.up-tl:focus-visible, .up-pole:focus-visible { outline: 3px solid #FFD08A; outline-offset: 2px; }
/* Nabídka „⋯“: přepínače a řidší akce, ať lišta zůstane v jedné řadě. */
.up-nabidka { position: relative; }
.up-tl--nabidka { font-size: 22px; line-height: 1; padding: 0 12px; }
.up-nabidka__seznam {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 9050;
min-width: 260px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
background: #fff; color: #0D141C; border-radius: 12px;
box-shadow: 0 12px 34px rgba(8, 18, 30, .35);
}
.up-nabidka__seznam .up-tl {
width: 100%; justify-content: flex-start; text-align: left; white-space: normal;
background: none; border-color: transparent; color: #0D141C; box-shadow: none;
font-weight: 600; padding: 0 12px;
}
.up-nabidka__seznam .up-tl:hover:not(:disabled) { background: #FFF1E2; }
.up-nabidka__seznam .up-tl[aria-pressed]::before { content: "○"; display: inline-block; width: 1.4em; color: #8C9BAB; }
.up-nabidka__seznam .up-tl[aria-pressed="true"] { background: #fff; color: #0D141C; }
.up-nabidka__seznam .up-tl[aria-pressed="true"]::before { content: "✓"; color: var(--up-akce); }
.up-nabidka__seznam .up-tl:focus-visible { outline: 3px solid #CC5803; outline-offset: -2px; }
/* --- upravitelný text --------------------------------------------------- */
/* Značka upravitelného pole se kreslí zásadně JEN mimo text: podtržení,
obrys kolem a tužka za koncem. Na `background` ani `color` prvku se v
klidu a při najetí nesahá.
Proč tak přísně: část nadpisů na webech má barvu písma z přechodu
(background:linear-gradient + background-clip:text + color:transparent).
U takového prvku JE pozadí tím písmem – jakmile ho editor přepsal svou
barvou, zůstala jen průhledná barva textu a nadpis po najetí zmizel.
Obrys se kreslí vně prvku, takže nemůže nic zakrýt ani zrušit. Je to
`outline`, ne `box-shadow`: stín si některé weby kreslí samy a přepsat
ho při najetí by bylo vidět jako cuknutí. */
.up-pole {
position: relative;
cursor: text;
text-decoration: underline 1px rgba(204, 88, 3, .55);
text-underline-offset: 3px;
text-decoration-skip-ink: none;
/* Zaoblení se nenastavuje. Obrys kopíruje border-radius prvku, takže
kulatý štítek nebo tlačítko zůstane kulaté i se značkou; vlastní
hodnota tady přebíjela zaoblení webu a z pilulky dělala hranatý rámeček. */
transition: outline-color .13s, text-decoration-color .13s;
outline: 2px solid transparent; outline-offset: 2px;
}
/* Podtržení zesílí spolu s obrysem. Obrys může uvnitř ořezaného rámečku
(overflow:hidden) chybět, podtržení je součástí sazby a zůstane vždy. */
/* Po najetí žádný obrys: obdélník kolem textu působil jako rámeček
formuláře uprostřed stránky. Místo něj tužka jako kurzor a silnější
podtržení. Obrys zůstává jen pro klávesnici (focus-visible) a při psaní. */
.up-pole:hover {
outline-color: transparent;
text-decoration-color: var(--up-akce);
text-decoration-thickness: 2px;
cursor: url("data:image/svg+xml;utf8,") 3 21, text;
}
/* Při procházení klávesnicí zůstává světlý prstenec z pravidla výše,
mění se jen podtržení, ať je poznat, že jde o upravitelné pole. */
.up-pole:focus-visible {
text-decoration-color: var(--up-akce);
text-decoration-thickness: 2px;
}
/* Režim „Co jde upravit“ z lišty. Označí každé upravitelné místo naráz,
ať se na ně nepřichází najížděním myší přes celou stránku.
Značkou v přehledu je JEN tečkovaná linka pod textem, žádný obrys a žádná
tužka. Obrys kolem každého pole se u textů nad sebou (název firmy a
podtitul, telefon a věta pod ním) křížil a ze záhlaví byla mříž. Obrys a
tužka patří jen tomu jednomu poli, na které se zrovna míří. */
html.up-ukaz .up-pole {
outline-color: transparent;
text-decoration: underline 2px dotted rgba(204, 88, 3, .75);
text-underline-offset: 4px;
}
html.up-ukaz .up-pole:hover, html.up-ukaz .up-pole:focus-visible {
text-decoration-style: solid;
text-decoration-color: var(--up-akce);
}
html.up-ukaz .up-pole:focus-visible { outline-color: var(--up-akce); }
html.up-ukaz .up-pole::after { opacity: 0; pointer-events: none; }
html.up-ukaz .up-pole:focus-visible::after { opacity: 1; pointer-events: auto; }
/* Na dotyku najetí není, tak zůstává tečkovaná linka a malá tužka za koncem. */
@media (hover: none) { html.up-ukaz .up-pole::after { opacity: .45; pointer-events: auto; } }
/* Pole ve volbě, která zrovna není vybraná. Klepnutí tam patří prvku, ne
editoru, takže se značka ztlumí a tužka nesvítí – nic neslibuje úpravu,
která by se teď nestala. */
.up-pole--ceka, .up-pole--ceka:hover { cursor: pointer; }
.up-pole--ceka::after { display: none; }
.up-pole--ceka, html.up-ukaz .up-pole--ceka, .up-pole--ceka:hover {
outline-color: transparent;
text-decoration-color: rgba(204, 88, 3, .3);
text-decoration-thickness: 1px;
}
/* Tužka. Je to ::after, takže nezasahuje do sazby, ale pořád se na ni dá
klepnout a plocha má 44 px kvůli palci. */
.up-pole::after {
/* Plocha má 44 px kvůli palci, ale samotná tužka sedí až za koncem textu,
aby ho nepřekrývala. Přesah přes prvek je 18 px, tedy míň než vnitřní
okraj .wrap, takže ani na 375 px nevznikne vodorovné posouvání. */
content: ""; position: absolute; right: -18px; top: 50%;
width: 44px; height: 44px; transform: translateY(-50%);
background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CC5803' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") no-repeat right 1px center / 17px 17px;
opacity: 0; pointer-events: none; transition: opacity .13s;
}
/* Text až u okraje okna: tužka uvnitř, jinak by stránka byla širší (editor.js, oznacKraje). */
.up-pole.up-pole--kraj::after { right: 0; }
/* Tužka za textem jen při zaostření klávesnicí a při psaní; myš má tužku
jako kurzor a druhá by byla navíc. */
.up-pole:focus-visible::after, .up-pole.je-upravovany::after { opacity: 1; pointer-events: auto; }
/* Na dotyku najetí neexistuje, takže tužky svítí rovnou. */
@media (hover: none) { .up-pole::after { opacity: .6; pointer-events: auto; } }
/* Obal kolem kusu věty (data-obsah-obal) ve vydaném webu není, sazeč ho
rozbalí. Pravidla webu, která na něj přesto dosáhnou (`.stitekmapy span
{display:block}` u autolakovny), by v úpravách rozlámala adresu na
řádky jiným písmem. Obal proto jen dědí. Při psaní vzhled drží editor. */
[data-obsah-obal]:not(.je-upravovany) {
display: inline !important; font: inherit !important; color: inherit !important;
margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
}
/* Ovládací prvek stránky (tlačítko akce, odkaz v menu, viz akcniObal
v editor.js): klepnutí patří stránce, text se přepisuje tužkou za ním.
Tužka proto svítí napořád, nejen při zaostření. Klepnout se na ni dá
jen při najetí na prvek, jinak by vyčnívající plocha brala klepnutí
sousednímu tlačítku. */
.up-pole--akce, .up-pole--akce:hover { cursor: pointer; }
.up-pole--akce::after, html.up-ukaz .up-pole--akce::after {
opacity: .55;
cursor: url("data:image/svg+xml;utf8,") 3 21, text;
}
.up-pole--akce:hover::after, html.up-ukaz .up-pole--akce:hover::after { opacity: 1; pointer-events: auto; }
/* Při psaní editor vzhled prvku naopak převezme celý – to je jediné místo,
kde se pozadí i barva písma přebíjejí. Musí se proto vypnout všechno, čím
si web kreslí písmo jinak než plnou barvou: přechod na pozadí,
background-clip:text, průhledná barva, -webkit-text-fill-color i stín.
Kdyby kterákoliv z nich zůstala, pole by při psaní bylo prázdné. */
.up-pole.je-upravovany {
background-color: #FFF8EF;
background-image: none;
-webkit-background-clip: border-box; background-clip: border-box;
cursor: text; box-shadow: none; text-shadow: none;
outline: 2px solid var(--up-akce); outline-offset: 3px;
text-decoration: none; white-space: pre-wrap;
}
/* Tmavé sekce i přechodové nadpisy: vynutí se prvku i všemu uvnitř. Potomci
se po potvrzení stejně nahradí čistým textem, takže se tu nic neztratí. */
.up-pole.je-upravovany, .up-pole.je-upravovany * {
color: #0D141C; -webkit-text-fill-color: #0D141C;
background-image: none; text-shadow: none;
-webkit-background-clip: border-box; background-clip: border-box;
}
.up-pole.je-chybny { outline-color: var(--up-chyba); background-color: #FFF1F0; }
/* Pole, které se právě edituje, vypadá stejně v obou režimech. Režim
„Co jde upravit“ má pravidlo `html.up-ukaz .up-pole` se specificitou
(0,2,1) a `html.up-ukaz .up-pole:hover` (0,3,1). Obě přebíjejí
`.up-pole.je-upravovany` (0,2,0), takže editované pole si v přehledu
drželo tečkovanou linku a při najetí myší ji přepínalo na plnou: blikání
při každém pohybu myši nad textem, do kterého se píše. Tady se specificita
dorovná (0,3,1) a (0,4,1), pravidlo stojí až za oběma, a editované pole
nemá podtržení ani v přehledu, jen obrys a tužku jako všude jinde. */
html.up-ukaz .up-pole.je-upravovany,
html.up-ukaz .up-pole.je-upravovany:hover {
text-decoration: none;
outline-color: var(--up-akce);
}
html.up-ukaz .up-pole.je-upravovany::after { opacity: 1; pointer-events: auto; }
.up-hlaska {
position: absolute; z-index: 9100; max-width: min(88vw, 340px);
background: var(--up-chyba); color: #fff; border-radius: 8px;
padding: 9px 12px; font: 600 14px/1.4 system-ui, sans-serif;
box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}
/* --- formulář na otevírací dobu ----------------------------------------- */
.up-zaclona {
position: fixed; inset: 0; z-index: 9200; background: rgba(8, 18, 30, .55);
display: flex; align-items: center; justify-content: center; padding: 16px;
}
/* Mřížka ikon stojí nad editorem prvku, ne místo něj. */
.up-zaclona--nad { z-index: 9250; }
.up-okno {
background: #fff; color: #0D141C; border-radius: 14px; width: min(460px, 100%);
max-height: 88vh; overflow: auto; padding: 20px;
font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
box-shadow: 0 20px 50px rgba(8, 18, 30, .4);
box-sizing: border-box;
}
.up-okno h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.up-okno p.up-popis { margin: 0 0 16px; font-size: 14px; color: #55677B; }
.up-den { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 8px; align-items: center; margin-bottom: 10px; }
/* Druhý blok dne (po pauze) na dalším řádku pod prvním, pod časy. */
.up-den__pauza { grid-column: 1; text-align: right; font-size: 12.5px; color: #55677B; }
.up-den[data-zavreno] .up-den__pauza { opacity: .4; }
.up-den input.up-den__cas:disabled { opacity: .4; }
.up-den > label:first-child { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.up-den input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--up-modra-sv); }
.up-den input.up-den__cas {
min-height: 44px; padding: 0 8px; font: inherit; border: 1px solid #C6D0DB;
border-radius: 8px; background: #fff; color: inherit;
}
.up-den[data-zavreno] input.up-den__cas { opacity: .4; }
.up-okno .up-den input[type="checkbox"] { width: 22px; }
.up-okno .up-den input.up-den__cas { width: 7.2em; }
.up-okno__tlacitka { display: flex; gap: 10px; margin-top: 18px; }
.up-okno__tlacitka .up-tl { flex: 1; background: #EBF0F5; border-color: #C6D0DB; color: #0D141C; }
.up-okno__tlacitka .up-tl--hlavni { background: var(--up-akce); border-color: transparent; color: #fff; }
.up-okno__chyba { margin-top: 12px; color: var(--up-chyba); font-weight: 700; font-size: 14px; }
/* --- oznámení ----------------------------------------------------------- */
.up-zprava {
position: fixed; left: 50%; transform: translateX(-50%);
top: calc(var(--up-lista) + 10px); z-index: 9300;
background: var(--up-modra); color: #fff; border-radius: 10px;
padding: 12px 16px; font: 600 15px/1.35 system-ui, sans-serif;
max-width: min(92vw, 480px); box-shadow: 0 10px 30px rgba(8, 18, 30, .35);
}
.up-zprava.je-ok { background: var(--up-ok); }
.up-zprava.je-chyba { background: var(--up-chyba); }
.up-zprava.je-pozor { background: var(--up-akce); }
/* --- web drží někdo jiný -------------------------------------------------- */
/* Nejde o oznámení, ale o překážku: dokud se web neuvolní, nemá cenu psát.
Proto panel uprostřed a ne pruh, který za pět vteřin zmizí. */
.up-obsazeno {
position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
z-index: 9500; background: #fff; color: #0D141C;
border-radius: 14px; padding: 22px 24px;
max-width: min(92vw, 440px);
box-shadow: 0 24px 60px rgba(8, 18, 30, .45);
font: 16px/1.5 system-ui, sans-serif;
}
.up-obsazeno p { margin: 0 0 16px; }
.up-obsazeno .tlacitka { display: flex; gap: 10px; flex-wrap: wrap; }
.up-obsazeno button {
font: inherit; font-weight: 600; min-height: 48px;
background: var(--up-modra); color: #fff; border: 0; border-radius: 8px;
padding: 12px 18px; cursor: pointer;
}
.up-obsazeno button.tise { background: #fff; color: var(--up-modra); border: 1px solid #B8C4D0; }
.up-obsazeno button[disabled] { opacity: .6; cursor: default; }
/* --- opakující se skupiny ------------------------------------------------ */
/* Prázdné pole nové položky nemá nulovou výšku, jinak by na ni nešlo kliknout. */
.up-pole:empty::before {
content: "Napište text";
/* Vlastní barva, ne zděděná: u přechodového nadpisu je zděděná barva
průhledná a výzva by nebyla vidět. Oranžová drží na světlém i tmavém. */
color: var(--up-akce); -webkit-text-fill-color: var(--up-akce);
font-style: italic;
}
.up-polozka { position: relative; }
/* Ovládání položky sedí nad pravým horním rohem položky, ne v něm: v rohu
ležela cena řádku ceníku (kavárna, vinotéka) a ovládání ji zakrývalo.
V klidu je schované, ukáže se po najetí na položku nebo po zaostření,
a při psaní v položce zmizí úplně. Kde by nad položkou narazilo (pruh
prvku, patička, hlavička), přesune ho editor.js dovnitř do rohu. */
.up-ovladani {
position: absolute; top: 0; right: 4px; z-index: 30; transform: translateY(-80%);
display: flex; gap: 2px; opacity: 0; pointer-events: none; transition: opacity .13s;
background: rgba(255, 255, 255, .92); border: 1px solid #C6D0DB; border-radius: 10px;
box-shadow: 0 4px 14px rgba(13, 20, 28, .12);
}
.up-ovladani--uvnitr { top: 4px; transform: none; }
.up-polozka:hover > .up-ovladani, .up-polozka:focus-within > .up-ovladani,
tr.up-polozka:hover > td > .up-ovladani, tr.up-polozka:focus-within > td > .up-ovladani,
.up-ovladani:hover { opacity: 1; pointer-events: auto; }
.up-polozka:has(.je-upravovany) .up-ovladani { display: none; }
/* Na dotyku najetí není: ovládání stojí v toku jako řádek pod položkou,
vidět pořád, nic nezakrývá a nesráží se s ovládáním sousední položky. */
@media (hover: none) {
.up-ovladani {
/* relative se z-indexem: nad tužkou položky, která je sama textem (odrážka) */
position: relative; z-index: 31; transform: none; opacity: 1; pointer-events: auto;
/* Levý okraj doplní řádek do plné šířky (tři tlačítka po 44 px, dvě
mezery a rámeček), aby se ovládání zalomilo pod položku i tam, kde
je položka krátká; s okrajem auto zůstalo vedle a odsunulo cenu.
Položka užší než ovládání (štítek obce) dostane okraj 0, ne záporný. */
width: max-content; margin: 6px 0 4px max(0px, 100% - 3 * 44px - 2 * 2px - 2px);
flex: 0 0 auto; grid-column: 1 / -1; align-self: flex-end;
}
.up-polozka:has(> .up-ovladani) { flex-wrap: wrap; }
}
/* Tři ovládací tlačítka mají stejný rámeček i stejně velkou ikonu, ať je
v řadě řád. Najetí je jemný šedý podklad a oranžová ikona, ne barevný
čtverec, který na světlém okně vypadal jako chyba pozadí. */
.up-ovl {
appearance: none; border: 0; background: none; cursor: pointer;
width: 44px; height: 44px; border-radius: 9px; color: #0F2338;
display: inline-flex; align-items: center; justify-content: center; padding: 0;
transition: background .12s, color .12s;
}
.up-ovl svg { width: 18px; height: 18px; display: block; }
.up-ovl:hover:not(:disabled) { background: rgba(204, 88, 3, .1); color: var(--up-akce); }
.up-ovl:disabled { opacity: .28; cursor: default; }
.up-ovl:focus-visible { outline: 3px solid #CC5803; outline-offset: -2px; }
/* Patička je jediné místo, kde je vidět, že skupina nad ní je seznam: kolik
položek má, kolik jich smí mít a jak se upraví ta vybraná. Proto má vlastní
podklad a nesplývá s webem pod sebou. */
.up-paticka {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 14px; padding: 10px 12px;
border: 1.5px dashed rgba(204, 88, 3, .5); border-radius: 12px;
/* Vlastní neprůhledný podklad: patička stojí na tmavých i světlých sekcích
a čitelná musí být na obou. */
background: #FFF6EE; color: #33455A;
font: 500 14.5px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* Ve sloupcové sazbě (columns) nemá patička utéct od svého seznamu do
dalšího sloupce. */
break-before: avoid;
}
.up-tl--pridat { background: #0F2338; border-color: transparent; color: #fff; }
.up-tl--pridat:hover:not(:disabled) { background: #14508C; }
.up-paticka__duvod { color: #55677B; max-width: 42em; }
/* Dlouhý popisek („+ Přidat sladkou položku nebo polévku“) se na telefonu
zalomí uvnitř tlačítka, místo aby přetekl přes okraj stránky. */
.up-paticka .up-tl { flex: 0 1 auto; max-width: 100%; white-space: normal; line-height: 1.25; text-align: left; }
/* --- výběr ikony --------------------------------------------------------- */
.up-ikony { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; }
.up-ikona {
appearance: none; cursor: pointer; background: #fff; color: #0F2338;
border: 1.5px solid #C6D0DB; border-radius: 12px;
min-width: 64px; min-height: 64px; display: flex; align-items: center; justify-content: center;
}
.up-ikona svg { width: 26px; height: 26px; }
.up-ikona:hover { border-color: #CC5803; background: #FFF6EE; }
.up-ikona[aria-checked="true"] { border-color: #CC5803; border-width: 2.5px; background: #FFF1E2; }
.up-ikona:focus-visible { outline: 3px solid #CC5803; outline-offset: 2px; }
/* --- řádky formuláře ----------------------------------------------------- */
.up-radek { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.up-radek label { font-weight: 700; font-size: 14px; color: #33455A; }
.up-radek input[type="text"], .up-radek textarea, .up-radek select {
font: inherit; min-height: 44px; padding: 8px 10px;
border: 1px solid #C6D0DB; border-radius: 9px; background: #fff; color: inherit;
width: 100%;
}
.up-radek textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.up-radek--vice label { margin-bottom: 0; }
.up-radek input:focus-visible, .up-radek textarea:focus-visible, .up-radek select:focus-visible {
outline: 3px solid #CC5803; outline-offset: 1px;
}
.up-tl--ikona { align-self: flex-start; background: #EBF0F5; border-color: #C6D0DB; color: #0D141C; }
/* Zobrazení ceny jako věta: předpona, jednotka s kategoriemi, náhled. */
.up-tvar__rada { display: flex; gap: 8px; }
.up-radek .up-tvar__predpona { width: auto; flex: 0 0 auto; }
.up-radek .up-tvar__jednotka { flex: 1 1 auto; min-width: 0; }
.up-tvar__nahled { font-size: 14px; color: #33455A; }
/* --- editor celého prvku ------------------------------------------------- */
/* Prvek se neupravuje po kouscích, ale jedním tlačítkem. Tlačítka stojí
v pruhu v toku před prvkem (před mřížkou, když je prvek její buňkou):
nic nezakrývají, nesráží se s hlavičkou webu ani s ovládáním položek
a nerozbijí mřížku. V úpravách se stránka o pruh prodlouží. */
.up-prvek { position: relative; }
.up-prvek__akce {
/* Pod hlavičkou webu (ukázky jí dávají z-index 40), aby tlačítka
nevyčnívala přes otevřené mobilní menu. */
position: relative; z-index: 35; box-sizing: border-box;
display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
padding: 8px 12px 8px 0; clear: both;
}
.up-prvek__tl {
position: static;
background: var(--up-akce); border-color: transparent; color: #fff;
min-height: 38px; padding: 0 16px; font-size: 14.5px;
box-shadow: 0 6px 18px rgba(8, 18, 30, .35);
}
.up-prvek__tl--vedlejsi { background: #fff; border-color: var(--up-akce); color: var(--up-akce); }
/* Stejná specificita jako obecné pravidlo pro najetí, jinak by tlačítko
prvku po najetí zbělalo do průhledna. */
.up-prvek__tl:hover:not(:disabled) { background: #E06504; }
.up-prvek__tl--vedlejsi:hover:not(:disabled) { background: #FFF4E8; color: #A94702; }
.up-prvek {
outline: 2px dashed rgba(204, 88, 3, .45); outline-offset: 6px;
border-radius: 4px;
}
.up-prvek:hover { outline-color: var(--up-akce); }
.up-okno--siroke { width: min(760px, 100%); }
.up-oddil { margin: 0 0 22px; }
.up-oddil__nadpis {
margin: 0 0 2px; font-size: 15px; font-weight: 800; color: var(--up-modra);
padding-bottom: 6px; border-bottom: 2px solid #E4EBF2;
}
.up-oddil__popis { margin: 6px 0 12px; font-size: 13.5px; color: #55677B; }
.up-oddil__paticka { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.up-oddil__pocet { font-size: 13.5px; color: #55677B; }
/* Karta jedné položky. Číslo i úchyt jsou nahoře, ať je na první pohled
vidět, kolikátá je a že se s ní dá hýbat. */
.up-karty { display: flex; flex-direction: column; gap: 10px; }
.up-karta {
border: 1.5px solid #D7E0E9; border-radius: 12px; padding: 10px 12px 4px;
background: #FBFCFD;
}
.up-karta.je-tazena { opacity: .55; border-color: var(--up-akce); }
.up-karty.je-taha { cursor: grabbing; }
.up-karta__hlava { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.up-karta__cislo { font-size: 14px; font-weight: 700; color: #55677B; }
.up-karta__mriz { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.up-karta__mriz > .up-radek--siroky { grid-column: 1 / -1; }
/* V mřížce položky mají všechna pole popisek nad sebou, i částka. */
.up-karta__ovl { display: flex; gap: 2px; margin-left: auto; }
.up-karta__ovl { gap: 4px; }
.up-karta__ovl .up-ovl { width: 34px; height: 34px; border-radius: 8px; }
.up-karta__ovl .up-ovl svg { width: 16px; height: 16px; }
.up-varianty-cen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 10px; }
.up-cenova-varianta { padding: 12px; border: 1.5px solid #C6D0DB; border-radius: 11px; background: #fff; }
.up-cenova-varianta.je-neuplna { border-color: #C55200; background: #FFF6EE; }
.up-cenova-varianta h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.up-cenova-varianta h4 span { padding: 2px 7px; border-radius: 100px; background: #FFE5D0; color: #8A3B02; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.up-cenova-varianta .up-radek:last-child { margin-bottom: 0; }
.up-uchyt {
cursor: grab; touch-action: none; user-select: none;
font-size: 19px; line-height: 1; color: #8C9BAB;
padding: 10px 6px; border-radius: 8px;
}
.up-uchyt svg { width: 16px; height: 16px; display: block; }
.up-uchyt:hover { background: rgba(204, 88, 3, .1); color: var(--up-akce); }
/* Částka a k ní rovnou to, kam všude dosáhne: vedle sebe, ať se cena nemění
v domnění, že jde jen o tuhle dlaždici. */
.up-radek.up-radek--castka { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 2px 12px; }
.up-radek.up-radek--castka > label { flex: 0 0 auto; margin: 0; }
.up-radek--castka .up-radek__pozn { flex: 1 1 16em; }
.up-radek--castka .up-radek__chyba { flex: 1 1 100%; }
/* V mřížce položky mají všechna pole popisek nad sebou, i částka. Stojí
až za obecným pravidlem řádku s částkou, aby ho přebilo. */
.up-karta__mriz .up-radek.up-radek--castka { flex-direction: column; align-items: stretch; gap: 4px; }
.up-karta__mriz .up-radek.up-radek--castka .up-castka input { width: auto; flex: 1 1 auto; }
/* Částka. Jednotka je v poli, ne v textu vedle, ať je jasné, co se píše. */
.up-castka { display: flex; align-items: center; gap: 0; }
.up-castka input {
font: 700 16px/1 inherit; min-height: 44px; width: 7.5em; text-align: right;
padding: 8px 10px; border: 1px solid #C6D0DB; border-right: 0;
border-radius: 9px 0 0 9px; background: #fff; color: inherit;
}
.up-castka span {
min-height: 44px; display: flex; align-items: center; padding: 0 12px;
border: 1px solid #C6D0DB; border-radius: 0 9px 9px 0;
background: #EBF0F5; font-weight: 700; font-size: 14px; color: #33455A;
}
.up-castka input:focus-visible { outline: 3px solid #CC5803; outline-offset: 1px; }
.up-castka input.je-chybny { border-color: var(--up-chyba); background: #FFF1F0; }
.up-radek__pozn { font-size: 12.5px; color: #55677B; }
.up-radek__chyba { font-size: 13px; font-weight: 700; color: var(--up-chyba); }
/* Co prvek počítá sám. Vypadá schválně jinak než pole: přepsat to nejde. */
.up-nahled {
margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px;
background: var(--up-modra); color: #fff; font-size: 14px;
}
.up-nahled > b { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; opacity: .75; text-transform: uppercase; letter-spacing: .04em; }
.up-nahled__radek {
display: flex; justify-content: space-between; gap: 14px;
padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .14);
}
.up-nahled__radek:first-of-type { border-top: 0; }
.up-nahled__radek b { white-space: nowrap; font-weight: 800; }
/* --- počítadlo znaků ----------------------------------------------------- */
.up-pocitadlo {
position: absolute; z-index: 9100;
background: #0F2338; color: #fff; border-radius: 7px;
padding: 4px 9px; font: 700 12.5px/1.4 system-ui, sans-serif;
box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}
.up-pocitadlo.je-chyba { background: #B3261E; }
/* --- úzká obrazovka ----------------------------------------------------- */
.up-tl--nova-cena { align-self: flex-start; margin-top: 8px; background: #fff; border-color: #CC5803; color: #8A3B02; }
.up-tl--nova-cena:hover:not(:disabled) { background: #FFF1E2; }
.up-nova-cena { padding: 12px; margin-top: 10px; border: 1px solid #C6D0DB; border-radius: 10px; background: #EEF3F8; }
.up-nova-cena > p { font-size: 13px; margin: 0 0 12px; }
.up-nova-cena > .up-tl { margin: 4px 6px 0 0; }
.up-nova-cena > .up-tl:not(.up-tl--hlavni) { background: #fff; border-color: #C6D0DB; color: #0D141C; }
.up-tl--nova-cena:focus-visible, .up-nova-cena .up-tl:focus-visible { outline-color: #CC5803; }
.up-karta, .up-karta__mriz > *, .up-nova-cena { min-width: 0; }
.up-radek select { max-width: 100%; }
/* --- panel vedle stránky --------------------------------------------------- */
/* Druhá podoba editoru prvku: panel u pravého okraje, stránka vedle něj
zůstává vidět a po každé změně se složí znovu. Web se posune doleva,
aby se vešel vedle, na úzké obrazovce panel vyjede zdola. */
:root { --up-panel: min(440px, 46vw); }
.up-panel {
position: fixed; top: var(--up-lista); right: 0; bottom: 0; z-index: 9200;
width: var(--up-panel); display: flex; flex-direction: column;
background: #fff; color: #0D141C;
font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
box-shadow: -14px 0 40px rgba(8, 18, 30, .28); box-sizing: border-box;
}
.up-panel__hlava {
display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 18px;
border-bottom: 2px solid #E4EBF2;
}
.up-panel__hlava h2 { flex: 1; font-size: 18px; font-weight: 800; }
.up-panel__zavrit { flex: 0 0 auto; }
.up-panel__telo { flex: 1 1 auto; overflow: auto; padding: 14px 18px 8px; }
.up-panel p.up-popis { margin: 0 0 14px; font-size: 13.5px; color: #55677B; }
.up-panel__tlacitka { margin: 0; padding: 10px 18px 12px; border-top: 2px solid #E4EBF2; background: #fff; }
.up-panel .up-okno__chyba { margin-top: 12px; color: var(--up-chyba); font-weight: 700; font-size: 14px; }
/* Úzké místo: pole pod sebou, i v tabulce ceníku. */
.up-panel .up-karta__mriz { grid-template-columns: 1fr; }
.up-panel .up-cena__radek select { flex-basis: 100%; }
.up-panel .up-karta--radek .up-karta__telo { grid-template-columns: 1fr; }
html.up-s-panelem body { padding-right: var(--up-panel); }
/* Při otevřeném panelu je stránka náhled, ne editor: dvě rozepsané verze
téhož by se přepsaly. Tužky zhasnou, ovládání seznamů a prvků ustoupí. */
html.up-s-panelem .up-pole { pointer-events: none; text-decoration-color: transparent; outline-color: transparent; }
html.up-s-panelem .up-pole::after { display: none; }
/* Tlačítka prvků a položek při otevřeném panelu zmizí docela: ztlumená
vypadala jako rozbitá. Patička seznamu zůstává, jen ustoupí. */
html.up-s-panelem .up-ovladani, html.up-s-panelem .up-prvek__akce { display: none; }
html.up-s-panelem .up-paticka { opacity: .5; pointer-events: none; }
html.up-s-panelem .up-prvek { outline-color: transparent; }
.up-tl--rezim[aria-pressed="true"] { background: #fff; color: var(--up-modra); border-color: #fff; box-shadow: inset 0 0 0 2px var(--up-akce); }
@media (max-width: 900px) {
:root { --up-panel: 100%; }
.up-panel { top: auto; height: 62vh; border-radius: 16px 16px 0 0; box-shadow: 0 -14px 40px rgba(8, 18, 30, .28); }
html.up-s-panelem body { padding-right: 0; padding-bottom: 62vh; }
}
/* --- řádky položek v okně ------------------------------------------------- */
/* Sbalený řádek říká, co položka je; rozbalí se nejvýš jeden. Šest úkonů
je tak šest řádků, ne šest obrazovek formuláře. */
.up-karta { padding: 6px 10px 6px 6px; }
.up-karta__hlava { margin-bottom: 0; }
.up-karta__souhrn {
appearance: none; border: 0; background: none; cursor: pointer;
flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 6px 8px; border-radius: 8px;
font: inherit; font-size: 14.5px; color: #0D141C; text-align: left;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.up-karta__souhrn::before { content: "▸"; display: inline-block; width: 14px; color: #8C9BAB; }
.up-karta.je-rozbalena .up-karta__souhrn::before { content: "▾"; color: var(--up-akce); }
.up-karta__souhrn:hover { background: rgba(204, 88, 3, .1); }
.up-karta__souhrn:focus-visible { outline: 3px solid #CC5803; outline-offset: -2px; }
.up-karta__souhrn b { font-weight: 800; }
.up-karta__souhrn span { color: #55677B; }
.up-karta__souhrn i { color: #B3261E; font-style: italic; }
.up-karta__telo { display: none; padding: 10px 6px 4px; }
.up-karta.je-rozbalena { border-color: var(--up-akce); background: #fff; }
.up-karta.je-rozbalena .up-karta__telo { display: block; }
.up-karta__mriz { margin-top: 0; }
/* Ceník je tabulka: název, částka a zobrazení vedle sebe. */
.up-karta--radek .up-karta__telo { display: grid; grid-template-columns: 1fr auto 11em; gap: 0 10px; align-items: start; padding-top: 4px; }
.up-karta--radek .up-radek { margin-bottom: 6px; }
.up-karta--radek .up-radek--castka { flex-direction: column; align-items: stretch; gap: 4px; }
.up-karta--radek .up-karta__pozn { grid-column: 1 / -1; margin: 0 0 4px; }
.up-karty--radky .up-karta__hlava .up-karta__cislo { margin-right: auto; }
/* Cena: výběr z ceníku a hned vedle částka. Pod ní jen to, kam ještě dosáhne. */
.up-cena.je-neuplna select { border-color: #C55200; background: #FFF6EE; }
.up-cena__radek { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.up-cena__radek select { flex: 1 1 12em; min-width: 0; width: auto; }
.up-cena__radek .up-castka input { width: 6.5em; }
.up-cena__dosah { font-size: 12.5px; color: #55677B; }
.up-castka--bez input { border-right: 1px solid #C6D0DB; border-radius: 9px; }
.up-castka input:disabled { background: #F2F5F8; color: #8C9BAB; }
/* Tlačítko ikony ukazuje ikonu, ne její jméno. */
.up-tl--ikona { display: inline-flex; align-items: center; gap: 8px; }
.up-tl--ikona svg { width: 22px; height: 22px; }
@media (max-width: 620px) {
.up-karta--radek .up-karta__telo { grid-template-columns: 1fr; }
.up-cena__radek select { flex-basis: 100%; }
}
@media (max-width: 620px) {
/* Jen výchozí hodnota, než se lišta poprvé změří. Skutečnou výšku píše
editor.js, protože kolik řad tlačítek bude, závisí na šířce i na
velikosti písma, kterou si nastavil uživatel telefonu. */
:root { --up-lista: 104px; }
.up-karta__mriz { grid-template-columns: 1fr; }
.up-varianty-cen { grid-template-columns: 1fr; }
.up-prvek__akce { padding-right: 8px; }
.up-lista { gap: 8px; padding: 8px 10px; }
/* Stavový text si nechá aspoň 9 em, zbytek dostanou tlačítka; co se
nevejde, přesune editor.js do nabídky. Věta pod nadpisem nejvýš na dva
řádky, celá zůstává v title. */
.up-lista__pocet { flex: 1 1 9em; min-width: 9em; }
.up-lista__pocet small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.up-lista__akce { gap: 8px; }
.up-lista__pocet b { font-size: 14.5px; }
.up-lista__pocet small { font-size: 11.5px; }
/* `flex: 1` (tedy basis 0) rozdělilo řadu na stejné díly bez ohledu na text
a nejdelší popisek se uřízl o okraj obrazovky. Tlačítko proto vychází ze
své šířky a smí se zalomit do další řady; lišta se o to povyšší. */
.up-lista__akce > .up-tl { flex: 0 0 auto; padding: 0 12px; font-size: 14.5px; }
.up-pole::after { right: -15px; background-size: 15px 15px; }
}
@media (prefers-reduced-motion: reduce) {
.up-pole, .up-pole::after, .up-tl { transition: none; }
}
/* Poznámka pod cenou má v řádkové podobě pružit do šířky (flex-basis 16em).
Ve sloupcové podobě (mřížka nastavení, karta) by ta samá základna byla
výška, a řádek pak měřil šestnáct em prázdna. */
.up-karta__mriz .up-radek--castka .up-radek__pozn,
.up-karta--radek .up-radek--castka .up-radek__pozn { flex: 0 0 auto; }
/* Pole s fotkou: náhled vedle tlačítka, cesta se nikam nepíše. */
.up-foto__telo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.up-foto__nahled { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid #C6D0DB; background: #EBF0F5; }
.up-foto__nahled[hidden] { display: none; }