UNPKG

sirius-explorer

Version:

An open-source front-end for the Insight API.

1,907 lines (1,603 loc) 165 kB
/*# sourceMappingURL=../maps/components/transactions.css.map */ html, body, h1, h2, h3, h4, h5, h6, p, em, strong, abbr, acronym, blockquote, q, cite, ins, del, dfn, a, div, span, pre, hr, address, br, b, i, sub, sup, big, small, tt, table, tr, caption, thead, tbody, tfoot, col, colgroup, form, input, label, textarea, button, fieldset, legend, select, option, ul, ol, li, dl, dt, dd, code, var, samp, img, object, param, map, area { padding: 0; margin: 0; border: none; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure, figcaption, header, footer, aside, article { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } input[type=button], input[type=submit], button { cursor: pointer; border-radius: 0; } button { border: 0; } *:focus { outline: none; } button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: none; outline: none; } button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */ ::-ms-clear { width: 0; height: 0; } ::-ms-reveal { width: 0; height: 0; display: none; } /* Internet Explorer 10 in Windows 8 and Windows Phone 8 Bug fix */ @-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; word-break: break-word; } a img { border: none; vertical-align: middle; } input, textarea { outline: none; resize: none; } .clear { clear: both; } .pull-left { float: left; } .fl_l { float: left; } .pull-right { float: right; } .fl_r { float: right; } .text_r { text-align: right; } .text_c { text-align: center; } .text_l { text-align: left; } .ov { overflow: hidden; } .no_bg { background: none; } .m_0 { margin: 0; } .block { display: block; } .in_bl { display: inline-block; } .inline { display: inline; } .hidden { visibility: hidden; } .none { display: none; } sup, sub { vertical-align: baseline; position: relative; font-size: .4em; line-height: 1; } sup { bottom: 1.4ex; } sub { top: .5ex; } .va_t { vertical-align: top; } .va_m { vertical-align: middle; } .va_b { vertical-align: bottom; } .va_middle_out { position: relative; line-height: 0; font-size: 0; } .upp { text-transform: uppercase; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .col { float: left; } .col-1 { width: 8.2%; } .col-2 { width: 16.5%; } .col-3 { width: 25%; } .col-4 { width: 33.3%; } .col-5 { width: 41.7%; } .col-6 { width: 50%; } .col-7 { width: 58.3%; } .col-8 { width: 66.6%; } .col-9 { width: 75%; } .col-10 { width: 83.3%; } .col-11 { width: 91.6%; } .col-12 { width: 100%; } .row-1 { height: 8.2%; } .row-2 { height: 16.5%; } .row-3 { height: 25%; } .row-4 { height: 33.3%; } .row-5 { height: 41.7%; } .row-6 { height: 50%; } .row-7 { height: 58.3%; } .row-8 { height: 66.6%; } .row-9 { height: 75%; } .row-10 { height: 83.3%; } .row-11 { height: 91.6%; } .row-12 { height: 100%; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .table_clearfix { display: table; } .table_clearfix:after { content: '. .'; display: block; word-spacing: 99in; height: 0; overflow: hidden; font-size: 0.13em; line-height: 0; } .va_middle_out { position: relative; line-height: 0; font-size: 0; } .va_middle_out:after { position: relative; content: ""; height: 100%; width: 0; display: inline-block; vertical-align: middle; } .va_middle_in { display: inline-block; vertical-align: middle; max-width: 100%; width: 100%; text-decoration: none; } .justified { line-height: 0; font-size: 0; text-align: justify; text-align-last: justify; } .justified:after { width: 100%; height: 0; visibility: hidden; overflow: hidden; content: ''; display: inline-block; } .mobile body { -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; } .tablet body { -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; } .ios input, .ios textarea { -webkit-appearance: none; border-radius: 0; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .ellipsis-inline { line-height: 1; display: inline-block; vertical-align: middle; } @font-face { font-family: 'icomoon'; src: url("../fonts/iconmoon/icomoon.eot?s0z324"); src: url("../fonts/iconmoon/icomoon.eot?s0z324#iefix") format("embedded-opentype"), url("../fonts/iconmoon/icomoon.ttf?s0z324") format("truetype"), url("../fonts/iconmoon/icomoon.woff?s0z324") format("woff"), url("../fonts/iconmoon/icomoon.svg?s0z324#icomoon") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"], [class^="icon-"]:before, [class*=" icon-"]:before { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-angular .path1:before { content: "\e900"; color: #dddddd; } .icon-angular .path2:before { content: "\e901"; margin-left: -0.9501953125em; color: #232e41; } .icon-angular .path3:before { content: "\e902"; margin-left: -0.9501953125em; color: #232e41; } .icon-angular .path4:before { content: "\e903"; margin-left: -0.9501953125em; color: #dddddd; } .icon-angular .path5:before { content: "\e904"; margin-left: -0.9501953125em; color: #dddddd; } .icon-livedb .path1:before { content: "\e910"; color: #dddddd; opacity: 0.4; } .icon-livedb .path2:before { content: "\e911"; margin-left: -2.6748046875em; color: #dddddd; opacity: 0.8; } .icon-livedb .path3:before { content: "\e912"; margin-left: -2.6748046875em; color: #dddddd; opacity: 0.3; } .icon-livedb .path4:before { content: "\e913"; margin-left: -2.6748046875em; color: #dddddd; } .icon-livedb .path5:before { content: "\e914"; margin-left: -2.6748046875em; color: #dddddd; } .icon-livedb .path6:before { content: "\e915"; margin-left: -2.6748046875em; color: #dddddd; } .icon-livedb .path7:before { content: "\e916"; margin-left: -2.6748046875em; color: #dddddd; } .icon-livedb .path8:before { content: "\e917"; margin-left: -2.6748046875em; color: #dddddd; } .icon-livedb .path9:before { content: "\e918"; margin-left: -2.6748046875em; color: #dddddd; } .icon-livedb .path10:before { content: "\e919"; margin-left: -2.6748046875em; color: #dddddd; } .icon-livedb .path11:before { content: "\e91a"; margin-left: -2.6748046875em; color: #dddddd; } .icon-bitcore:before { content: "\e905"; color: #dddddd; } .icon-nodejs:before { content: "\e90f"; color: #dddddd; } .icon-qr:before { content: "\e908"; color: #dddddd; } .icon-transaction:before { content: "\e90b"; color: #dddddd; } .icon-blocks:before { content: "\e91b"; color: #dddddd; } .icon-copy:before { content: "\e906"; color: #dddddd; } .icon-plus:before { content: "\e90e"; color: #dddddd; } .icon-minus:before { content: "\e907"; color: #dddddd; } .icon-search:before { content: "\e909"; color: #dddddd; } .icon-arrows-right:before { content: "\e90a"; } .icon-arrow-right:before { content: "\e90c"; } .icon-arrow:before { content: "\e90d"; color: #dddddd; } .icon-arrow2:before { content: "\e91c"; color: #dddddd; } .icon-calendar:before { content: "\e91d"; color: #dddddd; } .icon-arrow-left:before { content: "\e91e"; } .icon-arrow-right2:before { content: "\e91f"; } .icon-close:before { content: "\e920"; color: #dddddd; } .icon-plus2:before { content: "\e921"; color: #dddddd; } .icon-error:before { content: "\e922"; } .icon-minus_act:before { content: "\e923"; color: #dddddd; } .icon-write:before { content: "\e924"; } .icon-github:before { content: "\e925"; } .icon-doc:before { content: "\e926"; } .icon-chat:before { content: "\e927"; } .icon-tw:before { content: "\e928"; } .icon-fb:before { content: "\e929"; } .icon-hash:before { content: "\e92a"; } .icon-arrow-top:before { content: "\e92b"; } .icon-arrow-right3:before { content: "\e92c"; } .icon-arrow-right22:before { content: "\e92d"; } html { height: 100%; font-size: 100%; } body { height: 100%; min-width: 1420px; color: #dddddd; font: 400 16px "Roboto Mono", monospace; background: #232e41; } a { font-weight: 400; font-family: "Roboto Mono", monospace; text-decoration: none; color: #dddddd; } b, strong { font-weight: 500; } .img-responsive { display: inline-block; height: 100%; vertical-align: middle; max-width: 100%; max-height: 100%; } .wrapper { position: relative; z-index: 2; min-height: 100%; height: auto !important; } .wrapper:before, .wrapper:after { content: " "; display: table; } .wrapper:after { clear: both; } .wrapper-with-footer { padding-bottom: 80px; } .box { max-width: 1420px; margin: 0 auto; padding: 0 20px; } .fsz-13 { font-size: 13px; } .fsz-16 { font-size: 16px; } .fsz-21 { font-size: 21px; } .special { color: #2ed0a0; } .special2 { color: #264c63; } .additional { opacity: .8; } .fadeEffect { -webkit-animation: fadeEffect .2s; animation: fadeEffect .2s; } @-webkit-keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .content { max-width: 1420px; margin: 0 auto; } .content .box:before, .content .box:after { content: " "; display: table; } .content .box:after { clear: both; } .header.fixed ~ .content { padding-top: 150px; } .content__left { float: left; width: 53%; padding-top: 15px; clear: both; padding-right: 100px; } .content__right { float: right; width: 47%; padding-top: 15px; } .content__full { float: left; width: 100%; } .content__list-transactions { padding-top: 15px; } .content__listScroll { max-height: 620px; overflow: auto; } .content__list-blockchain { padding-top: 25px; } .content__list-blockchain:before, .content__list-blockchain:after { content: " "; display: table; } .content__list-blockchain:after { clear: both; } .content__list-blockchain .item { float: left; width: 50%; margin: 20px 0; } .content__list-blockchain .item-full { float: none; width: 100%; padding-bottom: 8px; } .content__list-blockchain .item-full .label { font-size: 32px; } .content__list-blockchain .item-full .labeled { font-size: 18px; } .content__list-blockchain .label { font-size: 27px; font-family: "Roboto Mono", monospace; margin-bottom: 5px; } .content__list-blockchain .labeled { font-size: 16px; opacity: .6; } .content__list-blockchain .limiter { margin: 16px 0; height: 1px; background: #dddddd; opacity: .3; } .content__list-blockchain .section__heading { margin: 36px 0 50px; } .content__list-blockchain .section__title { font-size: 46px; } .content__body { line-height: 30px; max-width: 93%; } .content__body p { margin-bottom: 28px; } .heading { overflow: hidden; margin-bottom: 20px; } .heading.margin1 { margin-top: 15px; } .heading-width-900 { max-width: 900px; } .heading__pic { float: left; line-height: 90px; font-size: 0; } .heading__pic img { vertical-align: middle; } .heading__title { font-size: 80px; font-weight: 500; font-family: "Roboto Mono", monospace; line-height: 90px; letter-spacing: -1.5px; } .heading__title:first-letter { text-transform: uppercase; } .heading__pic ~ .heading__title { margin-left: 70px; } .heading__desc { margin: 30px 0 35px; } .heading__link { font-size: 16px; } .heading__linkWrap { margin-top: 5px; text-transform: uppercase; margin-left: 75px; } .heading__sm { clear: both; margin-top: 32px; margin-bottom: 52px; } .heading__smLabel { text-transform: uppercase; font-weight: 500; font-size: 21px; padding-right: 25px; line-height: 1.35; float: left; } .heading__smLabeled { position: relative; overflow: hidden; line-height: 1.35; } .heading__smLabeled .text { font-size: 21px; } .heading__address { float: right; padding-top: 50px; font-size: 24px; } .h1 { font-size: 40px; font-weight: 500; } .mark { background: rgba(44, 130, 174, 0.8); color: #232e41; padding: 1px 2px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .mark:hover { background: #2c82ae; } .mark.disabled { background: rgba(44, 130, 174, 0.5); cursor: default; } .mark-bd { display: inline-block; background: rgba(46, 154, 208, 0.1); border: 1px solid rgba(46, 154, 208, 0.3); color: #e75647; padding: 0 4px; height: 18px; line-height: 16px; font-size: 14px; } .mark-bd.disabled { color: rgba(46, 154, 208, 0.5); cursor: default; } .mark-bd.disabled:hover { background: rgba(46, 154, 208, 0.1); } .mark-bd:hover { background: rgba(46, 154, 208, 0.2); } .section { clear: both; } .section__heading { margin-bottom: 10px; } .section__heading.bdb { border-bottom: 1px dashed #295f7c; padding-bottom: 17px; margin-bottom: 13px; } .section__title { font: 500 40px "Roboto Mono", monospace; } .section__status { font-family: "Roboto Mono", monospace; font-size: 24px; opacity: .5; } .attn { color: #e75647; } .qr__link { width: 150px; height: 150px; display: inline-block; border: 10px solid #dddddd; } .qr__link img { width: 100%; height: 100%; } .inactive { opacity: .4; } .tooltip__trigger { cursor: pointer; } .nf__link { display: inline-block; margin: 50px 0; } .air-b { margin-bottom: 150px; } /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2017 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ /*! * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=b883087479c161325bcb39f6e52bad3c) * Config saved to config.json and https://gist.github.com/b883087479c161325bcb39f6e52bad3c */ /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ .uib-datepicker-popup.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; float: left; text-align: left; background-color: #dddddd; padding: 20px; } .uib-datepicker-popup .uib-button-bar { display: none; } .uib-datepicker-popup .uib-datepicker-current { background: #000; } .uib-datepicker { font-family: "Roboto Mono", monospace; } .uib-datepicker .btn { display: block; background: transparent; text-align: center; width: 100%; padding: 3px; vertical-align: middle; -moz-user-select: none; -webkit-user-select: none; user-select: none; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; white-space: nowrap; color: #232e41; min-width: 30px; min-height: 30px; height: auto; font: 500 13px/30px "Roboto Mono", monospace; } .uib-datepicker .btn.active { background: #e75647; } .uib-datepicker .btn.active:hover { background: #e75647; } .uib-datepicker .btn:hover { background: rgba(0, 0, 0, 0.1); } .uib-datepicker .btn[disabled] { opacity: .3; cursor: default; } .uib-datepicker .btn[disabled]:hover { background: transparent; } .uib-datepicker th { text-align: center; font-weight: 500; color: #232e41; font-size: 12px; height: 30px; line-height: 30px; padding: 0; vertical-align: top; } .uib-datepicker th .btn { height: 30px; line-height: 30px; padding: 0; font-style: normal; } .uib-datepicker td { color: #232e41; border: 1px solid #232e41; } .uib-datepicker td.h6 { font-size: 11px; border: none; } .uib-datepicker td.h6 em { font-style: normal; } .uib-datepicker .uib-title { font-size: 16px; } .uib-datepicker .uib-left .glyphicon { font-size: 0; line-height: 0; } .uib-datepicker .uib-left .glyphicon:after { font-family: icomoon, sans-serif; content: "\e91e"; font-size: 10px; line-height: 1; font-weight: 600; color: #232e41; font-style: normal; } .uib-datepicker .uib-right .glyphicon { font-size: 0; line-height: 0; } .uib-datepicker .uib-right .glyphicon:after { font-family: icomoon, sans-serif; content: "\e91f"; font-size: 10px; line-height: 1; font-weight: 600; color: #232e41; font-style: normal; } .datepicker-popup .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; float: left; text-align: left; background-color: #dddddd; padding: 20px; } .datepicker-popup .button-bar { display: none; } .datepicker-popup .datepicker-current { background: #000; } .datepicker { font-family: "Roboto Mono", monospace; } .datepicker .btn { display: block; background: transparent; text-align: center; width: 100%; padding: 3px; vertical-align: middle; -moz-user-select: none; -webkit-user-select: none; user-select: none; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; white-space: nowrap; color: #232e41; min-width: 30px; min-height: 30px; height: auto; font: 500 13px/30px "Roboto Mono", monospace; } .datepicker .btn.active { background: #e75647; } .datepicker .btn.active:hover { background: #e75647; } .datepicker .btn:hover { background: rgba(0, 0, 0, 0.1); } .datepicker .btn[disabled] { opacity: .3; cursor: default; } .datepicker .btn[disabled]:hover { background: transparent; } .datepicker th { text-align: center; font-weight: 500; color: #232e41; font-size: 12px; height: 30px; line-height: 30px; padding: 0; vertical-align: top; } .datepicker th .btn { height: 30px; line-height: 30px; padding: 0; font-style: normal; } .datepicker th strong { font-size: 16px; } .datepicker td { color: #232e41; border: 1px solid #232e41; } .datepicker td.h6 { font-size: 11px; border: none; } .datepicker td.h6 em { font-style: normal; } .datepicker .pull-left .glyphicon { font-size: 0; line-height: 0; } .datepicker .pull-left .glyphicon:after { font-family: icomoon, sans-serif; content: "\e91e"; font-size: 10px; line-height: 1; font-weight: 600; color: #232e41; font-style: normal; } .datepicker .pull-right .glyphicon { font-size: 0; line-height: 0; } .datepicker .pull-right .glyphicon:after { font-family: icomoon, sans-serif; content: "\e91f"; font-size: 10px; line-height: 1; font-weight: 600; color: #232e41; font-style: normal; } /* * CSS Styles that are needed by jScrollPane for it to operate correctly. * * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane * may not operate correctly without them. */ .jspContainer { overflow: hidden; position: relative; } .jspPane { position: absolute; width: 100% !important; } .jspVerticalBar { position: absolute; top: 0; right: 0; width: 16px; height: 100%; background: red; } .jspHorizontalBar { position: absolute; bottom: 0; left: 0; width: 100%; height: 16px; background: red; } .jspCap { display: none; } .jspHorizontalBar .jspCap { float: left; } .jspTrack { background: #dde; position: relative; } .jspDrag { background: #bbd; position: relative; top: 0; left: 0; cursor: pointer; } .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; } .jspArrow { background: #50506d; text-indent: -20000px; display: block; cursor: pointer; padding: 0; margin: 0; } .jspArrow.jspDisabled { cursor: default; background: #80808d; } .jspVerticalBar .jspArrow { height: 16px; } .jspHorizontalBar .jspArrow { width: 16px; float: left; height: 100%; } .jspVerticalBar .jspArrow:focus { outline: none; } .jspCorner { background: #eeeef4; float: left; height: 100%; } /* Yuk! CSS Hack for IE6 3 pixel bug :( */ * html .jspCorner { margin: 0 -3px 0 0; } /*custom*/ .jspVerticalBar { width: 5px; background: transparent; } .jspTrack { background: #26475b; } .jspDrag { background: #dddddd; opacity: 1; border-radius: 0; width: 5px; margin: 0; } /* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* CONTENTS: 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar { -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action { -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox { /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container { /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container { margin-right: 30px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container { /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools { /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools { right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer { /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer { margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail { width: 2px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCSB_scrollTools .mCSB_dragger { /* the draggable element */ cursor: pointer; width: 100%; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { /* the dragger element */ position: relative; width: 4px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { width: 12px; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 8px; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown { display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown { bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 3. HORIZONTAL SCROLLBAR x-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_horizontal.mCSB_inside > .mCSB_container { margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCSB_outside > .mCSB_container { min-height: 100%; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden { margin-bottom: 0; } /* non-visible scrollbar */ .mCSB_scrollTools.mCSB_scrollTools_horizontal { width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal { bottom: -26px; } /* scrollbar position: outside */ .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer { margin: 0 20px; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 2px; margin: 7px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger { width: 30px; /* minimum dragger width */ height: 100%; left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { height: 12px; /* auto-expanded scrollbar */ margin: 2px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 8px; /* auto-expanded scrollbar */ margin: 4px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft { left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { right: 0; } .scroll-wrapper { overflow: hidden !important; padding: 0 !important; position: relative; } .scroll-wrapper > .scroll-content { border: none !important; box-sizing: content-box !important; height: auto; left: 0; margin: 0; max-height: none; max-width: none !important; overflow: scroll !important; padding: 0; position: relative !important; top: 0; width: auto !important; } .scroll-wrapper > .scroll-content::-webkit-scrollbar { height: 0; width: 0; } .scroll-element { display: none; } .scroll-element, .scroll-element div { box-sizing: content-box; } .scroll-element.scroll-x.scroll-scrollx_visible, .scroll-element.scroll-y.scroll-scrolly_visible { display: block; } .scroll-element .scroll-bar, .scroll-element .scroll-arrow { cursor: default; } .scrollbar-outer > .scroll-content.scroll-scrolly_visible { left: -12px; margin-left: 12px; } .scrollbar-outer > .scroll-element.scroll-y { height: 100%; right: 0; top: 0; width: 5px; } .scrollbar-outer > .scroll-element { background-color: #26475b; } .scrollbar-outer > .scroll-element .scroll-element_outer { overflow: hidden; } .scrollbar-outer > .scroll-element, .scrollbar-outer > .scroll-element div { border: none; margin: 0; padding: 0; position: absolute; z-index: 10; } .scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer { width: 5px; } /* .scrollbar-outer > .scroll-element .scroll-element_outer, .scrollbar-outer > .scroll-element .scroll-element_track, .scrollbar-outer > .scroll-element .scroll-bar { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } */ .scrollbar-outer > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; } .scrollbar-outer > .scroll-element .scroll-element_track { background-color: #26475b; } .scrollbar-outer > .scroll-element.scroll-y .scroll-bar { min-height: 10px; } .scrollbar-outer > .scroll-element .scroll-bar { background-color: rgba(46, 154, 208, 0.75); } .scrollbar-outer > .scroll-element .scroll-bar:hover { background-color: rgba(46, 154, 208, 0.85); } .scrollbar-outer > .scroll-element .scroll-bar:active { background-color: rgba(46, 154, 208, 0.9); } .scroll-textarea { border: 1px solid #cccccc; border-top-color: #999999; } .scroll-textarea > .scroll-content { overflow: hidden !important; } .scroll-textarea > .scroll-content > textarea { border: none !important; box-sizing: border-box; height: 100% !important; margin: 0; max-height: none !important; max-width: none !important; overflow: scroll !important; outline: none; padding: 2px; position: relative !important; top: 0; width: 100% !important; } .scroll-textarea > .scroll-content > textarea::-webkit-scrollbar { height: 0; width: 0; } /*************** TEXTAREA STYLES ***************/ .textarea-scrollbar { height: 215px; width: 100%; margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; color: #dddddd; overflow: hidden; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper { position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container { padding-right: 30px; padding-bottom: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical { bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal { right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical { bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal { right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal { left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal { left: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper { /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container { padding-right: 0; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container { padding-bottom: 0; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden { margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight { -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail { -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools { opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools { opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.4); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight { background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp { background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover { opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active { opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ .mCS-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.15); } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: rgba(0, 0, 0, 0.85); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: rgba(0, 0, 0, 0.9); } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0; } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #fff; background-color: rgba(255, 255, 255, 0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 4px; background-color: #fff; background-color: rgba(255, 255, 255, 0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.85); } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px 0; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -20px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -40px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -56px; } /* theme: "dark-2" */ .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px 0; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -20px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -40px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -56px; } /* ---------------------------------------- */ /* theme: "light-thick", "dark-thick" */ .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #fff; background-color: rgba(255, 255, 255, 0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; background-color: #fff; background-color: rgba(255, 255, 255, 0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 6px; margin: 5px auto; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.85); } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -16px 0; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -16px -20px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -20px -40px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -20px -56px; } /* theme: "dark-thick" */ .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -96px 0; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -96px -20px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -100px -40px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -100px -56px; } /* ---------------------------------------- */ /* theme: "light-thin", "dark-thin" */ .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: rgba(255, 255, 255, 0.1); } .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .