Added styles for scrollbars on Firefox (#1731)

Closes #1717

material/assets/manifest.json

@@ -1,12 +1,12 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.ff925e8b.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.ff925e8b.min.js.map",
-  "assets/javascripts/vendor.js": "assets/javascripts/vendor.de50e36d.min.js",
-  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.de50e36d.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.5f27aba8.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.5f27aba8.min.js.map",
+  "assets/javascripts/vendor.js": "assets/javascripts/vendor.d710d30a.min.js",
+  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.d710d30a.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.27c6a5e6.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.27c6a5e6.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.1adefb91.min.css",
-  "assets/stylesheets/main.css.map": "assets/stylesheets/main.1adefb91.min.css.map",
-  "assets/stylesheets/palette.css": "assets/stylesheets/palette.36d1b78f.min.css",
-  "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.36d1b78f.min.css.map"
+  "assets/stylesheets/main.css": "assets/stylesheets/main.5ce4f19a.min.css",
+  "assets/stylesheets/main.css.map": "assets/stylesheets/main.5ce4f19a.min.css.map",
+  "assets/stylesheets/palette.css": "assets/stylesheets/palette.24ef6ec6.min.css",
+  "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.24ef6ec6.min.css.map"
 }

material/base.html

@@ -41,9 +41,9 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.1adefb91.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.5ce4f19a.min.css' | url }}">
       {% if palette.scheme or palette.primary or palette.accent %}
-        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.36d1b78f.min.css' | url }}">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.24ef6ec6.min.css' | url }}">
       {% endif %}
       {% if palette.primary %}
         {% import "partials/palette.html" as map %}
@@ -179,8 +179,8 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/vendor.de50e36d.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.ff925e8b.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/vendor.d710d30a.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.5f27aba8.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

src/assets/stylesheets/base/_typeset.scss

@@ -205,7 +205,14 @@ kbd {
       box-shadow: none;
       box-decoration-break: slice;
       touch-action: auto;
+      // Override Firefox scrollbar style
       scrollbar-width: thin;
+      scrollbar-color: var(--md-default-fg-color--lighter) transparent;
+
+      // Override Firefox scrollbar hover color
+      &:hover {
+        scrollbar-color: var(--md-accent-fg-color) transparent;
+      }
 
       // Override native scrollbar styles
       &::-webkit-scrollbar {

src/assets/stylesheets/layout/_search.scss

@@ -466,12 +466,20 @@ $md-toggle__search--checked:
     // [tablet landscape +]: Limit height to viewport
     @include break-from-device(tablet landscape) {
       max-height: 0;
+      // Override Firefox scrollbar style
+      scrollbar-width: thin;
+      scrollbar-color: var(--md-default-fg-color--lighter) transparent;
 
       // Expand in active state
       #{$md-toggle__search--checked} & {
         max-height: 75vh;
       }
 
+      // Override Firefox scrollbar hover color
+      &:hover {
+        scrollbar-color: var(--md-accent-fg-color) transparent;
+      }
+
       // Override native scrollbar styles
       &::-webkit-scrollbar {
         width: px2rem(4px);

src/assets/stylesheets/layout/_sidebar.scss

@@ -126,6 +126,9 @@ $md-toggle__drawer--checked:
     overflow-y: auto;
     // Hack: reduce jitter
     backface-visibility: hidden;
+    // Override Firefox scrollbar style
+    scrollbar-width: thin;
+    scrollbar-color: var(--md-default-fg-color--lighter) transparent;
 
     // Hack: Chrome 81+ exhibits a strange bug, where it scrolls the container
     // to the bottom if `scroll-snap-type` is set on the initial render. For
@@ -150,6 +153,11 @@ $md-toggle__drawer--checked:
       }
     }
 
+    // Override Firefox scrollbar hover color
+    &:hover {
+      scrollbar-color: var(--md-accent-fg-color) transparent;
+    }
+
     // Override native scrollbar styles
     &::-webkit-scrollbar {
       width: px2rem(4px);