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