jquery.mCustomScrollbar.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474
  1. /* basic scrollbar styling */
  2. /* vertical scrollbar */
  3. .mCSB_container{
  4. width:auto;
  5. margin-right:30px;
  6. overflow:hidden;
  7. }
  8. .mCSB_container.mCS_no_scrollbar{
  9. margin-right:0;
  10. }
  11. .mCS_disabled>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar,
  12. .mCS_destroyed>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar{
  13. margin-right:30px;
  14. }
  15. .mCustomScrollBox>.mCSB_scrollTools{
  16. width:16px;
  17. height:100%;
  18. top:0;
  19. right:0;
  20. }
  21. .mCSB_scrollTools .mCSB_draggerContainer{
  22. position:absolute;
  23. top:0;
  24. left:0;
  25. bottom:0;
  26. right:0;
  27. height:auto;
  28. }
  29. .mCSB_scrollTools a+.mCSB_draggerContainer{
  30. margin:20px 0;
  31. }
  32. .mCSB_scrollTools .mCSB_draggerRail{
  33. width:2px;
  34. height:100%;
  35. margin:0 auto;
  36. -webkit-border-radius:10px;
  37. -moz-border-radius:10px;
  38. border-radius:10px;
  39. }
  40. .mCSB_scrollTools .mCSB_dragger{
  41. cursor:pointer;
  42. width:100%;
  43. height:30px;
  44. }
  45. .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  46. width:4px;
  47. height:100%;
  48. margin:0 auto;
  49. -webkit-border-radius:10px;
  50. -moz-border-radius:10px;
  51. border-radius:10px;
  52. text-align:center;
  53. }
  54. .mCSB_scrollTools .mCSB_buttonUp,
  55. .mCSB_scrollTools .mCSB_buttonDown{
  56. display:block;
  57. position:relative;
  58. height:20px;
  59. overflow:hidden;
  60. margin:0 auto;
  61. cursor:pointer;
  62. }
  63. .mCSB_scrollTools .mCSB_buttonDown{
  64. top:100%;
  65. margin-top:-40px;
  66. }
  67. /* horizontal scrollbar */
  68. .mCSB_horizontal>.mCSB_container{
  69. height:auto;
  70. margin-right:0;
  71. margin-bottom:30px;
  72. overflow:hidden;
  73. }
  74. .mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
  75. margin-bottom:0;
  76. }
  77. .mCS_disabled>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar,
  78. .mCS_destroyed>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
  79. margin-right:0;
  80. margin-bottom:30px;
  81. }
  82. .mCSB_horizontal.mCustomScrollBox>.mCSB_scrollTools{
  83. width:100%;
  84. height:16px;
  85. top:auto;
  86. right:auto;
  87. bottom:0;
  88. left:0;
  89. overflow:hidden;
  90. }
  91. .mCSB_horizontal>.mCSB_scrollTools a+.mCSB_draggerContainer{
  92. margin:0 20px;
  93. }
  94. .mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
  95. width:100%;
  96. height:2px;
  97. margin:7px 0;
  98. -webkit-border-radius:10px;
  99. -moz-border-radius:10px;
  100. border-radius:10px;
  101. }
  102. .mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger{
  103. width:30px;
  104. height:100%;
  105. }
  106. .mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  107. width:100%;
  108. height:4px;
  109. margin:6px auto;
  110. -webkit-border-radius:10px;
  111. -moz-border-radius:10px;
  112. border-radius:10px;
  113. }
  114. .mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonLeft,
  115. .mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
  116. display:block;
  117. position:relative;
  118. width:20px;
  119. height:100%;
  120. overflow:hidden;
  121. margin:0 auto;
  122. cursor:pointer;
  123. float:left;
  124. }
  125. .mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
  126. margin-left:-40px;
  127. float:right;
  128. }
  129. .mCustomScrollBox{
  130. -ms-touch-action:none; /*MSPointer events - direct all pointer events to js*/
  131. }
  132. /* default scrollbar colors and backgrounds (default theme) */
  133. .mCustomScrollBox>.mCSB_scrollTools{
  134. opacity:0.75;
  135. filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
  136. }
  137. .mCustomScrollBox:hover>.mCSB_scrollTools{
  138. opacity:1;
  139. filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; /* old ie */
  140. }
  141. .mCSB_scrollTools .mCSB_draggerRail{
  142. background:#000; /* rgba fallback */
  143. background:rgba(0,0,0,0.4);
  144. filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
  145. }
  146. .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  147. background:#fff; /* rgba fallback */
  148. background:rgba(255,255,255,0.75);
  149. filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
  150. }
  151. .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
  152. background:rgba(255,255,255,0.85);
  153. filter:"alpha(opacity=85)"; -ms-filter:"alpha(opacity=85)"; /* old ie */
  154. }
  155. .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  156. .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
  157. background:rgba(255,255,255,0.9);
  158. filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
  159. }
  160. .mCSB_scrollTools .mCSB_buttonUp,
  161. .mCSB_scrollTools .mCSB_buttonDown,
  162. .mCSB_scrollTools .mCSB_buttonLeft,
  163. .mCSB_scrollTools .mCSB_buttonRight{
  164. background-image:url(mCSB_buttons.png);
  165. background-repeat:no-repeat;
  166. opacity:0.4;
  167. filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
  168. }
  169. .mCSB_scrollTools .mCSB_buttonUp{
  170. background-position:0 0;
  171. /*
  172. sprites locations are 0 0/-16px 0/-32px 0/-48px 0 (light) and -80px 0/-96px 0/-112px 0/-128px 0 (dark)
  173. */
  174. }
  175. .mCSB_scrollTools .mCSB_buttonDown{
  176. background-position:0 -20px;
  177. /*
  178. sprites locations are 0 -20px/-16px -20px/-32px -20px/-48px -20px (light) and -80px -20px/-96px -20px/-112px -20px/-128px -20px (dark)
  179. */
  180. }
  181. .mCSB_scrollTools .mCSB_buttonLeft{
  182. background-position:0 -40px;
  183. /*
  184. sprites locations are 0 -40px/-20px -40px/-40px -40px/-60px -40px (light) and -80px -40px/-100px -40px/-120px -40px/-140px -40px (dark)
  185. */
  186. }
  187. .mCSB_scrollTools .mCSB_buttonRight{
  188. background-position:0 -56px;
  189. /*
  190. sprites locations are 0 -56px/-20px -56px/-40px -56px/-60px -56px (light) and -80px -56px/-100px -56px/-120px -56px/-140px -56px (dark)
  191. */
  192. }
  193. .mCSB_scrollTools .mCSB_buttonUp:hover,
  194. .mCSB_scrollTools .mCSB_buttonDown:hover,
  195. .mCSB_scrollTools .mCSB_buttonLeft:hover,
  196. .mCSB_scrollTools .mCSB_buttonRight:hover{
  197. opacity:0.75;
  198. filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
  199. }
  200. .mCSB_scrollTools .mCSB_buttonUp:active,
  201. .mCSB_scrollTools .mCSB_buttonDown:active,
  202. .mCSB_scrollTools .mCSB_buttonLeft:active,
  203. .mCSB_scrollTools .mCSB_buttonRight:active{
  204. opacity:0.9;
  205. filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
  206. }
  207. /*scrollbar themes*/
  208. /*dark (dark colored scrollbar)*/
  209. .mCS-dark>.mCSB_scrollTools .mCSB_draggerRail{
  210. background:#000; /* rgba fallback */
  211. background:rgba(0,0,0,0.15);
  212. }
  213. .mCS-dark>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  214. background:#000; /* rgba fallback */
  215. background:rgba(0,0,0,0.75);
  216. }
  217. .mCS-dark>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
  218. background:rgba(0,0,0,0.85);
  219. }
  220. .mCS-dark>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  221. .mCS-dark>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
  222. background:rgba(0,0,0,0.9);
  223. }
  224. .mCS-dark>.mCSB_scrollTools .mCSB_buttonUp{
  225. background-position:-80px 0;
  226. }
  227. .mCS-dark>.mCSB_scrollTools .mCSB_buttonDown{
  228. background-position:-80px -20px;
  229. }
  230. .mCS-dark>.mCSB_scrollTools .mCSB_buttonLeft{
  231. background-position:-80px -40px;
  232. }
  233. .mCS-dark>.mCSB_scrollTools .mCSB_buttonRight{
  234. background-position:-80px -56px;
  235. }
  236. /*light-2*/
  237. .mCS-light-2>.mCSB_scrollTools .mCSB_draggerRail{
  238. width:4px;
  239. background:#fff; /* rgba fallback */
  240. background:rgba(255,255,255,0.1);
  241. -webkit-border-radius:1px;
  242. -moz-border-radius:1px;
  243. border-radius:1px;
  244. }
  245. .mCS-light-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  246. width:4px;
  247. background:#fff; /* rgba fallback */
  248. background:rgba(255,255,255,0.75);
  249. -webkit-border-radius:1px;
  250. -moz-border-radius:1px;
  251. border-radius:1px;
  252. }
  253. .mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
  254. width:100%;
  255. height:4px;
  256. margin:6px 0;
  257. }
  258. .mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  259. width:100%;
  260. height:4px;
  261. margin:6px auto;
  262. }
  263. .mCS-light-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
  264. background:rgba(255,255,255,0.85);
  265. }
  266. .mCS-light-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  267. .mCS-light-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
  268. background:rgba(255,255,255,0.9);
  269. }
  270. .mCS-light-2>.mCSB_scrollTools .mCSB_buttonUp{
  271. background-position:-32px 0;
  272. }
  273. .mCS-light-2>.mCSB_scrollTools .mCSB_buttonDown{
  274. background-position:-32px -20px;
  275. }
  276. .mCS-light-2>.mCSB_scrollTools .mCSB_buttonLeft{
  277. background-position:-40px -40px;
  278. }
  279. .mCS-light-2>.mCSB_scrollTools .mCSB_buttonRight{
  280. background-position:-40px -56px;
  281. }
  282. /*dark-2*/
  283. .mCS-dark-2>.mCSB_scrollTools .mCSB_draggerRail{
  284. width:4px;
  285. background:#000; /* rgba fallback */
  286. background:rgba(0,0,0,0.1);
  287. -webkit-border-radius:1px;
  288. -moz-border-radius:1px;
  289. border-radius:1px;
  290. }
  291. .mCS-dark-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  292. width:4px;
  293. background:#000; /* rgba fallback */
  294. background:rgba(0,0,0,0.75);
  295. -webkit-border-radius:1px;
  296. -moz-border-radius:1px;
  297. border-radius:1px;
  298. }
  299. .mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
  300. width:100%;
  301. height:4px;
  302. margin:6px 0;
  303. }
  304. .mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  305. width:100%;
  306. height:4px;
  307. margin:6px auto;
  308. }
  309. .mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
  310. background:rgba(0,0,0,0.85);
  311. }
  312. .mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  313. .mCS-dark-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
  314. background:rgba(0,0,0,0.9);
  315. }
  316. .mCS-dark-2>.mCSB_scrollTools .mCSB_buttonUp{
  317. background-position:-112px 0;
  318. }
  319. .mCS-dark-2>.mCSB_scrollTools .mCSB_buttonDown{
  320. background-position:-112px -20px;
  321. }
  322. .mCS-dark-2>.mCSB_scrollTools .mCSB_buttonLeft{
  323. background-position:-120px -40px;
  324. }
  325. .mCS-dark-2>.mCSB_scrollTools .mCSB_buttonRight{
  326. background-position:-120px -56px;
  327. }
  328. /*light-thick*/
  329. .mCS-light-thick>.mCSB_scrollTools .mCSB_draggerRail{
  330. width:4px;
  331. background:#fff; /* rgba fallback */
  332. background:rgba(255,255,255,0.1);
  333. -webkit-border-radius:2px;
  334. -moz-border-radius:2px;
  335. border-radius:2px;
  336. }
  337. .mCS-light-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  338. width:6px;
  339. background:#fff; /* rgba fallback */
  340. background:rgba(255,255,255,0.75);
  341. -webkit-border-radius:2px;
  342. -moz-border-radius:2px;
  343. border-radius:2px;
  344. }
  345. .mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
  346. width:100%;
  347. height:4px;
  348. margin:6px 0;
  349. }
  350. .mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  351. width:100%;
  352. height:6px;
  353. margin:5px auto;
  354. }
  355. .mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
  356. background:rgba(255,255,255,0.85);
  357. }
  358. .mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  359. .mCS-light-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
  360. background:rgba(255,255,255,0.9);
  361. }
  362. .mCS-light-thick>.mCSB_scrollTools .mCSB_buttonUp{
  363. background-position:-16px 0;
  364. }
  365. .mCS-light-thick>.mCSB_scrollTools .mCSB_buttonDown{
  366. background-position:-16px -20px;
  367. }
  368. .mCS-light-thick>.mCSB_scrollTools .mCSB_buttonLeft{
  369. background-position:-20px -40px;
  370. }
  371. .mCS-light-thick>.mCSB_scrollTools .mCSB_buttonRight{
  372. background-position:-20px -56px;
  373. }
  374. /*dark-thick*/
  375. .mCS-dark-thick>.mCSB_scrollTools .mCSB_draggerRail{
  376. width:4px;
  377. background:#000; /* rgba fallback */
  378. background:rgba(0,0,0,0.1);
  379. -webkit-border-radius:2px;
  380. -moz-border-radius:2px;
  381. border-radius:2px;
  382. }
  383. .mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  384. width:6px;
  385. background:#000; /* rgba fallback */
  386. background:rgba(0,0,0,0.75);
  387. -webkit-border-radius:2px;
  388. -moz-border-radius:2px;
  389. border-radius:2px;
  390. }
  391. .mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
  392. width:100%;
  393. height:4px;
  394. margin:6px 0;
  395. }
  396. .mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  397. width:100%;
  398. height:6px;
  399. margin:5px auto;
  400. }
  401. .mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
  402. background:rgba(0,0,0,0.85);
  403. }
  404. .mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  405. .mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
  406. background:rgba(0,0,0,0.9);
  407. }
  408. .mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonUp{
  409. background-position:-96px 0;
  410. }
  411. .mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonDown{
  412. background-position:-96px -20px;
  413. }
  414. .mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonLeft{
  415. background-position:-100px -40px;
  416. }
  417. .mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonRight{
  418. background-position:-100px -56px;
  419. }
  420. /*light-thin*/
  421. .mCS-light-thin>.mCSB_scrollTools .mCSB_draggerRail{
  422. background:#fff; /* rgba fallback */
  423. background:rgba(255,255,255,0.1);
  424. }
  425. .mCS-light-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  426. width:2px;
  427. }
  428. .mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
  429. width:100%;
  430. }
  431. .mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  432. width:100%;
  433. height:2px;
  434. margin:7px auto;
  435. }
  436. /*dark-thin*/
  437. .mCS-dark-thin>.mCSB_scrollTools .mCSB_draggerRail{
  438. background:#000; /* rgba fallback */
  439. background:rgba(0,0,0,0.15);
  440. }
  441. .mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  442. width:2px;
  443. background:#000; /* rgba fallback */
  444. background:rgba(0,0,0,0.75);
  445. }
  446. .mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
  447. width:100%;
  448. }
  449. .mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  450. width:100%;
  451. height:2px;
  452. margin:7px auto;
  453. }
  454. .mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
  455. background:rgba(0,0,0,0.85);
  456. }
  457. .mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  458. .mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
  459. background:rgba(0,0,0,0.9);
  460. }
  461. .mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonUp{
  462. background-position:-80px 0;
  463. }
  464. .mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonDown{
  465. background-position:-80px -20px;
  466. }
  467. .mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonLeft{
  468. background-position:-80px -40px;
  469. }
  470. .mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonRight{
  471. background-position:-80px -56px;
  472. }