Updated & Isolated PerfectScrollbar JS/CSS

This commit is contained in:
Corban-Lee Jones 2024-01-22 11:14:53 +00:00
parent 368cdc6359
commit 4761db6541
5 changed files with 54 additions and 1301 deletions

View File

@ -1,7 +1,7 @@
*
/*
* Container style
*/
.ps {
.ps {
overflow: hidden !important;
overflow-anchor: none;
-ms-overflow-style: none;
@ -15,8 +15,8 @@
.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;
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;
@ -27,8 +27,8 @@
.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;
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;
@ -57,8 +57,7 @@
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
/* background-color: #eee; */
background-color: var(--bs-tertiary-bg); /* Custom Change */
background-color: #eee;
opacity: 0.9;
}
@ -68,8 +67,8 @@
.ps__thumb-x {
background-color: #aaa;
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;
transition: background-color .2s linear, height .2s ease-in-out;
-webkit-transition: background-color .2s linear, height .2s ease-in-out;
height: 6px;
/* there must be 'bottom' for ps__thumb-x */
bottom: 2px;
@ -80,8 +79,8 @@
.ps__thumb-y {
background-color: #aaa;
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;
transition: background-color .2s linear, width .2s ease-in-out;
-webkit-transition: background-color .2s linear, width .2s ease-in-out;
width: 6px;
/* there must be 'right' for ps__thumb-y */
right: 2px;
@ -100,7 +99,6 @@
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
background-color: #999;
/* background-color: var(--bs-body); */
width: 11px;
}
@ -110,8 +108,9 @@
overflow: auto !important;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ps {
overflow: auto !important;
}
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -8,4 +8,6 @@
<script src="{% static '/js/select2.min.js' %}"></script>
<script src="{% static '/js/perfectscrollbar.js' %}"></script>
<script src="{% static '/js/index.js' %}"></script>

View File

@ -14,7 +14,7 @@
<link type="text/css" rel="stylesheet" href="{% static '/css/datepicker.css' %}" />
<link type="text/css" rel="stylesheet" href="{% static '/css/fontawesome.css' %}" />
<link type="text/css" rel="stylesheet" href="{% static '/css/themify-icons.css' %}" />
<link type="text/css" rel="stylesheet" href="{% static '/css/scrollbar.css' %}" />
<link type="text/css" rel="stylesheet" href="{% static '/css/perfectscrollbar.css' %}" />
<link type="text/css" rel="stylesheet" href="{% static '/css/adminator.css' %}" />
<link type="text/css" rel="stylesheet" href="{% static '/css/jquery.dataTables.min.css' %}" />
<link type="text/css" rel="stylesheet" href="{% static '/css/select2.min.css' %}" />