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; } .netdata-chart-alignment { margin-left: 55px; } .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 */ 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: -webkit-flex; /* Safari */ -webkit-flex-wrap: wrap; /* Safari 6.1+ */ display: inline-block; flex-wrap: wrap; 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-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; /* 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-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; }