perfect-scrollbar.css 2.8 KB

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