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