197 lines
9.5 KiB
CSS
197 lines
9.5 KiB
CSS
/*------------ reset panel ----------------------*/
|
|
html,body{ height:100%;width:100%; padding:0; margin:0;overflow:hidden;}
|
|
/*------------Upper Panel Start------------------*/
|
|
.upperPanel{ position: absolute; left:0; right:0; top:0; height:50%}
|
|
/*-----------Upper Panel End-------------------*/
|
|
/*-----------Bottom Panel Start---------------*/
|
|
.bottomPanel{ position: absolute; left:0; right:0; bottom:0; height:50%}
|
|
.bottomPanel .smallWidth .window{ top:0;}
|
|
/*--------------Bottom Panel End-----------------*/
|
|
|
|
/*--------dashboard layout with 3 panels---------*/
|
|
.panelSize{ width:50%; position:absolute; bottom:0;top:0;}
|
|
.leftPanel{ left:1px; width: 65%;}
|
|
.rightPanel{right:0;width: 35%;}
|
|
/*-----window sise Start ------*/
|
|
.fullWindow{height:99%; width:100%; position:absolute;}
|
|
.halfWindow{height:49.5%;width:100%; position:absolute;}
|
|
/*---window position--*/
|
|
.upperWindow{top:0;}
|
|
.bottomWindow{ bottom:0;}
|
|
/*--------------------*/
|
|
/*-----window sise End -------*/
|
|
/*-----------------------------------------------*/
|
|
/*-------------------Window Start------------------------------*/
|
|
/*window sizes small, half and large (3/4) size window panel*/
|
|
.smallWidth{width:33.3%;height:100%;position:absolute;}
|
|
.halfWidth{ width:50%;height:100%;position:absolute;}
|
|
.largeWidth{width:66.6%;height:100%;position:absolute;}
|
|
/*add sizes classes for apropriate width panel */
|
|
.size60{ width:60% !important;}
|
|
.size40{ width:40% !important;}
|
|
.right60{ left:60% !important;}
|
|
.right40{ left:40% !important;}
|
|
/*-----set each window position at Left, Middle, Right ----*/
|
|
.left{ left:1px;}
|
|
.middle{left:33.3%;}
|
|
.right{ left:66.6%;}
|
|
.rightHail{ right:0;}
|
|
/**toolbar dropdown**/
|
|
.toolbarDropdown{top:3px; display:block;}
|
|
/*-----------------------------------------------*/
|
|
|
|
/* Global declarations */
|
|
/*----------------------------------------------- Modify default property of tags ------------------------------------------------------*/
|
|
/*clear float and position effect*/
|
|
.clear{ clear:both;}
|
|
/*opened popupbox style*/
|
|
.openPopup{ cursor: pointer; float: right; height: 22px; position: relative; z-index: 65;}
|
|
.openPopup label{font-size: 12px; margin: 5px 0 4px 4px; padding: 0;}
|
|
/*down arrow icon*/
|
|
.arrowIcon{ background:url(images/IconComboBox.png) no-repeat scroll 0 0 transparent; background-position:center; float: right; height: 15px; margin: 0 4px; width: 15px; z-index: 9;}
|
|
.active{background:#F5F5F5;border: 1px solid #CCCCCC;}
|
|
.showPopup{
|
|
height: 181px;
|
|
position: absolute;
|
|
right: -1px;
|
|
top: 21px;
|
|
width: 363px;
|
|
border:1px solid #CCCCCC;
|
|
background:#FFFFFF;
|
|
z-index:5;
|
|
border-top:none;
|
|
display:none;
|
|
overflow: hidden;
|
|
}
|
|
/*----button style----*/
|
|
.btnStyle{
|
|
-moz-user-select: none;
|
|
background: none repeat scroll 0 0 transparent;
|
|
border: medium none;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font: bold 13px "Helvetica Neue",Helvetica,Arial,clean,sans-serif !important;
|
|
margin: 0 2px;
|
|
overflow: visible;
|
|
padding: 0;
|
|
text-decoration: none !important;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
background-color: #015EA9;
|
|
float:right;
|
|
behavior: url(pie/PIE.htc);
|
|
}
|
|
.btnStyle.simple{
|
|
behavior: url(pie/PIE.htc);
|
|
-moz-border-radius: 5px 5px 5px 5px;
|
|
-webkit-border-radius: 5px;
|
|
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
border-radius: 5px 5px 5px 5px;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
/*filter:progid:DXImageTransform.Microsoft.Shadow(color='#555555',direction='120',strength='1');*/
|
|
background-image: url(images/btn-sprite.png);
|
|
background-position: 0 0;
|
|
background-repeat: repeat-x;
|
|
color: #FFFFFF !important;
|
|
display: inline-block;
|
|
/*font-family: inherit;*/
|
|
font-size: 13px !important;
|
|
font-size-adjust: inherit;
|
|
font-stretch: inherit;
|
|
font-style: normal !important;
|
|
font-variant: inherit;
|
|
font-weight: bold !important;
|
|
line-height: 1;
|
|
padding: 2px 7px;
|
|
position: relative;
|
|
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25), -2px 0 1px rgba(0, 0, 0, 0.25);
|
|
vertical-align: middle;
|
|
}
|
|
/*hover and active button effect*/
|
|
.btnStyle.simple:hover,btnStyle.simple:focus{color: #FFFFFF !important;background-position:0 -50px;}
|
|
.btnStyle:active{background-position:0 -95px;padding: 2px 7px 3px;}
|
|
#applyFooter{height:16px;border-top: 1px solid #DEDEDE; height: 22px; padding: 3px 2px 2px 2px;}
|
|
#applyFooter:hover{ background:#c9e2fc;}
|
|
#applyContainer{width:100%; height: 157px; overflow: auto; width: 100%;}
|
|
#selectOption{margin:-1px 0 0 0;width: 140px;}
|
|
#state{height: 22px;width:100%; text-align:left; }
|
|
/*container for chart - take full height with of parent container*/
|
|
#container{height:100%;width:100%;padding:0;margin:0;}
|
|
/*upper devission*/
|
|
.upper{ height:100%;width:100%; float:left;left: 0;position: absolute; right: 0;top: 0; }
|
|
.innerUpper{ height:100%;/* border:1px solid gray;*/float:left;}
|
|
/*lower devission*/
|
|
.lower{ height:100%;width:100%; float:left; bottom: 0; left: 0; position: absolute; right: 0;}
|
|
#leftUpperContainer{/*width:80%;*/width:100%}
|
|
#rightUpperContainer{width:310px;float:right;border-left:1px solid #F5F5F5; margin-top:10px;}
|
|
#rightUpperContainer.innerUpper { height : 96%!important; }
|
|
.UpperContainer{position: relative; border-top:1px solid #f5f5f5; height: 23%; padding: 0px; width: 99%; overflow:hidden;}
|
|
/*upper panel right side line graph parent container*/
|
|
.lineParent{border:2px solid #AAAAAA;width:120px;position:absolute; float:left; bottom: 2px; left: 1px; position: absolute; top: 1px; overflow: hidden; cursor:pointer;z-index:9999;}
|
|
.lineParent div, .lineParent div svg, .lineParent div svg rect{ height:100% !important;}
|
|
.lineParentHeading{ color: #222222; float: left;font-size: 11px; font-weight: bold;left: 130px; margin: 0px; position: absolute;}
|
|
.lineParentHeading label{ color:#333;}
|
|
.lineParentHeading span{ font-weight:normal;color:#333;}
|
|
.line{margin:1px 4px; width:120px;height:100%;}
|
|
.innerLower{height:100%;width:100%; /* border:1px solid gray; border-right:none;*/float:left;}
|
|
#middleLowerContainerBar{ height:100%;width:100%; /* border:1px solid gray; border-right:none;*/float:left;}
|
|
#rightLowerContainerBar{ height:80%;width:99%; overflow: visible; /* border:1px solid gray;border-right:none;*/float:right;}
|
|
#rightLowerContainer{float: right;}
|
|
#middleLowerContainer label{ margin: 5px; padding: 4px;}
|
|
.ssaPopup{height: 16px;padding: 2px;text-align: left;width: 140px;}
|
|
#leftLowerContainer{overflow:hidden;}
|
|
/*speedo meter*/
|
|
.meter{ margin: .5% auto 0; background-repeat: no-repeat;height: 210px !important;width: 304px !important;}
|
|
.tSelect{ float: right;height: 19px;padding: 3px; width: 95px;}
|
|
/*.tSelect
|
|
{
|
|
background: url("images/icons/IconComboBoxW.png") no-repeat scroll right 8px #08633B ;
|
|
display: block;float: right; height: 23px; margin: 1px 17px 1px 0; overflow: hidden; position: relative;
|
|
width: 57px;
|
|
}*/
|
|
.tSelect select{ height:100%; width: 100%; padding:1px}
|
|
/*.tSelect select
|
|
{
|
|
background: none repeat scroll 0 0 transparent;border: medium none; clip: rect(2px, 49px, 19px, 2px);
|
|
color: #FFFFFF;display: inline-block;height: 100%; outline: medium none;padding: 2px 0;width: 74px;z-index: 2;
|
|
}
|
|
.tSelect select option{border-left: 0 none; overflow: hidden;}
|
|
.tSelect select option:hover{}
|
|
*/
|
|
/*------small common classes------*/
|
|
.borderset{border:2px solid #1d5ba0;}
|
|
.colorTxt{ color:#5896DA; text-shadow: 0 1px 1px #EEEEEE;}
|
|
.BTxt{ color:#222222;}
|
|
.applyArea{margin:3px;}
|
|
.popupTable tr td{ padding:2px;}
|
|
/*------chart container------*/
|
|
#MainContent_MainContent_upRevenue{float: left;height: 98%;left: 0;position: absolute; right: 310px;}
|
|
.highcharts-container{ width:100% !important;}
|
|
/*------------------Dashboard according to operator--------------*/
|
|
/*---add these classes with titlebar to add colors according to operator---*/
|
|
.airtelTitle {background:#D62128; color:#fff;}
|
|
.vodafoneTitle {background:#FE0000; color:#fff;}
|
|
.gloTitle {background:#08633B; color:#fff;}
|
|
.tigoTitle {background:#37479F; color:#fff;}
|
|
.expressoTitle {background:#7369A3; color:#fff;}
|
|
.mtnTitle {background:#F9C61B; color: #333 !important; text-shadow: 1px 2px 3px #ddd;}
|
|
.mtnTitle .title, .mtnTitle .month, .mtnTitle .charTimer{color:#333 !important;}
|
|
|
|
/*---chart timer on titlebar---*/
|
|
.charTimer{ min-width:100px; float:left;font-size: 12px;left: 42%; position:relative; font-weight:normal; height:30px; color:#fff;}
|
|
.charTimer div{ float:left; margin:4px;}
|
|
#countdown{ font-weight:bold;}
|
|
/*play pausee buttons*/
|
|
.playPause{ min-width:30px; height:18px; margin:2px;float:right; border-radius:3px;border: 1px solid #fff;background:#fff; overflow:hidden; box-shadow: 1px 1px 2px #444444;filter: progid:DXImageTransform.Microsoft.Shadow(color='#555555', Direction=150, Strength=2); background: url("images/inner.gif") repeat-x scroll 0 0 #fff;}
|
|
.playPause .play{ border-radius:3px 0 0 3px; border-right: 1px solid #AAAAAA;background: url("images/icons/playPause.png") no-repeat scroll 0 0 #fff; background-position:-2px -23px;}
|
|
.playPause .play:hover{background-position:-2px -128px;}
|
|
.playPause .pause{ border-radius:0 3px 3px 0;background: url("images/icons/playPause.png") no-repeat scroll 0 0 #fff;background-position:-2px -3px;}
|
|
.playPause .pause:hover{background-position:-2px -148px;}
|
|
.playPause .play, .playPause .pause{display: block; float: left;height: 100%; width: 24px;cursor:pointer;}
|
|
.playPause .activeControll{ /*background-color:#7BA049 ;*/ background-color:#B8D3ED; cursor:default;}
|
|
.playPause .play.activeControll{background-position:-1px -109px !important;}
|
|
.playPause .pause.activeControll{background-position:-2px -91px !important;}
|
|
/*--------------------------------------Dashboard End-------------------------------------------------*/
|
|
|