variant: set color for perfect scrollbar #471

This commit is contained in:
Sören Weber 2023-02-10 17:03:18 +01:00
parent 8e4b7cddc5
commit 0cc5ff2db6
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
4 changed files with 10 additions and 7 deletions

View file

@ -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}}

View file

@ -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;
}
}

View file

@ -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;
}

File diff suppressed because one or more lines are too long