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