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