From 68bd830ab9828d5018a13af6ebe73e57bf466631 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Tue, 25 May 2021 21:23:12 +0100
Subject: [PATCH] Scrollbar styles

---
 index.html                 | 12 +++++++++---
 src/components/Sidebar.vue |  8 ++++++++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 50b615b..a9f3190 100644
--- a/index.html
+++ b/index.html
@@ -155,24 +155,30 @@
 
         * {
             scrollbar-width: thin;
+            scrollbar-color: var(--background-light) transparent;
+        }
+
+        *:hover, *:focus-within {
             scrollbar-color: var(--background-hover) transparent;
         }
 
         *::-webkit-scrollbar {
-          width: 1.2rem;
+            width: 0.7rem;
         }
 
         *::-webkit-scrollbar-track {
-          background: transparent;
+            background: transparent;
         }
 
         *::-webkit-scrollbar-thumb {
             background-color: var(--background-light);
+            border: 2px solid #000000;
             border-radius: 2rem;
             transition: background 1s ease-in;
+            padding-right: 0.2rem;
         }
 
-        *:hover::-webkit-scrollbar-thumb {
+        *:hover::-webkit-scrollbar-thumb, *:focus-within::-webkit-scrollbar-thumb {
           background-color: var(--background-hover);
         }
 
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index b445292..d940f83 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -168,6 +168,14 @@ export default defineComponent({
 		padding: 0.2rem 0.5rem 0 0.2rem;
 		width: 24rem;
         align-items: flex-end;
+
+		&:not(:hover):not(:focus-within) {
+			scrollbar-color: var(--background-base) transparent;
+		}
+
+		&:not(:hover):not(:focus-within)::-webkit-scrollbar-thumb {
+			background-color: var(--background-base);
+		}
 	}
 
 	.sidebar__section {