mirror of
https://github.com/shuaiplus/nodewarden.git
synced 2026-06-20 21:00:41 +00:00
feat: improve scrollbar styles and dark mode compatibility
This commit is contained in:
@@ -36,9 +36,14 @@ body.dialog-open {
|
||||
}
|
||||
|
||||
/* --- custom scrollbar --- */
|
||||
* {
|
||||
scrollbar-color: color-mix(in srgb, var(--muted) 34%, transparent) transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@@ -46,12 +51,16 @@ body.dialog-open {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: color-mix(in srgb, var(--muted) 30%, transparent);
|
||||
min-height: 44px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--muted) 30%, transparent);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: color-mix(in srgb, var(--muted) 50%, transparent);
|
||||
background: color-mix(in srgb, var(--primary) 38%, var(--muted) 22%);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
|
||||
@@ -151,11 +151,13 @@
|
||||
|
||||
/* ── dark mode scrollbar ── */
|
||||
:root[data-theme='dark'] ::-webkit-scrollbar-thumb {
|
||||
background: color-mix(in srgb, var(--muted) 24%, transparent);
|
||||
background: color-mix(in srgb, var(--muted) 30%, transparent);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
|
||||
background: color-mix(in srgb, var(--muted) 44%, transparent);
|
||||
background: color-mix(in srgb, var(--primary) 40%, var(--muted) 22%);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
/* ── dark mode backdrop-filter ── */
|
||||
|
||||
Reference in New Issue
Block a user