perfect-scrollbar.css

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