67 lines
2.0 KiB
CSS
67 lines
2.0 KiB
CSS
/*
|
|
Custom scrollbar styling that provides a refined, modern look
|
|
while maintaining consistency with the dark theme.
|
|
*/
|
|
|
|
.custom-scrollbar {
|
|
/* Enable smooth scrolling behavior for a better user experience */
|
|
scroll-behavior: smooth;
|
|
/* Hide default scrollbar in Firefox */
|
|
scrollbar-width: thin;
|
|
/* Set initial scrollbar colors for Firefox */
|
|
scrollbar-color: rgba(75, 75, 75, 0.5) rgba(28, 28, 28, 0.1);
|
|
}
|
|
|
|
/* Main scrollbar styling for Webkit browsers */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
/* Keep the scrollbar height subtle but visible */
|
|
height: 6px;
|
|
/* Add some padding around the scrollbar */
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* The track (background) of the scrollbar */
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
/* Subtle, slightly transparent background */
|
|
background: rgba(28, 28, 28, 0.1);
|
|
/* Rounded edges for a modern look */
|
|
border-radius: 4px;
|
|
/* Add a slight border for definition */
|
|
border: 1px solid rgba(75, 75, 75, 0.1);
|
|
/* Inner shadow for depth */
|
|
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* The draggable scrolling element */
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
/* Semi-transparent thumb for a glass-like effect */
|
|
background: rgba(75, 75, 75, 0.5);
|
|
/* Rounded edges matching the track */
|
|
border-radius: 4px;
|
|
/* Subtle gradient for depth */
|
|
background-image: linear-gradient(
|
|
to bottom,
|
|
rgba(75, 75, 75, 0.6),
|
|
rgba(75, 75, 75, 0.4)
|
|
);
|
|
/* Smooth transition for hover effects */
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
/* Hover state for the thumb */
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
/* Lighter color on hover for better feedback */
|
|
background: rgba(100, 100, 100, 0.6);
|
|
/* Enhanced gradient on hover */
|
|
background-image: linear-gradient(
|
|
to bottom,
|
|
rgba(100, 100, 100, 0.7),
|
|
rgba(100, 100, 100, 0.5)
|
|
);
|
|
}
|
|
|
|
/* Active state when scrollbar is being dragged */
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:active {
|
|
/* Darker color when active for pressed state feedback */
|
|
background: rgba(120, 120, 120, 0.7);
|
|
} |