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: 5px;
 180         float: right;
 181         font-size: 10px;
 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: 14px;
 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 hidding 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: 10px;
 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: 5px;
 301         float: right;
 302         text-align: right;
 303         font-size: 10px;
 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-title {
 371         text-indent: 56px;
 372         text-align: left;
 373         position: absolute;
 374         left: 0px;
 375         top: 4px;
 376         font-size: 11px;
 377         font-weight: bold;
 378         text-overflow: ellipsis;
 379         overflow: hidden;
 380         white-space: nowrap;
 381 }
 382
 383 /* fix for sparkline tooltip under bootstrap */
 384 .jqstooltip {
 385   width: auto !important;
 386   height: auto !important;
 387 }
 388
 389 .easyPieChart {
 390         position: relative;
 391         text-align: center;
 392 }
 393
 394 .easyPieChart canvas {
 395         position: absolute;
 396         top: 0;
 397         left: 0;
 398 }
 399
 400 .easyPieChartLabel {
 401         display: inline-block;
 402         position: absolute;
 403         float: left;
 404         left: 0;
 405         width: 100%;
 406         text-align: center;
 407         color: #666;
 408         font-weight: normal;
 409         text-shadow: #BBB 0px 0px 1px;
 410         /* -webkit-font-smoothing: none; */
 411 }
 412
 413 .easyPieChartTitle {
 414         display: inline-block;
 415         position: absolute;
 416         float: left;
 417         left: 0;
 418         width: 64%;
 419         margin-left: 18%;
 420         text-align: center;
 421         color: #999999;
 422         font-weight: normal;
 423 }
 424
 425 .easyPieChartUnits {
 426         display: inline-block;
 427         position: absolute;
 428         float: left;
 429         left: 0;
 430         width: 60%;
 431         margin-left: 20%;
 432         text-align: center;
 433         color: #999999;
 434         font-weight: normal;
 435 }
 436
 437 .gaugeChart {
 438         position: relative;
 439         text-align: center;
 440 }
 441
 442 .gaugeChart canvas {
 443         position: absolute;
 444         top: 0;
 445         left: 0;
 446         z-index: 0;
 447 }
 448
 449 .gaugeChartLabel {
 450         display: inline-block;
 451         position: absolute;
 452         float: left;
 453         left: 0;
 454         width: 100%;
 455         text-align: center;
 456         color: #FFFFFF;
 457         font-weight: bold;
 458         z-index: 1;
 459         text-shadow: #777 0px 0px 1px;
 460         /* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
 461         /* -webkit-text-stroke: 1px #777; */
 462         /* -webkit-font-smoothing: none; */
 463 }
 464
 465 .gaugeChartTitle {
 466         display: inline-block;
 467         position: absolute;
 468         float: left;
 469         left: 0;
 470         width: 100%;
 471         text-align: center;
 472         color: #999999;
 473         font-weight: bold;
 474 }
 475
 476 .gaugeChartUnits {
 477         display: inline-block;
 478         position: absolute;
 479         float: left;
 480         left: 0;
 481         bottom: 0;
 482         width: 100%;
 483         text-align: left;
 484         margin-left: 5%;
 485         color: #999999;
 486         font-weight: normal;
 487 }
 488
 489 .gaugeChartMin {
 490         display: inline-block;
 491         position: absolute;
 492         float: left;
 493         left: 0;
 494         bottom: 10%;
 495         width: 92%;
 496         margin-left: 8%;
 497         text-align: left;
 498         color: #999999;
 499         font-weight: normal;
 500 }
 501
 502 .gaugeChartMax {
 503         display: inline-block;
 504         position: absolute;
 505         float: left;
 506         left: 0;
 507         bottom: 10%;
 508         width: 95%;
 509         margin-right: 5%;
 510         text-align: right;
 511         color: #999999;
 512         font-weight: normal;
 513 }
 514
 515 .popover-title {
 516         font-weight: bold;
 517         font-size: 12px;
 518 }
 519 .popover-content {
 520         font-size: 11px;
 521 }