ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-02-04 09:13:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #277 from illia1f/fix/universal-scrollbar-styling

Browse Source 
fix: use CSS variables for universal scrollbar styling across all themes
This commit is contained in:
Web Dev Cody
2025-12-26 18:20:46 -05:00
committed by GitHub
parent d4b2a3eb27 4c16e5e09c
commit 35d2d8cc01
3 changed files with 31 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
apps/ui/src/styles/global.css
View File

@@ -389,78 +389,23 @@
} }
} }
/* Custom scrollbar for dark themes */ /* Universal scrollbar styling using theme CSS variables */
:is( ::-webkit-scrollbar {
.dark,
.retro,
.dracula,
.nord,
.monokai,
.tokyonight,
.solarized,
.gruvbox,
.catppuccin,
.onedark,
.synthwave,
.red,
.sunset,
.gray
)
::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;
} }
:is( ::-webkit-scrollbar-track {
.dark,
.retro,
.dracula,
.nord,
.monokai,
.tokyonight,
.solarized,
.gruvbox,
.catppuccin,
.onedark,
.synthwave,
.red,
.sunset,
.gray
)
::-webkit-scrollbar-track {
background: var(--muted); background: var(--muted);
} }
:is(.dark, .retro) ::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: oklch(0.3 0 0); background: var(--muted-foreground);
border-radius: 4px; border-radius: 4px;
} }
:is(.dark, .retro) ::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: oklch(0.4 0 0); background: var(--foreground);
}
/* 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);
} }
/* Always visible scrollbar for file diffs and code blocks */ /* Always visible scrollbar for file diffs and code blocks */

14
apps/ui/src/styles/themes/red.css
View File

@@ -67,3 +67,17 @@
--running-indicator: oklch(0.55 0.25 25); --running-indicator: oklch(0.55 0.25 25);
--running-indicator-text: oklch(0.6 0.23 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);
}

10
apps/ui/src/styles/themes/retro.css
View File

@@ -86,6 +86,16 @@
/* Theme-specific overrides */ /* 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 { .retro .scrollbar-visible::-webkit-scrollbar-thumb {
background: var(--primary); background: var(--primary);
border-radius: 0; border-radius: 0;