Adds new setting option for smaller scrollbars

assets/App.vue

@@ -64,8 +64,25 @@ export default {
     await this.fetchContainerList();
     this.title = `${this.containers.length} containers`;
   },
+  mounted() {
+    if (this.hasSmallerScrollbars) {
+      document.documentElement.classList.add("has-custom-scrollbars");
+    }
+  },
+  watch: {
+    hasSmallerScrollbars(newValue, oldValue) {
+      if (newValue) {
+        document.documentElement.classList.add("has-custom-scrollbars");
+      } else {
+        document.documentElement.classList.remove("has-custom-scrollbars");
+      }
+    }
+  },
   computed: {
-    ...mapState(["containers", "activeContainers", "isMobile", "settings"])
+    ...mapState(["containers", "activeContainers", "isMobile", "settings"]),
+    hasSmallerScrollbars() {
+      return this.settings.smallerScrollbars;
+    }
   },
   methods: {
     ...mapActions({

assets/pages/Settings.vue

@@ -26,11 +26,16 @@
       </div>
 
       <div class="item">
-        <h2 class="title is-6 is-marginless">Font size</h2>
+        <b-switch v-model="smallerScrollbars">
+          Use smaller scrollbars
+        </b-switch>
+      </div>
 
+      <div class="item">
+        <h2 class="title is-6 is-marginless">Font size</h2>
         Modify the font size when viewing logs.
-        <br /><br />
-        <b-dropdown v-model="size" aria-role="list">
+
+        <b-dropdown v-model="size" aria-role="list" style="margin:-8px 10px 0">
           <button class="button is-primary" type="button" slot="trigger">
             <span class="is-capitalized">{{ size }}</span>
             <span class="icon"><ion-icon name="ios-arrow-down"></ion-icon></span>
@@ -84,7 +89,7 @@ export default {
   },
   computed: {
     ...mapState(["settings"]),
-    ...["search", "size"].reduce((map, name) => {
+    ...["search", "size", "smallerScrollbars"].reduce((map, name) => {
       map[name] = {
         get() {
           return this.settings[name];

assets/store/settings.js

@@ -2,5 +2,6 @@ export const DOZZLE_SETTINGS_KEY = "DOZZLE_SETTINGS";
 export const DEFAULT_SETTINGS = {
   search: true,
   size: "medium",
-  menuWidth: 15
+  menuWidth: 15,
+  smallerScrollbars: false
 };

assets/styles.scss

@@ -26,3 +26,33 @@ html {
   overflow-x: unset;
   overflow-y: unset;
 }
+
+html.has-custom-scrollbars {
+  ::-webkit-scrollbar {
+    width: 8px;
+    display: content;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(128, 128, 128, 0.33);
+    outline: 1px solid slategrey;
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    background-color: #777;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-track:hover {
+    background-color: rgba(64, 64, 64, 0.33);
+  }
+
+  section main {
+    scrollbar-color: #353535 transparent;
+    scrollbar-width: thin;
+  }
+}