]> arthur.barton.de Git - netdata.git/blobdiff - web/dashboard.css
updated all javascript libraries
[netdata.git] / web / dashboard.css
old mode 100755 (executable)
new mode 100644 (file)
index c0a9000..e969158
-html {\r
-    font-family: sans-serif;\r
-}\r
-\r
-.netdata-container {\r
-       display: -webkit-flex; /* Safari */\r
-       -webkit-flex-wrap: wrap; /* Safari 6.1+ */\r
-       display: inline-block;\r
-       flex-wrap: wrap;\r
-       overflow: hidden;\r
-\r
-       /* required for child elements to have absolute position */\r
-       position: relative;\r
-       \r
-       /* width and height is given per chart with data-width and data-height */\r
-}\r
-\r
-.netdata-message {\r
-       font-size: x-small;\r
-       width: 100%;\r
-       height: 100%;\r
-       overflow: hidden;\r
-}\r
-\r
-.netdata-error-message {\r
-       background: #EEEEEE;\r
-}\r
-\r
-.netdata-info-message {\r
-\r
-}\r
-\r
-.netdata-chart-legend {\r
-       position: absolute;                     /* within .netdata-container */\r
-       top: 0;\r
-       right: 0;\r
-       /*background-color: Gray;*/\r
-       overflow: hidden;\r
-       text-overflow: ellipsis;\r
-       line-height: 14px;\r
-       display: block;\r
-       width: 110px;\r
-       height: 100%;\r
-       font-size: 10px;\r
-       margin-top: 5px;\r
-       /* width and height is calculated (depends on the appearance of the legend) */\r
-}\r
-\r
-.netdata-legend-title-date {\r
-       font-size: 10px;\r
-       font-weight: normal;\r
-       margin-top: 0px;\r
-}\r
-.netdata-legend-title-time {\r
-       font-size: 11px;\r
-       font-weight: bold;\r
-       margin-top: 0px;\r
-}\r
-.netdata-legend-title-units {\r
-       position: absolute;\r
-       right: 5px;\r
-       float: right;\r
-       font-size: 10px;\r
-       vertical-align: top;\r
-       font-weight: normal;\r
-       margin-top: 0px;\r
-}\r
-.netdata-legend-series {\r
-       position: absolute;\r
-       width: 100%;\r
-       height: calc(100% - 50px);\r
-       /*background-color: Gray;*/\r
-       overflow: auto;\r
-       /*overflow-y: scroll;*/\r
-       overflow-x: hidden;\r
-       text-overflow: ellipsis;\r
-       line-height: 14px;\r
-       display: block;\r
-       font-size: 10px;\r
-       margin-top: 0px;\r
-}\r
-.netdata-legend-name-table-line {\r
-       display: inline-block;\r
-       width: 13px;\r
-       height: 3px;\r
-       border-width: 0px;\r
-       border-bottom-width: 2px;\r
-       border-bottom-style: solid;\r
-       border-bottom-color: white;\r
-}\r
-.netdata-legend-name-table-area {\r
-       display: inline-block;\r
-       width: 13px;\r
-       height: 5px;\r
-       border-width: 1px;\r
-       border-top-width: 1px;\r
-       border-top-style: solid;\r
-       border-top-color: inherit;\r
-}\r
-.netdata-legend-name-table-stacked {\r
-       display: inline-block;\r
-       width: 13px;\r
-       height: 5px;\r
-       border-width: 1px;\r
-       border-top-width: 1px;\r
-       border-top-style: solid;\r
-       border-top-color: inherit;\r
-}\r
-.netdata-legend-name-tr {\r
-}\r
-.netdata-legend-name-td {\r
-}\r
-.netdata-legend-name {\r
-       text-align: left;\r
-       font-size: 10px;\r
-       font-weight: bold;\r
-       vertical-align: bottom;\r
-       margin-top: 0px;\r
-       z-index: 9;\r
-       padding: 0px;\r
-}\r
-.netdata-legend-value {\r
-       /*margin-left: 14px;*/\r
-       position: absolute;\r
-       right: 5px;\r
-       float: right;\r
-       text-align: right;\r
-       font-size: 10px;\r
-       font-weight: bold;\r
-       vertical-align: bottom;\r
-       background-color: White;\r
-       margin-top: 0px;\r
-       z-index: 10;\r
-       padding: 0px;\r
-       padding-left: 15px;\r
-}\r
-\r
-.netdata-chart {\r
-       position: absolute;             /* within .netdata-container */\r
-       top: 0;                                 /* within .netdata-container */\r
-       left: 0;                                /* within .netdata-container */\r
-       display: inline-block;\r
-       overflow: hidden;\r
-       width: 100%;\r
-       height: 100%;\r
-\r
-       /* width and height is calculated (depends on the appearance of the legend) */\r
-}\r
-\r
-.netdata-chart-with-legend-right {\r
-       position: absolute;             /* within .netdata-container */\r
-       top: 0;                                 /* within .netdata-container */\r
-       left: 0;                                /* within .netdata-container */\r
-       display: block;\r
-       overflow: hidden;\r
-       margin-right: 110px;\r
-       width: calc(100% - 110px);\r
-       height: 100%;\r
-       flex-grow: 1;\r
-\r
-       /* width and height is calculated (depends on the appearance of the legend) */\r
-}\r
-\r
-.netdata-peity-chart {\r
-\r
-}\r
-\r
-.netdata-sparkline-chart {\r
-\r
-}\r
-\r
-.netdata-dygraph-chart {\r
-\r
-}\r
-\r
-.netdata-morris-chart {\r
-\r
-}\r
-\r
-.netdata-google-chart {\r
-\r
-}\r
-\r
-/* make dygraph legend disappear on hover */\r
-.dygraph-legend {\r
-       opacity: 0.9;\r
-       -webkit-transition:opacity 0.2s ease;\r
-       -moz-transition:opacity 0.2s ease;\r
-       -o-transition:opacity 0.2s ease;\r
-       padding: 4px;\r
-}\r
-\r
-.dygraph-legend:hover {\r
-       /* Red(0-255), Blue(0-255), Green(0-255), Alpha (0-1) */\r
-       background-color:rgba(100,100,100,0); \r
-       opacity:0;\r
-}\r
-\r
-/* TEST\r
-.dygraph-legend {\r
-       position: absolute;\r
-       background: rgb(0, 0, 0) transparent !important;\r
-       background-color: rgba(0,0,0,0.6) !important;\r
-       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000) !important;\r
-       -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)" !important;\r
-       color: white !important;\r
-       font: 10px arial, san serif !important;\r
-       text-align: left !important;\r
-       white-space: nowrap !important;\r
-       padding: 5px !important;\r
-       border: 1px solid white !important;\r
-       box-sizing: content-box !important;\r
-       z-index: 10000 !important;\r
-}\r
-*/\r
-\r
-.dygraph-title {\r
-       text-indent: 56px;\r
-       text-align: left;\r
-       position: absolute;\r
-       left: 0px;\r
-       top: 4px;\r
-       font-size: 11px;\r
-       font-weight: bold;\r
-}\r
+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: inline-block;
+       overflow: hidden;
+
+       /* required for child elements to have absolute position */
+       position: relative;
+       
+       /* 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: inline-block;
+       overflow: hidden;
+
+       /* fix minimum scrollbar issue in firefox */
+       min-height: 99px;
+
+       /* required for child elements to have absolute position */
+       position: relative;
+       
+       /* width and height is given per chart with data-width and data-height */
+}
+
+.netdata-legend-resize-handler {
+       display: block;
+       position: absolute;
+       bottom: 0px;
+       right: 0px;
+       height: 15px;
+       width: 30px;
+       background-color: White;
+       font-size: 12px;
+       vertical-align: middle;
+       line-height: 15px;
+       cursor: ns-resize;
+       color: #DDDDDD;
+       text-align: center;
+       overflow: hidden;
+       z-index: 20;
+       padding: 0px;
+       margin: 0px;
+}
+
+.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;
+       z-index: 20;
+       padding: 0px;
+       margin: 0px;
+}
+
+.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: inherit;
+       z-index: 0;
+}
+
+.netdata-message.hidden {
+       display: none;
+}
+
+.netdata-message.icon {
+       color: #F8F8F8;
+       text-align: center;
+       vertical-align: middle;
+}
+
+.netdata-chart-legend {
+       position: absolute;                     /* within .netdata-container */
+       top: 0;
+       right: 0;
+       background-color: white;
+       overflow: hidden;
+       text-overflow: ellipsis;
+       line-height: 14px;
+       display: block;
+       width: 140px;                           /* --legend-width */
+       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) */
+}
+
+.netdata-legend-title-date {
+       font-size: 10px;
+       font-weight: normal;
+       margin-top: 0px;
+}
+.netdata-legend-title-time {
+       font-size: 11px;
+       font-weight: bold;
+       margin-top: 0px;
+}
+.netdata-legend-title-units {
+       position: absolute;
+       right: 5px;
+       float: right;
+       font-size: 10px;
+       vertical-align: top;
+       font-weight: normal;
+       margin-top: 0px;
+}
+.netdata-legend-series {
+       position: absolute;
+       width: 140px;                           /* --legend-width */
+       height: calc(100% - 50px);
+       overflow: hidden;
+       text-overflow: ellipsis;
+       line-height: 14px;
+       display: block;
+       font-size: 10px;
+       margin-top: 0px;
+}
+
+.netdata-legend-series > .netdata-legend-series-content {
+       position      : absolute;
+       overflow      : scroll;
+       overflow-x    : hidden;
+       top           : 0;
+       right         : 0;
+       bottom        : 0;
+       left          : 0;
+       text-overflow: ellipsis;
+}
+.netdata-legend-series > .netdata-legend-series-content:focus {
+       outline: thin dotted;
+}
+.netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {
+       display: block; /* was 'none', but chrome was hidding content with it */
+}
+.has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {
+       display: block;
+}
+.netdata-legend-series > .netdata-legend-series-pane {
+/*     background : rgba(0,0,0,.25);*/
+       background : #DDD;
+       position   : absolute;
+       width      : 4px;
+       right      : 0;
+       top        : 0;
+       bottom     : 0;
+/*     visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */
+/*     opacity    : .01; */
+/*     -webkit-transition    : .2s; */
+/*     -moz-transition       : .2s; */
+/*     -o-transition         : .2s; */
+/*     transition            : .2s; */
+       -moz-border-radius    : 4px;
+       -webkit-border-radius : 4px;
+       border-radius         : 4px;
+}
+.netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {
+       background            : #444;
+/*     background            : rgba(0,0,0,.5);*/
+       position              : relative;
+       margin                : 0 1px;
+       -moz-border-radius    : 2px;
+       -webkit-border-radius : 2px;
+       border-radius         : 2px;
+}
+.netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {
+/*  visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */
+/*  opacity    : 0.99;*/
+}
+
+.netdata-legend-name-table-line {
+       display: inline-block;
+       width: 13px;
+       height: 4px;
+       border-width: 0px;
+       border-bottom-width: 2px;
+       border-bottom-style: solid;
+       border-bottom-color: white;
+}
+.netdata-legend-name-table-area {
+       display: inline-block;
+       width: 13px;
+       height: 5px;
+       border-width: 1px;
+       border-top-width: 1px;
+       border-top-style: solid;
+       border-top-color: inherit;
+}
+.netdata-legend-name-table-stacked {
+       display: inline-block;
+       width: 13px;
+       height: 5px;
+       border-width: 1px;
+       border-top-width: 1px;
+       border-top-style: solid;
+       border-top-color: inherit;
+}
+.netdata-legend-name-tr {
+}
+.netdata-legend-name-td {
+}
+.netdata-legend-name {
+       text-align: left;
+       font-size: 10px;
+       font-weight: bold;
+       vertical-align: bottom;
+       margin-top: 0px;
+       z-index: 9;
+       padding: 0px;
+       width: 80px !important;
+       max-width: 80px !important;
+       text-overflow: ellipsis;
+       overflow: hidden;
+       white-space: nowrap;
+       display: inline-block;
+       cursor: pointer;
+}
+
+.netdata-legend-value {
+       /*margin-left: 14px;*/
+       position: absolute;
+       right: 5px;
+       float: right;
+       text-align: right;
+       font-size: 10px;
+       font-weight: bold;
+       vertical-align: bottom;
+       background-color: White;
+       margin-top: 0px;
+       z-index: 10;
+       padding: 0px;
+       padding-left: 15px;
+       cursor: pointer;
+       /* -webkit-font-smoothing: none; */
+}
+.netdata-legend-name.not-selected {
+       font-weight: normal;
+       opacity: 0.3;
+}
+
+.netdata-chart {
+       position: absolute;             /* within .netdata-container */
+       top: 0;                                 /* within .netdata-container */
+       left: 0;                                /* within .netdata-container */
+       display: inline-block;
+       overflow: hidden;
+       width: 100%;
+       height: 100%;
+       z-index: 5;
+
+       /* width and height is calculated (depends on the appearance of the legend) */
+}
+
+.netdata-chart-with-legend-right {
+       position: absolute;             /* within .netdata-container */
+       top: 0;                                 /* within .netdata-container */
+       left: 0;                                /* within .netdata-container */
+       display: block;
+       overflow: hidden;
+       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) */
+}
+
+.netdata-peity-chart {
+
+}
+
+.netdata-sparkline-chart {
+
+}
+
+.netdata-dygraph-chart {
+
+}
+
+.netdata-morris-chart {
+
+}
+
+.netdata-google-chart {
+
+}
+
+.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;
+       position: absolute;
+       left: 0px;
+       top: 4px;
+       font-size: 11px;
+       font-weight: bold;
+       text-overflow: ellipsis;
+       overflow: hidden;
+       white-space: nowrap;
+}
+
+/* fix for sparkline tooltip under bootstrap */
+.jqstooltip {
+  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;
+}