Ensure a good experience for ARES-6 error reporting
[WebKit-https.git] / PerformanceTests / ARES-6 / styles.css
1 html {
2     font-family: "Helvetica Neue","Helvetica",sans-serif;
3     font-size: 62.5%;
4     font-synthesis: none;
5 }
6
7 body {
8     margin: 0;
9     background-color: #2C2C3C;
10     width: 100%;
11     font-size: 1.6rem;
12     font-weight: 400;
13     line-height: 1.4;
14     color: #9B9B9B;
15     box-sizing: border-box;
16     padding: 6vw 9vw;
17 }
18
19 .swoop {
20     position: absolute;
21     top: 0;
22     left: 0;
23     bottom: 0;
24     right: 0;
25     background-image: url('swoop.svg');
26     background-repeat: no-repeat;
27     background-size: 50vw;
28     width: 0;
29     animation: wipe-in 1s ease-in 0ms forwards;
30 }
31
32 header,
33 main,
34 footer {
35     box-sizing: border-box;
36     max-width: 780px;
37     margin: 0 auto;
38 }
39
40 p a {
41     color: #E7B135;
42     text-decoration: none;
43 }
44
45 p a:hover {
46     text-decoration: underline;
47 }
48
49 header {
50     display: flex;
51     flex-wrap: wrap;
52 }
53
54 h2,
55 .indicator {
56     font-size: 5rem;
57     color: #9B9B9B;
58     font-weight: 500;
59     line-height: 1.25;
60     margin: 0;
61 }
62
63 p {
64     color: #ffffff;
65     font-size: 1.8rem;
66     margin-bottom: 3rem;
67     opacity: 0;
68     animation: fade-in 1s ease-in 200ms forwards;
69 }
70
71 .about h2 {
72     margin-top: 3rem;
73 }
74
75 .logo {
76     width: 33rem;
77     height: auto;
78     white-space: nowrap;
79     overflow: hidden;
80     margin: 1px 1rem 1px 0;
81     font-size: 0;
82
83     opacity: 0;
84     animation: scale-in 1100ms ease-out 0ms forwards;
85 }
86
87 .start {
88     flex: 1;
89     display: block;
90     position: relative;
91     background-color: transparent;
92     border: 5px solid #E7B135;
93     font-size: 2.4rem;
94     font-weight: 600;
95     text-transform: uppercase;
96     color: #E7B135;
97
98     opacity: 0;
99     animation: flicker-in 500ms ease-out 1s forwards;
100
101 }
102
103 .start.ready {
104     transition: background 0.2s ease-out, color 0.2s ease-out;
105     cursor: pointer;
106 }
107
108 .start.ready:hover {
109     background-color: #E7B135;
110     color: #2C2C3C;
111 }
112
113 .start:after {
114     content: '';
115     display: block;
116     position: absolute;
117     right: 0;
118     top: 0;
119     width: 0;
120     height: 0;
121     border-top: 3rem solid #E7B135;
122     border-right: 0 solid transparent;
123     border-bottom: 0 solid transparent;
124     border-left: 3rem solid transparent;
125 }
126
127 .start.ready .testrun {
128     opacity: 0;
129 }
130
131 .tests {
132     display: flex;
133     flex-wrap: wrap;
134     justify-content: space-around;
135 }
136
137 .test {
138     position: relative;
139     flex: 1;
140     border-bottom: 1px solid #979797;
141     margin-right: 1rem;
142     margin-bottom: 3rem;
143     opacity: 0;
144     animation: fade-in 1s ease-out 700ms forwards;
145     min-width: 40%;
146 }
147
148 .test:nth-child(odd) {
149     animation-delay: 900ms;
150 }
151
152 .overall h2,
153 .test h2 {
154     border-bottom: 1px solid #979797;
155 }
156
157 .test .running {
158     color: #ffffff;
159 }
160
161 #status {
162     line-height: 5.4rem;
163 }
164
165 .failed {
166     color: #ff5744;
167 }
168
169 #status.failed {
170     font-size: 1.5rem;
171 }
172
173 .test .failed:before {
174     content: '\2716';
175 }
176
177 .test .running:before {
178     content: '\25b8';
179 }
180
181 .score {
182     color: #E7B135;
183     margin: 1rem 0;
184     position: relative;
185 }
186
187 .score label {
188     text-transform: uppercase;
189     letter-spacing: 0.02rem;
190     font-weight: 500;
191     display: block;
192     line-height: 1;
193 }
194
195 .score .value {
196     font-size: 6.4rem;
197     font-weight: 600;
198
199     line-height: 1;
200     white-space: nowrap;
201 }
202
203 .score .units {
204     font-size: 4rem;
205     font-weight: 600;
206
207 }
208
209 .score .margin {
210     color: #9B9B9B;
211     position: absolute;
212     font-size: 2rem;
213     top: 2rem;
214     margin-left: 0.2rem;
215 }
216
217 .overall {
218     margin-bottom: 3rem;
219     opacity: 0;
220     animation: fade-in 1s ease-out 500ms forwards;
221 }
222
223 .overall .score  {
224     color: #ffffff;
225 }
226
227 .overall .margin  {
228     top: 0.5rem;
229 }
230
231 .about h2 {
232     margin-top: 3rem;
233     opacity: 0;
234     animation: fade-in 1s ease-out 500ms forwards;
235 }
236
237 .button {
238     display: inline-block;
239     position: relative;
240     border: 5px solid #E7B135;
241     padding: 1rem 3rem;
242     text-transform: uppercase;
243     font-weight: bold;
244     transition: background 0.2s ease-out, color 0.2s ease-out;
245 }
246
247 .button:hover {
248     background-color: #E7B135;
249     color: #2C2C3C;
250     text-decoration: none;
251 }
252
253 .button.return:before {
254     content: '';
255     display: block;
256     position: absolute;
257     left: 0;
258     top: 0;
259     width: 0;
260     height: 0;
261     border-top: 2rem solid #E7B135;
262     border-right: 2rem solid transparent;
263     border-bottom: 0 solid transparent;
264     border-left: 0 solid transparent;
265 }
266
267 #magic {
268     opacity: 0;
269 }
270
271 @keyframes fade-in {
272   0%   { opacity: 0; }
273   100% { opacity: 1; }
274 }
275
276 @keyframes scale-in {
277   0%   { opacity: 0; transform: scale(0.8); }
278   100% { opacity: 1; transform: scale(1); }
279 }
280
281 @keyframes flicker-in {
282   0%   { opacity: 0; }
283   30%  { opacity: 0.3; }
284   40%  { opacity: 0; }
285   50%  { opacity: 0.1; }
286   60%  { opacity: 0; }
287   70%  { opacity: 0.4; }
288   80%  { opacity: 0; }
289   100% { opacity: 1; }
290 }
291
292 @keyframes wipe-in {
293   0%   { width: 0; }
294   100%  { width: 100vw; }
295 }
296
297 @media only screen and (max-width: 784px) {
298     .logo {
299         width: 100%;
300         margin-bottom: 1rem;
301         margin: 0 0 1rem 0;
302     }
303     .start {
304         width: 100%;
305     }
306     .test {
307         flex: none;
308         width: 100%;
309     }
310     #status {
311         line-height: 4.3rem;
312     }
313     .start {
314         font-size: 2.1rem;
315     }
316     #status.failed {
317         font-size: 1.4rem;
318     }
319     p {
320         font-size: 1.6rem;
321     }
322 }
323
324 @media only screen and (max-width: 320px) {
325     #status {
326         line-height: 3.8rem;
327     }
328     .start {
329         font-size: 1.9rem;
330     }
331     #status.failed {
332         font-size: 1.1rem;
333     }
334     p {
335         font-size: 1.4rem;
336     }
337 }