jquery.scrollbar.css 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914
  1. /*************** SCROLLBAR BASE CSS ***************/
  2. .scroll-wrapper {
  3. overflow: hidden !important;
  4. padding: 0 !important;
  5. position: relative;
  6. }
  7. .scroll-wrapper>.scroll-content {
  8. border: none !important;
  9. box-sizing: content-box !important;
  10. height: auto;
  11. left: 0;
  12. margin: 0;
  13. max-height: none;
  14. max-width: none !important;
  15. overflow: scroll !important;
  16. padding: 0;
  17. position: relative !important;
  18. top: 0;
  19. width: auto !important;
  20. }
  21. .scroll-wrapper>.scroll-content::-webkit-scrollbar {
  22. height: 0;
  23. width: 0;
  24. }
  25. .scroll-wrapper.scroll--rtl {
  26. direction: rtl;
  27. }
  28. .scroll-element {
  29. box-sizing: content-box;
  30. display: none;
  31. }
  32. .scroll-element div {
  33. box-sizing: content-box;
  34. }
  35. .scroll-element .scroll-bar,
  36. .scroll-element .scroll-arrow {
  37. cursor: default;
  38. }
  39. .scroll-element.scroll-x.scroll-scrollx_visible,
  40. .scroll-element.scroll-y.scroll-scrolly_visible {
  41. display: block;
  42. }
  43. .scroll-textarea {
  44. border: 1px solid #cccccc;
  45. border-top-color: #999999;
  46. }
  47. .scroll-textarea>.scroll-content {
  48. overflow: hidden !important;
  49. }
  50. .scroll-textarea>.scroll-content>textarea {
  51. border: none !important;
  52. box-sizing: border-box;
  53. height: 100% !important;
  54. margin: 0;
  55. max-height: none !important;
  56. max-width: none !important;
  57. overflow: scroll !important;
  58. outline: none;
  59. padding: 2px;
  60. position: relative !important;
  61. top: 0;
  62. width: 100% !important;
  63. }
  64. .scroll-textarea>.scroll-content>textarea::-webkit-scrollbar {
  65. height: 0;
  66. width: 0;
  67. }
  68. /*************** SIMPLE INNER SCROLLBAR ***************/
  69. .scrollbar-inner>.scroll-element,
  70. .scrollbar-inner>.scroll-element div {
  71. border: none;
  72. margin: 0;
  73. padding: 0;
  74. position: absolute;
  75. z-index: 10;
  76. }
  77. .scrollbar-inner>.scroll-element div {
  78. display: block;
  79. height: 100%;
  80. left: 0;
  81. top: 0;
  82. width: 100%;
  83. }
  84. .scrollbar-inner>.scroll-element.scroll-x {
  85. bottom: 2px;
  86. height: 8px;
  87. left: 0;
  88. width: 100%;
  89. }
  90. .scrollbar-inner>.scroll-element.scroll-y {
  91. height: 100%;
  92. right: 2px;
  93. top: 0;
  94. width: 8px;
  95. }
  96. .scrollbar-inner>.scroll-element .scroll-element_outer {
  97. overflow: hidden;
  98. }
  99. .scrollbar-inner>.scroll-element .scroll-element_outer,
  100. .scrollbar-inner>.scroll-element .scroll-element_track,
  101. .scrollbar-inner>.scroll-element .scroll-bar {
  102. -webkit-border-radius: 8px;
  103. -moz-border-radius: 8px;
  104. border-radius: 8px;
  105. }
  106. .scrollbar-inner>.scroll-element .scroll-element_track,
  107. .scrollbar-inner>.scroll-element .scroll-bar {
  108. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  109. filter: alpha(opacity=40);
  110. opacity: 0.4;
  111. }
  112. .scrollbar-inner>.scroll-element .scroll-element_track {
  113. background-color: #e0e0e0;
  114. }
  115. .scrollbar-inner>.scroll-element .scroll-bar {
  116. background-color: #c2c2c2;
  117. }
  118. .scrollbar-inner>.scroll-element:hover .scroll-bar {
  119. background-color: #919191;
  120. }
  121. .scrollbar-inner>.scroll-element.scroll-draggable .scroll-bar {
  122. background-color: #919191;
  123. }
  124. /* update scrollbar offset if both scrolls are visible */
  125. .scrollbar-inner>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
  126. left: -12px;
  127. }
  128. .scrollbar-inner>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
  129. top: -12px;
  130. }
  131. .scrollbar-inner>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  132. left: -12px;
  133. }
  134. .scrollbar-inner>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  135. top: -12px;
  136. }
  137. /*************** SIMPLE OUTER SCROLLBAR ***************/
  138. .scrollbar-outer>.scroll-element,
  139. .scrollbar-outer>.scroll-element div {
  140. border: none;
  141. margin: 0;
  142. padding: 0;
  143. position: absolute;
  144. z-index: 10;
  145. }
  146. .scrollbar-outer>.scroll-element {
  147. background-color: #ffffff;
  148. }
  149. .scrollbar-outer>.scroll-element div {
  150. display: block;
  151. height: 100%;
  152. left: 0;
  153. top: 0;
  154. width: 100%;
  155. }
  156. .scrollbar-outer>.scroll-element.scroll-x {
  157. bottom: 0;
  158. height: 12px;
  159. left: 0;
  160. width: 100%;
  161. }
  162. .scrollbar-outer>.scroll-element.scroll-y {
  163. height: 100%;
  164. right: 0;
  165. top: 0;
  166. width: 12px;
  167. }
  168. .scrollbar-outer>.scroll-element.scroll-x .scroll-element_outer {
  169. height: 8px;
  170. top: 2px;
  171. }
  172. .scrollbar-outer>.scroll-element.scroll-y .scroll-element_outer {
  173. left: 2px;
  174. width: 8px;
  175. }
  176. .scrollbar-outer>.scroll-element .scroll-element_outer {
  177. overflow: hidden;
  178. }
  179. .scrollbar-outer>.scroll-element .scroll-element_track {
  180. background-color: #eeeeee;
  181. }
  182. .scrollbar-outer>.scroll-element .scroll-element_outer,
  183. .scrollbar-outer>.scroll-element .scroll-element_track,
  184. .scrollbar-outer>.scroll-element .scroll-bar {
  185. -webkit-border-radius: 8px;
  186. -moz-border-radius: 8px;
  187. border-radius: 8px;
  188. }
  189. .scrollbar-outer>.scroll-element .scroll-bar {
  190. background-color: #d9d9d9;
  191. }
  192. .scrollbar-outer>.scroll-element .scroll-bar:hover {
  193. background-color: #c2c2c2;
  194. }
  195. .scrollbar-outer>.scroll-element.scroll-draggable .scroll-bar {
  196. background-color: #919191;
  197. }
  198. /* scrollbar height/width & offset from container borders */
  199. .scrollbar-outer>.scroll-content.scroll-scrolly_visible {
  200. left: -12px;
  201. margin-left: 12px;
  202. }
  203. .scrollbar-outer>.scroll-content.scroll-scrollx_visible {
  204. top: -12px;
  205. margin-top: 12px;
  206. }
  207. .scrollbar-outer>.scroll-element.scroll-x .scroll-bar {
  208. min-width: 10px;
  209. }
  210. .scrollbar-outer>.scroll-element.scroll-y .scroll-bar {
  211. min-height: 10px;
  212. }
  213. /* update scrollbar offset if both scrolls are visible */
  214. .scrollbar-outer>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
  215. left: -14px;
  216. }
  217. .scrollbar-outer>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
  218. top: -14px;
  219. }
  220. .scrollbar-outer>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  221. left: -14px;
  222. }
  223. .scrollbar-outer>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  224. top: -14px;
  225. }
  226. /*************** SCROLLBAR MAC OS X ***************/
  227. .scrollbar-macosx>.scroll-element,
  228. .scrollbar-macosx>.scroll-element div {
  229. background: none;
  230. border: none;
  231. margin: 0;
  232. padding: 0;
  233. position: absolute;
  234. z-index: 10;
  235. }
  236. .scrollbar-macosx>.scroll-element div {
  237. display: block;
  238. height: 100%;
  239. left: 0;
  240. top: 0;
  241. width: 100%;
  242. }
  243. .scrollbar-macosx>.scroll-element .scroll-element_track {
  244. display: none;
  245. }
  246. .scrollbar-macosx>.scroll-element .scroll-bar {
  247. background-color: #6C6E71;
  248. display: block;
  249. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  250. filter: alpha(opacity=0);
  251. opacity: 0;
  252. -webkit-border-radius: 7px;
  253. -moz-border-radius: 7px;
  254. border-radius: 7px;
  255. -webkit-transition: opacity 0.2s linear;
  256. -moz-transition: opacity 0.2s linear;
  257. -o-transition: opacity 0.2s linear;
  258. -ms-transition: opacity 0.2s linear;
  259. transition: opacity 0.2s linear;
  260. }
  261. .scrollbar-macosx:hover>.scroll-element .scroll-bar,
  262. .scrollbar-macosx>.scroll-element.scroll-draggable .scroll-bar {
  263. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  264. filter: alpha(opacity=70);
  265. opacity: 0.7;
  266. }
  267. .scrollbar-macosx>.scroll-element.scroll-x {
  268. bottom: 0px;
  269. height: 0px;
  270. left: 0;
  271. min-width: 100%;
  272. overflow: visible;
  273. width: 100%;
  274. }
  275. .scrollbar-macosx>.scroll-element.scroll-y {
  276. height: 100%;
  277. min-height: 100%;
  278. right: 0px;
  279. top: 0;
  280. width: 0px;
  281. }
  282. /* scrollbar height/width & offset from container borders */
  283. .scrollbar-macosx>.scroll-element.scroll-x .scroll-bar {
  284. height: 7px;
  285. min-width: 10px;
  286. top: -9px;
  287. }
  288. .scrollbar-macosx>.scroll-element.scroll-y .scroll-bar {
  289. left: -9px;
  290. min-height: 10px;
  291. width: 7px;
  292. }
  293. .scrollbar-macosx>.scroll-element.scroll-x .scroll-element_outer {
  294. left: 2px;
  295. }
  296. .scrollbar-macosx>.scroll-element.scroll-x .scroll-element_size {
  297. left: -4px;
  298. }
  299. .scrollbar-macosx>.scroll-element.scroll-y .scroll-element_outer {
  300. top: 2px;
  301. }
  302. .scrollbar-macosx>.scroll-element.scroll-y .scroll-element_size {
  303. top: -4px;
  304. }
  305. /* update scrollbar offset if both scrolls are visible */
  306. .scrollbar-macosx>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  307. left: -11px;
  308. }
  309. .scrollbar-macosx>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  310. top: -11px;
  311. }
  312. /*************** SCROLLBAR LIGHT ***************/
  313. .scrollbar-light>.scroll-element,
  314. .scrollbar-light>.scroll-element div {
  315. border: none;
  316. margin: 0;
  317. overflow: hidden;
  318. padding: 0;
  319. position: absolute;
  320. z-index: 10;
  321. }
  322. .scrollbar-light>.scroll-element {
  323. background-color: #ffffff;
  324. }
  325. .scrollbar-light>.scroll-element div {
  326. display: block;
  327. height: 100%;
  328. left: 0;
  329. top: 0;
  330. width: 100%;
  331. }
  332. .scrollbar-light>.scroll-element .scroll-element_outer {
  333. -webkit-border-radius: 10px;
  334. -moz-border-radius: 10px;
  335. border-radius: 10px;
  336. }
  337. .scrollbar-light>.scroll-element .scroll-element_size {
  338. background: #dbdbdb;
  339. background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+");
  340. background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
  341. background: -webkit-gradient(linear, left top, right top, color-stop(0%, #dbdbdb), color-stop(100%, #e8e8e8));
  342. background: -webkit-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
  343. background: -o-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
  344. background: -ms-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
  345. background: linear-gradient(to right, #dbdbdb 0%, #e8e8e8 100%);
  346. -webkit-border-radius: 10px;
  347. -moz-border-radius: 10px;
  348. border-radius: 10px;
  349. }
  350. .scrollbar-light>.scroll-element.scroll-x {
  351. bottom: 0;
  352. height: 17px;
  353. left: 0;
  354. min-width: 100%;
  355. width: 100%;
  356. }
  357. .scrollbar-light>.scroll-element.scroll-y {
  358. height: 100%;
  359. min-height: 100%;
  360. right: 0;
  361. top: 0;
  362. width: 17px;
  363. }
  364. .scrollbar-light>.scroll-element .scroll-bar {
  365. background: #fefefe;
  366. background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+");
  367. background: -moz-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
  368. background: -webkit-gradient(linear, left top, right top, color-stop(0%, #fefefe), color-stop(100%, #f5f5f5));
  369. background: -webkit-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
  370. background: -o-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
  371. background: -ms-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
  372. background: linear-gradient(to right, #fefefe 0%, #f5f5f5 100%);
  373. border: 1px solid #dbdbdb;
  374. -webkit-border-radius: 10px;
  375. -moz-border-radius: 10px;
  376. border-radius: 10px;
  377. }
  378. /* scrollbar height/width & offset from container borders */
  379. .scrollbar-light>.scroll-content.scroll-scrolly_visible {
  380. left: -17px;
  381. margin-left: 17px;
  382. }
  383. .scrollbar-light>.scroll-content.scroll-scrollx_visible {
  384. top: -17px;
  385. margin-top: 17px;
  386. }
  387. .scrollbar-light>.scroll-element.scroll-x .scroll-bar {
  388. height: 10px;
  389. min-width: 10px;
  390. top: 0px;
  391. }
  392. .scrollbar-light>.scroll-element.scroll-y .scroll-bar {
  393. left: 0px;
  394. min-height: 10px;
  395. width: 10px;
  396. }
  397. .scrollbar-light>.scroll-element.scroll-x .scroll-element_outer {
  398. height: 12px;
  399. left: 2px;
  400. top: 2px;
  401. }
  402. .scrollbar-light>.scroll-element.scroll-x .scroll-element_size {
  403. left: -4px;
  404. }
  405. .scrollbar-light>.scroll-element.scroll-y .scroll-element_outer {
  406. left: 2px;
  407. top: 2px;
  408. width: 12px;
  409. }
  410. .scrollbar-light>.scroll-element.scroll-y .scroll-element_size {
  411. top: -4px;
  412. }
  413. /* update scrollbar offset if both scrolls are visible */
  414. .scrollbar-light>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  415. left: -19px;
  416. }
  417. .scrollbar-light>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  418. top: -19px;
  419. }
  420. .scrollbar-light>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
  421. left: -19px;
  422. }
  423. .scrollbar-light>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
  424. top: -19px;
  425. }
  426. /*************** SCROLLBAR RAIL ***************/
  427. .scrollbar-rail>.scroll-element,
  428. .scrollbar-rail>.scroll-element div {
  429. border: none;
  430. margin: 0;
  431. overflow: hidden;
  432. padding: 0;
  433. position: absolute;
  434. z-index: 10;
  435. }
  436. .scrollbar-rail>.scroll-element {
  437. background-color: #ffffff;
  438. }
  439. .scrollbar-rail>.scroll-element div {
  440. display: block;
  441. height: 100%;
  442. left: 0;
  443. top: 0;
  444. width: 100%;
  445. }
  446. .scrollbar-rail>.scroll-element .scroll-element_size {
  447. background-color: #999;
  448. background-color: rgba(0, 0, 0, 0.3);
  449. }
  450. .scrollbar-rail>.scroll-element .scroll-element_outer:hover .scroll-element_size {
  451. background-color: #666;
  452. background-color: rgba(0, 0, 0, 0.5);
  453. }
  454. .scrollbar-rail>.scroll-element.scroll-x {
  455. bottom: 0;
  456. height: 12px;
  457. left: 0;
  458. min-width: 100%;
  459. padding: 3px 0 2px;
  460. width: 100%;
  461. }
  462. .scrollbar-rail>.scroll-element.scroll-y {
  463. height: 100%;
  464. min-height: 100%;
  465. padding: 0 2px 0 3px;
  466. right: 0;
  467. top: 0;
  468. width: 12px;
  469. }
  470. .scrollbar-rail>.scroll-element .scroll-bar {
  471. background-color: #d0b9a0;
  472. -webkit-border-radius: 2px;
  473. -moz-border-radius: 2px;
  474. border-radius: 2px;
  475. box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  476. }
  477. .scrollbar-rail>.scroll-element .scroll-element_outer:hover .scroll-bar {
  478. box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  479. }
  480. /* scrollbar height/width & offset from container borders */
  481. .scrollbar-rail>.scroll-content.scroll-scrolly_visible {
  482. left: -17px;
  483. margin-left: 17px;
  484. }
  485. .scrollbar-rail>.scroll-content.scroll-scrollx_visible {
  486. margin-top: 17px;
  487. top: -17px;
  488. }
  489. .scrollbar-rail>.scroll-element.scroll-x .scroll-bar {
  490. height: 10px;
  491. min-width: 10px;
  492. top: 1px;
  493. }
  494. .scrollbar-rail>.scroll-element.scroll-y .scroll-bar {
  495. left: 1px;
  496. min-height: 10px;
  497. width: 10px;
  498. }
  499. .scrollbar-rail>.scroll-element.scroll-x .scroll-element_outer {
  500. height: 15px;
  501. left: 5px;
  502. }
  503. .scrollbar-rail>.scroll-element.scroll-x .scroll-element_size {
  504. height: 2px;
  505. left: -10px;
  506. top: 5px;
  507. }
  508. .scrollbar-rail>.scroll-element.scroll-y .scroll-element_outer {
  509. top: 5px;
  510. width: 15px;
  511. }
  512. .scrollbar-rail>.scroll-element.scroll-y .scroll-element_size {
  513. left: 5px;
  514. top: -10px;
  515. width: 2px;
  516. }
  517. /* update scrollbar offset if both scrolls are visible */
  518. .scrollbar-rail>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  519. left: -25px;
  520. }
  521. .scrollbar-rail>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  522. top: -25px;
  523. }
  524. .scrollbar-rail>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
  525. left: -25px;
  526. }
  527. .scrollbar-rail>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
  528. top: -25px;
  529. }
  530. /*************** SCROLLBAR DYNAMIC ***************/
  531. .scrollbar-dynamic>.scroll-element,
  532. .scrollbar-dynamic>.scroll-element div {
  533. background: none;
  534. border: none;
  535. margin: 0;
  536. padding: 0;
  537. position: absolute;
  538. z-index: 10;
  539. }
  540. .scrollbar-dynamic>.scroll-element div {
  541. display: block;
  542. height: 100%;
  543. left: 0;
  544. top: 0;
  545. width: 100%;
  546. }
  547. .scrollbar-dynamic>.scroll-element.scroll-x {
  548. bottom: 2px;
  549. height: 7px;
  550. left: 0;
  551. min-width: 100%;
  552. width: 100%;
  553. }
  554. .scrollbar-dynamic>.scroll-element.scroll-y {
  555. height: 100%;
  556. min-height: 100%;
  557. right: 2px;
  558. top: 0;
  559. width: 7px;
  560. }
  561. .scrollbar-dynamic>.scroll-element .scroll-element_outer {
  562. opacity: 0.3;
  563. -webkit-border-radius: 12px;
  564. -moz-border-radius: 12px;
  565. border-radius: 12px;
  566. }
  567. .scrollbar-dynamic>.scroll-element .scroll-element_size {
  568. background-color: #cccccc;
  569. opacity: 0;
  570. -webkit-border-radius: 12px;
  571. -moz-border-radius: 12px;
  572. border-radius: 12px;
  573. -webkit-transition: opacity 0.2s;
  574. -moz-transition: opacity 0.2s;
  575. -o-transition: opacity 0.2s;
  576. -ms-transition: opacity 0.2s;
  577. transition: opacity 0.2s;
  578. }
  579. .scrollbar-dynamic>.scroll-element .scroll-bar {
  580. background-color: #6c6e71;
  581. -webkit-border-radius: 7px;
  582. -moz-border-radius: 7px;
  583. border-radius: 7px;
  584. }
  585. /* scrollbar height/width & offset from container borders */
  586. .scrollbar-dynamic>.scroll-element.scroll-x .scroll-bar {
  587. bottom: 0;
  588. height: 7px;
  589. min-width: 24px;
  590. top: auto;
  591. }
  592. .scrollbar-dynamic>.scroll-element.scroll-y .scroll-bar {
  593. left: auto;
  594. min-height: 24px;
  595. right: 0;
  596. width: 7px;
  597. }
  598. .scrollbar-dynamic>.scroll-element.scroll-x .scroll-element_outer {
  599. bottom: 0;
  600. top: auto;
  601. left: 2px;
  602. -webkit-transition: height 0.2s;
  603. -moz-transition: height 0.2s;
  604. -o-transition: height 0.2s;
  605. -ms-transition: height 0.2s;
  606. transition: height 0.2s;
  607. }
  608. .scrollbar-dynamic>.scroll-element.scroll-y .scroll-element_outer {
  609. left: auto;
  610. right: 0;
  611. top: 2px;
  612. -webkit-transition: width 0.2s;
  613. -moz-transition: width 0.2s;
  614. -o-transition: width 0.2s;
  615. -ms-transition: width 0.2s;
  616. transition: width 0.2s;
  617. }
  618. .scrollbar-dynamic>.scroll-element.scroll-x .scroll-element_size {
  619. left: -4px;
  620. }
  621. .scrollbar-dynamic>.scroll-element.scroll-y .scroll-element_size {
  622. top: -4px;
  623. }
  624. /* update scrollbar offset if both scrolls are visible */
  625. .scrollbar-dynamic>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  626. left: -11px;
  627. }
  628. .scrollbar-dynamic>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  629. top: -11px;
  630. }
  631. /* hover & drag */
  632. .scrollbar-dynamic>.scroll-element:hover .scroll-element_outer,
  633. .scrollbar-dynamic>.scroll-element.scroll-draggable .scroll-element_outer {
  634. overflow: hidden;
  635. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  636. filter: alpha(opacity=70);
  637. opacity: 0.7;
  638. }
  639. .scrollbar-dynamic>.scroll-element:hover .scroll-element_outer .scroll-element_size,
  640. .scrollbar-dynamic>.scroll-element.scroll-draggable .scroll-element_outer .scroll-element_size {
  641. opacity: 1;
  642. }
  643. .scrollbar-dynamic>.scroll-element:hover .scroll-element_outer .scroll-bar,
  644. .scrollbar-dynamic>.scroll-element.scroll-draggable .scroll-element_outer .scroll-bar {
  645. height: 100%;
  646. width: 100%;
  647. -webkit-border-radius: 12px;
  648. -moz-border-radius: 12px;
  649. border-radius: 12px;
  650. }
  651. .scrollbar-dynamic>.scroll-element.scroll-x:hover .scroll-element_outer,
  652. .scrollbar-dynamic>.scroll-element.scroll-x.scroll-draggable .scroll-element_outer {
  653. height: 20px;
  654. min-height: 7px;
  655. }
  656. .scrollbar-dynamic>.scroll-element.scroll-y:hover .scroll-element_outer,
  657. .scrollbar-dynamic>.scroll-element.scroll-y.scroll-draggable .scroll-element_outer {
  658. min-width: 7px;
  659. width: 20px;
  660. }
  661. /*************** SCROLLBAR GOOGLE CHROME ***************/
  662. .scrollbar-chrome>.scroll-element,
  663. .scrollbar-chrome>.scroll-element div {
  664. border: none;
  665. margin: 0;
  666. overflow: hidden;
  667. padding: 0;
  668. position: absolute;
  669. z-index: 10;
  670. }
  671. .scrollbar-chrome>.scroll-element {
  672. background-color: #ffffff;
  673. }
  674. .scrollbar-chrome>.scroll-element div {
  675. display: block;
  676. height: 100%;
  677. left: 0;
  678. top: 0;
  679. width: 100%;
  680. }
  681. .scrollbar-chrome>.scroll-element .scroll-element_track {
  682. background: #f1f1f1;
  683. border: 1px solid #dbdbdb;
  684. }
  685. .scrollbar-chrome>.scroll-element.scroll-x {
  686. bottom: 0;
  687. height: 16px;
  688. left: 0;
  689. min-width: 100%;
  690. width: 100%;
  691. }
  692. .scrollbar-chrome>.scroll-element.scroll-y {
  693. height: 100%;
  694. min-height: 100%;
  695. right: 0;
  696. top: 0;
  697. width: 16px;
  698. }
  699. .scrollbar-chrome>.scroll-element .scroll-bar {
  700. background-color: #d9d9d9;
  701. border: 1px solid #bdbdbd;
  702. cursor: default;
  703. -webkit-border-radius: 2px;
  704. -moz-border-radius: 2px;
  705. border-radius: 2px;
  706. }
  707. .scrollbar-chrome>.scroll-element .scroll-bar:hover {
  708. background-color: #c2c2c2;
  709. border-color: #a9a9a9;
  710. }
  711. .scrollbar-chrome>.scroll-element.scroll-draggable .scroll-bar {
  712. background-color: #919191;
  713. border-color: #7e7e7e;
  714. }
  715. /* scrollbar height/width & offset from container borders */
  716. .scrollbar-chrome>.scroll-content.scroll-scrolly_visible {
  717. left: -16px;
  718. margin-left: 16px;
  719. }
  720. .scrollbar-chrome>.scroll-content.scroll-scrollx_visible {
  721. top: -16px;
  722. margin-top: 16px;
  723. }
  724. .scrollbar-chrome>.scroll-element.scroll-x .scroll-bar {
  725. height: 8px;
  726. min-width: 10px;
  727. top: 3px;
  728. }
  729. .scrollbar-chrome>.scroll-element.scroll-y .scroll-bar {
  730. left: 3px;
  731. min-height: 10px;
  732. width: 8px;
  733. }
  734. .scrollbar-chrome>.scroll-element.scroll-x .scroll-element_outer {
  735. border-left: 1px solid #dbdbdb;
  736. }
  737. .scrollbar-chrome>.scroll-element.scroll-x .scroll-element_track {
  738. height: 14px;
  739. left: -3px;
  740. }
  741. .scrollbar-chrome>.scroll-element.scroll-x .scroll-element_size {
  742. height: 14px;
  743. left: -4px;
  744. }
  745. .scrollbar-chrome>.scroll-element.scroll-y .scroll-element_outer {
  746. border-top: 1px solid #dbdbdb;
  747. }
  748. .scrollbar-chrome>.scroll-element.scroll-y .scroll-element_track {
  749. top: -3px;
  750. width: 14px;
  751. }
  752. .scrollbar-chrome>.scroll-element.scroll-y .scroll-element_size {
  753. top: -4px;
  754. width: 14px;
  755. }
  756. /* update scrollbar offset if both scrolls are visible */
  757. .scrollbar-chrome>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  758. left: -19px;
  759. }
  760. .scrollbar-chrome>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  761. top: -19px;
  762. }
  763. .scrollbar-chrome>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
  764. left: -19px;
  765. }
  766. .scrollbar-chrome>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
  767. top: -19px;
  768. }