library/perfect-scrollbar/perfect-scrollbar.css

   1 /* perfect-scrollbar v0.6.15 */
   2 .ps-container {
   3   -ms-touch-action: auto;
   4   touch-action: auto;
   5   overflow: hidden !important;
   6   -ms-overflow-style: none; }
   7   @supports (-ms-overflow-style: none) {
   8     .ps-container {
   9       overflow: auto !important; } }
  10   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  11     .ps-container {
  12       overflow: auto !important; } }
  13   .ps-container.ps-active-x > .ps-scrollbar-x-rail,
  14   .ps-container.ps-active-y > .ps-scrollbar-y-rail {
  15     display: block;
  16     background-color: transparent; }
  17   .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
  18     background-color: #eee;
  19     opacity: 0.9; }
  20     .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
  21       background-color: #999;
  22       height: 11px; }
  23   .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
  24     background-color: #eee;
  25     opacity: 0.9; }
  26     .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
  27       background-color: #999;
  28       width: 11px; }
  29   .ps-container > .ps-scrollbar-x-rail {
  30     display: none;
  31     position: absolute;
  32     /* please don't change 'position' */
  33     opacity: 0;
  34     -webkit-transition: background-color .2s linear, opacity .2s linear;
  35     -o-transition: background-color .2s linear, opacity .2s linear;
  36     -moz-transition: background-color .2s linear, opacity .2s linear;
  37     transition: background-color .2s linear, opacity .2s linear;
  38     bottom: 0px;
  39     /* there must be 'bottom' for ps-scrollbar-x-rail */
  40     height: 15px; }
  41     .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
  42       position: absolute;
  43       /* please don't change 'position' */
  44       background-color: #aaa;
  45       -webkit-border-radius: 6px;
  46       -moz-border-radius: 6px;
  47       border-radius: 6px;
  48       -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
  49       transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
  50       -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
  51       -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
  52       transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
  53       transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
  54       bottom: 2px;
  55       /* there must be 'bottom' for ps-scrollbar-x */
  56       height: 6px; }
  57     .ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
  58       height: 11px; }
  59   .ps-container > .ps-scrollbar-y-rail {
  60     display: none;
  61     position: absolute;
  62     /* please don't change 'position' */
  63     opacity: 0;
  64     -webkit-transition: background-color .2s linear, opacity .2s linear;
  65     -o-transition: background-color .2s linear, opacity .2s linear;
  66     -moz-transition: background-color .2s linear, opacity .2s linear;
  67     transition: background-color .2s linear, opacity .2s linear;
  68     right: 0;
  69     /* there must be 'right' for ps-scrollbar-y-rail */
  70     width: 15px; }
  71     .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
  72       position: absolute;
  73       /* please don't change 'position' */
  74       background-color: #aaa;
  75       -webkit-border-radius: 6px;
  76       -moz-border-radius: 6px;
  77       border-radius: 6px;
  78       -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
  79       transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
  80       -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
  81       -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
  82       transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
  83       transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
  84       right: 2px;
  85       /* there must be 'right' for ps-scrollbar-y */
  86       width: 6px; }
  87     .ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
  88       width: 11px; }
  89   .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
  90     background-color: #eee;
  91     opacity: 0.9; }
  92     .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
  93       background-color: #999;
  94       height: 11px; }
  95   .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
  96     background-color: #eee;
  97     opacity: 0.9; }
  98     .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
  99       background-color: #999;
 100       width: 11px; }
 101   .ps-container:hover > .ps-scrollbar-x-rail,
 102   .ps-container:hover > .ps-scrollbar-y-rail {
 103     opacity: 0.6; }
 104   .ps-container:hover > .ps-scrollbar-x-rail:hover {
 105     background-color: #eee;
 106     opacity: 0.9; }
 107     .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
 108       background-color: #999; }
 109   .ps-container:hover > .ps-scrollbar-y-rail:hover {
 110     background-color: #eee;
 111     opacity: 0.9; }
 112     .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
 113       background-color: #999; }