/* ══════════════════════════════════════════════════════════════════════════ Tenants — designový systém · paleta ORBITA „Klidný pracovní prostor": vlásková linka místo stínů, čísla tabulkově zarovnaná. Návrh: design/tenants-redesign, směr Q „Orbita". ORBITA MÁ DVĚ AKCENTOVÉ ROLE, NE JEDNU, a je to ten hlavní rozdíl proti předchozí indigové paletě: --pm-accent hluboká modrá #12203A — nese VÝZNAM: odkazy, ikony, aktivní stav, postranní panel, běžné hlavní tlačítko. Na bílé má 16,3 : 1, takže funguje jako text i jako podklad pod bílým textem. Tuhle roli měl dřív indigový akcent a beze změny ji přebírá. --pm-akce kyselá limetka #C8F250 — nese JEDNU AKCI na obrazovce („Zaznamenat příjem"). NIKDY nenese text na světlém podkladu: limetka na bílé má 1,4 : 1. Vždycky je to PODKLAD a text na ní je tmavý (--pm-akce-ink, 13 : 1). Kdyby se limetka dosadila prostě za starý akcent, zmizely by všechny odkazy a ikony v aplikaci — proto ty dvě proměnné a proto se nesmí zaměnit. Limetku dávej jen tam, kde je opravdu jedna hlavní akce; jakmile bude na obrazovce potřetí, přestane být vidět a byla by to jen barva. ══════════════════════════════════════════════════════════════════════════ */ :root { /* plochy a linky */ /* PLÁTNO MUSÍ BÝT ZNATELNĚ TMAVŠÍ NEŽ KARTA. Bylo #F6F7F9, tedy o dvě procenta jasu od bílé — karta na něm nečetla jako předmět, jen jako kus téhož podkladu s rámečkem. Tím pádem byl neviditelný každý stín, který se na ni položil, a celá obrazovka působila jako jedna plocha rozdělená linkami. Tohle je ta jediná hodnota, na které stojí, jestli se rozhraní tváří vrstevnatě, nebo naplocho. */ /* ORBITA MÁ PLÁTNO #F5F6F8 — tady je o stupeň tmavší, a je to vědomá odchylka od návrhu. Důvod je ten výše: karta musí číst jako předmět ležící NA podkladu. V artboardu to drží 1px rámeček kolem každé karty, jenže karty v aplikaci jsou průsvitné (84 %) a rámeček nemají všechny. */ --pm-canvas: #ECEEF3; --pm-surface: #FFFFFF; --pm-surface-2: #FAFBFC; --pm-line: #E5E8EC; --pm-line-2: #EEF0F3; --pm-line-3: #F4F5F7; /* text */ --pm-ink: #0D1117; --pm-ink-2: #55606C; /* KONTRAST NA BÍLÉ KARTĚ, ne na plátně. `--pm-ink-3` bylo #8D95A6, což dává proti bílé 3,0 : 1 — pod hranicí 4,5 : 1, kterou WCAG AA žádá pro běžný text. Nese přitom KAŽDÝ vedlejší popisek v aplikaci: „PŘÍJEM TENTO MĚSÍC", „vs. minulý měsíc", podtitulky panelů. Teď 4,8 : 1. Není to jen norma — text, který se ztrácí, vypadá nedodělaně. `--pm-ink-4` je pro nápovědu v prázdném poli a popisky pod obrázkem, kde norma tak přísná není; 3,7 : 1 je kompromis mezi čitelností a tím, aby placeholder nešlo splést s vyplněnou hodnotou. */ --pm-ink-3: #5B6672; /* O DVA STUPNĚ TMAVŠÍ, NEŽ BY STAČILO NA BÍLOU. Karty jsou průsvitné (84 %), takže pod textem není čistá bílá, ale bílá složená s plátnem — a to sebere zhruba desetinu kontrastu. Na papírově bílé by stačilo #6E7787; na skutečném podkladu by to bylo 4,4 : 1, tedy těsně pod normou. */ --pm-ink-4: #68717E; /* akcent nesoucí VÝZNAM — odkazy, ikony, aktivní stav, hlavní tlačítko */ --pm-accent: #12203A; --pm-accent-hi: #0A1526; --pm-accent-bg: #EAEEF4; --pm-accent-rg: #D7DEE9; /* AKCE — limetka. Jen jako PODKLAD, text na ní je `--pm-akce-ink`. `--pm-akce-bg` a `--pm-akce-line` jsou pro panel, který k té akci patří (rozdělení zálohy v okně platby), ne pro další tlačítka. */ --pm-akce: #C8F250; --pm-akce-hi: #B6E43A; --pm-akce-ink: #16210A; --pm-akce-bg: #F6FCE8; --pm-akce-line: #DFE8C8; --pm-pos: #1F7A52; --pm-pos-bg: #E6F2EC; /* ORBITA MÁ ČERVENOU #D64545, ta má ale na bílé 4,4 : 1 — těsně pod AA. Nese přitom částky dluhu, tedy to nejdůležitější číslo na Přehledu. O dva stupně tmavší odstín drží tentýž tón a dá 5,5 : 1. */ --pm-neg: #C43A33; --pm-neg-2: #9F2B25; --pm-neg-bg: #FBEBEA; /* NEJMENŠÍ PÍSMO V APLIKACI (poznámky pod údajem, popisky u čísel). Je to TOKEN, ne číslo v šabloně: na telefonu se zvětšuje — a inline zapsaná hodnota by se tam nedala přebít ničím. */ --pm-fs-mikro: 11px; --pm-neg-line: #F0CBC8; --pm-warn: #A85E0A; --pm-teal: #0F766E; --pm-warn-bg: #FBF1E0; /* GRAF: hluboká modrá a olivová. Nerozlišují se odstínem, ale JASEM — modrá má na bílé 16,3 : 1, olivová 3,1 : 1, mezi sebou 5,2 : 1. Pro barvoslepého je to tedy pořád „tmavý a světlý sloupec", ne dvě barvy. Olivová, ne čistá limetka: ta má na bílé 1,4 : 1 a tenká čára v grafu by z ní zmizela. */ --pm-chart-in: #12203A; /* VÝPLŇ JE LIMETKA Z NÁVRHU, OKRAJ JE TMAVŠÍ, a ten okraj tam není pro ozdobu: limetka má na bílé 1,4 : 1, takže by horní hrana sloupce splývala s pozadím a nešlo by přečíst, kam sloupec sahá. Okraj dá tvaru obrys se 3,1 : 1, což je hranice, kterou WCAG žádá po grafickém prvku nesoucím informaci. Čára v grafu na Reportech používá rovnou tmavší odstín — tenkou limetkovou čáru by obrys nezachránil. */ --pm-chart-out: #C8F250; --pm-chart-out-hr: #7A9E2A; /* navigace — táž modrá jako akcent, panel je jedna plocha s hlavní akcí */ --pm-nav-bg: #12203A; --pm-nav-bg-2: #0C1728; --pm-nav-ink: #93A0B3; --pm-nav-ink-2: #5D6A85; /* ZNAČKA MÁ VLASTNÍ BARVY a personalizace (app/barva.php) na ně nesahá — logo se s barvou zákazníka nemění. Hodnoty jsou z předlohy v logo/ a tytéž má app/logo.php (PM_ZNACKA_*) pro soubory mimo stránku. */ --pm-znacka-bg: #1C0B36; --pm-znacka-tld: #6E4FA0; /* „.cz" na světlém */ --pm-znacka-tld-tmava: #C6F135; /* „.cz" na tmavém */ /* tvary — Orbita je o stupeň kulatější než předchozí paleta */ --pm-r-sm: 8px; --pm-r: 11px; --pm-r-md: 12px; --pm-r-lg: 16px; --pm-r-xl: 20px; /* `--pm-radius` se v projektu POUŽÍVALO, ale NIKDY NEBYLO DEFINOVANÉ — uvod.php, offline.php a mobilní část profilu se na něj odkazují na sedmi místech. Neplatná proměnná bez záložní hodnoty znamená, že `border-radius` propadne na `0`, takže ty rámečky měly ostré rohy a vedle zaoblených karet to vypadalo jako nedodělek. Zůstává jako ALIAS, ne jako druhá hodnota: dvě čísla pro totéž by se rozešla. */ --pm-radius: var(--pm-r-lg); /* maximální šířka sloupce obsahu — na širokém monitoru se řádky neprotahují do nečitelné délky */ --pm-measure: 1560px; /* Rozměry, které rostou s oknem. Místo skoků na hranicích breakpointů se odsazení i mezery mění plynule, takže mezi telefonem a monitorem nevzniká krok, kde je najednou všechno moc nalepené nebo moc rozházené. */ --pm-pad: clamp(14px, 2.2vw, 28px); /* vodorovné odsazení obsahu */ --pm-pad-y: clamp(16px, 1.8vw, 24px); /* svislé odsazení obsahu */ /* ELEVACE JE DVOUVRSTVÁ: těsný stín drží hranu, široký a slabý dává hloubku. Jedna vrstva umí jen jedno z toho — samotný těsný stín vypadá naplocho, samotný široký rozmazaně. */ --pm-shadow: 0 1px 2px rgba(13, 17, 23, .05), 0 4px 12px -2px rgba(13, 17, 23, .05); --pm-shadow-md: 0 2px 4px rgba(13, 17, 23, .05), 0 14px 32px -6px rgba(13, 17, 23, .10); --pm-shadow-lg: 0 16px 48px rgba(13, 17, 23, .13); /* Vlásková světlá linka po horní hraně. Je to jediná věc, která odliší plochu ležící NA podkladu od plochy vyříznuté DO něj — bez ní vypadají karty jako nalepené papírky. Drží se na 1 px a pod 90 % krytí, jinak z toho je plastové tlačítko z roku 2008. */ --pm-hrana: inset 0 1px 0 rgba(255, 255, 255, .9); /* Druhý odstín akcentu SLOUŽÍ JEN PŘECHODU na hlavním tlačítku a na značce. Není to druhá akcentová barva — ta je pořád jedna. */ --pm-accent-2: #26354F; --pm-accent-gl: rgba(18, 32, 58, .28); /* Začátek přechodu tmavé dlaždice na Přehledu. Token, ne hex v pravidle: barvu aplikace si majitel může změnit (app/barva.php) a dlaždice by jinak začínala modrou i u zelené značky. */ --pm-accent-tma: #1B2540; } /* ─── základ ─────────────────────────────────────────────────────────────── */ /* Šířka prvku VČETNĚ rámečku a odsazení. Bez tohoto pravidla se na stránkách, které nenačítají Tailwind (přihlášení, změna hesla, správa uživatelů), k nastavené šířce ještě přičetlo odsazení — pole pak byla o 28 px vyšší než ostatní a přetékala ze své karty. Tailwind si totéž nastavuje sám, takže se nic nerozbije. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* Vložený obrázek nebo rámec se vejde do rodiče i na úzkém displeji. Ikony (svg) mají vlastní rozměr, ty se pravidla netýká. */ img, video, canvas, iframe, embed, object { max-width: 100%; } img, video { height: auto; } /* PODKLAD NENÍ JEDNA PLOCHÁ BARVA. Rozdíl je nepatrný — nahoře o dva stupně chladnější než dole — ale obrazovka díky němu přestane být plakát a začne mít hloubku. Držet to musí POD hranicí, kde si toho někdo vědomě všimne; výraznější přechod je první věc, po které návrh vypadá jako šablona. `fixed` proto, aby se při rolování nehýbal: putující přechod upoutává pozornost, a ta patří datům. */ body { background-color: var(--pm-canvas); background-image: radial-gradient(1100px 500px at 16% -10%, rgba(18, 32, 58, .06), transparent 62%), linear-gradient(180deg, #E4E8EF 0%, var(--pm-canvas) 46%); background-attachment: fixed; color: var(--pm-ink); font-family: 'Manrope', ui-sans-serif, system-ui, 'Segoe UI', sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { letter-spacing: -0.015em; font-weight: 800; } ::selection { background: #DDDCFD; } /* čísla a data — tabulkové zarovnání drží zákryt ve sloupci */ .pm-num, .pm-table td.pm-num, input[type="number"] { font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* ČÁSTKA SE NEZALAMUJE, A TO NA KAŽDÉ ŠÍŘCE. Totéž pravidlo bylo dlouho jen v mobilním bloku (`max-width: 767px`), protože se tam projevilo nejdřív — jenže na monitoru je sloupec „Částka" mezi „Nemovitostí" a „Akcemi" taky úzký a „+18 000 Kč" se v něm lámalo na „+18 000" a „Kč" pod tím. Částka je to hlavní, kvůli čemu se na tabulku kouká, a dvě čísla pod sebou vypadají jako dva údaje. Řeší se to TADY, ne pevnou mezerou v `pm_money()`: tentýž výpis jde do exportů, dokladů a e-mailů, které už někdo má, a měnit v nich bajty kvůli zalomení na obrazovce by byla změna na nesprávném místě. */ td.pm-num, td .pm-num, .pm-num.pm-nezlom { white-space: nowrap; } /* ALE JEN NA SAMOTNOU ČÁSTKU, ne na celou buňku. Buňka s kupní cenou nese pod číslem ještě dnešní hodnotu a růst („dnes 8 900 000 Kč (+50,8 %)") a u nájmu vedle čísla visí odznak „požadovaný". Když `nowrap` dostal celý ``, přestaly se zalamovat i tyhle přívěsky — sloupce povyrostly, tabulka nemovitostí přetekla přes obsahový rám a z tlačítka „Smazat" zbylo „Sma". Vnořené prvky se proto vracejí k běžnému zalamování; holý text částky, který je přímo v buňce, zůstane vcelku. */ td.pm-num p, td.pm-num span, td.pm-num div { white-space: normal; } /* AKCE V ŘÁDKU ZŮSTÁVAJÍ NA JEDNOM ŘÁDKU. „Upravit" a „Smazat" vedle sebe se lámaly pod sebe, jakmile na ně ve sloupci nezbylo místo — a dvě slovesa pod sebou v pravém sloupci vypadají jako dva řádky tabulky, ne jako dvě akce jednoho záznamu. U „Smazat" je to obzvlášť nepříjemné: nevratná akce nemá být tam, kde člověk čeká pokračování řádku. Vybírá se to `:has()`, ne třídou v šabloně: sloupec s akcemi je v patnácti šablonách a třída zapsaná ručně by v jedné z nich chyběla — a byla by to zrovna ta, do které se nejmíň kouká. Podmínka „buňka, ve které jsou hned dva ovládací prvky" je přitom přesná: jinde v tabulce dvě tlačítka vedle sebe nejsou. Kde prohlížeč `:has()` neumí, pravidlo propadne a zalomí se to jako dřív — nic se nerozbije. JEN NA ŠIROKÉM DISPLEJI. Na telefonu se řádek vykresluje jako karta přes celou šířku a zalomení je tam správně; nowrap by kartu roztáhl do stran, což je přesně to, čemu se `.pm-sl-vedlejsi` brání. */ @media (min-width: 768px) { .pm-content td:has(> button + button), .pm-content td:has(> a + a), .pm-content td:has(> button + a), .pm-content td:has(> a + button) { white-space: nowrap; } } /* ─── posuvníky ──────────────────────────────────────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: #D2D6E0 transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: #D2D6E0; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: #B9BFCD; background-clip: content-box; } /* ─── motiv v pozadí stránky ─────────────────────────────────────────────── */ /* * Rozostřená silueta podle stránky — kancelář, dům, rodina (app/pozadi.php). * Karty nad ní jsou průsvitné, takže prosvítá skrz ně. * * ROZOSTŘUJE SE TAHLE VRSTVA, NE KARTY. `backdrop-filter` na kartě se * počítá pro každou zvlášť a na stránce s padesáti řádky tabulky je to * padesát výpočtů při každém překreslení. Tohle je jeden prvek, který se * nehýbe, takže ho prohlížeč vykreslí jednou a dál jen posouvá hotový * obrázek. * * `right: 0` a záporný spodek: kresba sedí u pravého okraje a vybíhá pod * spodní hranu. Vlevo je sloupec s nadpisy a čísly, tam pod kartami nemá * co prosvítat — a uprostřed by silueta soupeřila s obsahem. */ .pm-pozadi { /* ORBITA JE NÁVRH BEZ FOTEK A BEZ KRESEB NA POZADÍ — proto si ho zákazník taky vybral. Vrstva je VYPNUTÁ, ne smazaná: `app/pozadi.php` i motivy v `assets/pozadi/` zůstávají a stačí odstranit tenhle jeden řádek. NENÍ TO JEN VKUS. Kresba dávala smysl pod PRŮSVITNÝMI kartami, kde dělala hloubku. Karty jsou teď plné bílé, takže by z motivu zbyly barevné fleky ve spárách mezi nimi — a to nevypadá jako textura, ale jako chyba vykreslení. Buď průsvitné karty a motiv, nebo plné karty a čistá plocha; půlka od každého je ta nejhorší varianta. */ display: none; position: fixed; right: 0; bottom: 0; width: min(54vw, 760px); height: min(66vh, 640px); z-index: 0; pointer-events: none; /* BARVA JE TLUMENÉ INDIGO, ne šedá. Šedá kresba za průsvitnou kartou vypadá jako špína na skle; táž kresba v odstínu akcentu vypadá jako záměr. Je to týž akcent, jen hodně ztmavený a odbarvený — nepřibývá barva, přibývá hloubka. */ color: #2C3168; /* KRYTÍ A ROZOSTŘENÍ JSOU SVÁZANÉ. Silnější rozostření potřebuje vyšší krytí, aby z kresby nezbyl jen flek — a naopak. Tahle dvojice je nejsilnější, jakou snese text na kartách; když ji budeš zvyšovat, pusť `driver.mjs okna` a hlídej hlášení KONTRAST. */ opacity: .26; filter: blur(9px); /* Levý okraj se vytrácí, aby kresba neměla svislou hranu uprostřed stránky — bez toho vypadá jako nalepený obrázek, ne jako textura. */ -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 42%, #000 100%); mask-image: linear-gradient(100deg, transparent 0%, #000 42%, #000 100%); } .pm-pozadi svg { width: 100%; height: 100%; display: block; fill: currentColor; } /* ── Fotka místo kresby ────────────────────────────────────────────────── Když ve `assets/pozadi/` leží soubor pojmenovaný podle motivu, použije se místo kresby (app/pozadi.php). Chce to jiné zacházení: fotka má vlastní barvy a vlastní kontrast, takže se na ni nedá jen tak pustit `opacity` jako na jednobarevnou siluetu. - ZABÍRÁ VÍC MÍSTA. Malá fotka v rohu vypadá jako nalepená nálepka; velká a vybledlá vypadá jako prostředí. - MÍRNĚ ODBARVENÁ. Plná sytost pod průsvitnou kartou probarví text a čísla dostanou nádech, který tam nepatří. - MASKA MĚKČÍ DVĚ HRANY, ne jednu: fotka má obdélníkový okraj na všech stranách, zatímco kresba se do prázdna vytrácela sama. */ /* FOTKA VYPLŇUJE CELÉ OKNO a o tom, kde je vidět, rozhoduje VÝHRADNĚ maska. Dřív měla vrstva vlastní rozměr a končila uprostřed stránky svislou hranou — obrázek nalepený doprostřed plochy, přesně to, co nemá být vidět. Dvě překryté lineární masky to měly rozmlžit, jenže se skládaly sjednocením: každá zprůhlednila jinou stranu a dohromady neztmavily nic. JEDNA RADIÁLNÍ MASKA je spolehlivější — vytrácí se do všech stran naráz, takže žádná hrana nevznikne, ať je okno jakkoli široké. */ .pm-pozadi.je-foto { inset: 0; width: auto; height: auto; /* OSTŘEJI, ABY BYLO POZNAT, CO NA FOTCE JE. Při 10 px rozostření z ní zbyly jen barevné plochy a motiv se ztratil — což je totéž, jako kdyby tam nebyl. ZA OSTROST SE PLATÍ KRYTÍM: ostřejší fotka má víc míst s vysokým kontrastem, takže musí být slabší, jinak pod kartou prosvítá hrana a text na ní ztrácí čitelnost. */ opacity: .30; /* BEZ ROZOSTŘENÍ. Fotka je malá a v rohu, takže se nepotřebuje rozmlžit, aby nekonkurovala obsahu — to za ni dělá krytí a maska. Rozostření navíc bralo přesně to, kvůli čemu tam fotka je: ve tvářích se ztrácel úsměv a z domu byla barevná plocha. */ filter: saturate(.9); /* MASKA SEDÍ NA OBRÁZKU, NE TADY — viz níž. Na obalu přes celé okno se totiž počítala vůči oknu, ne vůči obrázku: při širší obrazovce se nestihla vytratit dřív, než došla na jeho okraj, a nahoře i vlevo zůstala viditelná rovná hrana. Vůči vlastnímu boxu obrázku vychází vždycky stejně. */ } /* OBRÁZEK SEDÍ V ROHU CELÝ, neroztahuje se přes okno. Roztažený přes celou plochu se totiž ořezával podle `cover` a maska pak ukazovala jeho pravý dolní kus — u fotky páru v bytě tedy trupy místo obličejů. Když má obrázek vlastní rozměr v rohu, je na něm vidět to, co na něm je. Hrana nevzniká: maska sedí na OBALU přes celé okno a vytrácí se dřív, než na okraj obrázku dojde. */ .pm-pozadi.je-foto img { position: absolute; right: 0; bottom: 0; /* STROP JE VELKORYSÝ SCHVÁLNĚ. Při 680 px se na monitoru 1900 px široké schoval obrázek za karty a u pravé hrany z něj zbyl proužek — vypadalo to jako nedopatření, ne jako záměr. Podíl z okna (vw/vh) drží velikost přiměřenou i na malém displeji. */ width: min(62vw, 1020px); height: min(52vh, 470px); display: block; object-fit: cover; /* VÝŘEZ SE KOTVÍ K HORNÍ TŘETINĚ FOTKY, ne na střed. Na střed padly tváře za kartu se seznamem a zbyly z nich trupy — a to je přesně to, kvůli čemu fotka na stránce je. Horní třetina drží obličeje, u domu průčelí a u stolu desku s věcmi; spodek záběru bývá podlaha nebo stůl, na kterém stejně nic není. */ object-position: center 22%; /* Vytrácení VŮČI VLASTNÍMU BOXU. Těžiště u pravého dolního rohu, odkud se obraz rozpouští do stran a nahoru — tam sousedí s obsahem. */ /* POLOMĚRY MUSÍ SKONČIT UVNITŘ BOXU, jinak je vytrácení useknuté a zbyde rovná hrana. Těžiště je v 82 % šířky a 88 % výšky, poloměry 62 % a 78 % — levý i horní okraj tedy leží ZA koncem přechodu a dojdou do nuly. Pravý a spodní okraj lícují s okrajem okna, tam hrana vzniknout nemůže. */ -webkit-mask-image: radial-gradient(ellipse 62% 78% at 82% 88%, #000 0%, #000 30%, rgba(0,0,0,.5) 62%, transparent 92%); mask-image: radial-gradient(ellipse 62% 78% at 82% 88%, #000 0%, #000 30%, rgba(0,0,0,.5) 62%, transparent 92%); } @media (max-width: 767px) { /* Na telefonu menší těžiště a slabší krytí — obsah je pod sebou, takže fotka přes celou plochu by ležela pod vším. */ .pm-pozadi.je-foto { opacity: .20; filter: saturate(.9); } /* Na telefonu je šířka vzácná, takže obrázek zabere skoro celou. */ /* Na telefonu je obrázek posazený NAD PATIČKU: ta je mimo `.pm-content` a leží rovnou na plátně, takže se pod ni motiv dostal a právní odkazy stály přímo na fotce. Na počítači to nenastává — tam je patička vlevo, kam obrázek nedosáhne. */ .pm-pozadi.je-foto img { width: 96vw; height: min(30vh, 230px); bottom: 12vh; } } /* Na úzkém displeji je kresba menší a ještě slabší: šířka je vzácná a textura přes celou obrazovku by soupeřila s obsahem, kterého je na telefonu pod sebou víc. */ @media (max-width: 767px) { .pm-pozadi { width: 96vw; height: 40vh; opacity: .18; filter: blur(7px); } } /* Tisk kresbu vynechá — na papíře je to jen šedý flek. */ @media print { .pm-pozadi { display: none !important; } } /* Kdo si vyžádal omezení pohybu, obvykle chce i klidnější obrazovku. */ @media (prefers-reduced-motion: reduce) { .pm-pozadi { opacity: .16; } } /* ─── karty ──────────────────────────────────────────────────────────────── */ /* .card-shadow je původní třída ze starého vzhledu — stejný vzhled, jeden předpis. */ /* PRŮSVITNÉ, NE PRŮHLEDNÉ. Karta propouští motiv v pozadí, ale zůstává plochou, na které se čte — 88 % krytí je hranice, pod kterou začal text na kontrolu kontrastu propadat. Kdo bude krytí snižovat, ať pustí `driver.mjs okna` a podívá se na hlášení KONTRAST. */ /* ORBITA STAVÍ NA LINCE, NE NA STÍNU. Karta je plná bílá s vláskovou linkou a bez stínu: hloubku nese rozdíl bílé proti plátnu, hranici nese linka. Dřív to bylo obojí naráz — průsvitná bílá (84 %), stín a vnitřní světlá hrana, tedy tři efekty na jeden okraj. PRŮSVITNOST ODEŠLA I S DŮVODEM, PROČ TU BYLA: pod kartami prosvítal obrázkový motiv na pozadí. Q je návrh bez fotek (proto ho zákazník taky vybral) a vrstva `.pm-pozadi` je vypnutá níž v souboru. Text na kartě tím mimochodem dostal zpátky desetinu kontrastu, kterou mu průsvit bral. */ .pm-card, .card-shadow { background: var(--pm-surface); border: 1px solid var(--pm-line); border-radius: var(--pm-r-xl); } /* KARTA SE PŘI NAJETÍ NEZVEDÁ, JEN ZTMAVNE LINKA. Zvednutí o pixel plus stín byl pohyb navíc v rozhraní, kde se má hýbat jen to, co se opravdu mění; na dotykovém displeji navíc `:hover` po klepnutí uvízne a karta zůstala nahoře viset. Ztmavlá linka řekne totéž a nehýbe se. */ .pm-card-hover { transition: border-color .15s ease, background-color .15s ease; } .pm-card-hover:hover { border-color: #C9D0DA; background: #FCFDFD; } /* Odsazení obsahu karty/sekce — číslo 22px nesedí na žádný krok Tailwind škály v tools/generuj_css.php, proto vlastní třída místo inline stylu. */ .pm-pad-karta { padding: 20px 22px; } .pm-kpi-label { color: var(--pm-ink-3); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* VÝZNAM NESE CELÁ DLAŽDICE, NE PROUŽEK NAD NÍ. Byla tu dvoupixelová gradientní linka po horní hraně — v Orbitě by to byl čtvrtý druh okraje vedle linky, rámečku a podbarvení. Dlaždice, která hlásí problém, má teď tónovaný rámeček i podklad (jako „Po splatnosti" v návrhu): periferně se pozná stejně dobře a nepotřebuje k tomu vlastní prvek. */ .pm-kpi-card { position: relative; } .pm-kpi-card.je-neg { border-color: var(--pm-neg-line); background: #FDF6F6; } .pm-kpi-card.je-pos { border-color: #C9E2D6; background: #F5FAF8; } .pm-kpi-card.je-warn { border-color: #EFD9B4; background: #FDF9F1; } .pm-kpi-card.je-neg .pm-kpi-label, .pm-kpi-card.je-neg .pm-kpi-value { color: var(--pm-neg); } /* Velikost čísla roste s oknem — na telefonu se dlouhá částka vejde, na monitoru zůstane hlavní údaj dost výrazný. */ /* Číslo je to, kvůli čemu se na dlaždici kouká — nese tedy víc váhy než dřív a sedí těsněji pod popiskem. Řez zůstává 600, ne 800: částka v tučném monospacu se čte hůř, protože se slévají číslice. */ /* ROZDÍL VELIKOSTÍ JE HIERARCHIE. Popisek 11 px a číslo 38 px vedle sebe řeknou, co je na dlaždici hlavní, dřív než se cokoli přečte. Dokud mělo číslo 30 px, byla obrazovka jeden rovnoměrný povrch, na kterém nic nevystupovalo — a žádné množství stínů a linek to nespraví. */ .pm-kpi-value { font-size: clamp(26px, 1.9vw + 15px, 38px); font-weight: 700; letter-spacing: -.045em; margin-top: 8px; line-height: 1.05; overflow-wrap: anywhere; } /* Jednotka roste s číslem, ale ne doslova — `em` samo o sobě by na nejmenší velikosti udělalo „Kč" nečitelné a na největší z něj druhý nadpis. `clamp` drží rozpětí, ve kterém to sedí. */ /* Jednotka potřebuje VÍC místa, než se zdá: `.pm-kpi-value` má záporné prostrkání (-.045em), které se na velkém písmu podepíše i na mezeře před „Kč" — z „15 018 Kč" se stalo „15 018Kč". V `em` to nespravíš: `em` se tu počítá z velikosti JEDNOTKY (13–17 px), ne z čísla, takže by mezera zůstala pod čtyřmi pixely. Proto pevných 6 px a vynulované prostrkání uvnitř „Kč". */ .pm-kpi-unit { font-size: clamp(13px, .42em, 17px); font-weight: 600; color: var(--pm-ink-3); margin-left: 6px; letter-spacing: 0; } /* TMAVÁ DLAŽDICE — hlavní číslo na Přehledu. V Orbitě není hierarchie dlaždic daná velikostí písma (to mají všechny stejné), ale tím, že ta nejdůležitější je tmavá. Je to jediná tmavá plocha v obsahu; druhá by ten rozdíl zrušila. Prstenec vedle čísla nese podíl a je limetkový, protože limetka je tady na tmavém podkladu čitelná (14 : 1) — na bílé by nebyla. */ .pm-kpi-tmava { /* PLNÁ BARVA A TEPRVE NAD NÍ PŘECHOD. Zkratka `background: linear-gradient(…)` totiž zároveň nastaví `background-color: transparent` — a pak pod bílým textem NENÍ NIC. Dokud se přechod vykreslí, nepozná se to; jakmile ho prohlížeč nevykreslí (tisk, vynucené barvy, starý engine), zůstane bílý text na světlém plátně. Kontrola oken to našla jako 1,2 : 1. */ background-color: var(--pm-accent); background-image: linear-gradient(135deg, var(--pm-accent-tma) 0%, var(--pm-accent) 62%); border-color: var(--pm-accent); color: #FFFFFF; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .pm-kpi-tmava .pm-kpi-label { color: #93A0B3; } .pm-kpi-tmava .pm-kpi-value { color: #FFFFFF; } .pm-kpi-tmava .pm-kpi-unit { color: #B9C3D2; } /* PRSTENEC USTOUPÍ POD ČÍSLO, KDYŽ NA OBOJÍ VEDLE SEBE NENÍ MÍSTO. Dlaždice je jedna ze čtyř v řadě; s rozbalenou nabídkou na 1280 px z ní zbývá 228 px, z toho 66 na prstenec — a na částku pak 104 px, když „117 254 Kč" potřebuje 133. Číslo se lámalo přes dva řádky, nebo (po `nowrap`) lezlo pod prstenec. `flex-wrap` to řeší bez dotazu na šířku okna: dokud se číslo vejde, stojí prstenec vedle něj; jakmile ne, sjede pod něj a dlaždice povyroste. */ .pm-kpi-tmava-text { flex: 1 1 150px; min-width: 0; } .pm-kpi-tmava-prsten { flex: 0 0 auto; margin-inline: auto; } /* ČÍSLO SE NESMÍ ZLOMIT UPROSTřED. ` .pm-kpi-value` má `overflow-wrap: anywhere`, aby dlouhá částka nepřetekla dlaždici — jenže na tmavé dlaždici ubere prstenec 78 px a s rozbalenou nabídkou už se „117 254 Kč" na řádek nevejde. Zlomilo se v mezere po tisících, takže pod sebou stalo „117" a „254 Kč" — dvě čísla, ne jedno. Tady se tedy neláme a místo toho se zmenší písmo; celé to ale stojí na tom, že prstenec je mensí (66 px). */ .pm-kpi-tmava .pm-kpi-value { white-space: nowrap; overflow-wrap: normal; font-size: clamp(23px, 1.3vw + 12px, 34px); } /* Rozdíl proti minulému měsíci je jedna věta — „+110,9" a „%" na dvou řádcích vypadají jako dva údaje. */ .pm-kpi-tmava-zmena { display: flex; align-items: center; gap: 5px; margin-top: 8px; flex-wrap: wrap; } .pm-kpi-tmava-zmena > span { white-space: nowrap; } /* POPISEK POD PRSTENCEM. ČÍSLO V NĚM JE VĚTŠÍ NEŽ POPISEK, a to záměrně: „72 500 Kč" se sázelo v `--pm-fs-mikro`, tedy 11 px, a IBM Plex Mono má PŘEŠKRTNUTÉ NULY — bílá jedenactka na tmavém podkladu pak vypadala jako proškrtnutá částka, tedy jako „neplatí". */ .pm-kpi-prsten-popis { text-align: center; color: #B9C3D2; font-size: var(--pm-fs-mikro); font-weight: 600; margin-top: 5px; line-height: 1.35; } .pm-kpi-prsten-cislo { display: block; color: #FFFFFF; font-size: 13px; letter-spacing: -.03em; } .pm-kpi-prsten-platici { display: block; margin-top: 2px; color: #B9C3D2; } .pm-kpi-tmava-pod { color: #B9C3D2; font-size: 12px; margin-top: 8px; } .pm-kpi-tmava-pod strong { color: #FFFFFF; font-weight: 700; } .pm-card-alert { border-color: var(--pm-neg-line); background: #FEF7F8; } .pm-card-alert .pm-kpi-label, .pm-card-alert .pm-kpi-value { color: var(--pm-neg); } /* ─── tlačítka ───────────────────────────────────────────────────────────── */ .pm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; /* ORBITA MÁ VĚTŠÍ OVLÁDACÍ PRVKY: 44 px je zároveň nejmenší dotykový cíl podle WCAG, takže mobilní přepis na konci souboru už nemá co zvětšovat. */ height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--pm-r-md); font: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .13s ease, border-color .13s ease, filter .13s ease; } .pm-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pm-accent-rg); } .pm-btn:disabled, .pm-btn[aria-disabled="true"] { background: #F0F2F5; color: var(--pm-ink-4); border-color: transparent; cursor: not-allowed; filter: none; } /* JEDINÝ BAREVNÝ PŘECHOD V CELÉ APLIKACI. Přechod je levná ozdoba — jakmile ho má víc prvků, je z toho šablona. Tady má smysl: hlavní akce je na obrazovce právě jedna a přechod plus měkká záře kolem ní ji oddělí od ostatních tlačítek líp než další odstín. Záře je stín v barvě akcentu, ne `filter` — ten by rozmazal i text uvnitř. */ /* BEZ BAREVNÉ ZÁŘE A BEZ SVISLÉHO PŘECHODU — viz `.pm-btn-prijem` níž. Přechod shora dolů plus vnitřní bílá hrana plus barevný stín pod tlačítkem jsou tři efekty na jednom prvku, z nichž ani jeden nic nesděluje; dohromady z tlačítka dělají obrázek tlačítka. Plná barva a jeden neutrální stín drží tutéž hierarchii (hlavní akce je pořád jediná barevná v okolí) a snesou tmavý i světlý podklad. */ .pm-btn-primary { background: var(--pm-accent); color: #FFF; box-shadow: 0 1px 2px rgba(16, 20, 32, .10); } .pm-btn-primary:hover { background: var(--pm-accent-hi); box-shadow: 0 1px 3px rgba(16, 20, 32, .14); } /* Stisk musí být cítit. Bez toho působí tlačítko jako obrázek. */ .pm-btn-primary:active { transform: translateY(.5px); } .pm-btn-secondary { background: var(--pm-surface); color: var(--pm-ink); border-color: var(--pm-line); box-shadow: var(--pm-shadow), var(--pm-hrana); } .pm-btn-secondary:hover { background: #F6F7F9; border-color: #D8DDE4; } .pm-btn-ghost { background: transparent; color: var(--pm-ink-2); } .pm-btn-ghost:hover { background: #F1F2F6; color: var(--pm-ink); } .pm-btn-danger { background: var(--pm-neg); color: #FFF; } .pm-btn-danger:hover { background: var(--pm-neg-2); } .pm-btn-warn { background: var(--pm-warn); color: #FFF; } .pm-btn-warn:hover { filter: brightness(.92); } .pm-btn-sm { height: 30px; padding: 0 12px; font-size: 12.5px; border-radius: var(--pm-r-sm); } .pm-btn-lg { height: 44px; padding: 0 18px; font-size: 15px; border-radius: 10px; } .pm-btn-icon { width: 36px; height: 36px; padding: 0; } .pm-btn-icon.pm-btn-sm { width: 30px; height: 30px; } .pm-btn svg { flex: 0 0 auto; } /* ─── formulářová pole ───────────────────────────────────────────────────── */ /* POPISEK JE LEHČÍ NEŽ HODNOTA POD NÍM. Byl `700` a `--pm-ink`, tedy stejně tmavý i stejně tučný jako text v poli — ve formuláři o dvanácti polích z toho byl sloupec tučných řádků, ve kterém nebylo poznat, co je otázka a co odpověď. Orbita dává popisku `600` a o stupeň světlejší inkoust; pole samo je 15px a černé, takže hierarchie drží. */ .pm-label { display: block; font-size: 12.5px; font-weight: 600; color: #2B333D; margin-bottom: 7px; } /* Vysvětlivka pod polem se čte, jen když je čitelná — 11,5 px bylo pod hranicí, kde má smysl ji psát. */ .pm-hint { color: var(--pm-ink-3); font-size: 12px; font-weight: 500; margin-top: 6px; line-height: 1.5; } /* POLE JE PLOCHÉ A POZNÁ SE PODLE SYTĚJŠÍ LINKY. Dřív to byla prohlubeň (vnitřní stín, našedlé pozadí) — jenže ve chvíli, kdy karta přestala mít stín, byla prohlubeň jediný reliéf na obrazovce a působila jako pozůstatek. Orbita rozlišuje pole od plochy sytější linkou (#C9CFD7 proti #E5E8EC u karty): pole vystupuje dopředu, protože se do něj píše. VÝŠKA 48 px NENÍ KOSMETIKA. Pole nižší než ta hodnota se na iPhonu při klepnutí přiblíží i s celou stránkou, pokud má písmo pod 16 px — a 15 px tady je. Kdo bude výšku nebo písmo snižovat, ať to zkusí na telefonu. */ .pm-input, .pm-select, .pm-textarea { display: block; width: 100%; min-height: 48px; padding: 12px 15px; background: var(--pm-surface); color: var(--pm-ink); border: 1px solid #C9CFD7; border-radius: var(--pm-r-md); font: inherit; font-size: 15px; font-weight: 500; transition: border-color .13s ease, box-shadow .13s ease; } .pm-input:hover:not(:focus), .pm-select:hover:not(:focus), .pm-textarea:hover:not(:focus) { border-color: #AEB7C3; } .pm-textarea { min-height: 92px; resize: vertical; } /* POLE PRO SOUBOR MĚLO SYSTÉMOVÉ TLAČÍTKO PROHLÍŽEČE. „Vybrat soubor │ Soubor nevybrán" v šedém obdélníku vypadá na každém systému jinak a v Orbitě vyčnívalo jako jediný nestylovaný prvek na stránce — zvlášť vedle našeho tlačítka hned pod ním. `::file-selector-button` je jediné místo, kterým se dá přebarvit, aniž by se pole nahrazovalo vlastním ovládáním (to by přišlo o klávesnici a o přetáhnutí souboru myší). */ .pm-input[type="file"] { padding: 0 12px 0 0; display: flex; align-items: center; } .pm-input[type="file"]::file-selector-button { height: 34px; margin: 0 12px 0 0; padding: 0 14px; border: 1px solid var(--pm-line); border-radius: var(--pm-r-sm); background: var(--pm-surface-2); color: var(--pm-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .12s ease, border-color .12s ease; } .pm-input[type="file"]::file-selector-button:hover { background: var(--pm-accent-bg); border-color: var(--pm-accent-rg); } .pm-input::placeholder, .pm-textarea::placeholder { color: var(--pm-ink-4); } /* Zaostřené pole dostane tmavou linku a měkký prstenec — píše se do něj teď. */ .pm-input:focus, .pm-select:focus, .pm-textarea:focus { outline: none; background: var(--pm-surface); border-color: var(--pm-accent); box-shadow: 0 0 0 3px var(--pm-accent-rg); } .pm-input[aria-invalid="true"], .pm-input.pm-invalid { border-color: var(--pm-neg); box-shadow: 0 0 0 3px #FBE2E7; } .pm-select { appearance: none; padding-right: 34px; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 -960 960 960' fill='%238D95A6'%3E%3Cpath d='M469-358q-5-2-10-7L261-563q-9-9-8.5-21.5T262-606q9-9 21.5-9t21.5 9l175 176 176-176q9-9 21-8.5t21 9.5q9 9 9 21.5t-9 21.5L501-365q-5 5-10 7t-11 2q-6 0-11-2Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; } .pm-field-error { display: flex; align-items: center; gap: 5px; color: var(--pm-neg); font-size: 12px; font-weight: 600; margin-top: 6px; } /* ─── štítky a stavy ─────────────────────────────────────────────────────── */ .pm-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .pm-badge .pm-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: 0 0 6px; } .pm-badge-pos { background: var(--pm-pos-bg); color: var(--pm-pos); } .pm-badge-neg { background: var(--pm-neg-bg); color: var(--pm-neg); } .pm-badge-warn { background: var(--pm-warn-bg); color: var(--pm-warn); } .pm-badge-accent { background: var(--pm-accent-bg); color: var(--pm-accent); } .pm-badge-neutral { background: #F1F2F6; color: var(--pm-ink-2); } .pm-badge-neutral .pm-dot { background: var(--pm-ink-3); } /* ─── tabulky ────────────────────────────────────────────────────────────── */ .pm-table { width: 100%; border-collapse: collapse; } /* HLAVIČKA BEZ VERZÁLEK A BEZ PODBARVENÍ. Kapitálky na 10,5 px se čtou po písmenech, ne po slovech — u „NEMOVITOST" to nevadí, u „ZBÝVÁ DOPLATIT" ano. Šedý pruh pod nimi navíc dělal z hlavičky čtvrtou vrstvu (plátno, karta, pruh, řádek) na ploše, která má mít vrstvy dvě. Zůstává jediná spodní linka a tučný drobný text — tedy přesně to, co hlavička potřebuje: být rozeznatelná od dat a jinak nepřekážet. */ .pm-table thead th { padding: 0 16px 12px; text-align: left; color: var(--pm-ink-3); font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; background: transparent; border-bottom: 1px solid var(--pm-line); white-space: nowrap; } .pm-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--pm-line-2); font-size: 13.5px; } .pm-table tbody tr:last-child td { border-bottom: 0; } .pm-table tbody tr { transition: background-color .1s ease; } .pm-table tbody tr:hover { background: var(--pm-surface-2); } .pm-table .pm-right { text-align: right; } /* stará třída z původních šablon */ .table-row:hover { background: var(--pm-surface-2); } /* IKONA V ŘÁDKU JE ZAOBLENÝ ČTVEREC, stejně jako v pruhu statistik a jako značka v liště. Je to ten tvar, který v Orbitě drží rozhraní pohromadě: jakmile se objeví kolečko, vypadá jako cizí prvek. */ .pm-radek-ikona { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--pm-line-2); color: var(--pm-ink-2); } .pm-radek-ikona.je-volny { background: var(--pm-surface-2); color: var(--pm-ink-4); } .pm-radek-ikona.je-dluh { background: var(--pm-neg-bg); color: var(--pm-neg); } .pm-radek-jmeno { display: flex; align-items: center; gap: 13px; min-width: 0; } /* AKCE V ŘÁDKU NEJSOU TŘI RŮZNĚ BAREVNÉ ODKAZY. „Otevřít" modře, „Upravit" zeleně a „Smazat" červeně znamenalo, že v každém řádku tabulky svítí tři barvy — a zelená u „Upravit" navíc nic neznamená, protože zelená je v aplikaci „peníze dovnitř". Orbita má v řádku neutrální tlačítka a barvu nechává datům; červená zůstává JEN u nevratné akce, kde varuje. VĚŠÍ SE TO NA VLASTNÍ TŘÍDU `.pm-akce-bunka`, ne na tailwindové barvy. První pokus mířil na `td a[class*="text-blue-6"]` a chytil i ODKAZ SE JMÉNEM BYTU v prvním sloupci — ten je taky modrý odkaz v buňce tabulky. Ze jména nemovitosti se stalo orámované tlačítko. Utilitní třída říká, jakou má prvek barvu, ne čím ten prvek je; stavět na ní výběr znamená trefit se do všeho, co náhodou vypadá stejně. ŠÍŘKA JE TU OMEZUJÍCÍ PODMÍNKA, ne estetika. Sloupec s akcemi je úzký a tlačítka s rámečkem zabírají skoro dvojnásobek textového odkazu — `flex-wrap: wrap` je proto přesně to, co se sem nesmí dát: tři tlačítka spadla pod sebe a řádek tabulky byl třikrát vyšší. Drží se v řadě (`nowrap`) a jsou kompaktní. */ .pm-akce-bunka { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; } .pm-akce-bunka > a, .pm-akce-bunka > button { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; margin: 0 !important; border: 1px solid var(--pm-line); border-radius: var(--pm-r-sm); background: var(--pm-surface-2); color: var(--pm-ink-2) !important; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .pm-akce-bunka > a:hover, .pm-akce-bunka > button:hover { background: var(--pm-accent-bg); border-color: var(--pm-accent-rg); color: var(--pm-accent) !important; } /* Nevratná akce si barvu ponechá. */ .pm-akce-bunka > button[class*="text-red-6"] { color: var(--pm-neg) !important; } .pm-akce-bunka > button[class*="text-red-6"]:hover { background: var(--pm-neg-bg); border-color: var(--pm-neg-line); color: var(--pm-neg) !important; } /* DRUHOTNÉ AKCE JSOU JEN IKONA. Tři orámovaná tlačítka s popiskem jsou skoro dvakrát širší než tři textové odkazy a sloupec „Akce" o tolik nemá kam růst — tabulka nemovitostí přetekla přes obsahový rám a dole naskočil vodorovný posuvník. Přesně to, co projekt zakazuje na telefonu (pravidlo o `.pm-sl-vedlejsi`), jen na monitoru. Popisek si nechává PRVNÍ akce, ta obvyklá („Otevřít", „Detail"). Zbylé dvě jsou ikona plus `aria-label` a `title`, takže je přečte odečítač i myš. Vejde se to do užšího místa než původní tři textové odkazy. */ .pm-akce-ikona { width: 30px; padding: 0 !important; justify-content: center; flex: 0 0 30px; } /* Na dotyku musí mít akce 44 px jako všechno ostatní. */ @media (pointer: coarse) { .pm-akce-bunka > a, .pm-akce-bunka > button { height: 40px; padding: 0 13px; } .pm-akce-bunka > .pm-akce-ikona { width: 40px; flex: 0 0 40px; padding: 0 !important; } } /* ─── sekce a nadpisy ────────────────────────────────────────────────────── */ /* Nadpis panelu je v Orbitě o dva stupně větší — panel je pojmenovaná plocha, ne odstavec s tučným prvním řádkem. */ .pm-section-title { font-size: 17px; font-weight: 700; letter-spacing: -.025em; margin: 0; } .pm-divider { height: 1px; background: var(--pm-line-2); border: 0; margin: 0; } /* ─── postranní navigace ─────────────────────────────────────────────────── */ .pm-shell { display: flex; min-height: 100vh; align-items: stretch; } /* Postranní panel má VŽDY přesně výšku okna — nikdy se neprotahuje podle délky obsahu stránky. `align-self: flex-start` ho vyváže ze standardního roztažení flexboxu, pevná výška + `sticky` ho drží přišpendlený při rolování a vlastní `overflow-y` řeší případ, kdy se nabídka do okna nevejde. */ .pm-sidebar { width: 252px; flex: 0 0 252px; align-self: flex-start; /* `z-index` kvůli vrstvě s motivem (`.pm-pozadi`, `position: fixed`): bez něj by panel překryl kresbu jen podle pořadí v dokumentu, tedy náhodou. */ position: sticky; top: var(--pm-pruh, 0px); z-index: 20; height: calc(100vh - var(--pm-pruh, 0px)); /* Panel není plochá deska. Svislý přechod do tmavšího dole mu dá hloubku a pravá hrana dostane světlou vlásku — bez ní se tmavý panel a tmavá hrana plátna slévají a nabídka vypadá, jako by stránka začínala až v půlce obrazovky. */ background: linear-gradient(180deg, #171A22 0%, var(--pm-nav-bg) 42%, var(--pm-nav-bg-2) 100%); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06), 1px 0 12px rgba(16, 20, 32, .10); display: flex; flex-direction: column; padding: 22px 12px 16px; overflow-y: auto; overscroll-behavior: contain; } @supports (height: 100dvh) { .pm-sidebar { height: calc(100dvh - var(--pm-pruh, 0px)); } } .pm-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 22px; text-decoration: none; } /* Značka BEZ ZÁŘE. Pod čtverečkem svítil `0 2px 8px -2px var(--pm-accent-gl)` a uvnitř bílá hrana — na tmavém panelu z toho byl podsvícený knoflík. Plochá barva značky drží; tvar loga je to, co má být vidět. */ /* ZNAČKA JE VĚTŠÍ NEŽ NÁPIS VEDLE NÍ. Ve 30px dlaždici byla střecha se dvěma postavami drobnější než „tenants.cz" a četla se jako odrážka před textem. 42 px se vejde i do zúžené lišty (76 px − 2 × 15 px vzduchu). */ .pm-brand-mark { width: 42px; height: 42px; border-radius: 11px; background: var(--pm-znacka-bg); display: flex; align-items: center; justify-content: center; flex: 0 0 42px; } /* NÁZEV A PODTITULEK NESMÍ SOUPEŘIT. „Tenants" je značka, „Správa nemovitostí" jen vysvětlivka pod ní — dokud měly obě skoro stejnou váhu i velikost, četly se jako dvouřádkový nadpis ve dvou jazycích. Podtitulek je proto drobnější, lehčí a výrazně tlumený: po druhém přihlášení ho nikdo nečte a nemá na sebe brát pozornost nad nabídkou. */ .pm-brand-name { color: #FFF; font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; } /* „.cz" v nápisu vedle značky — jako v logotypu: lehčí řez a vlastní barva. */ .pm-brand-tld { color: var(--pm-znacka-tld); font-weight: 600; } .pm-sidebar .pm-brand-tld, .pm-auth-side .pm-brand-tld { color: var(--pm-znacka-tld-tmava); } .pm-brand-sub { color: var(--pm-nav-ink-2); font-size: 10.5px; font-weight: 500; letter-spacing: .01em; opacity: .8; margin-top: 1px; } .pm-nav-group { padding: 0 10px 8px; color: var(--pm-nav-ink-2); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .pm-nav-group + nav { display: flex; flex-direction: column; gap: 2px; } .pm-nav-item { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--pm-r-lg); color: var(--pm-nav-ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .12s ease, color .12s ease; } .pm-nav-item:hover { background: rgba(255, 255, 255, .06); color: #FFF; } /* AKTIVNÍ POLOŽKA MÁ BARVU, NE JEN JAS. Bílá na 9 % je od bílé na 6 % k nerozeznání — hlavně na levném displeji a v prosvětlené místnosti — takže nebylo poznat, na které stránce člověk je. Limetkový nádech plus proužek u levé hrany to řeší i bez rozdílu v jasu, a je to totéž, čím je označená hlavní akce; nepřibývá barva, přibývá význam. Na tmavém panelu limetka SMÍ nést i text — proti #12203A má 14 : 1 — ale tady jen podbarvuje a text zůstává bílý, aby aktivní položka nekřičela víc než akce nad ní. */ .pm-nav-item.is-active { position: relative; background: linear-gradient(90deg, rgba(200, 242, 80, .16), rgba(200, 242, 80, .04)); color: #FFF; font-weight: 700; } .pm-nav-item.is-active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--pm-akce); box-shadow: 0 0 10px rgba(200, 242, 80, .35); } .pm-nav-item svg { flex: 0 0 auto; } .pm-nav-count { margin-left: auto; color: var(--pm-nav-ink-2); font-size: 11.5px; } .pm-nav-badge { margin-left: auto; color: #FFF; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; } .pm-nav-badge-neg { background: var(--pm-neg); } .pm-nav-badge-warn { background: var(--pm-warn); } .pm-nav-badge-accent { background: var(--pm-akce); color: var(--pm-akce-ink); } .pm-nav-foot { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 12px; display: flex; flex-direction: column; gap: 2px; } .pm-user { display: flex; align-items: center; gap: 10px; padding: 10px; margin-top: 4px; border-radius: var(--pm-r); background: rgba(255, 255, 255, .04); text-decoration: none; } .pm-user:hover { background: rgba(255, 255, 255, .07); } .pm-avatar { width: 30px; height: 30px; border-radius: 999px; background: var(--pm-accent-2); color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: 0 0 30px; } .pm-user-name { color: #FFF; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-user-role { color: var(--pm-nav-ink-2); font-size: 11px; font-weight: 600; } /* ─── horní lišta ────────────────────────────────────────────────────────── */ .pm-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* JEDINÉ „SKLO" V APLIKACI. Rozostřený podklad je efekt, který se snadno přežene — použitý na kartách i panelech z toho je maketa z přehlídky návrhů. Tady dává smysl a nikde jinde: lišta je PŘILEPENÁ, takže pod ní obsah projíždí, a poloprůhledná hrana ten pohyb přizná. Neprůhledná varianta zůstává jako záloha v `background-color` — `@supports` ji přebije jen tam, kde prohlížeč rozostření opravdu umí. */ .pm-header { min-height: 68px; flex: 0 0 auto; background: var(--pm-surface); border-bottom: 1px solid var(--pm-line); display: flex; align-items: center; padding: 12px var(--pm-pad); padding-left: max(var(--pm-pad), env(safe-area-inset-left)); padding-right: max(var(--pm-pad), env(safe-area-inset-right)); position: sticky; top: var(--pm-pruh, 0px); z-index: 30; } /* Obsah lišty i obsah stránky drží stejnou maximální šířku, takže nadpis v hlavičce lícuje se sloupcem obsahu i na širokém monitoru. */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pm-header { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom-color: rgba(230, 232, 238, .9); } } .pm-header-inner { display: flex; align-items: center; gap: 14px; width: 100%; max-width: var(--pm-measure); margin-inline: auto; min-width: 0; } .pm-page-title { margin: 0; font-size: clamp(16px, .6vw + 13px, 19px); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-page-sub { color: var(--pm-ink-3); font-size: 12px; font-weight: 600; } .pm-content { flex: 1; min-width: 0; /* BEZ `z-index` — A JE TO PODSTATNÉ. Stalo tu `position: relative; z-index: 1`, což z obsahu udělalo VLASTNÍ VRSTVOU (stacking context): všechno uvnitř se pak porovnává jen mezi sebou a proti okolním prvkům se chová jako jeden balík s hodnotou 1. Modální okna bydlí v šabloně, tedy uvnitř `.pm-content`, takže jejich `z-index: 80` přestal platit proti postrannímu panelu (20) — a ten je překrýval. Při zúžené liště to bylo 76 px u levého kraje okna a nikdo si toho nevšiml; s rozbalenou nabídkou zmizel pod panelem celý levý sloupec formuláře i s popisky. Kvůli vrstvě s motivem to tu nemusí být: `position: relative` sam o sobě vrstvu nezakládá a `.pm-pozadi` stojí v dokumentu PŘED obsahem, takže se při shodné úrovni kreslí pod ním. (Teď je navíc vypnutá.) */ position: relative; padding: var(--pm-pad-y) var(--pm-pad) calc(var(--pm-pad-y) + 16px); padding-left: max(var(--pm-pad), env(safe-area-inset-left)); padding-right: max(var(--pm-pad), env(safe-area-inset-right)); width: 100%; max-width: calc(var(--pm-measure) + 2 * 28px); margin-inline: auto; } /* ─── vyhledávání v liště ────────────────────────────────────────────────── */ /* HLEDÁNÍ JE V PRAVÉM ROHU LIŠTY, vedle zvonku. Jeden čas stálo uprostřed a měřilo 520 px — vypadalo to jako příkazový řádek, ale chovalo se to jako přehážka: pole rozdělilo lištu na dvě půlky, mezi kterými nebylo nic, a na širokém monitoru se odpoutalo od značky i od zvonku. Ovládací prvky patří k sobě; levý kraj patří tomu, kdo jsem. */ .pm-search { position: relative; flex: 0 1 340px; width: 340px; max-width: 100%; margin-inline: 0; } .pm-search-input { width: 100%; height: 44px; padding: 0 84px 0 42px; background: var(--pm-surface); border: 1px solid #D6DBE1; border-radius: var(--pm-r-md); font: inherit; font-size: 14px; color: var(--pm-ink); } .pm-search-input::placeholder { color: var(--pm-ink-3); } .pm-search-input:focus { outline: none; background: #FFF; border-color: var(--pm-accent); box-shadow: 0 0 0 3px var(--pm-accent-rg); } .pm-search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--pm-ink-3); pointer-events: none; } .pm-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 260px; max-width: calc(100vw - 24px); padding: 6px; background: #FFF; border: 1px solid var(--pm-line); border-radius: var(--pm-r-lg); box-shadow: var(--pm-shadow-lg); } .pm-menu[hidden] { display: none; } .pm-menu-left { right: auto; left: 0; } .pm-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--pm-r); color: var(--pm-ink); font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; width: 100%; text-align: left; background: none; border: 0; font-family: inherit; } .pm-menu-item:hover, .pm-menu-item.is-active { background: #F1F2F6; } .pm-menu-item svg { color: var(--pm-ink-3); flex: 0 0 auto; } .pm-menu-empty { padding: 14px 12px; color: var(--pm-ink-3); font-size: 13px; text-align: center; } .pm-menu-head { padding: 8px 10px 5px; color: var(--pm-ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .pm-menu-sub { color: var(--pm-ink-3); font-size: 11.5px; font-weight: 500; } /* ─── upozornění (zvoneček) ──────────────────────────────────────────────── */ .pm-bell-dot { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 999px; background: var(--pm-neg); border: 1.5px solid #FFF; } .pm-attn-item { display: flex; gap: 11px; padding: 11px 12px; border-radius: var(--pm-r); text-decoration: none; } .pm-attn-item:hover { background: #F7F8FA; } .pm-attn-icon { width: 32px; height: 32px; border-radius: var(--pm-r); flex: 0 0 32px; display: flex; align-items: center; justify-content: center; } .pm-attn-icon-accent { background: var(--pm-accent-bg); color: var(--pm-accent); } .pm-attn-title { font-size: 13.5px; font-weight: 700; color: var(--pm-ink); } .pm-attn-sub { color: var(--pm-ink-3); font-size: 12px; margin-top: 1px; } /* ─── grafy ──────────────────────────────────────────────────────────────── */ .pm-chart-legend { display: flex; align-items: center; gap: 14px; } .pm-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--pm-ink-2); } /* Čtvereček v legendě má OBRYS ze stejného důvodu jako sloupec v grafu: limetka má na bílé 1,4 : 1 a bez obrysu by z legendy zbyl jen text. */ .pm-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; border: 1px solid rgba(13, 17, 23, .18); } /* ─── popisek grafu po najetí myší ─────────────────────────────────────────── Kreslí ho assets/js/dashboard.js jako HTML, ne Chart.js do plátna. Důvod je v tom souboru: vestavěný popisek nese legendu BARVOU PÍSMA, takže na tmavém podkladu svítí modrý a oranžový text vybraný pro bílé pozadí. Barva patří do tečky, text má být bílý. Je `position: fixed` a visí na — uvnitř karty by ho ořízl první obal s `overflow`, tatáž past jako u rozbalovacích nabídek v tabulkách. `pointer-events: none`, aby popisek nepřebral myš sám sobě a graf pod ním nepřestal reagovat. */ .pm-graf-tip { position: fixed; z-index: 960; pointer-events: none; min-width: 168px; padding: 9px 11px 10px; border-radius: var(--pm-r-md); background: var(--pm-ink); color: #FFF; box-shadow: 0 8px 24px -8px rgba(16, 20, 32, .45); font-size: 12.5px; line-height: 1.35; opacity: 0; transition: opacity .12s ease; } .pm-graf-tip.je-videt { opacity: 1; } .pm-graf-tip-nadpis { font-weight: 700; font-size: 12px; letter-spacing: .01em; padding-bottom: 6px; margin-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, .14); } /* Řádek je mřížka, ne text za sebou: tečka · název · částka u pravé hrany. Částky pod sebou se dají porovnat, částky za názvy různé délky ne. */ .pm-graf-tip-radek { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 2px 0; } .pm-graf-tip-tecka { width: 8px; height: 8px; border-radius: 50%; /* Kroužek odděluje tečku od tmavého podkladu i u tmavých barev řady. */ box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); } .pm-graf-tip-tecka-prazdna { background: none; box-shadow: none; } .pm-graf-tip-nazev { color: rgba(255, 255, 255, .72); font-weight: 500; } .pm-graf-tip-hodnota { font-weight: 700; text-align: right; white-space: nowrap; } .pm-graf-tip-hodnota.je-pos { color: #6EE7B7; } .pm-graf-tip-hodnota.je-neg { color: #FDA4AF; } .pm-graf-tip-soucet { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .14); } .pm-graf-tip-patka { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .62); font-size: var(--pm-fs-mikro); font-weight: 500; } /* ─── stránkové vlaječky (flash) ─────────────────────────────────────────── */ /* VLAJEČKA SE MUSÍ UMĚT ZALOMIT. Některé nesou vedle textu i tlačítka („Odemknout evidenci", „Kód nemám") a ta mají `white-space: nowrap`, aby se popisek nerozpadl. V neroztažitelné řadě si tím ale vynutí svou šířku na úkor textu: na telefonu zbylo na větu asi osmdesát pixelů a věta se lámala PO JEDNOM SLOVĚ přes dvacet řádků — a stejně přetekla ven. `flex-wrap` plus `flex: 1 1 260px` u textu znamená, že jakmile se text a tlačítka vedle sebe nevejdou, tlačítka se přesunou pod něj. */ .pm-flash { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding: 12px 15px; border-radius: var(--pm-r-md); border: 1px solid; font-size: 13.5px; font-weight: 600; margin-bottom: 16px; } .pm-flash > span { flex: 1 1 260px; min-width: 0; } .pm-flash svg { flex: 0 0 auto; margin-top: 1px; } .pm-flash-success { background: var(--pm-pos-bg); border-color: #C9E2D6; color: #17603F; } .pm-flash-danger { background: var(--pm-neg-bg); border-color: var(--pm-neg-line); color: var(--pm-neg-2); } .pm-flash-warning { background: var(--pm-warn-bg); border-color: #EFD9B4; color: #8A4C08; } .pm-flash-info { background: var(--pm-accent-bg); border-color: var(--pm-accent-rg); color: var(--pm-accent); } /* ── Příkazový řádek v liště (Orbita) ───────────────────────────────────── Lišta je rozdělená na TŘI DÍLY STEJNÉ ŠÍŘKY, ne na „co zbude". Hledání uprostřed musí být uprostřed OKNA, ne uprostřed zbytku po nadpisu — jinak se posouvá podle toho, jak dlouhý název má zrovna otevřená stránka, a oko ho pokaždé hledá jinde. */ /* Levý díl si bere, co zbude, a tím odtlačí ovládání k pravému okraji. `flex: 1 1 0` na obou dílech tu bylo kvůli hledání uprostřed — to je pryč, a se dvěma stejně pružnými díly by pravý konec plaval podle toho, jak dlouhé jméno má přihlášený. */ .pm-header-kdo { display: flex; align-items: baseline; gap: 8px; flex: 1 1 auto; min-width: 0; } .pm-header-znacka { font-size: 14px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; } .pm-header-jmeno { font-size: 12.5px; color: var(--pm-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pm-header-konec { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; justify-content: flex-end; } .pm-search-zkratka { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11.5px; font-weight: 600; color: var(--pm-ink-3); background: var(--pm-line-2); border-radius: 7px; padding: 4px 8px; pointer-events: none; } /* Na úzkém okně se zkratka schová — klávesnice tam stejně není a pole potřebuje každý pixel. */ @media (max-width: 1099px) { .pm-search-zkratka { display: none; } /* Se schovanou zkratkou nemá pole proč držet 84 px prázdna vpravo — text placeholderu by se o tu mezeru uřízl. */ .pm-search-input { padding-right: 14px; } } /* ── Nadpis stránky nad obsahem ─────────────────────────────────────────── Popis stojí VEDLE nadpisu na účaří, ne pod ním: dvouřádková hlavička ukrajovala z obsahu přes šedesát pixelů na každé stránce a druhý řádek se stejně nečetl. Na telefonu se zalomí pod nadpis, tam je místa dost. */ .pm-page-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .pm-page-head .pm-page-title { margin: 0; font-size: clamp(26px, 2.2vw + 14px, 38px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; } .pm-page-head .pm-page-sub { font-size: 13px; color: var(--pm-ink-3); font-weight: 500; } /* ─── modální okna ───────────────────────────────────────────────────────── */ /* OKNO JE JEDEN KUS, NE TŘI PÁSY NAD SEBOU. Hlavička a patička měly každá svůj vlásek, takže okno vypadalo jako složka s oddělovači; v Orbitě je panel souvislý a člení ho odsazení. Zaoblení 24 px a hlubší stín okno zřetelně zvednou nad ztmavené pozadí — to je jediná věc, kterou má chrom modálu sdělit. Rámeček je pryč: nad ztmaveným podkladem nemá co ohraničovat a na světlém okraji stínu z něj byla tenká šedá obruba. TLAČÍTKA V PATIČCE ZŮSTÁVAJÍ VPRAVO, přestože je návrh má vlevo. Pořadí akcí si člověk pamatuje rukou a přehodit ho kvůli vzhledu je ta nejdražší změna z celé palety — za omyl při potvrzování se platí daty. */ .pm-modal-panel { background: #FFF; border-radius: 24px; box-shadow: 0 40px 90px -30px rgba(13, 17, 23, .5); border: 0; } .pm-modal-head { display: flex; align-items: flex-start; gap: 14px; padding: 26px 30px 6px; border-bottom: 0; } .pm-modal-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.03em; } .pm-modal-body { padding: 16px 30px; } .pm-modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 12px 30px 26px; border-top: 0; } /* ── Filtry nad seznamem jako pilulky ───────────────────────────────────── Tlačítka `filter-btn` (Údržba, Energie) měla tailwindové třídy přímo ve značkování — `bg-gray-800 text-white` pro aktivní, `bg-gray-100` pro ostatní. V Orbitě je aktivní filtr LIMETKOVÝ, stejně jako v návrhu, a pilulka místo obdélníku. Přebíjí se to tady, ne v šablonách: stav filtru přepíná JavaScript výměnou tříd (`filterRequests()`), takže by se to muselo přepsat i tam a obojí by se rozešlo. `.filter-btn` zůstává jediná věc, na kterou se šablona i skript odkazují. */ .pm-content .filter-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 15px !important; border-radius: 999px !important; background: var(--pm-surface) !important; border: 1px solid var(--pm-line); color: var(--pm-ink-2) !important; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .pm-content .filter-btn:hover { border-color: #C9D0DA; color: var(--pm-ink) !important; } .pm-content .filter-btn.active { background: var(--pm-akce) !important; border-color: var(--pm-akce); color: var(--pm-akce-ink) !important; font-weight: 700; } @media (pointer: coarse) { .pm-content .filter-btn { min-height: 44px; } } /* ── Rychlé akce v patičce panelu ───────────────────────────────────────── Pilulky pod seznamem „Vyžaduje pozornost". Panel dosud končil posledním řádkem a pod ním zbývalo prázdné místo, protože vedlejší graf je vyšší; tohle je to, co tam podle návrhu patří — tři věci, které člověk udělá hned poté, co si přečte, co hoří. */ .pm-panel-akce { margin-top: auto; padding: 15px 20px 18px; border-top: 1px solid var(--pm-line-2); } .pm-panel-akce-nadpis { display: block; font-size: 12px; font-weight: 700; color: var(--pm-ink-3); margin-bottom: 10px; } .pm-panel-akce-seznam { display: flex; flex-wrap: wrap; gap: 8px; } .pm-panel-akce-seznam > a, .pm-panel-akce-seznam > button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--pm-ink); background: var(--pm-surface-2); border: 1px solid var(--pm-line); border-radius: 999px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .12s ease, border-color .12s ease; } .pm-panel-akce-seznam > a:hover, .pm-panel-akce-seznam > button:hover { background: var(--pm-accent-bg); border-color: var(--pm-accent-rg); } @media (pointer: coarse) { .pm-panel-akce-seznam > a, .pm-panel-akce-seznam > button { min-height: 44px; } } /* ── Souhrn vedle grafu ─────────────────────────────────────────────────── Tři součty stály POD grafem v řadě vedle sebe; v Orbitě stojí vpravo ve sloupci, oddělené vláskou. Rozdíl není kosmetický: pod grafem se četly jako jeho popisek, vedle něj se čtou jako výsledek. „Zůstalo" je navíc to jediné číslo, kvůli kterému se na ten graf většinou kouká, a ve sloupci může být větší, aniž by rozhodilo řádek. Pod 900 px se sloupec vrací pod graf — vedle by na graf zbylo tak málo, že by se sloupce slily. */ .pm-graf-obal { display: flex; gap: 22px; align-items: stretch; min-width: 0; } .pm-graf-plocha { flex: 1 1 auto; min-width: 0; } .pm-graf-souhrn { flex: 0 0 176px; width: 176px; border-left: 1px solid var(--pm-line-2); padding-left: 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; } .pm-graf-souhrn-cislo { font-size: 19px; font-weight: 700; letter-spacing: -.03em; margin-top: 2px; white-space: nowrap; } .pm-graf-souhrn-vysledek { border-top: 1px solid var(--pm-line-2); padding-top: 13px; } .pm-graf-souhrn-vysledek .pm-graf-souhrn-cislo { font-size: 23px; } @media (max-width: 899px) { .pm-graf-obal { flex-direction: column; gap: 14px; } .pm-graf-souhrn { flex: 0 0 auto; width: auto; border-left: 0; padding-left: 0; border-top: 1px solid var(--pm-line-2); padding-top: 14px; flex-direction: row; flex-wrap: wrap; gap: 22px; } .pm-graf-souhrn-vysledek { border-top: 0; padding-top: 0; } } /* ── Rozdělení platby na nájem a zálohu ─────────────────────────────────── Panel v okně „Zaznamenat příjem". Patří k HLAVNÍ AKCI okna, a proto je jako jediný kus obsahu v aplikaci limetkový — je to táž barva jako tlačítko, kterým se to potvrdí. Kdyby limetka podbarvovala i jiné panely, přestala by znamenat „tohle je ta akce". Pruh není ozdoba. Rozdělení je věc, kterou zákazník odklikne bez čtení; poměr, na kterém je vidět, jak velký kus platby jde do zálohy, si přečte i ten, kdo větu pod zaškrtávátkem přeskočí. */ .pm-rozdeleni { background: var(--pm-akce-bg); border: 1px solid var(--pm-akce-line); border-radius: var(--pm-r-lg); padding: 15px 17px; } .pm-rozdeleni-volba { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; margin: 0; } .pm-rozdeleni-volba > input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--pm-accent); } .pm-rozdeleni-pruh { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--pm-line); margin-top: 12px; } /* Nájem nese tmavou modrou, záloha limetku — tedy totéž pořadí jako čísla pod pruhem. Přehozené barvy by udělaly z většího dílu ten vedlejší. */ .pm-rozdeleni-pruh > span:first-child { background: var(--pm-accent); } .pm-rozdeleni-pruh > span:last-child { background: var(--pm-akce); } .pm-rozdeleni-cisla { display: flex; justify-content: space-between; gap: 16px; margin-top: 9px; } .pm-rozdeleni-cisla > span { display: flex; flex-direction: column; min-width: 0; } .pm-rozdeleni-cisla > span:last-child { text-align: right; } .pm-rozdeleni-cisla > span > span:first-child { font-size: 19px; font-weight: 700; letter-spacing: -.025em; color: var(--pm-ink); } .pm-rozdeleni-cisla > span > span:last-child { font-size: var(--pm-fs-mikro); color: var(--pm-ink-3); font-weight: 600; } /* Vysvětlující věta („Zapíší se 2 položky…") drží vlevo, tlačítka vpravo. */ .pm-modal-shrnuti { margin-right: auto; color: var(--pm-ink-3); font-size: 12.5px; font-weight: 600; text-align: left; } /* ─── mřížky ─────────────────────────────────────────────────────────────── */ /* Dvojice polí vedle sebe (datum + nemovitost, částka + kategorie). Pod 420 px by na pole zbylo sotva 120 px, tam jdou pod sebe. */ .pm-grid-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } @media (max-width: 419px) { .pm-grid-pair { grid-template-columns: minmax(0, 1fr); } } /* Karty, které se samy přeskládají podle toho, kolik jich je a kolik je místa — bez jediného breakpointu. `min()` hlídá, aby se na úzkém telefonu nesnažily držet svou minimální šířku a nepřetekly. */ .pm-grid-auto { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .pm-grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); } /* Řada klíčových ukazatelů nad stránkou. */ .pm-kpi-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } /* DVOJICE PANELŮ SE NENATAHUJE NA VÝŠKU TOHO VYŠŠÍHO. Mřížka roztahuje buňky ve výchozím stavu, takže „Vyžaduje pozornost" se dvěma řádky kopírovalo výšku grafu a pod obsahem zbývalo přes dvě stě pixelů prázdné bílé plochy — vypadalo to, že se panel nedokreslil. */ .pm-grid-2 { align-items: start; } /* Na tabletu se čtyři karty samy poskládaly jako 3 + 1 a poslední stála osaměle přes celou šířku. Dvě řady po dvou drží mřížku v klidu. */ @media (min-width: 560px) and (max-width: 1023px) { .pm-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .pm-kpi-row { gap: 12px; } } /* ─── prázdné stavy ──────────────────────────────────────────────────────── */ .pm-empty { text-align: center; padding: 48px 24px; } .pm-empty-icon { width: 52px; height: 52px; border-radius: var(--pm-r-lg); margin: 0 auto 14px; background: var(--pm-accent-bg); color: var(--pm-accent); display: flex; align-items: center; justify-content: center; } .pm-empty-title { font-size: 15px; font-weight: 800; } .pm-empty-text { color: var(--pm-ink-3); font-size: 13.5px; margin-top: 5px; max-width: 380px; margin-left: auto; margin-right: auto; } /* ─── segmentový přepínač ────────────────────────────────────────────────── */ /* Přepínač je ŽLÁBEK, do kterého je aktivní volba vysunutá ven. Vnitřní stín dává dojem prohlubně, aktivní položka má hranu a stín jako karta — díky tomu je poznat i bez barvy, což je podstatné: rozdíl mezi „Měsíčně" a „Ročně" nesl dřív jen odstín šedé. *//* PŘEPÍNAČ JE ŘADA PILULEK, ne zapuštěná kolejnice. Vnitřní stín pod přepínačem byl tentýž reliéf, který zmizel u polí — v Orbitě se stav „vybráno" pozná plnou bílou v lince, ne prohlubní kolem. */ .pm-segment { display: inline-flex; gap: 4px; padding: 4px; background: #EEF0F3; border-radius: 999px; } .pm-segment-item { height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border: 0; background: none; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--pm-ink-2); cursor: pointer; white-space: nowrap; } a.pm-segment-item { text-decoration: none; } .pm-segment-item:hover { color: var(--pm-ink); } .pm-segment-item.is-active { background: var(--pm-surface); color: var(--pm-ink); font-weight: 700; box-shadow: 0 1px 2px rgba(13, 17, 23, .10); } /* ─── přihlašovací a samostatné stránky ──────────────────────────────────── */ /* `--pm-pruh` je výška lišty testovací instance (na ostré nula). `body` o ni dostane odsazení shora, takže bez odečtení by plná výška okna vyčnívala přesně o ni — a na přihlašovací stránce by se objevil svislý posuvník kvůli 26 pixelům. Je to první obrazovka, kterou tester uvidí. */ .pm-auth { min-height: calc(100vh - var(--pm-pruh, 0px)); display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 24px); background: var(--pm-canvas); } @supports (min-height: 100dvh) { .pm-auth { min-height: calc(100dvh - var(--pm-pruh, 0px)); } } .pm-auth-card { width: 100%; max-width: 392px; } .pm-auth-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--pm-znacka-bg); display: flex; align-items: center; justify-content: center; flex: 0 0 38px; } /* ══════════════════════════════════════════════════════════════════════════ Responzivita — kostra aplikace Stupnice breakpointů, na které se odkazuje celý zbytek souboru: ≤ 479 px telefon na výšku ≤ 639 px telefon na šířku, malý tablet ≤ 767 px hranice, pod kterou se lišty a mřížky skládají pod sebe ≤ 1023 px tablet — postranní nabídka se vysouvá přes obsah 1024–1279 malý notebook — nabídka je vidět, ale užší ≥ 1800 px velký monitor — sloupec obsahu i nabídka se rozšíří ══════════════════════════════════════════════════════════════════════════ */ .pm-sidebar-toggle { display: none; } .pm-scrim { display: none; } /* ─── velký monitor ──────────────────────────────────────────────────────── */ /* Na 4K a ultraširokých panelech zůstávalo po stranách zbytečně mnoho prázdna. Sloupec obsahu i nabídka se o kus rozšíří, řádky ale pořád nepřerostou čitelnou délku. */ @media (min-width: 1800px) { :root { --pm-measure: 1720px; } .pm-sidebar { width: 276px; flex: 0 0 276px; } } /* ─── malý notebook (1024–1279) ──────────────────────────────────────────── */ /* Postranní nabídka se vejde, ale při 252 px ukrajovala ze sloupce obsahu čtvrtinu okna. Užší varianta nechá tabulkám o 36 px víc. */ @media (min-width: 1024px) and (max-width: 1279px) { .pm-sidebar { width: 216px; flex: 0 0 216px; padding-inline: 10px; } .pm-nav-item { gap: 9px; font-size: 13px; } } /* ─── tablet a méně: vysouvací nabídka ───────────────────────────────────── */ @media (max-width: 1023px) { .pm-sidebar { position: fixed; inset: var(--pm-pruh, 0px) auto 0 0; z-index: 70; width: min(252px, 84vw); flex-basis: auto; height: auto; align-self: auto; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--pm-shadow-lg); padding-left: max(12px, env(safe-area-inset-left)); } @media (prefers-reduced-motion: reduce) { .pm-sidebar { transition: none; } } body.pm-nav-open .pm-sidebar { transform: none; } body.pm-nav-open .pm-scrim { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(16, 20, 32, .45); } /* stránka pod vysunutou nabídkou nesmí rolovat */ body.pm-nav-open { overflow: hidden; } .pm-sidebar-toggle { display: inline-flex; } /* Nabídka hledání má v šabloně `left:0;right:0`, aby lícovala s polem. V užším okně se ale roztáhla přes celou lištu a vysunula se za pravý okraj. Tady roste doleva od svého tlačítka a nepřeroste okno. */ .pm-search { width: 200px; flex: 0 1 200px; } .pm-header .pm-menu { left: auto !important; right: 0 !important; max-width: calc(100vw - 24px); } } /* ─── telefon na výšku i na šířku ────────────────────────────────────────── */ @media (max-width: 767px) { .pm-search { display: none; } .pm-header { gap: 8px; } .pm-header-inner { gap: 8px; } .pm-page-sub { display: none; } } @media (max-width: 639px) { .pm-btn-label-sm { display: none; } .pm-btn { padding: 0 12px; } .pm-btn-lg { height: 42px; font-size: 14px; } .pm-section-title { font-size: 14.5px; } .pm-empty { padding: 34px 16px; } .pm-modal-head { padding: 15px 16px 13px; } .pm-modal-body { padding: 15px 16px; } .pm-modal-foot { padding: 12px 16px 15px; } .pm-modal-foot .pm-btn { flex: 1 1 auto; } .pm-overlay { padding: 12px; } .pm-consent { inset: auto 10px max(10px, env(safe-area-inset-bottom)) 10px; padding: 14px; } /* Prohlížeč na iOS přibližuje stránku, jakmile se zaostří pole s písmem menším než 16 px. Na telefonu je proto písmo v polích o kus větší. */ .pm-input, .pm-select, .pm-textarea, .pm-search-input { font-size: 16px; } /* tabulky psané ručně: hustší buňky, ať se vejde víc sloupců */ .pm-table thead th { padding: 8px 11px; } .pm-table tbody td { padding: 10px 11px; font-size: 13px; } /* záložky sekcí se posouvají do strany místo zalomení do dvou řádků */ .pm-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .pm-tabs::-webkit-scrollbar { display: none; } .pm-tab { white-space: nowrap; flex: 0 0 auto; } .pm-segment { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .pm-segment::-webkit-scrollbar { display: none; } } @media (max-width: 479px) { .pm-header { min-height: 60px; padding-block: 10px; } .pm-brand-sub { display: none; } .pm-menu { min-width: min(300px, calc(100vw - 20px)) !important; } .pm-empty-icon { width: 44px; height: 44px; } } /* ─── telefon položený na šířku ──────────────────────────────────────────── */ /* Na výšku 400 px zabírala přišpendlená hlavička pětinu obrazovky. V tomto režimu roluje s obsahem pryč. */ @media (max-height: 500px) and (orientation: landscape) { .pm-header { position: static; min-height: 56px; } .pm-content { padding-top: 14px; } .pm-overlay { padding: 10px; align-items: flex-start; } } /* ─── dotykové ovládání ──────────────────────────────────────────────────── */ /* Prstem se do 30px vysokého tlačítka trefuje špatně. Na dotykových zařízeních dostanou ovládací prvky větší plochu; myš zůstává beze změny. */ @media (pointer: coarse) { .pm-btn { min-height: 40px; } .pm-btn-sm { min-height: 34px; } .pm-btn-icon { min-width: 40px; } .pm-btn-icon.pm-btn-sm { min-width: 34px; } .pm-nav-item, .pm-menu-item { padding-top: 11px; padding-bottom: 11px; } .pm-segment-item { height: 34px; } .pm-tab { padding-top: 11px; padding-bottom: 12px; } .pm-input, .pm-select { min-height: 44px; } } /* Kompaktní pole a výběr UVNITŘ ŘÁDKU TABULKY. Dřív to byly inline rozměry přímo ve značkování, takže je nešlo na telefonu přebít ničím — pole bylo 28 px vysoké s písmem 11,5 px, tedy netrefitelné prstem a Safari kvůli němu přiblížilo celou stránku. */ .pm-input-radek, .pm-select-radek { height: 30px; min-height: 0; font-size: 12px; padding: 2px 8px; width: auto; } /* ─── tisk ───────────────────────────────────────────────────────────────── */ @media print { .pm-sidebar, .pm-header, .pm-scrim, .pm-no-print { display: none !important; } .pm-content { padding: 0; } .pm-card { box-shadow: none; break-inside: avoid; } body { background: #FFF; } } /* ─── překryv modálního okna ─────────────────────────────────────────────── */ /* Překryv je `fixed`, takže odsazení `body` ho míjí a sahá až pod lištu testovací instance — ta má vyšší vrstvu, takže by okno nahoře přeťala (typicky přes křížek). Odsazení shora proto lištu započítá. */ .pm-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; padding-top: calc(20px + var(--pm-pruh, 0px)); background: rgba(16, 20, 32, .45); backdrop-filter: blur(2px); overflow-y: auto; } .pm-overlay[hidden] { display: none; } .pm-overlay > .pm-modal-panel { animation: pm-pop .16s ease-out; width: 100%; max-width: 560px; max-height: calc(100vh - 40px - var(--pm-pruh, 0px)); overflow-y: auto; } /* Na telefonu se lišta prohlížeče schovává a 100vh je vyšší než viditelná plocha — spodek okna by zůstal pod ní. dvh měří jen to, co je vidět. */ @supports (max-height: 100dvh) { .pm-overlay > .pm-modal-panel { max-height: calc(100dvh - 40px - var(--pm-pruh, 0px)); } } @media (max-width: 639px) { .pm-overlay > .pm-modal-panel { max-height: calc(100vh - 24px); } @supports (max-height: 100dvh) { .pm-overlay > .pm-modal-panel { max-height: calc(100dvh - 24px); } } } @keyframes pm-pop { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .pm-overlay > .pm-modal-panel { animation: none; } } /* ══════════════════════════════════════════════════════════════════════════ Přechodová vrstva Šablony jsou psané pomocí Tailwindu. Barvy už míří na paletu systému (mapování v index.php), tady dorovnáváme tvar: vlásková linka místo stínu, jednotné rádiusy, výšky ovládacích prvků a stavy při zaostření. ══════════════════════════════════════════════════════════════════════════ */ /* Inline ikony sedí na účaří textu. Tailwind ze CDN nastavuje svg { display: block }, takže ikona vložená doprostřed věty spadla na vlastní řádek pod text a zároveň roztáhla odstavec přes okraj karty. Vracíme ji zpět mezi text. */ body svg { display: inline-block; vertical-align: -0.18em; } .pm-btn svg, .pm-nav-item svg, .pm-menu-item svg, .pm-flash svg, .pm-badge svg, .pm-attn-icon svg, .pm-empty-icon svg, .pm-brand-mark svg, .pm-segment-item svg, .pm-search-icon svg { vertical-align: 0; } /* ─── karty ──────────────────────────────────────────────────────────────── */ .bg-white.rounded-xl, .bg-white.rounded-lg, .bg-white.rounded-2xl, .bg-white.rounded-md { border: 1px solid var(--pm-line); box-shadow: var(--pm-shadow); } /* vnořené prvky uvnitř karty už rámeček nedostávají */ .bg-white.rounded-xl .bg-white.rounded-lg, .bg-white.rounded-xl .bg-white.rounded-md { box-shadow: none; } .shadow-xl, .shadow-lg { box-shadow: var(--pm-shadow-md); } .shadow-md, .shadow { box-shadow: var(--pm-shadow); } .metric-card { transition: border-color .15s ease, box-shadow .15s ease; } .metric-card:hover { border-color: #C9CCFA; box-shadow: var(--pm-shadow-md); transform: none; } /* ─── nadpisy uvnitř obsahu ──────────────────────────────────────────────── */ .pm-content h2, .pm-content h3 { letter-spacing: -.015em; } .pm-content .text-xl { font-size: 16px; font-weight: 800; } .pm-content .text-lg { font-size: 15px; font-weight: 800; } .pm-content .text-2xl { letter-spacing: -.025em; } /* ─── tlačítka psaná Tailwindem ──────────────────────────────────────────── */ .pm-content button:not(.pm-btn):not(.pm-segment-item):not(.pm-menu-item), .pm-content a.bg-blue-600, .pm-content a.bg-indigo-600, .pm-content a.bg-green-600, .pm-content a.bg-red-600, .pm-content a.bg-gray-600 { font-weight: 700; transition: background-color .13s ease, border-color .13s ease, color .13s ease; } .pm-content button:not(.pm-btn):focus-visible, .pm-content a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pm-accent-rg); border-radius: var(--pm-r); } /* ─── formulářová pole psaná Tailwindem ──────────────────────────────────── */ .pm-content input:not([type="checkbox"]):not([type="radio"]):not(.pm-input), .pm-content select:not(.pm-select), .pm-content textarea:not(.pm-textarea) { border-radius: var(--pm-r-md); border-color: var(--pm-line); font-family: inherit; transition: border-color .13s ease, box-shadow .13s ease; } .pm-content input:focus, .pm-content select:focus, .pm-content textarea:focus { outline: none; border-color: var(--pm-accent) !important; box-shadow: 0 0 0 3px var(--pm-accent-rg); } .pm-content input[type="checkbox"], .pm-content input[type="radio"] { accent-color: var(--pm-accent); width: 16px; height: 16px; cursor: pointer; } .pm-content label { font-weight: 600; } /* částky a data v tabulkách drží zákryt */ .pm-content input[type="number"], .pm-content input[type="date"] { font-variant-numeric: tabular-nums; } /* ─── tabulky psané Tailwindem ───────────────────────────────────────────── */ .pm-content table { border-collapse: collapse; } .pm-content thead th { font-size: 10.5px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pm-ink-3) !important; background: #FCFCFD; border-bottom: 1px solid var(--pm-line); white-space: nowrap; } .pm-content tbody tr { border-bottom: 1px solid var(--pm-line-3); transition: background-color .1s ease; } .pm-content tbody tr:last-child { border-bottom: 0; } .pm-content tbody tr:hover { background: var(--pm-surface-2); } .pm-content tbody td { border-bottom: 0; } /* ─── odznaky psané Tailwindem ───────────────────────────────────────────── */ .pm-content .rounded-full.text-xs, .pm-content .rounded-full.text-\[11px\] { font-weight: 700; letter-spacing: .01em; } /* ─── překryvy starých modálů ────────────────────────────────────────────── */ .pm-content ~ div[id$="Modal"].fixed, div[id$="Modal"].fixed.inset-0 { background: rgba(16, 20, 32, .45) !important; backdrop-filter: blur(2px); z-index: 80; } div[id$="Modal"] .bg-white { border-radius: var(--pm-r-xl); box-shadow: var(--pm-shadow-lg); border: 1px solid var(--pm-line); } /* ─── záložky (Energie) ──────────────────────────────────────────────────── */ .tab-btn { color: var(--pm-ink-2); font-weight: 600; } .tab-btn.active { background: var(--pm-surface); color: var(--pm-ink); font-weight: 700; box-shadow: 0 1px 2px rgba(16,20,32,.06); } /* ─── užší mřížka na malých displejích ───────────────────────────────────── */ @media (max-width: 1100px) { .pm-grid-2 { grid-template-columns: minmax(0, 1fr) !important; } } /* ─── tlačítka s ikonou se nesmí zalamovat ───────────────────────────────── */ /* Ikona a popisek patří na jeden řádek; v úzkém sloupci tabulky se text jinak zalomí pod ikonu a tlačítko vypadá rozbitě. */ /* Výjimka: prvek, uvnitř kterého je odstavec nebo blok, je zaškrtávací políčko s popisem, ne tlačítko. Zákaz zalomení by mu roztáhl text přes okraj karty — proto se na takové prvky nevztahuje. */ .pm-content button:not(:has(p, div, ul, ol, table)), .pm-content a[class*="bg-"]:not(:has(p, div, ul, ol, table)), .pm-content label[class*="bg-"]:not(:has(p, div, ul, ol, table)), .pm-modal-panel button:not(:has(p, div, ul, ol, table)), .pm-modal-panel a[class*="bg-"]:not(:has(p, div, ul, ol, table)) { white-space: nowrap; } .pm-content button:has(svg), .pm-content a[class*="bg-"]:has(svg), .pm-content a[class*="text-"]:has(svg), .pm-content label:has(> svg), .pm-modal-panel button:has(svg) { display: inline-flex; align-items: center; gap: 6px; } /* SKRYTÍ MUSÍ PŘEBÍT VŠECHNO, CO TU NAD NÍM STOJÍ. Šablony schovávají prvky tailwindovou třídou `hidden`, tedy pravidlem `.hidden { display: none }` z tailwind-play.js. To má váhu (0,1,0), zatímco `:has(svg)` výš přidává váhu navíc — takže KAŽDÉ tlačítko s ikonou uvnitř `.pm-content` třídu `hidden` ignorovalo a zůstávalo vidět. V okně „Nová nemovitost“ tím v prvním kroku svítilo „Předchozí“ i „Přidat nemovitost“, tedy tlačítka pro jiný krok. Dohadovat se o váhu selektorů u každého dalšího pravidla znamená, že se na jedno zapomene — proto jediná pojistka s `!important`. PLATÍ NA CELÝ DOKUMENT, ne jen uvnitř `.pm-content`. Plovoucí pomocníci (panel průvodce, bubliny, lupa) visí na ``, tedy MIMO obsah — a tam pojistka nedosáhla. `.pm-pruvodce-akce` má `display:flex` (váha 0,1,0), takže přebilo `[hidden]` z výchozího listu prohlížeče (0,0,1): s vypnutým průvodcem zůstala v panelu „Pomocník“ tlačítka „Projít stránku“ a „Vypnout“, která k němu nepatří. Bylo to vidět na KAŽDÉ stránce a na každém rozlišení — 108 nálezů z `driver.mjs rozvrzeni`. Responzivní varianty typu `hidden md:block` v projektu nejsou, takže globální `!important` nemá co rozbít. */ .hidden, [hidden] { display: none !important; } /* Záhlaví tabulky s řadicí šipkou je v šabloně `flex justify-between`, aby šipka seděla u pravého okraje buňky. Předchozí pravidlo ho měnilo na `inline-flex`, čímž se smrskl na šířku textu — šipka se přilepila k nadpisu a buňky bez šipky se svisle rozešly s ostatními. */ .pm-content th > div:has(svg) { display: flex; align-items: center; gap: 6px; } .pm-content thead th { vertical-align: middle; } /* popisek s ikonou drží ikonu za textem, ne pod ním */ .pm-content label:has(> svg) svg { color: var(--pm-ink-3); } /* prvky, které mají zůstat blokové */ .pm-content button.w-full:has(svg), .pm-content a.block:has(svg), .pm-content a.w-full:has(svg) { display: flex; justify-content: center; } .pm-content button:has(svg) svg, .pm-content a:has(svg) svg { vertical-align: 0; flex: 0 0 auto; } /* ─── souhrnné karty s ikonou ──────────────────────────────────────────── Prvek ve flexboxu se ve výchozím nastavení nesmí zmenšit pod šířku svého obsahu. Na užším displeji proto popisek („Celkem nemovitostí") vystoupil z karty ven. min-width: 0 mu dovolí se zalomit. */ .pm-content .flex.items-center > div, .pm-content .flex.items-start > div { min-width: 0; } /* buňky tabulky s několika akcemi drží tlačítka vedle sebe */ .pm-content td .flex.gap-1, .pm-content td .flex.gap-2 { flex-wrap: nowrap; } /* ─── zavírací křížek ve starších modálech ─────────────────────────────── Byla to jen bledá ikona bez plochy — těžko se trefovala a nelícovala s nadpisem. Dostane stejný tvar jako ostatní ikonová tlačítka. */ .pm-content [class*="absolute"][class*="top-4"][class*="right-4"], .pm-content [class*="absolute"][class*="top-3"][class*="right-3"] { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--pm-r-sm, 9px); color: var(--pm-ink-3); transition: background .13s ease, color .13s ease; } .pm-content [class*="absolute"][class*="top-4"][class*="right-4"]:hover, .pm-content [class*="absolute"][class*="top-3"][class*="right-3"]:hover { background: var(--pm-line-2); color: var(--pm-ink); } /* ─── lišty nad seznamy na úzkém displeji ──────────────────────────────── Řádky s tlačítky, filtry a hledáním jsou psané jako `flex justify-between` bez povoleného zalomení a pole mají pevnou šířku (w-64). Na telefonu se proto nevešly a vysunuly se ven z obrazovky — stránka pak jela do strany. Tady je necháme zalomit a pole zmenšit; na velkém displeji se nic nemění. */ @media (max-width: 767px) { .pm-content .flex.justify-between, .pm-content .flex.items-center, .pm-content .flex.items-start, .pm-content .flex.gap-2, .pm-content .flex.gap-3, .pm-content .flex.gap-4, .pm-content .flex.space-x-2, .pm-content .flex.space-x-3, .pm-content .flex.space-x-4 { flex-wrap: wrap; row-gap: 10px; } /* pevná šířka pole nesmí přerůst obrazovku */ .pm-content input, .pm-content select, .pm-content textarea, .pm-content .relative, .pm-content .w-fit { max-width: 100%; } /* přepínač záložek (Energie) se zalomí místo vysunutí ven */ .pm-content .w-fit.flex { flex-wrap: wrap; } /* Výjimka: záhlaví tabulky. Je to `flex items-center justify-between` kvůli řadicí šipce u pravého okraje — po zalomení šipka spadla pod nadpis a rozházela výšku celého řádku. */ .pm-content th > div.flex.items-center { flex-wrap: nowrap; } /* Výjimka: popisek s přepínačem nebo zaškrtávátkem. Po zalomení skončil text pod svým políčkem a nebylo poznat, ke kterému patří. Zalomí se až samotný text uvnitř. */ .pm-content label.flex.items-center { flex-wrap: nowrap; } .pm-content label.flex.items-center > input { flex: 0 0 auto; } } /* ─── kalendář (FullCalendar) ────────────────────────────────────────────── */ /* Na užším okně se panel asistenta přesune pod kalendář. Dokud byl vedle něj napevno široký 320 px, zbylo na samotný kalendář sotva sto pixelů a čísla dnů i lišta s ovládáním lezly ven z karty. */ @media (max-width: 980px) { .pm-calendar-layout { flex-wrap: wrap; height: auto !important; } .pm-calendar-layout > * { flex: 1 1 100%; width: 100%; min-width: 0; } .pm-calendar-layout #calendar { min-height: 460px; } .pm-calendar-layout .w-80 { max-height: 60vh; } } /* Ovládání kalendáře se na malém displeji zalomí místo vysunutí ven */ @media (max-width: 767px) { .fc .fc-toolbar.fc-header-toolbar { flex-wrap: wrap; gap: 8px; justify-content: center; } .fc .fc-toolbar-chunk { display: flex; align-items: center; gap: 6px; } } .fc { --fc-border-color: var(--pm-line-2); --fc-today-bg-color: var(--pm-accent-bg); } /* delší název události se ukončí třemi tečkami, ne uprostřed písmene */ .fc .fc-event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fc .fc-toolbar-title { font-size: 17px !important; font-weight: 800; letter-spacing: -.02em; } .fc .fc-button { background: var(--pm-surface) !important; border: 1px solid var(--pm-line) !important; color: var(--pm-ink-2) !important; font-weight: 600 !important; font-size: 13px !important; border-radius: var(--pm-r) !important; box-shadow: none !important; text-transform: none !important; padding: 6px 12px !important; } .fc .fc-button:hover { background: #F1F2F6 !important; color: var(--pm-ink) !important; } .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background: var(--pm-ink) !important; border-color: var(--pm-ink) !important; color: #fff !important; } .fc .fc-button:focus { box-shadow: 0 0 0 3px var(--pm-accent-rg) !important; } .fc .fc-col-header-cell-cushion { color: var(--pm-ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 8px 4px; } .fc .fc-daygrid-day-number { color: var(--pm-ink-2); font-size: 12.5px; font-weight: 600; padding: 6px 8px; } .fc .fc-day-today .fc-daygrid-day-number { color: var(--pm-accent); font-weight: 800; } .fc .fc-event { border: 0 !important; border-radius: 5px !important; font-size: 11.5px; font-weight: 600; padding: 1px 5px; } .fc .fc-daygrid-event { margin-top: 2px; } .fc .fc-list-day-cushion { background: var(--pm-surface-2); } .fc a { text-decoration: none; } /* ══════════════════════════════════════════════════════════════════════════ Odpovědi aplikace — plovoucí hlášky a potvrzovací dialogy Nahrazují systémové alert()/confirm(), které vypadají jako cizí prvek prohlížeče. Vzhled i barvy vychází ze stejné palety jako zbytek aplikace. ══════════════════════════════════════════════════════════════════════════ */ .pm-toast-wrap { position: fixed; z-index: 200; right: 20px; bottom: 20px; display: flex; flex-direction: column-reverse; gap: 10px; width: min(384px, calc(100vw - 40px)); pointer-events: none; } .pm-toast { pointer-events: auto; position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px 13px 15px; background: var(--pm-surface); border: 1px solid var(--pm-line); border-left: 3px solid var(--pm-ink-3); border-radius: var(--pm-r-md); box-shadow: var(--pm-shadow-lg); animation: pm-toast-in .22s cubic-bezier(.2, .9, .3, 1); } .pm-toast.is-leaving { animation: pm-toast-out .16s ease-in forwards; } .pm-toast-icon { width: 26px; height: 26px; flex: 0 0 26px; border-radius: var(--pm-r-sm); display: flex; align-items: center; justify-content: center; } .pm-toast-body { min-width: 0; flex: 1; padding-top: 2px; } .pm-toast-title { font-size: 13.5px; font-weight: 700; color: var(--pm-ink); letter-spacing: -.01em; } .pm-toast-text { font-size: 13px; font-weight: 500; color: var(--pm-ink-2); margin-top: 2px; overflow-wrap: anywhere; } .pm-toast-title + .pm-toast-text { margin-top: 3px; } .pm-toast-close { flex: 0 0 24px; width: 24px; height: 24px; margin: -2px -4px 0 0; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: var(--pm-r-sm); color: var(--pm-ink-4); cursor: pointer; } .pm-toast-close:hover { background: #F1F2F6; color: var(--pm-ink-2); } /* proužek odpočtu do zmizení */ .pm-toast-life { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: .3; transform-origin: left center; animation: pm-toast-life linear forwards; } .pm-toast-success { border-left-color: var(--pm-pos); color: var(--pm-pos); } .pm-toast-success .pm-toast-icon { background: var(--pm-pos-bg); color: var(--pm-pos); } .pm-toast-danger { border-left-color: var(--pm-neg); color: var(--pm-neg); } .pm-toast-danger .pm-toast-icon { background: var(--pm-neg-bg); color: var(--pm-neg); } .pm-toast-warning { border-left-color: var(--pm-warn); color: var(--pm-warn); } .pm-toast-warning .pm-toast-icon { background: var(--pm-warn-bg); color: var(--pm-warn); } .pm-toast-info { border-left-color: var(--pm-accent); color: var(--pm-accent); } .pm-toast-info .pm-toast-icon { background: var(--pm-accent-bg); color: var(--pm-accent); } @keyframes pm-toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes pm-toast-out { to { opacity: 0; transform: translateY(6px) scale(.98); } } @keyframes pm-toast-life { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .pm-toast, .pm-toast.is-leaving { animation: none; } .pm-toast-life { animation: none; display: none; } } @media (max-width: 639px) { .pm-toast-wrap { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: auto; } } /* ─── potvrzovací dialog ─────────────────────────────────────────────────── */ .pm-dialog-icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--pm-r-md); display: flex; align-items: center; justify-content: center; } .pm-dialog-icon-danger { background: var(--pm-neg-bg); color: var(--pm-neg); } .pm-dialog-icon-warning { background: var(--pm-warn-bg); color: var(--pm-warn); } .pm-dialog-icon-success { background: var(--pm-pos-bg); color: var(--pm-pos); } .pm-dialog-icon-info { background: var(--pm-accent-bg); color: var(--pm-accent); } .pm-dialog-text { color: var(--pm-ink-2); font-size: 13.5px; font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; } .pm-dialog-text strong { color: var(--pm-ink); font-weight: 700; } /* hlášky se netisknou */ @media print { .pm-toast-wrap { display: none !important; } } /* ─── záložky sekce (správa aplikace) ────────────────────────────────────── */ .pm-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--pm-line); margin-bottom: 20px; } .pm-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px 10px; margin-bottom: -1px; color: var(--pm-ink-3); font-size: 13px; font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .pm-tab:hover { color: var(--pm-ink-2); } .pm-tab-active { color: var(--pm-accent); border-bottom-color: var(--pm-accent); } /* ─── lišta se souhlasem s cizími službami ───────────────────────────────── */ .pm-consent { position: fixed; inset: auto 16px 16px 16px; z-index: 60; max-width: 560px; margin-inline: auto; background: var(--pm-surface); border: 1px solid var(--pm-line); border-radius: var(--pm-r-lg); box-shadow: var(--pm-shadow-lg); padding: 16px 18px; } .pm-consent p { margin: 0 0 12px; color: var(--pm-ink-2); font-size: 13px; line-height: 1.6; } .pm-consent-title { margin: 0 0 8px; font-size: 14.5px; font-weight: 650; color: var(--pm-ink-1); } .pm-consent-text { margin: 0 0 12px; } .pm-consent-form { display: block; margin: 0; } /* Rozbalovací nastavení kategorií. Je to
, takže funguje i bez JavaScriptu — souhlas nesmí jít obejít jeho vypnutím. */ .pm-consent-detail { margin: 0 0 12px; } .pm-consent-detail > summary { cursor: pointer; font-size: 12.5px; color: var(--pm-ink-2); padding: 6px 0; user-select: none; } .pm-consent-detail > summary:hover { color: var(--pm-ink-1); } .pm-consent-list { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 10px; } .pm-consent-item { display: grid; gap: 2px; } .pm-consent-item label { display: flex; align-items: center; gap: 8px; cursor: pointer; } .pm-consent-item input[disabled] { cursor: default; } .pm-consent-item-name { font-size: 13px; font-weight: 600; color: var(--pm-ink-1); } .pm-consent-item-name em { font-weight: 400; font-style: normal; color: var(--pm-ink-3); } .pm-consent-item-desc { font-size: 12px; line-height: 1.55; color: var(--pm-ink-3); padding-left: 24px; } /* Rovnocenná tlačítka. POZOR, tohle není jen vzhled: „Přijmout" a „Odmítnout" musí mít stejnou barvu, velikost i kontrast. Zvýraznit přijetí a odmítnutí odsunout do nenápadného odkazu je praxe, za kterou se pokutuje (GDPR čl. 7, stanovisko EDPB 5/2020). Proto jedna společná třída pro obě — ne pm-btn-primary a pm-btn-secondary. */ .pm-consent-actions { display: flex; gap: 8px; flex-wrap: wrap; } .pm-consent-btn { flex: 1 1 0; min-width: 140px; justify-content: center; background: var(--pm-accent); color: #fff; border: 1px solid var(--pm-accent); font-weight: 600; } .pm-consent-btn:hover { filter: brightness(1.06); } .pm-consent-odkaz { margin: 12px 0 0; font-size: 11.5px; color: var(--pm-ink-3); } /* Samostatný odkaz na vlastním řádku. Velikost je tady, ne inline — inline zapsané písmo by na telefonu nešlo zvětšit. */ .pm-odkaz-radek { font-size: 12px; } /* Tlačítko v řádku tabulky — kompaktní na myši, plné na dotyku (zvětšení řeší dotykový blok na konci souboru). */ .pm-btn-radek { height: 30px; padding: 0 8px; } .pm-consent-odkaz a { color: var(--pm-ink-2); text-decoration: underline; } /* ─── patička s trvalým odkazem na nastavení cookies ─────────────────────── */ /* Odvolat souhlas musí být stejně snadné jako ho dát (GDPR čl. 7 odst. 3), takže odkaz je na každé stránce, ne jen v liště, která už zmizela. */ /* PATIČKA SE DOTÝKÁ PANELU. Měla `margin-top: 32px`, jenže stojí MIMO `.pm-shell` — a přišpendlený postranní panel nemůže přerůst svůj obal, takže na konci dlouhé stránky tmavý pruh skončil o těch 32 px dřív než čára patičky a v levém sloupci zbyl proužek plátna, který vypadal jako uříznutá nabídka. Odstup nad patičkou drzí její vlastní odsazení a spodní odsazení `.pm-content`. */ .pm-paticka { margin-top: 0; padding: 26px 20px 24px; border-top: 1px solid var(--pm-line); display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 12px; color: var(--pm-ink-3); } .pm-paticka a { color: var(--pm-ink-2); text-decoration: none; } /* Verze v patičce. Tlumená — je to údaj pro hlášení chyby, ne sdělení, kvůli kterému by měl člověk přestat číst zbytek. */ .pm-verze { color: var(--pm-ink-3); font-variant-numeric: tabular-nums; } .pm-paticka a:hover { color: var(--pm-ink-1); text-decoration: underline; } .pm-paticka form { display: inline; } .pm-paticka-odkaz { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--pm-ink-2); text-decoration: none; } .pm-paticka-odkaz:hover { color: var(--pm-ink-1); text-decoration: underline; } /* ══════════════════════════════════════════════════════════════════════════ Responzivita — obsah psaný Tailwindem Šablony vznikly dřív než tenhle designový systém a mají v sobě pevné šířky, čtyřsloupcové mřížky bez varianty pro telefon a modální okna, která na nízké obrazovce nešla dorolovat. Následující pravidla to dorovnávají centrálně, aby se nemusela přepisovat každá šablona zvlášť. ══════════════════════════════════════════════════════════════════════════ */ /* ─── modální okna starších šablon ───────────────────────────────────────── */ /* Okna jsou stavěná jako `fixed inset-0` s vnitřním `min-h-screen` a panelem vystředěným flexboxem. Když byl obsah vyšší než okno, vršek panelu se ustřihl a nešlo se k němu dostat — flexbox vystředěné dítě, které přeteče, uřízne. Řešíme to stejně jako u `.pm-overlay`: panel nikdy nepřeroste výšku okna a roluje sám v sobě. */ div[id$="Modal"].fixed.inset-0 { overflow-y: auto; overscroll-behavior: contain; } /* `min-h-screen` je 100vh — na telefonu je to víc než viditelná plocha, protože se počítá i s lištou prohlížeče, která se při rolování schová. Panel vystředěný v takové výšce sedí kus pod ohybem. */ @supports (min-height: 100dvh) { div[id$="Modal"] .min-h-screen { min-height: 100dvh; } } div[id$="Modal"] > div > .bg-white, div[id$="Modal"].flex > .bg-white { max-height: calc(100vh - 40px); overflow-y: auto; } @supports (max-height: 100dvh) { div[id$="Modal"] > div > .bg-white, div[id$="Modal"].flex > .bg-white { max-height: calc(100dvh - 40px); } } /* ─── mřížky, které v šabloně nemají variantu pro úzký displej ───────────── */ /* Zbylé dvou- a třísloupcové výpisy údajů (detail smlouvy, parametry bytu). U formulářů je varianta `sm:` přímo v šabloně; tohle je záchranná síť pro nejužší telefony, kde by dva sloupce daly na údaj 130 px. */ @media (max-width: 479px) { .pm-content .grid-cols-2, .pm-content .grid-cols-3, .pm-content .grid-cols-4 { grid-template-columns: minmax(0, 1fr) !important; } } /* ─── hustota na telefonu ────────────────────────────────────────────────── */ /* Odsazení `p-6` (24 px) sebralo na 360px displeji třetinu šířky karty. Mezery mezi kartami se zmenší úměrně. */ @media (max-width: 639px) { .pm-content .p-6, .pm-content .p-8 { padding: 16px; } .pm-content .px-6 { padding-left: 16px; padding-right: 16px; } .pm-content .py-6 { padding-top: 16px; padding-bottom: 16px; } .pm-content .gap-6, .pm-content .gap-8 { gap: 16px; } .pm-content .mb-8 { margin-bottom: 20px; } .pm-content .space-y-6 > * + * { margin-top: 16px; } /* Buňky tabulek: `px-6 py-4` znamenalo 48 px odsazení na sloupec, takže se do šířky vešly sotva dva. Užší buňky nechají vidět víc dat. */ .pm-content th, .pm-content td { padding-left: 11px !important; padding-right: 11px !important; } .pm-content td { padding-top: 10px !important; padding-bottom: 10px !important; } .pm-content td { overflow-wrap: break-word; } /* Tabulka je `w-full`, takže se do šířky telefonu smrskla místo toho, aby se posunula do strany — z „16 500 Kč" byly tři řádky pod sebou. Uvnitř rolovacího rámu dostane vlastní minimální šířku a čte se posunem prstem. Nezalomení částek je od 23. 9. 2026 PRAVIDLO PRO VŠECHNY ŠÍŘKY (viz `td.pm-num` nahoře) — tady zbyla jen minimální šířka tabulky. */ .pm-content .overflow-x-auto > table { min-width: 620px; } /* Pole s písmem pod 16 px nutí iOS přiblížit stránku, jakmile do něj uživatel klikne; zpět se sama neoddálí. */ .pm-content input:not([type="checkbox"]):not([type="radio"]), .pm-content select, .pm-content textarea { font-size: 16px; } /* Krokové záložky uvnitř formuláře (Nová nemovitost, Nájemník) jsou čtyři položky s `whitespace-nowrap` a mezerou 32 px — na telefonu se ani zdaleka nevešly a roztáhly celý modál do strany. Posunují se prstem uvnitř vlastního pruhu. */ div[id$="Modal"] nav.-mb-px.flex { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } div[id$="Modal"] nav.-mb-px.flex::-webkit-scrollbar { display: none; } div[id$="Modal"] nav.-mb-px.flex > * { flex: 0 0 auto; } div[id$="Modal"] nav.-mb-px.flex.space-x-8 > * + * { margin-left: 18px; } /* obsah modálního okna na telefonu využije skoro celou obrazovku */ div[id$="Modal"] .min-h-screen { padding-left: 12px; padding-right: 12px; } div[id$="Modal"] .p-6 { padding: 16px; } div[id$="Modal"] > div > .bg-white, div[id$="Modal"].flex > .bg-white { max-height: calc(100vh - 24px); } } @supports (max-height: 100dvh) { @media (max-width: 639px) { div[id$="Modal"] > div > .bg-white, div[id$="Modal"].flex > .bg-white { max-height: calc(100dvh - 24px); } } } /* ─── dotykové ovládání v obsahu ─────────────────────────────────────────── */ @media (pointer: coarse) { /* 38 px je dolni mez pro tlacitka psana Tailwindem. Pravidlo je specifictejsi nez `.pm-content .fc .fc-button`, takze by prebilo i vetsi miru z mobilniho bloku na konci souboru — proto tam mame vlastni selektory se stejnou nebo vyssi vahou. */ .pm-content button:not(.pm-btn):not([class*="absolute"]), .pm-content a[class*="bg-"]:not(.pm-btn) { min-height: 38px; } /* zavírací křížek dostane čtvercovou plochu pod prst */ .pm-content [class*="absolute"][class*="top-4"][class*="right-4"], .pm-content [class*="absolute"][class*="top-3"][class*="right-3"] { width: 40px; height: 40px; } /* řádek tabulky s akcemi ať se dá trefit. Pravidlo je specifičtější než `.pm-btn-sm`, takže určuje výšku i tlačítkům, která ji mají jinde větší — musí proto držet stejnou míru (40 px), ne méně. */ .pm-content td button, .pm-content td a[class*="text-"] { min-height: 40px; } } /* ─── export dat (Reporty) ───────────────────────────────────────────────── */ .pm-export-hlavicka { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; } .pm-export-mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)); gap: 8px; } .pm-export-polozka { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--pm-line); border-radius: var(--pm-r); background: var(--pm-surface); color: var(--pm-ink); text-decoration: none; transition: border-color .12s, background .12s; } .pm-export-polozka:hover { border-color: var(--pm-accent); background: var(--pm-accent-bg); } .pm-export-polozka:focus-visible { outline: 2px solid var(--pm-accent); outline-offset: 2px; } .pm-export-ikona { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--pm-r-sm); background: var(--pm-accent-bg); color: var(--pm-accent); } .pm-export-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .pm-export-nazev { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; } .pm-export-popis { color: var(--pm-ink-3); font-size: 12px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pm-export-sipka { flex: 0 0 auto; color: var(--pm-ink-4); } .pm-export-polozka:hover .pm-export-sipka { color: var(--pm-accent); } /* výběr roku sedí uvnitř odkazu, proto vlastní vzhled i kurzor */ .pm-export-rok { font: inherit; font-size: 12px; font-weight: 600; color: var(--pm-ink-2); padding: 1px 4px; border: 1px solid var(--pm-line); border-radius: var(--pm-r-sm); background: var(--pm-surface); cursor: pointer; } .pm-export-tisk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--pm-line); } @media (max-width: 520px) { .pm-export-hlavicka { align-items: flex-start; } .pm-export-popis { white-space: normal; } } /* ─── rozbalovací nabídka na
(Export a spol.) ─────────────────── POZOR NA NÁZVY: .pm-menu je odjakživa panel uživatelské nabídky a zvonečku v horní liště (viz výš). Kdyby se tenhle blok jmenoval stejně, přepsal by jim pozicování a celá hlavička by se rozpadla. Proto vlastní prefix. */ .pm-rozbal { position: relative; display: inline-block; } .pm-rozbal > summary { list-style: none; cursor: pointer; } .pm-rozbal > summary::-webkit-details-marker { display: none; } .pm-rozbal > summary::marker { content: ''; } .pm-rozbal[open] > summary { background: var(--pm-accent-bg); border-color: var(--pm-accent); color: var(--pm-accent); } .pm-rozbal-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 232px; padding: 6px; /* Buňka s akcemi bývá zarovnaná doprava a nabídka to zdědila — půlka položek pak stála vpravo a půlka vlevo podle toho, jestli to byl , nebo