Generátor CSS posuvníka
Generovanie vlastného CSS pre ::-webkit-scrollbar a scrollbar-width/scrollbar-color pravidlá.
Generátor CSS posuvníka
Predvolený posuvník prehliadača sa zriedka zhoduje so zvyškom dizajnu a jeho úprava znamená pamätanie si dvoch rôznych špecifikácií naraz: pseudo-prvky ::-webkit-scrollbar pre WebKit, ktoré používajú Chrome, Safari a Edge, a štandardné vlastnosti scrollbar-width/scrollbar-color, ktoré čítajú Firefox. Tento nástroj generuje oboje naraz z niekoľkých možností, takže skopíruješ jeden blok CSS a každý veľký prehliadač zobrazí zhodujúci sa posuvník.
Nastavíš cieľový selektor – body pre celú stránku alebo triedu ako .sidebar pre jeden posúvateľný panel – potom si vybereš šírku posuvníka v pixeloch, farby dráhy a palčíka a farbu, na ktorú sa palčík zmení pri najíždení. Zaoblenie palčíka upravuje border-radius uchopiteľného pruhu a vnútorný okraj pridáva transparentný rozostup medzi palčíkom a dráhou, aby to vyzeralo ako plávajúci pilulka namiesto pevného bloku. Možnosť Variant prepína medzi normálnym posuvníkom prehliadača, tenšou verziou "tenký" a "skrytý", čo úplne odstraňuje posuvník pomocou -ms-overflow-style a scrollbar-width: none, pričom nechávajú posúvanie vlastného prvku nedotknuté.
Po zapnutí variantu pre tmavý režim sa druhá kópia pravidiel zabalí do bloku @media (prefers-color-scheme: dark), pričom sa farby dráhy a palčíka automaticky zotmavia, aby stránka, ktorá už prepína motívy, dostala posuvník, ktorý sa s ňou zmení – žiadny samostatný výpočet nie je potrebný. Všetky možnosti aktualizujú výstup za chodu, keď ich upravuješ, a tally pod výsledkom hlási, koľko CSS blokov pravidiel bolo vygenerovaných a presný počet znakov.
Všetko beží lokálne v tvojom prehliadači: žiadny selektor, farba ani CSS sa nikdy neposiela na server. Skopíruj výsledok priamo do svojho štýlopisu, stiahni ho ako súbor .txt alebo ho pošli na vstup ďalšieho nástroja, aby si ho mohol ďalej vylepšovať.