web/dashboard.css

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