diff --git a/apps/ui/src/styles/global.css b/apps/ui/src/styles/global.css index cd7f8145..a335ebd0 100644 --- a/apps/ui/src/styles/global.css +++ b/apps/ui/src/styles/global.css @@ -389,78 +389,23 @@ } } -/* Custom scrollbar for dark themes */ -:is( - .dark, - .retro, - .dracula, - .nord, - .monokai, - .tokyonight, - .solarized, - .gruvbox, - .catppuccin, - .onedark, - .synthwave, - .red, - .sunset, - .gray - ) - ::-webkit-scrollbar { +/* Universal scrollbar styling using theme CSS variables */ +::-webkit-scrollbar { width: 8px; height: 8px; } -:is( - .dark, - .retro, - .dracula, - .nord, - .monokai, - .tokyonight, - .solarized, - .gruvbox, - .catppuccin, - .onedark, - .synthwave, - .red, - .sunset, - .gray - ) - ::-webkit-scrollbar-track { +::-webkit-scrollbar-track { background: var(--muted); } -:is(.dark, .retro) ::-webkit-scrollbar-thumb { - background: oklch(0.3 0 0); +::-webkit-scrollbar-thumb { + background: var(--muted-foreground); border-radius: 4px; } -:is(.dark, .retro) ::-webkit-scrollbar-thumb:hover { - background: oklch(0.4 0 0); -} - -/* Retro Scrollbar override */ -.retro ::-webkit-scrollbar-thumb { - background: var(--primary); - border-radius: 0; -} -.retro ::-webkit-scrollbar-track { - background: var(--background); -} - -/* Red theme scrollbar */ -.red ::-webkit-scrollbar-thumb { - background: oklch(0.35 0.15 25); - border-radius: 4px; -} - -.red ::-webkit-scrollbar-thumb:hover { - background: oklch(0.45 0.18 25); -} - -.red ::-webkit-scrollbar-track { - background: oklch(0.15 0.05 25); +::-webkit-scrollbar-thumb:hover { + background: var(--foreground); } /* Always visible scrollbar for file diffs and code blocks */ diff --git a/apps/ui/src/styles/themes/red.css b/apps/ui/src/styles/themes/red.css index 7df97460..87d2ce9a 100644 --- a/apps/ui/src/styles/themes/red.css +++ b/apps/ui/src/styles/themes/red.css @@ -67,3 +67,17 @@ --running-indicator: oklch(0.55 0.25 25); --running-indicator-text: oklch(0.6 0.23 25); } + +/* Red theme scrollbar */ +.red ::-webkit-scrollbar-thumb { + background: oklch(0.35 0.15 25); + border-radius: 4px; +} + +.red ::-webkit-scrollbar-thumb:hover { + background: oklch(0.45 0.18 25); +} + +.red ::-webkit-scrollbar-track { + background: oklch(0.15 0.05 25); +} diff --git a/apps/ui/src/styles/themes/retro.css b/apps/ui/src/styles/themes/retro.css index c07cafbb..289bf7c0 100644 --- a/apps/ui/src/styles/themes/retro.css +++ b/apps/ui/src/styles/themes/retro.css @@ -86,6 +86,16 @@ /* Theme-specific overrides */ +/* Retro Scrollbar - sharp edges with neon green */ +.retro ::-webkit-scrollbar-thumb { + background: var(--primary); + border-radius: 0; +} + +.retro ::-webkit-scrollbar-track { + background: var(--background); +} + .retro .scrollbar-visible::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 0;