Unify scrollbars/paddings across supported OS (#367)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/assets/css/app.scss

@@ -65,6 +65,19 @@ pre {
   width: 100%;
 }
 
+::-webkit-scrollbar {
+  width: 12px;
+
+}
+
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 12px $lens-pane-bg;
+}
+
+::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 12px $lens-pane-bg;
+}
+
 h1, h2, h3, h4, h5, h6{
   color: #fff;
   font-size: 20.8px;

src/renderer/components/MainMenu/MainMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main-menu">
+  <div :style="{ paddingTop: computedPaddingTop }" class="main-menu">
     <draggable v-model="clusters">
       <ClusterMenuItem
         v-for="cluster in clusters" :key="cluster.id"
@@ -23,6 +23,7 @@ import ClusterMenuItem from "@/components/MainMenu/ClusterMenuItem";
 import AddClusterMenuItem from "@/components/MainMenu/AddClusterMenuItem";
 import draggable from 'vuedraggable'
 import { clusterStore } from "@/../common/cluster-store";
+import * as os from "os";
 
 const { remote } = require('electron')
 const { Menu, MenuItem } = remote
@@ -36,6 +37,7 @@ export default {
   },
   data(){
     return {
+      computedPaddingTop: "15px"
     }
   },
   computed : {
@@ -64,6 +66,11 @@ export default {
         },
       }).catch(err => {})
     }
+  },
+  mounted: function() {
+    if (os.platform() == "darwin") {
+      this.computedPaddingTop = "25px";
+    }
   }
 }
 </script>
@@ -75,7 +82,7 @@ export default {
   top: 0;
   bottom: 20px;
   width: 70px;
-  padding-top: 25px;
+  padding-top: 15px;
   background: #252729;
   overflow: hidden;
   z-index: 1000;

src/renderer/components/PreferencesPage.vue

@@ -227,7 +227,6 @@ export default {
 <style lang="scss" scoped>
 #app > .main-view > .content {
   left: 70px;
-  right: 70px;
 }
 .lens-preferences {
   height: 100%;

src/renderer/components/common/ClosePageButton.vue

@@ -25,7 +25,7 @@ export default {
 div.close-page-button {
   position: absolute;
   top: 20px;
-  right: 10px;
+  right: 25px;
   z-index: 1100;
   a {
     position: relative;