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