web/dashboard.css

   1 html {\r
   2     font-family: sans-serif;\r
   3 }\r
   4 \r
   5 .netdata-chart-alignment {\r
   6         margin-left: 55px;\r
   7 }\r
   8 \r
   9 .netdata-container {\r
  10         display: -webkit-flex; /* Safari */\r
  11         -webkit-flex-wrap: wrap; /* Safari 6.1+ */\r
  12         display: inline-block;\r
  13         flex-wrap: wrap;\r
  14         overflow: hidden;\r
  15 \r
  16         /* required for child elements to have absolute position */\r
  17         position: relative;\r
  18         \r
  19         /* width and height is given per chart with data-width and data-height */\r
  20 }\r
  21 \r
  22 .netdata-container-resizable {\r
  23         display: -webkit-flex; /* Safari */\r
  24         -webkit-flex-wrap: wrap; /* Safari 6.1+ */\r
  25         display: inline-block;\r
  26         flex-wrap: wrap;\r
  27         overflow: hidden;\r
  28 \r
  29         /* enable CSS3 resizing */\r
  30         resize: vertical;\r
  31 \r
  32         /* required for child elements to have absolute position */\r
  33         position: relative;\r
  34         \r
  35         /* width and height is given per chart with data-width and data-height */\r
  36 }\r
  37 \r
  38 .netdata-container-resizable::after {\r
  39     /* pointer-events: none; */\r
  40     font-family: FontAwesome;\r
  41     color: #999999;\r
  42     content: "\f078";\r
  43     font-size: 12px;\r
  44     position: absolute;\r
  45     height: 15px;\r
  46     width: 18px;\r
  47     text-align: center;\r
  48     bottom: 0px;\r
  49     right: -2px;\r
  50     z-index: 2;\r
  51     cursor: ns-resize;\r
  52     background-color: #ffffff;\r
  53 }\r
  54 \r
  55 .netdata-message {\r
  56         display: none;\r
  57         font-size: x-small;\r
  58         width: 100%;\r
  59         height: calc(100% - 10px); /* for the resize handler */\r
  60         overflow: hidden;\r
  61         background: inherit;\r
  62         z-index: 10000;\r
  63 }\r
  64 \r
  65 .netdata-chart-is-loading {\r
  66         display: none;\r
  67         font-size: x-small;\r
  68         width: 100%;\r
  69         overflow: hidden;\r
  70         background: white;\r
  71         z-index: 10000;\r
  72 }\r
  73 \r
  74 .netdata-error-message {\r
  75         background: #EEEEEE;\r
  76 }\r
  77 \r
  78 .netdata-info-message {\r
  79 }\r
  80 \r
  81 .netdata-chart-legend {\r
  82         position: absolute;                     /* within .netdata-container */\r
  83         top: 0;\r
  84         right: 0;\r
  85         background-color: white;\r
  86         overflow: hidden;\r
  87         text-overflow: ellipsis;\r
  88         line-height: 14px;\r
  89         display: block;\r
  90         width: 110px;\r
  91         height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */\r
  92         font-size: 10px;\r
  93         margin-top: 5px;\r
  94         /* width and height is calculated (depends on the appearance of the legend) */\r
  95 }\r
  96 \r
  97 .netdata-legend-title-date {\r
  98         font-size: 10px;\r
  99         font-weight: normal;\r
 100         margin-top: 0px;\r
 101 }\r
 102 .netdata-legend-title-time {\r
 103         font-size: 11px;\r
 104         font-weight: bold;\r
 105         margin-top: 0px;\r
 106 }\r
 107 .netdata-legend-title-units {\r
 108         position: absolute;\r
 109         right: 5px;\r
 110         float: right;\r
 111         font-size: 10px;\r
 112         vertical-align: top;\r
 113         font-weight: normal;\r
 114         margin-top: 0px;\r
 115 }\r
 116 .netdata-legend-series {\r
 117         position: absolute;\r
 118         width: 110px;\r
 119         height: calc(100% - 50px);\r
 120         overflow: hidden;\r
 121         text-overflow: ellipsis;\r
 122         line-height: 14px;\r
 123         display: block;\r
 124         font-size: 10px;\r
 125         margin-top: 0px;\r
 126 }\r
 127 \r
 128 .netdata-legend-series > .netdata-legend-series-content {\r
 129         position      : absolute;\r
 130         overflow      : scroll;\r
 131         overflow-x    : hidden;\r
 132         top           : 0;\r
 133         right         : 0;\r
 134         bottom        : 0;\r
 135         left          : 0;\r
 136         text-overflow: ellipsis;\r
 137 }\r
 138 .netdata-legend-series > .netdata-legend-series-content:focus {\r
 139         outline: thin dotted;\r
 140 }\r
 141 .netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {\r
 142         display: block; /* was 'none', but chrome was hidding content with it */\r
 143 }\r
 144 .has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {\r
 145         display: block;\r
 146 }\r
 147 .netdata-legend-series > .netdata-legend-series-pane {\r
 148 /*      background : rgba(0,0,0,.25);*/\r
 149         background : #DDD;\r
 150         position   : absolute;\r
 151         width      : 4px;\r
 152         right      : 0;\r
 153         top        : 0;\r
 154         bottom     : 0;\r
 155 /*      visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */\r
 156 /*      opacity    : .01; */\r
 157 /*      -webkit-transition    : .2s; */\r
 158 /*      -moz-transition       : .2s; */\r
 159 /*      -o-transition         : .2s; */\r
 160 /*      transition            : .2s; */\r
 161         -moz-border-radius    : 4px;\r
 162         -webkit-border-radius : 4px;\r
 163         border-radius         : 4px;\r
 164 }\r
 165 .netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {\r
 166         background            : #444;\r
 167 /*      background            : rgba(0,0,0,.5);*/\r
 168         position              : relative;\r
 169         margin                : 0 1px;\r
 170         -moz-border-radius    : 2px;\r
 171         -webkit-border-radius : 2px;\r
 172         border-radius         : 2px;\r
 173 }\r
 174 .netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {\r
 175 /*  visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */\r
 176 /*  opacity    : 0.99;*/\r
 177 }\r
 178 \r
 179 .netdata-legend-name-table-line {\r
 180         display: inline-block;\r
 181         width: 13px;\r
 182         height: 3px;\r
 183         border-width: 0px;\r
 184         border-bottom-width: 2px;\r
 185         border-bottom-style: solid;\r
 186         border-bottom-color: white;\r
 187 }\r
 188 .netdata-legend-name-table-area {\r
 189         display: inline-block;\r
 190         width: 13px;\r
 191         height: 5px;\r
 192         border-width: 1px;\r
 193         border-top-width: 1px;\r
 194         border-top-style: solid;\r
 195         border-top-color: inherit;\r
 196 }\r
 197 .netdata-legend-name-table-stacked {\r
 198         display: inline-block;\r
 199         width: 13px;\r
 200         height: 5px;\r
 201         border-width: 1px;\r
 202         border-top-width: 1px;\r
 203         border-top-style: solid;\r
 204         border-top-color: inherit;\r
 205 }\r
 206 .netdata-legend-name-tr {\r
 207 }\r
 208 .netdata-legend-name-td {\r
 209 }\r
 210 .netdata-legend-name {\r
 211         text-align: left;\r
 212         font-size: 10px;\r
 213         font-weight: bold;\r
 214         vertical-align: bottom;\r
 215         margin-top: 0px;\r
 216         z-index: 9;\r
 217         padding: 0px;\r
 218         width: 80px !important;\r
 219         max-width: 80px !important;\r
 220         text-overflow: ellipsis;\r
 221         overflow: hidden;\r
 222         white-space: nowrap;\r
 223         display: inline-block;\r
 224 }\r
 225 \r
 226 .netdata-legend-value {\r
 227         /*margin-left: 14px;*/\r
 228         position: absolute;\r
 229         right: 5px;\r
 230         float: right;\r
 231         text-align: right;\r
 232         font-size: 10px;\r
 233         font-weight: bold;\r
 234         vertical-align: bottom;\r
 235         background-color: White;\r
 236         margin-top: 0px;\r
 237         z-index: 10;\r
 238         padding: 0px;\r
 239         padding-left: 15px;\r
 240 }\r
 241 \r
 242 .netdata-chart {\r
 243         position: absolute;             /* within .netdata-container */\r
 244         top: 0;                                 /* within .netdata-container */\r
 245         left: 0;                                /* within .netdata-container */\r
 246         display: inline-block;\r
 247         overflow: hidden;\r
 248         width: 100%;\r
 249         height: 100%;\r
 250 \r
 251         /* width and height is calculated (depends on the appearance of the legend) */\r
 252 }\r
 253 \r
 254 .netdata-chart-with-legend-right {\r
 255         position: absolute;             /* within .netdata-container */\r
 256         top: 0;                                 /* within .netdata-container */\r
 257         left: 0;                                /* within .netdata-container */\r
 258         display: block;\r
 259         overflow: hidden;\r
 260         margin-right: 110px;\r
 261         width: calc(100% - 110px); /* for the legend */\r
 262         height: 100%;\r
 263         flex-grow: 1;\r
 264 \r
 265         /* width and height is calculated (depends on the appearance of the legend) */\r
 266 }\r
 267 \r
 268 .netdata-peity-chart {\r
 269 \r
 270 }\r
 271 \r
 272 .netdata-sparkline-chart {\r
 273 \r
 274 }\r
 275 \r
 276 .netdata-dygraph-chart {\r
 277 \r
 278 }\r
 279 \r
 280 .netdata-morris-chart {\r
 281 \r
 282 }\r
 283 \r
 284 .netdata-google-chart {\r
 285 \r
 286 }\r
 287 \r
 288 /* make dygraph legend disappear on hover */\r
 289 .dygraph-legend {\r
 290         opacity: 0.9;\r
 291         -webkit-transition:opacity 0.2s ease;\r
 292         -moz-transition:opacity 0.2s ease;\r
 293         -o-transition:opacity 0.2s ease;\r
 294         padding: 4px;\r
 295 }\r
 296 \r
 297 .dygraph-legend:hover {\r
 298         /* Red(0-255), Blue(0-255), Green(0-255), Alpha (0-1) */\r
 299         background-color:rgba(100,100,100,0); \r
 300         opacity:0;\r
 301 }\r
 302 \r
 303 /* TEST\r
 304 .dygraph-legend {\r
 305         position: absolute;\r
 306         background: rgb(0, 0, 0) transparent !important;\r
 307         background-color: rgba(0,0,0,0.6) !important;\r
 308         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000) !important;\r
 309         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)" !important;\r
 310         color: white !important;\r
 311         font: 10px arial, san serif !important;\r
 312         text-align: left !important;\r
 313         white-space: nowrap !important;\r
 314         padding: 5px !important;\r
 315         border: 1px solid white !important;\r
 316         box-sizing: content-box !important;\r
 317         z-index: 10000 !important;\r
 318 }\r
 319 */\r
 320 \r
 321 .dygraph-title {\r
 322         text-indent: 56px;\r
 323         text-align: left;\r
 324         position: absolute;\r
 325         left: 0px;\r
 326         top: 4px;\r
 327         font-size: 11px;\r
 328         font-weight: bold;\r
 329         text-overflow: ellipsis;\r
 330         overflow: hidden;\r
 331         white-space: nowrap;\r
 332 }\r
 333 \r
 334 /* fix for sparkline tooltip under bootstrap */\r
 335 .jqstooltip {\r
 336   width: auto !important;\r
 337   height: auto !important;\r
 338 }\r