You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3690 lines
112 KiB
3690 lines
112 KiB
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-color-picker-button { |
|
background-color: #eaeaea; |
|
} |
|
.bi-color-picker-button .color-picker-button-mask { |
|
border: 1px solid #1a1a1a; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-color-picker > .center-element { |
|
border-left: 1px solid #ffffff; |
|
border-top: 1px solid #ffffff; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-color-picker-editor .color-picker-editor-label { |
|
color: #808080; |
|
} |
|
.bi-color-picker-editor .color-picker-editor-display { |
|
background: #ffffff; |
|
-webkit-border-radius: 2px; |
|
-moz-border-radius: 2px; |
|
border-radius: 2px; |
|
box-shadow: 0px 0px 2px 1px #d4dadd inset; |
|
-webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset; |
|
-moz-box-shadow: 0px 0px 2px 1px #d4dadd inset; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
/* BASICS */ |
|
.CodeMirror { |
|
/* Set height, width, borders, and global font properties here */ |
|
font-family: monospace; |
|
cursor: text; |
|
width: 100%; |
|
height: 100%; |
|
color: black; |
|
} |
|
/* PADDING */ |
|
.CodeMirror-lines { |
|
padding: 4px 0; |
|
/* Vertical padding around content */ |
|
} |
|
.CodeMirror pre { |
|
padding: 0 4px; |
|
/* Horizontal padding of content */ |
|
} |
|
.CodeMirror-scrollbar-filler, |
|
.CodeMirror-gutter-filler { |
|
background-color: white; |
|
/* The little square between H and V scrollbars */ |
|
} |
|
/* GUTTER */ |
|
.CodeMirror-gutters { |
|
border-right: 1px solid #ddd; |
|
background-color: #f7f7f7; |
|
white-space: nowrap; |
|
} |
|
.CodeMirror-linenumber { |
|
padding: 0 3px 0 5px; |
|
min-width: 20px; |
|
text-align: right; |
|
color: #999; |
|
white-space: nowrap; |
|
} |
|
.CodeMirror-guttermarker { |
|
color: black; |
|
} |
|
.CodeMirror-guttermarker-subtle { |
|
color: #999; |
|
} |
|
/* CURSOR */ |
|
.CodeMirror div.CodeMirror-cursor { |
|
border-left: 1px solid black; |
|
} |
|
/* Shown when moving in bi-directional text */ |
|
.CodeMirror div.CodeMirror-secondarycursor { |
|
border-left: 1px solid silver; |
|
} |
|
.CodeMirror.cm-fat-cursor div.CodeMirror-cursor { |
|
width: auto; |
|
border: 0; |
|
background: #7e7; |
|
} |
|
.CodeMirror.cm-fat-cursor div.CodeMirror-cursors { |
|
z-index: 1; |
|
} |
|
.cm-animate-fat-cursor { |
|
width: auto; |
|
border: 0; |
|
-webkit-animation: blink 1.06s steps(1) infinite; |
|
-moz-animation: blink 1.06s steps(1) infinite; |
|
animation: blink 1.06s steps(1) infinite; |
|
} |
|
@-moz-keyframes blink { |
|
0% { |
|
background: #7e7; |
|
} |
|
50% { |
|
background: none; |
|
} |
|
100% { |
|
background: #7e7; |
|
} |
|
} |
|
@-webkit-keyframes blink { |
|
0% { |
|
background: #7e7; |
|
} |
|
50% { |
|
background: none; |
|
} |
|
100% { |
|
background: #7e7; |
|
} |
|
} |
|
@keyframes blink { |
|
0% { |
|
background: #7e7; |
|
} |
|
50% { |
|
background: none; |
|
} |
|
100% { |
|
background: #7e7; |
|
} |
|
} |
|
/* Can style cursor different in overwrite (non-insert) mode */ |
|
.cm-tab { |
|
display: inline-block; |
|
text-decoration: inherit; |
|
} |
|
.CodeMirror-ruler { |
|
border-left: 1px solid #ccc; |
|
position: absolute; |
|
} |
|
/* DEFAULT THEME */ |
|
.cm-s-default .cm-header { |
|
color: blue; |
|
} |
|
.cm-s-default .cm-quote { |
|
color: #090; |
|
} |
|
.cm-negative { |
|
color: #d44; |
|
} |
|
.cm-positive { |
|
color: #292; |
|
} |
|
.cm-header, |
|
.cm-strong { |
|
font-weight: bold; |
|
} |
|
.cm-em { |
|
font-style: italic; |
|
} |
|
.cm-link { |
|
text-decoration: underline; |
|
} |
|
.cm-strikethrough { |
|
text-decoration: line-through; |
|
} |
|
.cm-s-default .cm-atom { |
|
color: #219; |
|
} |
|
.cm-s-default .cm-number { |
|
color: #164; |
|
} |
|
.cm-s-default .cm-def { |
|
color: #00f; |
|
} |
|
.cm-s-default .cm-variable-2 { |
|
color: #05a; |
|
} |
|
.cm-s-default .cm-variable-3 { |
|
color: #085; |
|
} |
|
.cm-s-default .cm-comment { |
|
color: #a50; |
|
} |
|
.cm-s-default .cm-string { |
|
color: #a11; |
|
} |
|
.cm-s-default .cm-string-2 { |
|
color: #f50; |
|
} |
|
.cm-s-default .cm-meta { |
|
color: #555; |
|
} |
|
.cm-s-default .cm-qualifier { |
|
color: #555; |
|
} |
|
.cm-s-default .cm-builtin { |
|
color: #30a; |
|
} |
|
.cm-s-default .cm-bracket { |
|
color: #997; |
|
} |
|
.cm-s-default .cm-tag { |
|
color: #170; |
|
} |
|
.cm-s-default .cm-attribute { |
|
color: #00c; |
|
} |
|
.cm-s-default .cm-hr { |
|
color: #999; |
|
} |
|
.cm-s-default .cm-link { |
|
color: #00c; |
|
} |
|
.cm-s-default span[class*="fieldName"] { |
|
color: white; |
|
padding: 1px ; |
|
margin: 1px 0px; |
|
background: #009de3; |
|
} |
|
.cm-s-default span[class*="start"] { |
|
-webkit-border-radius: 3px 0px 0px 3px; |
|
-moz-border-radius: 3px 0px 0px 3px; |
|
border-radius: 3px 0px 0px 3px; |
|
margin-left: 3px; |
|
} |
|
.cm-s-default span[class*="end"] { |
|
-webkit-border-radius: 0px 3px 3px 0px; |
|
-moz-border-radius: 0px 3px 3px 0px; |
|
border-radius: 0px 3px 3px 0px; |
|
margin-right: 3px; |
|
} |
|
.cm-s-default span[class*="start end"] { |
|
-webkit-border-radius: 3px; |
|
-moz-border-radius: 3px; |
|
border-radius: 3px; |
|
} |
|
.cm-s-default span[class*="#"] { |
|
color: #009de3; |
|
} |
|
.cm-s-default .cm-error { |
|
color: #f00; |
|
} |
|
.cm-invalidchar { |
|
color: #f00; |
|
} |
|
.CodeMirror-composing { |
|
border-bottom: 2px solid; |
|
} |
|
/* Default styles for common addons */ |
|
div.CodeMirror span.CodeMirror-matchingbracket { |
|
color: #0f0; |
|
} |
|
div.CodeMirror span.CodeMirror-nonmatchingbracket { |
|
color: #f22; |
|
} |
|
.CodeMirror-matchingtag { |
|
background: rgba(255, 150, 0, 0.3); |
|
} |
|
.CodeMirror-activeline-background { |
|
background: #e8f2ff; |
|
} |
|
/* STOP */ |
|
/* The rest of this file contains styles related to the mechanics of |
|
the editor. You probably shouldn't touch them. */ |
|
.CodeMirror { |
|
position: relative; |
|
overflow: hidden; |
|
background: white; |
|
} |
|
.CodeMirror-scroll { |
|
overflow: scroll !important; |
|
/* Things will break if this is overridden */ |
|
/* 30px is the magic margin used to hide the element's real scrollbars */ |
|
/* See overflow: hidden in .CodeMirror */ |
|
margin-bottom: -30px; |
|
margin-right: -30px; |
|
padding-bottom: 30px; |
|
height: 100%; |
|
outline: none; |
|
/* Prevent dragging from highlighting the element */ |
|
position: relative; |
|
} |
|
.CodeMirror-sizer { |
|
position: relative; |
|
border-right: 30px solid transparent; |
|
} |
|
/* The fake, visible scrollbars. Used to force redraw during scrolling |
|
before actuall scrolling happens, thus preventing shaking and |
|
flickering artifacts. */ |
|
.CodeMirror-vscrollbar, |
|
.CodeMirror-hscrollbar, |
|
.CodeMirror-scrollbar-filler, |
|
.CodeMirror-gutter-filler { |
|
position: absolute; |
|
z-index: 6; |
|
display: none; |
|
} |
|
.CodeMirror-vscrollbar { |
|
right: 0; |
|
top: 0; |
|
overflow-x: hidden; |
|
overflow-y: scroll; |
|
} |
|
.CodeMirror-hscrollbar { |
|
bottom: 0; |
|
left: 0; |
|
overflow-y: hidden; |
|
overflow-x: scroll; |
|
} |
|
.CodeMirror-scrollbar-filler { |
|
right: 0; |
|
bottom: 0; |
|
} |
|
.CodeMirror-gutter-filler { |
|
left: 0; |
|
bottom: 0; |
|
} |
|
.CodeMirror-gutters { |
|
position: absolute; |
|
left: 0; |
|
top: 0; |
|
z-index: 3; |
|
} |
|
.CodeMirror-gutter { |
|
white-space: normal; |
|
height: 100%; |
|
display: inline-block; |
|
margin-bottom: -30px; |
|
/* Hack to make IE7 behave */ |
|
*zoom: 1; |
|
*display: inline; |
|
} |
|
.CodeMirror-gutter-wrapper { |
|
position: absolute; |
|
z-index: 4; |
|
height: 100%; |
|
} |
|
.CodeMirror-gutter-elt { |
|
position: absolute; |
|
cursor: default; |
|
z-index: 4; |
|
} |
|
.CodeMirror-gutter-wrapper { |
|
-webkit-user-select: none; |
|
-moz-user-select: none; |
|
user-select: none; |
|
} |
|
.CodeMirror-lines { |
|
cursor: text; |
|
min-height: 1px; |
|
/* prevents collapsing before first draw */ |
|
} |
|
.CodeMirror pre { |
|
/* Reset some styles that the rest of the page might have set */ |
|
-moz-border-radius: 0; |
|
-webkit-border-radius: 0; |
|
border-radius: 0; |
|
border-width: 0; |
|
background: transparent; |
|
font-family: inherit; |
|
font-size: inherit; |
|
margin: 0; |
|
white-space: pre; |
|
word-wrap: normal; |
|
line-height: 2em; |
|
color: inherit; |
|
z-index: 2; |
|
position: relative; |
|
overflow: visible; |
|
-webkit-tap-highlight-color: transparent; |
|
} |
|
.CodeMirror-wrap pre { |
|
word-wrap: break-word; |
|
white-space: pre-wrap; |
|
word-break: normal; |
|
} |
|
.CodeMirror-linebackground { |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
top: 0; |
|
bottom: 0; |
|
z-index: 0; |
|
} |
|
.CodeMirror-linewidget { |
|
position: relative; |
|
z-index: 2; |
|
overflow: auto; |
|
} |
|
.CodeMirror-code { |
|
outline: none; |
|
} |
|
/* Force content-box sizing for the elements where we expect it */ |
|
.CodeMirror-scroll, |
|
.CodeMirror-sizer, |
|
.CodeMirror-gutter, |
|
.CodeMirror-gutters, |
|
.CodeMirror-linenumber { |
|
-moz-box-sizing: content-box; |
|
box-sizing: content-box; |
|
} |
|
.CodeMirror-measure { |
|
position: absolute; |
|
width: 100%; |
|
height: 0; |
|
overflow: hidden; |
|
visibility: hidden; |
|
} |
|
.CodeMirror-measure pre { |
|
position: static; |
|
} |
|
.CodeMirror div.CodeMirror-cursor { |
|
position: absolute; |
|
border-right: none; |
|
width: 0; |
|
} |
|
div.CodeMirror-cursors { |
|
visibility: hidden; |
|
position: relative; |
|
z-index: 3; |
|
} |
|
.CodeMirror-focused div.CodeMirror-cursors { |
|
visibility: visible; |
|
} |
|
.CodeMirror-selected { |
|
background: #d9d9d9; |
|
} |
|
.CodeMirror-focused .CodeMirror-selected { |
|
background: #d7d4f0; |
|
} |
|
.CodeMirror-crosshair { |
|
cursor: crosshair; |
|
} |
|
.CodeMirror-line::selection, |
|
.CodeMirror-line > span::selection, |
|
.CodeMirror-line > span > span::selection { |
|
background: #d7d4f0; |
|
} |
|
.CodeMirror-line::-moz-selection, |
|
.CodeMirror-line > span::-moz-selection, |
|
.CodeMirror-line > span > span::-moz-selection { |
|
background: #d7d4f0; |
|
} |
|
.cm-searching { |
|
background: #ffa; |
|
background: rgba(255, 255, 0, 0.4); |
|
} |
|
/* IE7 hack to prevent it from returning funny offsetTops on the spans */ |
|
.CodeMirror span { |
|
*vertical-align: text-bottom; |
|
} |
|
/* Used to force a border model for a node */ |
|
.cm-force-border { |
|
padding-right: .1px; |
|
} |
|
@media print { |
|
/* Hide the cursor when printing */ |
|
.CodeMirror div.CodeMirror-cursors { |
|
visibility: hidden; |
|
} |
|
} |
|
/* See issue #2901 */ |
|
.cm-tab-wrap-hack:after { |
|
content: ''; |
|
} |
|
/* Help users use markselection to safely style text background */ |
|
span.CodeMirror-selectedtext { |
|
background: none; |
|
} |
|
/*addon: show-hint*/ |
|
.CodeMirror-hints { |
|
position: absolute; |
|
z-index: 10000; |
|
overflow: hidden; |
|
list-style: none; |
|
margin: 0; |
|
padding: 2px; |
|
-webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2); |
|
-moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2); |
|
box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2); |
|
border-radius: 3px; |
|
border: 1px solid silver; |
|
background: white; |
|
font-size: 90%; |
|
font-family: monospace; |
|
max-height: 20em; |
|
overflow-y: auto; |
|
} |
|
.CodeMirror-hint { |
|
margin: 0; |
|
padding: 0 4px; |
|
border-radius: 2px; |
|
max-width: 19em; |
|
overflow: hidden; |
|
white-space: pre; |
|
color: black; |
|
cursor: pointer; |
|
} |
|
li.CodeMirror-hint-active { |
|
background: #08f; |
|
color: white; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-message-mask { |
|
background-color: #1a1a1a; |
|
opacity: 0.5; |
|
filter: alpha(opacity=50); |
|
} |
|
.bi-message-title { |
|
background-color: #f4f4f4; |
|
color: #808080; |
|
font-size: 16px; |
|
cursor: pointer; |
|
} |
|
.bi-message-text { |
|
font-size: 16px; |
|
-webkit-user-select: text; |
|
-khtml-user-select: text; |
|
-moz-user-select: text; |
|
-ms-user-select: text; |
|
-o-user-select: text; |
|
user-select: text; |
|
} |
|
.bi-message-content { |
|
background-color: #ffffff; |
|
color: #808080; |
|
font-size: 16px; |
|
} |
|
.bi-message-close { |
|
font-size: 25px; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-multi-list-view .bi-button-mask { |
|
opacity: 0.1; |
|
filter: alpha(opacity=10); |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-popup-panel .popup-panel-title { |
|
background: #f4f4f4; |
|
border-bottom: 1px solid #d4dadd; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-searcher-view { |
|
background: #ffffff; |
|
} |
|
.bi-searcher-view .searcher-view-spliter { |
|
background: #d4dadd; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-panel { |
|
border: 1px solid #a3d6e8; |
|
-webkit-border-radius: 2px; |
|
-moz-border-radius: 2px; |
|
border-radius: 2px; |
|
} |
|
.bi-panel .panel-title { |
|
background-color: #d8f2fd; |
|
border-bottom: 1px solid #a3d6e8; |
|
} |
|
.bi-panel .panel-title .panel-title-text { |
|
cursor: text; |
|
color: #808080; |
|
font-size: 14px; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-all-pager .pager-editor { |
|
background-color: #ffffff; |
|
} |
|
.bi-all-pager .all-pager-prev { |
|
font-size: 16px; |
|
background: #f4f4f4; |
|
} |
|
.bi-all-pager .all-pager-next { |
|
font-size: 16px; |
|
background: #f4f4f4; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-pager .page-item { |
|
border: 1px solid #d4dadd; |
|
-webkit-border-radius: 2px; |
|
-moz-border-radius: 2px; |
|
border-radius: 2px; |
|
} |
|
.bi-pager .page-item.active { |
|
background: #009de3; |
|
color: #ffffff; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-direction-pager .direction-pager-prev { |
|
font-size: 16px; |
|
background: #f4f4f4; |
|
} |
|
.bi-direction-pager .direction-pager-next { |
|
font-size: 16px; |
|
background: #f4f4f4; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-number-pager .number-pager-prev { |
|
font-size: 16px; |
|
background: #f4f4f4; |
|
} |
|
.bi-number-pager .number-pager-next { |
|
font-size: 16px; |
|
background: #f4f4f4; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-skip-pager .skip-pager-prev { |
|
font-size: 16px; |
|
background: #f4f4f4; |
|
} |
|
.bi-skip-pager .skip-pager-next { |
|
font-size: 16px; |
|
background: #f4f4f4; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-request-loading .mask-pane { |
|
background: #ffffff; |
|
opacity: 0.8; |
|
filter: alpha(opacity=80); |
|
} |
|
.bi-request-loading .loading-comment { |
|
font-size: 14px; |
|
} |
|
.bi-request-loading .load-fail-comment { |
|
font-size: 14px; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-segment-button:active, |
|
.bi-segment-button.active { |
|
color: #ffffff; |
|
background: #009de3; |
|
} |
|
.bi-segment-button.disabled, |
|
.bi-segment-button.disabled:hover, |
|
.bi-segment-button.disabled:active { |
|
color: #1a1a1a; |
|
background: #ffffff; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-segment > .center-element { |
|
overflow-x: hidden; |
|
overflow-y: hidden; |
|
background: #ffffff; |
|
border-right: 1px solid #d4dadd; |
|
border-top: 1px solid #d4dadd; |
|
border-bottom: 1px solid #d4dadd; |
|
} |
|
.bi-segment > .first-element { |
|
border-left: 1px solid #d4dadd; |
|
-webkit-border-radius: 6px 0px 0px 6px; |
|
-moz-border-radius: 6px 0px 0px 6px; |
|
border-radius: 6px 0px 0px 6px; |
|
} |
|
.bi-segment > .last-element { |
|
-webkit-border-radius: 0px 6px 6px 0px; |
|
-moz-border-radius: 0px 6px 6px 0px; |
|
border-radius: 0px 6px 6px 0px; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-loading-bar .loading-text { |
|
color: #808080; |
|
} |
|
.bi-loading-bar .loading-text:hover, |
|
.bi-loading-bar .loading-text.hover { |
|
color: #009de3; |
|
} |
|
.bi-loading-bar .loading-text.disabled, |
|
.bi-loading-bar .loading-text.disabled:hover, |
|
.bi-loading-bar .loading-text.disabled:active { |
|
color: #ffffff; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-button { |
|
-webkit-border-radius: 2px; |
|
-moz-border-radius: 2px; |
|
border-radius: 2px; |
|
border: 1px solid #009de3; |
|
background-color: #009de3; |
|
text-align: center; |
|
vertical-align: middle; |
|
cursor: pointer !important; |
|
font-size: 14px; |
|
} |
|
.bi-button.button-common, |
|
.bi-button.button-common .b-font { |
|
color: #ffffff; |
|
} |
|
.bi-button.button-common .b-font:before { |
|
color: #ffffff; |
|
} |
|
.bi-button.button-ignore { |
|
background-color: #ffffff; |
|
border-color: #d4dadd; |
|
} |
|
.bi-button.button-ignore, |
|
.bi-button.button-ignore .b-font { |
|
color: #1a1a1a; |
|
} |
|
.bi-button.button-success { |
|
background-color: #58cc7d; |
|
border-color: #58cc7d; |
|
} |
|
.bi-button.button-success, |
|
.bi-button.button-success .b-font { |
|
color: #ffffff; |
|
} |
|
.bi-button.button-success .b-font:before { |
|
color: #ffffff; |
|
} |
|
.bi-button.button-warning { |
|
background-color: #e85050; |
|
border-color: #e85050; |
|
} |
|
.bi-button.button-warning, |
|
.bi-button.button-warning .b-font { |
|
color: #ffffff; |
|
} |
|
.bi-button.button-warning .b-font:before { |
|
color: #ffffff; |
|
} |
|
.bi-button.button-common.disabled, |
|
.bi-button.button-success.disabled, |
|
.bi-button.button-warning.disabled { |
|
background: #c4c6c6 !important; |
|
border-color: #c4c6c6 !important; |
|
} |
|
.bi-button.button-common.disabled, |
|
.bi-button.button-success.disabled, |
|
.bi-button.button-warning.disabled, |
|
.bi-button.button-common.disabled .b-font, |
|
.bi-button.button-success.disabled .b-font, |
|
.bi-button.button-warning.disabled .b-font { |
|
color: #ffffff !important; |
|
} |
|
.bi-button.button-common.disabled .b-font:before, |
|
.bi-button.button-success.disabled .b-font:before, |
|
.bi-button.button-warning.disabled .b-font:before { |
|
color: #ffffff !important; |
|
} |
|
.bi-button.button-ignore.disabled { |
|
background: #ffffff !important; |
|
border-color: #d4dadd !important; |
|
} |
|
.bi-button.button-ignore.disabled, |
|
.bi-button.button-ignore.disabled .b-font { |
|
color: #c4c6c6 !important; |
|
} |
|
.bi-button.button-ignore.disabled .b-font:before { |
|
color: #c4c6c6 !important; |
|
} |
|
.bi-basic-button.button-common .bi-button-mask, |
|
.bi-basic-button.button-success .bi-button-mask, |
|
.bi-basic-button.button-warning .bi-button-mask { |
|
opacity: 0.2; |
|
filter: alpha(opacity=20); |
|
background-color: #ffffff; |
|
} |
|
.bi-basic-button .bi-button-mask { |
|
opacity: 0.2; |
|
filter: alpha(opacity=20); |
|
background-color: #1a1a1a; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-single-select-icon-text-item:active .b-font:before, |
|
.bi-single-select-icon-text-item.active .b-font:before { |
|
color: #009de3; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-editor { |
|
font-size: 12px; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-multifile-editor .multifile-editor { |
|
text-align: right; |
|
cursor: pointer; |
|
font-size: 100px; |
|
z-index: 2; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-record-editor .record-editor-text { |
|
font-size: 12px; |
|
background: #f4f4f4; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-shelter-editor .shelter-editor-text { |
|
font-size: 12px; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-sign-editor .sign-editor-text { |
|
font-size: 12px; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-state-editor { |
|
font-size: 12px; |
|
} |
|
.bi-state-editor .state-editor-infinite-text { |
|
font-size: 12px; |
|
color: #1a1a1a; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-simple-state-editor { |
|
font-size: 12px; |
|
} |
|
.bi-simple-state-editor .state-editor-infinite-text { |
|
font-size: 12px; |
|
color: #1a1a1a; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-textarea-editor { |
|
overflow-x: hidden; |
|
overflow-y: hidden; |
|
} |
|
.bi-textarea-editor .textarea-editor-content { |
|
font-size: 12px; |
|
} |
|
.bi-textarea-editor .textarea-editor-content { |
|
border: none; |
|
} |
|
.bi-textarea-editor .textarea-editor-content.textarea-editor-focus { |
|
border: 1px solid #009de3; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-file { |
|
opacity: 0; |
|
filter: alpha(opacity=0); |
|
z-index: 2; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-input { |
|
border: none; |
|
outline: none; |
|
background-color: transparent; |
|
padding: 0; |
|
margin: 0; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.bi-input.bi-input-focus { |
|
border: none; |
|
} |
|
.bi-input.bi-input-error { |
|
border: none; |
|
color: #e85050 !important; |
|
} |
|
.bi-input.disabled { |
|
background-color: white; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-text { |
|
text-overflow: ellipsis; |
|
overflow-x: hidden; |
|
white-space: nowrap; |
|
word-break: break-word; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-bubble { |
|
font-size: 14px; |
|
} |
|
.bi-bubble .bubble-text { |
|
-webkit-border-radius: 2px; |
|
-moz-border-radius: 2px; |
|
border-radius: 2px; |
|
background: #fddddd; |
|
color: #e85050; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-tip { |
|
position: fixed !important; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-toast { |
|
font-size: 14px; |
|
-webkit-border-radius: 2px; |
|
-moz-border-radius: 2px; |
|
border-radius: 2px; |
|
} |
|
.bi-toast.toast-success { |
|
background: #e1f4e7; |
|
color: #0c6d23; |
|
} |
|
.bi-toast.toast-warning { |
|
background: #fddddd; |
|
color: #e85050; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-tooltip { |
|
max-width: 250px; |
|
-webkit-border-radius: 2px; |
|
-moz-border-radius: 2px; |
|
border-radius: 2px; |
|
font-size: 12px; |
|
} |
|
.bi-tooltip.tooltip-success { |
|
background: #fff5c1; |
|
border: 1px solid #fff5c1; |
|
color: #1a1a1a; |
|
} |
|
.bi-tooltip.tooltip-warning { |
|
background: #fddddd; |
|
color: #e85050; |
|
border: 1px solid #f4cbcb; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-collection-table-cell { |
|
-webkit-box-sizing: border-box; |
|
/*Safari3.2+*/ |
|
-moz-box-sizing: border-box; |
|
/*Firefox3.5+*/ |
|
-ms-box-sizing: border-box; |
|
/*IE8*/ |
|
box-sizing: border-box; |
|
/*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/ |
|
border-right: 1px solid #eaeaea; |
|
border-bottom: 1px solid #eaeaea; |
|
} |
|
.bi-collection-table-cell.first-row { |
|
border-top: 1px solid #eaeaea; |
|
} |
|
.bi-collection-table-cell.first-col { |
|
border-left: 1px solid #eaeaea; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-quick-collection-table > div > .bi-collection { |
|
overflow: hidden !important; |
|
overflow-x: hidden !important; |
|
overflow-y: hidden !important; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-table > .first-col { |
|
border-left: none; |
|
} |
|
.bi-table > .first-row { |
|
border-top: none; |
|
} |
|
.bi-table > div > div > table { |
|
border-bottom: 1px solid #eaeaea; |
|
border-right: 1px solid #eaeaea; |
|
} |
|
.bi-table > div.top-left > div > div > table { |
|
border-bottom: 1px solid #eaeaea; |
|
border-right: 1px solid #eaeaea; |
|
} |
|
.bi-table > div.top-right > div > div > table { |
|
border-bottom: 1px solid #eaeaea; |
|
border-right: 1px solid #eaeaea; |
|
} |
|
.bi-table > div.bottom-left > div > div > table { |
|
border-bottom: 1px solid #eaeaea; |
|
border-right: 1px solid #eaeaea; |
|
} |
|
.bi-table > div.bottom-right > div > div > table { |
|
border-right: 1px solid #eaeaea; |
|
border-bottom: 1px solid #eaeaea; |
|
} |
|
.bi-table > div > div > table, |
|
.bi-table > div > div > div > table { |
|
min-width: 100%; |
|
clear: both; |
|
vertical-align: middle; |
|
border-spacing: 0; |
|
border-collapse: separate; |
|
} |
|
.bi-table > div > div > table, |
|
.bi-table > div > div > div > table, |
|
.bi-table > div > div > table > * > * > th, |
|
.bi-table > div > div > div > table > * > * > th, |
|
.bi-table > div > div > table > * > * > td, |
|
.bi-table > div > div > div > table > * > * > td { |
|
vertical-align: middle; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
.bi-table > div > div > table > tbody > tr > td, |
|
.bi-table > div > div > div > table > tbody > tr > td, |
|
.bi-table > div > div > table > thead > tr > td, |
|
.bi-table > div > div > div > table > thead > tr > td { |
|
border-top: 1px solid #eaeaea; |
|
border-left: 1px solid #eaeaea; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-grid-table-cell { |
|
-webkit-box-sizing: border-box; |
|
/*Safari3.2+*/ |
|
-moz-box-sizing: border-box; |
|
/*Firefox3.5+*/ |
|
-ms-box-sizing: border-box; |
|
/*IE8*/ |
|
box-sizing: border-box; |
|
/*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/ |
|
border-right: 1px solid #eaeaea; |
|
border-bottom: 1px solid #eaeaea; |
|
} |
|
.bi-grid-table-cell.first-row { |
|
border-top: 1px solid #eaeaea; |
|
} |
|
.bi-grid-table-cell.first-col { |
|
border-left: 1px solid #eaeaea; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.scrollbar-layout-main { |
|
box-sizing: border-box; |
|
outline: none; |
|
overflow: hidden; |
|
position: absolute; |
|
transition-duration: 250ms; |
|
transition-timing-function: ease; |
|
user-select: none; |
|
background-color: rgba(0, 0, 0, 0.1); |
|
border-radius: 5px; |
|
} |
|
.scrollbar-layout-main-vertical { |
|
bottom: 0; |
|
right: 0; |
|
top: 0; |
|
transition-property: background-color; |
|
width: 10px; |
|
} |
|
.scrollbar-layout-main-vertical.public-scrollbar-main-active, |
|
.scrollbar-layout-main-vertical:hover { |
|
width: 10px; |
|
} |
|
.scrollbar-layout-main-horizontal { |
|
bottom: 0; |
|
height: 10px; |
|
left: 0; |
|
transition-property: background-color; |
|
background-color: rgba(0, 0, 0, 0.1); |
|
} |
|
/* Touching the scroll-track directly makes the scroll-track bolder */ |
|
.scrollbar-layout-main-horizontal.public-scrollbar-main-active, |
|
.scrollbar-layout-main-horizontal:hover { |
|
height: 10px; |
|
} |
|
.scrollbar-layout-face { |
|
left: 0; |
|
overflow: hidden; |
|
position: absolute; |
|
z-index: 1; |
|
} |
|
/** |
|
* This selector renders the "nub" of the scrollface. The nub must |
|
* be rendered as pseudo-element so that it won't receive any UI events then |
|
* we can get the correct `event.offsetX` and `event.offsetY` from the |
|
* scrollface element while dragging it. |
|
*/ |
|
.scrollbar-layout-face:after { |
|
border-radius: 6px; |
|
content: ''; |
|
display: block; |
|
position: absolute; |
|
transition: background-color 250ms ease; |
|
} |
|
.scrollbar-layout-face-horizontal { |
|
bottom: 0; |
|
left: 0; |
|
top: 0; |
|
} |
|
.scrollbar-layout-face-horizontal:after { |
|
bottom: 2px; |
|
left: 0; |
|
top: 2px; |
|
width: 100%; |
|
} |
|
.scrollbar-layout-face-vertical { |
|
left: 0; |
|
right: 0; |
|
top: 0; |
|
} |
|
.scrollbar-layout-face-vertical:after { |
|
height: 100%; |
|
left: 2px; |
|
right: 2px; |
|
top: 0; |
|
} |
|
/** |
|
* scrollbars. |
|
*/ |
|
/* Touching the scroll-track directly makes the scroll-track bolder */ |
|
.public-scrollbar-face:after { |
|
background-color: #c2c2c2; |
|
} |
|
.public-scrollbar-main:hover .public-scrollbar-face:after, |
|
.public-scrollbar-main-active .public-scrollbar-face:after, |
|
.public-scrollbar-faceActive:after { |
|
background-color: #7d7d7d; |
|
} |
|
.horizontal-scrollbar { |
|
bottom: 0; |
|
position: absolute; |
|
} |
|
.horizontal-scrollbar .public-scrollbar-main-horizontal { |
|
background-color: #fff; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-resizable-table-cell .resizable-table-cell-resizer-container { |
|
cursor: ew-resize; |
|
z-index: 1; |
|
} |
|
.bi-resizable-table-cell .resizable-table-cell-resizer-container:hover .resizable-table-cell-resizer-knob, |
|
.bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob { |
|
background-color: #009de3; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-resizable-table .resizable-table-resizer { |
|
cursor: ew-resize; |
|
z-index: 1; |
|
background-color: #009de3; |
|
} |
|
.bi-resizable-table .resizable-table-region-resizer { |
|
cursor: ew-resize; |
|
z-index: 1; |
|
} |
|
.bi-resizable-table .resizable-table-region-resizer:hover .resizable-table-region-resizer-knob, |
|
.bi-resizable-table .resizable-table-region-resizer.dragging .resizable-table-region-resizer-knob { |
|
background-color: #009de3; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
/** |
|
* Farbtastic Color Picker 1.2 |
|
* © 2008 Steven Wittens |
|
* |
|
* This program is free software; you can redistribute it and/or modify |
|
* it under the terms of the GNU General Public License as published by |
|
* the Free Software Foundation; either version 2 of the License, or |
|
* (at your option) any later version. |
|
* |
|
* This program is distributed in the hope that it will be useful, |
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
* GNU General Public License for more details. |
|
* |
|
* You should have received a copy of the GNU General Public License |
|
* along with this program; if not, write to the Free Software |
|
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA |
|
*/ |
|
.farbtastic { |
|
position: relative; |
|
} |
|
.farbtastic * { |
|
position: absolute; |
|
cursor: crosshair; |
|
} |
|
.farbtastic, |
|
.farbtastic .wheel { |
|
width: 195px; |
|
height: 195px; |
|
} |
|
.farbtastic .color, |
|
.farbtastic .overlay { |
|
top: 47px; |
|
left: 47px; |
|
width: 101px; |
|
height: 101px; |
|
} |
|
.farbtastic .wheel { |
|
background: url(${servletURL}?op=resource&resource=/com/fr/bi/web/css/base/third/farbtastic/wheel.png) no-repeat; |
|
width: 195px; |
|
height: 195px; |
|
} |
|
.farbtastic .overlay { |
|
background: url(${servletURL}?op=resource&resource=/com/fr/bi/web/css/base/third/farbtastic/mask.png) no-repeat; |
|
} |
|
.farbtastic .marker { |
|
width: 17px; |
|
height: 17px; |
|
margin: -8px 0 0 -8px; |
|
overflow: hidden; |
|
background: url(${servletURL}?op=resource&resource=/com/fr/bi/web/css/base/third/farbtastic/marker.png) no-repeat; |
|
} |
|
/* |
|
== malihu jquery custom scrollbar plugin == |
|
Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller |
|
*/ |
|
/* |
|
CONTENTS: |
|
1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). |
|
2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. |
|
3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. |
|
4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. |
|
5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. |
|
6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS |
|
6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. |
|
*/ |
|
/* |
|
------------------------------------------------------------------------------------------------------------------------ |
|
1. BASIC STYLE |
|
------------------------------------------------------------------------------------------------------------------------ |
|
*/ |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.mCustomScrollbar { |
|
-ms-touch-action: pinch-zoom; |
|
touch-action: pinch-zoom; |
|
/* direct pointer events to js */ |
|
} |
|
.mCustomScrollbar.mCS_no_scrollbar, |
|
.mCustomScrollbar.mCS_touch_action { |
|
-ms-touch-action: auto; |
|
touch-action: auto; |
|
} |
|
.mCustomScrollBox { |
|
/* contains plugin's markup */ |
|
position: relative; |
|
overflow: hidden; |
|
height: 100%; |
|
max-width: 100%; |
|
outline: none; |
|
direction: ltr; |
|
} |
|
.mCSB_container { |
|
/* contains the original content */ |
|
overflow: hidden; |
|
width: auto; |
|
height: auto; |
|
} |
|
/* |
|
------------------------------------------------------------------------------------------------------------------------ |
|
2. VERTICAL SCROLLBAR |
|
y-axis |
|
------------------------------------------------------------------------------------------------------------------------ |
|
*/ |
|
.mCSB_inside > .mCSB_container { |
|
margin-right: 30px; |
|
} |
|
.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { |
|
margin-right: 0; |
|
} |
|
/* non-visible scrollbar */ |
|
.mCS-dir-rtl > .mCSB_inside > .mCSB_container { |
|
/* RTL direction/left-side scrollbar */ |
|
margin-right: 0; |
|
margin-left: 30px; |
|
} |
|
.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { |
|
margin-left: 0; |
|
} |
|
/* RTL direction/left-side scrollbar */ |
|
.mCSB_scrollTools { |
|
/* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ |
|
position: absolute; |
|
width: 16px; |
|
height: auto; |
|
left: auto; |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
} |
|
.mCSB_outside + .mCSB_scrollTools { |
|
right: -26px; |
|
} |
|
/* scrollbar position: outside */ |
|
.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, |
|
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { |
|
/* RTL direction/left-side scrollbar */ |
|
right: auto; |
|
left: 0; |
|
} |
|
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { |
|
left: -26px; |
|
} |
|
/* RTL direction/left-side scrollbar (scrollbar position: outside) */ |
|
.mCSB_scrollTools .mCSB_draggerContainer { |
|
/* contains the draggable element and dragger rail markup */ |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
bottom: 0; |
|
right: 0; |
|
height: auto; |
|
} |
|
.mCSB_scrollTools a + .mCSB_draggerContainer { |
|
margin: 20px 0; |
|
} |
|
.mCSB_scrollTools .mCSB_draggerRail { |
|
width: 2px; |
|
height: 100%; |
|
margin: 0 auto; |
|
-webkit-border-radius: 16px; |
|
-moz-border-radius: 16px; |
|
border-radius: 16px; |
|
} |
|
.mCSB_scrollTools .mCSB_dragger { |
|
/* the draggable element */ |
|
cursor: pointer; |
|
width: 100%; |
|
height: 30px; |
|
/* minimum dragger height */ |
|
z-index: 1; |
|
} |
|
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { |
|
/* the dragger element */ |
|
position: relative; |
|
width: 4px; |
|
height: 100%; |
|
margin: 0 auto; |
|
-webkit-border-radius: 16px; |
|
-moz-border-radius: 16px; |
|
border-radius: 16px; |
|
text-align: center; |
|
} |
|
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, |
|
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { |
|
width: 12px; |
|
/* auto-expanded scrollbar */ |
|
} |
|
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, |
|
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { |
|
width: 8px; |
|
/* auto-expanded scrollbar */ |
|
} |
|
.mCSB_scrollTools .mCSB_buttonUp, |
|
.mCSB_scrollTools .mCSB_buttonDown { |
|
display: block; |
|
position: absolute; |
|
height: 20px; |
|
width: 100%; |
|
overflow: hidden; |
|
margin: 0 auto; |
|
cursor: pointer; |
|
} |
|
.mCSB_scrollTools .mCSB_buttonDown { |
|
bottom: 0; |
|
} |
|
/* |
|
------------------------------------------------------------------------------------------------------------------------ |
|
3. HORIZONTAL SCROLLBAR |
|
x-axis |
|
------------------------------------------------------------------------------------------------------------------------ |
|
*/ |
|
.mCSB_horizontal.mCSB_inside > .mCSB_container { |
|
margin-right: 0; |
|
margin-bottom: 30px; |
|
} |
|
.mCSB_horizontal.mCSB_outside > .mCSB_container { |
|
min-height: 100%; |
|
} |
|
.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden { |
|
margin-bottom: 0; |
|
} |
|
/* non-visible scrollbar */ |
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal { |
|
width: auto; |
|
height: 16px; |
|
top: auto; |
|
right: 0; |
|
bottom: 0; |
|
left: 0; |
|
} |
|
.mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, |
|
.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal { |
|
bottom: -26px; |
|
} |
|
/* scrollbar position: outside */ |
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer { |
|
margin: 0 20px; |
|
} |
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail { |
|
width: 100%; |
|
height: 2px; |
|
margin: 7px 0; |
|
} |
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger { |
|
width: 30px; |
|
/* minimum dragger width */ |
|
height: 100%; |
|
left: 0; |
|
} |
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { |
|
width: 100%; |
|
height: 4px; |
|
margin: 6px auto; |
|
} |
|
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, |
|
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { |
|
height: 12px; |
|
/* auto-expanded scrollbar */ |
|
margin: 2px auto; |
|
} |
|
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, |
|
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { |
|
height: 8px; |
|
/* auto-expanded scrollbar */ |
|
margin: 4px 0; |
|
} |
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, |
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { |
|
display: block; |
|
position: absolute; |
|
width: 20px; |
|
height: 100%; |
|
overflow: hidden; |
|
margin: 0 auto; |
|
cursor: pointer; |
|
} |
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft { |
|
left: 0; |
|
} |
|
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { |
|
right: 0; |
|
} |
|
/* |
|
------------------------------------------------------------------------------------------------------------------------ |
|
4. VERTICAL AND HORIZONTAL SCROLLBARS |
|
yx-axis |
|
------------------------------------------------------------------------------------------------------------------------ |
|
*/ |
|
.mCSB_container_wrapper { |
|
position: absolute; |
|
height: auto; |
|
width: auto; |
|
overflow: hidden; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
margin-right: 30px; |
|
margin-bottom: 30px; |
|
} |
|
.mCSB_container_wrapper > .mCSB_container { |
|
padding-right: 30px; |
|
padding-bottom: 30px; |
|
-webkit-box-sizing: border-box; |
|
-moz-box-sizing: border-box; |
|
box-sizing: border-box; |
|
} |
|
.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical { |
|
bottom: 20px; |
|
} |
|
.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal { |
|
right: 20px; |
|
} |
|
/* non-visible horizontal scrollbar */ |
|
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical { |
|
bottom: 0; |
|
} |
|
/* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ |
|
.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, |
|
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal { |
|
right: 0; |
|
} |
|
/* RTL direction/left-side scrollbar */ |
|
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal { |
|
left: 20px; |
|
} |
|
/* non-visible scrollbar/RTL direction/left-side scrollbar */ |
|
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal { |
|
left: 0; |
|
} |
|
.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper { |
|
/* RTL direction/left-side scrollbar */ |
|
margin-right: 0; |
|
margin-left: 30px; |
|
} |
|
.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container { |
|
padding-right: 0; |
|
} |
|
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container { |
|
padding-bottom: 0; |
|
} |
|
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden { |
|
margin-right: 0; |
|
/* non-visible scrollbar */ |
|
margin-left: 0; |
|
} |
|
/* non-visible horizontal scrollbar */ |
|
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden { |
|
margin-bottom: 0; |
|
} |
|
/* |
|
------------------------------------------------------------------------------------------------------------------------ |
|
5. TRANSITIONS |
|
------------------------------------------------------------------------------------------------------------------------ |
|
*/ |
|
.mCSB_scrollTools, |
|
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, |
|
.mCSB_scrollTools .mCSB_buttonUp, |
|
.mCSB_scrollTools .mCSB_buttonDown, |
|
.mCSB_scrollTools .mCSB_buttonLeft, |
|
.mCSB_scrollTools .mCSB_buttonRight { |
|
-webkit-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; |
|
-moz-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; |
|
-o-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; |
|
transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; |
|
} |
|
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, |
|
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, |
|
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, |
|
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail { |
|
-webkit-transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; |
|
-moz-transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; |
|
-o-transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; |
|
transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; |
|
} |
|
/* |
|
------------------------------------------------------------------------------------------------------------------------ |
|
6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS |
|
------------------------------------------------------------------------------------------------------------------------ |
|
*/ |
|
/* |
|
---------------------------------------- |
|
6.1 THEMES |
|
---------------------------------------- |
|
*/ |
|
/* default theme ("light") */ |
|
.mCSB_scrollTools { |
|
opacity: 0.75; |
|
filter: "alpha(opacity=75)"; |
|
-ms-filter: "alpha(opacity=75)"; |
|
} |
|
.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, |
|
.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools { |
|
opacity: 0; |
|
filter: "alpha(opacity=0)"; |
|
-ms-filter: "alpha(opacity=0)"; |
|
} |
|
.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, |
|
.mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, |
|
.mCustomScrollBox:hover > .mCSB_scrollTools, |
|
.mCustomScrollBox:hover ~ .mCSB_scrollTools, |
|
.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, |
|
.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools { |
|
opacity: 1; |
|
filter: "alpha(opacity=100)"; |
|
-ms-filter: "alpha(opacity=100)"; |
|
} |
|
.mCSB_scrollTools .mCSB_draggerRail { |
|
background-color: #000; |
|
background-color: rgba(0, 0, 0, 0.4); |
|
filter: "alpha(opacity=40)"; |
|
-ms-filter: "alpha(opacity=40)"; |
|
} |
|
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { |
|
background-color: #fff; |
|
background-color: rgba(255, 255, 255, 0.75); |
|
filter: "alpha(opacity=75)"; |
|
-ms-filter: "alpha(opacity=75)"; |
|
} |
|
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { |
|
background-color: #fff; |
|
background-color: rgba(255, 255, 255, 0.85); |
|
filter: "alpha(opacity=85)"; |
|
-ms-filter: "alpha(opacity=85)"; |
|
} |
|
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, |
|
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { |
|
background-color: #fff; |
|
background-color: rgba(255, 255, 255, 0.9); |
|
filter: "alpha(opacity=90)"; |
|
-ms-filter: "alpha(opacity=90)"; |
|
} |
|
.mCSB_scrollTools .mCSB_buttonUp, |
|
.mCSB_scrollTools .mCSB_buttonDown, |
|
.mCSB_scrollTools .mCSB_buttonLeft, |
|
.mCSB_scrollTools .mCSB_buttonRight { |
|
background-image: url('background/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("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); |
|
} |
|
/* ---------------------------------------- */ |
|
/* theme "bi-default" */ |
|
.mCS-bi-default { |
|
background-color: #dddddd; |
|
} |
|
.mCS-bi-default .mCSB_scrollTools.mCSB_scrollTools_horizontal { |
|
height: 18px; |
|
} |
|
.mCS-bi-default .mCSB_scrollTools.mCSB_scrollTools_vertical { |
|
width: 18px; |
|
} |
|
.mCS-bi-default .mCSB_scrollTools .mCSB_draggerRail { |
|
border-radius: 0px; |
|
} |
|
.mCS-bi-default .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { |
|
border-radius: 2px; |
|
} |
|
.mCS-bi-default .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer { |
|
margin: 0 18px; |
|
} |
|
.mCS-bi-default .mCSB_scrollTools.mCSB_scrollTools_vertical a + .mCSB_draggerContainer { |
|
margin: 18px 0; |
|
} |
|
.mCS-bi-default.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { |
|
width: 14px; |
|
margin: 0 2px; |
|
} |
|
.mCS-bi-default.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { |
|
width: 100%; |
|
height: 14px; |
|
margin: 2px auto; |
|
} |
|
.mCS-bi-default.mCSB_scrollTools .mCSB_draggerRail { |
|
width: 18px; |
|
height: 100%; |
|
margin: 0; |
|
} |
|
.mCS-bi-default.mCSB_scrollTools_horizontal .mCSB_draggerRail { |
|
width: 100%; |
|
height: 18px; |
|
margin: 0; |
|
} |
|
.mCS-bi-default.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, |
|
.mCS-bi-default.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { |
|
width: 14px; |
|
} |
|
.mCS-bi-default.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, |
|
.mCS-bi-default.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { |
|
height: 14px; |
|
margin: 2px 0; |
|
} |
|
.mCS-bi-default.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { |
|
background-color: #f4f4f4; |
|
} |
|
.mCS-bi-default.mCSB_scrollTools .mCSB_draggerRail { |
|
background-color: #dddddd; |
|
} |
|
.mCS-bi-default.mCSB_scrollTools .mCSB_buttonUp, |
|
.mCS-bi-default.mCSB_scrollTools .mCSB_buttonDown, |
|
.mCS-bi-default.mCSB_scrollTools .mCSB_buttonLeft, |
|
.mCS-bi-default.mCSB_scrollTools .mCSB_buttonRight { |
|
width: 16px; |
|
height: 16px; |
|
background-color: #f4f4f4; |
|
border: 1px solid #eaeaea; |
|
opacity: 1; |
|
filter: alpha(opacity=100); |
|
} |
|
.mCS-bi-default.mCSB_scrollTools .mCSB_buttonUp { |
|
background-position: -128px -1px; |
|
} |
|
.mCS-bi-default.mCSB_scrollTools .mCSB_buttonDown { |
|
background-position: -128px -21px; |
|
} |
|
.mCS-bi-default.mCSB_scrollTools .mCSB_buttonLeft { |
|
background-position: -142px -40px; |
|
} |
|
.mCS-bi-default.mCSB_scrollTools .mCSB_buttonRight { |
|
background-position: -141px -56px; |
|
} |
|
/* ---------------------------------------- */ |
|
/* required styles */ |
|
.leaflet-pane, |
|
.leaflet-tile, |
|
.leaflet-marker-icon, |
|
.leaflet-marker-shadow, |
|
.leaflet-tile-container, |
|
.leaflet-map-pane svg, |
|
.leaflet-map-pane canvas, |
|
.leaflet-zoom-box, |
|
.leaflet-image-layer, |
|
.leaflet-layer { |
|
position: absolute; |
|
left: 0; |
|
top: 0; |
|
} |
|
.leaflet-container { |
|
overflow: hidden; |
|
-ms-touch-action: none; |
|
touch-action: none; |
|
} |
|
.leaflet-tile, |
|
.leaflet-marker-icon, |
|
.leaflet-marker-shadow { |
|
-webkit-user-select: none; |
|
-moz-user-select: none; |
|
user-select: none; |
|
-webkit-user-drag: none; |
|
} |
|
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */ |
|
.leaflet-safari .leaflet-tile { |
|
image-rendering: -webkit-optimize-contrast; |
|
} |
|
/* hack that prevents hw layers "stretching" when loading new tiles */ |
|
.leaflet-safari .leaflet-tile-container { |
|
width: 1600px; |
|
height: 1600px; |
|
-webkit-transform-origin: 0 0; |
|
} |
|
.leaflet-marker-icon, |
|
.leaflet-marker-shadow { |
|
display: block; |
|
} |
|
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */ |
|
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */ |
|
.leaflet-container .leaflet-overlay-pane svg, |
|
.leaflet-container .leaflet-marker-pane img, |
|
.leaflet-container .leaflet-tile-pane img, |
|
.leaflet-container img.leaflet-image-layer { |
|
max-width: none !important; |
|
} |
|
.leaflet-tile { |
|
filter: inherit; |
|
visibility: hidden; |
|
} |
|
.leaflet-tile-loaded { |
|
visibility: inherit; |
|
} |
|
.leaflet-zoom-box { |
|
width: 0; |
|
height: 0; |
|
-moz-box-sizing: border-box; |
|
box-sizing: border-box; |
|
z-index: 800; |
|
} |
|
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ |
|
.leaflet-overlay-pane svg { |
|
-moz-user-select: none; |
|
} |
|
.leaflet-pane { |
|
z-index: 400; |
|
} |
|
.leaflet-tile-pane { |
|
z-index: 200; |
|
} |
|
.leaflet-overlay-pane { |
|
z-index: 400; |
|
} |
|
.leaflet-shadow-pane { |
|
z-index: 500; |
|
} |
|
.leaflet-marker-pane { |
|
z-index: 600; |
|
} |
|
.leaflet-popup-pane { |
|
z-index: 700; |
|
} |
|
.leaflet-map-pane canvas { |
|
z-index: 100; |
|
} |
|
.leaflet-map-pane svg { |
|
z-index: 200; |
|
} |
|
.leaflet-vml-shape { |
|
width: 1px; |
|
height: 1px; |
|
} |
|
.lvml { |
|
behavior: url(#default#VML); |
|
display: inline-block; |
|
position: absolute; |
|
} |
|
/* control positioning */ |
|
.leaflet-control { |
|
position: relative; |
|
z-index: 800; |
|
pointer-events: auto; |
|
} |
|
.leaflet-top, |
|
.leaflet-bottom { |
|
position: absolute; |
|
z-index: 1000; |
|
pointer-events: none; |
|
} |
|
.leaflet-top { |
|
top: 0; |
|
} |
|
.leaflet-right { |
|
right: 0; |
|
} |
|
.leaflet-bottom { |
|
bottom: 0; |
|
} |
|
.leaflet-left { |
|
left: 0; |
|
} |
|
.leaflet-control { |
|
float: left; |
|
clear: both; |
|
} |
|
.leaflet-right .leaflet-control { |
|
float: right; |
|
} |
|
.leaflet-top .leaflet-control { |
|
margin-top: 10px; |
|
} |
|
.leaflet-bottom .leaflet-control { |
|
margin-bottom: 10px; |
|
} |
|
.leaflet-left .leaflet-control { |
|
margin-left: 10px; |
|
} |
|
.leaflet-right .leaflet-control { |
|
margin-right: 10px; |
|
} |
|
/* zoom and fade animations */ |
|
.leaflet-fade-anim .leaflet-tile { |
|
will-change: opacity; |
|
} |
|
.leaflet-fade-anim .leaflet-popup { |
|
opacity: 0; |
|
-webkit-transition: opacity 0.2s linear; |
|
-moz-transition: opacity 0.2s linear; |
|
-o-transition: opacity 0.2s linear; |
|
transition: opacity 0.2s linear; |
|
} |
|
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup { |
|
opacity: 1; |
|
} |
|
.leaflet-zoom-animated { |
|
-webkit-transform-origin: 0 0; |
|
-ms-transform-origin: 0 0; |
|
transform-origin: 0 0; |
|
} |
|
.leaflet-zoom-anim .leaflet-zoom-animated { |
|
will-change: transform; |
|
} |
|
.leaflet-zoom-anim .leaflet-zoom-animated { |
|
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1); |
|
-moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1); |
|
-o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1); |
|
transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1); |
|
} |
|
.leaflet-zoom-anim .leaflet-tile, |
|
.leaflet-pan-anim .leaflet-tile { |
|
-webkit-transition: none; |
|
-moz-transition: none; |
|
-o-transition: none; |
|
transition: none; |
|
} |
|
.leaflet-zoom-anim .leaflet-zoom-hide { |
|
visibility: hidden; |
|
} |
|
/* cursors */ |
|
.leaflet-interactive { |
|
cursor: pointer; |
|
} |
|
.leaflet-grab { |
|
cursor: -webkit-grab; |
|
cursor: -moz-grab; |
|
} |
|
.leaflet-crosshair, |
|
.leaflet-crosshair .leaflet-interactive { |
|
cursor: crosshair; |
|
} |
|
.leaflet-popup-pane, |
|
.leaflet-control { |
|
cursor: auto; |
|
} |
|
.leaflet-dragging .leaflet-grab, |
|
.leaflet-dragging .leaflet-grab .leaflet-interactive, |
|
.leaflet-dragging .leaflet-marker-draggable { |
|
cursor: move; |
|
cursor: -webkit-grabbing; |
|
cursor: -moz-grabbing; |
|
} |
|
/* marker & overlays interactivity */ |
|
.leaflet-marker-icon, |
|
.leaflet-marker-shadow, |
|
.leaflet-image-layer, |
|
.leaflet-pane > svg path, |
|
.leaflet-tile-container { |
|
pointer-events: none; |
|
} |
|
.leaflet-marker-icon.leaflet-interactive, |
|
.leaflet-image-layer.leaflet-interactive, |
|
.leaflet-pane > svg path.leaflet-interactive { |
|
pointer-events: auto; |
|
} |
|
/* visual tweaks */ |
|
.leaflet-container { |
|
/*background: #ddd;*/ |
|
outline: 0; |
|
} |
|
.leaflet-container a { |
|
color: #0078A8; |
|
} |
|
.leaflet-container a.leaflet-active { |
|
outline: 2px solid orange; |
|
} |
|
.leaflet-zoom-box { |
|
border: 2px dotted #38f; |
|
background: rgba(255, 255, 255, 0.5); |
|
} |
|
/* general typography */ |
|
.leaflet-container { |
|
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; |
|
} |
|
/* general toolbar styles */ |
|
.leaflet-bar { |
|
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); |
|
border-radius: 4px; |
|
} |
|
.leaflet-bar a, |
|
.leaflet-bar a:hover { |
|
background-color: #fff; |
|
border-bottom: 1px solid #ccc; |
|
width: 26px; |
|
height: 26px; |
|
line-height: 26px; |
|
display: block; |
|
text-align: center; |
|
text-decoration: none; |
|
color: black; |
|
} |
|
.leaflet-bar a, |
|
.leaflet-control-layers-toggle { |
|
background-position: 50% 50%; |
|
background-repeat: no-repeat; |
|
display: block; |
|
} |
|
.leaflet-bar a:hover { |
|
background-color: #f4f4f4; |
|
} |
|
.leaflet-bar a:first-child { |
|
border-top-left-radius: 4px; |
|
border-top-right-radius: 4px; |
|
} |
|
.leaflet-bar a:last-child { |
|
border-bottom-left-radius: 4px; |
|
border-bottom-right-radius: 4px; |
|
border-bottom: none; |
|
} |
|
.leaflet-bar a.leaflet-disabled { |
|
cursor: default; |
|
background-color: #f4f4f4; |
|
color: #bbb; |
|
} |
|
.leaflet-touch .leaflet-bar a { |
|
width: 30px; |
|
height: 30px; |
|
line-height: 30px; |
|
} |
|
/* zoom control */ |
|
.leaflet-control-zoom-in, |
|
.leaflet-control-zoom-out { |
|
font: bold 18px 'Lucida Console', Monaco, monospace; |
|
text-indent: 1px; |
|
} |
|
.leaflet-control-zoom-out { |
|
font-size: 20px; |
|
} |
|
.leaflet-touch .leaflet-control-zoom-in { |
|
font-size: 22px; |
|
} |
|
.leaflet-touch .leaflet-control-zoom-out { |
|
font-size: 24px; |
|
} |
|
/* layers control */ |
|
.leaflet-control-layers { |
|
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); |
|
background: #fff; |
|
border-radius: 5px; |
|
} |
|
.leaflet-control-layers-toggle { |
|
background-image: url(images/layers.png); |
|
width: 36px; |
|
height: 36px; |
|
} |
|
.leaflet-retina .leaflet-control-layers-toggle { |
|
background-image: url(images/layers-2x.png); |
|
background-size: 26px 26px; |
|
} |
|
.leaflet-touch .leaflet-control-layers-toggle { |
|
width: 44px; |
|
height: 44px; |
|
} |
|
.leaflet-control-layers .leaflet-control-layers-list, |
|
.leaflet-control-layers-expanded .leaflet-control-layers-toggle { |
|
display: none; |
|
} |
|
.leaflet-control-layers-expanded .leaflet-control-layers-list { |
|
display: block; |
|
position: relative; |
|
} |
|
.leaflet-control-layers-expanded { |
|
padding: 6px 10px 6px 6px; |
|
color: #333; |
|
background: #fff; |
|
} |
|
.leaflet-control-layers-scrollbar { |
|
overflow-y: scroll; |
|
padding-right: 5px; |
|
} |
|
.leaflet-control-layers-selector { |
|
margin-top: 2px; |
|
position: relative; |
|
top: 1px; |
|
} |
|
.leaflet-control-layers label { |
|
display: block; |
|
} |
|
.leaflet-control-layers-separator { |
|
height: 0; |
|
border-top: 1px solid #ddd; |
|
margin: 5px -10px 5px -6px; |
|
} |
|
/* attribution and scale controls */ |
|
.leaflet-container .leaflet-control-attribution { |
|
background: #fff; |
|
background: rgba(255, 255, 255, 0.7); |
|
margin: 0; |
|
} |
|
.leaflet-control-attribution, |
|
.leaflet-control-scale-line { |
|
padding: 0 5px; |
|
color: #333; |
|
} |
|
.leaflet-control-attribution a { |
|
text-decoration: none; |
|
} |
|
.leaflet-control-attribution a:hover { |
|
text-decoration: underline; |
|
} |
|
.leaflet-container .leaflet-control-attribution, |
|
.leaflet-container .leaflet-control-scale { |
|
font-size: 11px; |
|
} |
|
.leaflet-left .leaflet-control-scale { |
|
margin-left: 5px; |
|
} |
|
.leaflet-bottom .leaflet-control-scale { |
|
margin-bottom: 5px; |
|
} |
|
.leaflet-control-scale-line { |
|
border: 2px solid #777; |
|
border-top: none; |
|
line-height: 1.1; |
|
padding: 2px 5px 1px; |
|
font-size: 11px; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
-moz-box-sizing: border-box; |
|
box-sizing: border-box; |
|
background: #fff; |
|
background: rgba(255, 255, 255, 0.5); |
|
} |
|
.leaflet-control-scale-line:not(:first-child) { |
|
border-top: 2px solid #777; |
|
border-bottom: none; |
|
margin-top: -2px; |
|
} |
|
.leaflet-control-scale-line:not(:first-child):not(:last-child) { |
|
border-bottom: 2px solid #777; |
|
} |
|
.leaflet-touch .leaflet-control-attribution, |
|
.leaflet-touch .leaflet-control-layers, |
|
.leaflet-touch .leaflet-bar { |
|
box-shadow: none; |
|
} |
|
.leaflet-touch .leaflet-control-layers, |
|
.leaflet-touch .leaflet-bar { |
|
border: 2px solid rgba(0, 0, 0, 0.2); |
|
background-clip: padding-box; |
|
} |
|
/* popup */ |
|
.leaflet-popup { |
|
position: absolute; |
|
text-align: center; |
|
} |
|
.leaflet-popup-content-wrapper { |
|
padding: 1px; |
|
text-align: left; |
|
border-radius: 12px; |
|
} |
|
.leaflet-popup-content { |
|
margin: 13px 19px; |
|
line-height: 1.4; |
|
} |
|
.leaflet-popup-content p { |
|
margin: 18px 0; |
|
} |
|
.leaflet-popup-tip-container { |
|
margin: 0 auto; |
|
width: 40px; |
|
height: 20px; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
.leaflet-popup-tip { |
|
width: 17px; |
|
height: 17px; |
|
padding: 1px; |
|
margin: -10px auto 0; |
|
-webkit-transform: rotate(45deg); |
|
-moz-transform: rotate(45deg); |
|
-ms-transform: rotate(45deg); |
|
-o-transform: rotate(45deg); |
|
transform: rotate(45deg); |
|
} |
|
.leaflet-popup-content-wrapper, |
|
.leaflet-popup-tip { |
|
background: white; |
|
color: #333; |
|
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4); |
|
} |
|
.leaflet-container a.leaflet-popup-close-button { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
padding: 4px 4px 0 0; |
|
border: none; |
|
text-align: center; |
|
width: 18px; |
|
height: 14px; |
|
font: 16px/14px Tahoma, Verdana, sans-serif; |
|
color: #c3c3c3; |
|
text-decoration: none; |
|
font-weight: bold; |
|
background: transparent; |
|
} |
|
.leaflet-container a.leaflet-popup-close-button:hover { |
|
color: #999; |
|
} |
|
.leaflet-popup-scrolled { |
|
overflow: auto; |
|
border-bottom: 1px solid #ddd; |
|
border-top: 1px solid #ddd; |
|
} |
|
.leaflet-oldie .leaflet-popup-content-wrapper { |
|
zoom: 1; |
|
} |
|
.leaflet-oldie .leaflet-popup-tip { |
|
width: 24px; |
|
margin: 0 auto; |
|
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; |
|
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); |
|
} |
|
.leaflet-oldie .leaflet-popup-tip-container { |
|
margin-top: -1px; |
|
} |
|
.leaflet-oldie .leaflet-control-zoom, |
|
.leaflet-oldie .leaflet-control-layers, |
|
.leaflet-oldie .leaflet-popup-content-wrapper, |
|
.leaflet-oldie .leaflet-popup-tip { |
|
border: 1px solid #999; |
|
} |
|
/* div icon */ |
|
.leaflet-div-icon { |
|
background: #fff; |
|
border: 1px solid #666; |
|
} |
|
/*------------------------------------- |
|
zTree Style |
|
|
|
version: 3.5.17 |
|
author: Hunter.z |
|
email: hunter.z@263.net |
|
website: http://code.google.com/p/jquerytree/ |
|
|
|
-------------------------------------*/ |
|
.ztree * { |
|
padding: 0; |
|
margin: 0; |
|
font-size: 12px; |
|
font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif; |
|
} |
|
.ztree { |
|
margin: 0; |
|
padding: 5px; |
|
color: #333333; |
|
} |
|
.ztree li { |
|
padding: 0; |
|
margin: 0; |
|
list-style: none; |
|
line-height: 14px; |
|
text-align: left; |
|
white-space: nowrap; |
|
outline: 0; |
|
} |
|
.ztree li ul { |
|
margin: 0; |
|
padding: 0 0 0 18px; |
|
} |
|
.ztree li ul.line { |
|
background: url(icon/tree-vertical-line-1.png) 0 0 repeat-y; |
|
} |
|
.ztree li a { |
|
padding: 1px 3px 0 0; |
|
margin: 0; |
|
cursor: pointer; |
|
height: 24px; |
|
color: #333; |
|
background-color: transparent; |
|
text-decoration: none; |
|
vertical-align: top; |
|
display: inline-block; |
|
} |
|
.ztree li a.curSelectedNode_Edit { |
|
padding-top: 0px; |
|
background-color: #FFE6B0; |
|
color: black; |
|
height: 16px; |
|
border: 1px #FFB951 solid; |
|
opacity: 0.8; |
|
} |
|
.ztree li a.tmpTargetNode_inner { |
|
padding-top: 0px; |
|
background-color: #316AC5; |
|
color: white; |
|
height: 16px; |
|
border: 1px #316AC5 solid; |
|
opacity: 0.8; |
|
filter: alpha(opacity=80); |
|
} |
|
.ztree li a input.rename { |
|
height: 14px; |
|
width: 80px; |
|
padding: 0; |
|
margin: 0; |
|
font-size: 12px; |
|
border: 1px #7EC4CC solid; |
|
*border: 0px; |
|
} |
|
.ztree li span { |
|
line-height: 24px; |
|
margin-right: 2px; |
|
} |
|
.ztree li span.button { |
|
line-height: 0; |
|
margin: 0; |
|
width: 16px; |
|
height: 16px; |
|
display: inline-block; |
|
vertical-align: middle; |
|
border: 0 none; |
|
cursor: pointer; |
|
outline: none; |
|
background-color: transparent; |
|
background-repeat: no-repeat; |
|
background-attachment: scroll; |
|
background-image: url("${servletURL}?op=resource&resource=/com/fr/bi/web/css/base/third/ztree/img/zTreeStandard.png"); |
|
*background-image: url("${servletURL}?op=resource&resource=/com/fr/bi/web/css/base/third/ztree/img/zTreeStandard.gif"); |
|
} |
|
.ztree li span.button.chk { |
|
width: 16px; |
|
height: 16px; |
|
margin: 0 3px 0 0; |
|
cursor: auto; |
|
} |
|
.ztree li span.button.chk.checkbox_false_full { |
|
background-image: url("icon/check-box-normal.png"); |
|
} |
|
.ztree li span.button.chk.checkbox_false_full_focus { |
|
background-image: url("icon/check-box-normal.png"); |
|
} |
|
.ztree li span.button.chk.checkbox_false_part { |
|
background-image: url("icon/half_selected.png"); |
|
} |
|
.ztree li span.button.chk.checkbox_false_part_focus { |
|
background-image: url("icon/half_selected.png"); |
|
} |
|
.ztree li span.button.chk.checkbox_false_disable { |
|
background-position: 0 -56px; |
|
} |
|
.ztree li span.button.chk.checkbox_true_full { |
|
background-image: url("icon/check-box-active.png"); |
|
} |
|
.ztree li span.button.chk.checkbox_true_full_focus { |
|
background-image: url("icon/check-box-active.png"); |
|
} |
|
.ztree li span.button.chk.checkbox_true_part { |
|
background-image: url("icon/half_selected.png"); |
|
} |
|
.ztree li span.button.chk.checkbox_true_part_focus { |
|
background-image: url("icon/half_selected.png"); |
|
} |
|
.ztree li span.button.chk.checkbox_true_disable { |
|
background-position: -14px -56px; |
|
} |
|
.ztree li span.button.chk.radio_false_full { |
|
background-position: -28px 0; |
|
} |
|
.ztree li span.button.chk.radio_false_full_focus { |
|
background-position: -28px -14px; |
|
} |
|
.ztree li span.button.chk.radio_false_part { |
|
background-position: -28px -28px; |
|
} |
|
.ztree li span.button.chk.radio_false_part_focus { |
|
background-position: -28px -42px; |
|
} |
|
.ztree li span.button.chk.radio_false_disable { |
|
background-position: -28px -56px; |
|
} |
|
.ztree li span.button.chk.radio_true_full { |
|
background-position: -42px 0; |
|
} |
|
.ztree li span.button.chk.radio_true_full_focus { |
|
background-position: -42px -14px; |
|
} |
|
.ztree li span.button.chk.radio_true_part { |
|
background-position: -42px -28px; |
|
} |
|
.ztree li span.button.chk.radio_true_part_focus { |
|
background-position: -42px -42px; |
|
} |
|
.ztree li span.button.chk.radio_true_disable { |
|
background-position: -42px -56px; |
|
} |
|
.ztree li span.button.switch { |
|
width: 25px; |
|
height: 25px; |
|
} |
|
.ztree li span.button.root_open { |
|
background-image: url("icon/tree-expand-1.png"); |
|
} |
|
.ztree li span.button.root_close { |
|
background-image: url("icon/tree-collapse-1.png"); |
|
} |
|
.ztree li span.button.roots_open { |
|
background-image: url("icon/tree-expand-2.png"); |
|
} |
|
.ztree li span.button.roots_close { |
|
background-image: url("icon/tree-collapse-2.png"); |
|
} |
|
.ztree li span.button.center_open { |
|
background-image: url("icon/tree-expand-3.png"); |
|
} |
|
.ztree li span.button.center_close { |
|
background-image: url("icon/tree-collapse-3.png"); |
|
} |
|
.ztree li span.button.bottom_open { |
|
background-image: url("icon/tree-expand-4.png"); |
|
} |
|
.ztree li span.button.bottom_close { |
|
background-image: url("icon/tree-collapse-4.png"); |
|
} |
|
.ztree li span.button.noline_open { |
|
background-position: -92px -72px; |
|
} |
|
.ztree li span.button.noline_close { |
|
background-position: -74px -72px; |
|
} |
|
.ztree li span.button.root_docu { |
|
background: none; |
|
} |
|
.ztree li span.button.roots_docu { |
|
background-image: url("icon/tree-vertical-line-2.png"); |
|
} |
|
.ztree li span.button.center_docu { |
|
background-image: url("icon/tree-vertical-line-3.png"); |
|
} |
|
.ztree li span.button.bottom_docu { |
|
background-image: url("icon/tree-vertical-line-4.png"); |
|
} |
|
.ztree li span.button.noline_docu { |
|
background: none; |
|
} |
|
.ztree li span.button.ico_open { |
|
margin-right: 2px; |
|
background-position: -110px -16px; |
|
vertical-align: top; |
|
*vertical-align: middle; |
|
} |
|
.ztree li span.button.ico_close { |
|
margin-right: 2px; |
|
background-position: -110px 0; |
|
vertical-align: top; |
|
*vertical-align: middle; |
|
} |
|
.ztree li span.button.ico_docu { |
|
margin-right: 2px; |
|
background-position: -110px -32px; |
|
vertical-align: top; |
|
*vertical-align: middle; |
|
} |
|
.ztree li span.button.edit { |
|
margin-right: 2px; |
|
background-position: -110px -48px; |
|
vertical-align: top; |
|
*vertical-align: middle; |
|
} |
|
.ztree li span.button.remove { |
|
margin-right: 2px; |
|
background-position: -110px -64px; |
|
vertical-align: top; |
|
*vertical-align: middle; |
|
} |
|
.ztree li span.button.ico_loading { |
|
width: 0px; |
|
margin-right: 2px; |
|
background: url("${servletURL}?op=resource&resource=/com/fr/bi/web/css/base/third/ztree/img/loading.gif") no-repeat scroll 0 0 transparent; |
|
vertical-align: top; |
|
*vertical-align: middle; |
|
} |
|
ul.tmpTargetzTree { |
|
background-color: #FFE6B0; |
|
opacity: 0.8; |
|
filter: alpha(opacity=80); |
|
} |
|
span.tmpzTreeMove_arrow { |
|
width: 16px; |
|
height: 16px; |
|
display: inline-block; |
|
padding: 0; |
|
margin: 2px 0 0 1px; |
|
border: 0 none; |
|
position: absolute; |
|
background-color: transparent; |
|
background-repeat: no-repeat; |
|
background-attachment: scroll; |
|
background-position: -110px -80px; |
|
background-image: url("${servletURL}?op=resource&resource=/com/fr/bi/web/css/base/third/ztree/img/zTreeStandard.png"); |
|
*background-image: url("${servletURL}?op=resource&resource=/com/fr/bi/web/css/base/third/ztree/img/zTreeStandard.gif"); |
|
} |
|
ul.ztree.zTreeDragUL { |
|
margin: 0; |
|
padding: 0; |
|
position: absolute; |
|
width: auto; |
|
height: auto; |
|
overflow: hidden; |
|
background-color: #cfcfcf; |
|
border: 1px #00B83F dotted; |
|
opacity: 0.8; |
|
filter: alpha(opacity=80); |
|
} |
|
.zTreeMask { |
|
z-index: 10000; |
|
background-color: #cfcfcf; |
|
opacity: 0.0; |
|
filter: alpha(opacity=0); |
|
position: absolute; |
|
} |
|
/* level style*/ |
|
/*.ztree li span.button.level0 { |
|
display:none; |
|
} |
|
.ztree li ul.level0 { |
|
padding:0; |
|
background:none; |
|
}*/ |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-branch-tree .bi-branch-tree-view { |
|
min-width: 300px; |
|
} |
|
.bi-click-branch-tree { |
|
border: 1px solid #d4dadd; |
|
} |
|
.bi-click-branch-tree .bi-empty-view { |
|
background: #f4f4f4; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-display-tree .ztree * { |
|
color: #808080; |
|
} |
|
.bi-display-tree .ztree li span.button.switch.center_open { |
|
background-image: url("${servletURL}?op=resource&resource=/com/fr/bi/web/images/icon/tree-vertical-line-3.png"); |
|
} |
|
.bi-display-tree .ztree li span.button.switch.roots_open { |
|
background-image: url("${servletURL}?op=resource&resource=/com/fr/bi/web/images/icon/tree-vertical-line-2.png"); |
|
} |
|
.bi-display-tree .ztree li span.button.switch.bottom_open { |
|
background-image: url("${servletURL}?op=resource&resource=/com/fr/bi/web/images/icon/tree-vertical-line-4.png"); |
|
} |
|
.bi-display-tree .ztree li a, |
|
.bi-display-tree .ztree li span { |
|
cursor: default !important; |
|
} |
|
.bi-display-tree .ztree li a:hover { |
|
text-decoration: none; |
|
} |
|
.bi-display-tree .ztree li a.curSelectedNode { |
|
padding-top: 1px; |
|
border: none; |
|
background-color: inherit; |
|
opacity: 1; |
|
filter: alpha(opacity=100); |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-trigger .bi-trigger-icon-button { |
|
border-left: 1px solid #d4dadd; |
|
font-size: 16px; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-editor-trigger { |
|
border: 1px solid #d4dadd; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-select-text-trigger { |
|
border: 1px solid #d4dadd; |
|
-webkit-border-radius: 2px; |
|
-moz-border-radius: 2px; |
|
border-radius: 2px; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-small-select-text-trigger { |
|
border: 1px solid #d4dadd; |
|
-webkit-border-radius: 2px; |
|
-moz-border-radius: 2px; |
|
border-radius: 2px; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-float-box { |
|
background: #ffffff; |
|
} |
|
.bi-float-box .float-box-button { |
|
color: #ffffff; |
|
background: #009de3; |
|
border: 1px solid #d4dadd; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
/**********FR.BIListView*************/ |
|
.bi-list-view { |
|
position: fixed !important; |
|
overflow-y: visible !important; |
|
overflow-x: visible !important; |
|
overflow: visible !important; |
|
cursor: default; |
|
} |
|
.bi-list-view .list-view-outer { |
|
border: 1px solid #d4dadd; |
|
-webkit-border-radius: 2px; |
|
-moz-border-radius: 2px; |
|
border-radius: 2px; |
|
background: #ffffff; |
|
} |
|
.bi-list-view .list-view-toolbar { |
|
border-top: 1px solid #eaeaea; |
|
line-height: 30px; |
|
color: #009de3; |
|
} |
|
.bi-list-view .list-view-toolbar > .center-element { |
|
border-left: 1px solid #eaeaea; |
|
} |
|
.bi-list-view .list-view-toolbar > .first-element { |
|
border-left: none; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-scroll-view .scroll-container { |
|
border-left: 1px solid #d4dadd; |
|
border-right: 1px solid #d4dadd; |
|
border-bottom: 1px solid #d4dadd; |
|
} |
|
.bi-scroll-view .scroll-drop-down-icon { |
|
font-size: 14px; |
|
border-bottom: 1px solid #d4dadd; |
|
border-left: 1px solid #d4dadd; |
|
border-right: 1px solid #d4dadd; |
|
background: #f4f4f4; |
|
} |
|
.bi-scroll-view .scroll-drop-down-icon:active { |
|
background: #d4dadd; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-inline-center-adapt-layout:after { |
|
display: inline-block; |
|
width: 0; |
|
min-height: 100%; |
|
vertical-align: middle; |
|
content: ' '; |
|
} |
|
/****添加计算宽度的--运算符直接需要space****/ |
|
/****** common color(常用颜色,可用于普遍场景) *****/ |
|
/**** custom color(自定义颜色,用于特定场景) ****/ |
|
.bi-inline-vertical-adapt-layout:after { |
|
display: inline-block; |
|
width: 0; |
|
min-height: 100%; |
|
vertical-align: middle; |
|
content: ' '; |
|
}
|
|
|