cc13dbd36c21925ec725592c1c16ef087f0ad59b
[WebKit-https.git] / PerformanceTests / Animometer / resources / debug-runner / animometer.css
1 body {
2     background-color: rgb(96, 96, 96);
3     color: rgb(235, 235, 235);
4 }
5
6 h1 {
7     margin: 5vh 0;
8 }
9
10 button {
11     border: 2px solid rgb(235, 235, 235);
12     color: rgb(235, 235, 235);
13 }
14
15 button:disabled {
16     border-color: rgba(235, 235, 235, .5);
17     color: rgba(235, 235, 235, .5);
18 }
19
20 button:hover {
21     background-color: rgba(255, 255, 255, .1);
22     cursor: pointer;
23 }
24
25 button:active {
26     color: inherit;
27     background-color: rgba(255, 255, 255, .2);
28 }
29
30 @media screen and (min-width: 1800px) {
31     section {
32         width: 1600px;
33         height: 800px;
34     }
35 }
36
37 /* -------------------------------------------------------------------------- */
38 /*                               Tree                                         */
39 /* -------------------------------------------------------------------------- */
40
41 .tree {
42     padding: 0;
43     list-style-type: none;
44 }
45
46 .tree .expand-button {
47     position: absolute;
48     clip: rect(0, 0, 0, 0);
49 }
50
51 .tree .expand-button ~ ul {
52     display: none;
53 }
54
55 .tree .expand-button:checked ~ ul {
56     display: block;
57 }
58
59 .tree ul {
60     list-style-type:none;
61 }
62
63 .tree li {
64     position: relative;
65     padding: 0 0 1em 1em;
66 }
67
68 .tree ul li {
69     list-style:none;
70     padding: 1em 0 0 0em;
71 }
72
73 .tree > li:last-child {
74     padding-bottom: 0;
75 }
76
77 .tree-label {
78   position: relative;
79   display: inline-block;
80 }
81
82 label.tree-label {
83     cursor: pointer;
84 }
85
86 .tree > li > label.tree-label:before {
87     position: relative;
88     z-index: 1;
89     float: left;
90     margin: 0 0 0 -2em;
91     width: 1em;
92     height: 1em;
93     content: '\25BA';
94     text-align: center;
95     line-height: 2.5em;
96     font-size: .5em;
97 }
98
99 .tree > li > :checked ~ label.tree-label:before {
100     content: '\25BC';
101 }
102
103 .tree .link {
104     cursor: pointer;
105     color: #999;
106     font-style: italic;
107     margin-left: 2em;
108 }
109
110 @media screen and (max-device-width: 414px),
111     screen and (max-device-height: 414px) and (orientation: landscape) {
112     .tree {
113         padding-left: 1em;
114     }
115     .tree > li > label.tree-label:before {
116         font-size: 1em;
117         margin-left: -1.75em;
118         line-height: 1em;
119     }
120 }
121
122 /* -------------------------------------------------------------------------- */
123 /*                                 Intro Section                              */
124 /* -------------------------------------------------------------------------- */
125
126 #intro {
127     flex-direction: column;
128     justify-content: flex-start;
129     align-content: center;
130
131     min-height: 600px;
132     height: auto;
133 }
134
135 #intro h2 {
136     margin-top: 0;
137     font-size: 1.2em;
138 }
139
140 #intro > div:first-of-type {
141     width: 100%;
142     margin: 2em 0 0;
143     flex-direction: row;
144     display: flex;
145     align-content: flex-start;
146 }
147
148 #suites {
149     padding-left: 15vw;
150     padding-right: 3em;
151     flex: 1 1 30%;
152 }
153
154 #options {
155     flex: 10 1 auto;
156 }
157
158 #intro input[type="number"] {
159     width: 50px;
160 }
161
162 #suites input[type="number"] {
163     display: none;
164     float: right;
165 }
166
167 #suites input[type="number"].selected {
168     display: inline;
169     margin: 0;
170 }
171
172 #suites ul ul {
173     font-size: .8em;
174     margin: 0;
175     padding: 0 0 0 1em;
176 }
177
178 #suites > div {
179     margin: 3em 0;
180 }
181
182 #drop-target {
183     font-size: 1em;
184     border-radius: 10px;
185     padding: .5em 2em;
186     border: 2px solid rgb(235, 235, 235);
187     color: rgb(235, 235, 235);
188 }
189
190 #drop-target:hover {
191     background-color: rgba(255, 255, 255, .1);
192     cursor: pointer;
193 }
194
195 #options ul {
196     margin: 0;
197     padding: 0;
198     list-style: none;
199 }
200
201 #options h3 {
202     font-size: 1em;
203     font-weight: inherit;
204     margin: 0 0 .3em 0;
205     padding: 0;
206 }
207
208 #options > form > ul > li {
209     padding: 0 0 1em 0;
210 }
211
212 #options ul ul {
213     padding: 0;
214 }
215
216 #options li {
217     padding: .1em 0;
218 }
219
220 #intro > p {
221     padding: 0 5px 1em;
222     font-size: 1em;
223 }
224
225 #intro .orientation-check {
226     padding: 0 0 10vh;
227     margin-top: 0;
228 }
229
230 #intro .orientation-check p {
231     color: hsl(11, 100%, 66%);
232 }
233
234 @media screen and (min-device-width: 1800px) {
235     #intro {
236         min-height: 800px;
237     }
238 }
239
240 @media screen and (max-device-width: 414px),
241     screen and (max-device-height: 414px) and (orientation: landscape) {
242     #intro {
243         min-height: 100%;
244     }
245
246     #intro > div:first-of-type {
247         flex-direction: column;
248     }
249
250     #suites,
251     #options {
252         padding: 0 5px;
253         margin: 0;
254         flex: 0 0 auto;
255     }
256 }
257
258 /* -------------------------------------------------------------------------- */
259 /*                           Running Section                                  */
260 /* -------------------------------------------------------------------------- */
261
262 #test-container {
263     position: relative;
264 }
265
266 #running-test {
267     display: flex;
268     align-items: center;
269     justify-content: center;
270 }
271
272 #progress {
273     display: none;
274 }
275
276 .display-progress-bar #progress {
277     display: block;
278     position: fixed;
279     top: 0;
280     left: 0;
281     height: 6px;
282     width: 100%;
283     background-color: rgb(128, 128, 128);
284 }
285
286 .display-progress-bar #progress-completed {
287     position: absolute;
288     top: 0;
289     left: 0;
290     height: 6px;
291     width: 0;
292     background-color: rgb(235, 96, 32);
293 }
294
295 /* -------------------------------------------------------------------------- */
296 /*                           Results Section                                  */
297 /* -------------------------------------------------------------------------- */
298
299 #results h1, #test-graph h1 {
300     font-size: 2em;
301 }
302
303 #results button.small-button {
304     border: 1px solid rgba(235, 235, 235, .9);
305     color: rgba(235, 235, 235, .9);
306     border-radius: 2px;
307     padding: 1px 4px;
308     margin: 0 0 0 1em;
309     font-size: 9px;
310 }
311
312 #results button.small-button:active {
313     background-color: rgba(235, 235, 235, .2);
314     color: inherit;
315 }
316
317 .score {
318     font-size: 3em;
319 }
320
321 .mean {
322     margin-top: 0;
323     margin-bottom: 1em;
324     font-size: 1.5em;
325     font-weight: 400;
326 }
327
328 #results-data .average {
329     padding-left: 1em;
330     text-align: right;
331 }
332
333 #results-data .stdev {
334     text-align: left;
335     padding-left: .25em;
336 }
337
338 #results-data .left {
339     text-align: left;
340 }
341
342 #results-data .right {
343     text-align: right;
344 }
345
346 #results-data .pad-left {
347     padding-left: 1em;
348 }
349
350 #results-data .pad-right {
351     padding-right: .25em;
352 }
353
354 #results-data .small {
355     font-size: .8em;
356 }
357
358 #results-tables td.noisy-results {
359     color: rgb(255, 104, 104);
360 }
361
362 #results-tables div {
363     direction: ltr;
364     display: flex;
365     flex-direction: row;
366 }
367
368 #test-graph {
369     flex: 1 0 calc(100% - 40px);
370 }
371
372 #test-graph h1 {
373     margin-bottom: 0;
374 }
375
376 #test-graph header {
377     position: relative;
378     width: 100%;
379 }
380
381 #test-graph header button {
382     position: absolute;
383     top: 1.5em;
384     left: 0;
385     border-width: 1px;
386     font-size: 1em;
387     padding: .5em 1em;
388 }
389
390 #test-graph-data {
391     flex: 1 1 auto;
392     align-self: stretch;
393     z-index: 1;
394 }
395
396 #test-graph nav {
397     position: absolute;
398     top: 1.5em;
399     right: 0;
400     font-size: .7em;
401     width: 28em;
402 }
403
404 #test-graph nav ul {
405     margin: 0 30px 1em 0;
406     padding: 0;
407     list-style: none;
408 }
409
410 #test-graph nav li {
411     padding: .1em 0;
412 }
413
414 #test-graph nav li > span {
415     float: right;
416 }
417
418 #test-graph nav.hide-data span {
419     display: none;
420 }
421
422 /* -------------------------------------------------------------------------- */
423 /*                           Graph Section                                    */
424 /* -------------------------------------------------------------------------- */
425
426 #test-graph-data {
427     font: 10px sans-serif;
428     color: rgb(235, 235, 235);
429 }
430
431 #test-graph-data > svg {
432     fill: none;
433     overflow: visible;
434 }
435
436 .axis path,
437 .axis line {
438     fill: none;
439     stroke: #999999;
440     shape-rendering: crispEdges;
441 }
442
443 .axis text {
444     fill: #999;
445 }
446
447 .yLeft.axis text {
448     fill: #7add49;
449 }
450 .yLeft.axis path,
451 .yLeft.axis line {
452     stroke: #7add49;
453 }
454 .yRight.axis text {
455     fill: #fa4925;
456 }
457 .yRight.axis path,
458 .yRight.axis line {
459     stroke: #fa4925;
460 }
461
462 .axis.complexity .tick line {
463     stroke: rgba(200, 200, 200, .6);
464     stroke-width: 2px;
465 }
466
467 .axis.complexity .domain,
468 .axis.complexity text {
469     stroke: transparent;
470     fill: transparent;
471 }
472
473 .marker line {
474     stroke: #5493D6;
475 }
476
477 .marker text {
478     fill: #999;
479 }
480
481 .mean.complexity line {
482     stroke: hsla(100, 69%, 58%, .8);
483     stroke-width: 2px;
484 }
485
486 .mean.complexity polygon {
487     fill: hsla(100, 69%, 58%, .05);
488 }
489
490 .target-fps {
491     stroke: rgba(250, 73, 37, .4);
492     stroke-width: 1px;
493     stroke-dasharray: 10, 10;
494 }
495
496 .mean.fps line {
497     stroke: hsla(10, 96%, 56%, .8);
498     stroke-width: 2px;
499 }
500
501 .mean.fps polygon {
502     fill: hsla(10, 96%, 56%, .1);
503 }
504
505 #regressions line {
506     stroke: rgba(200, 200, 200, .8);
507     stroke-width: 2px;
508 }
509
510 #regressions circle {
511     fill: rgba(200, 200, 200, .8);
512 }
513
514 .cursor line {
515     stroke: rgb(250, 250, 250);
516     stroke-width: 1px;
517 }
518
519 .cursor circle,
520 .cursor text {
521     fill: rgb(250, 250, 250);
522 }
523
524 #complexity path {
525     stroke: rgba(122, 221, 73, .7);
526     stroke-width: 2px;
527 }
528
529 #complexity circle {
530     fill: rgb(122, 221, 73);
531 }
532
533 #filteredFPS path {
534     stroke: hsla(30, 96%, 56%, .7);
535     stroke-width: 1px;
536 }
537
538 #filteredFPS circle {
539     fill: hsl(30, 96%, 56%);
540 }
541
542 #rawFPS path {
543     stroke: rgba(250, 73, 37, .7);
544     stroke-width: 1px;
545 }
546
547 #rawFPS circle {
548     fill: rgb(250, 73, 37);
549 }
550
551 #complexity-graph .regression line {
552     stroke: rgba(253, 253, 253, .8);
553     stroke-width: 2px;
554 }
555
556 #complexity-graph .regression circle {
557     fill: rgba(253, 253, 253, .8);
558 }
559
560 #complexity-graph .regression polygon {
561     fill: rgba(253, 253, 253, .05);
562 }
563
564 #complexity-graph .raw.series line {
565     stroke: hsl(30, 96%, 56%);
566     stroke-width: 1px;
567 }
568
569 #complexity-graph .raw.regression line {
570     stroke: rgba(30, 96%, 86%, .6);
571 }
572
573 #complexity-graph .raw.regression polygon {
574     stroke: rgba(30, 96%, 86%, .05);
575 }
576
577 #complexity-graph .average.series circle {
578     fill: hsl(170, 96%, 56%);
579 }
580
581 #complexity-graph .average.series line {
582     stroke: hsla(170, 96%, 56%, .2);
583     stroke-width: 2px;
584 }
585
586 #complexity-graph .bootstrap .bar {
587     fill: hsla(260, 56%, 66%, .4);
588 }
589
590 #complexity-graph .bootstrap .median line {
591     stroke: hsla(300, 56%, 66%, .8);
592     stroke-width: 2px;
593 }
594
595 #complexity-graph .bootstrap .median circle {
596     fill: hsla(300, 56%, 66%, .8);
597 }
598
599 #complexity-graph .bootstrap .median polygon {
600     fill: hsla(300, 56%, 66%, .05);
601 }