/** * Gosscard PWA — instalační lišta dole (místo dialogu pwa-install). * Tokenizováno přes --gc-* (gosscard-theme.css). Barvy pro dark mode se flipují * přes lokální --pwa-* proměnné (tokeny samy dark variantu nemají). */ pwa-install#pwa-install:not(:defined), pwa-install#pwa-install { display: none !important; visibility: hidden !important; position: fixed !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; pointer-events: none !important; } .gosscard-pwa-bar { /* Lišta je ZÁMĚRNĚ tmavá vždy — nedědí světlý/tmavý režim systému (na přání 2026-07-29: černé pozadí, bílý text, modré tlačítko s bílým textem). Proto tu nejsou světlé varianty a @media (prefers-color-scheme) barvy neřeší. */ --pwa-surface: #17202b; --pwa-text: #ffffff; --pwa-muted: #b6c2d2; --pwa-hairline: rgba(255, 255, 255, 0.10); --pwa-step-bg: rgba(90, 150, 255, 0.15); --pwa-step-fg: #7fb0ff; /* CTA „Otevřít" má vlastní barvy — dřív si půjčovalo --pwa-step-*, což je jemná dlaždice pro ikony postupu, takže z toho byl světle modrý text na sotva tónovaném pozadí (kontrast ~3:1). Teď plné modré tlačítko s bílým textem. Odstín sražen z #3d8bff na značkový --gc-primary-strong: bílý text na něm má 5,22:1 (dřív 3,31:1, tedy pod prahem WCAG 1.4.3 pro běžný text). Proti tmavé liště #17202b má tlačítko 3,12:1, což drží práh 3:1 pro hranici komponenty (WCAG 1.4.11) — záměr „modré tlačítko s bílým textem" zůstává. */ --pwa-cta-bg: var(--gc-primary-strong, #0069d9); --pwa-cta-fg: #fff; /* Křížek je bílý jako zbytek textu — zpětnou vazbu na hover dělá podsvícení, ne změna barvy (proto stačí --pwa-close-hover). */ --pwa-close: #ffffff; --pwa-close-hover: rgba(255, 255, 255, 0.14); --pwa-icon-ring: rgba(255, 255, 255, 0.10); position: fixed; left: 0; right: 0; bottom: 0; /* Původních 2147483000 přebilo úplně všechno — lišta pak ležela přes spodní ovládací panely (např. „Uložit trasu" v plánovači, tlačítka na /navigate) a klik na ně místo toho spustil „Otevřít aplikaci". Držíme ji nad obsahem stránky, ale pod dialogy (10040+) a overlayi (12000+, 100000). 10030, ne 9500: panely stránek jezdí na 9998–10001 (`#userPanelContent` s „Koho sledovat", hlavičky) a lištu překrývaly. */ z-index: 10030; transform: translateY(110%); opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity; transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease; } .gosscard-pwa-bar.is-visible { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; } /* ŽÁDNÉ ODSAZENÍ NA . Lišta je `position: fixed` — má obsah PŘEKRÝT, ne posouvat. `padding-bottom: 80px` tu bylo od začátku a na stránkách, kde `body` je rodičem výškového řetězu, zkrátilo celý sloupec: konec stránky vyskočil o 80–96 px nahoru a pod ním zůstal šedý pruh. Pravidlo 2026-08-16 zrušeno; rolovací sloupce si slack pod lištou řeší samy níž. */ /* LIŠTA NEPOSOUVÁ NIC — ANI PLOVOUCÍ OVLÁDÁNÍ. Na přání 2026-08-16 tu skončily i posuny fixních prvků. Dřív tu bylo: .gc-route-draw / .gc-mtg-draw / .gc-nav-panel → bottom: 96px #gosscard-mini-chat (do 559,98 px) → bottom: 104px .gc-mtg-sheet → margin-bottom: 88px S nimi se před lištou uhýbaly i FAB tlačítka na /map (trasa, setkání, foto) — ta jsou uvnitř `#gosscard-mini-chat`, takže se posouvala s ním (naměřeno při 390×900: −92 px). Teď zůstávají na místě a lišta je při otevření překryje; zavírá se křížkem. Souvisí: `.sendBtnChatBody` v gosscard-chat.css, `--gc-sheet-offset` v gosscard-meetings.css a `.gc-route-detail__actions` v event-route-modern.css — všude stejný důvod, ať se to nevrací po částech. */ /* SLACK POD LIŠTOU — JEN UVNITŘ ROLOVACÍCH SLOUPCŮ, NIKDY NE NA JEJICH RODIČI. Bez něj zůstal poslední příspěvek ve zdi po odrolování na konec schovaný pod lištou (naměřeno na /user při 375×812: akční řádek „To se mi líbí"…„Smazat bod" ležel na y 723–763, lišta zabírá 734–812; vlastních 40 px nestačí). `.userPanelContent` a `.collectionPanelContent` MAJÍ `box-sizing: border-box` a `overflow-y: auto`, takže se jim odsazením nemění VNĚJŠÍ rozměr — jen přibude prostor na konci rolování. Konec stránky zůstává na spodní hraně okna. `.page-body` v tomhle seznamu ZÁMĚRNĚ NENÍ. Je to rodič výškového řetězu: `padding-bottom` na něm zmenší jeho content-box, a každé dítě s `height: 100 %` se o 96 px zkrátí. Naměřeno 2026-08-16 při 1280×900 s otevřenou lištou: /chat `#chatBox` 728→632 px (na mobilu 728→536, dvě odsazení za sebou), /search `.searchPageContainer` 799→703, /error `#errorBody` 849→753, soukromý profil i skupina `.userPageBody` 849→753 a panel s ním. Lišta je `position: fixed` — má obsah překrýt, ne posouvat. 96 px = výška lišty + rezerva, stejná hodnota jako u fixních panelů výš. `!important` drží odsazení proti pravidlům s `:has()` a vyšší specificitou. */ body.gosscard-pwa-bar-open .userPanelContent, body.gosscard-pwa-bar-open .collectionPanelContent { padding-bottom: 96px !important; } /* VÝJIMKA PRO TRASU A SETKÁNÍ (/route, /meeting) — 2026-08-19. Tam je řada akcí přisátá k dolní hraně okna, takže ji lišta překryla celou: „Navigovat", „Přihlas se a přidej se", „Sdílet" i „Mapa" byly pod ní. Host ze sdíleného odkazu tedy narazil rovnou na hlavní tlačítko a musel nejdřív uhodnout, že se lišta zavírá křížkem. Ostatní stránky mají pod lištou jen obsah, ke kterému se dá dorolovat — tyhle dvě ne, proto výjimka. Lišta se ani tady neposouvá: odsazení dostane sama přisátá řada. Tlačítka vyjedou nad lištu a bílá plocha řady pokračuje za ní, takže mezi nimi nevznikne mezera, kterou by prosvítal rolující obsah (to byl důvod, proč se `bottom: 96px` v event-route-modern.css 2026-08-16 rušilo). 106 px = vlastní odsazení řady (10 px) + 96 px na lištu. */ body.gosscard-pwa-bar-open .gc-route-detail__actions { padding-bottom: 106px; } /* Od 780 px je řada `static` a sedí na konci karty — pak stačí slack za kartou, ať jde konec stránky odrolovat nad lištu. Odsazení řady se vrací na základ, jinak by uvnitř karty zůstal prázdný pruh. */ @media (min-width: 780px) { body.gosscard-pwa-bar-open .gc-route-detail__actions { padding-bottom: 10px; } body.gosscard-pwa-bar-open .gc-route-detail { margin-bottom: 96px; } } /* --- surface / card --- */ .gosscard-pwa-bar__inner { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 12px 14px calc(12px + var(--gc-safe-bottom, 0px)); background: var(--pwa-surface); border-top: 1px solid var(--pwa-hairline); border-radius: var(--gc-radius-lg, 16px) var(--gc-radius-lg, 16px) 0 0; box-shadow: var(--gc-shadow-sheet, 0 -8px 30px rgba(0, 0, 0, 0.22)); color: var(--pwa-text); } /* --- app icon --- */ .gosscard-pwa-bar__icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 22%; object-fit: cover; background: var(--pwa-surface); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16), inset 0 0 0 1px var(--pwa-icon-ring); } /* --- text block --- */ .gosscard-pwa-bar__text { flex: 1; min-width: 0; } .gosscard-pwa-bar__name { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; text-transform: none; color: var(--pwa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gosscard-pwa-bar__hint { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--pwa-muted); } /* --- primary CTA (install) --- */ /* POZOR na kolizi s `.btnSet`: obě CTA tlačítka nesou v markupu (js/gosscard-pwa-install.js) i třídu `.btnSet`, a `public.css` se načítá AŽ ZA tímhle souborem (pohledy/rozlozeni.phtml:57 → :71). Při shodné specificitě tedy `.btnSet` vyhrává `line-height` (1.5 místo zdejších 1.2) a přes `!important` i `padding` (7px 10px místo 10px 18px). Zdejší `padding`/`line-height` proto na výšku NEMAJÍ vliv. Výšku kvůli tomu neřešíme paddingem, ale `min-height` + `box-sizing: border-box`. S `border-box` se padding do `min-height` NEPŘIČÍTÁ, takže 20,25px (řádek) + 14px (svislý padding z `.btnSet`) + 2px (rámeček) = 36,25px < 40px a rozhodne `min-height`. CTA proto sedne na zavírací křížek (40px) bez ohledu na to, kdo nakonec padding vyhraje — svislý padding tu nulovat NEPOTŘEBUJEME. (Dřívější znění tu mělo `padding-top/bottom: 0 !important` s odůvodněním, že by se jinak vyšlo 42,25px. Neplatilo to dvakrát: `.btnSet` má stejnou specificitu a načítá se později, takže by při shodném `!important` vyhrál on a deklarace byly mrtvé; a s `border-box` k žádnému přičítání nedochází. Ověřeno měřením — po jejich odstranění zůstává výška 40,00px a computed padding "7px 10px".) Vodorovný padding schválně NEpřebíjíme: 10px z `.btnSet` drží tlačítko užší a na 375px displeji zbývá víc místa na text lišty. Centrování textu tu NEDĚLÁME přes flex: `display` by stejně prohrálo s `.btnSet` (`inline-block`, shodná specificita, načteno později) a bylo by to mrtvé pravidlo. Není potřeba —