diff --git a/frontend/src/components/Standings.tsx b/frontend/src/components/Standings.tsx index fdf4c07..09fe1db 100644 --- a/frontend/src/components/Standings.tsx +++ b/frontend/src/components/Standings.tsx @@ -148,7 +148,7 @@ export default function Standings({ standings, guesses = [], players, myOrder, d }); const scrollableRounds = ( -
+
{rows} {/* Active round placeholder */} diff --git a/frontend/src/index.css b/frontend/src/index.css index 8b758f3..f71b75c 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -30,6 +30,27 @@ } } +/* Slim, on-theme scrollbar (velvet felt + gold accent) for opt-in scroll areas + such as the in-game score list, instead of the chunky OS default. */ +.velvet-scroll { + scrollbar-width: thin; + scrollbar-color: rgba(201, 168, 76, 0.35) transparent; +} +.velvet-scroll::-webkit-scrollbar { + width: 7px; + height: 7px; +} +.velvet-scroll::-webkit-scrollbar-track { + background: transparent; +} +.velvet-scroll::-webkit-scrollbar-thumb { + background: rgba(201, 168, 76, 0.28); + border-radius: 4px; +} +.velvet-scroll::-webkit-scrollbar-thumb:hover { + background: rgba(201, 168, 76, 0.5); +} + /* Velvet-table animations (design handoff). Declared as raw CSS so they work both via Tailwind's animate-* utilities and inline `animation:` strings. */ @keyframes tp {