feat(ui): scrollbar styles

This commit is contained in:
psychedelicious
2025-06-25 01:06:02 +10:00
parent adea983bfc
commit 7080889ed4

View File

@@ -1,6 +1,6 @@
.os-scrollbar {
/* The size of the scrollbar */
--os-size: 7px;
--os-size: 8px;
/* The axis-perpedicular padding of the scrollbar (horizontal: padding-y, vertical: padding-x) */
/* --os-padding-perpendicular: 0; */
/* The axis padding of the scrollbar (horizontal: padding-x, vertical: padding-y) */
@@ -8,11 +8,11 @@
/* The border radius of the scrollbar track */
/* --os-track-border-radius: 0; */
/* The background of the scrollbar track */
/* --os-track-bg: rgba(0, 0, 0, 0.3); */
--os-track-bg: rgba(0, 0, 0, 0.5);
/* The :hover background of the scrollbar track */
/* --os-track-bg-hover: rgba(0, 0, 0, 0.3); */
--os-track-bg-hover: rgba(0, 0, 0, 0.5);
/* The :active background of the scrollbar track */
/* --os-track-bg-active: rgba(0, 0, 0, 0.3); */
--os-track-bg-active: rgba(0, 0, 0, 0.6);
/* The border of the scrollbar track */
/* --os-track-border: none; */
/* The :hover background of the scrollbar track */
@@ -22,11 +22,11 @@
/* The border radius of the scrollbar handle */
/* --os-handle-border-radius: 2px; */
/* The background of the scrollbar handle */
--os-handle-bg: var(--invoke-colors-base-600);
--os-handle-bg: var(--invoke-colors-base-400);
/* The :hover background of the scrollbar handle */
--os-handle-bg-hover: var(--invoke-colors-base-500);
--os-handle-bg-hover: var(--invoke-colors-base-300);
/* The :active background of the scrollbar handle */
--os-handle-bg-active: var(--invoke-colors-base-400);
--os-handle-bg-active: var(--invoke-colors-base-250);
/* The border of the scrollbar handle */
/* --os-handle-border: none; */
/* The :hover border of the scrollbar handle */
@@ -34,17 +34,17 @@
/* The :active border of the scrollbar handle */
/* --os-handle-border-active: none; */
/* The min size of the scrollbar handle */
/* --os-handle-min-size: 50px; */
--os-handle-min-size: 32px;
/* The max size of the scrollbar handle */
/* --os-handle-max-size: none; */
/* The axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width) */
/* --os-handle-perpendicular-size: 100%; */
/* The :hover axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width) */
/* --os-handle-perpendicular-size-hover: 100%; */
--os-handle-perpendicular-size-hover: 100%;
/* The :active axis-perpedicular size of the scrollbar handle (horizontal: height, vertical: width) */
/* --os-handle-perpendicular-size-active: 100%; */
/* Increases the interactive area of the scrollbar handle. */
/* --os-handle-interactive-area-offset: 0; */
--os-handle-interactive-area-offset: -1px;
}
.os-scrollbar-handle {