scroll fixes

This commit is contained in:
2026-03-07 13:01:08 +11:00
parent f8031f0523
commit e27d953c2a
4 changed files with 49 additions and 121 deletions

View File

@@ -129,72 +129,29 @@
}
/* Custom Scrollbar Styles - Catppuccin Theme */
/* Only applied to specific elements (viewport, dropdowns, modals) to avoid
overriding the browser default scrollbar on the html/body level */
/* Firefox */
* {
/* Main content viewport */
#page-viewport {
--scrollbar-thumb: var(--overlay0);
--scrollbar-track: var(--base);
scrollbar-width: normal;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* Multi-select dropdowns */
.multi-select-dropdown {
--scrollbar-thumb: var(--surface2);
--scrollbar-track: var(--base);
scrollbar-width: thin;
scrollbar-color: var(--surface1) var(--mantle);
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--mantle);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: var(--surface1);
border-radius: 4px;
border: 2px solid var(--mantle);
}
::-webkit-scrollbar-thumb:hover {
background: var(--surface2);
}
::-webkit-scrollbar-thumb:active {
background: var(--overlay0);
}
/* Specific styling for multi-select dropdowns */
.multi-select-dropdown::-webkit-scrollbar {
width: 6px;
}
.multi-select-dropdown::-webkit-scrollbar-track {
background: var(--base);
border-radius: 3px;
}
.multi-select-dropdown::-webkit-scrollbar-thumb {
background: var(--surface2);
border-radius: 3px;
border: 1px solid var(--base);
}
.multi-select-dropdown::-webkit-scrollbar-thumb:hover {
background: var(--overlay0);
}
/* Specific styling for modal content */
.modal-scrollable::-webkit-scrollbar {
width: 8px;
}
.modal-scrollable::-webkit-scrollbar-track {
background: var(--base);
}
.modal-scrollable::-webkit-scrollbar-thumb {
background: var(--surface1);
border-radius: 4px;
}
.modal-scrollable::-webkit-scrollbar-thumb:hover {
background: var(--surface2);
/* Modal content */
.modal-scrollable {
--scrollbar-thumb: var(--surface1);
--scrollbar-track: var(--base);
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

View File

@@ -2460,56 +2460,23 @@
font-weight: 700;
font-style: italic;
}
* {
#page-viewport {
--scrollbar-thumb: var(--overlay0);
--scrollbar-track: var(--base);
scrollbar-width: normal;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.multi-select-dropdown {
--scrollbar-thumb: var(--surface2);
--scrollbar-track: var(--base);
scrollbar-width: thin;
scrollbar-color: var(--surface1) var(--mantle);
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--mantle);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: var(--surface1);
border-radius: 4px;
border: 2px solid var(--mantle);
}
::-webkit-scrollbar-thumb:hover {
background: var(--surface2);
}
::-webkit-scrollbar-thumb:active {
background: var(--overlay0);
}
.multi-select-dropdown::-webkit-scrollbar {
width: 6px;
}
.multi-select-dropdown::-webkit-scrollbar-track {
background: var(--base);
border-radius: 3px;
}
.multi-select-dropdown::-webkit-scrollbar-thumb {
background: var(--surface2);
border-radius: 3px;
border: 1px solid var(--base);
}
.multi-select-dropdown::-webkit-scrollbar-thumb:hover {
background: var(--overlay0);
}
.modal-scrollable::-webkit-scrollbar {
width: 8px;
}
.modal-scrollable::-webkit-scrollbar-track {
background: var(--base);
}
.modal-scrollable::-webkit-scrollbar-thumb {
background: var(--surface1);
border-radius: 4px;
}
.modal-scrollable::-webkit-scrollbar-thumb:hover {
background: var(--surface2);
.modal-scrollable {
--scrollbar-thumb: var(--surface1);
--scrollbar-track: var(--base);
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
@property --tw-translate-x {
syntax: "*";