From fb2dc7b58d81e55a63591c97cf53b43cfe140594 Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Sat, 20 Nov 2021 13:06:16 +0900
Subject: [PATCH] Improved scrollbar

---
 styles/base.scarlet      | 11 -----------
 styles/config.scarlet    |  6 ++++++
 styles/scrollbar.scarlet | 17 +++++++++++++++++
 3 files changed, 23 insertions(+), 11 deletions(-)
 create mode 100644 styles/scrollbar.scarlet

diff --git a/styles/base.scarlet b/styles/base.scarlet
index 33f779f2..4f9cbe3d 100644
--- a/styles/base.scarlet
+++ b/styles/base.scarlet
@@ -41,14 +41,3 @@ rt
 
 .spacer
 	flex 1
-@media (hover : hover) and (pointer : fine)
-	body
-		scrollbar-color text-color bg-color
-	::-webkit-scrollbar
-		width 8px
-	::-webkit-scrollbar-track
-		background var(--bg-color)
-		border-radius 20px
-	::-webkit-scrollbar-thumb
-		background var(--text-color)
-		border-radius 20px
diff --git a/styles/config.scarlet b/styles/config.scarlet
index a8839f0e..ba560d0d 100644
--- a/styles/config.scarlet
+++ b/styles/config.scarlet
@@ -42,6 +42,12 @@ ui-hover-border = 1px solid ui-hover-border-color
 ui-disabled-color = rgb(224, 224, 224)
 const ui-element-border-radius = 3px
 
+// Scrollbar
+scrollbar-size = 10px
+scrollbar-border-size = 2px
+scrollbar-thumb-color = hsla(text-color-h, text-color-s, text-color-l, 0.75)
+scrollbar-track-color = transparent
+
 // Input
 input-height = 2.5rem
 input-focus-border-color = rgb(248, 165, 130)
diff --git a/styles/scrollbar.scarlet b/styles/scrollbar.scarlet
new file mode 100644
index 00000000..63daa2d8
--- /dev/null
+++ b/styles/scrollbar.scarlet
@@ -0,0 +1,17 @@
+// Desktop scrollbar
+@media (hover: hover) and (pointer: fine)
+	body
+		scrollbar-width scrollbar-size
+		scrollbar-color scrollbar-thumb-color scrollbar-track-color
+
+	::-webkit-scrollbar
+		width scrollbar-size
+
+	::-webkit-scrollbar-track
+		background-color scrollbar-track-color
+
+	::-webkit-scrollbar-thumb
+		border scrollbar-border-size solid transparent
+		border-radius 5px
+		background-clip content-box
+		background-color scrollbar-thumb-color