mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-06-26 18:26:38 +00:00
9454c73992
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.
72 lines
2.1 KiB
SCSS
72 lines
2.1 KiB
SCSS
@use 'variables.scss';
|
|
@use 'z-index.scss';
|
|
@use 'animations.scss';
|
|
@use 'components/terminal.scss';
|
|
@use 'components/resize-handle.scss';
|
|
@use 'components/code.scss';
|
|
@use 'components/editor.scss';
|
|
@use 'components/toast.scss';
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
:root {
|
|
--gradient-opacity: 0.8;
|
|
--primary-color: rgba(158, 117, 240, var(--gradient-opacity));
|
|
--secondary-color: rgba(138, 43, 226, var(--gradient-opacity));
|
|
--accent-color: rgba(128, 59, 239, var(--gradient-opacity));
|
|
// --primary-color: rgba(147, 112, 219, var(--gradient-opacity));
|
|
// --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;
|
|
} |