Skip to content

Commit

Permalink
scrollbar colors work so far
Browse files Browse the repository at this point in the history
  • Loading branch information
potatoqualitee committed Dec 11, 2024
1 parent 295dd80 commit c23b9e1
Showing 1 changed file with 71 additions and 20 deletions.
91 changes: 71 additions & 20 deletions css/components/scrollbars.css
Original file line number Diff line number Diff line change
@@ -1,38 +1,89 @@
[data-theme="dark"].categories-sidebar,
[data-theme="dark"].categories-grid,
[data-theme="dark"].keywords-section,
[data-theme="dark"].context-builder {
/* Light theme scrollbar colors */
:root {
--scrollbar-track: #f0f0f0;
--scrollbar-thumb: #a8a8a8;
--scrollbar-thumb-hover: #8b98a5;
}

/* Dark theme scrollbar colors */
[data-theme="dark"] {
--scrollbar-track: #1e2732;
--scrollbar-thumb: #38444d;
--scrollbar-thumb-hover: #536471;
}

/* Firefox scrollbar styles */
* {
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
scrollbar-width: thin;
}

/* Webkit scrollbar styles */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
background: var(--scrollbar-track);
border-radius: 4px;
}

::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}

/* Ensure styles apply to specific components */
.categories-sidebar,
.categories-grid,
.keywords-section,
.context-builder,
.simple-mode-container,
.advanced-mode-container {
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
scrollbar-width: thin;
}

[data-theme="dark"].categories-sidebar::-webkit-scrollbar,
[data-theme="dark"].categories-grid::-webkit-scrollbar,
[data-theme="dark"].keywords-section::-webkit-scrollbar,
[data-theme="dark"].context-builder::-webkit-scrollbar {
.categories-sidebar::-webkit-scrollbar,
.categories-grid::-webkit-scrollbar,
.keywords-section::-webkit-scrollbar,
.context-builder::-webkit-scrollbar,
.simple-mode-container::-webkit-scrollbar,
.advanced-mode-container::-webkit-scrollbar {
width: 8px;
height: 8px;
}

[data-theme="dark"].categories-sidebar::-webkit-scrollbar-track,
[data-theme="dark"].categories-grid::-webkit-scrollbar-track,
[data-theme="dark"].keywords-section::-webkit-scrollbar-track,
[data-theme="dark"].context-builder::-webkit-scrollbar-track {
.categories-sidebar::-webkit-scrollbar-track,
.categories-grid::-webkit-scrollbar-track,
.keywords-section::-webkit-scrollbar-track,
.context-builder::-webkit-scrollbar-track,
.simple-mode-container::-webkit-scrollbar-track,
.advanced-mode-container::-webkit-scrollbar-track {
background: var(--scrollbar-track);
border-radius: 4px;
}

[data-theme="dark"].categories-sidebar::-webkit-scrollbar-thumb,
[data-theme="dark"].categories-grid::-webkit-scrollbar-thumb,
[data-theme="dark"].keywords-section::-webkit-scrollbar-thumb,
[data-theme="dark"].context-builder::-webkit-scrollbar-thumb {
.categories-sidebar::-webkit-scrollbar-thumb,
.categories-grid::-webkit-scrollbar-thumb,
.keywords-section::-webkit-scrollbar-thumb,
.context-builder::-webkit-scrollbar-thumb,
.simple-mode-container::-webkit-scrollbar-thumb,
.advanced-mode-container::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 4px;
}

[data-theme="dark"].categories-sidebar::-webkit-scrollbar-thumb:hover,
[data-theme="dark"].categories-grid::-webkit-scrollbar-thumb:hover,
[data-theme="dark"].keywords-section::-webkit-scrollbar-thumb:hover,
[data-theme="dark"].context-builder::-webkit-scrollbar-thumb:hover {
.categories-sidebar::-webkit-scrollbar-thumb:hover,
.categories-grid::-webkit-scrollbar-thumb:hover,
.keywords-section::-webkit-scrollbar-thumb:hover,
.context-builder::-webkit-scrollbar-thumb:hover,
.simple-mode-container::-webkit-scrollbar-thumb:hover,
.advanced-mode-container::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}

0 comments on commit c23b9e1

Please sign in to comment.