diff --git a/jquery.mCustomScrollbar.css b/jquery.mCustomScrollbar.css index 51b6598..1a21936 100644 --- a/jquery.mCustomScrollbar.css +++ b/jquery.mCustomScrollbar.css @@ -23,24 +23,33 @@ CONTENTS: 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ - - .mCustomScrollbar{ -ms-touch-action: none; touch-action: none; /* MSPointer events - direct all 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; - } +.mCSB_absolute{ + position: absolute; +} +.mCSB_relative{ + position: relative; +} +.mCSB_hideCrunch{ + left:0; + width:999999px; +} +.mCustomScrollbar{ -ms-touch-action: none; touch-action: none; /* MSPointer events - direct all 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; +} @@ -51,89 +60,89 @@ 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; } +.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; } @@ -144,73 +153,73 @@ 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; } +.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; } @@ -221,63 +230,63 @@ 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; - } - - .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; - -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - } - - .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ - padding-bottom: 0; - -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - } - - .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; } +.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; +} + +.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; + -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; +} + +.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ + padding-bottom: 0; + -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; +} + +.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; } @@ -287,39 +296,39 @@ yx-axis ------------------------------------------------------------------------------------------------------------------------ */ - .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, /* auto-expanded scrollbar */ - .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; - } +.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, /* auto-expanded scrollbar */ +.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; +} @@ -329,944 +338,944 @@ yx-axis ------------------------------------------------------------------------------------------------------------------------ */ - /* - ---------------------------------------- - 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-image: url(mCSB_buttons.png); /* css sprites */ - 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; - } +/* +---------------------------------------- +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-image: url(mCSB_buttons.png); /* css sprites */ + 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 .mCSB_dragger_bar, +.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; } + +.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, +.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; } + +.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ + width: 100%; + height: 2px; + margin: 7px auto; +} + + +/* theme "dark-thin" */ + +.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } + +.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } + +.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } + +.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, +.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } + +.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } + +.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } + +.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } + +.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } + +/* ---------------------------------------- */ + + + +/* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ + +.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); } + +.mCS-rounded.mCSB_scrollTools .mCSB_dragger, +.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, +.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, +.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; } + +.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ + width: 14px; + margin: 0 1px; +} + +.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, +.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, +.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, +.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; } + +.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ + height: 14px; + margin: 1px 0; +} + +.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, +.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, +.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, +.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ + width: 16px; /* auto-expanded scrollbar */ + height: 16px; + margin: -1px 0; +} + +.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, +.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, +.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, +.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ } + +.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, +.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, +.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, +.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ + height: 16px; /* auto-expanded scrollbar */ + width: 16px; + margin: 0 -1px; +} + +.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, +.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, +.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, +.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ + height: 4px; /* auto-expanded scrollbar */ + margin: 6px 0; +} + +.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; } + +.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; } + +.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; } + +.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; } + + +/* theme "rounded-dark", "rounded-dots-dark" */ + +.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } + +.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } + +.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, +.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } + +.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, +.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, +.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, +.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } + +.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; } + +.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; } + +.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; } + +.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; } + + +/* theme "rounded-dots", "rounded-dots-dark" */ + +.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, +.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; } + +.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, +.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, +.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, +.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ + background-color: transparent; + background-position: center; +} + +.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, +.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ + background-image:url(scroll.png); + background-repeat: repeat-y; + opacity: 0.3; + filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; +} + +.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, +.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ + height: 4px; + margin: 6px 0; + background-repeat: repeat-x; +} + +.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; } + +.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; } + +.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; } + +.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; } + + +/* theme "rounded-dots-dark" */ + +.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ + background-image:url(scroll_dark.png); /*no darker version. Put it in here*/ +} + +.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; } + +.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; } + +.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; } + +.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; } + +/* ---------------------------------------- */ + + + +/* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ + +.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ + background-repeat: repeat-y; + background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); + background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); + background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); + background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); + background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); + background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); +} + +.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ + background-repeat: repeat-x; + background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); + background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); + background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); + background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); + background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); +} + + +/* theme "3d", "3d-dark" */ + +.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, +.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; } + +.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, +.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; } + +.mCS-3d.mCSB_scrollTools, +.mCS-3d-dark.mCSB_scrollTools{ + opacity: 1; + filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; +} + +.mCS-3d.mCSB_scrollTools .mCSB_draggerRail, +.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, +.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } + +.mCS-3d.mCSB_scrollTools .mCSB_draggerRail, +.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ + width: 8px; + background-color: #000; background-color: rgba(0,0,0,0.2); + box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2); +} + +.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, +.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, +.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, +.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, +.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, +.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } + +.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; } + +.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, +.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ + width: 100%; + height: 8px; + margin: 4px 0; + box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2); +} + +.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ + width: 100%; + height: 8px; + margin: 4px auto; +} + +.mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } + +.mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } + +.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } + +.mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } + + +/* theme "3d-dark" */ + +.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ + background-color: #000; background-color: rgba(0,0,0,0.1); + box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); +} + +.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); } + +.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } + +.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } + +.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } + +.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } + +/* ---------------------------------------- */ + + + +/* theme: "3d-thick", "3d-thick-dark" */ + +.mCS-3d-thick.mCSB_scrollTools, +.mCS-3d-thick-dark.mCSB_scrollTools{ + opacity: 1; + filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; +} + +.mCS-3d-thick.mCSB_scrollTools, +.mCS-3d-thick-dark.mCSB_scrollTools, +.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, +.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } + +.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } + +.mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, +.mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; } + +.mCS-3d-thick.mCSB_scrollTools_vertical, +.mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } + +.mCS-3d-thick.mCSB_scrollTools_horizontal, +.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ + bottom: 1px; + box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); +} + +.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ + box-shadow: inset 1px 0 0 rgba(255,255,255,0.4); + width: 12px; + margin: 2px; + position: absolute; + height: auto; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } + +.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, +.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, +.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } + +.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ + height: 12px; + width: auto; +} + +.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{ + background-color: #000; background-color: rgba(0,0,0,0.05); + box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); +} + +.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } + +.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } + +.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } + +.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } + +.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } + + +/* theme: "3d-thick-dark" */ + +.mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } + +.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); } + +.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); } + +.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); } + +.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, +.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, +.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; } + +.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ + background-color: #fff; background-color: rgba(0,0,0,0.05); + box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); +} + +.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } + +.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } + +.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } + +.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } + +.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } + +/* ---------------------------------------- */ + + + +/* theme: "minimal", "minimal-dark" */ + +.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, +.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ + right: 0; + margin: 12px 0; +} + +.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, +.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, +.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, +.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ + bottom: 0; + margin: 0 12px; +} + +/* RTL direction/left-side scrollbar */ +.mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, +.mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ + left: 0; + right: auto; +} + +.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, +.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } + +.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, +.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; } + +.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, +.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; } + +.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ + background-color: #fff; background-color: rgba(255,255,255,0.2); + filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; +} + +.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, +.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ + background-color: #fff; background-color: rgba(255,255,255,0.5); + filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; +} + + +/* theme: "minimal-dark" */ + +.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ + background-color: #000; background-color: rgba(0,0,0,0.2); + filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; +} + +.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, +.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ + background-color: #000; background-color: rgba(0,0,0,0.5); + filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; +} + +/* ---------------------------------------- */ + + + +/* theme "light-3", "dark-3" */ + +.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, +.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ + width: 6px; + background-color: #000; background-color: rgba(0,0,0,0.2); +} + +.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; } + +.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, +.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{ + width: 100%; + height: 6px; + margin: 5px 0; +} + +.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, +.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, +.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, +.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ + width: 12px; +} + +.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, +.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, +.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, +.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ + height: 12px; + margin: 2px 0; +} + +.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } + +.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } + +.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } + +.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } + + +/* theme "dark-3" */ + +.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } + +.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } + +.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, +.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } + +.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } + +.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } + +.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } + +.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } + +.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } + +/* ---------------------------------------- */ + + + +/* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ + +.mCS-inset.mCSB_scrollTools .mCSB_draggerRail, +.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, +.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, +.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, +.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, +.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ + width: 12px; + background-color: #000; background-color: rgba(0,0,0,0.2); +} + +.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ + width: 6px; + margin: 3px 5px; + position: absolute; + height: auto; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, +.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ + height: 6px; + margin: 5px 3px; + position: absolute; + width: auto; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, +.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, +.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, +.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, +.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, +.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ + width: 100%; + height: 12px; + margin: 2px 0; +} + +.mCS-inset.mCSB_scrollTools .mCSB_buttonUp, +.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, +.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } - .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } +.mCS-inset.mCSB_scrollTools .mCSB_buttonDown, +.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, +.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } - .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-inset.mCSB_scrollTools .mCSB_buttonLeft, +.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, +.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } - .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; } +.mCS-inset.mCSB_scrollTools .mCSB_buttonRight, +.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, +.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } - .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -20px; } - .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -40px; } +/* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ - .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; } - - - /* theme: "dark-2" */ +.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, +.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } - .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-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, +.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, +.mCS-inset-3-dark.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 .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-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, +.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, +.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, +.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, +.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, +.mCS-inset-3-dark.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_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } +.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, +.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, +.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } - .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-inset-dark.mCSB_scrollTools .mCSB_buttonUp, +.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, +.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } + +.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, +.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, +.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } + +.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, +.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, +.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } + +.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, +.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, +.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } + + +/* theme "inset-2", "inset-2-dark" */ + +.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, +.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ + background-color: transparent; + border-width: 1px; + border-style: solid; + border-color: #fff; + border-color: rgba(255,255,255,0.2); + -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; +} - .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; } +.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); } - .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; } - .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; } +/* theme "inset-3", "inset-3-dark" */ - .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -56px; } - - /* ---------------------------------------- */ - +.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); } +.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); } - /* theme: "light-thick", "dark-thick" */ +.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } - .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-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } - .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-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, +.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } - .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, - .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{ - width: 100%; - height: 4px; - margin: 6px 0; - } +.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); } - .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-inset-3-dark.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:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } +.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, +.mCS-inset-3-dark.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_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 .mCSB_dragger_bar, - .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; } - - .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, - .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; } - - .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ - width: 100%; - height: 2px; - margin: 7px auto; - } - - - /* theme "dark-thin" */ - - .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } - - .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } - - .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } - - .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, - .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } - - .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } - - .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } - - .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } - - .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } - - /* ---------------------------------------- */ - - - - /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ - - .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); } - - .mCS-rounded.mCSB_scrollTools .mCSB_dragger, - .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, - .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, - .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; } - - .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ - width: 14px; - margin: 0 1px; - } - - .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, - .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, - .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, - .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; } - - .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ - height: 14px; - margin: 1px 0; - } - - .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, - .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, - .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, - .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ - width: 16px; /* auto-expanded scrollbar */ - height: 16px; - margin: -1px 0; - } - - .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, - .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, - .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, - .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ } - - .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, - .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, - .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, - .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ - height: 16px; /* auto-expanded scrollbar */ - width: 16px; - margin: 0 -1px; - } - - .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, - .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, - .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, - .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ - height: 4px; /* auto-expanded scrollbar */ - margin: 6px 0; - } - - .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; } - - .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; } - - .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; } - - .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; } - - - /* theme "rounded-dark", "rounded-dots-dark" */ - - .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } - - .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } - - .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, - .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } - - .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, - .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, - .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, - .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } - - .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; } - - .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; } - - .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; } - - .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; } - - - /* theme "rounded-dots", "rounded-dots-dark" */ - - .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, - .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; } - - .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, - .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, - .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, - .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ - background-color: transparent; - background-position: center; - } - - .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, - .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); - background-repeat: repeat-y; - opacity: 0.3; - filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; - } - - .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, - .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ - height: 4px; - margin: 6px 0; - background-repeat: repeat-x; - } - - .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; } - - .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; } - - .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; } - - .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; } - - - /* theme "rounded-dots-dark" */ - - .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); - } - - .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; } - - .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; } - - .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; } - - .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; } - - /* ---------------------------------------- */ - - - - /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ - - .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ - background-repeat: repeat-y; - background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); - background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); - background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); - background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); - background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); - background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); - } - - .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ - background-repeat: repeat-x; - background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); - background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); - background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); - background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); - background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); - } - - - /* theme "3d", "3d-dark" */ - - .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, - .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; } - - .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, - .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; } - - .mCS-3d.mCSB_scrollTools, - .mCS-3d-dark.mCSB_scrollTools{ - opacity: 1; - filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; - } - - .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, - .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, - .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } - - .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, - .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ - width: 8px; - background-color: #000; background-color: rgba(0,0,0,0.2); - box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2); - } - - .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, - .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, - .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, - .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, - .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, - .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } - - .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; } - - .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, - .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ - width: 100%; - height: 8px; - margin: 4px 0; - box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2); - } - - .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ - width: 100%; - height: 8px; - margin: 4px auto; - } - - .mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } - - .mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } - - .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } - - .mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } - - - /* theme "3d-dark" */ - - .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ - background-color: #000; background-color: rgba(0,0,0,0.1); - box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); - } - - .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); } - - .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } - - .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } - - .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } - - .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } - - /* ---------------------------------------- */ - - - - /* theme: "3d-thick", "3d-thick-dark" */ - - .mCS-3d-thick.mCSB_scrollTools, - .mCS-3d-thick-dark.mCSB_scrollTools{ - opacity: 1; - filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; - } - - .mCS-3d-thick.mCSB_scrollTools, - .mCS-3d-thick-dark.mCSB_scrollTools, - .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, - .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } - - .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } - - .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, - .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; } - - .mCS-3d-thick.mCSB_scrollTools_vertical, - .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } - - .mCS-3d-thick.mCSB_scrollTools_horizontal, - .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ - bottom: 1px; - box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); - } - - .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ - box-shadow: inset 1px 0 0 rgba(255,255,255,0.4); - width: 12px; - margin: 2px; - position: absolute; - height: auto; - top: 0; - bottom: 0; - left: 0; - right: 0; - } - - .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } - - .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, - .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, - .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } - - .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ - height: 12px; - width: auto; - } - - .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{ - background-color: #000; background-color: rgba(0,0,0,0.05); - box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); - } - - .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } - - .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } - - .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } - - .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } - - .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } - - - /* theme: "3d-thick-dark" */ - - .mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } - - .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); } - - .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); } - - .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); } - - .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, - .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, - .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; } - - .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ - background-color: #fff; background-color: rgba(0,0,0,0.05); - box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); - } - - .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } - - .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } - - .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } - - .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } - - .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } - - /* ---------------------------------------- */ - - - - /* theme: "minimal", "minimal-dark" */ - - .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, - .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ - right: 0; - margin: 12px 0; - } - - .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, - .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, - .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, - .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ - bottom: 0; - margin: 0 12px; - } - - /* RTL direction/left-side scrollbar */ - .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, - .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ - left: 0; - right: auto; - } - - .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, - .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } - - .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, - .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; } - - .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, - .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; } - - .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ - background-color: #fff; background-color: rgba(255,255,255,0.2); - filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; - } - - .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, - .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ - background-color: #fff; background-color: rgba(255,255,255,0.5); - filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; - } - - - /* theme: "minimal-dark" */ - - .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ - background-color: #000; background-color: rgba(0,0,0,0.2); - filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; - } - - .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, - .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ - background-color: #000; background-color: rgba(0,0,0,0.5); - filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; - } - - /* ---------------------------------------- */ - - - - /* theme "light-3", "dark-3" */ - - .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, - .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ - width: 6px; - background-color: #000; background-color: rgba(0,0,0,0.2); - } - - .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; } - - .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, - .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{ - width: 100%; - height: 6px; - margin: 5px 0; - } - - .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, - .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, - .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, - .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ - width: 12px; - } - - .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, - .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, - .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, - .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ - height: 12px; - margin: 2px 0; - } - - .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } - - .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } - - .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } - - .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } - - - /* theme "dark-3" */ - - .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } - - .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } - - .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, - .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } - - .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } - - .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } - - .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } - - .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } - - .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } - - /* ---------------------------------------- */ - - - - /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ - - .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, - .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, - .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, - .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, - .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, - .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ - width: 12px; - background-color: #000; background-color: rgba(0,0,0,0.2); - } - - .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ - width: 6px; - margin: 3px 5px; - position: absolute; - height: auto; - top: 0; - bottom: 0; - left: 0; - right: 0; - } - - .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, - .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ - height: 6px; - margin: 5px 3px; - position: absolute; - width: auto; - top: 0; - bottom: 0; - left: 0; - right: 0; - } - - .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, - .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, - .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, - .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, - .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, - .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ - width: 100%; - height: 12px; - margin: 2px 0; - } - - .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, - .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, - .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } - - .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, - .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, - .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } - - .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, - .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, - .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } - - .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, - .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, - .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } - - - /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ - - .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, - .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } - - .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, - .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, - .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } - - .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, - .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, - .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, - .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, - .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, - .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } - - .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, - .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, - .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } - - .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, - .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, - .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } - - .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, - .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, - .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } - - .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, - .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, - .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } - - .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, - .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, - .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } - - - /* theme "inset-2", "inset-2-dark" */ - - .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, - .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ - background-color: transparent; - border-width: 1px; - border-style: solid; - border-color: #fff; - border-color: rgba(255,255,255,0.2); - -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - } - - .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); } - - - /* theme "inset-3", "inset-3-dark" */ - - .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); } - - .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); } - - .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } - - .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } - - .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, - .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } - - .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); } - - .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } - - .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, - .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } - - /* ---------------------------------------- */ +/* ---------------------------------------- */ diff --git a/js/uncompressed/jquery.mCustomScrollbar.js b/js/uncompressed/jquery.mCustomScrollbar.js index 5d4eacc..c7edea0 100644 --- a/js/uncompressed/jquery.mCustomScrollbar.js +++ b/js/uncompressed/jquery.mCustomScrollbar.js @@ -1,2368 +1,2411 @@ /* -== malihu jquery custom scrollbar plugin == -Version: 3.0.9 -Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller -Author: malihu -Author URI: http://manos.malihu.gr -License: MIT License (MIT) -*/ + == malihu jquery custom scrollbar plugin == + Version: 3.0.9 + Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller + Author: malihu + Author URI: http://manos.malihu.gr + License: MIT License (MIT) + */ /* -Copyright 2010 Manos Malihutsakis (email: manos@malihu.gr) - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in -all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. -*/ + Copyright 2010 Manos Malihutsakis (email: manos@malihu.gr) + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in + all copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + THE SOFTWARE. + */ /* -The code below is fairly long, fully commented and should be normally used in development. -For production, use either the minified jquery.mCustomScrollbar.min.js script or -the production-ready jquery.mCustomScrollbar.concat.min.js which contains the plugin -and dependencies (minified). -*/ + The code below is fairly long, fully commented and should be normally used in development. + For production, use either the minified jquery.mCustomScrollbar.min.js script or + the production-ready jquery.mCustomScrollbar.concat.min.js which contains the plugin + and dependencies (minified). + */ (function(factory){ - if(typeof module!=="undefined" && module.exports){ - module.exports=factory; - }else{ - factory(jQuery,window,document); - } + if(typeof module!=="undefined" && module.exports){ + module.exports=factory; + }else{ + factory(jQuery,window,document); + } }(function($){ -(function(init){ - var _rjs=typeof define==="function" && define.amd, /* RequireJS */ - _njs=typeof module !== "undefined" && module.exports, /* NodeJS */ - _dlp=("https:"==document.location.protocol) ? "https:" : "http:", /* location protocol */ - _url="cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"; - if(!_rjs){ - if(_njs){ - require("jquery-mousewheel")($); - }else{ - /* load jquery-mousewheel plugin (via CDN) if it's not present or not loaded via RequireJS - (works when mCustomScrollbar fn is called on window load) */ - $.event.special.mousewheel || $("head").append(decodeURI("%3Cscript src="+_dlp+"//"+_url+"%3E%3C/script%3E")); - } - } - init(); -}(function(){ - - /* - ---------------------------------------- - PLUGIN NAMESPACE, PREFIX, DEFAULT SELECTOR(S) - ---------------------------------------- - */ - - var pluginNS="mCustomScrollbar", - pluginPfx="mCS", - defaultSelector=".mCustomScrollbar", - - - - - - /* - ---------------------------------------- - DEFAULT OPTIONS - ---------------------------------------- - */ - - defaults={ - /* - set element/content width/height programmatically - values: boolean, pixels, percentage - option default - ------------------------------------- - setWidth false - setHeight false - */ - /* - set the initial css top property of content - values: string (e.g. "-100px", "10%" etc.) - */ - setTop:0, - /* - set the initial css left property of content - values: string (e.g. "-100px", "10%" etc.) - */ - setLeft:0, - /* - scrollbar axis (vertical and/or horizontal scrollbars) - values (string): "y", "x", "yx" - */ - axis:"y", - /* - position of scrollbar relative to content - values (string): "inside", "outside" ("outside" requires elements with position:relative) - */ - scrollbarPosition:"inside", - /* - scrolling inertia - values: integer (milliseconds) - */ - scrollInertia:950, - /* - auto-adjust scrollbar dragger length - values: boolean - */ - autoDraggerLength:true, - /* - auto-hide scrollbar when idle - values: boolean - option default - ------------------------------------- - autoHideScrollbar false - */ - /* - auto-expands scrollbar on mouse-over and dragging - values: boolean - option default - ------------------------------------- - autoExpandScrollbar false - */ - /* - always show scrollbar, even when there's nothing to scroll - values: integer (0=disable, 1=always show dragger rail and buttons, 2=always show dragger rail, dragger and buttons), boolean - */ - alwaysShowScrollbar:0, - /* - scrolling always snaps to a multiple of this number in pixels - values: integer - option default - ------------------------------------- - snapAmount null - */ - /* - when snapping, snap with this number in pixels as an offset - values: integer - */ - snapOffset:0, - /* - mouse-wheel scrolling - */ - mouseWheel:{ - /* - enable mouse-wheel scrolling - values: boolean - */ - enable:true, - /* - scrolling amount in pixels - values: "auto", integer - */ - scrollAmount:"auto", - /* - mouse-wheel scrolling axis - the default scrolling direction when both vertical and horizontal scrollbars are present - values (string): "y", "x" - */ - axis:"y", - /* - prevent the default behaviour which automatically scrolls the parent element(s) when end of scrolling is reached - values: boolean - option default - ------------------------------------- - preventDefault null - */ - /* - the reported mouse-wheel delta value. The number of lines (translated to pixels) one wheel notch scrolls. - values: "auto", integer - "auto" uses the default OS/browser value - */ - deltaFactor:"auto", - /* - normalize mouse-wheel delta to -1 or 1 (disables mouse-wheel acceleration) - values: boolean - option default - ------------------------------------- - normalizeDelta null - */ - /* - invert mouse-wheel scrolling direction - values: boolean - option default - ------------------------------------- - invert null - */ - /* - the tags that disable mouse-wheel when cursor is over them - */ - disableOver:["select","option","keygen","datalist","textarea"] - }, - /* - scrollbar buttons - */ - scrollButtons:{ - /* - enable scrollbar buttons - values: boolean - option default - ------------------------------------- - enable null - */ - /* - scrollbar buttons scrolling type - values (string): "stepless", "stepped" - */ - scrollType:"stepless", - /* - scrolling amount in pixels - values: "auto", integer - */ - scrollAmount:"auto" - /* - tabindex of the scrollbar buttons - values: false, integer - option default - ------------------------------------- - tabindex null - */ - }, - /* - keyboard scrolling - */ - keyboard:{ - /* - enable scrolling via keyboard - values: boolean - */ - enable:true, - /* - keyboard scrolling type - values (string): "stepless", "stepped" - */ - scrollType:"stepless", - /* - scrolling amount in pixels - values: "auto", integer - */ - scrollAmount:"auto" - }, - /* - enable content touch-swipe scrolling - values: boolean, integer, string (number) - integer values define the axis-specific minimum amount required for scrolling momentum - */ - contentTouchScroll:25, - /* - advanced option parameters - */ - advanced:{ - /* - auto-expand content horizontally (for "x" or "yx" axis) - values: boolean - option default - ------------------------------------- - autoExpandHorizontalScroll null - */ - /* - auto-scroll to elements with focus - */ - autoScrollOnFocus:"input,textarea,select,button,datalist,keygen,a[tabindex],area,object,[contenteditable='true']", - /* - auto-update scrollbars on content, element or viewport resize - should be true for fluid layouts/elements, adding/removing content dynamically, hiding/showing elements, content with images etc. - values: boolean - */ - updateOnContentResize:true, - /* - auto-update scrollbars each time each image inside the element is fully loaded - values: boolean - */ - updateOnImageLoad:true, - /* - auto-update scrollbars based on the amount and size changes of specific selectors - useful when you need to update the scrollbar(s) automatically, each time a type of element is added, removed or changes its size - values: boolean, string (e.g. "ul li" will auto-update scrollbars each time list-items inside the element are changed) - a value of true (boolean) will auto-update scrollbars each time any element is changed - option default - ------------------------------------- - updateOnSelectorChange null - */ - /* - extra selectors that'll release scrollbar dragging upon mouseup, pointerup, touchend etc. (e.g. "selector-1, selector-2") - option default - ------------------------------------- - releaseDraggableSelectors null - */ - /* - auto-update timeout - values: integer (milliseconds) - */ - autoUpdateTimeout:60 - }, - /* - scrollbar theme - values: string (see CSS/plugin URI for a list of ready-to-use themes) - */ - theme:"light", - /* - user defined callback functions - */ - callbacks:{ - /* - Available callbacks: - callback default - ------------------------------------- - onInit null - onScrollStart null - onScroll null - onTotalScroll null - onTotalScrollBack null - whileScrolling null - onOverflowY null - onOverflowX null - onOverflowYNone null - onOverflowXNone null - onImageLoad null - onSelectorChange null - onUpdate null - */ - onTotalScrollOffset:0, - onTotalScrollBackOffset:0, - alwaysTriggerOffsets:true - } - /* - add scrollbar(s) on all elements matching the current selector, now and in the future - values: boolean, string - string values: "on" (enable), "once" (disable after first invocation), "off" (disable) - liveSelector values: string (selector) - option default - ------------------------------------- - live false - liveSelector null - */ - }, - - - - - - /* - ---------------------------------------- - VARS, CONSTANTS - ---------------------------------------- - */ - - totalInstances=0, /* plugin instances amount */ - liveTimers={}, /* live option timers */ - oldIE=(window.attachEvent && !window.addEventListener) ? 1 : 0, /* detect IE < 9 */ - touchActive=false,touchable, /* global touch vars (for touch and pointer events) */ - /* general plugin classes */ - classes=[ - "mCSB_dragger_onDrag","mCSB_scrollTools_onDrag","mCS_img_loaded","mCS_disabled","mCS_destroyed","mCS_no_scrollbar", - "mCS-autoHide","mCS-dir-rtl","mCS_no_scrollbar_y","mCS_no_scrollbar_x","mCS_y_hidden","mCS_x_hidden","mCSB_draggerContainer", - "mCSB_buttonUp","mCSB_buttonDown","mCSB_buttonLeft","mCSB_buttonRight" - ], - - - - - - /* - ---------------------------------------- - METHODS - ---------------------------------------- - */ - - methods={ - - /* - plugin initialization method - creates the scrollbar(s), plugin data object and options - ---------------------------------------- - */ - - init:function(options){ - - var options=$.extend(true,{},defaults,options), - selector=_selector.call(this); /* validate selector */ - - /* - if live option is enabled, monitor for elements matching the current selector and - apply scrollbar(s) when found (now and in the future) - */ - if(options.live){ - var liveSelector=options.liveSelector || this.selector || defaultSelector, /* live selector(s) */ - $liveSelector=$(liveSelector); /* live selector(s) as jquery object */ - if(options.live==="off"){ - /* - disable live if requested - usage: $(selector).mCustomScrollbar({live:"off"}); - */ - removeLiveTimers(liveSelector); - return; - } - liveTimers[liveSelector]=setTimeout(function(){ - /* call mCustomScrollbar fn on live selector(s) every half-second */ - $liveSelector.mCustomScrollbar(options); - if(options.live==="once" && $liveSelector.length){ - /* disable live after first invocation */ - removeLiveTimers(liveSelector); - } - },500); - }else{ - removeLiveTimers(liveSelector); - } - - /* options backward compatibility (for versions < 3.0.0) and normalization */ - options.setWidth=(options.set_width) ? options.set_width : options.setWidth; - options.setHeight=(options.set_height) ? options.set_height : options.setHeight; - options.axis=(options.horizontalScroll) ? "x" : _findAxis(options.axis); - options.scrollInertia=options.scrollInertia>0 && options.scrollInertia<17 ? 17 : options.scrollInertia; - if(typeof options.mouseWheel!=="object" && options.mouseWheel==true){ /* old school mouseWheel option (non-object) */ - options.mouseWheel={enable:true,scrollAmount:"auto",axis:"y",preventDefault:false,deltaFactor:"auto",normalizeDelta:false,invert:false} - } - options.mouseWheel.scrollAmount=!options.mouseWheelPixels ? options.mouseWheel.scrollAmount : options.mouseWheelPixels; - options.mouseWheel.normalizeDelta=!options.advanced.normalizeMouseWheelDelta ? options.mouseWheel.normalizeDelta : options.advanced.normalizeMouseWheelDelta; - options.scrollButtons.scrollType=_findScrollButtonsType(options.scrollButtons.scrollType); - - _theme(options); /* theme-specific options */ - - /* plugin constructor */ - return $(selector).each(function(){ - - var $this=$(this); - - if(!$this.data(pluginPfx)){ /* prevent multiple instantiations */ - - /* store options and create objects in jquery data */ - $this.data(pluginPfx,{ - idx:++totalInstances, /* instance index */ - opt:options, /* options */ - scrollRatio:{y:null,x:null}, /* scrollbar to content ratio */ - overflowed:null, /* overflowed axis */ - contentReset:{y:null,x:null}, /* object to check when content resets */ - bindEvents:false, /* object to check if events are bound */ - tweenRunning:false, /* object to check if tween is running */ - sequential:{}, /* sequential scrolling object */ - langDir:$this.css("direction"), /* detect/store direction (ltr or rtl) */ - cbOffsets:null, /* object to check whether callback offsets always trigger */ - /* - object to check how scrolling events where last triggered - "internal" (default - triggered by this script), "external" (triggered by other scripts, e.g. via scrollTo method) - usage: object.data("mCS").trigger - */ - trigger:null - }); - - var d=$this.data(pluginPfx),o=d.opt, - /* HTML data attributes */ - htmlDataAxis=$this.data("mcs-axis"),htmlDataSbPos=$this.data("mcs-scrollbar-position"),htmlDataTheme=$this.data("mcs-theme"); - - if(htmlDataAxis){o.axis=htmlDataAxis;} /* usage example: data-mcs-axis="y" */ - if(htmlDataSbPos){o.scrollbarPosition=htmlDataSbPos;} /* usage example: data-mcs-scrollbar-position="outside" */ - if(htmlDataTheme){ /* usage example: data-mcs-theme="minimal" */ - o.theme=htmlDataTheme; - _theme(o); /* theme-specific options */ - } - - _pluginMarkup.call(this); /* add plugin markup */ - - $("#mCSB_"+d.idx+"_container img:not(."+classes[2]+")").addClass(classes[2]); /* flag loaded images */ - - methods.update.call(null,$this); /* call the update method */ - - } - - }); - - }, - /* ---------------------------------------- */ - - - - /* - plugin update method - updates content and scrollbar(s) values, events and status - ---------------------------------------- - usage: $(selector).mCustomScrollbar("update"); - */ - - update:function(el,cb){ - - var selector=el || _selector.call(this); /* validate selector */ - - return $(selector).each(function(){ - - var $this=$(this); - - if($this.data(pluginPfx)){ /* check if plugin has initialized */ - - var d=$this.data(pluginPfx),o=d.opt, - mCSB_container=$("#mCSB_"+d.idx+"_container"), - mCSB_dragger=[$("#mCSB_"+d.idx+"_dragger_vertical"),$("#mCSB_"+d.idx+"_dragger_horizontal")]; - - if(!mCSB_container.length){return;} - - if(d.tweenRunning){_stop($this);} /* stop any running tweens while updating */ - - /* if element was disabled or destroyed, remove class(es) */ - if($this.hasClass(classes[3])){$this.removeClass(classes[3]);} - if($this.hasClass(classes[4])){$this.removeClass(classes[4]);} - - _maxHeight.call(this); /* detect/set css max-height value */ - - _expandContentHorizontally.call(this); /* expand content horizontally */ - - if(o.axis!=="y" && !o.advanced.autoExpandHorizontalScroll){ - mCSB_container.css("width",_contentWidth(mCSB_container.children())); - } - - d.overflowed=_overflowed.call(this); /* determine if scrolling is required */ - - _scrollbarVisibility.call(this); /* show/hide scrollbar(s) */ - - /* auto-adjust scrollbar dragger length analogous to content */ - if(o.autoDraggerLength){_setDraggerLength.call(this);} - - _scrollRatio.call(this); /* calculate and store scrollbar to content ratio */ - - _bindEvents.call(this); /* bind scrollbar events */ - - /* reset scrolling position and/or events */ - var to=[Math.abs(mCSB_container[0].offsetTop),Math.abs(mCSB_container[0].offsetLeft)]; - if(o.axis!=="x"){ /* y/yx axis */ - if(!d.overflowed[0]){ /* y scrolling is not required */ - _resetContentPosition.call(this); /* reset content position */ - if(o.axis==="y"){ - _unbindEvents.call(this); - }else if(o.axis==="yx" && d.overflowed[1]){ - _scrollTo($this,to[1].toString(),{dir:"x",dur:0,overwrite:"none"}); - } - }else if(mCSB_dragger[0].height()>mCSB_dragger[0].parent().height()){ - _resetContentPosition.call(this); /* reset content position */ - }else{ /* y scrolling is required */ - _scrollTo($this,to[0].toString(),{dir:"y",dur:0,overwrite:"none"}); - d.contentReset.y=null; - } - } - if(o.axis!=="y"){ /* x/yx axis */ - if(!d.overflowed[1]){ /* x scrolling is not required */ - _resetContentPosition.call(this); /* reset content position */ - if(o.axis==="x"){ - _unbindEvents.call(this); - }else if(o.axis==="yx" && d.overflowed[0]){ - _scrollTo($this,to[0].toString(),{dir:"y",dur:0,overwrite:"none"}); - } - }else if(mCSB_dragger[1].width()>mCSB_dragger[1].parent().width()){ - _resetContentPosition.call(this); /* reset content position */ - }else{ /* x scrolling is required */ - _scrollTo($this,to[1].toString(),{dir:"x",dur:0,overwrite:"none"}); - d.contentReset.x=null; - } - } - - /* callbacks: onImageLoad, onSelectorChange, onUpdate */ - if(cb && d){ - if(cb===2 && o.callbacks.onImageLoad && typeof o.callbacks.onImageLoad==="function"){ - o.callbacks.onImageLoad.call(this); - }else if(cb===3 && o.callbacks.onSelectorChange && typeof o.callbacks.onSelectorChange==="function"){ - o.callbacks.onSelectorChange.call(this); - }else if(o.callbacks.onUpdate && typeof o.callbacks.onUpdate==="function"){ - o.callbacks.onUpdate.call(this); - } - } - - _autoUpdate.call(this); /* initialize automatic updating (for dynamic content, fluid layouts etc.) */ - - } - - }); - - }, - /* ---------------------------------------- */ - - - - /* - plugin scrollTo method - triggers a scrolling event to a specific value - ---------------------------------------- - usage: $(selector).mCustomScrollbar("scrollTo",value,options); - */ - - scrollTo:function(val,options){ - - /* prevent silly things like $(selector).mCustomScrollbar("scrollTo",undefined); */ - if(typeof val=="undefined" || val==null){return;} - - var selector=_selector.call(this); /* validate selector */ - - return $(selector).each(function(){ - - var $this=$(this); - - if($this.data(pluginPfx)){ /* check if plugin has initialized */ - - var d=$this.data(pluginPfx),o=d.opt, - /* method default options */ - methodDefaults={ - trigger:"external", /* method is by default triggered externally (e.g. from other scripts) */ - scrollInertia:o.scrollInertia, /* scrolling inertia (animation duration) */ - scrollEasing:"mcsEaseInOut", /* animation easing */ - moveDragger:false, /* move dragger instead of content */ - timeout:60, /* scroll-to delay */ - callbacks:true, /* enable/disable callbacks */ - onStart:true, - onUpdate:true, - onComplete:true - }, - methodOptions=$.extend(true,{},methodDefaults,options), - to=_arr.call(this,val),dur=methodOptions.scrollInertia>0 && methodOptions.scrollInertia<17 ? 17 : methodOptions.scrollInertia; - - /* translate yx values to actual scroll-to positions */ - to[0]=_to.call(this,to[0],"y"); - to[1]=_to.call(this,to[1],"x"); - - /* - check if scroll-to value moves the dragger instead of content. - Only pixel values apply on dragger (e.g. 100, "100px", "-=100" etc.) - */ - if(methodOptions.moveDragger){ - to[0]*=d.scrollRatio.y; - to[1]*=d.scrollRatio.x; - } - - methodOptions.dur=dur; - - setTimeout(function(){ - /* do the scrolling */ - if(to[0]!==null && typeof to[0]!=="undefined" && o.axis!=="x" && d.overflowed[0]){ /* scroll y */ - methodOptions.dir="y"; - methodOptions.overwrite="all"; - _scrollTo($this,to[0].toString(),methodOptions); - } - if(to[1]!==null && typeof to[1]!=="undefined" && o.axis!=="y" && d.overflowed[1]){ /* scroll x */ - methodOptions.dir="x"; - methodOptions.overwrite="none"; - _scrollTo($this,to[1].toString(),methodOptions); - } - },methodOptions.timeout); - - } - - }); - - }, - /* ---------------------------------------- */ - - - - /* - plugin stop method - stops scrolling animation - ---------------------------------------- - usage: $(selector).mCustomScrollbar("stop"); - */ - stop:function(){ - - var selector=_selector.call(this); /* validate selector */ - - return $(selector).each(function(){ - - var $this=$(this); - - if($this.data(pluginPfx)){ /* check if plugin has initialized */ - - _stop($this); - - } - - }); - - }, - /* ---------------------------------------- */ - - - - /* - plugin disable method - temporarily disables the scrollbar(s) - ---------------------------------------- - usage: $(selector).mCustomScrollbar("disable",reset); - reset (boolean): resets content position to 0 - */ - disable:function(r){ - - var selector=_selector.call(this); /* validate selector */ - - return $(selector).each(function(){ - - var $this=$(this); - - if($this.data(pluginPfx)){ /* check if plugin has initialized */ - - var d=$this.data(pluginPfx); - - _autoUpdate.call(this,"remove"); /* remove automatic updating */ - - _unbindEvents.call(this); /* unbind events */ - - if(r){_resetContentPosition.call(this);} /* reset content position */ - - _scrollbarVisibility.call(this,true); /* show/hide scrollbar(s) */ - - $this.addClass(classes[3]); /* add disable class */ - - } - - }); - - }, - /* ---------------------------------------- */ - - - - /* - plugin destroy method - completely removes the scrollbar(s) and returns the element to its original state - ---------------------------------------- - usage: $(selector).mCustomScrollbar("destroy"); - */ - destroy:function(){ - - var selector=_selector.call(this); /* validate selector */ - - return $(selector).each(function(){ - - var $this=$(this); - - if($this.data(pluginPfx)){ /* check if plugin has initialized */ - - var d=$this.data(pluginPfx),o=d.opt, - mCustomScrollBox=$("#mCSB_"+d.idx), - mCSB_container=$("#mCSB_"+d.idx+"_container"), - scrollbar=$(".mCSB_"+d.idx+"_scrollbar"); - - if(o.live){removeLiveTimers(o.liveSelector || $(selector).selector);} /* remove live timers */ - - _autoUpdate.call(this,"remove"); /* remove automatic updating */ - - _unbindEvents.call(this); /* unbind events */ - - _resetContentPosition.call(this); /* reset content position */ - - $this.removeData(pluginPfx); /* remove plugin data object */ - - _delete(this,"mcs"); /* delete callbacks object */ - - /* remove plugin markup */ - scrollbar.remove(); /* remove scrollbar(s) first (those can be either inside or outside plugin's inner wrapper) */ - mCSB_container.find("img."+classes[2]).removeClass(classes[2]); /* remove loaded images flag */ - mCustomScrollBox.replaceWith(mCSB_container.contents()); /* replace plugin's inner wrapper with the original content */ - /* remove plugin classes from the element and add destroy class */ - $this.removeClass(pluginNS+" _"+pluginPfx+"_"+d.idx+" "+classes[6]+" "+classes[7]+" "+classes[5]+" "+classes[3]).addClass(classes[4]); - - } - - }); - - } - /* ---------------------------------------- */ - - }, - - - - - - /* - ---------------------------------------- - FUNCTIONS - ---------------------------------------- - */ - - /* validates selector (if selector is invalid or undefined uses the default one) */ - _selector=function(){ - return (typeof $(this)!=="object" || $(this).length<1) ? defaultSelector : this; - }, - /* -------------------- */ - - - /* changes options according to theme */ - _theme=function(obj){ - var fixedSizeScrollbarThemes=["rounded","rounded-dark","rounded-dots","rounded-dots-dark"], - nonExpandedScrollbarThemes=["rounded-dots","rounded-dots-dark","3d","3d-dark","3d-thick","3d-thick-dark","inset","inset-dark","inset-2","inset-2-dark","inset-3","inset-3-dark"], - disabledScrollButtonsThemes=["minimal","minimal-dark"], - enabledAutoHideScrollbarThemes=["minimal","minimal-dark"], - scrollbarPositionOutsideThemes=["minimal","minimal-dark"]; - obj.autoDraggerLength=$.inArray(obj.theme,fixedSizeScrollbarThemes) > -1 ? false : obj.autoDraggerLength; - obj.autoExpandScrollbar=$.inArray(obj.theme,nonExpandedScrollbarThemes) > -1 ? false : obj.autoExpandScrollbar; - obj.scrollButtons.enable=$.inArray(obj.theme,disabledScrollButtonsThemes) > -1 ? false : obj.scrollButtons.enable; - obj.autoHideScrollbar=$.inArray(obj.theme,enabledAutoHideScrollbarThemes) > -1 ? true : obj.autoHideScrollbar; - obj.scrollbarPosition=$.inArray(obj.theme,scrollbarPositionOutsideThemes) > -1 ? "outside" : obj.scrollbarPosition; - }, - /* -------------------- */ - - - /* live option timers removal */ - removeLiveTimers=function(selector){ - if(liveTimers[selector]){ - clearTimeout(liveTimers[selector]); - _delete(liveTimers,selector); - } - }, - /* -------------------- */ - - - /* normalizes axis option to valid values: "y", "x", "yx" */ - _findAxis=function(val){ - return (val==="yx" || val==="xy" || val==="auto") ? "yx" : (val==="x" || val==="horizontal") ? "x" : "y"; - }, - /* -------------------- */ - - - /* normalizes scrollButtons.scrollType option to valid values: "stepless", "stepped" */ - _findScrollButtonsType=function(val){ - return (val==="stepped" || val==="pixels" || val==="step" || val==="click") ? "stepped" : "stepless"; - }, - /* -------------------- */ - - - /* generates plugin markup */ - _pluginMarkup=function(){ - var $this=$(this),d=$this.data(pluginPfx),o=d.opt, - expandClass=o.autoExpandScrollbar ? " "+classes[1]+"_expand" : "", - scrollbar=["
"," "], - wrapperClass=o.axis==="yx" ? "mCSB_vertical_horizontal" : o.axis==="x" ? "mCSB_horizontal" : "mCSB_vertical", - scrollbars=o.axis==="yx" ? scrollbar[0]+scrollbar[1] : o.axis==="x" ? scrollbar[1] : scrollbar[0], - contentWrapper=o.axis==="yx" ? "" : "", - autoHideClass=o.autoHideScrollbar ? " "+classes[6] : "", - scrollbarDirClass=(o.axis!=="x" && d.langDir==="rtl") ? " "+classes[7] : ""; - if(o.setWidth){$this.css("width",o.setWidth);} /* set element width */ - if(o.setHeight){$this.css("height",o.setHeight);} /* set element height */ - o.setLeft=(o.axis!=="y" && d.langDir==="rtl") ? "989999px" : o.setLeft; /* adjust left position for rtl direction */ - $this.addClass(pluginNS+" _"+pluginPfx+"_"+d.idx+autoHideClass+scrollbarDirClass).wrapInner("