Fix scrollbars on WebKit

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;
 }

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;
     }

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 {