css: style scroll bars

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;

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");
 

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;
 }

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);
+}

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>