mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 10:42:57 +00:00
Tomáš Dvořák
91 lines
2.2 KiB
CSS
91 lines
2.2 KiB
CSS
/* Custom scrollbars based on club colors */
|
|
|
|
/* Main scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-soft, #f2f2f2);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--primary, #2d74da) 0%,
|
|
color-mix(in srgb, var(--primary, #2d74da) 85%, var(--secondary, #1a1a1a)) 100%
|
|
);
|
|
border-radius: 10px;
|
|
border: 2px solid var(--bg-soft, #f2f2f2);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(
|
|
135deg,
|
|
color-mix(in srgb, var(--primary, #2d74da) 110%, white) 0%,
|
|
var(--primary, #2d74da) 100%
|
|
);
|
|
border-color: color-mix(in srgb, var(--primary, #2d74da) 20%, transparent);
|
|
box-shadow: 0 0 10px color-mix(in srgb, var(--primary, #2d74da) 30%, transparent);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:active {
|
|
background: var(--primary, #2d74da);
|
|
}
|
|
|
|
/* Firefox scrollbar styling */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--primary, #2d74da) var(--bg-soft, #f2f2f2);
|
|
}
|
|
|
|
/* Dark mode adjustments */
|
|
.chakra-ui-dark ::-webkit-scrollbar-track {
|
|
background: var(--bg-soft, #1a1f29);
|
|
}
|
|
|
|
.chakra-ui-dark ::-webkit-scrollbar-thumb {
|
|
border-color: var(--bg-soft, #1a1f29);
|
|
}
|
|
|
|
.chakra-ui-dark * {
|
|
scrollbar-color: var(--primary, #2d74da) var(--bg-soft, #1a1f29);
|
|
}
|
|
|
|
/* Thin scrollbars for specific contexts */
|
|
.thin-scrollbar::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.thin-scrollbar::-webkit-scrollbar-thumb {
|
|
border-width: 1px;
|
|
}
|
|
|
|
/* Hide scrollbar but keep functionality (for carousels, sliders) */
|
|
.hide-scrollbar {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari, Opera */
|
|
}
|
|
|
|
/* Accent scrollbar variant */
|
|
.accent-scrollbar::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--accent, #ffb703) 0%,
|
|
color-mix(in srgb, var(--accent, #ffb703) 85%, var(--primary, #2d74da)) 100%
|
|
);
|
|
}
|
|
|
|
.accent-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: var(--accent, #ffb703);
|
|
box-shadow: 0 0 10px color-mix(in srgb, var(--accent, #ffb703) 40%, transparent);
|
|
}
|