web/dashboard.css

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