From bd6ef236ce6e9ea81958097b04ff4d667447cb3a Mon Sep 17 00:00:00 2001
From: k <mol.tired@gmail.com>
Date: Mon, 14 Jun 2021 06:29:55 -0500
Subject: [PATCH] change chroma horizontal scrollbar styles

Again, the chroma (dark and light) horizontal scrollbar looks pretty
awful in Firefox. In order to make them to look consistent in both,
Chromium and Firefox, this changed has been introduced.
---
 assets/scss/partials/highlight/dark.scss  | 23 +++++++++++++++++++++--
 assets/scss/partials/highlight/light.scss | 21 ++++++++++++++++++++-
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/assets/scss/partials/highlight/dark.scss b/assets/scss/partials/highlight/dark.scss
index 2c13946..0c38bb5 100644
--- a/assets/scss/partials/highlight/dark.scss
+++ b/assets/scss/partials/highlight/dark.scss
@@ -6,7 +6,26 @@
 /* Background */
 .chroma {
     color: #f8f8f2;
-    background-color: #272822
+    background-color: #272822;
+
+    /* scrollbar styles for Firefox */
+    scrollbar-width: auto;
+    scrollbar-color: var(--scrollbar-thumb) #272822;
+    /**/
+
+    /* scrollbar styles for Chromium */
+    &::-webkit-scrollbar {
+        height: auto;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--scrollbar-thumb);
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: #272822;
+    }
+    /**/
 }
 
 /* Other */
@@ -381,4 +400,4 @@
 .chroma .gl {}
 
 /* TextWhitespace */
-.chroma .w {}
\ No newline at end of file
+.chroma .w {}
diff --git a/assets/scss/partials/highlight/light.scss b/assets/scss/partials/highlight/light.scss
index 9ddcff9..b4d1ea6 100644
--- a/assets/scss/partials/highlight/light.scss
+++ b/assets/scss/partials/highlight/light.scss
@@ -7,6 +7,25 @@
 .chroma {
     color: #272822;
     background-color: #fafafa;
+
+    /* scrollbar styles for Firefox */
+    scrollbar-width: auto;
+    scrollbar-color: var(--scrollbar-thumb) #fafafa;
+    /**/
+
+    /* scrollbar styles for Chromium */
+    &::-webkit-scrollbar {
+        height: auto;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--scrollbar-thumb);
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: #fafafa;
+    }
+    /**/
 }
 
 /* Other */
@@ -403,4 +422,4 @@
 .chroma .gl {}
 
 /* TextWhitespace */
-.chroma .w {}
\ No newline at end of file
+.chroma .w {}