dark theme scrollbars (#7269)

diff --git a/public/css/theme-arc-green.css b/public/css/theme-arc-green.css
index b48e22b41e1c5af28ca047cc2e50751bc8fd14dd..a3a72040093eabccec1f45cd015fc1d9eaf1f422 100644 (file)
--- a/public/css/theme-arc-green.css
+++ b/public/css/theme-arc-green.css
@@ -12,6 +12,12 @@
 .repository .ui.segment.sub-menu .list .item a{color:#dbdbdb}
 .ui.horizontal.segments>.segment{background-color:#383c4a}
 body{background:#383c4a;color:#9e9e9e}
+*{scrollbar-width:thin;scrollbar-color:#87ab63 rgba(255,255,255,.1)}
+::-webkit-scrollbar{-webkit-appearance:none!important;width:10px!important;height:10px!important}
+::-webkit-scrollbar-track{border-radius:0!important;background:rgba(255,255,255,.1)!important}
+::-webkit-scrollbar-thumb{cursor:pointer!important;border-radius:5px!important;transition:color .2s ease!important;background:#87ab63!important}
+::-webkit-scrollbar-thumb:window-inactive{background:#87ab63!important}
+::-webkit-scrollbar-thumb:hover{background:#87ab63!important}
 a{color:#87ab63}
 a:hover{color:#a0cc75}
 .ui.card>.extra a:not(.ui):hover,.ui.cards>.card>.extra a:not(.ui):hover{color:#a0cc75}

diff --git a/public/less/themes/arc-green.less b/public/less/themes/arc-green.less
index cde5b5e7f50bb614fa32c5cf193614ac80a8040d..ebe63c65fa4e509614666de1b47f63a569bda47c 100644 (file)
--- a/public/less/themes/arc-green.less
+++ b/public/less/themes/arc-green.less
@@ -85,6 +85,42 @@ body {
     color: #9e9e9e;
 }
 
+/* firefox scroll bars */
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: #87ab63 rgba(255, 255, 255, 0.1);
+}
+
+/* webkit scrollbars */
+
+::-webkit-scrollbar {
+    -webkit-appearance: none !important;
+    width: 10px !important;
+    height: 10px !important;
+}
+
+::-webkit-scrollbar-track {
+    border-radius: 0 !important;
+    background: rgba(255, 255, 255, 0.1) !important;
+}
+
+::-webkit-scrollbar-thumb {
+    cursor: pointer !important;
+    border-radius: 5px !important;
+    -webkit-transition: color 0.2s ease !important;
+    transition: color 0.2s ease !important;
+    background: #87ab63 !important;
+}
+
+::-webkit-scrollbar-thumb:window-inactive {
+    background: #87ab63 !important;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #87ab63 !important;
+}
+
 a {
     color: #87ab63;
 }