1078 lines
22 KiB
CSS
1078 lines
22 KiB
CSS
/******************************************************
|
|
*
|
|
* rMateH5 Global
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__Root{
|
|
color:#000000;
|
|
font-size:11px;
|
|
font-style:normal;
|
|
line-height:normal;
|
|
font-weight:normal;
|
|
font-variant:normal;
|
|
font-stretch:normal;
|
|
text-decoration:none;
|
|
font-family:arial, verdana;
|
|
|
|
box-sizing : border-box;
|
|
-moz-box-sizing : border-box;
|
|
-webkit-box-sizing : border-box;
|
|
|
|
width:0px;
|
|
height:0px;
|
|
}
|
|
|
|
.rMateH5__Root *{
|
|
box-sizing : border-box;
|
|
-moz-box-sizing : border-box;
|
|
-webkit-box-sizing : border-box;
|
|
|
|
/* 모바일에서 꾹 누르고 있을 경우 발생하는 회색 박스 삭제 */
|
|
-webkit-tap-highlight-color : rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.rMateH5__Main div, .rMateH5__Main span, .rMateH5__Main canvas, .rMateH5__PopUp{
|
|
position:absolute;
|
|
}
|
|
|
|
.rMateH5__UnAvailableComponent > div{
|
|
width:90%;
|
|
height:90%;
|
|
font-size:15px;
|
|
border:1px solid #ccc;
|
|
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
|
|
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
|
|
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* rMateChart
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__rMateChart, .rMateH5__TrialMarkBox{
|
|
color:#777777;
|
|
cursor:default;
|
|
}
|
|
|
|
.rMateH5__rMateChart .center{
|
|
top:0;
|
|
left:0;
|
|
right:0;
|
|
bottom:0;
|
|
margin:auto;
|
|
position:absolute;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* Chart Common
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__Main{
|
|
/* html요소가 드래그 되거나 더블 클릭 등 셀렉트 되었다고 판단 시 나오는 파란 박스 삭제 */
|
|
user-select: none;
|
|
-ms-user-select: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-o-user-select: none;
|
|
}
|
|
|
|
.rMateH5__Main canvas, .rMateH5__Main .pen{
|
|
pointer-events:none;
|
|
}
|
|
|
|
.rMateH5__rMateChart .cp{
|
|
cursor:pointer;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* Preloader
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__Preloader{
|
|
top:0px;
|
|
left:0px;
|
|
z-index:2;
|
|
width:100%;
|
|
height:100%;
|
|
opacity:0.7;
|
|
background:url("./loader.gif") 50% 50% no-repeat #FFF;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* ContextMenu
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__ContextMenu {
|
|
padding : 4px;
|
|
font-size:12px;
|
|
border: #eee solid 1px;
|
|
background-color : #fff;
|
|
color : #999;
|
|
text-align : center;
|
|
|
|
-ms-user-select : none;
|
|
-moz-user-select : none;
|
|
-webkit-user-select : none;
|
|
user-select : none;
|
|
|
|
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
|
|
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
|
|
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.rMateH5__ContextMenu span{
|
|
cursor:pointer;
|
|
position:relative;
|
|
padding:4px 8px;
|
|
white-space:nowrap;
|
|
background-color:#fff;
|
|
transition:background-color 0.2s;
|
|
}
|
|
|
|
.rMateH5__ContextMenu span:hover{
|
|
background-color:#eee !important;
|
|
}
|
|
|
|
.rMateH5__ContextMenu span.disabled{
|
|
color:#cecece;
|
|
}
|
|
|
|
.rMateH5__ContextMenu hr {
|
|
border:solid 0.5px #ccc;
|
|
margin:4px 1px;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* ScrollBar
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__ScrollBar {
|
|
background-color:#fff;
|
|
}
|
|
|
|
.rMateH5__HScrollTrack, .rMateH5__VScrollTrack {
|
|
border:1px solid #e6e6e6;
|
|
}
|
|
|
|
.rMateH5__HScrollThumb, .rMateH5__VScrollThumb {
|
|
cursor:pointer;
|
|
background-color:#e6e6e6;
|
|
transition:background-color 0.2s;
|
|
}
|
|
|
|
.rMateH5__HScrollThumb:hover, .rMateH5__VScrollThumb:hover{
|
|
background-color:#888888;
|
|
}
|
|
|
|
.rMateH5__HScrollThumbHeader{
|
|
}
|
|
|
|
.rMateH5__HScrollUpArrow {
|
|
border:1px solid #e6e6e6;
|
|
cursor:pointer;
|
|
background:url("./scroll_left_arrow.png") no-repeat 50% 50%;
|
|
}
|
|
|
|
.rMateH5__HScrollDownArrow {
|
|
border:1px solid #e6e6e6;
|
|
cursor:pointer;
|
|
background:url("./scroll_right_arrow.png") no-repeat 50% 50%;
|
|
}
|
|
|
|
.rMateH5__VScrollThumbHeader{
|
|
}
|
|
|
|
.rMateH5__VScrollUpArrow {
|
|
border:1px solid #e6e6e6;
|
|
border-right:none;
|
|
cursor:pointer;
|
|
background:url("./scroll_up_arrow.png") no-repeat 50% 50%;
|
|
}
|
|
|
|
.rMateH5__VScrollDownArrow {
|
|
border:1px solid #e6e6e6;
|
|
border-right:none;
|
|
cursor:pointer;
|
|
background:url("./scroll_down_arrow.png") no-repeat 50% 50%;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* SymboldDiv
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__SymbolDiv{
|
|
cursor:pointer;
|
|
text-align:center;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* DataEditor
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__DataEditor{
|
|
overflow-y:hidden;
|
|
overflow-x:auto;
|
|
}
|
|
|
|
.rMateH5__DataEditor table{
|
|
height:100%;
|
|
border:solid 1px #555555;
|
|
text-decoration:none;
|
|
font-style:normal;
|
|
font-weight:normal;
|
|
font-size:11px;
|
|
text-align:center;
|
|
cursor:default;
|
|
}
|
|
|
|
/* default th */
|
|
.rMateH5__DataEditor th{
|
|
color:#ffffff;
|
|
font-weight:bold;
|
|
font-size:11px;
|
|
letter-spacing:0;
|
|
text-align:center;
|
|
height:22px;
|
|
padding:2px 4px;
|
|
background:-ms-linear-gradient(270deg, #6e7376 20%, #6e7376 100%);
|
|
background:-moz-linear-gradient(270deg, #6e7376 20%, #6e7376 100%);
|
|
background:-o-linear-gradient(270deg, #6e7376 20%, #6e7376 100%);
|
|
background:-webkit-linear-gradient(270deg, #6e7376 20%, #6e7376 100%);
|
|
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6e7376', endColorstr='#ff6e7376');
|
|
}
|
|
|
|
.rMateH5__DataEditor th.column{
|
|
border-right:solid 1px #555555;
|
|
}
|
|
|
|
.rMateH5__DataEditor th.row{
|
|
border-bottom:solid 1px #555555;
|
|
}
|
|
|
|
.rMateH5__DataEditor td{
|
|
padding:2px 4px;
|
|
}
|
|
|
|
.rMateH5__DataEditor td.column{
|
|
border-right:solid 1px #555555;
|
|
}
|
|
|
|
.rMateH5__DataEditor td.row{
|
|
border-bottom:solid 1px #555555;
|
|
}
|
|
|
|
.rMateH5__DataEditor td.oddRow{
|
|
background-color:#EFEEEE;
|
|
}
|
|
|
|
.rMateH5__DataEditor td.evenRow{
|
|
background-color:#FFFFFF;
|
|
}
|
|
|
|
.rMateH5__DataEditor td:hover{
|
|
background-color:#E3FFD6;
|
|
}
|
|
|
|
.rMateH5__DataEditor td:focus{
|
|
background-color:#D1EBB4;
|
|
color:#ff0000;
|
|
}
|
|
|
|
.rMateH5__CloseButton{
|
|
background:url("./close_btn.png") no-repeat;
|
|
cursor:pointer;
|
|
position:absolute;
|
|
width:13px;
|
|
height:13px;
|
|
}
|
|
|
|
.rMateH5__CloseButton:hover{
|
|
background:url("./hover_close_btn.png") no-repeat;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* AxisLineLabel
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__AxisLineLabel{
|
|
position:absolute;
|
|
background-color:#fff;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* DrillDownMenu
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__DrillDownMenu{
|
|
left:0px;
|
|
top:0px;
|
|
position:absolute;
|
|
text-align:center;
|
|
}
|
|
|
|
.rMateH5__DrillDownMenu > .rMateH5__DrillDownBackButton,
|
|
.rMateH5__DrillDownMenu > .rMateH5__DrillDownFirstButton{
|
|
position:relative;
|
|
min-width:83px;
|
|
min-height:29px;
|
|
text-align:center;
|
|
color:#666;
|
|
background-color:rgba(255, 255, 255, 0.8);
|
|
transition:box-shadow 0.2s;
|
|
cursor:pointer;
|
|
float:left;
|
|
margin-right:8px;
|
|
padding:8px;
|
|
|
|
-webkit-box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
|
|
-moz-box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
|
|
box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.rMateH5__DrillDownMenu > .rMateH5__DrillDownBackButton:hover,
|
|
.rMateH5__DrillDownMenu > .rMateH5__DrillDownFirstButton:hover{
|
|
-webkit-box-shadow:0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
|
|
-moz-box-shadow:0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
|
|
box-shadow:0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* History
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__ChartRangeSelector{
|
|
pointer-events:auto;
|
|
}
|
|
|
|
.rMateH5__ChartRangeSelector_LeftThumb, .rMateH5__ChartRangeSelector_RightThumb{
|
|
width:10px;
|
|
height:100%;
|
|
cursor:col-resize;
|
|
border-bottom:solid 1px #b5b5b7;
|
|
background:url("./selector.png") no-repeat 50% 50%;
|
|
background-color:rgba(236, 240, 241, 0.6);
|
|
}
|
|
|
|
.rMateH5__ChartRangeSelector_Left, .rMateH5__ChartRangeSelector_Right{
|
|
border:solid 1px #eee;
|
|
border-bottom:solid 1px #b5b5b7;
|
|
background-color:rgba(236, 240, 241, 0.6);
|
|
}
|
|
|
|
.rMateH5__ChartRangeSelector_Center{
|
|
cursor:pointer;
|
|
background-color:rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* SlideChart
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__SlideController{
|
|
}
|
|
|
|
.rMateH5__PrevCanvas, .rMateH5__NextCanvas{
|
|
position:absolute;
|
|
z-index:1;
|
|
}
|
|
|
|
/* 슬라이드 이전 버튼 */
|
|
.rMateH5__SlidePrevButton{
|
|
background:url("./slide_left.png") no-repeat 50% 50%;
|
|
}
|
|
|
|
/* 슬라이드 다음 버튼 */
|
|
.rMateH5__SlideNextButton{
|
|
background:url("./slide_right.png") no-repeat 50% 50%;
|
|
}
|
|
|
|
.rMateH5__SlidePrevButton, .rMateH5__SlideNextButton{
|
|
width:20px;
|
|
height:20px;
|
|
}
|
|
|
|
/* 슬라이드 버튼 */
|
|
.rMateH5__SlideButton{
|
|
width:15px;
|
|
height:15px;
|
|
background:url("./slide_button.png") no-repeat 50% 50%;
|
|
}
|
|
|
|
/* 선택된 슬라이드의 버튼 */
|
|
.rMateH5__SlideActiveButton{
|
|
background:url("./slide_active_button.png") no-repeat 50% 50%;
|
|
}
|
|
|
|
.rMateH5__SlideButton, .rMateH5__SlidePrevButton, .rMateH5__SlideNextButton{
|
|
cursor:pointer;
|
|
position:absolute;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* Slider
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__Slider, .rMateH5__HSlider, .rMateH5__VSlider {
|
|
position : absolute;
|
|
cursor : default;
|
|
font-size : 11px;
|
|
|
|
-ms-user-select : none;
|
|
-moz-user-select : none;
|
|
-webkit-user-select : none;
|
|
user-select : none;
|
|
}
|
|
.rMateH5__Slider_Track {
|
|
width : 200px;
|
|
height : 4px;
|
|
border-width : 1px;
|
|
border-style : inset;
|
|
border-color : #DDDDDD;
|
|
position : absolute;
|
|
|
|
-ms-user-select : none;
|
|
-moz-user-select : none;
|
|
-webkit-user-select : none;
|
|
user-select : none;
|
|
}
|
|
.rMateH5__Slider_HighlightTrack {
|
|
width : 1px;
|
|
height : 2px;
|
|
border-width : 1px;
|
|
border-style : inset;
|
|
border-color : #FF0000;
|
|
position : absolute;
|
|
}
|
|
.rMateH5__Slider_TrackHitArea {
|
|
position : absolute;
|
|
}
|
|
|
|
.rMateH5__Slider_Ticks {
|
|
position : absolute;
|
|
}
|
|
.rMateH5__Slider_Tick {
|
|
position : absolute;
|
|
border-width : 1px;
|
|
border-left-style : solid;
|
|
}
|
|
.rMateH5__Slider_Labels .rMateH5__Label {
|
|
position : absolute;
|
|
|
|
-ms-user-select : none;
|
|
-moz-user-select : none;
|
|
-webkit-user-select : none;
|
|
user-select : none;
|
|
}
|
|
.rMateH5__SliderThumb {
|
|
display : inline-block;
|
|
position : absolute;
|
|
width : 16px;
|
|
height : 16px;
|
|
background:#f5f5f5;
|
|
background:linear-gradient(rgb(255, 255, 255), rgb(213, 213, 213));
|
|
border:solid 1px rgb(200, 200, 200);
|
|
border-radius : 12px;
|
|
outline : none;
|
|
|
|
-ms-user-select : none;
|
|
-moz-user-select : none;
|
|
-webkit-user-select : none;
|
|
user-select : none;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* MotionController
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__MotionController{
|
|
height:33px;
|
|
padding:4px 4px 4px 19px;
|
|
border:solid 1px #dbdbdb;
|
|
border-radius:3px;
|
|
background-color:#f5f5f5;
|
|
}
|
|
|
|
.rMateH5__PlayButton{
|
|
position:absolute;
|
|
width:11px;
|
|
height:13px;
|
|
border-style:none;
|
|
cursor:pointer;
|
|
text-align:center;
|
|
padding-top:5px;
|
|
background:url(./motion_play_button.png) no-repeat;
|
|
background-position-x:50%;
|
|
}
|
|
|
|
.motion_pause{
|
|
background-position-y:100%;
|
|
}
|
|
|
|
.rMateH5__Pause{
|
|
background:url("./loader.gif") no-repeat 50% 50%;
|
|
}
|
|
|
|
.rMateH5__MotionController .rMateH5__HSlider{
|
|
height:14px;
|
|
position:absolute;
|
|
font-size:1px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.rMateH5__MotionController .rMateH5__Slider_Track{
|
|
border-top:solid 2px #cecece;
|
|
border-bottom:solid 2px #e5e5e5;
|
|
background-color:#fff;
|
|
height:10px;
|
|
border-radius:6px;
|
|
}
|
|
|
|
.rMateH5__MotionController .rMateH5__Slider_HighlightTrack{
|
|
border:none;
|
|
height:8px;
|
|
border-radius:6px;
|
|
border-top:solid 1px #ff9600;
|
|
border-bottom:solid 1px #fba72d;
|
|
background:url(./background_highlight_track.png);
|
|
}
|
|
|
|
.rMateH5__MotionController .rMateH5__SliderThumb{
|
|
position:absolute;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* Caption, SubCaption
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__Caption{
|
|
font-size : 14px;
|
|
color : #333333;
|
|
text-align : center;
|
|
}
|
|
|
|
.rMateH5__SubCaption{
|
|
font-size : 11px;
|
|
color : #999999;
|
|
text-align : center;
|
|
}
|
|
|
|
|
|
/******************************************************
|
|
*
|
|
* Axis2DRenderer
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__Axis2DRenderer{
|
|
}
|
|
|
|
.rMateH5__Axis2DRenderer.horizontal{
|
|
text-align:center;
|
|
}
|
|
|
|
.rMateH5__Axis2DRenderer.vertical{
|
|
text-align:right;
|
|
}
|
|
|
|
|
|
/******************************************************
|
|
*
|
|
* DataTip, AxisDataTip
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__DataTip{
|
|
opacity:0;
|
|
color:#888;
|
|
font-size:12px;
|
|
font-style:normal;
|
|
padding:4px 10px;
|
|
cursor:default;
|
|
white-space:nowrap;
|
|
border:solid 1px #e9e9e9;
|
|
border-radius:4px;
|
|
background-color:rgba(255, 255, 255, 0.9);
|
|
z-index:1;
|
|
|
|
transition:left 0.2s, top 0.2s, opacity 0.5s, border 0.5s;
|
|
-webkit-transition:left 0.2s, top 0.2s, opacity 0.5s, border 0.5s;
|
|
transition-timing-function:ease-out;
|
|
-webkit-transition-timing-function:ease-out;
|
|
}
|
|
|
|
.rMateH5__DataTip.axis{
|
|
color:#fff;
|
|
background-color:rgba(119, 119, 119, 0.9);
|
|
transition:left 0.1s, top 0.1s, opacity 0.5s, border 0.5s;
|
|
-webkit-transition:left 0.1s, top 0.1s, opacity 0.5s, border 0.5s;
|
|
}
|
|
|
|
.rMateH5__DataTip.delay{
|
|
transition-delay:0.5s;
|
|
}
|
|
|
|
.rMateH5__DataTip.show{
|
|
opacity:1;
|
|
}
|
|
|
|
.rMateH5__DataTip.hide{
|
|
opacity:0;
|
|
}
|
|
|
|
.rMateH5__DataTip.mouse{
|
|
transition:opacity 0.5s, border 0.5s;
|
|
-webkit-transition:opacity 0.5s, border 0.5s;
|
|
transition-timing-function:ease-out;
|
|
-webkit-transition-timing-function:ease-out;
|
|
}
|
|
|
|
.rMateH5__DataTip.transition, .rMateH5__AxisDataTip.transition{
|
|
}
|
|
|
|
.rMateH5__DataTip *{
|
|
color:normal;
|
|
}
|
|
|
|
.rMateH5__DataTip span{
|
|
position:relative;
|
|
}
|
|
|
|
.rMateH5__DataTipMarker{
|
|
float:left;
|
|
width:9px;
|
|
height:9px;
|
|
margin-top:3px;
|
|
border:1px solid #ffffff;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* RangeSelector
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__RangeSelector{
|
|
position:absolute;
|
|
border:solid 1px rgb(27, 161, 226);
|
|
background-color:rgba(27, 161, 226, 0.5);
|
|
}
|
|
|
|
|
|
/******************************************************
|
|
*
|
|
* Legend
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__Legend, .rMateH5__SubLegend{
|
|
color:#888;
|
|
border:1px solid #e9e9e9;
|
|
background-color:#ffffff;
|
|
cursor:default;
|
|
}
|
|
|
|
.rMateH5__Legend .rMateH5__ContentPane, .rMateH5__SubLegend .rMateH5__ContentPane{
|
|
padding:5px;
|
|
}
|
|
|
|
.rMateH5__LegendItem, .rMateH5__CheckableLegendItem{
|
|
padding:0;
|
|
border:0px none;
|
|
background-color:rgba(255, 255, 255, 0);
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.rMateH5__UnChecked{
|
|
color:#ccc;
|
|
}
|
|
|
|
.rMateH5__UnFocused{
|
|
opacity:0.2;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* ColorRangeLegend
|
|
*
|
|
*****************************************************/
|
|
|
|
/* ColorRangeLegend */
|
|
.rMateH5__ColorRangeLegend{
|
|
position:absolute;
|
|
overflow:hidden;
|
|
font-size:11px;
|
|
color:#555555;
|
|
cursor:default;
|
|
}
|
|
|
|
/* ColorRangeLegend - Label */
|
|
.rMateH5__ColorRangeLegend_Label{
|
|
position:absolute;
|
|
}
|
|
|
|
/* ColorRangeLegend - Horizontal Arrow */
|
|
.rMateH5__ColorRangeLegend_HArrow{
|
|
width:5px;
|
|
height:5px;
|
|
border-top:5px solid #555555;
|
|
border-left:2.5px solid transparent;
|
|
border-right:2.5px solid transparent;
|
|
border-bottom:5px solid transparent;
|
|
position:absolute;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
/* ColorRangeLegend - Vertical Arrow */
|
|
.rMateH5__ColorRangeLegend_VArrow{
|
|
width:5px;
|
|
height:5px;
|
|
border-top:2.5px solid transparent;
|
|
border-left:5px solid transparent;
|
|
border-right:5px solid #555555;
|
|
border-bottom:2.5px solid transparent;
|
|
position:absolute;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
/*********************************************************
|
|
|
|
Holder
|
|
|
|
*********************************************************/
|
|
|
|
.rMateH5__BackgroundElementHolder,
|
|
.rMateH5__AnnotationElementHolder,
|
|
.rMateH5__CanvasElementHolder,
|
|
.rMateH5__SeriesHolder{
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
|
|
/*********************************************************
|
|
|
|
BackgroundElementHolder, AnnotationElemenetHolder
|
|
|
|
*********************************************************/
|
|
|
|
.rMateH5__BackgroundElementHolder{
|
|
pointer-events:none;
|
|
}
|
|
|
|
/*********************************************************
|
|
|
|
CanvasLabel
|
|
|
|
*********************************************************/
|
|
|
|
.rMateH5__CanvasLabel{
|
|
pointer-events:auto;
|
|
}
|
|
|
|
/*********************************************************
|
|
|
|
SeriesHolder
|
|
|
|
*********************************************************/
|
|
|
|
.rMateH5__SeriesHolder *{
|
|
text-align:center;
|
|
}
|
|
|
|
/*********************************************************
|
|
|
|
ColumnSet, BarSet, AreaSet
|
|
|
|
*********************************************************/
|
|
|
|
/*.rMateH5__ColumnSet > div, .rMateH5__BarSet > div, .rMateH5__AreaSet > div, .rMateH5__Column .rMateH5__WindRoseSet > div{*/
|
|
|
|
.rMateH5__StackedSeries > div{
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
|
|
/*********************************************************
|
|
|
|
WindRoseChart
|
|
|
|
*********************************************************/
|
|
|
|
.rMateH5__WindRoseChart{
|
|
padding-top:20px;
|
|
padding-bottom:20px;
|
|
}
|
|
|
|
/*********************************************************
|
|
|
|
CrossRangeZoomer
|
|
|
|
*********************************************************/
|
|
|
|
.rMateH5__CrossRangeZoomer{
|
|
pointer-events:auto;
|
|
}
|
|
|
|
.rMateH5__CrossRangeZoomer *{
|
|
pointer-events:none;
|
|
}
|
|
|
|
.rMateH5__CrossHair_Label{
|
|
color:#ffffff;
|
|
background-color:#999;
|
|
border:1px solid #999;
|
|
padding:2px 4px;
|
|
text-align:center;
|
|
visibility:hidden;
|
|
cursor:default;
|
|
}
|
|
|
|
.rMateH5__CrossRangeZoomer_Restore{
|
|
top:1px;
|
|
right:1px;
|
|
cursor:pointer;
|
|
font-size:12px;
|
|
color:#666;
|
|
text-align:center;
|
|
padding:8px;
|
|
min-width:83px;
|
|
min-height:29px;
|
|
transition:box-shadow 0.2s;
|
|
background-color:#fff;
|
|
background-color:rgba(255, 255, 255, 0.8);
|
|
|
|
-webkit-box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
|
|
-moz-box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
|
|
box-shadow:0px 2px 2px 0px rgba(0,0,0,0.16), 0px 0px 0px 1px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.rMateH5__CrossRangeZoomer_Restore:hover{
|
|
-webkit-box-shadow:0px 2px 5px 0px rgba(0,0,0,0.15);
|
|
-moz-box-shadow:0px 2px 5px 0px rgba(0,0,0,0.15);
|
|
box-shadow:0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* SlideChart
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__SlideController{
|
|
}
|
|
|
|
.rMateH5__PrevCanvas, .rMateH5__NextCanvas{
|
|
position:absolute;
|
|
z-index:1;
|
|
}
|
|
|
|
/* 슬라이드 이전 버튼 */
|
|
.rMateH5__SlidePrevButton{
|
|
background:url("./slide_left.png") no-repeat 50% 50%;
|
|
}
|
|
|
|
/* 슬라이드 다음 버튼 */
|
|
.rMateH5__SlideNextButton{
|
|
background:url("./slide_right.png") no-repeat 50% 50%;
|
|
}
|
|
|
|
.rMateH5__SlidePrevButton, .rMateH5__SlideNextButton{
|
|
width:20px;
|
|
height:20px;
|
|
}
|
|
|
|
/* 슬라이드 버튼 */
|
|
.rMateH5__SlideButton{
|
|
width:15px;
|
|
height:15px;
|
|
background:url("./slide_button.png") no-repeat 50% 50%;
|
|
}
|
|
|
|
/* 선택된 슬라이드의 버튼 */
|
|
.rMateH5__SlideActiveButton{
|
|
background:url("./slide_active_button.png") no-repeat 50% 50%;
|
|
}
|
|
|
|
.rMateH5__SlideButton, .rMateH5__SlidePrevButton, .rMateH5__SlideNextButton{
|
|
cursor:pointer;
|
|
position:absolute;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* Line2DSeries DisplayName
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__DisplayName{
|
|
cursor:default;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* UserContent
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__UserDefineWrapper{
|
|
left:0;
|
|
top:0;
|
|
position:absolute;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.rMateH5__UserDefineWrapper > div{
|
|
position:relative;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* PopUp
|
|
*
|
|
*****************************************************/
|
|
|
|
.rMateH5__PopUp{
|
|
width:196px;
|
|
background-color:#fff;
|
|
}
|
|
|
|
.rMateH5__PopUp div{
|
|
position:relative;
|
|
color:#fff;
|
|
}
|
|
|
|
.rMateH5__PopUp .rMateH5__Title{
|
|
width:100%;
|
|
height:26px;
|
|
background-color:#4452a8;
|
|
padding:6px 0 0 10px;
|
|
border-top-left-radius:6px;
|
|
border-top-right-radius:6px;
|
|
}
|
|
|
|
.rMateH5__PopUp .rMateH5__Content{
|
|
color:#222;
|
|
border-left:solid 1px #dbdbdb;
|
|
border-right:solid 1px #dbdbdb;
|
|
padding:26px 30px;
|
|
text-align:center;
|
|
}
|
|
|
|
.rMateH5__PopUp .rMateH5__Button{
|
|
border:solid 1px #dbdbdb;
|
|
border-top:none;
|
|
border-bottom-left-radius:6px;
|
|
border-bottom-right-radius:6px;
|
|
padding-bottom:12px;
|
|
}
|
|
|
|
.rMateH5__PopUp .rMateH5__Button > div{
|
|
border-radius:10px;
|
|
width:57px;
|
|
height:16px;
|
|
background-color:#c4c5c9;
|
|
margin:0 auto;
|
|
text-align:center;
|
|
transition:background-color 0.2s;
|
|
cursor:pointer;
|
|
}
|
|
|
|
|
|
.rMateH5__PopUp .rMateH5__Button > div:hover{
|
|
background-color:#999;
|
|
}
|
|
|
|
/******************************************************
|
|
*
|
|
* Chart Menu
|
|
*
|
|
*****************************************************/
|
|
|
|
/* Chart Menu */
|
|
.rMateH5__ChartMenu{
|
|
top:4px;
|
|
right:4px;
|
|
width:20px;
|
|
height:20px;
|
|
font-size:12px;
|
|
border-radius:1px;
|
|
border:1px solid #ccc;
|
|
|
|
z-index:1;
|
|
overflow:hidden;
|
|
opacity:0;
|
|
position:absolute;
|
|
transition:width 0.2s, height 0.2s, opacity 0.2s;
|
|
background:url(./menu.png) #fff no-repeat 50% 50%;
|
|
|
|
padding-left:18px;
|
|
padding-top:18px;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
/* Chart 영역에 마우스 오버시 ChartMenu */
|
|
.rMateH5__chart_menu_hover{
|
|
opacity:1;
|
|
}
|
|
|
|
/* ChartMenu에 마우스 오버시 */
|
|
.rMateH5__chart_menu_expand{
|
|
width:70px;
|
|
height:auto;
|
|
padding:4px;
|
|
background-position:-20px -20px;
|
|
}
|
|
|
|
/* ChartMenu에 붙는 아이템 들 */
|
|
.rMateH5__ChartMenuItem{
|
|
width:60px;
|
|
padding-left:2px;
|
|
|
|
cursor:pointer;
|
|
background-color:#ffffff;
|
|
transition:background-color 0.2s;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
/* ChartMenuItem에 설정된 img */
|
|
.rMateH5__ChartMenuItem_Img{
|
|
width:12px;
|
|
height:12px;
|
|
margin-right:4px;
|
|
}
|
|
|
|
/* ChartMenuItem 마우스 오버시 */
|
|
.rMateH5__ChartMenuItem:hover{
|
|
background-color:#555555;
|
|
color:#ffffff;
|
|
} |