From a89503a4ddec9dcb2611f5229adf5f2d49a69554 Mon Sep 17 00:00:00 2001
From: Sebastian Castro <sebastian.castro@protonmail.com>
Date: Tue, 7 Apr 2020 12:11:38 +0200
Subject: [PATCH] css: style scroll bars

---
 src/static/css/pad/chat.css                   |  2 +-
 src/static/skins/colibris/pad.css             |  1 +
 .../skins/colibris/src/components/chat.css    | 18 ----------
 .../colibris/src/components/scrollbars.css    | 33 +++++++++++++++++++
 src/templates/pad.html                        |  2 +-
 5 files changed, 36 insertions(+), 20 deletions(-)
 create mode 100644 src/static/skins/colibris/src/components/scrollbars.css

diff --git a/src/static/css/pad/chat.css b/src/static/css/pad/chat.css
index 0b9e611f1..b88f6fcb2 100644
--- a/src/static/css/pad/chat.css
+++ b/src/static/css/pad/chat.css
@@ -2,7 +2,7 @@
   z-index: 400;
   position: absolute;
   bottom: 0px;
-  right: 20px;
+  right: 25px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   display: none;
diff --git a/src/static/skins/colibris/pad.css b/src/static/skins/colibris/pad.css
index 2cf5781d4..577dac2a5 100644
--- a/src/static/skins/colibris/pad.css
+++ b/src/static/skins/colibris/pad.css
@@ -1,6 +1,7 @@
 @import url("src/layout.css");
 @import url("src/pad-editor.css");
 
+@import url("src/components/scrollbars.css");
 @import url("src/components/buttons.css");
 @import url("src/components/popup.css");
 
diff --git a/src/static/skins/colibris/src/components/chat.css b/src/static/skins/colibris/src/components/chat.css
index 787c4ac38..12efd9ee4 100644
--- a/src/static/skins/colibris/src/components/chat.css
+++ b/src/static/skins/colibris/src/components/chat.css
@@ -48,24 +48,6 @@
   background-color: transparent !important;
 }
 
-#chattext p b {
-  color: #4c4c4c;
-}
-
-#chattext::-webkit-scrollbar-track {
-  background-color: #f6f6f6;
-  border: 1px solid #f0f0f0;
-}
-
-#chattext::-webkit-scrollbar {
-  width: 7px;
-}
-
-#chattext::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background-color: #C5C5C5;
-}
-
 #chatbox.stickyChat #chattext {
   padding: 0px;
 }
diff --git a/src/static/skins/colibris/src/components/scrollbars.css b/src/static/skins/colibris/src/components/scrollbars.css
new file mode 100644
index 000000000..0cfbaa012
--- /dev/null
+++ b/src/static/skins/colibris/src/components/scrollbars.css
@@ -0,0 +1,33 @@
+@media (min-width: 721px) {
+  ::-webkit-scrollbar-track {
+    background-color: var(--middle-color);
+    border-radius: 10px;
+    border: 7px solid var(--light-soft-color);
+  }
+
+  ::-webkit-scrollbar {
+    width: 22px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: var(--dark-soft-color);
+    border: 7px solid var(--light-soft-color);
+  }
+}
+
+.thin-scrollbar::-webkit-scrollbar-track {
+  background-color: var(--light-soft-color);
+  border-radius: 10px;
+  border: 5px solid var(--light-color);
+}
+
+.thin-scrollbar::-webkit-scrollbar {
+  width: 17px;
+}
+
+.thin-scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 7px;
+  background-color: var(--middle-color);
+  border: 5px solid var(--light-color);
+}
\ No newline at end of file
diff --git a/src/templates/pad.html b/src/templates/pad.html
index 0fee58cc6..ddf361860 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -373,7 +373,7 @@
               <a id="titlecross" class="hide-reduce-btn" onClick="chat.hide();return false;">-&nbsp;</a>
               <a id="titlesticky" class="stick-to-screen-btn" onClick="chat.stickToScreen(true);return false;" data-l10n-id="pad.chat.stick.title">█&nbsp;&nbsp;</a>
             </div>
-            <div id="chattext" class="authorColors" aria-live="polite" aria-relevant="additions removals text" role="log" aria-atomic="false">
+            <div id="chattext" class="authorColors thin-scrollbar" aria-live="polite" aria-relevant="additions removals text" role="log" aria-atomic="false">
                 <div alt="loading.." id="chatloadmessagesball" class="chatloadmessages loadingAnimation" align="top"></div>
                 <button id="chatloadmessagesbutton" class="chatloadmessages" data-l10n-id="pad.chat.loadmessages"></button>
             </div>