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