mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-15 01:04:03 +00:00
Theme scrollbars for dark mode
Add global webkit and Firefox scrollbar styling using semantic color tokens. Fix component scrollbar classes in GlobalSearchBar and CompanySwitcher from hardcoded gray to theme-aware colors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
20
resources/css/invoiceshelf.css
vendored
20
resources/css/invoiceshelf.css
vendored
@@ -210,6 +210,26 @@ body {
|
||||
min-height: 100vh;
|
||||
min-height: -webkit-fill-available;
|
||||
color: var(--color-heading);
|
||||
scrollbar-color: var(--color-surface-muted) var(--color-surface-secondary);
|
||||
}
|
||||
|
||||
/* Webkit scrollbars */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-surface-secondary);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-surface-muted);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-line-strong);
|
||||
}
|
||||
|
||||
html {
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
scrollbar-thin scrollbar-thumb-rounded-full
|
||||
w-[300px]
|
||||
max-h-[350px]
|
||||
scrollbar-thumb-gray-300 scrollbar-track-gray-10
|
||||
scrollbar-thumb-surface-muted scrollbar-track-surface-secondary
|
||||
pb-4
|
||||
"
|
||||
>
|
||||
|
||||
@@ -29,8 +29,8 @@
|
||||
class="
|
||||
scrollbar-thin
|
||||
scrollbar-thumb-rounded-full
|
||||
scrollbar-thumb-gray-300
|
||||
scrollbar-track-gray-100
|
||||
scrollbar-thumb-surface-muted
|
||||
scrollbar-track-surface-secondary
|
||||
overflow-y-auto
|
||||
bg-surface
|
||||
rounded-md
|
||||
|
||||
Reference in New Issue
Block a user