3 /*font-family: Calibri,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;*/
4 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
10 .dashboard-sidebar .nav > .active > a,
11 .dashboard-sidebar .nav > .active:hover > a,
12 .dashboard-sidebar .nav > .active:focus > a {
14 border-left: 2px solid #765d9c;
19 text-decoration: none;
23 text-decoration: none;
27 text-decoration: none;
30 .netdata-chart-alignment {
38 display: -webkit-flex;
40 align-items: flex-end;
41 -moz-align-items: flex-end;
42 -webkit-align-items: flex-end;
43 justify-content: center;
44 -moz--webkit-justify-content: center;
45 -moz-justify-content: center;
49 display: inline-block;
52 /* required for child elements to have absolute position */
55 /* width and height is given per chart with data-width and data-height */
65 .netdata-container-with-legend {
66 display: inline-block;
69 /* fix minimum scrollbar issue in firefox */
72 /* required for child elements to have absolute position */
75 /* width and height is given per chart with data-width and data-height */
78 .netdata-legend-resize-handler {
85 background-color: #272b30;
87 vertical-align: middle;
98 .netdata-legend-toolbox {
105 background-color: #272b30;
107 vertical-align: middle;
117 .netdata-legend-toolbox-button {
118 display: inline-block;
122 background-color: #272b30;
124 vertical-align: middle;
136 display: inline-block;
148 .netdata-message.hidden {
152 .netdata-message.icon {
155 vertical-align: middle;
158 .netdata-chart-legend {
159 position: absolute; /* within .netdata-container */
162 background-color: #272b30;
164 text-overflow: ellipsis;
167 width: 140px; /* --legend-width */
168 height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
172 /* width and height is calculated (depends on the appearance of the legend) */
175 .netdata-legend-title-date {
180 .netdata-legend-title-time {
185 .netdata-legend-title-units {
194 .netdata-legend-series {
196 width: 140px; /* --legend-width */
197 height: calc(100% - 50px);
199 text-overflow: ellipsis;
206 .netdata-legend-series > .netdata-legend-series-content {
214 text-overflow: ellipsis;
216 .netdata-legend-series > .netdata-legend-series-content:focus {
217 outline: thin dotted;
219 .netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {
220 display: block; /* was 'none', but chrome was hidding content with it */
222 .has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {
225 .netdata-legend-series > .netdata-legend-series-pane {
226 /* background : rgba(0,0,0,.25);*/
227 background : #373b40;
233 /* visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */
235 /* -webkit-transition : .2s; */
236 /* -moz-transition : .2s; */
237 /* -o-transition : .2s; */
238 /* transition : .2s; */
239 -moz-border-radius : 4px;
240 -webkit-border-radius : 4px;
243 .netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {
244 background : #222; /* nano scroller handler color */
245 /* background : rgba(0,0,0,.5);*/
248 -moz-border-radius : 2px;
249 -webkit-border-radius : 2px;
252 .netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {
253 /* visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */
257 .netdata-legend-name-table-line {
258 display: inline-block;
262 border-bottom-width: 2px;
263 border-bottom-style: solid;
264 border-bottom-color: #272b30;
266 .netdata-legend-name-table-area {
267 display: inline-block;
271 border-top-width: 1px;
272 border-top-style: solid;
273 border-top-color: inherit;
275 .netdata-legend-name-table-stacked {
276 display: inline-block;
280 border-top-width: 1px;
281 border-top-style: solid;
282 border-top-color: inherit;
284 .netdata-legend-name-tr {
286 .netdata-legend-name-td {
288 .netdata-legend-name {
292 vertical-align: bottom;
296 width: 80px !important;
297 max-width: 80px !important;
298 text-overflow: ellipsis;
301 display: inline-block;
305 .netdata-legend-value {
306 /*margin-left: 14px;*/
313 vertical-align: bottom;
314 background-color: #272b30;
320 /* -webkit-font-smoothing: none; */
322 .netdata-legend-name.not-selected {
328 position: absolute; /* within .netdata-container */
329 top: 0; /* within .netdata-container */
330 left: 0; /* within .netdata-container */
331 display: inline-block;
337 /* width and height is calculated (depends on the appearance of the legend) */
340 .netdata-chart-with-legend-right {
341 position: absolute; /* within .netdata-container */
342 top: 0; /* within .netdata-container */
343 left: 0; /* within .netdata-container */
346 margin-right: 140px; /* --legend-width */
347 width: calc(100% - 140px); /* --legend-width */
352 /* width and height is calculated (depends on the appearance of the legend) */
355 .netdata-peity-chart {
359 .netdata-sparkline-chart {
363 .netdata-dygraph-chart {
367 .netdata-morris-chart {
371 .netdata-google-chart {
378 .dygraph-axis-label {
382 .dygraph-label-rotate-left {
384 /* See http://caniuse.com/#feat=transforms2d */
385 transform: rotate(90deg);
386 -webkit-transform: rotate(90deg);
387 -moz-transform: rotate(90deg);
388 -o-transform: rotate(90deg);
389 -ms-transform: rotate(90deg);
392 /* For y2-axis label */
393 .dygraph-label-rotate-right {
395 /* See http://caniuse.com/#feat=transforms2d */
396 transform: rotate(-90deg);
397 -webkit-transform: rotate(-90deg);
398 -moz-transform: rotate(-90deg);
399 -o-transform: rotate(-90deg);
400 -ms-transform: rotate(-90deg);
411 text-overflow: ellipsis;
416 /* fix for sparkline tooltip under bootstrap */
418 width: auto !important;
419 height: auto !important;
427 .easyPieChart canvas {
434 display: inline-block;
442 text-shadow: #272b30 0px 0px 1px;
443 /* -webkit-font-smoothing: none; */
447 display: inline-block;
459 display: inline-block;
483 display: inline-block;
492 text-shadow: #272b30 0px 0px 1px;
493 /* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
494 /* -webkit-text-stroke: 1px #777; */
495 /* -webkit-font-smoothing: none; */
499 display: inline-block;
510 display: inline-block;
523 display: inline-block;
536 display: inline-block;