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