Better scrollbars on non-Mac systems

resources/assets/js/app.vue

@@ -71,6 +71,14 @@
 
             // Create the element to be the ghost drag image.
             $('<div id="dragGhost"></div>').appendTo('body');
+
+            // Add an ugly mac/non-mac class for OS-targeting styles.
+            // I'm crying inside.
+            if (navigator.userAgent.indexOf('Mac') !== -1) {
+                $("html").addClass("mac");
+            } else {
+                $("html").addClass("non-mac");
+            }
         },
 
         methods: {

resources/assets/js/components/main-wrapper/extra/index.vue

@@ -93,8 +93,9 @@
         display: none;
         color: $color2ndText;
         overflow: auto;
+        -ms-overflow-style: -ms-autohiding-scrollbar;
 
-        &:hover, html.touchevents & {
+        html.touchevents & {
             // Enable scroll with momentum on touch devices
             overflow-y: scroll;
             -webkit-overflow-scrolling: touch;

resources/assets/js/components/main-wrapper/main-content/index.vue

@@ -85,9 +85,9 @@
                 padding: 24px;
                 overflow: auto;
                 flex: 1;
-                overflow-y: hidden;
+                -ms-overflow-style: -ms-autohiding-scrollbar;
 
-                &:hover, html.touchevents & {
+                html.touchevents & {
                     // Enable scroll with momentum on touch devices
                     overflow-y: scroll;
                     -webkit-overflow-scrolling: touch;
@@ -153,7 +153,6 @@
         }
 
 
-
         @media only screen
         and (max-device-width : 768px) {
             h1.heading {

resources/assets/js/components/main-wrapper/sidebar/index.vue

@@ -161,9 +161,9 @@
         padding: 22px 0 0;
         max-height: calc(100vh - #{$headerHeight + $footerHeight});
         overflow: auto;
-        overflow-y: hidden;
+        -ms-overflow-style: -ms-autohiding-scrollbar;
 
-        &:hover, html.touchevents & {
+        html.touchevents & {
             // Enable scroll with momentum on touch devices
             overflow-y: scroll;
             -webkit-overflow-scrolling: touch;

resources/assets/sass/app.scss

@@ -2,6 +2,7 @@
 
 @import "partials/_vars.scss";
 @import "partials/_mixins.scss";
+@import "partials/_hacks.scss";
 
 // Here we set some default variables to tweak plyr to our theme.
 $plyr-blue: $colorHighlight;

resources/assets/sass/partials/_hacks.scss

@@ -0,0 +1,51 @@
+/**
+ * ALL YOUR DIRTY UGLY HACKS ARE BELONG TO US.
+ */
+
+/**
+ * Make elements draggable in old WebKit
+ */
+[draggable] {
+  user-select: none;
+  -khtml-user-drag: element;
+  -webkit-user-drag: element;
+}
+
+/**
+ * Make webkit scrollbars a bit more good looking on non-mac systems.
+ */
+html.non-mac {
+    ::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+    }
+    ::-webkit-scrollbar-button {
+        width: 0px;
+        height: 0px;
+    }
+    ::-webkit-scrollbar-thumb {
+        background: $colorMainBgr;
+        border: 1px solid rgba(255, 255, 255, .2);
+        border-radius: 50px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background: #303030;
+    }
+    ::-webkit-scrollbar-thumb:active {
+        background: $colorMainBgr;
+    }
+    ::-webkit-scrollbar-track {
+        background: $colorMainBgr;
+        border: 0px none #ffffff;
+        border-radius: 50px;
+    }
+    ::-webkit-scrollbar-track:hover {
+        background: $colorMainBgr;
+    }
+    ::-webkit-scrollbar-track:active {
+        background: #333333;
+    }
+    ::-webkit-scrollbar-corner {
+        background: transparent;
+    }
+}

resources/assets/sass/partials/_shared.scss

@@ -8,8 +8,7 @@ body, html {
 }
 
 input, select, button, textarea, .btn {
-    -webkit-appearance: none;
+    appearance: none;
-    -moz-appearance: none;
     border: 0;
     outline: 0;
     font-family: $fontFamily;
@@ -226,13 +225,6 @@ button, input[type="submit"], input[type="reset"], input[type="button"], .btn {
     }
 }
 
-[draggable] {
-  user-select: none;
-  /* Required to make elements draggable in old WebKit */
-  -khtml-user-drag: element;
-  -webkit-user-drag: element;
-}
-
 .form-row {
     margin-top: 16px;
     position: relative;