perfect-scrollbar.css 2.7 KB

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