body { font-family: 'Inter', system-ui, -apple-system, sans-serif; } .progress-bar { transition: width .5s ease; } table code { font-size: 0.85em; } /* Subtle, hover-to-reveal scrollbar for long lists (Firefox + WebKit/Blink) */ .scroll-subtle { scrollbar-width: thin; scrollbar-color: transparent transparent; } .scroll-subtle:hover { scrollbar-color: rgba(148, 163, 184, 0.6) transparent; } .scroll-subtle::-webkit-scrollbar { width: 8px; height: 8px; } .scroll-subtle::-webkit-scrollbar-track { background: transparent; } .scroll-subtle::-webkit-scrollbar-thumb { background: transparent; border-radius: 9999px; } .scroll-subtle:hover::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.6); } .dark .scroll-subtle:hover::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.6); } /* Standard app tooltip (2026-09-03, na prosbe uzytkownika: "zmien style wszystkich tooltipow na przyciskach na standard pasujacy do aplikacji") - zastepuje natywny tooltip przegladarki (title="...", ktorego wyglad nie da sie stylowac) na przyciskach/ikonach-linkach appki. Uzycie: dodaj data-tooltip="Tekst" (razem z aria-label="Tekst" dla czytnikow ekranu, ktore go NIE czytaja - w odroznieniu od natywnego title) zamiast samego title="Tekst" - jesli oba title i data-tooltip trafilyby na ten sam element, przegladarka pokazalaby dwa nakladajace sie tooltipy naraz, wiec title trzeba usunac tam, gdzie dodawany jest data-tooltip. Ten sam wzor co Alpine :title="..." bindingi - zamien na :data-tooltip="..." (plus :aria-label). Jeden, wspolny wyglad (ciemna bąbelkowa etykieta ze strzalka) dziala identycznie w jasnym i ciemnym motywie appki - nie potrzebuje osobnej wersji dark:, bo ciemne tlo jest czytelne na obu. POZYCJONOWANIE (2026-09-03, druga tura - user: "tooltip na zakladce niekompletne dla pierwszego wiersza wyswietla sie pod naglowkami") - pierwsza wersja uzywala samego CSS ([data-tooltip]::after/::before, position: absolute wzgledem przycisku) - dzialalo wszedzie OPROCZ tabel z przewijanym cialem (incomplete.html/ready.html/sent.html: naglowek w OSOBNEJ nad
z druga
na wiersze, patrz komentarz przy tym div w incomplete.html) - tooltip pierwszego (i kazdego, ktory przewinie sie na sama gore) wiersza probowal wyrenderowac sie NAD przyciskiem, czyli poza gorna krawedzia tego overflow-y-auto - a "overflow-x: visible + overflow-y: auto" (tu: odwrotnie, ale ten sam mechanizm) przegladarki wymuszaja obcinanie w OBU osiach, nie tylko tej jawnie ustawionej, wiec tooltip byl przycinany dokladnie na tej krawedzi ("pod naglowkami"). Naprawione przez static/tooltip.js - jeden, wspoldzielony
doklejony do (poza jakimkolwiek przewijanym/przycinajacym kontenerem), pozycjonowany JS-em przez position: fixed + getBoundingClientRect() (wiec fizycznie nie da sie go przyciac przez overflow rodzica) - automatycznie przelacza sie na "pod przyciskiem", gdy nad przyciskiem nie ma miejsca (blisko gory ekranu), i przycina pozycje poziomo do szerokosci okna. */ #app-tooltip { position: fixed; width: max-content; max-width: 240px; background: #0f172a; color: #f1f5f9; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 11px; font-weight: 500; line-height: 1.35; text-align: center; padding: 5px 9px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .1s ease, visibility .1s ease; z-index: 9999; } #app-tooltip.is-visible { opacity: 1; visibility: visible; transition-delay: .3s; } #app-tooltip::after { content: ""; position: absolute; left: var(--arrow-left, 50%); transform: translateX(-50%); border: 5px solid transparent; } #app-tooltip[data-placement="top"]::after { top: 100%; border-top-color: #0f172a; } #app-tooltip[data-placement="bottom"]::after { bottom: 100%; border-bottom-color: #0f172a; }