Update Animometer design
[WebKit-https.git] / PerformanceTests / Animometer / resources / debug-runner / animometer.css
1 /* Outer harness */
2 html,body {
3     height: 100%;
4     margin: 0px;
5     padding: 0px;
6 }
7
8 body {
9     background-color: rgb(241, 241, 241);
10     color: rgb(96, 96, 96);
11     font-family: -apple-system, "Helvetica Neue", Helvetica, Verdana, sans-serif;
12 }
13
14 main {
15     width: 100%;
16     height: 100%;
17
18     display: flex;
19     align-items: center;
20     justify-content: flex-start;
21     flex-flow: column;
22 }
23
24 hr {
25     flex: 1 0 20px;
26     width: 1px;
27     border: 0;
28     margin: 0;
29 }
30
31 section {
32     box-sizing: border-box;
33     width: 100%;
34     display: none;
35 }
36
37 section.selected {
38     display: initial;
39 }
40
41 h1 {
42     font-size: 3em;
43     text-align: center;
44     font-weight: 600;
45     margin: 10vh 0;
46     flex: 0 1 1em;
47 }
48
49 .hidden {
50     display: none;
51 }
52
53 button {
54     flex: 0 0 auto;
55     display: block;
56     font-size: 1.5em;
57     border: 2px solid rgb(96, 96, 96);
58     color: rgb(96, 96, 96);
59     background: transparent;
60     border-radius: 10px;
61     padding: .5em 2em;
62 }
63
64 button:hover {
65     background-color: rgba(0, 0, 0, .1);
66     cursor: pointer;
67 }
68
69 button:active {
70     color: inherit;
71     background-color: rgba(0, 0, 0, .2);
72 }
73
74 button:disabled {
75     border-color: rgba(96, 96, 96, .5);
76     color: rgba(96, 96, 96, .5);
77 }
78
79 @media screen and (min-device-height: 1024px),
80     screen and (min-device-width: 1024px) and (orientation: landscape) {
81     section {
82         padding: 0 20px;
83     }
84
85     section.selected {
86         display: flex;
87         align-items: center;
88         justify-content: flex-start;
89         flex-flow: column;
90     }
91 }
92
93 @media screen and (max-device-width: 414px),
94     screen and (max-device-height: 414px) and (orientation: landscape) {
95     h1 {
96         font-size: 2.5em;
97     }
98
99     hr {
100         flex: 0 0 0;
101     }
102
103     section {
104         box-sizing: border-box;
105         width: 100%;
106         height: 100%;
107         align-self: stretch;
108         padding: 0 5px;
109     }
110 }
111
112 /* Intro section */
113 #intro.selected {
114     flex: 1 0 auto;
115 }
116
117 #intro > p {
118     flex: 0 1 auto;
119     padding: .5em 0;
120     margin: 0;
121     font-size: 2em;
122 }
123
124 #intro .orientation-check {
125     padding: 10vh 0;
126     text-align: center;
127 }
128
129 #intro .orientation-check p {
130     font-size: 1em;
131     color: hsl(11, 72%, 50%);
132     margin-bottom: 1em;
133     -apple-trailing-word: -apple-partially-balanced;
134 }
135
136 #intro .orientation-check button {
137     margin: 0 auto;
138 }
139
140 @media screen and (min-device-height: 1024px),
141     screen and (min-device-width: 1024px) and (orientation: landscape) {
142     #intro p {
143         max-width: 800px;
144         margin: 0;
145     }
146 }
147
148 @media screen and (max-device-width: 414px),
149     screen and (max-device-height: 414px) and (orientation: landscape) {
150     #intro.selected {
151         display: flex;
152         align-items: center;
153         justify-content: flex-start;
154         flex-flow: column;
155     }
156
157     #intro p {
158         padding-left: 20px;
159         padding-right: 20px;
160         font-size: 1.5em;
161     }
162 }
163
164 /* Running test section */
165 #test-container.selected {
166     display: flex;
167
168     align-items: center;
169     justify-content: center;
170 }
171
172 .frame-container > iframe {
173     width: 1200px;
174     height: 600px;
175     border: 0;
176     margin: 0 auto;
177 }
178
179 @media screen and (max-device-width: 414px),
180     screen and (max-device-height: 414px) and (orientation: landscape) {
181     #test-container {
182         padding: 0;
183     }
184
185     .frame-container {
186         width: 100%;
187         height: calc(100% + 1px);
188     }
189
190     .frame-container > iframe {
191         width: 100%;
192         height: 100%;
193     }
194 }
195
196 @media (min-device-height: 768px) and (max-device-height: 1024px) {
197     .frame-container > iframe {
198         width: 900px;
199         height: 600px;
200     }
201 }
202
203 @media screen and (max-device-width: 1024px) and (min-device-height: 1366px) {
204     .frame-container > iframe {
205         width: 1200px;
206         height: 800px;
207     }
208 }
209
210 @media screen and (min-width: 1800px) {
211     .frame-container > iframe {
212         width: 1600px;
213         height: 800px;
214     }
215 }
216
217 /* Results section */
218 #results {
219     text-align: center;
220 }
221
222 #results.selected {
223     flex: 1 0 auto;
224 }
225
226 .score {
227     font-size: 5em;
228     font-weight: bold;
229     margin: 0;
230 }
231
232 #results-tables {
233     direction: rtl;
234
235     display: flex;
236
237     align-items: center;
238     justify-content: center;
239
240     margin: 3em 0;
241 }
242
243 #results table {
244     direction: ltr;
245     border-spacing: 0;
246 }
247
248 #results th {
249     padding: .5em 0;
250 }
251
252 #results tr td {
253     padding: .25em 0;
254 }
255
256 #results-header td, #results-header th {
257     text-align: left;
258 }
259 #results-header tr td {
260     padding-right: 1em;
261 }
262 #results-score td, #results-score th {
263     text-align: right;
264 }
265 #results footer {
266     padding-bottom: 10vh;
267 }
268
269 @media screen and (max-device-width: 414px),
270     screen and (max-device-height: 414px) and (orientation: landscape) {
271     #results.selected {
272         padding: 0 20px;
273         display: flex;
274         align-items: center;
275         justify-content: flex-start;
276         flex-flow: column;
277     }
278
279     .score {
280         font-size: 3em;
281     }
282 }
283
284 #overlay {
285     position: fixed;
286     width: 100%;
287     height: 100%;
288     top: 0;
289     left: 0;
290     color: rgb(255, 255, 255);
291     background: rgba(0, 0, 10, .8);
292 }
293
294 @supports (-webkit-backdrop-filter: blur(10px)) {
295     #overlay {
296         background: rgba(0, 0, 10, .4);
297         -webkit-backdrop-filter: blur(10px);
298     }
299 }
300
301 #overlay > div {
302     width: 500px;
303     height: 500px;
304     position: absolute;
305     margin-top: -250px;
306     margin-left: -250px;
307     top: 50%;
308     left: 50%;
309     display: flex;
310     justify-content: flex-start;
311     flex-flow: column;
312 }
313
314 #overlay > div div {
315     flex: 1 1 auto;
316     overflow: scroll;
317     border: 1px solid rgb(241, 241, 241);
318     padding: 2px;
319     box-sizing: border-box;
320 }
321
322 #overlay button {
323     margin: 1em 5em;
324     border-color: rgb(241, 241, 241);
325     color: rgb(241, 241, 241);
326 }
327
328 #overlay button:hover {
329     background-color: rgba(255, 255, 255, .1);
330 }
331
332 #overlay button:active {
333     background-color: rgba(255, 255, 255, .2);
334 }
335
336 /* Debug specific */
337 body {
338     background-color: rgb(96, 96, 96);
339     color: rgb(235, 235, 235);
340 }
341
342 h1 {
343     margin: 5vh 0;
344 }
345
346 button {
347     border: 2px solid rgb(235, 235, 235);
348     color: rgb(235, 235, 235);
349 }
350
351 button:disabled {
352     border-color: rgba(235, 235, 235, .5);
353     color: rgba(235, 235, 235, .5);
354 }
355
356 button:hover {
357     background-color: rgba(255, 255, 255, .1);
358     cursor: pointer;
359 }
360
361 button:active {
362     color: inherit;
363     background-color: rgba(255, 255, 255, .2);
364 }
365
366 @media screen and (min-width: 1800px) {
367     section {
368         width: 1600px;
369         height: 800px;
370     }
371 }
372
373 /* -------------------------------------------------------------------------- */
374 /*                               Tree                                         */
375 /* -------------------------------------------------------------------------- */
376
377 .tree {
378     padding: 0;
379     list-style-type: none;
380 }
381
382 .tree .expand-button {
383     position: absolute;
384     clip: rect(0, 0, 0, 0);
385 }
386
387 .tree .expand-button ~ ul {
388     display: none;
389 }
390
391 .tree .expand-button:checked ~ ul {
392     display: block;
393 }
394
395 .tree ul {
396     list-style-type:none;
397 }
398
399 .tree li {
400     position: relative;
401     padding: 0 0 1em 1em;
402 }
403
404 .tree ul li {
405     list-style:none;
406     padding: 1em 0 0 0em;
407 }
408
409 .tree > li:last-child {
410     padding-bottom: 0;
411 }
412
413 .tree-label {
414   position: relative;
415   display: inline-block;
416 }
417
418 label.tree-label {
419     cursor: pointer;
420 }
421
422 .tree > li > label.tree-label:before {
423     position: relative;
424     z-index: 1;
425     float: left;
426     margin: 0 0 0 -2em;
427     width: 1em;
428     height: 1em;
429     content: '\25BA';
430     text-align: center;
431     line-height: 2.5em;
432     font-size: .5em;
433 }
434
435 .tree > li > :checked ~ label.tree-label:before {
436     content: '\25BC';
437 }
438
439 .tree .link {
440     cursor: pointer;
441     color: #999;
442     font-style: italic;
443     margin-left: 2em;
444 }
445
446 @media screen and (max-device-width: 414px),
447     screen and (max-device-height: 414px) and (orientation: landscape) {
448     .tree {
449         padding-left: 1em;
450     }
451     .tree > li > label.tree-label:before {
452         font-size: 1em;
453         margin-left: -1.75em;
454         line-height: 1em;
455     }
456 }
457
458 /* -------------------------------------------------------------------------- */
459 /*                                 Intro Section                              */
460 /* -------------------------------------------------------------------------- */
461
462 #intro {
463     flex-direction: column;
464     justify-content: flex-start;
465     align-content: center;
466
467     min-height: 600px;
468     height: auto;
469 }
470
471 #intro h2 {
472     margin-top: 0;
473     font-size: 1.2em;
474 }
475
476 #intro > div:first-of-type {
477     width: 100%;
478     margin: 2em 0 0;
479     flex-direction: row;
480     display: flex;
481     align-content: flex-start;
482 }
483
484 #suites {
485     padding-left: 15vw;
486     padding-right: 3em;
487     flex: 1 1 30%;
488 }
489
490 #options {
491     flex: 10 1 auto;
492 }
493
494 #intro input[type="number"] {
495     width: 50px;
496 }
497
498 #suites input[type="number"] {
499     display: none;
500     float: right;
501 }
502
503 #suites input[type="number"].selected {
504     display: inline;
505     margin: 0;
506 }
507
508 #suites ul ul {
509     font-size: .8em;
510     margin: 0;
511     padding: 0 0 0 1em;
512 }
513
514 #suites > div {
515     margin: 3em 0;
516 }
517
518 #drop-target {
519     font-size: 1em;
520     border-radius: 10px;
521     padding: .5em 2em;
522     border: 2px solid rgb(235, 235, 235);
523     color: rgb(235, 235, 235);
524 }
525
526 #drop-target:hover {
527     background-color: rgba(255, 255, 255, .1);
528     cursor: pointer;
529 }
530
531 #options ul {
532     margin: 0;
533     padding: 0;
534     list-style: none;
535 }
536
537 #options h3 {
538     font-size: 1em;
539     font-weight: inherit;
540     margin: 0 0 .3em 0;
541     padding: 0;
542 }
543
544 #options > form > ul > li {
545     padding: 0 0 1em 0;
546 }
547
548 #options ul ul {
549     padding: 0;
550 }
551
552 #options li {
553     padding: .1em 0;
554 }
555
556 #intro > p {
557     padding: 0 5px 1em;
558     font-size: 1em;
559 }
560
561 #intro .orientation-check {
562     padding: 0 0 10vh;
563     margin-top: 0;
564 }
565
566 #intro .orientation-check p {
567     color: hsl(11, 100%, 66%);
568 }
569
570 @media screen and (min-device-width: 1800px) {
571     #intro {
572         min-height: 800px;
573     }
574 }
575
576 @media screen and (max-device-width: 414px),
577     screen and (max-device-height: 414px) and (orientation: landscape) {
578     #intro {
579         min-height: 100%;
580     }
581
582     #intro > div:first-of-type {
583         flex-direction: column;
584     }
585
586     #suites,
587     #options {
588         padding: 0 5px;
589         margin: 0;
590         flex: 0 0 auto;
591     }
592 }
593
594 /* -------------------------------------------------------------------------- */
595 /*                           Running Section                                  */
596 /* -------------------------------------------------------------------------- */
597
598 #test-container {
599     position: relative;
600 }
601
602 #running-test {
603     display: flex;
604     align-items: center;
605     justify-content: center;
606 }
607
608 #progress {
609     display: none;
610 }
611
612 .display-progress-bar #progress {
613     display: block;
614     position: fixed;
615     top: 0;
616     left: 0;
617     height: 6px;
618     width: 100%;
619     background-color: rgb(128, 128, 128);
620 }
621
622 .display-progress-bar #progress-completed {
623     position: absolute;
624     top: 0;
625     left: 0;
626     height: 6px;
627     width: 0;
628     background-color: rgb(235, 96, 32);
629 }
630
631 /* -------------------------------------------------------------------------- */
632 /*                           Results Section                                  */
633 /* -------------------------------------------------------------------------- */
634
635 #results h1, #test-graph h1 {
636     font-size: 2em;
637 }
638
639 #results button.small-button {
640     border: 1px solid rgba(235, 235, 235, .9);
641     color: rgba(235, 235, 235, .9);
642     border-radius: 2px;
643     padding: 1px 4px;
644     margin: 0 0 0 1em;
645     font-size: 9px;
646 }
647
648 #results button.small-button:active {
649     background-color: rgba(235, 235, 235, .2);
650     color: inherit;
651 }
652
653 .score {
654     font-size: 3em;
655 }
656
657 .mean {
658     margin-top: 0;
659     margin-bottom: 1em;
660     font-size: 1.5em;
661     font-weight: 400;
662 }
663
664 #results-data .average {
665     padding-left: 1em;
666     text-align: right;
667 }
668
669 #results-data .stdev {
670     text-align: left;
671     padding-left: .25em;
672 }
673
674 #results-data .left {
675     text-align: left;
676 }
677
678 #results-data .right {
679     text-align: right;
680 }
681
682 #results-data .pad-left {
683     padding-left: 1em;
684 }
685
686 #results-data .pad-right {
687     padding-right: .25em;
688 }
689
690 #results-data .small {
691     font-size: .8em;
692 }
693
694 #results-tables td.noisy-results {
695     color: rgb(255, 104, 104);
696 }
697
698 #results-tables div {
699     direction: ltr;
700     display: flex;
701     flex-direction: row;
702 }
703
704 #test-graph {
705     flex: 1 0 calc(100% - 40px);
706 }
707
708 #test-graph h1 {
709     margin-bottom: 0;
710 }
711
712 #test-graph header {
713     position: relative;
714     width: 100%;
715 }
716
717 #test-graph header button {
718     position: absolute;
719     top: 1.5em;
720     left: 0;
721     border-width: 1px;
722     font-size: 1em;
723     padding: .5em 1em;
724 }
725
726 #test-graph-data {
727     flex: 1 1 auto;
728     align-self: stretch;
729     z-index: 1;
730 }
731
732 #test-graph nav {
733     position: absolute;
734     top: 1.5em;
735     right: 0;
736     font-size: .7em;
737     width: 28em;
738 }
739
740 #test-graph nav ul {
741     margin: 0 30px 1em 0;
742     padding: 0;
743     list-style: none;
744 }
745
746 #test-graph nav li {
747     padding: .1em 0;
748 }
749
750 #test-graph nav li > span {
751     float: right;
752 }
753
754 #test-graph nav.hide-data span {
755     display: none;
756 }
757
758 /* -------------------------------------------------------------------------- */
759 /*                           Graph Section                                    */
760 /* -------------------------------------------------------------------------- */
761
762 #test-graph-data {
763     font: 10px sans-serif;
764     color: rgb(235, 235, 235);
765 }
766
767 #test-graph-data > svg {
768     fill: none;
769     overflow: visible;
770 }
771
772 .axis path,
773 .axis line {
774     fill: none;
775     stroke: #999999;
776     shape-rendering: crispEdges;
777 }
778
779 .axis text {
780     fill: #999;
781 }
782
783 .yLeft.axis text {
784     fill: #7add49;
785 }
786 .yLeft.axis path,
787 .yLeft.axis line {
788     stroke: #7add49;
789 }
790 .yRight.axis text {
791     fill: #fa4925;
792 }
793 .yRight.axis path,
794 .yRight.axis line {
795     stroke: #fa4925;
796 }
797
798 .axis.complexity .tick line {
799     stroke: rgba(200, 200, 200, .6);
800     stroke-width: 2px;
801 }
802
803 .axis.complexity .domain,
804 .axis.complexity text {
805     stroke: transparent;
806     fill: transparent;
807 }
808
809 .marker line {
810     stroke: #5493D6;
811 }
812
813 .marker text {
814     fill: #999;
815 }
816
817 .mean.complexity line {
818     stroke: hsla(100, 69%, 58%, .8);
819     stroke-width: 2px;
820 }
821
822 .mean.complexity polygon {
823     fill: hsla(100, 69%, 58%, .05);
824 }
825
826 .target-fps {
827     stroke: rgba(250, 73, 37, .4);
828     stroke-width: 1px;
829     stroke-dasharray: 10, 10;
830 }
831
832 .mean.fps line {
833     stroke: hsla(10, 96%, 56%, .8);
834     stroke-width: 2px;
835 }
836
837 .mean.fps polygon {
838     fill: hsla(10, 96%, 56%, .1);
839 }
840
841 #regressions line {
842     stroke: rgba(200, 200, 200, .8);
843     stroke-width: 2px;
844 }
845
846 #regressions circle {
847     fill: rgba(200, 200, 200, .8);
848 }
849
850 .cursor line {
851     stroke: rgb(250, 250, 250);
852     stroke-width: 1px;
853 }
854
855 .cursor circle,
856 .cursor text {
857     fill: rgb(250, 250, 250);
858 }
859
860 #complexity path {
861     stroke: rgba(122, 221, 73, .7);
862     stroke-width: 2px;
863 }
864
865 #complexity circle {
866     fill: rgb(122, 221, 73);
867 }
868
869 #filteredFPS path {
870     stroke: hsla(30, 96%, 56%, .7);
871     stroke-width: 1px;
872 }
873
874 #filteredFPS circle {
875     fill: hsl(30, 96%, 56%);
876 }
877
878 #rawFPS path {
879     stroke: rgba(250, 73, 37, .7);
880     stroke-width: 1px;
881 }
882
883 #rawFPS circle {
884     fill: rgb(250, 73, 37);
885 }
886
887 #complexity-graph .regression line {
888     stroke: rgba(253, 253, 253, .8);
889     stroke-width: 2px;
890 }
891
892 #complexity-graph .regression circle {
893     fill: rgba(253, 253, 253, .8);
894 }
895
896 #complexity-graph .regression polygon {
897     fill: rgba(253, 253, 253, .05);
898 }
899
900 #complexity-graph .raw.series line {
901     stroke: hsl(30, 96%, 56%);
902     stroke-width: 1px;
903 }
904
905 #complexity-graph .raw.regression line {
906     stroke: rgba(30, 96%, 86%, .6);
907 }
908
909 #complexity-graph .raw.regression polygon {
910     stroke: rgba(30, 96%, 86%, .05);
911 }
912
913 #complexity-graph .average.series circle {
914     fill: hsl(170, 96%, 56%);
915 }
916
917 #complexity-graph .average.series line {
918     stroke: hsla(170, 96%, 56%, .2);
919     stroke-width: 2px;
920 }
921
922 #complexity-graph .bootstrap .bar {
923     fill: hsla(260, 56%, 66%, .4);
924 }
925
926 #complexity-graph .bootstrap .median line {
927     stroke: hsla(300, 56%, 66%, .8);
928     stroke-width: 2px;
929 }
930
931 #complexity-graph .bootstrap .median circle {
932     fill: hsla(300, 56%, 66%, .8);
933 }
934
935 #complexity-graph .bootstrap .median polygon {
936     fill: hsla(300, 56%, 66%, .05);
937 }