feat: add custom scrollbar css to light mode

note: `html::-webkit-scrollbar` is used because a top level `::-webkit-scrollbar` would override the `html.dark::-webkit-scrollbar` style even with `!important`
gitify-app · Jun 16, 2024 · f600cdf · f600cdf
1 parent 7a83f81
commit f600cdf
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -25,11 +25,23 @@
       -webkit-user-select: none;
     }
 
-    html.dark::-webkit-scrollbar,
-    html.dark div.flex-grow::-webkit-scrollbar {
+    html::-webkit-scrollbar,
+    div.flex-grow::-webkit-scrollbar {
         width: 10px;
     }
 
+    html::-webkit-scrollbar-thumb,
+    div.flex-grow::-webkit-scrollbar-thumb {
+        background-color: #c1c1c1;
+        border-radius: 10px;
+    }
+
+    html::-webkit-scrollbar-thumb:hover,
+    div.flex-grow::-webkit-scrollbar-thumb:hover {
+        background-color: #a8a8a8;
+        border-radius: 10px;
+    }
+
     html.dark::-webkit-scrollbar-track,
     html.dark div.flex-grow::-webkit-scrollbar-track {
         background-color: #090E15;
@@ -38,13 +50,11 @@
     html.dark::-webkit-scrollbar-thumb,
     html.dark div.flex-grow::-webkit-scrollbar-thumb {
         background-color: #24292e;
-        border-radius: 10px;
     }
 
     html.dark::-webkit-scrollbar-thumb:hover,
     html.dark div.flex-grow::-webkit-scrollbar-thumb:hover {
         background-color: #3a3f44;
-        border-radius: 10px;
     }
 
     body {