jquery.mCustomScrollbar.css 13 KB

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