From 8ad0250d7ed6941219381be120648a92212e6b93 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Tue, 2 Jul 2019 01:23:43 +0200
Subject: [PATCH] Scrollbars styled for chrome as well, but chrome is
 fucky-wucky

---
 src/popup/App.vue       |  8 ++++----
 src/res/css/common.scss | 25 ++++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/popup/App.vue b/src/popup/App.vue
index 238de2c..9ef611e 100644
--- a/src/popup/App.vue
+++ b/src/popup/App.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="popup flex flex-column">
+  <div class="popup flex flex-column no-overflow">
     <div class="header flex-row flex-nogrow flex-noshrink">
       <span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
     </div>
 
-    <div class="flex flex-row body no-overflow-y flex-grow">
+    <div class="flex flex-row body no-overflow flex-grow">
       <!-- TABS/SIDEBAR -->
       <div id="tablist" class="flex flex-column flex-nogrow flex-noshrink h100">
         <div class="menu-item"
@@ -517,7 +517,7 @@ html, body {
 .tabitem {
   font-variant: normal;
   // font-size: 0.69em;
-  margin-left: 1em;
+  // margin-left: 16px;
   border-left: transparent 3px solid;
   padding-left: 12px;
   margin-left: -10px;
@@ -533,7 +533,7 @@ html, body {
   border-left: #f0c089 3px solid !important;
 }
 .tabitem-selected::before {
-  padding-right: 0.5em;
+  padding-right: 8px;
 }
 
 .tabitem-disabled {
diff --git a/src/res/css/common.scss b/src/res/css/common.scss
index 8ec1d18..b103ee1 100644
--- a/src/res/css/common.scss
+++ b/src/res/css/common.scss
@@ -40,6 +40,8 @@ body {
   padding-right: 1em;
 }
 
+
+
 /* overflow stuff */
 .overflow-y-auto {
   overflow: auto;
@@ -51,10 +53,31 @@ body {
 }
 
 
-.no-overflow-y {
+/* scrollbars for chrome/webkit */
+.overflow-y-auto::-webkit-scrollbar {
+  width: 3px;
+}
+.overflow-y-auto::-webkit-scrollbar-track {
+  background: $background-primary;
+}
+.overflow-y-auto::-webkit-scrollbar-thumb {
+  background: rgba($primary-color, 0.7);
+}
+.overflow-y-auto::-webkit-scrollbar-button {
+  display: none;
+}
+.scrollbar-darker::-webkit-scrollbar-thumb {
+  background: rgba($primary-color, 0.5);
+}
+
+.no-overflow {
   overflow: hidden;
 }
 
+.no-overflow-y {
+  overflow-y: hidden;
+}
+
 /* .SELECTED CLASSES */
 
 .selected-tab {