🎨 Fixed light/dark scrollbar.

This commit is contained in:
Pablo Hdez 2023-12-12 15:09:41 +00:00 committed by GitHub
parent fd94b5884f
commit 22ef6a4c68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -2,20 +2,24 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@font-face { @layer base {
font-family: 'General-Sans'; :root {
src: url('/fonts/GeneralSans-Variable.woff2') format('woff2'); --sb-track-color: rgb(229 229 229 / 0.5);
font-weight: 200 700; --sb-thumb-color: #d4d4d4;
font-display: swap; --sb-size: 7px;
font-style: normal;
} }
body, .dark {
nav {
--sb-track-color: #171717; --sb-track-color: #171717;
--sb-thumb-color: #404040; --sb-thumb-color: #404040;
--sb-size: 10px; --sb-size: 7px;
scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); }
}
@layer base {
body,
nav {
scrollbar-color: var(--sb-thumb-color) transparent;
} }
body::-webkit-scrollbar { body::-webkit-scrollbar {
@ -30,14 +34,23 @@ body::-webkit-scrollbar-thumb {
background: var(--sb-thumb-color); background: var(--sb-thumb-color);
} }
nav::-webkit-scrollbar { aside::-webkit-scrollbar {
width: var(--sb-size); width: var(--sb-size);
} }
nav::-webkit-scrollbar-track { aside::-webkit-scrollbar-track {
background: var(--sb-track-color); background: var(--sb-track-color);
} }
nav::-webkit-scrollbar-thumb { aside::-webkit-scrollbar-thumb {
background: var(--sb-thumb-color); background: var(--sb-thumb-color);
} }
}
@font-face {
font-family: 'General-Sans';
src: url('/fonts/GeneralSans-Variable.woff2') format('woff2');
font-weight: 200 700;
font-display: swap;
font-style: normal;
}