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