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;
16 text-decoration: none;
21 text-decoration: none;
24 .netdata-chart-alignment {
32 display: -webkit-flex;
34 align-items: baseline;
35 -moz-align-items: baseline;
36 -webkit-align-items: baseline;
37 justify-content: center;
38 -webkit-justify-content: center;
39 -moz-justify-content: center;
43 display: inline-block;
46 /* required for child elements to have absolute position */
49 /* width and height is given per chart with data-width and data-height */
59 .netdata-container-with-legend {
60 display: inline-block;
63 /* fix minimum scrollbar issue in firefox */
66 /* required for child elements to have absolute position */
69 /* width and height is given per chart with data-width and data-height */
72 .netdata-legend-resize-handler {
79 background-color: White;
81 vertical-align: middle;
92 .netdata-legend-toolbox {
99 background-color: White;
101 vertical-align: middle;
111 .netdata-legend-toolbox-button {
112 display: inline-block;
116 background-color: White;
118 vertical-align: middle;
130 display: inline-block;
142 .netdata-message.hidden {
146 .netdata-message.icon {
149 vertical-align: middle;
152 .netdata-chart-legend {
153 position: absolute; /* within .netdata-container */
157 text-overflow: ellipsis;
160 width: 140px; /* --legend-width */
161 height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
165 /* width and height is calculated (depends on the appearance of the legend) */
168 .netdata-legend-title-date {
174 .netdata-legend-title-time {
180 .netdata-legend-title-units {
190 .netdata-legend-series {
192 width: 140px; /* legend-width */
193 height: calc(100% - 50px);
195 text-overflow: ellipsis;
196 line-height: 14.5px; /* line spacing at the legend */
202 .netdata-legend-name-table-line {
203 display: inline-block;
207 border-bottom-width: 2px;
208 border-bottom-style: solid;
209 border-bottom-color: white;
212 .netdata-legend-name-table-area {
213 display: inline-block;
217 border-top-width: 1px;
218 border-top-style: solid;
219 border-top-color: inherit;
222 .netdata-legend-name-table-stacked {
223 display: inline-block;
227 border-top-width: 1px;
228 border-top-style: solid;
229 border-top-color: inherit;
232 .netdata-legend-name-tr {
235 .netdata-legend-name-td {
238 .netdata-legend-name {
240 font-size: 11px; /* legend: dimension name size */
242 vertical-align: bottom;
246 width: 80px !important;
247 max-width: 80px !important;
248 text-overflow: ellipsis;
251 display: inline-block;
255 .netdata-legend-value {
256 /*margin-left: 14px;*/
261 font-size: 11px; /* legend: dimension value size */
263 vertical-align: bottom;
264 background-color: White;
270 /* -webkit-font-smoothing: none; */
273 .netdata-legend-name.not-selected {
279 position: absolute; /* within .netdata-container */
280 top: 0; /* within .netdata-container */
281 left: 0; /* within .netdata-container */
282 display: inline-block;
288 /* width and height is calculated (depends on the appearance of the legend) */
291 .netdata-chart-with-legend-right {
292 position: absolute; /* within .netdata-container */
293 top: 0; /* within .netdata-container */
294 left: 0; /* within .netdata-container */
297 margin-right: 140px; /* --legend-width */
298 width: calc(100% - 140px); /* --legend-width */
303 /* width and height is calculated (depends on the appearance of the legend) */
306 .netdata-peity-chart {
310 .netdata-sparkline-chart {
314 .netdata-dygraph-chart {
318 .netdata-morris-chart {
322 .netdata-google-chart {
329 .dygraph-label-rotate-left {
331 /* See http://caniuse.com/#feat=transforms2d */
332 transform: rotate(90deg);
333 -webkit-transform: rotate(90deg);
334 -moz-transform: rotate(90deg);
335 -o-transform: rotate(90deg);
336 -ms-transform: rotate(90deg);
339 /* For y2-axis label */
340 .dygraph-label-rotate-right {
342 /* See http://caniuse.com/#feat=transforms2d */
343 transform: rotate(-90deg);
344 -webkit-transform: rotate(-90deg);
345 -moz-transform: rotate(-90deg);
346 -o-transform: rotate(-90deg);
347 -ms-transform: rotate(-90deg);
358 text-overflow: ellipsis;
363 /* fix for sparkline tooltip under bootstrap */
365 width: auto !important;
366 height: auto !important;
374 .easyPieChart canvas {
381 display: inline-block;
389 text-shadow: #BBB 0px 0px 1px;
390 /* -webkit-font-smoothing: none; */
394 display: inline-block;
406 display: inline-block;
430 display: inline-block;
439 text-shadow: #777 0px 0px 1px;
440 /* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
441 /* -webkit-text-stroke: 1px #777; */
442 /* -webkit-font-smoothing: none; */
446 display: inline-block;
457 display: inline-block;
470 display: inline-block;
483 display: inline-block;
504 /* ----------------------------------------------------------------------------
505 perfect-scrollbar settings
509 -ms-touch-action: auto;
511 overflow: hidden !important;
512 -ms-overflow-style: none;
515 @supports (-ms-overflow-style: none) {
517 overflow: auto !important;
521 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
523 overflow: auto !important;
527 .ps-container.ps-active-x > .ps-scrollbar-x-rail,
528 .ps-container.ps-active-y > .ps-scrollbar-y-rail {
530 background-color: transparent;
533 .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
534 background-color: transparent; /* background color when dragged away */
538 .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
539 background-color: #aaa; /* scrollbar color when dragged away */
543 .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
544 background-color: transparent; /* background color when dragged away */
548 .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
549 background-color: #aaa; /* scrollbar color when dragged away */
553 .ps-container > .ps-scrollbar-x-rail {
556 /* please don't change 'position' */
557 opacity: 0.2; /* the opacity when not on hover of the content */
558 -webkit-transition: background-color .2s linear, opacity .2s linear;
559 -o-transition: background-color .2s linear, opacity .2s linear;
560 -moz-transition: background-color .2s linear, opacity .2s linear;
561 transition: background-color .2s linear, opacity .2s linear;
563 /* there must be 'bottom' for ps-scrollbar-x-rail */
567 .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
569 /* please don't change 'position' */
570 background-color: #666; /* #aaa; the color on content hover */
571 -webkit-border-radius: 6px;
572 -moz-border-radius: 6px;
574 -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
575 transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
576 -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
577 -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
578 transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
579 transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
581 /* there must be 'bottom' for ps-scrollbar-x */
582 height: 5px; /* the width of the scrollbar */
585 .ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
589 .ps-container > .ps-scrollbar-y-rail {
592 /* please don't change 'position' */
593 opacity: 0.2; /* the opacity when not on hover of the content */
594 -webkit-transition: background-color .2s linear, opacity .2s linear;
595 -o-transition: background-color .2s linear, opacity .2s linear;
596 -moz-transition: background-color .2s linear, opacity .2s linear;
597 transition: background-color .2s linear, opacity .2s linear;
599 /* there must be 'right' for ps-scrollbar-y-rail */
603 .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
605 /* please don't change 'position' */
606 background-color: #666; /* #aaa; the color on content hover */
607 -webkit-border-radius: 6px;
608 -moz-border-radius: 6px;
610 -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
611 transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
612 -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
613 -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
614 transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
615 transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
617 /* there must be 'right' for ps-scrollbar-y */
618 width: 5px; /* the width of the scrollbar */
621 .ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
625 .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
626 background-color: transparent; /* background color when dragged */
630 .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
631 background-color: #bbb; /* scrollbar color when dragged */
635 .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
636 background-color: transparent; /* background color when dragged */
640 .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
641 background-color: #bbb; /* scrollbar color when dragged */
645 .ps-container:hover > .ps-scrollbar-x-rail,
646 .ps-container:hover > .ps-scrollbar-y-rail {
650 .ps-container:hover > .ps-scrollbar-x-rail:hover {
651 background-color: transparent; /* the background color on hover of the scrollbar */
655 .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
656 background-color: #999; /* scrollbar color on hover */
659 .ps-container:hover > .ps-scrollbar-y-rail:hover {
660 background-color: transparent; /* the background color on hover of the scrollbar */
664 .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
665 background-color: #999; /* scrollbar color on hover */