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