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