2 font-family: sans-serif;
5 .netdata-chart-alignment {
10 display: -webkit-flex; /* Safari */
11 -webkit-flex-wrap: wrap; /* Safari 6.1+ */
12 display: inline-block;
16 /* required for child elements to have absolute position */
19 /* width and height is given per chart with data-width and data-height */
22 .netdata-container-with-legend {
23 display: -webkit-flex; /* Safari */
24 -webkit-flex-wrap: wrap; /* Safari 6.1+ */
25 display: inline-block;
29 /* fix minimum scrollbar issue in firefox */
32 /* required for child elements to have absolute position */
35 /* width and height is given per chart with data-width and data-height */
38 .netdata-legend-resize-handler {
45 background-color: White;
47 vertical-align: middle;
59 display: inline-block;
71 .netdata-message.hidden {
75 .netdata-message.icon {
78 vertical-align: middle;
81 .netdata-chart-legend {
82 position: absolute; /* within .netdata-container */
85 background-color: white;
87 text-overflow: ellipsis;
90 width: 140px; /* --legend-width */
91 height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
94 /* width and height is calculated (depends on the appearance of the legend) */
97 .netdata-legend-title-date {
102 .netdata-legend-title-time {
107 .netdata-legend-title-units {
116 .netdata-legend-series {
118 width: 140px; /* --legend-width */
119 height: calc(100% - 50px);
121 text-overflow: ellipsis;
128 .netdata-legend-series > .netdata-legend-series-content {
136 text-overflow: ellipsis;
138 .netdata-legend-series > .netdata-legend-series-content:focus {
139 outline: thin dotted;
141 .netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {
142 display: block; /* was 'none', but chrome was hidding content with it */
144 .has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {
147 .netdata-legend-series > .netdata-legend-series-pane {
148 /* background : rgba(0,0,0,.25);*/
155 /* visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */
157 /* -webkit-transition : .2s; */
158 /* -moz-transition : .2s; */
159 /* -o-transition : .2s; */
160 /* transition : .2s; */
161 -moz-border-radius : 4px;
162 -webkit-border-radius : 4px;
165 .netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {
167 /* background : rgba(0,0,0,.5);*/
170 -moz-border-radius : 2px;
171 -webkit-border-radius : 2px;
174 .netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {
175 /* visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */
179 .netdata-legend-name-table-line {
180 display: inline-block;
184 border-bottom-width: 2px;
185 border-bottom-style: solid;
186 border-bottom-color: white;
188 .netdata-legend-name-table-area {
189 display: inline-block;
193 border-top-width: 1px;
194 border-top-style: solid;
195 border-top-color: inherit;
197 .netdata-legend-name-table-stacked {
198 display: inline-block;
202 border-top-width: 1px;
203 border-top-style: solid;
204 border-top-color: inherit;
206 .netdata-legend-name-tr {
208 .netdata-legend-name-td {
210 .netdata-legend-name {
214 vertical-align: bottom;
218 width: 80px !important;
219 max-width: 80px !important;
220 text-overflow: ellipsis;
223 display: inline-block;
227 .netdata-legend-value {
228 /*margin-left: 14px;*/
235 vertical-align: bottom;
236 background-color: White;
243 .netdata-legend-name.not-selected {
249 position: absolute; /* within .netdata-container */
250 top: 0; /* within .netdata-container */
251 left: 0; /* within .netdata-container */
252 display: inline-block;
258 /* width and height is calculated (depends on the appearance of the legend) */
261 .netdata-chart-with-legend-right {
262 position: absolute; /* within .netdata-container */
263 top: 0; /* within .netdata-container */
264 left: 0; /* within .netdata-container */
267 margin-right: 140px; /* --legend-width */
268 width: calc(100% - 140px); /* --legend-width */
273 /* width and height is calculated (depends on the appearance of the legend) */
276 .netdata-peity-chart {
280 .netdata-sparkline-chart {
284 .netdata-dygraph-chart {
288 .netdata-morris-chart {
292 .netdata-google-chart {
307 text-overflow: ellipsis;
312 /* fix for sparkline tooltip under bootstrap */
314 width: auto !important;
315 height: auto !important;
323 .easyPieChart canvas {
330 display: inline-block;
340 display: inline-block;
351 display: inline-block;