Add about page for MotionMark
[WebKit-https.git] / PerformanceTests / MotionMark / resources / runner / motionmark.css
1 /* Outer harness */
2
3 html,
4 body {
5     min-height: 100%;
6 }
7
8 body {
9     background-color: hsl(0, 0%, 95%);
10
11     font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
12     font-size: 15px;
13
14     cursor: default;
15
16     -webkit-user-select: none;
17 }
18
19 body.showing-intro,
20 body.showing-results {
21     background-color: hsl(35, 100%, 100%);
22     background-image: url(crystal.svg), url(lines.svg);
23     background-size: auto 225%, auto 100%;
24     background-repeat: no-repeat;
25
26     animation: background-fade 1s ease-in 1s, background-color 60s linear infinite 2s;
27     animation-play-state: paused;
28
29     will-change: background-color;
30 }
31
32 body.showing-test-container {
33     overflow: hidden;
34 }
35
36 body.images-loaded {
37     animation-play-state: running;
38 }
39
40 @media screen and (min-width: 667px) {
41     body {
42         font-size: 24px;
43     }
44
45     body.showing-intro,
46     body.showing-results {
47         background-size: 200% 100%, 150% auto;
48     }
49 }
50
51 @media screen and (min-width: 1025px) {
52     body.showing-intro,
53     body.showing-results {
54         background-size: 150% 100%, 150% auto;
55     }
56 }
57
58 ::selection {
59     background-color: black;
60     color: white;
61 }
62
63 .hidden {
64     display: none;
65 }
66
67 section {
68     display: none;
69 }
70
71 section.selected {
72     display: block;
73 }
74
75 svg.logo {
76     width: 350px;
77     height: 88px;
78
79     max-width: 100%;
80
81     padding-bottom: 1em;
82
83     color: hsl(35, 100%, 50%);
84
85     animation: foreground-color 60s linear infinite 2s;
86     animation-play-state: paused;
87
88     will-change: color;
89 }
90
91 body.images-loaded svg.logo {
92     animation-play-state: running;
93 }
94
95 @media screen and (min-width: 667px) {
96     svg.logo {
97         width: 525px;
98         height: 130px;
99     }
100 }
101
102 section .body {
103     margin: 0 1em;
104     max-width: 350px;
105 }
106
107 section .body p {
108     margin: 1em 0;
109     line-height: 1.5em;
110
111     -webkit-user-select: text;
112     cursor: text;
113 }
114
115 @media screen and (min-width: 667px) {
116     section .body {
117         margin-left: 2.5em;
118         max-width: 500px;
119         transform: skewX(-10deg);
120     }
121
122     section button {
123         transform: none;
124     }
125 }
126
127 button {
128     background-color: hsl(35, 100%, 50%);
129     color: white;
130
131     padding: 0.25em;
132     margin: 1.5em -0.25em 0 0;
133
134     min-width: 50%;
135
136     border: none;
137
138     font-family: inherit;
139     font-size: inherit;
140
141     transform: skewX(-10deg);
142
143     transition: 100ms filter ease-in-out;
144
145     animation: background-color 60s linear infinite 2s;
146     animation-play-state: paused;
147
148     will-change: background-color;
149 }
150
151 body.images-loaded button {
152     animation-play-state: running;
153 }
154
155 button:hover {
156     filter: brightness(115%);
157 }
158
159 button:active {
160     filter: brightness(130%);
161 }
162
163 button:disabled {
164     opacity: 0.5;
165     filter: none !important;
166 }
167
168 @media print {
169     button {
170         display: none;
171     }
172 }
173
174 .portrait-orientation-check {
175     display: none;
176 }
177
178 @media screen and (max-device-width: 1025px) and (orientation: portrait) {
179     .portrait-orientation-check {
180         display: block;
181     }
182 }
183
184 @media screen and (max-device-width: 1025px) and (orientation: portrait) {
185     .landscape-orientation-check {
186         /* This keeps the button color animation in sync with page, while display: none does not. */
187         visibility: hidden;
188     }
189 }
190
191 @keyframes background-fade {
192     100% {
193         background-color: hsl(35, 100%, 50%);
194     }
195 }
196
197 @keyframes background-color {
198     0%, 10% {
199         background-color: hsl(35, 100%, 50%);
200     }
201
202     12%, 20% {
203         background-color: hsl(75, 100%, 30%);
204     }
205
206     22%, 30% {
207         background-color: hsl(115, 100%, 30%);
208     }
209
210     32%, 40% {
211         background-color: hsl(155, 100%, 30%);
212     }
213
214     42%, 50% {
215         background-color: hsl(195, 100%, 30%);
216     }
217
218     52%, 60% {
219         background-color: hsl(235, 100%, 30%);
220     }
221
222     62%, 70% {
223         background-color: hsl(275, 100%, 30%);
224     }
225
226     72%, 80% {
227         background-color: hsl(315, 100%, 30%);
228     }
229
230     82%, 90% {
231         background-color: hsl(355, 100%, 30%);
232     }
233
234     92%, 100% {
235         background-color: hsl(395, 100%, 50%);
236     }
237 }
238
239 @keyframes foreground-color {
240     0%, 10% {
241         color: hsl(35, 100%, 50%);
242     }
243
244     12%, 20% {
245         color: hsl(75, 100%, 30%);
246     }
247
248     22%, 30% {
249         color: hsl(115, 100%, 30%);
250     }
251
252     32%, 40% {
253         color: hsl(155, 100%, 30%);
254     }
255
256     42%, 50% {
257         color: hsl(195, 100%, 30%);
258     }
259
260     52%, 60% {
261         color: hsl(235, 100%, 30%);
262     }
263
264     62%, 70% {
265         color: hsl(275, 100%, 30%);
266     }
267
268     72%, 80% {
269         color: hsl(315, 100%, 30%);
270     }
271
272     82%, 90% {
273         color: hsl(355, 100%, 30%);
274     }
275
276     92%, 100% {
277         color: hsl(395, 100%, 50%);
278     }
279 }
280
281 /* Intro section, About page */
282
283 #intro, #about {
284     padding: 2em;
285 }
286
287 #intro {
288     opacity: 0;
289     transition: opacity 500ms ease-in;
290 }
291
292 body.images-loaded #intro {
293     opacity: 1;
294 }
295
296 #about .body {
297     transform: none;
298     margin: 0;
299     max-width: initial;
300 }
301
302 #about li {
303     line-height: 1.5em;
304 }
305
306 #about button {
307     padding: .75em 2em;
308     margin: 1.5em auto 0;
309     min-width: initial;
310     transform: skewX(-10deg);
311 }
312
313 @media screen and (min-width: 667px) {
314     #about .body {
315         font-size: .7em;
316         margin: 1em;
317     }
318
319     #about ol, #about ul {
320         padding-left: 3em;
321     }
322 }
323
324
325 #intro a, #about a,
326 #intro a:visited, #about a:visited {
327     color: black;
328 }
329
330 /* Running test section */
331
332 .frame-container {
333     position: absolute;
334
335     top: 50%;
336     left: 50%;
337 }
338
339 .frame-container > iframe {
340     width: 100%;
341     height: 100%;
342
343     border: 0;
344     margin: 0;
345 }
346
347 body.small .frame-container {
348     width: 568px;
349     height: 320px;
350     margin-left: -284px;
351     margin-top: -160px;
352 }
353
354 body.medium .frame-container {
355     width: 900px;
356     height: 600px;
357     margin-left: -450px;
358     margin-top: -300px;
359 }
360
361 body.large .frame-container {
362     width: 1600px;
363     height: 800px;
364     margin-left: -800px;
365     margin-top: -400px;
366 }
367
368 /* Results section */
369
370 #results {
371     padding: 2em;
372 }
373
374 #results .body {
375     -webkit-user-select: text;
376 }
377
378 #results .score-container {
379     padding-bottom: 2em;
380 }
381
382 #results .table-container {
383     position: relative;
384 }
385
386 #results .table-container > div {
387     margin-left: 40%;
388 }
389
390 #results .score {
391     font-size: 5em;
392     font-weight: bold;
393     font-style: italic;
394     line-height: 1;
395     margin: 0;
396 }
397
398 #results .confidence {
399     font-size: 2em;
400     font-style: italic;
401     line-height: 1;
402     margin: 0;
403     text-indent: 1.75em;
404     color: hsl(0, 0%, 40%);
405     padding-bottom: .3em;
406 }
407
408 #results table {
409     border-spacing: 0;
410     margin: 0;
411     padding: 0;
412     min-width: 25%;
413 }
414
415 #results table td,
416 #results table th {
417     padding: 0.25em;
418 }
419
420 #results table td.suites-separator {
421     padding: 0;
422 }
423
424 #results table tr:nth-child(even) {
425     background-color: hsla(0, 0%, 0%, 0.05);
426 }
427
428 #results #results-header {
429     top: 0;
430     left: 0;
431     width: 40%;
432     position: absolute;
433 }
434
435 #results #results-score {
436     float: left;
437 }
438
439 #results #results-data span {
440     font-size: .75em;
441     color: hsl(0, 0%, 40%);
442 }
443
444 #results #results-header td,
445 #results #results-header th {
446     text-align: right;
447     padding-right: 1em !important;
448     padding-left: 0.5em !important;
449 }
450
451 #results #results-score td,
452 #results #results-score th {
453     text-align: left;
454     padding-right: 0.5em !important;
455 }
456
457 #results #results-score td {
458     cursor: text;
459 }
460
461 @media screen and (min-width: 667px) {
462     #results .score,
463     #results .confidence {
464         font-style: normal;
465     }
466 }
467
468 .detail span {
469     display: none;
470 }
471
472 body.small .detail .small,
473 body.medium .detail .medium,
474 body.large .detail .large {
475     display: initial;
476 }
477
478 #overlay {
479     position: fixed;
480
481     top: 0;
482     left: 0;
483     bottom: 0;
484     right: 0;
485
486     background: hsla(0, 0%, 100%, 0.9);
487 }
488
489 @supports (-webkit-backdrop-filter: blur(10px)) {
490     #overlay {
491         background: hsla(0, 0%, 100%, 0.7);
492         -webkit-backdrop-filter: blur(20px);
493     }
494 }
495
496 #overlay > div {
497     position: absolute;
498
499     width: 500px;
500     height: 500px;
501
502     margin-top: -250px;
503     margin-left: -250px;
504
505     top: 50%;
506     left: 50%;
507 }
508
509 #overlay > div div {
510     overflow: scroll;
511
512     font-size: 12px;
513     -webkit-user-select: text;
514     cursor: text;
515
516     max-height: 250px;
517
518     border: 1px solid hsla(0, 0%, 0%, 0.1);
519     padding: 1em;
520 }