2 font-family: sans-serif;
\r
5 .netdata-chart-alignment {
\r
10 display: -webkit-flex; /* Safari */
\r
11 -webkit-flex-wrap: wrap; /* Safari 6.1+ */
\r
12 display: inline-block;
\r
16 /* required for child elements to have absolute position */
\r
19 /* width and height is given per chart with data-width and data-height */
\r
22 .netdata-legend-resize-handler {
\r
29 background-color: White;
\r
31 vertical-align: middle;
\r
46 height: calc(100% - 10px); /* for the resize handler */
\r
48 background: inherit;
\r
52 .netdata-chart-is-loading {
\r
61 .netdata-error-message {
\r
62 background: #EEEEEE;
\r
65 .netdata-info-message {
\r
68 .netdata-chart-legend {
\r
69 position: absolute; /* within .netdata-container */
\r
72 background-color: white;
\r
74 text-overflow: ellipsis;
\r
77 width: 120px; /* --legend-width */
\r
78 height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
\r
81 /* width and height is calculated (depends on the appearance of the legend) */
\r
84 .netdata-legend-title-date {
\r
86 font-weight: normal;
\r
89 .netdata-legend-title-time {
\r
94 .netdata-legend-title-units {
\r
99 vertical-align: top;
\r
100 font-weight: normal;
\r
103 .netdata-legend-series {
\r
104 position: absolute;
\r
105 width: 120px; /* --legend-width */
\r
106 height: calc(100% - 50px);
\r
108 text-overflow: ellipsis;
\r
115 .netdata-legend-series > .netdata-legend-series-content {
\r
116 position : absolute;
\r
118 overflow-x : hidden;
\r
123 text-overflow: ellipsis;
\r
125 .netdata-legend-series > .netdata-legend-series-content:focus {
\r
126 outline: thin dotted;
\r
128 .netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {
\r
129 display: block; /* was 'none', but chrome was hidding content with it */
\r
131 .has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {
\r
134 .netdata-legend-series > .netdata-legend-series-pane {
\r
135 /* background : rgba(0,0,0,.25);*/
\r
137 position : absolute;
\r
142 /* visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */
\r
143 /* opacity : .01; */
\r
144 /* -webkit-transition : .2s; */
\r
145 /* -moz-transition : .2s; */
\r
146 /* -o-transition : .2s; */
\r
147 /* transition : .2s; */
\r
148 -moz-border-radius : 4px;
\r
149 -webkit-border-radius : 4px;
\r
150 border-radius : 4px;
\r
152 .netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {
\r
154 /* background : rgba(0,0,0,.5);*/
\r
155 position : relative;
\r
157 -moz-border-radius : 2px;
\r
158 -webkit-border-radius : 2px;
\r
159 border-radius : 2px;
\r
161 .netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {
\r
162 /* visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */
\r
163 /* opacity : 0.99;*/
\r
166 .netdata-legend-name-table-line {
\r
167 display: inline-block;
\r
171 border-bottom-width: 2px;
\r
172 border-bottom-style: solid;
\r
173 border-bottom-color: white;
\r
175 .netdata-legend-name-table-area {
\r
176 display: inline-block;
\r
180 border-top-width: 1px;
\r
181 border-top-style: solid;
\r
182 border-top-color: inherit;
\r
184 .netdata-legend-name-table-stacked {
\r
185 display: inline-block;
\r
189 border-top-width: 1px;
\r
190 border-top-style: solid;
\r
191 border-top-color: inherit;
\r
193 .netdata-legend-name-tr {
\r
195 .netdata-legend-name-td {
\r
197 .netdata-legend-name {
\r
201 vertical-align: bottom;
\r
205 width: 80px !important;
\r
206 max-width: 80px !important;
\r
207 text-overflow: ellipsis;
\r
209 white-space: nowrap;
\r
210 display: inline-block;
\r
213 .netdata-legend-value {
\r
214 /*margin-left: 14px;*/
\r
215 position: absolute;
\r
221 vertical-align: bottom;
\r
222 background-color: White;
\r
226 padding-left: 15px;
\r
230 position: absolute; /* within .netdata-container */
\r
231 top: 0; /* within .netdata-container */
\r
232 left: 0; /* within .netdata-container */
\r
233 display: inline-block;
\r
238 /* width and height is calculated (depends on the appearance of the legend) */
\r
241 .netdata-chart-with-legend-right {
\r
242 position: absolute; /* within .netdata-container */
\r
243 top: 0; /* within .netdata-container */
\r
244 left: 0; /* within .netdata-container */
\r
247 margin-right: 120px; /* --legend-width */
\r
248 width: calc(100% - 120px); /* --legend-width */
\r
252 /* width and height is calculated (depends on the appearance of the legend) */
\r
255 .netdata-peity-chart {
\r
259 .netdata-sparkline-chart {
\r
263 .netdata-dygraph-chart {
\r
267 .netdata-morris-chart {
\r
271 .netdata-google-chart {
\r
281 position: absolute;
\r
286 text-overflow: ellipsis;
\r
288 white-space: nowrap;
\r
291 /* fix for sparkline tooltip under bootstrap */
\r
293 width: auto !important;
\r
294 height: auto !important;
\r