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 .morelink {
  10     color: #765d9c;
  11     text-decoration: none;
  12 }
  13
  14 .morelink:hover {
  15     color: #563d7c;
  16     text-decoration: none;
  17 }
  18
  19 .morelink:focus {
  20     color: #765d9c;
  21     text-decoration: none;
  22 }
  23
  24 .netdata-chart-alignment {
  25     margin-left: 55px;
  26 }
  27
  28 .netdata-chart-row {
  29     width: 100%;
  30     text-align: center;
  31     display: flex;
  32     display: -webkit-flex;
  33     display: -moz-flex;
  34     align-items: baseline;
  35     -moz-align-items: baseline;
  36     -webkit-align-items: baseline;
  37     justify-content: center;
  38     -webkit-justify-content: center;
  39     -moz-justify-content: center;
  40 }
  41
  42 .netdata-container {
  43     display: inline-block;
  44     overflow: hidden;
  45
  46     /* required for child elements to have absolute position */
  47     position: relative;
  48
  49     /* width and height is given per chart with data-width and data-height */
  50 }
  51
  52 .netdata-aspect {
  53     position: relative;
  54     width: 100%;
  55     padding: 0px;
  56     margin: 0px;
  57 }
  58
  59 .netdata-container-with-legend {
  60     display: inline-block;
  61     overflow: hidden;
  62
  63     /* fix minimum scrollbar issue in firefox */
  64     min-height: 99px;
  65
  66     /* required for child elements to have absolute position */
  67     position: relative;
  68
  69     /* width and height is given per chart with data-width and data-height */
  70 }
  71
  72 .netdata-legend-resize-handler {
  73     display: block;
  74     position: absolute;
  75     bottom: 0px;
  76     right: 0px;
  77     height: 15px;
  78     width: 30px;
  79     background-color: White;
  80     font-size: 12px;
  81     vertical-align: middle;
  82     line-height: 15px;
  83     cursor: ns-resize;
  84     color: #DDDDDD;
  85     text-align: center;
  86     overflow: hidden;
  87     z-index: 20;
  88     padding: 0px;
  89     margin: 0px;
  90 }
  91
  92 .netdata-legend-toolbox {
  93     display: block;
  94     position: absolute;
  95     bottom: 0px;
  96     right: 30px;
  97     height: 15px;
  98     width: 110px;
  99     background-color: White;
 100     font-size: 12px;
 101     vertical-align: middle;
 102     line-height: 15px;
 103     color: #DDDDDD;
 104     text-align: center;
 105     overflow: hidden;
 106     z-index: 20;
 107     padding: 0px;
 108     margin: 0px;
 109 }
 110
 111 .netdata-legend-toolbox-button {
 112     display: inline-block;
 113     position: relative;
 114     height: 15px;
 115     width: 18px;
 116     background-color: White;
 117     font-size: 12px;
 118     vertical-align: middle;
 119     line-height: 15px;
 120     color: #CDCDCD;
 121     text-align: center;
 122     overflow: hidden;
 123     z-index: 21;
 124     padding: 0px;
 125     margin: 0px;
 126     cursor: pointer;
 127 }
 128
 129 .netdata-message {
 130     display: inline-block;
 131     text-align: left;
 132     vertical-align: top;
 133     font-weight: bold;
 134     font-size: x-small;
 135     width: 100%;
 136     height: 100%;
 137     overflow: hidden;
 138     background: inherit;
 139     z-index: 0;
 140 }
 141
 142 .netdata-message.hidden {
 143     display: none;
 144 }
 145
 146 .netdata-message.icon {
 147     color: #F8F8F8;
 148     text-align: center;
 149     vertical-align: middle;
 150 }
 151
 152 .netdata-chart-legend {
 153     position: absolute; /* within .netdata-container */
 154     top: 0;
 155     right: 0;
 156     overflow: hidden;
 157     text-overflow: ellipsis;
 158     line-height: 14px;
 159     display: block;
 160     width: 140px; /* --legend-width */
 161     height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
 162     font-size: 10px;
 163     margin-top: 5px;
 164     text-align: left;
 165     /* width and height is calculated (depends on the appearance of the legend) */
 166 }
 167
 168 .netdata-legend-title-date {
 169     font-size: 10px;
 170     font-weight: normal;
 171     margin-top: 0px;
 172 }
 173
 174 .netdata-legend-title-time {
 175     font-size: 11px;
 176     font-weight: bold;
 177     margin-top: 0px;
 178 }
 179
 180 .netdata-legend-title-units {
 181     position: absolute;
 182     right: 10px;
 183     float: right;
 184     font-size: 11px;
 185     vertical-align: top;
 186     font-weight: normal;
 187     margin-top: 0px;
 188 }
 189
 190 .netdata-legend-series {
 191     position: absolute;
 192     width: 140px; /* legend-width */
 193     height: calc(100% - 50px);
 194     overflow: hidden;
 195     text-overflow: ellipsis;
 196     line-height: 14.5px; /* line spacing at the legend */
 197     display: block;
 198     font-size: 10px;
 199     margin-top: 0px;
 200 }
 201
 202 .netdata-legend-name-table-line {
 203     display: inline-block;
 204     width: 13px;
 205     height: 4px;
 206     border-width: 0px;
 207     border-bottom-width: 2px;
 208     border-bottom-style: solid;
 209     border-bottom-color: white;
 210 }
 211
 212 .netdata-legend-name-table-area {
 213     display: inline-block;
 214     width: 13px;
 215     height: 5px;
 216     border-width: 1px;
 217     border-top-width: 1px;
 218     border-top-style: solid;
 219     border-top-color: inherit;
 220 }
 221
 222 .netdata-legend-name-table-stacked {
 223     display: inline-block;
 224     width: 13px;
 225     height: 5px;
 226     border-width: 1px;
 227     border-top-width: 1px;
 228     border-top-style: solid;
 229     border-top-color: inherit;
 230 }
 231
 232 .netdata-legend-name-tr {
 233 }
 234
 235 .netdata-legend-name-td {
 236 }
 237
 238 .netdata-legend-name {
 239     text-align: left;
 240     font-size: 11px; /* legend: dimension name size */
 241     font-weight: bold;
 242     vertical-align: bottom;
 243     margin-top: 0px;
 244     z-index: 9;
 245     padding: 0px;
 246     width: 80px !important;
 247     max-width: 80px !important;
 248     text-overflow: ellipsis;
 249     overflow: hidden;
 250     white-space: nowrap;
 251     display: inline-block;
 252     cursor: pointer;
 253 }
 254
 255 .netdata-legend-value {
 256     /*margin-left: 14px;*/
 257     position: absolute;
 258     right: 10px;
 259     float: right;
 260     text-align: right;
 261     font-size: 11px; /* legend: dimension value size */
 262     font-weight: bold;
 263     vertical-align: bottom;
 264     background-color: White;
 265     margin-top: 0px;
 266     z-index: 10;
 267     padding: 0px;
 268     padding-left: 15px;
 269     cursor: pointer;
 270     /* -webkit-font-smoothing: none; */
 271 }
 272
 273 .netdata-legend-name.not-selected {
 274     font-weight: normal;
 275     opacity: 0.3;
 276 }
 277
 278 .netdata-chart {
 279     position: absolute; /* within .netdata-container */
 280     top: 0; /* within .netdata-container */
 281     left: 0; /* within .netdata-container */
 282     display: inline-block;
 283     overflow: hidden;
 284     width: 100%;
 285     height: 100%;
 286     z-index: 5;
 287
 288     /* width and height is calculated (depends on the appearance of the legend) */
 289 }
 290
 291 .netdata-chart-with-legend-right {
 292     position: absolute; /* within .netdata-container */
 293     top: 0; /* within .netdata-container */
 294     left: 0; /* within .netdata-container */
 295     display: block;
 296     overflow: hidden;
 297     margin-right: 140px; /* --legend-width */
 298     width: calc(100% - 140px); /* --legend-width */
 299     height: 100%;
 300     z-index: 5;
 301     flex-grow: 1;
 302
 303     /* width and height is calculated (depends on the appearance of the legend) */
 304 }
 305
 306 .netdata-peity-chart {
 307
 308 }
 309
 310 .netdata-sparkline-chart {
 311
 312 }
 313
 314 .netdata-dygraph-chart {
 315
 316 }
 317
 318 .netdata-morris-chart {
 319
 320 }
 321
 322 .netdata-google-chart {
 323
 324 }
 325
 326 .dygraph-ylabel {
 327 }
 328
 329 .dygraph-label-rotate-left {
 330     text-align: center;
 331     /* See http://caniuse.com/#feat=transforms2d */
 332     transform: rotate(90deg);
 333     -webkit-transform: rotate(90deg);
 334     -moz-transform: rotate(90deg);
 335     -o-transform: rotate(90deg);
 336     -ms-transform: rotate(90deg);
 337 }
 338
 339 /* For y2-axis label */
 340 .dygraph-label-rotate-right {
 341     text-align: center;
 342     /* See http://caniuse.com/#feat=transforms2d */
 343     transform: rotate(-90deg);
 344     -webkit-transform: rotate(-90deg);
 345     -moz-transform: rotate(-90deg);
 346     -o-transform: rotate(-90deg);
 347     -ms-transform: rotate(-90deg);
 348 }
 349
 350 .dygraph-title {
 351     text-indent: 56px;
 352     text-align: left;
 353     position: absolute;
 354     left: 0px;
 355     top: 4px;
 356     font-size: 11px;
 357     font-weight: bold;
 358     text-overflow: ellipsis;
 359     overflow: hidden;
 360     white-space: nowrap;
 361 }
 362
 363 /* fix for sparkline tooltip under bootstrap */
 364 .jqstooltip {
 365     width: auto !important;
 366     height: auto !important;
 367 }
 368
 369 .easyPieChart {
 370     position: relative;
 371     text-align: center;
 372 }
 373
 374 .easyPieChart canvas {
 375     position: absolute;
 376     top: 0;
 377     left: 0;
 378 }
 379
 380 .easyPieChartLabel {
 381     display: inline-block;
 382     position: absolute;
 383     float: left;
 384     left: 0;
 385     width: 100%;
 386     text-align: center;
 387     color: #666;
 388     font-weight: normal;
 389     text-shadow: #BBB 0px 0px 1px;
 390     /* -webkit-font-smoothing: none; */
 391 }
 392
 393 .easyPieChartTitle {
 394     display: inline-block;
 395     position: absolute;
 396     float: left;
 397     left: 0;
 398     width: 64%;
 399     margin-left: 18%;
 400     text-align: center;
 401     color: #999999;
 402     font-weight: normal;
 403 }
 404
 405 .easyPieChartUnits {
 406     display: inline-block;
 407     position: absolute;
 408     float: left;
 409     left: 0;
 410     width: 60%;
 411     margin-left: 20%;
 412     text-align: center;
 413     color: #999999;
 414     font-weight: normal;
 415 }
 416
 417 .gaugeChart {
 418     position: relative;
 419     text-align: center;
 420 }
 421
 422 .gaugeChart canvas {
 423     position: absolute;
 424     top: 0;
 425     left: 0;
 426     z-index: 0;
 427 }
 428
 429 .gaugeChartLabel {
 430     display: inline-block;
 431     position: absolute;
 432     float: left;
 433     left: 0;
 434     width: 100%;
 435     text-align: center;
 436     color: #FFFFFF;
 437     font-weight: bold;
 438     z-index: 1;
 439     text-shadow: #777 0px 0px 1px;
 440     /* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
 441     /* -webkit-text-stroke: 1px #777; */
 442     /* -webkit-font-smoothing: none; */
 443 }
 444
 445 .gaugeChartTitle {
 446     display: inline-block;
 447     position: absolute;
 448     float: left;
 449     left: 0;
 450     width: 100%;
 451     text-align: center;
 452     color: #999999;
 453     font-weight: bold;
 454 }
 455
 456 .gaugeChartUnits {
 457     display: inline-block;
 458     position: absolute;
 459     float: left;
 460     left: 0;
 461     bottom: 0;
 462     width: 100%;
 463     text-align: left;
 464     margin-left: 5%;
 465     color: #999999;
 466     font-weight: normal;
 467 }
 468
 469 .gaugeChartMin {
 470     display: inline-block;
 471     position: absolute;
 472     float: left;
 473     left: 0;
 474     bottom: 10%;
 475     width: 92%;
 476     margin-left: 8%;
 477     text-align: left;
 478     color: #999999;
 479     font-weight: normal;
 480 }
 481
 482 .gaugeChartMax {
 483     display: inline-block;
 484     position: absolute;
 485     float: left;
 486     left: 0;
 487     bottom: 10%;
 488     width: 95%;
 489     margin-right: 5%;
 490     text-align: right;
 491     color: #999999;
 492     font-weight: normal;
 493 }
 494
 495 .popover-title {
 496     font-weight: bold;
 497     font-size: 12px;
 498 }
 499
 500 .popover-content {
 501     font-size: 11px;
 502 }
 503
 504 /* ----------------------------------------------------------------------------
 505    perfect-scrollbar settings
 506  */
 507
 508 .ps-container {
 509     -ms-touch-action: auto;
 510     touch-action: auto;
 511     overflow: hidden !important;
 512     -ms-overflow-style: none;
 513 }
 514
 515 @supports (-ms-overflow-style: none) {
 516     .ps-container {
 517         overflow: auto !important;
 518     }
 519 }
 520
 521 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 522     .ps-container {
 523         overflow: auto !important;
 524     }
 525 }
 526
 527 .ps-container.ps-active-x > .ps-scrollbar-x-rail,
 528 .ps-container.ps-active-y > .ps-scrollbar-y-rail {
 529     display: block;
 530     background-color: transparent;
 531 }
 532
 533 .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
 534     background-color: transparent; /* background color when dragged away */
 535     opacity: 0.9;
 536 }
 537
 538 .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
 539     background-color: #aaa; /* scrollbar color when dragged away */
 540     height: 5px;
 541 }
 542
 543 .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
 544     background-color: transparent; /* background color when dragged away */
 545     opacity: 0.9;
 546 }
 547
 548 .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
 549     background-color: #aaa; /* scrollbar color when dragged away */
 550     width: 5px;
 551 }
 552
 553 .ps-container > .ps-scrollbar-x-rail {
 554     display: none;
 555     position: absolute;
 556     /* please don't change 'position' */
 557     opacity: 0.2; /* the opacity when not on hover of the content */
 558     -webkit-transition: background-color .2s linear, opacity .2s linear;
 559     -o-transition: background-color .2s linear, opacity .2s linear;
 560     -moz-transition: background-color .2s linear, opacity .2s linear;
 561     transition: background-color .2s linear, opacity .2s linear;
 562     bottom: 0px;
 563     /* there must be 'bottom' for ps-scrollbar-x-rail */
 564     height: 15px;
 565 }
 566
 567 .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
 568     position: absolute;
 569     /* please don't change 'position' */
 570     background-color: #666; /* #aaa; the color on content hover */
 571     -webkit-border-radius: 6px;
 572     -moz-border-radius: 6px;
 573     border-radius: 6px;
 574     -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
 575     transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
 576     -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
 577     -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
 578     transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
 579     transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
 580     bottom: 2px;
 581     /* there must be 'bottom' for ps-scrollbar-x */
 582     height: 5px; /* the width of the scrollbar */
 583 }
 584
 585 .ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
 586     height: 4px;
 587 }
 588
 589 .ps-container > .ps-scrollbar-y-rail {
 590     display: none;
 591     position: absolute;
 592     /* please don't change 'position' */
 593     opacity: 0.2; /* the opacity when not on hover of the content */
 594     -webkit-transition: background-color .2s linear, opacity .2s linear;
 595     -o-transition: background-color .2s linear, opacity .2s linear;
 596     -moz-transition: background-color .2s linear, opacity .2s linear;
 597     transition: background-color .2s linear, opacity .2s linear;
 598     right: 0;
 599     /* there must be 'right' for ps-scrollbar-y-rail */
 600     width: 15px;
 601 }
 602
 603 .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
 604     position: absolute;
 605     /* please don't change 'position' */
 606     background-color: #666; /* #aaa; the color on content hover */
 607     -webkit-border-radius: 6px;
 608     -moz-border-radius: 6px;
 609     border-radius: 6px;
 610     -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
 611     transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
 612     -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
 613     -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
 614     transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
 615     transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
 616     right: 2px;
 617     /* there must be 'right' for ps-scrollbar-y */
 618     width: 5px; /* the width of the scrollbar */
 619 }
 620
 621 .ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
 622     width: 5px;
 623 }
 624
 625 .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
 626     background-color: transparent; /* background color when dragged */
 627     opacity: 0.9;
 628 }
 629
 630 .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
 631     background-color: #bbb; /* scrollbar color when dragged */
 632     height: 5px;
 633 }
 634
 635 .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
 636     background-color: transparent; /* background color when dragged */
 637     opacity: 0.9;
 638 }
 639
 640 .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
 641     background-color: #bbb; /* scrollbar color when dragged */
 642     width: 5px;
 643 }
 644
 645 .ps-container:hover > .ps-scrollbar-x-rail,
 646 .ps-container:hover > .ps-scrollbar-y-rail {
 647     opacity: 0.6;
 648 }
 649
 650 .ps-container:hover > .ps-scrollbar-x-rail:hover {
 651     background-color: transparent; /* the background color on hover of the scrollbar */
 652     opacity: 0.9;
 653 }
 654
 655 .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
 656     background-color: #999; /* scrollbar color on hover */
 657 }
 658
 659 .ps-container:hover > .ps-scrollbar-y-rail:hover {
 660     background-color: transparent; /* the background color on hover of the scrollbar */
 661     opacity: 0.9;
 662 }
 663
 664 .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
 665     background-color: #999; /* scrollbar color on hover */
 666 }