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