From 8fb12bbc49f8f91f4ffa0859ed051e04412672ae Mon Sep 17 00:00:00 2001
From: Unrud <unrud@outlook.com>
Date: Sun, 8 Mar 2020 19:43:04 +0100
Subject: [PATCH] Fix scrollbars on WebKit

---
 assets/screen-narrow.css   |  5 -----
 assets/screen-noscript.css |  2 +-
 assets/screen.css          | 31 ++++++++++++++++++++++---------
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/assets/screen-narrow.css b/assets/screen-narrow.css
index a351c787..461ffcf3 100644
--- a/assets/screen-narrow.css
+++ b/assets/screen-narrow.css
@@ -25,7 +25,6 @@ nav {
     left: 0;
     background-color: #E4E9F6;
     z-index: 1;
-    scrollbar-width: initial;
     transition: width ease .2s;
     max-height: initial !important;
     margin: 0;
@@ -39,10 +38,6 @@ html.nav-opened {
     width: 100vw;
 }
 
-nav::-webkit-scrollbar {
-    display: initial;
-}
-
 main, .navContainer {
     position: relative;
 }
diff --git a/assets/screen-noscript.css b/assets/screen-noscript.css
index e17be4b2..5ac30fa6 100644
--- a/assets/screen-noscript.css
+++ b/assets/screen-noscript.css
@@ -26,7 +26,7 @@ nav .level4 > a::after {
     display: none !important;
 }
 
-@media screen and (max-width: 50em) {
+@media all and (max-width: 50em) {
     nav, .navButtonContainer {
         display: none;
     }
diff --git a/assets/screen.css b/assets/screen.css
index 68ed5654..9b3bc0e8 100644
--- a/assets/screen.css
+++ b/assets/screen.css
@@ -244,23 +244,36 @@ nav {
     top: 0;
     height: 100vh;
     overflow-y: auto;
-    scrollbar-width: none;
 }
 
 .navContainer {
     padding: 10px 0;
 }
 
-nav::-webkit-scrollbar {
-    display: none;
-}
+@media not all and (max-width: 50em) {
+    /* Use media query because any change to ::-webkit-scrollbar makes it
+     * impossible to restore system scrollbars */
 
-nav:hover {
-    scrollbar-width: initial;
-}
+    nav {
+        scrollbar-width: none;
+    }
 
-nav:hover::-webkit-scrollbar {
-    display: initial;
+    nav:hover, nav:focus-within {
+        scrollbar-width: initial;
+    }
+
+    nav::-webkit-scrollbar {
+        display: none;
+        background-color: #D2D7E3;
+    }
+
+    nav::-webkit-scrollbar-thumb {
+        background-color: #424247;
+    }
+
+    nav:hover::-webkit-scrollbar, nav:focus-within::-webkit-scrollbar {
+        display: initial;
+    }
 }
 
 nav .level2 {