From 8f3d5fdb7d68491ff1278f2a77db7f8196820c2f Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Fri, 12 Jul 2019 14:42:56 -0700
Subject: [PATCH] Fix scrollbar on Firefox (#3357)

---
 src/components/ha-sidebar.ts | 8 +++++---
 src/resources/ha-style.ts    | 2 ++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index dc62678da0..3f57d25ba9 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -412,15 +412,15 @@ class HaSidebar extends LitElement {
         display: initial;
       }
 
-      ::-webkit-scrollbar {
+      paper-listbox::-webkit-scrollbar {
         width: 0.4rem;
         height: 0.4rem;
       }
 
-      ::-webkit-scrollbar-thumb {
+      paper-listbox::-webkit-scrollbar-thumb {
         -webkit-border-radius: 4px;
         border-radius: 4px;
-        background: var(--secondary-text-color);
+        background: var(--scrollbar-thumb-color);
       }
 
       paper-listbox {
@@ -431,6 +431,8 @@ class HaSidebar extends LitElement {
         height: calc(100% - 196px);
         overflow-y: auto;
         overflow-x: hidden;
+        scrollbar-color: var(--scrollbar-thumb-color) transparent;
+        scrollbar-width: thin;
       }
 
       a {
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 6838312427..cb2fc997c7 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -31,6 +31,8 @@ documentContainer.innerHTML = `<custom-style>
       --accent-color: #ff9800;
       --divider-color: rgba(0, 0, 0, .12);
 
+      --scrollbar-thumb-color: rgb(194, 194, 194);
+
       /* states and badges */
       --state-icon-color: #44739e;
       --state-icon-active-color: #FDD835;