-html {
- font-family: sans-serif;
+html,
+body {
+ /*font-family: Calibri,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;*/
+ font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+ font-style: normal;
+ font-variant: normal;
+}
+
+.morelink {
+ color: #765d9c;
+ text-decoration: none;
+}
+.morelink:hover {
+ color: #563d7c;
+ text-decoration: none;
+}
+.morelink:focus {
+ color: #765d9c;
+ text-decoration: none;
}
.netdata-chart-alignment {
margin-left: 55px;
}
+.netdata-chart-row {
+ width: 100%;
+ text-align: center;
+ display: flex;
+ display: -webkit-flex;
+ display: -moz-flex;
+ align-items: baseline;
+ -moz-align-items: baseline;
+ -webkit-align-items: baseline;
+ justify-content: center;
+ -webkit-justify-content: center;
+ -moz-justify-content: center;
+}
+
.netdata-container {
- display: -webkit-flex; /* Safari */
- -webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: inline-block;
- flex-wrap: wrap;
overflow: hidden;
/* required for child elements to have absolute position */
/* width and height is given per chart with data-width and data-height */
}
+.netdata-aspect {
+ position: relative;
+ width: 100%;
+ padding: 0px;
+ margin: 0px;
+}
+
.netdata-container-with-legend {
- display: -webkit-flex; /* Safari */
- -webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: inline-block;
- flex-wrap: wrap;
overflow: hidden;
/* fix minimum scrollbar issue in firefox */
color: #DDDDDD;
text-align: center;
overflow: hidden;
- z-index: 11;
+ z-index: 20;
padding: 0px;
margin: 0px;
}
-.netdata-message {
- display: none;
- font-size: x-small;
- width: 100%;
- height: calc(100% - 10px); /* for the resize handler */
+.netdata-legend-toolbox {
+ display: block;
+ position: absolute;
+ bottom: 0px;
+ right: 30px;
+ height: 15px;
+ width: 110px;
+ background-color: White;
+ font-size: 12px;
+ vertical-align: middle;
+ line-height: 15px;
+ color: #DDDDDD;
+ text-align: center;
overflow: hidden;
- background: inherit;
- z-index: 10000;
+ z-index: 20;
+ padding: 0px;
+ margin: 0px;
}
-.netdata-chart-is-loading {
- display: none;
+.netdata-legend-toolbox-button {
+ display: inline-block;
+ position: relative;
+ height: 15px;
+ width: 18px;
+ background-color: White;
+ font-size: 12px;
+ vertical-align: middle;
+ line-height: 15px;
+ color: #CDCDCD;
+ text-align: center;
+ overflow: hidden;
+ z-index: 21;
+ padding: 0px;
+ margin: 0px;
+ cursor: pointer;
+}
+
+.netdata-message {
+ display: inline-block;
+ text-align: left;
+ vertical-align: top;
+ font-weight: bold;
font-size: x-small;
width: 100%;
+ height: 100%;
overflow: hidden;
- background: white;
- z-index: 10000;
+ background: inherit;
+ z-index: 0;
}
-.netdata-error-message {
- background: #EEEEEE;
+.netdata-message.hidden {
+ display: none;
}
-.netdata-info-message {
+.netdata-message.icon {
+ color: #F8F8F8;
+ text-align: center;
+ vertical-align: middle;
}
.netdata-chart-legend {
height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
font-size: 10px;
margin-top: 5px;
+ text-align: left;
/* width and height is calculated (depends on the appearance of the legend) */
}
padding: 0px;
padding-left: 15px;
cursor: pointer;
+ /* -webkit-font-smoothing: none; */
}
.netdata-legend-name.not-selected {
font-weight: normal;
overflow: hidden;
width: 100%;
height: 100%;
+ z-index: 5;
/* width and height is calculated (depends on the appearance of the legend) */
}
margin-right: 140px; /* --legend-width */
width: calc(100% - 140px); /* --legend-width */
height: 100%;
+ z-index: 5;
flex-grow: 1;
/* width and height is calculated (depends on the appearance of the legend) */
.dygraph-ylabel {
}
+.dygraph-label-rotate-left {
+ text-align: center;
+ /* See http://caniuse.com/#feat=transforms2d */
+ transform: rotate(90deg);
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+}
+
+/* For y2-axis label */
+.dygraph-label-rotate-right {
+ text-align: center;
+ /* See http://caniuse.com/#feat=transforms2d */
+ transform: rotate(-90deg);
+ -webkit-transform: rotate(-90deg);
+ -moz-transform: rotate(-90deg);
+ -o-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+}
+
.dygraph-title {
text-indent: 56px;
text-align: left;
width: auto !important;
height: auto !important;
}
+
+.easyPieChart {
+ position: relative;
+ text-align: center;
+}
+
+.easyPieChart canvas {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.easyPieChartLabel {
+ display: inline-block;
+ position: absolute;
+ float: left;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ color: #666;
+ font-weight: normal;
+ text-shadow: #BBB 0px 0px 1px;
+ /* -webkit-font-smoothing: none; */
+}
+
+.easyPieChartTitle {
+ display: inline-block;
+ position: absolute;
+ float: left;
+ left: 0;
+ width: 64%;
+ margin-left: 18%;
+ text-align: center;
+ color: #999999;
+ font-weight: normal;
+}
+
+.easyPieChartUnits {
+ display: inline-block;
+ position: absolute;
+ float: left;
+ left: 0;
+ width: 60%;
+ margin-left: 20%;
+ text-align: center;
+ color: #999999;
+ font-weight: normal;
+}
+
+.gaugeChart {
+ position: relative;
+ text-align: center;
+}
+
+.gaugeChart canvas {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 0;
+}
+
+.gaugeChartLabel {
+ display: inline-block;
+ position: absolute;
+ float: left;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ color: #FFFFFF;
+ font-weight: bold;
+ z-index: 1;
+ text-shadow: #777 0px 0px 1px;
+ /* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
+ /* -webkit-text-stroke: 1px #777; */
+ /* -webkit-font-smoothing: none; */
+}
+
+.gaugeChartTitle {
+ display: inline-block;
+ position: absolute;
+ float: left;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ color: #999999;
+ font-weight: bold;
+}
+
+.gaugeChartUnits {
+ display: inline-block;
+ position: absolute;
+ float: left;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ text-align: left;
+ margin-left: 5%;
+ color: #999999;
+ font-weight: normal;
+}
+
+.gaugeChartMin {
+ display: inline-block;
+ position: absolute;
+ float: left;
+ left: 0;
+ bottom: 10%;
+ width: 92%;
+ margin-left: 8%;
+ text-align: left;
+ color: #999999;
+ font-weight: normal;
+}
+
+.gaugeChartMax {
+ display: inline-block;
+ position: absolute;
+ float: left;
+ left: 0;
+ bottom: 10%;
+ width: 95%;
+ margin-right: 5%;
+ text-align: right;
+ color: #999999;
+ font-weight: normal;
+}
+
+.popover-title {
+ font-weight: bold;
+ font-size: 12px;
+}
+.popover-content {
+ font-size: 11px;
+}