38 lines
993 B
CSS
38 lines
993 B
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Custom, native-feel scrollbar for dark UI */
|
|
.custom-scrollbar {
|
|
/* Firefox */
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #38bdf8 rgba(31, 41, 55, 0.7); /* thumb | track */
|
|
/* Avoid layout shift when scrollbars appear */
|
|
scrollbar-gutter: stable both-edges;
|
|
}
|
|
|
|
/* WebKit-based browsers */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: rgba(17, 24, 39, 0.7); /* gray-900 */
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(180deg, #38bdf8, #0284c7); /* primary-400 → 600 */
|
|
border-radius: 9999px;
|
|
border: 2px solid rgba(17, 24, 39, 0.7); /* creates spacing ring */
|
|
}
|
|
|
|
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(180deg, #7dd3fc, #0ea5e9); /* brighten on hover */
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|