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: absolute;\r
  70         width: 100%;\r
  71         height: calc(100% - 50px);\r
  72         /*background-color: Gray;*/\r
  73         overflow: auto;\r
  74         /*overflow-y: scroll;*/\r
  75         overflow-x: hidden;\r
  76         text-overflow: ellipsis;\r
  77         line-height: 14px;\r
  78         display: block;\r
  79         font-size: 10px;\r
  80         margin-top: 0px;\r
  81 }\r
  82 /*\r
  83 .netdata-legend-series > .netdata-legend-series-content { padding: 10px; }\r
  84 .netdata-legend-series > .netdata-legend-series-pane   { background: #888; }\r
  85 .netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider { background: #111; }\r
  86 */\r
  87 .netdata-legend-name-table-line {\r
  88         display: inline-block;\r
  89         width: 13px;\r
  90         height: 3px;\r
  91         border-width: 0px;\r
  92         border-bottom-width: 2px;\r
  93         border-bottom-style: solid;\r
  94         border-bottom-color: white;\r
  95 }\r
  96 .netdata-legend-name-table-area {\r
  97         display: inline-block;\r
  98         width: 13px;\r
  99         height: 5px;\r
 100         border-width: 1px;\r
 101         border-top-width: 1px;\r
 102         border-top-style: solid;\r
 103         border-top-color: inherit;\r
 104 }\r
 105 .netdata-legend-name-table-stacked {\r
 106         display: inline-block;\r
 107         width: 13px;\r
 108         height: 5px;\r
 109         border-width: 1px;\r
 110         border-top-width: 1px;\r
 111         border-top-style: solid;\r
 112         border-top-color: inherit;\r
 113 }\r
 114 .netdata-legend-name-tr {\r
 115 }\r
 116 .netdata-legend-name-td {\r
 117 }\r
 118 .netdata-legend-name {\r
 119         text-align: left;\r
 120         font-size: 10px;\r
 121         font-weight: bold;\r
 122         vertical-align: bottom;\r
 123         margin-top: 0px;\r
 124         z-index: 9;\r
 125         padding: 0px;\r
 126 }\r
 127 .netdata-legend-value {\r
 128         /*margin-left: 14px;*/\r
 129         position: absolute;\r
 130         right: 5px;\r
 131         float: right;\r
 132         text-align: right;\r
 133         font-size: 10px;\r
 134         font-weight: bold;\r
 135         vertical-align: bottom;\r
 136         background-color: White;\r
 137         margin-top: 0px;\r
 138         z-index: 10;\r
 139         padding: 0px;\r
 140         padding-left: 15px;\r
 141 }\r
 142 \r
 143 .netdata-chart {\r
 144         position: absolute;             /* within .netdata-container */\r
 145         top: 0;                                 /* within .netdata-container */\r
 146         left: 0;                                /* within .netdata-container */\r
 147         display: inline-block;\r
 148         overflow: hidden;\r
 149         width: 100%;\r
 150         height: 100%;\r
 151 \r
 152         /* width and height is calculated (depends on the appearance of the legend) */\r
 153 }\r
 154 \r
 155 .netdata-chart-with-legend-right {\r
 156         position: absolute;             /* within .netdata-container */\r
 157         top: 0;                                 /* within .netdata-container */\r
 158         left: 0;                                /* within .netdata-container */\r
 159         display: block;\r
 160         overflow: hidden;\r
 161         margin-right: 110px;\r
 162         width: calc(100% - 110px);\r
 163         height: 100%;\r
 164         flex-grow: 1;\r
 165 \r
 166         /* width and height is calculated (depends on the appearance of the legend) */\r
 167 }\r
 168 \r
 169 .netdata-peity-chart {\r
 170 \r
 171 }\r
 172 \r
 173 .netdata-sparkline-chart {\r
 174 \r
 175 }\r
 176 \r
 177 .netdata-dygraph-chart {\r
 178 \r
 179 }\r
 180 \r
 181 .netdata-morris-chart {\r
 182 \r
 183 }\r
 184 \r
 185 .netdata-google-chart {\r
 186 \r
 187 }\r
 188 \r
 189 /* make dygraph legend disappear on hover */\r
 190 .dygraph-legend {\r
 191         opacity: 0.9;\r
 192         -webkit-transition:opacity 0.2s ease;\r
 193         -moz-transition:opacity 0.2s ease;\r
 194         -o-transition:opacity 0.2s ease;\r
 195         padding: 4px;\r
 196 }\r
 197 \r
 198 .dygraph-legend:hover {\r
 199         /* Red(0-255), Blue(0-255), Green(0-255), Alpha (0-1) */\r
 200         background-color:rgba(100,100,100,0); \r
 201         opacity:0;\r
 202 }\r
 203 \r
 204 /* TEST\r
 205 .dygraph-legend {\r
 206         position: absolute;\r
 207         background: rgb(0, 0, 0) transparent !important;\r
 208         background-color: rgba(0,0,0,0.6) !important;\r
 209         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000) !important;\r
 210         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)" !important;\r
 211         color: white !important;\r
 212         font: 10px arial, san serif !important;\r
 213         text-align: left !important;\r
 214         white-space: nowrap !important;\r
 215         padding: 5px !important;\r
 216         border: 1px solid white !important;\r
 217         box-sizing: content-box !important;\r
 218         z-index: 10000 !important;\r
 219 }\r
 220 */\r
 221 \r
 222 .dygraph-title {\r
 223         text-indent: 56px;\r
 224         text-align: left;\r
 225         position: absolute;\r
 226         left: 0px;\r
 227         top: 4px;\r
 228         font-size: 11px;\r
 229         font-weight: bold;\r
 230 }\r