style(ui): add custom theme-compliant scrollbar styles
This commit is contained in:
parent
a2c0de037f
commit
2e170b9d36
1 changed files with 34 additions and 0 deletions
|
|
@ -25,3 +25,37 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-surface) transparent;
|
||||
}
|
||||
|
||||
*:hover {
|
||||
scrollbar-color: var(--color-muted) transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-surface);
|
||||
border-radius: 9999px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--color-muted);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue