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