Websites/perf.webkit.org/public/v2/chart-pane.css

   1 .chart-pane header {
   2     background: #fff;
   3     margin: 0;
   4     padding: 0.5rem;
   5     color: #000;
   6     border-bottom: 1px solid #bbb;
   7     border-top-left-radius: 0.5rem;
   8     border-top-right-radius: 0.5rem;
   9     position: relative;
  10 }
  11 .chart-pane h1 {
  12     color: #333;
  13     font-size: 1rem;
  14     font-weight: normal;
  15     line-height: 1rem;
  16     margin: 0 0 0 1.5rem;
  17     padding: 0;
  18 }
  19 .chart-pane:focus header {
  20     background-color: rgba(204, 153, 51, 0.1);
  21     color: #333;
  22 }
  23
  24 .chart-pane .progress {
  25     height: 100%;
  26     position: relative;
  27 }
  28
  29 .chart-pane .progress .spinner {
  30     position: absolute;
  31     left: 50%;
  32     top: 50%;
  33     margin-left: -1rem;
  34     margin-top: -1rem;
  35 }
  36
  37 .chart-pane a.close-button {
  38     display: inline-block;
  39     position: absolute;
  40     left: 0.55rem;
  41     top: 0.55rem;
  42 }
  43
  44 .chart-pane a.stat-button {
  45     display: inline-block;
  46     position: absolute;
  47     right: 3.15rem;
  48     top: 0.55rem;
  49 }
  50
  51 .chart-pane a.bugs-button {
  52     display: inline-block;
  53     position: absolute;
  54     right: 1.85rem;
  55     top: 0.55rem;
  56 }
  57
  58 .chart-pane a.search-button {
  59     display: inline-block;
  60     position: absolute;
  61     right: 0.55rem;
  62     top: 0.55rem;
  63 }
  64
  65 .popup-pane {
  66     position: absolute;
  67     top: 1.7rem;
  68     border: 1px solid #bbb;
  69     font-size: 0.8rem;
  70     padding: 0.2rem;
  71     border-radius: 0.5rem;
  72     display: table;
  73     background: white;
  74 }
  75
  76 .popup-pane.hidden {
  77     display: none;
  78 }
  79
  80 .stat-pane {
  81     right: 2.6rem;
  82     padding: 0;
  83 }
  84
  85 .stat-pane fieldset {
  86     border: solid 1px #ccc;
  87     border-radius: 0.5rem;
  88     margin: 0.2rem;
  89     padding: 0;
  90 }
  91
  92 .stat-option {
  93     margin: 0;
  94     padding: 0;
  95     font-size: 0.8rem;
  96 }
  97
  98 .stat-option h1 {
  99     font-size: inherit;
 100     line-height: 0.8rem;
 101     padding: 0.3rem 0.5rem;
 102     margin: 0;
 103     border-top: solid 1px #ccc;
 104     border-bottom: solid 1px #ccc;
 105 }
 106
 107 .stat-option:first-child h1 {
 108     border-top: none;
 109 }
 110
 111 .stat-option > * {
 112     display: block;
 113     margin: 0.1rem 0.5rem 0.1rem 1rem;
 114 }
 115
 116 .stat-option input {
 117     width: 4rem;
 118 }
 119
 120 .stat-option p {
 121     max-width: 15rem;
 122 }
 123
 124 .analysis-pane {
 125     right: 1.3rem;
 126 }
 127
 128 .analysis-pane > * {
 129     margin: 0.2rem;
 130 }
 131
 132 .search-pane {
 133     right: 0rem;
 134 }
 135
 136 .search-pane input {
 137     display: table-cell;
 138     vertical-align: middle;
 139     outline: none;
 140     border: none;
 141     border-top-right-radius: 0.5rem;
 142     border-bottom-right-radius: 0.5rem;
 143     padding: 0.2rem;
 144     font-size: 0.8rem;
 145     margin: 0;
 146 }
 147
 148 .search-pane .repositories {
 149     display: table-cell;
 150     vertical-align: middle;
 151     padding: 0;
 152 }
 153
 154 .search-pane input:focus {
 155     background-color: rgb(249, 242, 228);
 156 }
 157
 158 .chart-pane .body {
 159     position: relative;
 160     width: 100%;
 161     height: 18rem;
 162 }
 163 .chart-pane .svg-container {
 164     width: auto;
 165     height: 100%;
 166 }
 167 .chart-pane .svg-container {
 168     margin-right: 25rem;
 169 }
 170
 171 .selection-toolbar {
 172     display: inline-block;
 173     background: white;
 174     border: solid 1px #d9d9d9;
 175     border-radius: 0.3rem;
 176     z-index: 10;
 177     position: absolute;
 178     margin-top: -2rem;
 179     margin-left: 0.5rem;
 180     white-space: nowrap;
 181 }
 182
 183 .selection-toolbar .button {
 184     display: block;
 185     float: left;
 186     width: 1rem;
 187     height: 1rem;
 188     padding: 0.2rem;
 189     margin: 0;
 190     border-left: solid 1px #bbb;
 191 }
 192
 193 .selection-toolbar .button:first-child {
 194     border-left: none;
 195 }
 196
 197 .selection-toolbar .button svg {
 198     stroke: #666;
 199     fill: #666;
 200 }
 201
 202 .chart-pane .details {
 203     position: absolute;
 204     right: 0;
 205     top: 0;
 206     width: 25rem;
 207     height: 100%;
 208     border-left: solid 1px #bbb;
 209 }
 210
 211 .analysis-chart-pane {
 212     height: 15rem;
 213 }
 214
 215 .analysis-chart-pane table {
 216     margin: 0.5rem;
 217 }
 218
 219 .chart-pane .overview {
 220     height: 5rem;
 221     border-bottom: solid 0px #eee;
 222 }
 223
 224 .chart-pane .details-table-container {
 225     position: absolute;
 226     top: 5rem;
 227     width: 100%;
 228     height: 13rem;
 229     overflow: scroll;
 230 }
 231 .analysis-chart-pane .details-table-container {
 232     position: static;
 233     height: 15rem;
 234 }
 235
 236 .chart-pane .details-table,
 237 .chart-pane .commits-viewer {
 238     font-size: 0.8rem;
 239     width: auto;
 240     table-layout: fixed;
 241     border-collapse: collapse;
 242 }
 243
 244 .chart-pane .commits-viewer {
 245     width: 100%;
 246 }
 247
 248 .chart-pane .details-table td:last-child {
 249     padding-right: 1px;
 250 }
 251
 252 .chart-pane .details-table th {
 253     width: 30%;
 254     text-align: right;
 255     font-weight: normal;
 256     padding: 0;
 257 }
 258
 259 .chart-pane .details-table td {
 260     width: 70%;
 261 }
 262
 263 .chart-pane .details-table .bugs th {
 264     font-weight: bold;
 265 }
 266
 267 .chart-pane .details-table th:after {
 268     content: " : ";
 269 }
 270
 271 .chart-pane .details-table .status th {
 272     visibility: hidden;
 273 }
 274
 275 .chart-pane .details-table .status td {
 276     font-size: 1rem;
 277 }
 278
 279 .chart-pane .commits-viewer caption {
 280     border-top: solid 1px #ccc;
 281     font-weight: normal;
 282     text-align: left;
 283     padding: 0.2rem;
 284     padding-left: 0.5rem;
 285     cursor: pointer;
 286 }
 287
 288 .chart-pane .commits-viewer caption:before,
 289 .analysis-group .results .summary .config-letter:before {
 290     display: inline-block;
 291     width: 0.8rem;
 292     content: "\25BE"; /* Down arrow */
 293 }
 294
 295 .chart-pane .commits-viewer.hidden caption:before,
 296 .analysis-group .results .hideRequests .summary .config-letter:before {
 297     display: inline-block;
 298     width: 0.8rem;
 299     content: "\25B8"; /* Right arrow */
 300 }
 301
 302 .chart-pane .commits {
 303     border-bottom: solid 1px #ccc;
 304     margin-bottom: 0.2rem;
 305 }
 306
 307 .chart-pane .commits-viewer {
 308     border-collapse: collapse;
 309 }
 310
 311 .chart-pane .commits-viewer td,
 312 .chart-pane .commits-viewer th {
 313     word-break: break-word;
 314     border-top: solid 1px #ccc;
 315     padding: 0.2rem;
 316 }
 317
 318 .chart-pane .commits-viewer th {
 319     width: 20%;
 320     font-weight: normal;
 321 }
 322
 323 .chart-pane .commits-viewer td {
 324     width: 60%;
 325 }
 326
 327 .chart-pane .chart {
 328     height: 100%;
 329 }
 330
 331 .chart-pane .chart svg {
 332     height: 100%;
 333 }
 334
 335 .chart {
 336     position: relative;
 337     overflow: hidden;
 338 }
 339
 340 .chart svg {
 341     stroke: #666;
 342     fill: #000;
 343     color: #000;
 344     font-size: 0.7rem;
 345 }
 346
 347 .chart path {
 348     fill: none;
 349     stroke-width: 1.5px;
 350 }
 351
 352 .chart .dot {
 353     fill: #ccc;
 354     stroke: none;
 355 }
 356 .chart .dot.foreground {
 357     fill: #666;
 358 }
 359
 360 .chart path.area {
 361     stroke: none;
 362     fill: #ccc;
 363     opacity: 0.8;
 364 }
 365 .chart path.area.foreground {
 366 }
 367
 368 .chart path.current {
 369     stroke: #ccc;
 370 }
 371
 372 .chart path.current.foreground {
 373     stroke: #999;
 374 }
 375
 376 .chart path.movingAverage {
 377     stroke: #363;
 378     fill: none;
 379     opacity: 0.8;
 380 }
 381
 382 .chart path.envelope {
 383     stroke: none;
 384     fill: #6c6;
 385     opacity: 0.4;
 386 }
 387
 388 .chart path.baseline {
 389     stroke: #f66;
 390 }
 391 .chart-pane .status .worse,
 392 .dashboard-status .worse {
 393     color: #c33;
 394 }
 395
 396 .chart path.target {
 397     stroke: #66f;
 398 }
 399 .chart-pane .status .better,
 400 .dashboard-status .better {
 401     color: #33c;
 402 }
 403
 404 .dashboard-status .status-label {
 405     margin-left: 1rem;
 406 }
 407
 408 .chart .axis,
 409 .chart .domain {
 410   fill: none;
 411   stroke-width: 1px;
 412   stroke: #ddd;
 413   color: #000;
 414   shape-rendering: crispEdges;
 415 }
 416
 417 .chart .domain {
 418     stroke: none;
 419 }
 420
 421 .chart .current-item {
 422     stroke: #f93;
 423     stroke-width: 2px;
 424     fill: #f93;
 425 }
 426
 427 .chart .highlight {
 428     stroke: #f93;
 429     stroke-width: 2px;
 430     fill: none;
 431 }
 432
 433 .chart .extent {
 434     stroke: #f93;
 435     stroke-width: 1px;
 436     fill: #9c6;
 437     fill-opacity: .125;
 438     shape-rendering: crispEdges;
 439 }
 440
 441 .chart .axis text {
 442     fill: #333;
 443     stroke: none;
 444 }
 445
 446 .chart .axis.interactive text {
 447     cursor: pointer;
 448 }
 449
 450 .chart .rangeBar {
 451     display: block;
 452     background-color: #fc6;
 453     position: absolute;
 454 }