From c0b8c089c264b514710bf303f88e2902dc769fcb Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 14 Sep 2021 15:54:05 +0800
Subject: [PATCH] Custom the scrollbar on Webkit browsers

the default scrollbar on Windows looks like shit
---
 _sass/addon/commons.scss           | 20 ++++++++++++++++++++
 _sass/colors/dark-typography.scss  |  2 ++
 _sass/colors/light-typography.scss |  2 ++
 3 files changed, 24 insertions(+)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 7ca7029..c320cd0 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -53,6 +53,26 @@ body {
   font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
 }
 
+/* --- Scrollbar --- */
+
+$scrollbar-size: 7px;
+
+::-webkit-scrollbar {
+  width: $scrollbar-size;
+  height: $scrollbar-size;
+}
+
+::-webkit-scrollbar-track {
+  @at-root body#{&} {
+    -webkit-box-shadow: inset 0 0 6px var(--scrollbar-track-bg);
+  }
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb-bg);
+  border-radius: calc(#{$scrollbar-size} / 2);
+}
+
 /* --- Typography --- */
 
 h1 {
diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
index e8f53e1..3c0a718 100644
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -12,6 +12,8 @@
   --input-focus-border-color: rgb(112, 114, 115);
   --mask-bg: rgb(68, 69, 70);
   --footer-bg-color: var(--main-wrapper-bg);
+  --scrollbar-track-bg: rgba(0,0,0,0.3);
+  --scrollbar-thumb-bg: rgb(173 171 171 / 50%);
 
   /* common color */
   --text-color: rgb(175, 176, 177);
diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
index 11031eb..3e0af5e 100644
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -24,6 +24,8 @@
   --btn-box-shadow: #eaeaea;
   --checkbox-color: #c5c5c5;
   --checkbox-checked-color: #07a8f7;
+  --scrollbar-track-bg: rgba(0,0,0,0.3);
+  --scrollbar-thumb-bg: rgba(0,0,0,0.3);
 
   /* Sidebar */
   --sidebar-bg: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);