From e0d7c466cc545fddb7007419963e846f5d7d89d5 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Wed, 28 Dec 2022 07:05:49 +1300
Subject: [PATCH] Add Scrollbar Styling

---
 frontend/src/styles/Themes/_Colors_Dark.scss  |  4 +++
 frontend/src/styles/Themes/_Colors_Green.scss |  4 +++
 frontend/src/styles/Themes/_Colors_Light.scss |  4 +++
 frontend/src/styles/_Misc.scss                | 29 +++++++++++++++++++
 4 files changed, 41 insertions(+)

diff --git a/frontend/src/styles/Themes/_Colors_Dark.scss b/frontend/src/styles/Themes/_Colors_Dark.scss
index 948459ee21..194ee6ebd4 100644
--- a/frontend/src/styles/Themes/_Colors_Dark.scss
+++ b/frontend/src/styles/Themes/_Colors_Dark.scss
@@ -132,4 +132,8 @@
 
   // Checkerboard
   --checkboard-dots-color: rgb(35, 35, 39);
+
+  // Scrollbar
+  --scrollbar-color: var(--accent-color);
+  --scrollbar-color-hover: var(--accent-color-bright);
 }
diff --git a/frontend/src/styles/Themes/_Colors_Green.scss b/frontend/src/styles/Themes/_Colors_Green.scss
index d3f70856ac..9ccc2d1ce0 100644
--- a/frontend/src/styles/Themes/_Colors_Green.scss
+++ b/frontend/src/styles/Themes/_Colors_Green.scss
@@ -130,4 +130,8 @@
 
   //Checkerboard
   --checkboard-dots-color: rgb(35, 35, 39);
+
+  // Scrollbar
+  --scrollbar-color: var(--accent-color);
+  --scrollbar-color-hover: var(--accent-color-bright);
 }
diff --git a/frontend/src/styles/Themes/_Colors_Light.scss b/frontend/src/styles/Themes/_Colors_Light.scss
index 454801936a..ac22a82cb1 100644
--- a/frontend/src/styles/Themes/_Colors_Light.scss
+++ b/frontend/src/styles/Themes/_Colors_Light.scss
@@ -127,4 +127,8 @@
 
   // Checkerboard
   --checkboard-dots-color: rgb(160, 160, 172);
+
+  // Scrollbar
+  --scrollbar-color: rgb(180, 180, 184);
+  --scrollbar-color-hover: rgb(150, 150, 154);
 }
diff --git a/frontend/src/styles/_Misc.scss b/frontend/src/styles/_Misc.scss
index 4c09d8d73c..47dec4c061 100644
--- a/frontend/src/styles/_Misc.scss
+++ b/frontend/src/styles/_Misc.scss
@@ -14,3 +14,32 @@
 //     var(--background-color-secondary);
 //   background-size: 64px 64px;
 // }
+
+* {
+  scrollbar-width: thick; /* none | auto  */
+  scrollbar-color: var(--scrollbar-color) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 8px; // Vertical Scrollbar Width
+  height: 8px; // Horizontal Scrollbar Height
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-color);
+  border-radius: 8px;
+  border: calc(8px / 4) solid var(--scrollbar-color);
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-color-hover);
+  border: calc(8px / 4) solid var(--scrollbar-color-hover);
+}
+
+::-webkit-scrollbar-button {
+  background: transparent;
+}