perfect-scrollbar.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. .ps {
  2. overflow: hidden!important;
  3. overflow-anchor: none;
  4. -ms-overflow-style: none;
  5. touch-action: auto;
  6. -ms-touch-action: auto
  7. }
  8. .ps__rail-x {
  9. display: none;
  10. opacity: 0;
  11. transition: background-color .2s linear, opacity .2s linear;
  12. -webkit-transition: background-color .2s linear, opacity .2s linear;
  13. height: 15px;
  14. bottom: 0;
  15. position: absolute
  16. }
  17. .ps__rail-y {
  18. display: none;
  19. opacity: 0;
  20. transition: background-color .2s linear, opacity .2s linear;
  21. -webkit-transition: background-color .2s linear, opacity .2s linear;
  22. width: 15px;
  23. right: 0;
  24. position: absolute
  25. }
  26. .ps--active-x>.ps__rail-x, .ps--active-y>.ps__rail-y {
  27. display: block;
  28. background-color: transparent
  29. }
  30. .ps--focus>.ps__rail-x, .ps--focus>.ps__rail-y, .ps--scrolling-x>.ps__rail-x, .ps--scrolling-y>.ps__rail-y, .ps:hover>.ps__rail-x, .ps:hover>.ps__rail-y {
  31. opacity: .6
  32. }
  33. .ps .ps__rail-x.ps--clicking, .ps .ps__rail-x:focus, .ps .ps__rail-x:hover, .ps .ps__rail-y.ps--clicking, .ps .ps__rail-y:focus, .ps .ps__rail-y:hover {
  34. background-color: #eee;
  35. opacity: .9
  36. }
  37. .ps__thumb-x {
  38. background-color: #aaa;
  39. border-radius: 6px;
  40. transition: background-color .2s linear, height .2s ease-in-out;
  41. -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  42. height: 5px;
  43. bottom: 2px;
  44. position: absolute
  45. }
  46. .ps__thumb-y {
  47. background-color: #aaa;
  48. border-radius: 6px;
  49. transition: background-color .2s linear, width .2s ease-in-out;
  50. -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  51. width: 5px;
  52. right: 2px;
  53. position: absolute
  54. }
  55. .ps__rail-x.ps--clicking .ps__thumb-x, .ps__rail-x:focus>.ps__thumb-x, .ps__rail-x:hover>.ps__thumb-x {
  56. background-color: #999;
  57. height: 11px
  58. }
  59. .ps__rail-y.ps--clicking .ps__thumb-y, .ps__rail-y:focus>.ps__thumb-y, .ps__rail-y:hover>.ps__thumb-y {
  60. background-color: #999;
  61. width: 11px
  62. }
  63. @supports (-ms-overflow-style:none) {
  64. .ps {
  65. overflow: auto!important
  66. }
  67. }
  68. @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
  69. .ps {
  70. overflow: auto!important
  71. }
  72. }