Change ES6SampleBench into ARES-6
[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: #2C2C3C url('swoop.svg') no-repeat;
10     background-size: 50vw;
11     width: 100%;
12     font-size: 1.6rem;
13     font-weight: 400;
14     line-height: 1.4;
15     color: #9B9B9B;
16     box-sizing: border-box;
17     padding: 6vw 9vw;
18     perspective: 1000px;
19 }
20
21 header,
22 main,
23 footer {
24     box-sizing: border-box;
25     max-width: 780px;
26     margin: 0 auto;
27 }
28
29 p a {
30     color: #E7B135;
31     text-decoration: none;
32 }
33
34 p a:hover {
35     text-decoration: underline;
36 }
37
38 .flip {
39         transition: 0.6s;
40         transform-style: preserve-3d;
41
42         position: relative;
43     display: flex;
44 }
45
46 header {
47     display: flex;
48     flex-wrap: wrap;
49 }
50
51 h2,
52 .indicator {
53     font-size: 5rem;
54     color: #9B9B9B;
55     font-weight: 500;
56     line-height: 1.25;
57     margin: 0;
58 }
59
60 p {
61     color: #ffffff;
62     font-size: 1.8rem;
63     margin-bottom: 3rem;
64 }
65
66 .about h2 {
67     margin-top: 3rem;
68 }
69
70 .logo {
71     width: 33rem;
72     height: auto;
73     white-space: nowrap;
74     overflow: hidden;
75     margin: 1px 1rem 1px 0;
76     font-size: 0;
77 }
78
79 .start {
80     flex: 1;
81     display: block;
82     position: relative;
83     background-color: transparent;
84     border: 5px solid #E7B135;
85     font-size: 2.4rem;
86     line-height: 5.4rem;
87     font-weight: 600;
88     text-transform: uppercase;
89     color: #E7B135;
90 }
91
92 .start.ready {
93     transition: background 0.2s ease-out, color 0.2s ease-out;
94     cursor: pointer;
95 }
96
97 .start.ready:hover {
98     background-color: #E7B135;
99     color: #2C2C3C;
100 }
101
102 .start:after {
103     content: '';
104     display: block;  
105     position: absolute;
106     right: 0;
107     top: 0;
108     width: 0;
109     height: 0;
110     border-top: 3rem solid #E7B135;
111     border-right: 0 solid transparent;
112     border-bottom: 0 solid transparent;
113     border-left: 3rem solid transparent;
114 }
115
116 .start.ready .testrun {
117     opacity: 0;
118 }
119
120 .tests {
121     display: flex;
122     flex-wrap: wrap;
123     justify-content: space-around;
124 }
125
126 .test {
127     position: relative;
128     flex: 1;
129     border-bottom: 1px solid #979797;
130     margin-right: 1rem;
131     margin-bottom: 3rem;
132 }
133
134 .overall h2,
135 .test h2 {
136     border-bottom: 1px solid #979797;
137 }
138
139 .test .indicator {
140     color: #E7B135;
141     opacity: 0;
142     
143     position: absolute;
144     left: -1.2rem;
145 }
146
147 .test .indicator.running {
148     animation: test-running 1s;
149 }
150
151 @keyframes test-running {
152   0%   { opacity: 0; }
153   100%  { opacity: 1; }
154 }
155
156 .score {
157     color: #E7B135;
158     margin: 1rem 0;
159     position: relative;
160 }
161
162 .score label {
163     text-transform: uppercase;
164     letter-spacing: 0.02rem;
165     font-weight: 500;
166     display: block;
167     line-height: 1;
168 }
169
170 .score .value {
171     font-size: 6.4rem;
172     font-weight: 600;
173
174     line-height: 1;
175     white-space: nowrap;
176 }
177
178 .score .units {
179     font-size: 4rem;
180     font-weight: 600;
181     
182 }
183
184 .score .margin {
185     color: #9B9B9B;
186     position: absolute;
187     font-size: 2rem;
188     top: 2rem;
189     margin-left: 0.2rem;
190 }
191
192 .overall {
193     margin-bottom: 3rem;
194 }
195
196 .overall .score  {
197     color: #ffffff;
198 }
199
200 .overall .margin  {
201     top: 0.5rem;
202 }
203
204 .testing, .about {
205     background-color: #2C2C3C;
206         -webkit-backface-visibility: hidden;
207
208         position: absolute;
209         top: 0;
210         left: 0;
211 }
212
213 .testing {
214     width: 100%;
215         z-index: 2;
216         transform: rotateY(0deg);
217     padding-bottom: 10rem;
218 }
219
220 .about {
221         transform: rotateY(180deg);
222 }
223
224 #about:target {
225         transform: rotateY(180deg);
226     
227 }
228
229 @media only screen and (max-width: 784px) {
230     
231     .logo {
232         width: 100%;
233         margin-bottom: 1rem;
234         margin: 0 0 1rem 0;
235     }
236     .start {
237         width: 100%;
238     }
239     
240     .test {
241         flex: none;
242         
243         width: 100%;
244     }
245 }