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