iBoss/bolt-diy
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style: add modern-scrollbar class to improve scrollbar appearance

Browse Source 
Introduce the modern-scrollbar class to enhance the visual consistency of scrollbars across the application. This class provides a cleaner and more modern look for scrollbars in WebKit and Firefox browsers.
This commit is contained in:
KevIsDev
2025-04-30 12:23:35 +01:00
parent e30035cec5
commit 9454c73992
7 changed files with 58 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app/styles/index.scss
View File

@@ -22,3 +22,51 @@ body {
// --secondary-color: rgba(138, 43, 226, var(--gradient-opacity));
// --accent-color: rgba(180, 170, 220, var(--gradient-opacity));
}
.modern-scrollbar {
overflow: auto;
// WebKit scrollbar styling
&::-webkit-scrollbar {
width: 2px;
height: 4px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
// Use CSS variables for colors
background-color: var(--modern-scrollbar-thumb-background);
border-radius: 9999px; // pill shape
border: 2px solid transparent; // for padding-like effect
background-clip: content-box;
transition: background-color 0.2s ease-in-out; // Add transition
}
&::-webkit-scrollbar-thumb:hover {
// Use CSS variable for hover color
background-color: var(--modern-scrollbar-thumb-backgroundHover);
}
// Firefox support
scrollbar-width: thin;
// Use CSS variables for Firefox colors
scrollbar-color: var(--modern-scrollbar-thumb-backgroundHover) transparent; // Use hover color for thumb for consistency
}
.modern-scrollbar-invert {
&::-webkit-scrollbar-thumb {
// Override with a contrasting color, e.g., primary text color with transparency
background-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 70%);
}
&::-webkit-scrollbar-thumb:hover {
// Darker/more opaque version on hover
background-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 50%);
}
// Firefox support for inverted colors
scrollbar-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 50%) transparent;
}