3 /*font-family: Calibri,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;*/
4 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
11 text-decoration: none;
15 text-decoration: none;
19 text-decoration: none;
22 .netdata-chart-alignment {
30 display: -webkit-flex;
32 align-items: baseline;
33 -moz-align-items: baseline;
34 -webkit-align-items: baseline;
35 justify-content: center;
36 -webkit-justify-content: center;
37 -moz-justify-content: center;
41 display: inline-block;
44 /* required for child elements to have absolute position */
47 /* width and height is given per chart with data-width and data-height */
57 .netdata-container-with-legend {
58 display: inline-block;
61 /* fix minimum scrollbar issue in firefox */
64 /* required for child elements to have absolute position */
67 /* width and height is given per chart with data-width and data-height */
70 .netdata-legend-resize-handler {
77 background-color: White;
79 vertical-align: middle;
90 .netdata-legend-toolbox {
97 background-color: White;
99 vertical-align: middle;
109 .netdata-legend-toolbox-button {
110 display: inline-block;
114 background-color: White;
116 vertical-align: middle;
128 display: inline-block;
140 .netdata-message.hidden {
144 .netdata-message.icon {
147 vertical-align: middle;
150 .netdata-chart-legend {
151 position: absolute; /* within .netdata-container */
154 background-color: white;
156 text-overflow: ellipsis;
159 width: 140px; /* --legend-width */
160 height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
164 /* width and height is calculated (depends on the appearance of the legend) */
167 .netdata-legend-title-date {
172 .netdata-legend-title-time {
177 .netdata-legend-title-units {
186 .netdata-legend-series {
188 width: 140px; /* legend-width */
189 height: calc(100% - 50px);
191 text-overflow: ellipsis;
192 line-height: 14.5px; /* line spacing at the legend */
198 .netdata-legend-series > .netdata-legend-series-content {
206 text-overflow: ellipsis;
208 .netdata-legend-series > .netdata-legend-series-content:focus {
209 outline: thin dotted;
211 .netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {
212 display: block; /* was 'none', but chrome was hiding content with it */
214 .has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {
217 .netdata-legend-series > .netdata-legend-series-pane {
218 /* background : rgba(0,0,0,.25);*/
225 /* visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */
227 /* -webkit-transition : .2s; */
228 /* -moz-transition : .2s; */
229 /* -o-transition : .2s; */
230 /* transition : .2s; */
231 -moz-border-radius : 4px;
232 -webkit-border-radius : 4px;
235 .netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {
237 /* background : rgba(0,0,0,.5);*/
240 -moz-border-radius : 2px;
241 -webkit-border-radius : 2px;
244 .netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {
245 /* visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */
249 .netdata-legend-name-table-line {
250 display: inline-block;
254 border-bottom-width: 2px;
255 border-bottom-style: solid;
256 border-bottom-color: white;
258 .netdata-legend-name-table-area {
259 display: inline-block;
263 border-top-width: 1px;
264 border-top-style: solid;
265 border-top-color: inherit;
267 .netdata-legend-name-table-stacked {
268 display: inline-block;
272 border-top-width: 1px;
273 border-top-style: solid;
274 border-top-color: inherit;
276 .netdata-legend-name-tr {
278 .netdata-legend-name-td {
280 .netdata-legend-name {
282 font-size: 11px; /* legend: dimension name size */
284 vertical-align: bottom;
288 width: 80px !important;
289 max-width: 80px !important;
290 text-overflow: ellipsis;
293 display: inline-block;
297 .netdata-legend-value {
298 /*margin-left: 14px;*/
303 font-size: 11px; /* legend: dimension value size */
305 vertical-align: bottom;
306 background-color: White;
312 /* -webkit-font-smoothing: none; */
314 .netdata-legend-name.not-selected {
320 position: absolute; /* within .netdata-container */
321 top: 0; /* within .netdata-container */
322 left: 0; /* within .netdata-container */
323 display: inline-block;
329 /* width and height is calculated (depends on the appearance of the legend) */
332 .netdata-chart-with-legend-right {
333 position: absolute; /* within .netdata-container */
334 top: 0; /* within .netdata-container */
335 left: 0; /* within .netdata-container */
338 margin-right: 140px; /* --legend-width */
339 width: calc(100% - 140px); /* --legend-width */
344 /* width and height is calculated (depends on the appearance of the legend) */
347 .netdata-peity-chart {
351 .netdata-sparkline-chart {
355 .netdata-dygraph-chart {
359 .netdata-morris-chart {
363 .netdata-google-chart {
370 .dygraph-label-rotate-left {
372 /* See http://caniuse.com/#feat=transforms2d */
373 transform: rotate(90deg);
374 -webkit-transform: rotate(90deg);
375 -moz-transform: rotate(90deg);
376 -o-transform: rotate(90deg);
377 -ms-transform: rotate(90deg);
380 /* For y2-axis label */
381 .dygraph-label-rotate-right {
383 /* See http://caniuse.com/#feat=transforms2d */
384 transform: rotate(-90deg);
385 -webkit-transform: rotate(-90deg);
386 -moz-transform: rotate(-90deg);
387 -o-transform: rotate(-90deg);
388 -ms-transform: rotate(-90deg);
399 text-overflow: ellipsis;
404 /* fix for sparkline tooltip under bootstrap */
406 width: auto !important;
407 height: auto !important;
415 .easyPieChart canvas {
422 display: inline-block;
430 text-shadow: #BBB 0px 0px 1px;
431 /* -webkit-font-smoothing: none; */
435 display: inline-block;
447 display: inline-block;
471 display: inline-block;
480 text-shadow: #777 0px 0px 1px;
481 /* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
482 /* -webkit-text-stroke: 1px #777; */
483 /* -webkit-font-smoothing: none; */
487 display: inline-block;
498 display: inline-block;
511 display: inline-block;
524 display: inline-block;