Websites/perf.webkit.org/public/v2/app.css

   1 html {
   2     margin: 0;
   3     padding: 0;
   4 }
   5 body {
   6     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   7     padding: 0;
   8     margin: 0 1rem;
   9     min-width: 60rem;
  10 }
  11
  12
  13 .popup {
  14     margin: 0;
  15     position: relative;
  16     display: inline-block;
  17 }
  18
  19 .popup h1 {
  20     display: inline-block;
  21     margin: 0;
  22     padding: 0;
  23 }
  24
  25 .popup .popup-button,
  26 .control-button,
  27 .start-time-slider {
  28     display: inline-block;
  29     margin: 0;
  30     padding: 0;
  31     font-weight: normal;
  32     color: #666;
  33     text-decoration: none;
  34     cursor: pointer;
  35
  36     border: solid 1px #999;
  37     border-radius: 0.3rem;
  38     padding: 0.2rem 0.5rem;
  39 }
  40
  41 #header ul.controls li:not(:first-child) .control-button {
  42     border-left: none;
  43     border-top-left-radius: 0;
  44     border-bottom-left-radius: 0;
  45 }
  46 #header ul.controls li:not(:last-child) .control-button {
  47     border-top-right-radius: 0;
  48     border-bottom-right-radius: 0;
  49 }
  50
  51 .popup .popup-button:after {
  52     content: " \25BE";
  53 }
  54
  55 .popup .popup {
  56     display: block;
  57     margin: 0;
  58 }
  59
  60 .popup .popup .popup-button:after {
  61     content: " \25B8";
  62 }
  63
  64 .popup ul {
  65     display: block;
  66     position: absolute;
  67     left: 0rem;
  68     top: 0rem;
  69     z-index: 999;
  70     background: #fff;
  71     box-shadow: rgba(0, 0, 0, 0.03) 1px 1px 10px 3px;
  72 /*    box-shadow: rgba(0, 0, 0, 0.03) 1px 1px 0px 0px;*/
  73     margin: 0.2rem 0;
  74     padding: 0.5rem 0;
  75     list-style: none;
  76     border: solid 1px #999;
  77     border-radius: 0.3rem;
  78     white-space: nowrap;
  79     text-align: left;
  80 }
  81
  82 .popup .popup ul {
  83     top: 0rem;
  84     margin: 0;
  85     margin-top: -0.5rem;
  86     margin-left: -0.7rem;
  87 }
  88
  89 .popup li .label {
  90     display: block;
  91     max-width: 15rem;
  92     text-overflow: ellipsis;
  93     overflow: hidden;
  94 }
  95
  96 .popup .popup a {
  97     display: block;
  98     width: auto;
  99     padding: 0.2rem 0.5rem;
 100     border: none;
 101 }
 102
 103 .popup a {
 104     color: #333;
 105     text-decoration: none;
 106 }
 107
 108 .popup a:active,
 109 .popup a:focus {
 110     background: #eef;
 111 }
 112
 113 .popup li:hover {
 114     background: #eee;
 115 }
 116
 117
 118 .icon-button {
 119     width: 1rem;
 120     height: 1rem;
 121 }
 122 .icon-button g {
 123     stroke: #ccc;
 124     fill: #ccc;
 125 }
 126 .icon-button:hover g {
 127     stroke: #666;
 128     fill: #666;
 129 }
 130 .disabled .icon-button:hover g {
 131     stroke: #ccc;
 132     fill: #ccc;
 133 }
 134
 135
 136 #header {
 137     margin: 0 0 1rem 0;
 138     border: 1px solid #999;
 139     border-radius: 0.3rem;
 140     background: #fff;
 141     box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px 0px;
 142     border-top: none;
 143     border-top-left-radius: 0;
 144     border-top-right-radius: 0;
 145     color: #888;
 146     position: relative;
 147 }
 148
 149 #navigation {
 150     display: inline-block;
 151 }
 152
 153 #navigation h1,
 154 #navigation ul,
 155 #navigation li,
 156 #header ul.controls {
 157     margin: 0;
 158     padding: 0;
 159     font-weight: normal;
 160     line-height: 3rem;
 161 }
 162 #navigation a {
 163     text-decoration: none;
 164     color: inherit;
 165 }
 166 #navigation h1 {
 167     font-size: 1.3rem;
 168     margin-left: 0.5rem;
 169     display: inline;
 170     color: #c93;
 171 }
 172 #navigation ul,
 173 #header ul.controls {
 174     display: inline-block;
 175     list-style: none;
 176 }
 177 #navigation ul {
 178     vertical-align: bottom;
 179     margin-left: 4rem;
 180     margin-right: 2.5rem;
 181 }
 182 #header ul.controls {
 183     margin: 0 1.5rem;
 184     vertical-align: top;
 185     padding-top: 0.95rem;
 186     font-size: 0.8rem;
 187     line-height: 1rem;
 188 }
 189 #navigation li,
 190 #header ul.controls > li {
 191     display: block;
 192     float: left;
 193     margin: 0;
 194     padding: 0;
 195 }
 196 #navigation li a {
 197     display: block;
 198     border: solid 1px #999;
 199     border-bottom: 0px;
 200     border-radius: 0.3rem;
 201     border-bottom-left-radius: 0;
 202     border-bottom-right-radius: 0;
 203     padding: 0.5rem;
 204     margin: 0;
 205     line-height: 1rem;
 206 }
 207 #navigation li:not(:last-of-type) a {
 208     border-top-right-radius: 0;
 209     border-bottom-right-radius: 0;
 210     border-right: 0;
 211 }
 212 #navigation li:not(:first-of-type) a {
 213     border-top-left-radius: 0;
 214     border-bottom-left-radius: 0;
 215 }
 216 #navigation li.active a,
 217 #header ul.controls li.active .control-button {
 218     border-color: inherit;
 219     color: #000;
 220 }
 221
 222 #navigation li:not(.active) a:hover,
 223 #navigation li:not(.active) a:active,
 224 #header ul.controls > li:not(.active) > a:hover,
 225 #header ul.controls > li:not(.active) > a:active {
 226     background-color: rgba(204, 153, 51, 0.1);
 227 }
 228
 229
 230
 231 .start-time-slider {
 232     line-height: 1em;
 233 }
 234
 235 .start-time-slider label {
 236     display: block;
 237 }
 238
 239 .start-time-slider input {
 240     vertical-align: middle;
 241     height: 0.8rem;
 242 }
 243
 244 .start-time-slider .numberOfDays {
 245     display: inline-block;
 246     text-align: right;
 247     width: 1.5rem;
 248 }
 249
 250
 251
 252
 253 .spinner {
 254     width: 2rem;
 255     height: 2rem;
 256     -webkit-transform: translateZ(0);
 257 }
 258 .spinner line {
 259     animation: spinner-animation 1.6s linear infinite;
 260     -webkit-animation: spinner-animation 1.6s linear infinite;
 261     opacity: 0.1;
 262 }
 263 .spinner line:nth-child(0) {
 264     -webkit-animation-delay: 0.0s;
 265     animation-delay: 0.0s;
 266 }
 267 .spinner line:nth-child(1) {
 268     -webkit-animation-delay: 0.2s;
 269     animation-delay: 0.2s;
 270 }
 271 .spinner line:nth-child(2) {
 272     -webkit-animation-delay: 0.4s;
 273     animation-delay: 0.4s;
 274 }
 275 .spinner line:nth-child(3) {
 276     -webkit-animation-delay: 0.6s;
 277     animation-delay: 0.6s;
 278 }
 279 .spinner line:nth-child(4) {
 280     -webkit-animation-delay: 0.8s;
 281     animation-delay: 0.8s;
 282 }
 283 .spinner line:nth-child(5) {
 284     -webkit-animation-delay: 1s;
 285     animation-delay: 1s;
 286 }
 287 .spinner line:nth-child(6) {
 288     -webkit-animation-delay: 1.2s;
 289     animation-delay: 1.2s;
 290 }
 291 .spinner line:nth-child(7) {
 292     -webkit-animation-delay: 1.4s;
 293     animation-delay: 1.4s;
 294 }
 295 .spinner line:nth-child(8) {
 296     -webkit-animation-delay: 1.6s;
 297     animation-delay: 1.6s;
 298 }
 299 @-webkit-keyframes spinner-animation {
 300     0% { opacity: 0.9; }
 301     50% { opacity: 0.1; }
 302     100% { opacity: 0.1; }
 303 }
 304
 305
 306 table.dashboard {
 307     border-collapse: collapse;
 308     table-layout: fixed;
 309     color: #999;
 310     width: 100%;
 311 }
 312
 313 table.dashboard th,
 314 table.dashboard td {
 315     border: solid 0px #d9d9d9;
 316     padding: 0.2rem 0.5rem;
 317     text-align: center;
 318     position: relative;
 319 }
 320
 321 table.dashboard thead th,
 322 table.dashboard thead td {
 323     padding: 0.5rem;
 324 }
 325 /*
 326 table.dashboard thead th:nth-child(odd),
 327 table.dashboard tbody td:nth-child(even) {
 328 }
 329 */
 330 table.dashboard input {
 331     font-size: 1rem;
 332     width: 12rem;
 333     height: 1rem;
 334     text-align: center;
 335     margin: 0.5rem 0.3rem;
 336 }
 337
 338 table.dashboard th {
 339     font-weight: normal;
 340     font-size: 1rem;
 341     white-space: nowrap;
 342     color: #f96;
 343 }
 344
 345 table.dashboard thead th {
 346     height: 1rem;
 347 }
 348
 349 table.dashboard.readonly thead td,
 350 table.dashboard.readonly tbody th {
 351     width: 1rem;
 352     padding: 0.2rem 0.5rem;
 353 }
 354
 355 table.dashboard tbody th {
 356     height: 12rem;
 357 }
 358
 359 table.dashboard.readonly tbody th .label {
 360     position: absolute;
 361     left: 0;
 362     right: 0;
 363     display: block;
 364     width: 12.4rem;
 365     height: 2rem;
 366     line-height: 2rem;
 367     vertical-align: middle;
 368     -webkit-transform: rotate(-90deg) translate(-50%, 0);
 369     -webkit-transform-origin: 0 0;
 370     transform: rotate(-90deg) translate(-50%, 0);
 371     transform-origin: 0 0;
 372 }
 373
 374 table.dashboard.editMode a {
 375     text-decoration: none;
 376     vertical-align: middle;
 377 }
 378
 379 table.dashboard.editMode tbody th a {
 380     margin-left: 0.3rem;
 381 }
 382
 383 table.dashboard.editMode input {
 384     box-shadow: inset 1px 1px 0px rgba(0, 0, 0, 0.05);
 385     border: solid 1px #999;
 386     padding: 0.2rem;
 387     border-radius: 0.2rem;
 388 }
 389
 390 table.dashboard tbody td a.reset {
 391     position: absolute;
 392     top: 0.5rem;
 393     left: 0.5rem;
 394 }
 395 table.dashboard.editMode tbody td {
 396     padding-left: 2rem;
 397 }
 398 table.dashboard tbody td a.reset svg {
 399     background: white;
 400 }
 401
 402 table.dashboard tbody td .chart {
 403     border: solid 0px #ddd;
 404     border-radius: 0.5rem;
 405     margin: 0.5rem 0.5rem;
 406 }
 407
 408 table.dashboard tbody td .chart,
 409 table.dashboard tbody td .progress {
 410     display: inline-block;
 411     width: 100%;
 412     height: 12rem;
 413     line-height: 12rem;
 414     vertical-align: middle;
 415 }
 416
 417 table.dashboard tbody td .failure {
 418     display: table-cell;
 419     width: 100%;
 420     height: 12rem;
 421     vertical-align: middle;
 422 }
 423
 424 .chart-pane,
 425 .analysis-group {
 426     border: 1px solid #bbb;
 427     border-radius: 0.5rem;
 428     box-shadow: rgba(0, 0, 0, 0.03) 1px 1px 0px 0px;
 429     padding: 0;
 430     margin-bottom: 1rem;
 431     outline: none;
 432     position: relative;
 433 }
 434
 435 form .analysis-group > * {
 436     margin: 0.5rem;
 437 }
 438
 439 #analysis-tasks,
 440 .analysis-group > table {
 441     border: solid 0px #999;
 442     border-collapse: collapse;
 443 }
 444
 445 #analysis-tasks thead,
 446 .analysis-group > table thead {
 447     color: #c93;
 448 }
 449
 450 #analysis-tasks th,
 451 .analysis-group > table th {
 452     font-weight: normal;
 453 }
 454
 455 #analysis-tasks td,
 456 #analysis-tasks th,
 457 .analysis-group > table td,
 458 .analysis-group > table th {
 459     padding: 0.2rem 0.5rem;
 460 }
 461
 462 #analysis-tasks tbody td,
 463 #analysis-tasks tbody th,
 464 .analysis-group > table tbody td,
 465 .analysis-group > table tbody th {
 466     border-top: solid 1px #ddd;
 467 }
 468
 469 .analysis-group .results .summary td {
 470     vertical-align: top;
 471 }
 472
 473 .analysis-group .results thead td {
 474     text-align: center;
 475 }
 476
 477 .analysis-group .results .config-letter,
 478 .analysis-group .results .summary {
 479     cursor: pointer;
 480 }
 481
 482 .analysis-group .results .request .config-letter {
 483     border-color: transparent;
 484 }
 485
 486 .analysis-group .results .hideRequests .request {
 487     display: none;
 488 }
 489
 490 .analysis-group .results {
 491     margin: 0.5rem;
 492     margin-right: 20rem;
 493 }
 494
 495 .analysis-group .reference-chart {
 496     position: absolute;
 497     top: 1.8rem;
 498     right: 0rem;
 499     width: 19rem;
 500     height: 5rem;
 501 }
 502
 503 .analysis-group .reference-chart .chart {
 504     width: 100%;
 505     height: 100%;
 506 }
 507
 508 .box-plot {
 509     display: inline-block;
 510     width: 100px;
 511     height: 0.6rem;
 512     border: solid 1px #ddd;
 513     padding: 1px;
 514     vertical-align: middle;
 515 }
 516
 517 .box-plot .percentage {
 518     fill: #ccc;
 519 }
 520
 521 .box-plot .delta {
 522     fill: #333;
 523     opacity: 0.5;
 524 }
 525
 526 .box-plot svg {
 527     display: block;
 528 }
 529
 530 #analysis-task-title {
 531     font-weight: normal;
 532     font-size: 1.2rem;
 533     margin: 0 0 0 0.5rem;
 534     padding: 0;
 535 }
 536
 537 #analysis-task-testname {
 538     font-weight: normal;
 539     font-size: 1rem;
 540     margin: 0 0 1rem 0.5rem;
 541     padding: 0;
 542     color: #333;
 543 }
 544
 545 .analysis-group > h1 {
 546     font-size: 1.1rem;
 547     font-weight: normal;
 548     text-align: left;
 549     margin-bottom: 0.5rem;
 550     border-bottom: 1px solid #bbb;
 551     margin: 0;
 552     padding: 0.2rem 0.5rem;
 553 }
 554
 555 .analysis-group h1 > input {
 556     font-size: 1rem;
 557     min-width: 20rem;
 558     margin: 0.2rem 0;
 559 }
 560
 561 .analysis-bugs th {
 562     font-weight: normal;
 563     text-align: right;
 564 }