From 816fa63e78386f536ec104150a4ef907c067c1b2 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Fri, 14 Aug 2020 21:24:49 -0600
Subject: [PATCH] Add styling for scrollbars

---
 src/App.vue            |  1 +
 src/css/dark_theme.css |  6 +++++-
 src/css/scrollbar.css  | 27 +++++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/css/scrollbar.css

diff --git a/src/App.vue b/src/App.vue
index 5e73d90..5d04320 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -71,6 +71,7 @@ export default {
 <style>
 @import "./css/transitions.css";
 @import "./css/dark_theme.css";
+@import "./css/scrollbar.css";
 @import "./css/tooltips.css";
 @import "./css/inputs.css";
 
diff --git a/src/css/dark_theme.css b/src/css/dark_theme.css
index 1a632e4..6688a21 100644
--- a/src/css/dark_theme.css
+++ b/src/css/dark_theme.css
@@ -46,5 +46,9 @@
 
 	--percent-filled: var(--accent2);
 	--percent-empty: var(--on-card-colour);
-	--percent-text: var(--on-card-text)
+	--percent-text: var(--on-card-text);
+
+	--scrollbar-background: #0f0f0f;
+	--scrollbar-handle: #4d4d4d;
+	--scrollbar-handle-hover: #5e5e5e;
 }
\ No newline at end of file
diff --git a/src/css/scrollbar.css b/src/css/scrollbar.css
new file mode 100644
index 0000000..3372bb1
--- /dev/null
+++ b/src/css/scrollbar.css
@@ -0,0 +1,27 @@
+/* width */
+::-webkit-scrollbar {
+	width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+	background: var(--scrollbar-background);
+	border-radius: 5px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+	background: var(--scrollbar-handle);
+	border-radius: 5px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+	background: var(--scrollbar-handle-hover);
+}
+
+
+* {
+	scrollbar-width: thin;
+	scrollbar-color: var(--scrollbar-handle) var(--scrollbar-background);
+}
\ No newline at end of file