You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

112 lines
2.4 KiB

4 years ago
  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: 15px;
  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: 15px;
  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. background-color: transparent;
  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.6;
  48. }
  49. .ps__rail-x:hover,
  50. .ps__rail-y:hover,
  51. .ps__rail-x:focus,
  52. .ps__rail-y:focus {
  53. background-color: #eee;
  54. opacity: 0.9;
  55. }
  56. /*
  57. * Scrollbar thumb styles
  58. */
  59. .ps__thumb-x {
  60. background-color: #aaa;
  61. border-radius: 6px;
  62. transition: background-color .2s linear, height .2s ease-in-out;
  63. -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  64. height: 6px;
  65. /* there must be 'bottom' for ps__thumb-x */
  66. bottom: 2px;
  67. /* please don't change 'position' */
  68. position: absolute;
  69. }
  70. .ps__thumb-y {
  71. background-color: #aaa;
  72. border-radius: 6px;
  73. transition: background-color .2s linear, width .2s ease-in-out;
  74. -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  75. width: 6px;
  76. /* there must be 'right' for ps__thumb-y */
  77. right: 2px;
  78. /* please don't change 'position' */
  79. position: absolute;
  80. }
  81. .ps__rail-x:hover > .ps__thumb-x,
  82. .ps__rail-x:focus > .ps__thumb-x {
  83. background-color: #999;
  84. height: 11px;
  85. }
  86. .ps__rail-y:hover > .ps__thumb-y,
  87. .ps__rail-y:focus > .ps__thumb-y {
  88. background-color: #999;
  89. width: 11px;
  90. }
  91. /* MS supports */
  92. @supports (-ms-overflow-style: none) {
  93. .ps {
  94. overflow: auto !important;
  95. }
  96. }
  97. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  98. .ps {
  99. overflow: auto !important;
  100. }
  101. }