jScrollbar.jquery.css 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. .clr {
  2. clear:both;
  3. height:0
  4. }
  5. /***************/
  6. /** EXEMPLE 1 **/
  7. /***************/
  8. .jScrollbar1{ /* main container */
  9. width:500px;
  10. height:209px;
  11. overflow:hidden;
  12. position:relative;
  13. border:1px solid #F0F0F0;
  14. background-color:#F8F8F8;
  15. padding:10px;
  16. }
  17. .jScrollbar1 .jScrollbar_mask { /* text container */
  18. width:450px;
  19. position:relative;
  20. top:0;
  21. }
  22. .jScrollbar1 .jScrollbar_mask p { /* paragraphs */
  23. margin:0;
  24. padding:0;
  25. color:#2B2B2B;
  26. font-size:12px;
  27. }
  28. .jScrollbar1 .jScrollbar_draggable { /* slider container */
  29. float:left;
  30. width:13px;
  31. height:209px;
  32. overflow:hidden;
  33. background:transparent;
  34. position:relative
  35. }
  36. .jScrollbar1 .jScrollbar_draggable a.draggable { /** draggable **/
  37. position:relative;
  38. background-color:#000;
  39. display:block;
  40. height:70px;
  41. width:13px;
  42. cursor:s-resize
  43. }
  44. /***************/
  45. /** EXEMPLE 2 **/
  46. /***************/
  47. .jScrollbar2 {
  48. width:500px;
  49. height:209px;
  50. overflow:hidden;
  51. position:relative;
  52. background-color:#3f6f7c;
  53. padding:10px
  54. }
  55. .jScrollbar2 .jScrollbar_mask {
  56. width:450px;
  57. position:relative;
  58. top:0;
  59. }
  60. .jScrollbar2 .jScrollbar_mask p {
  61. margin:0;
  62. padding:0;
  63. color:#FFF;
  64. font-size:12px;
  65. }
  66. .jScrollbar2 .jScrollbar_draggable {
  67. float:left;
  68. width:13px;
  69. height:209px;
  70. overflow:hidden;
  71. background:none;
  72. background-color:#8ea9b0;
  73. position:relative
  74. }
  75. .jScrollbar2 .jScrollbar_draggable a.draggable {
  76. position:relative;
  77. background-color:#0a5060;
  78. display:block;
  79. height:45px;
  80. width:13px;
  81. margin-left:0;
  82. cursor:s-resize
  83. }
  84. /***************/
  85. /** EXEMPLE 3 **/
  86. /***************/
  87. .jScrollbar3 {
  88. width:500px;
  89. height:209px;
  90. overflow:hidden;
  91. position:relative;
  92. background-color:#d6d6d6;
  93. padding:10px
  94. }
  95. .jScrollbar3 .jScrollbar_mask {
  96. width:450px;
  97. position:relative;
  98. top:0;
  99. }
  100. .jScrollbar3 .jScrollbar_mask p {
  101. margin:0;
  102. padding:0;
  103. color:#242424;
  104. font-size:12px;
  105. }
  106. .jScrollbar3 .jScrollbar_draggable {
  107. float:left;
  108. width:3px;
  109. height:209px;
  110. overflow:hidden;
  111. background:none;
  112. background-color:#FFF;
  113. position:relative
  114. }
  115. .jScrollbar3 .jScrollbar_draggable a.draggable {
  116. position:relative;
  117. background-color:#313131;
  118. display:block;
  119. height:44px;
  120. width:3px;
  121. cursor:s-resize
  122. }
  123. /***************/
  124. /** EXEMPLE 4 **/
  125. /***************/
  126. .jScrollbar4 {
  127. width:500px;
  128. height:209px;
  129. overflow:hidden;
  130. position:relative;
  131. background-color:#454547;
  132. padding:10px
  133. }
  134. .jScrollbar4 .jScrollbar_mask {
  135. width:460px;
  136. position:relative;
  137. top:0;
  138. }
  139. .jScrollbar4 .jScrollbar_mask p {
  140. margin:0;
  141. padding:0;
  142. color:#FFF;
  143. font-size:12px;
  144. }
  145. .jScrollbar4 .jScrollbar_draggable {
  146. float:left;
  147. width:13px;
  148. height:209px;
  149. overflow:hidden;
  150. background:none;
  151. background:transparent url('../images/bg_slider4.png') no-repeat;
  152. position:relative
  153. }
  154. .jScrollbar4 .jScrollbar_draggable a.draggable {
  155. position:relative;
  156. background:transparent url('../images/bg_draggable4.png') no-repeat;
  157. display:block;
  158. height:58px;
  159. width:13px;
  160. cursor:s-resize
  161. }
  162. /***************/
  163. /** EXEMPLE 5**/
  164. /***************/
  165. .jScrollbar5 {
  166. width:500px;
  167. height:209px;
  168. overflow:hidden;
  169. position:relative;
  170. background-color:#313131;
  171. padding:10px
  172. }
  173. .jScrollbar5 .jScrollbar_mask {
  174. width:460px;
  175. position:relative;
  176. top:0;
  177. }
  178. .jScrollbar5 .jScrollbar_mask p {
  179. margin:0;
  180. padding:0;
  181. color:#FFF;
  182. font-size:12px;
  183. }
  184. .jScrollbar5 .jScrollbar_draggable {
  185. float:left;
  186. width:12px;
  187. height:209px;
  188. overflow:hidden;
  189. background:none;
  190. background-color:#222222;
  191. border:1px solid #000;
  192. position:relative
  193. }
  194. .jScrollbar5 .jScrollbar_draggable a.draggable {
  195. position:relative;
  196. background:transparent url('../images/bg_draggable5.png') no-repeat;
  197. display:block;
  198. height:52px;
  199. width:12px;
  200. cursor:s-resize
  201. }