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