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