Update Animometer design
[WebKit-https.git] / PerformanceTests / Animometer / resources / runner / animometer.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 */
282
283 #intro {
284     padding: 2em;
285     opacity: 0;
286     transition: opacity 500ms ease-in;
287 }
288
289 body.images-loaded #intro {
290     opacity: 1;
291 }
292
293 /* Running test section */
294
295 #test-container {
296     position: absolute;
297
298     width: 1200px;
299     height: 600px;
300
301     top: 50%;
302     left: 50%;
303
304     margin-left: -600px;
305     margin-top: -300px;
306 }
307
308 #test-container > iframe {
309     width: 100%;
310     height: 100%;
311
312     border: 0;
313     margin: 0;
314 }
315
316 @media screen and (max-device-width: 414px), screen and (max-device-height: 414px) and (orientation: landscape) {
317     #test-container {
318         width: 100%;
319         height: 100%;
320
321         top: 0;
322         left: 0;
323
324         margin-top: 0;
325         margin-left: 0;
326     }
327 }
328
329 @media screen and (min-device-height: 768px) and (max-device-height: 1024px) {
330     #test-container {
331         width: 900px;
332         height: 600px;
333
334         margin-left: -450px;
335         margin-top: -300px;
336     }
337 }
338
339 @media screen and (max-device-width: 1024px) and (min-device-height: 1366px) {
340     #test-container {
341         width: 1200px;
342         height: 600px;
343
344         margin-left: -600px;
345         margin-top: -300px;
346     }
347 }
348
349 @media screen and (min-width: 1800px) {
350     #test-container {
351         width: 1600px;
352         height: 800px;
353
354         margin-left: -800px;
355         margin-top: -400px;
356     }
357 }
358
359 /* Results section */
360
361 #results {
362     padding: 2em;
363 }
364
365 #results .score {
366     font-size: 5em;
367     font-weight: bold;
368     font-style: italic;
369
370     padding-left: 0.25em;
371
372     margin: 0;
373 }
374
375 #results table {
376     border-spacing: 0;
377     margin: 0;
378     padding: 0;
379     min-width: 40%;
380 }
381
382 #results table td,
383 #results table th {
384     padding: 0.25em;
385 }
386
387 #results table td.suites-separator {
388     padding: 0;
389 }
390
391 #results table tr:nth-child(even) {
392     background-color: hsla(0, 0%, 0%, 0.05);
393 }
394
395 #results #results-header,
396 #results #results-score {
397     display: inline-table;
398 }
399
400 #results #results-header td,
401 #results #results-header th {
402     text-align: right;
403     padding-right: 1em !important;
404     padding-left: 0.5em !important;
405 }
406
407 #results #results-score td,
408 #results #results-score th {
409     text-align: left;
410     padding-right: 0.5em !important;
411 }
412
413 #results #results-score td {
414     -webkit-user-select: text;
415     cursor: text;
416 }
417
418 @media screen and (min-width: 667px) {
419     #results .body .score {
420         font-style: normal;
421         padding-left: 0.1em;
422     }
423 }
424
425 #overlay {
426     position: fixed;
427
428     top: 0;
429     left: 0;
430     bottom: 0;
431     right: 0;
432
433     background: hsla(0, 0%, 100%, 0.9);
434 }
435
436 @supports (-webkit-backdrop-filter: blur(10px)) {
437     #overlay {
438         background: hsla(0, 0%, 100%, 0.7);
439         -webkit-backdrop-filter: blur(20px);
440     }
441 }
442
443 #overlay > div {
444     position: absolute;
445
446     width: 500px;
447     height: 500px;
448
449     margin-top: -250px;
450     margin-left: -250px;
451
452     top: 50%;
453     left: 50%;
454 }
455
456 #overlay > div div {
457     overflow: scroll;
458
459     -webkit-user-select: text;
460     cursor: text;
461
462     max-height: 250px;
463
464     border: 1px solid hsla(0, 0%, 0%, 0.1);
465     padding: 1em;
466 }