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