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-container-with-legend {
  23         display: -webkit-flex; /* Safari */
  24         -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  25         display: inline-block;
  26         flex-wrap: wrap;
  27         overflow: hidden;
  28
  29         /* fix minimum scrollbar issue in firefox */
  30         min-height: 99px;
  31
  32         /* required for child elements to have absolute position */
  33         position: relative;
  34
  35         /* width and height is given per chart with data-width and data-height */
  36 }
  37
  38 .netdata-legend-resize-handler {
  39         display: block;
  40         position: absolute;
  41         bottom: 0px;
  42         right: 0px;
  43         height: 15px;
  44         width: 30px;
  45         background-color: White;
  46         font-size: 12px;
  47         vertical-align: middle;
  48         line-height: 15px;
  49         cursor: ns-resize;
  50         color: #DDDDDD;
  51         text-align: center;
  52         overflow: hidden;
  53         z-index: 11;
  54         padding: 0px;
  55         margin: 0px;
  56 }
  57
  58 .netdata-message {
  59         display: none;
  60         font-size: x-small;
  61         width: 100%;
  62         height: calc(100% - 10px); /* for the resize handler */
  63         overflow: hidden;
  64         background: inherit;
  65         z-index: 10000;
  66 }
  67
  68 .netdata-chart-is-loading {
  69         display: none;
  70         font-size: x-small;
  71         width: 100%;
  72         overflow: hidden;
  73         background: white;
  74         z-index: 10000;
  75 }
  76
  77 .netdata-error-message {
  78         background: #EEEEEE;
  79 }
  80
  81 .netdata-info-message {
  82 }
  83
  84 .netdata-chart-legend {
  85         position: absolute;                     /* within .netdata-container */
  86         top: 0;
  87         right: 0;
  88         background-color: white;
  89         overflow: hidden;
  90         text-overflow: ellipsis;
  91         line-height: 14px;
  92         display: block;
  93         width: 140px;                           /* --legend-width */
  94         height: calc(100% - 15px);      /* 10px for the resize handler and 5px for the top margin */
  95         font-size: 10px;
  96         margin-top: 5px;
  97         /* width and height is calculated (depends on the appearance of the legend) */
  98 }
  99
 100 .netdata-legend-title-date {
 101         font-size: 10px;
 102         font-weight: normal;
 103         margin-top: 0px;
 104 }
 105 .netdata-legend-title-time {
 106         font-size: 11px;
 107         font-weight: bold;
 108         margin-top: 0px;
 109 }
 110 .netdata-legend-title-units {
 111         position: absolute;
 112         right: 5px;
 113         float: right;
 114         font-size: 10px;
 115         vertical-align: top;
 116         font-weight: normal;
 117         margin-top: 0px;
 118 }
 119 .netdata-legend-series {
 120         position: absolute;
 121         width: 140px;                           /* --legend-width */
 122         height: calc(100% - 50px);
 123         overflow: hidden;
 124         text-overflow: ellipsis;
 125         line-height: 14px;
 126         display: block;
 127         font-size: 10px;
 128         margin-top: 0px;
 129 }
 130
 131 .netdata-legend-series > .netdata-legend-series-content {
 132         position      : absolute;
 133         overflow      : scroll;
 134         overflow-x    : hidden;
 135         top           : 0;
 136         right         : 0;
 137         bottom        : 0;
 138         left          : 0;
 139         text-overflow: ellipsis;
 140 }
 141 .netdata-legend-series > .netdata-legend-series-content:focus {
 142         outline: thin dotted;
 143 }
 144 .netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {
 145         display: block; /* was 'none', but chrome was hidding content with it */
 146 }
 147 .has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {
 148         display: block;
 149 }
 150 .netdata-legend-series > .netdata-legend-series-pane {
 151 /*      background : rgba(0,0,0,.25);*/
 152         background : #DDD;
 153         position   : absolute;
 154         width      : 4px;
 155         right      : 0;
 156         top        : 0;
 157         bottom     : 0;
 158 /*      visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */
 159 /*      opacity    : .01; */
 160 /*      -webkit-transition    : .2s; */
 161 /*      -moz-transition       : .2s; */
 162 /*      -o-transition         : .2s; */
 163 /*      transition            : .2s; */
 164         -moz-border-radius    : 4px;
 165         -webkit-border-radius : 4px;
 166         border-radius         : 4px;
 167 }
 168 .netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {
 169         background            : #444;
 170 /*      background            : rgba(0,0,0,.5);*/
 171         position              : relative;
 172         margin                : 0 1px;
 173         -moz-border-radius    : 2px;
 174         -webkit-border-radius : 2px;
 175         border-radius         : 2px;
 176 }
 177 .netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {
 178 /*  visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */
 179 /*  opacity    : 0.99;*/
 180 }
 181
 182 .netdata-legend-name-table-line {
 183         display: inline-block;
 184         width: 13px;
 185         height: 4px;
 186         border-width: 0px;
 187         border-bottom-width: 2px;
 188         border-bottom-style: solid;
 189         border-bottom-color: white;
 190 }
 191 .netdata-legend-name-table-area {
 192         display: inline-block;
 193         width: 13px;
 194         height: 5px;
 195         border-width: 1px;
 196         border-top-width: 1px;
 197         border-top-style: solid;
 198         border-top-color: inherit;
 199 }
 200 .netdata-legend-name-table-stacked {
 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-tr {
 210 }
 211 .netdata-legend-name-td {
 212 }
 213 .netdata-legend-name {
 214         text-align: left;
 215         font-size: 10px;
 216         font-weight: bold;
 217         vertical-align: bottom;
 218         margin-top: 0px;
 219         z-index: 9;
 220         padding: 0px;
 221         width: 80px !important;
 222         max-width: 80px !important;
 223         text-overflow: ellipsis;
 224         overflow: hidden;
 225         white-space: nowrap;
 226         display: inline-block;
 227         cursor: pointer;
 228 }
 229
 230 .netdata-legend-value {
 231         /*margin-left: 14px;*/
 232         position: absolute;
 233         right: 5px;
 234         float: right;
 235         text-align: right;
 236         font-size: 10px;
 237         font-weight: bold;
 238         vertical-align: bottom;
 239         background-color: White;
 240         margin-top: 0px;
 241         z-index: 10;
 242         padding: 0px;
 243         padding-left: 15px;
 244         cursor: pointer;
 245 }
 246 .netdata-legend-name.not-selected {
 247         font-weight: normal;
 248         opacity: 0.3;
 249 }
 250
 251 .netdata-chart {
 252         position: absolute;             /* within .netdata-container */
 253         top: 0;                                 /* within .netdata-container */
 254         left: 0;                                /* within .netdata-container */
 255         display: inline-block;
 256         overflow: hidden;
 257         width: 100%;
 258         height: 100%;
 259
 260         /* width and height is calculated (depends on the appearance of the legend) */
 261 }
 262
 263 .netdata-chart-with-legend-right {
 264         position: absolute;             /* within .netdata-container */
 265         top: 0;                                 /* within .netdata-container */
 266         left: 0;                                /* within .netdata-container */
 267         display: block;
 268         overflow: hidden;
 269         margin-right: 140px;            /* --legend-width */
 270         width: calc(100% - 140px);      /* --legend-width */
 271         height: 100%;
 272         flex-grow: 1;
 273
 274         /* width and height is calculated (depends on the appearance of the legend) */
 275 }
 276
 277 .netdata-peity-chart {
 278
 279 }
 280
 281 .netdata-sparkline-chart {
 282
 283 }
 284
 285 .netdata-dygraph-chart {
 286
 287 }
 288
 289 .netdata-morris-chart {
 290
 291 }
 292
 293 .netdata-google-chart {
 294
 295 }
 296
 297 .dygraph-ylabel {
 298 }
 299
 300 .dygraph-title {
 301         text-indent: 56px;
 302         text-align: left;
 303         position: absolute;
 304         left: 0px;
 305         top: 4px;
 306         font-size: 11px;
 307         font-weight: bold;
 308         text-overflow: ellipsis;
 309         overflow: hidden;
 310         white-space: nowrap;
 311 }
 312
 313 /* fix for sparkline tooltip under bootstrap */
 314 .jqstooltip {
 315   width: auto !important;
 316   height: auto !important;
 317 }