65c0a9133f1e89b5f4e1765ce6ae6c8ed5a7e1a1
[WebKit-https.git] / PerformanceTests / Animometer / resources / 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 }