jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update the color of scrollbars to match the latest design

This commit is contained in:
Keavon Chambers 2025-12-23 14:47:45 -08:00
parent 2f880fa035
commit 6dea184b03
2 changed files with 3 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/components/Editor.svelte
View File

@ -261,42 +261,8 @@
.scrollable-x,
.scrollable-y {
overflow: hidden;
scrollbar-width: thin;
// Not supported in Safari
scrollbar-color: var(--color-5-dullgray) transparent;
// Safari (more capable, removed from recent versions of Chromium, possibly still supported in Safari but not tested)
&::-webkit-scrollbar {
width: calc(2px + 6px + 2px);
height: calc(2px + 6px + 2px);
}
&::-webkit-scrollbar-track {
box-shadow: inset 0 0 0 1px var(--color-5-dullgray);
border: 2px solid transparent;
border-radius: 10px;
}
&:hover::-webkit-scrollbar-track {
box-shadow: inset 0 0 0 1px var(--color-6-lowergray);
}
&::-webkit-scrollbar-thumb {
background-clip: padding-box;
background-color: var(--color-5-dullgray);
border: 2px solid transparent;
border-radius: 10px;
margin: 2px;
}
&:hover::-webkit-scrollbar-thumb {
background-color: var(--color-6-lowergray);
}
&::-webkit-scrollbar-corner {
background: none;
}
scrollbar-color: var(--color-4-dimgray) transparent;
}
.scrollable-x.scrollable-y {
@ -304,6 +270,7 @@
}
.scrollable-x:not(.scrollable-y) {
scrollbar-width: none;
overflow: auto hidden;
}

2
frontend/src/components/widgets/inputs/ScrollbarInput.svelte
View File

@ -284,7 +284,7 @@
.scroll-thumb {
position: absolute;
border-radius: 4px;
background: var(--color-5-dullgray);
background: var(--color-4-dimgray);
&:hover,
&.dragging {