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