3 /*font-family: Calibri,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;*/
4 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
10 /* fixes for default slate theme */
12 color: #bbb; /*#c7254e;*/
13 background-color: #555; /* #f9f2f4; */
16 .dashboard-sidebar .nav > .active > a,
17 .dashboard-sidebar .nav > .active:hover > a,
18 .dashboard-sidebar .nav > .active:focus > a {
20 border-left: 2px solid #765d9c;
25 text-decoration: none;
30 text-decoration: none;
35 text-decoration: none;
38 .netdata-chart-alignment {
46 display: -webkit-flex;
48 align-items: flex-end;
49 -moz-align-items: flex-end;
50 -webkit-align-items: flex-end;
51 justify-content: center;
52 -moz--webkit-justify-content: center;
53 -moz-justify-content: center;
57 display: inline-block;
60 /* required for child elements to have absolute position */
63 /* width and height is given per chart with data-width and data-height */
73 .netdata-container-with-legend {
74 display: inline-block;
77 /* fix minimum scrollbar issue in firefox */
80 /* required for child elements to have absolute position */
83 /* width and height is given per chart with data-width and data-height */
86 .netdata-legend-resize-handler {
93 background-color: #272b30;
95 vertical-align: middle;
106 .netdata-legend-toolbox {
113 background-color: #272b30;
115 vertical-align: middle;
125 .netdata-legend-toolbox-button {
126 display: inline-block;
130 background-color: #272b30;
132 vertical-align: middle;
144 display: inline-block;
156 .netdata-message.hidden {
160 .netdata-message.icon {
163 vertical-align: middle;
166 .netdata-chart-legend {
167 position: absolute; /* within .netdata-container */
171 text-overflow: ellipsis;
174 width: 140px; /* --legend-width */
175 height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
179 /* width and height is calculated (depends on the appearance of the legend) */
182 .netdata-legend-title-date {
188 .netdata-legend-title-time {
194 .netdata-legend-title-units {
204 .netdata-legend-series {
206 width: 140px; /* legend-width */
207 height: calc(100% - 50px);
209 text-overflow: ellipsis;
210 line-height: 14.5px; /* line spacing at the legend */
216 .netdata-legend-name-table-line {
217 display: inline-block;
221 border-bottom-width: 2px;
222 border-bottom-style: solid;
223 border-bottom-color: #272b30;
226 .netdata-legend-name-table-area {
227 display: inline-block;
231 border-top-width: 1px;
232 border-top-style: solid;
233 border-top-color: inherit;
236 .netdata-legend-name-table-stacked {
237 display: inline-block;
241 border-top-width: 1px;
242 border-top-style: solid;
243 border-top-color: inherit;
246 .netdata-legend-name-tr {
249 .netdata-legend-name-td {
252 .netdata-legend-name {
254 font-size: 11px; /* legend: dimension name size */
256 vertical-align: bottom;
260 width: 80px !important;
261 max-width: 80px !important;
262 text-overflow: ellipsis;
265 display: inline-block;
269 .netdata-legend-value {
270 /*margin-left: 14px;*/
275 font-size: 11px; /* legend: dimension value size */
277 vertical-align: bottom;
278 background-color: #272b30;
284 /* -webkit-font-smoothing: none; */
287 .netdata-legend-name.not-selected {
293 position: absolute; /* within .netdata-container */
294 top: 0; /* within .netdata-container */
295 left: 0; /* within .netdata-container */
296 display: inline-block;
302 /* width and height is calculated (depends on the appearance of the legend) */
305 .netdata-chart-with-legend-right {
306 position: absolute; /* within .netdata-container */
307 top: 0; /* within .netdata-container */
308 left: 0; /* within .netdata-container */
311 margin-right: 140px; /* --legend-width */
312 width: calc(100% - 140px); /* --legend-width */
317 /* width and height is calculated (depends on the appearance of the legend) */
320 .netdata-peity-chart {
324 .netdata-sparkline-chart {
328 .netdata-dygraph-chart {
332 .netdata-morris-chart {
336 .netdata-google-chart {
343 .dygraph-axis-label {
347 .dygraph-label-rotate-left {
349 /* See http://caniuse.com/#feat=transforms2d */
350 transform: rotate(90deg);
351 -webkit-transform: rotate(90deg);
352 -moz-transform: rotate(90deg);
353 -o-transform: rotate(90deg);
354 -ms-transform: rotate(90deg);
357 /* For y2-axis label */
358 .dygraph-label-rotate-right {
360 /* See http://caniuse.com/#feat=transforms2d */
361 transform: rotate(-90deg);
362 -webkit-transform: rotate(-90deg);
363 -moz-transform: rotate(-90deg);
364 -o-transform: rotate(-90deg);
365 -ms-transform: rotate(-90deg);
376 text-overflow: ellipsis;
381 /* fix for sparkline tooltip under bootstrap */
383 width: auto !important;
384 height: auto !important;
392 .easyPieChart canvas {
399 display: inline-block;
407 text-shadow: #272b30 0px 0px 1px;
408 /* -webkit-font-smoothing: none; */
412 display: inline-block;
424 display: inline-block;
448 display: inline-block;
457 text-shadow: #272b30 0px 0px 1px;
458 /* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
459 /* -webkit-text-stroke: 1px #777; */
460 /* -webkit-font-smoothing: none; */
464 display: inline-block;
475 display: inline-block;
488 display: inline-block;
501 display: inline-block;
522 /* ----------------------------------------------------------------------------
523 perfect-scrollbar settings
527 -ms-touch-action: auto;
529 overflow: hidden !important;
530 -ms-overflow-style: none;
533 @supports (-ms-overflow-style: none) {
535 overflow: auto !important;
539 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
541 overflow: auto !important;
545 .ps-container.ps-active-x > .ps-scrollbar-x-rail,
546 .ps-container.ps-active-y > .ps-scrollbar-y-rail {
548 background-color: transparent;
551 .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
552 background-color: transparent; /* background color when dragged away */
556 .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
557 background-color: #aaa; /* scrollbar color when dragged away */
561 .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
562 background-color: transparent; /* background color when dragged away */
566 .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
567 background-color: #aaa; /* scrollbar color when dragged away */
571 .ps-container > .ps-scrollbar-x-rail {
574 /* please don't change 'position' */
575 opacity: 0.2; /* the opacity when not on hover of the content */
576 -webkit-transition: background-color .2s linear, opacity .2s linear;
577 -o-transition: background-color .2s linear, opacity .2s linear;
578 -moz-transition: background-color .2s linear, opacity .2s linear;
579 transition: background-color .2s linear, opacity .2s linear;
581 /* there must be 'bottom' for ps-scrollbar-x-rail */
585 .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
587 /* please don't change 'position' */
588 background-color: #666; /* #aaa; the color on content hover */
589 -webkit-border-radius: 6px;
590 -moz-border-radius: 6px;
592 -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
593 transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
594 -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
595 -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;
596 transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
597 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;
599 /* there must be 'bottom' for ps-scrollbar-x */
600 height: 5px; /* the width of the scrollbar */
603 .ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
607 .ps-container > .ps-scrollbar-y-rail {
610 /* please don't change 'position' */
611 opacity: 0.2; /* the opacity when not on hover of the content */
612 -webkit-transition: background-color .2s linear, opacity .2s linear;
613 -o-transition: background-color .2s linear, opacity .2s linear;
614 -moz-transition: background-color .2s linear, opacity .2s linear;
615 transition: background-color .2s linear, opacity .2s linear;
617 /* there must be 'right' for ps-scrollbar-y-rail */
621 .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
623 /* please don't change 'position' */
624 background-color: #666; /* #aaa; the color on content hover */
625 -webkit-border-radius: 6px;
626 -moz-border-radius: 6px;
628 -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
629 transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
630 -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
631 -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;
632 transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
633 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;
635 /* there must be 'right' for ps-scrollbar-y */
636 width: 5px; /* the width of the scrollbar */
639 .ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
643 .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
644 background-color: transparent; /* background color when dragged */
648 .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
649 background-color: #bbb; /* scrollbar color when dragged */
653 .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
654 background-color: transparent; /* background color when dragged */
658 .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
659 background-color: #bbb; /* scrollbar color when dragged */
663 .ps-container:hover > .ps-scrollbar-x-rail,
664 .ps-container:hover > .ps-scrollbar-y-rail {
668 .ps-container:hover > .ps-scrollbar-x-rail:hover {
669 background-color: transparent; /* the background color on hover of the scrollbar */
673 .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
674 background-color: #999; /* scrollbar color on hover */
677 .ps-container:hover > .ps-scrollbar-y-rail:hover {
678 background-color: transparent; /* the background color on hover of the scrollbar */
682 .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
683 background-color: #999; /* scrollbar color on hover */