/* * Container style */ .ps { overflow: hidden !important; -ms-touch-action: auto; touch-action: auto; overflow-anchor: none; -ms-overflow-style: none; } /* * Scrollbar rail styles */ .ps__rail-x { /* please don't change 'position' */ position: absolute; /* there must be 'bottom' or 'top' for ps__rail-x */ bottom: 0; display: none; height: 15px; opacity: 0; -webkit-transition: background-color .2s linear, opacity .2s linear; transition: background-color .2s linear, opacity .2s linear; } .ps__rail-y { /* please don't change 'position' */ position: absolute; /* there must be 'right' or 'left' for ps__rail-y */ right: 0; display: none; width: 15px; opacity: 0; -webkit-transition: background-color .2s linear, opacity .2s linear; transition: background-color .2s linear, opacity .2s linear; } .ps--active-x > .ps__rail-x, .ps--active-y > .ps__rail-y { display: block; background-color: transparent; } .ps:hover > .ps__rail-x, .ps:hover > .ps__rail-y, .ps--focus > .ps__rail-x, .ps--focus > .ps__rail-y, .ps--scrolling-x > .ps__rail-x, .ps--scrolling-y > .ps__rail-y { opacity: .6; } .ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking { background-color: #eee; opacity: .9; } /* * Scrollbar thumb styles */ .ps__thumb-x { /* please don't change 'position' */ position: absolute; /* there must be 'bottom' for ps__thumb-x */ bottom: 2px; height: 6px; background-color: #aaa; border-radius: 6px; -webkit-transition: background-color .2s linear, height .2s ease-in-out; transition: background-color .2s linear, height .2s ease-in-out; } .ps__thumb-y { /* please don't change 'position' */ position: absolute; /* there must be 'right' for ps__thumb-y */ right: 2px; width: 6px; background-color: #aaa; border-radius: 6px; -webkit-transition: background-color .2s linear, width .2s ease-in-out; transition: background-color .2s linear, width .2s ease-in-out; } .ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x { height: 11px; background-color: #999; } .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y { width: 11px; background-color: #999; } /* 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; } } // fix scroll in our SideNav .ps__rail-y{ top: 0 !important; }