ux: sass fixes and polish

public/sass/components/_scrollbar.scss

@@ -1,4 +1,53 @@
-@import "~perfect-scrollbar/css/perfect-scrollbar.css";
+/*
+ * Container style
+ */
+.ps {
+  overflow: hidden !important;
+  overflow-anchor: none;
+  -ms-overflow-style: none;
+  touch-action: auto;
+  -ms-touch-action: auto;
+}
+
+/*
+ * Scrollbar rail styles
+ */
+.ps__rail-x {
+  display: none;
+  opacity: 0;
+  transition: background-color .2s linear, opacity .2s linear;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  height: 15px;
+  /* there must be 'bottom' or 'top' for ps__rail-x */
+  bottom: 0px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps__rail-y {
+  display: none;
+  opacity: 0;
+  transition: background-color .2s linear, opacity .2s linear;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  width: 15px;
+  /* there must be 'right' or 'left' for ps__rail-y */
+  right: 0;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+.ps--active-x > .ps__rail-x,
+.ps--active-y > .ps__rail-y {
+  display: block;
+  background-color: transparent;
+}
+
+.ps--focus > .ps__rail-x,
+.ps--focus > .ps__rail-y,
+.ps--scrolling-x > .ps__rail-x,
+.ps--scrolling-y > .ps__rail-y {
+  opacity: 0.6;
+}
 
 .ps__rail-x:hover,
 .ps__rail-y:hover,
@@ -8,14 +57,51 @@
   opacity: 0.9;
 }
 
-.ps__thumb-y {
-  @include gradient-vertical($blue, lighten($blue, 20%));
+/*
+ * Scrollbar thumb styles
+ */
+.ps__thumb-x {
+  background-color: #aaa;
+  border-radius: 6px;
+  height: 6px;
+  /* there must be 'bottom' for ps__thumb-x */
+  bottom: 2px;
+  /* please don't change 'position' */
+  position: absolute;
 }
 
-.ps__rail-y:hover > .ps__thumb-y,
-.ps__rail-y:focus > .ps__thumb-y {
-  background-color: #999;
+.ps__thumb-y {
+  @include gradient-vertical($blue, lighten($blue, 20%));
+  border-radius: 6px;
   width: 6px;
+  /* there must be 'right' for ps__thumb-y */
+  right: 2px;
+  /* please don't change 'position' */
+  position: absolute;
+}
+
+
+/* MS supports */
+@supports (-ms-overflow-style: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .ps {
+    overflow: auto !important;
+  }
+}.ps:hover > .ps__rail-x,
+.ps:hover > .ps__rail-y {
+}
+
+.ps__rail-x:hover,
+.ps__rail-y:hover,
+.ps__rail-x:focus,
+.ps__rail-y:focus {
+  background-color: transparent;
+  opacity: 0.9;
 }
 
 // Srollbars

public/sass/components/_search.scss

@@ -59,16 +59,8 @@
   display: flex;
   flex-direction: column;
   max-width: 800px;
-  visibility: none;
-  opacity: 0;
   background: $page-bg;
   height: calc(100% - #{$navbarHeight});
-
-  &--fade-in {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.3s;
-  }
 }
 
 .search-results-container {