Improve content scrollbar on webkit

assets/stylesheets/components/_content.scss

@@ -8,6 +8,7 @@
   height: 100%;
   margin-left: $sidebarWidth;
   pointer-events: none;
+  -webkit-margin-end: -1px;
   @extend %border-box;
 
   @media #{$mediumScreen} { margin-left: $sidebarMediumWidth; }
@@ -40,16 +41,29 @@
   }
 
   &::-webkit-scrollbar { -webkit-appearance: none; }
-  &::-webkit-scrollbar:vertical { width: 14px; }
+  &::-webkit-scrollbar:vertical { width: 16px; }
-  &::-webkit-scrollbar:horizontal { height: 14px }
+  &::-webkit-scrollbar:horizontal { height: 16px; }
-  &::-webkit-scrollbar-button { display: none; }
+  &::-webkit-scrollbar-button,
-  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner { display: none; }
-  &::-webkit-scrollbar-corner { background: $contentBackground; }
+  &::-webkit-scrollbar-track {
+    background: $contentBackground;
+    border: 1px solid $contentBackground;
+
+    &:hover {
+      background: $sidebarBackground;
+      border-color: $sidebarBorder;
+    }
+
+    &:vertical { border-width: 0 0 0 1px; }
+    &:vertical:corner-present { border-width: 0 0 1px 1px; border-radius: 0 0 0 2px; }
+    &:horizontal { border-width: 1px 1px 0 1px; border-radius: 2px 2px 0 0; }
+  }
+
   &::-webkit-scrollbar-thumb {
     min-height: 2rem;
     background: $scrollbarColor;
     background-clip: padding-box;
-    border: 5px solid $contentBackground;
+    border: 5px solid rgba(black, 0);
     border-radius: 10px;
 
     &:hover,

assets/stylesheets/global/_variables.scss

@@ -43,8 +43,8 @@ $headerBorder: #d7d7d7;
 $sidebarBackground: #f9f9f9;
 $sidebarBorder: #e1e1e1;
 
-$scrollbarColor: #d2d2d2;
+$scrollbarColor: #ccc;
-$scrollbarColorHover: #aaa;
+$scrollbarColorHover: #999;
 
 $pathBackground: $sidebarBackground;
 $pathBorder: $sidebarBorder;