variant: set color for perfect scrollbar #471

static/css/perfect-scrollbar.min.css

@@ -1 +1 @@
-.ps{overflow:hidden!important;overflow-anchor:none;-ms-overflow-style:none;touch-action:auto;-ms-touch-action:auto}.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;bottom:0;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;right:0;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,.ps:hover>.ps__rail-x,.ps:hover>.ps__rail-y{opacity:.6}.ps .ps__rail-x.ps--clicking,.ps .ps__rail-x:focus,.ps .ps__rail-x:hover,.ps .ps__rail-y.ps--clicking,.ps .ps__rail-y:focus,.ps .ps__rail-y:hover{background-color:#eee;opacity:.9}.ps__thumb-x{background-color:#aaa;border-radius:6px;transition:background-color .2s linear,height .2s ease-in-out;-webkit-transition:background-color .2s linear,height .2s ease-in-out;height:6px;bottom:2px;position:absolute}.ps__thumb-y{background-color:#aaa;border-radius:6px;transition:background-color .2s linear,width .2s ease-in-out;-webkit-transition:background-color .2s linear,width .2s ease-in-out;width:6px;right:2px;position:absolute}.ps__rail-x.ps--clicking .ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x,.ps__rail-x:hover>.ps__thumb-x{background-color:#999;height:11px}.ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y:hover>.ps__thumb-y{background-color:#999;width:11px}@supports (-ms-overflow-style:none){.ps{overflow:auto!important}}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.ps{overflow:auto!important}}
+:root{--ps-thumb-color:#aaa;--ps-thumb-hover-color:#999;--ps-rail-hover-color:#eee}.ps{overflow:hidden !important;overflow-anchor:none;-ms-overflow-style:none;touch-action:auto;-ms-touch-action:auto}.ps__rail-x{display:none;opacity:0;transition:background-color 0.2s linear, opacity 0.2s linear;-webkit-transition:background-color 0.2s linear, opacity 0.2s linear;height:15px;bottom:0;position:absolute}.ps__rail-y{display:none;opacity:0;transition:background-color 0.2s linear, opacity 0.2s linear;-webkit-transition:background-color 0.2s linear, opacity 0.2s linear;width:15px;right:0;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,.ps:hover > .ps__rail-x,.ps:hover > .ps__rail-y{opacity:0.6}.ps .ps__rail-x.ps--clicking,.ps .ps__rail-x:focus,.ps .ps__rail-x:hover,.ps .ps__rail-y.ps--clicking,.ps .ps__rail-y:focus,.ps .ps__rail-y:hover{background-color:#eee;background-color:var(--ps-rail-hover-color);opacity:0.9}.ps__thumb-x{background-color:#aaa;background-color:var(--ps-thumb-color);border-radius:6px;transition:background-color 0.2s linear, height 0.2s ease-in-out;-webkit-transition:background-color 0.2s linear, height 0.2s ease-in-out;height:6px;bottom:2px;position:absolute}.ps__thumb-y{background-color:#aaa;background-color:var(--ps-thumb-color);border-radius:6px;transition:background-color 0.2s linear, width 0.2s ease-in-out;-webkit-transition:background-color 0.2s linear, width 0.2s ease-in-out;width:6px;right:2px;position:absolute}.ps__rail-x.ps--clicking .ps__thumb-x,.ps__rail-x:focus > .ps__thumb-x,.ps__rail-x:hover > .ps__thumb-x{background-color:#999;background-color:var(--ps-thumb-hover-color);height:11px}.ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus > .ps__thumb-y,.ps__rail-y:hover > .ps__thumb-y{background-color:#999;background-color:var(--ps-thumb-hover-color);width:11px}@supports (-ms-overflow-style: none){.ps{overflow:auto !important}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.ps{overflow:auto !important}}

static/css/theme-neon.css

@@ -309,4 +309,9 @@ above will not apply, so we have to repeat it here */
     text-shadow: none;
 }
 
+#content-wrapper {
+    --ps-thumb-color: #d0d0d0;
+    --ps-thumb-hover-color: #ccc;
+}
+
 }

static/css/theme.css

@@ -136,6 +136,7 @@ dd {
 }
 
 #content-wrapper {
+    --ps-rail-hover-color: rgba( 176, 176, 176, .25 );
     display: flex;
     flex-direction: column;
     flex: 1; /* fill rest of vertical space */
@@ -1270,6 +1271,7 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 }
 
 #TableOfContents {
+    --ps-rail-hover-color: rgba( 176, 176, 176, .25 );
     font-size: .8125rem !important;
     max-height: 90vh;
     overflow: hidden;
@@ -1770,7 +1772,3 @@ article ul li input[type="checkbox"]:checked::before {
     overflow: auto;
     padding: min(2vh, 2vw);
 }
-
-#TableOfContents{
-    min-width: 1px;
-}