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;
}

4
app/styles/variables.scss
View File

@@ -102,6 +102,8 @@
--bolt-terminal-brightMagenta: #bc05bc;
--bolt-terminal-brightCyan: #0598bc;
--bolt-terminal-brightWhite: #a5a5a5;
--modern-scrollbar-thumb-background: rgba(100, 100, 100, 0.3); // Example light theme color
--modern-scrollbar-thumb-backgroundHover: rgba(74, 74, 74, 0.8);
}
/* Color Tokens Dark Theme */
@@ -208,6 +210,8 @@
--bolt-terminal-brightMagenta: #ff6ac1;
--bolt-terminal-brightCyan: #9aedfe;
--bolt-terminal-brightWhite: #f1f1f0;
--modern-scrollbar-thumb-background: rgba(100, 100, 100, 0.3); // Example dark theme color (adjust as needed)
--modern-scrollbar-thumb-backgroundHover: rgba(10, 10, 10, 0.8);
}
/*