perfect-scrollbar.css 5.0 KB

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