docs: improve scrollbar style

This commit is contained in:
Bereket Engida
2025-09-11 14:36:03 -07:00
parent ab32b9f46b
commit dcac3c7e71

View File

@@ -73,6 +73,11 @@
--sidebar-border: oklch(0.923 0.003 48.717);
--sidebar-ring: oklch(0.709 0.01 56.259);
/* Scrollbar theme (light) */
--scrollbar-thumb: var(--border);
--scrollbar-thumb-hover: var(--ring);
--scrollbar-track: transparent;
}
.dark {
@@ -139,6 +144,11 @@
--sidebar-border: oklch(0.268 0.007 34.298);
--sidebar-ring: oklch(0.553 0.013 58.071);
/* Scrollbar theme (dark) */
--scrollbar-thumb: var(--border);
--scrollbar-thumb-hover: var(--ring);
--scrollbar-track: transparent;
}
@theme inline {
@@ -254,6 +264,33 @@ html {
);
}
/* Global, accessible custom scrollbars */
* {
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* WebKit-based browsers */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb);
border-radius: 9999px;
border: 3px solid transparent; /* creates a gap between thumb and track */
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover);
}
::-webkit-scrollbar-corner {
background: transparent;
}
@layer utilities {
.no-scrollbar::-webkit-scrollbar {
display: none;