web/dashboard.css

   1 html {
   2     font-family: sans-serif;
   3 }
   4
   5 .netdata-chart-alignment {
   6         margin-left: 55px;
   7 }
   8
   9 .netdata-container {
  10         display: -webkit-flex; /* Safari */
  11         -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  12         display: inline-block;
  13         flex-wrap: wrap;
  14         overflow: hidden;
  15
  16         /* required for child elements to have absolute position */
  17         position: relative;
  18
  19         /* width and height is given per chart with data-width and data-height */
  20 }
  21
  22 .netdata-container-with-legend {
  23         display: -webkit-flex; /* Safari */
  24         -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  25         display: inline-block;
  26         flex-wrap: wrap;
  27         overflow: hidden;
  28
  29         /* fix minimum scrollbar issue in firefox */
  30         min-height: 99px;
  31
  32         /* required for child elements to have absolute position */
  33         position: relative;
  34
  35         /* width and height is given per chart with data-width and data-height */
  36 }
  37
  38 .netdata-legend-resize-handler {
  39         display: block;
  40         position: absolute;
  41         bottom: 0px;
  42         right: 0px;
  43         height: 15px;
  44         width: 30px;
  45         background-color: White;
  46         font-size: 12px;
  47         vertical-align: middle;
  48         line-height: 15px;
  49         cursor: ns-resize;
  50         color: #DDDDDD;
  51         text-align: center;
  52         overflow: hidden;
  53         z-index: 20;
  54         padding: 0px;
  55         margin: 0px;
  56 }
  57
  58 .netdata-message {
  59         display: inline-block;
  60         text-align: left;
  61         vertical-align: top;
  62         font-weight: bold;
  63         font-size: x-small;
  64         width: 100%;
  65         height: 100%;
  66         overflow: hidden;
  67         background: inherit;
  68         z-index: 0;
  69 }
  70
  71 .netdata-message.hidden {
  72         display: none;
  73 }
  74
  75 .netdata-message.icon {
  76         color: #F8F8F8;
  77         text-align: center;
  78         vertical-align: middle;
  79 }
  80
  81 .netdata-chart-legend {
  82         position: absolute;                     /* within .netdata-container */
  83         top: 0;
  84         right: 0;
  85         background-color: white;
  86         overflow: hidden;
  87         text-overflow: ellipsis;
  88         line-height: 14px;
  89         display: block;
  90         width: 140px;                           /* --legend-width */
  91         height: calc(100% - 15px);      /* 10px for the resize handler and 5px for the top margin */
  92         font-size: 10px;
  93         margin-top: 5px;
  94         /* width and height is calculated (depends on the appearance of the legend) */
  95 }
  96
  97 .netdata-legend-title-date {
  98         font-size: 10px;
  99         font-weight: normal;
 100         margin-top: 0px;
 101 }
 102 .netdata-legend-title-time {
 103         font-size: 11px;
 104         font-weight: bold;
 105         margin-top: 0px;
 106 }
 107 .netdata-legend-title-units {
 108         position: absolute;
 109         right: 5px;
 110         float: right;
 111         font-size: 10px;
 112         vertical-align: top;
 113         font-weight: normal;
 114         margin-top: 0px;
 115 }
 116 .netdata-legend-series {
 117         position: absolute;
 118         width: 140px;                           /* --legend-width */
 119         height: calc(100% - 50px);
 120         overflow: hidden;
 121         text-overflow: ellipsis;
 122         line-height: 14px;
 123         display: block;
 124         font-size: 10px;
 125         margin-top: 0px;
 126 }
 127
 128 .netdata-legend-series > .netdata-legend-series-content {
 129         position      : absolute;
 130         overflow      : scroll;
 131         overflow-x    : hidden;
 132         top           : 0;
 133         right         : 0;
 134         bottom        : 0;
 135         left          : 0;
 136         text-overflow: ellipsis;
 137 }
 138 .netdata-legend-series > .netdata-legend-series-content:focus {
 139         outline: thin dotted;
 140 }
 141 .netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {
 142         display: block; /* was 'none', but chrome was hidding content with it */
 143 }
 144 .has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {
 145         display: block;
 146 }
 147 .netdata-legend-series > .netdata-legend-series-pane {
 148 /*      background : rgba(0,0,0,.25);*/
 149         background : #DDD;
 150         position   : absolute;
 151         width      : 4px;
 152         right      : 0;
 153         top        : 0;
 154         bottom     : 0;
 155 /*      visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */
 156 /*      opacity    : .01; */
 157 /*      -webkit-transition    : .2s; */
 158 /*      -moz-transition       : .2s; */
 159 /*      -o-transition         : .2s; */
 160 /*      transition            : .2s; */
 161         -moz-border-radius    : 4px;
 162         -webkit-border-radius : 4px;
 163         border-radius         : 4px;
 164 }
 165 .netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {
 166         background            : #444;
 167 /*      background            : rgba(0,0,0,.5);*/
 168         position              : relative;
 169         margin                : 0 1px;
 170         -moz-border-radius    : 2px;
 171         -webkit-border-radius : 2px;
 172         border-radius         : 2px;
 173 }
 174 .netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {
 175 /*  visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */
 176 /*  opacity    : 0.99;*/
 177 }
 178
 179 .netdata-legend-name-table-line {
 180         display: inline-block;
 181         width: 13px;
 182         height: 4px;
 183         border-width: 0px;
 184         border-bottom-width: 2px;
 185         border-bottom-style: solid;
 186         border-bottom-color: white;
 187 }
 188 .netdata-legend-name-table-area {
 189         display: inline-block;
 190         width: 13px;
 191         height: 5px;
 192         border-width: 1px;
 193         border-top-width: 1px;
 194         border-top-style: solid;
 195         border-top-color: inherit;
 196 }
 197 .netdata-legend-name-table-stacked {
 198         display: inline-block;
 199         width: 13px;
 200         height: 5px;
 201         border-width: 1px;
 202         border-top-width: 1px;
 203         border-top-style: solid;
 204         border-top-color: inherit;
 205 }
 206 .netdata-legend-name-tr {
 207 }
 208 .netdata-legend-name-td {
 209 }
 210 .netdata-legend-name {
 211         text-align: left;
 212         font-size: 10px;
 213         font-weight: bold;
 214         vertical-align: bottom;
 215         margin-top: 0px;
 216         z-index: 9;
 217         padding: 0px;
 218         width: 80px !important;
 219         max-width: 80px !important;
 220         text-overflow: ellipsis;
 221         overflow: hidden;
 222         white-space: nowrap;
 223         display: inline-block;
 224         cursor: pointer;
 225 }
 226
 227 .netdata-legend-value {
 228         /*margin-left: 14px;*/
 229         position: absolute;
 230         right: 5px;
 231         float: right;
 232         text-align: right;
 233         font-size: 10px;
 234         font-weight: bold;
 235         vertical-align: bottom;
 236         background-color: White;
 237         margin-top: 0px;
 238         z-index: 10;
 239         padding: 0px;
 240         padding-left: 15px;
 241         cursor: pointer;
 242 }
 243 .netdata-legend-name.not-selected {
 244         font-weight: normal;
 245         opacity: 0.3;
 246 }
 247
 248 .netdata-chart {
 249         position: absolute;             /* within .netdata-container */
 250         top: 0;                                 /* within .netdata-container */
 251         left: 0;                                /* within .netdata-container */
 252         display: inline-block;
 253         overflow: hidden;
 254         width: 100%;
 255         height: 100%;
 256         z-index: 5;
 257
 258         /* width and height is calculated (depends on the appearance of the legend) */
 259 }
 260
 261 .netdata-chart-with-legend-right {
 262         position: absolute;             /* within .netdata-container */
 263         top: 0;                                 /* within .netdata-container */
 264         left: 0;                                /* within .netdata-container */
 265         display: block;
 266         overflow: hidden;
 267         margin-right: 140px;            /* --legend-width */
 268         width: calc(100% - 140px);      /* --legend-width */
 269         height: 100%;
 270         z-index: 5;
 271         flex-grow: 1;
 272
 273         /* width and height is calculated (depends on the appearance of the legend) */
 274 }
 275
 276 .netdata-peity-chart {
 277
 278 }
 279
 280 .netdata-sparkline-chart {
 281
 282 }
 283
 284 .netdata-dygraph-chart {
 285
 286 }
 287
 288 .netdata-morris-chart {
 289
 290 }
 291
 292 .netdata-google-chart {
 293
 294 }
 295
 296 .dygraph-ylabel {
 297 }
 298
 299 .dygraph-title {
 300         text-indent: 56px;
 301         text-align: left;
 302         position: absolute;
 303         left: 0px;
 304         top: 4px;
 305         font-size: 11px;
 306         font-weight: bold;
 307         text-overflow: ellipsis;
 308         overflow: hidden;
 309         white-space: nowrap;
 310 }
 311
 312 /* fix for sparkline tooltip under bootstrap */
 313 .jqstooltip {
 314   width: auto !important;
 315   height: auto !important;
 316 }
 317
 318 .easyPieChart {
 319         position: relative;
 320         text-align: center;
 321 }
 322
 323 .easyPieChart canvas {
 324         position: absolute;
 325         top: 0;
 326         left: 0;
 327 }
 328
 329 .easyPieChartLabel {
 330         display: inline-block;
 331         position: absolute;
 332         float: left;
 333         width: 100%;
 334         text-align: center;
 335         color: #333333;
 336         font-weight: normal;
 337 }
 338
 339 .easyPieChartTitle {
 340         display: inline-block;
 341         position: absolute;
 342         float: left;
 343         width: 64%;
 344         margin-left: 18%;
 345         text-align: center;
 346         color: #999999;
 347         font-weight: normal;
 348 }
 349
 350 .easyPieChartUnits {
 351         display: inline-block;
 352         position: absolute;
 353         float: left;
 354         width: 60%;
 355         margin-left: 20%;
 356         text-align: center;
 357         color: #999999;
 358         font-weight: normal;
 359 }