web/dashboard.css

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