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 * Container style
*/ */
.ps { .ps {
overflow: hidden !important; overflow: hidden !important;
overflow-anchor: none; overflow-anchor: none;
-ms-overflow-style: none; -ms-overflow-style: none;
@ -15,8 +15,8 @@
.ps__rail-x { .ps__rail-x {
display: none; display: none;
opacity: 0; opacity: 0;
transition: background-color 0.2s linear, opacity 0.2s linear; transition: background-color .2s linear, opacity .2s linear;
-webkit-transition: background-color 0.2s linear, opacity 0.2s linear; -webkit-transition: background-color .2s linear, opacity .2s linear;
height: 15px; height: 15px;
/* there must be 'bottom' or 'top' for ps__rail-x */ /* there must be 'bottom' or 'top' for ps__rail-x */
bottom: 0px; bottom: 0px;
@ -27,8 +27,8 @@
.ps__rail-y { .ps__rail-y {
display: none; display: none;
opacity: 0; opacity: 0;
transition: background-color 0.2s linear, opacity 0.2s linear; transition: background-color .2s linear, opacity .2s linear;
-webkit-transition: background-color 0.2s linear, opacity 0.2s linear; -webkit-transition: background-color .2s linear, opacity .2s linear;
width: 15px; width: 15px;
/* there must be 'right' or 'left' for ps__rail-y */ /* there must be 'right' or 'left' for ps__rail-y */
right: 0; right: 0;
@ -57,8 +57,7 @@
.ps .ps__rail-y:focus, .ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking, .ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking { .ps .ps__rail-y.ps--clicking {
/* background-color: #eee; */ background-color: #eee;
background-color: var(--bs-tertiary-bg); /* Custom Change */
opacity: 0.9; opacity: 0.9;
} }
@ -68,8 +67,8 @@
.ps__thumb-x { .ps__thumb-x {
background-color: #aaa; background-color: #aaa;
border-radius: 6px; border-radius: 6px;
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 0.2s linear, height 0.2s ease-in-out; -webkit-transition: background-color .2s linear, height .2s ease-in-out;
height: 6px; height: 6px;
/* there must be 'bottom' for ps__thumb-x */ /* there must be 'bottom' for ps__thumb-x */
bottom: 2px; bottom: 2px;
@ -80,8 +79,8 @@
.ps__thumb-y { .ps__thumb-y {
background-color: #aaa; background-color: #aaa;
border-radius: 6px; border-radius: 6px;
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 0.2s linear, width 0.2s ease-in-out; -webkit-transition: background-color .2s linear, width .2s ease-in-out;
width: 6px; width: 6px;
/* there must be 'right' for ps__thumb-y */ /* there must be 'right' for ps__thumb-y */
right: 2px; right: 2px;
@ -100,7 +99,6 @@
.ps__rail-y:focus > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y { .ps__rail-y.ps--clicking .ps__thumb-y {
background-color: #999; background-color: #999;
/* background-color: var(--bs-body); */
width: 11px; width: 11px;
} }
@ -110,8 +108,9 @@
overflow: auto !important; overflow: auto !important;
} }
} }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ps { .ps {
overflow: auto !important; 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/select2.min.js' %}"></script>
<script src="{% static '/js/perfectscrollbar.js' %}"></script>
<script src="{% static '/js/index.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/datepicker.css' %}" />
<link type="text/css" rel="stylesheet" href="{% static '/css/fontawesome.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/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/adminator.css' %}" />
<link type="text/css" rel="stylesheet" href="{% static '/css/jquery.dataTables.min.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' %}" /> <link type="text/css" rel="stylesheet" href="{% static '/css/select2.min.css' %}" />