mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-09 20:27:44 +00:00
docs: improve scrollbar style
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user