Overlay scrollbar

layout/sidebar/sidebar.scarlet

@@ -12,7 +12,7 @@ const sidebar-spacing-y = 0.7rem
 	background sidebar-opaque-background
 	transform translateX(-100%)
 	overflow-x hidden
-	overflow-y auto
+	overflow-y overlay
 	opacity 0
 	pointer-events none
 	box-shadow 24px 0 24px rgba(0, 0, 0, 0.2)

styles/config.scarlet

@@ -43,10 +43,11 @@ ui-disabled-color = rgb(224, 224, 224)
 const ui-element-border-radius = 3px
 
 // Scrollbar
-scrollbar-size = 10px
-scrollbar-border-size = 2px
-scrollbar-border-radius = 5px
-scrollbar-thumb-color = hsla(text-color-h, text-color-s, text-color-l, 0.75)
+scrollbar-size = 12px
+scrollbar-border-size = 3px
+scrollbar-border-radius = 7px
+scrollbar-thumb-color = hsla(text-color-h, text-color-s, text-color-l, 0.4)
+scrollbar-thumb-hover-color = hsla(text-color-h, text-color-s, text-color-l, 0.6)
 scrollbar-track-color = transparent
 
 // Input

styles/layout.scarlet

@@ -5,9 +5,9 @@
 #content-container
 	flex 1
 	overflow-x hidden
-	overflow-y scroll
+	overflow-y overlay
 	position relative
 
 #columns
 	horizontal
-	height 100%
+	height 100%

styles/scrollbar.scarlet

@@ -7,6 +7,9 @@
 	::-webkit-scrollbar
 		width scrollbar-size
 
+	::-webkit-scrollbar-button
+		display none
+
 	::-webkit-scrollbar-track
 		background-color scrollbar-track-color
 
@@ -15,3 +18,7 @@
 		border-radius scrollbar-border-radius
 		background-clip content-box
 		background-color scrollbar-thumb-color
+
+		:hover,
+		:focus
+			background-color scrollbar-thumb-hover-color