Make StyleBench compatible with run-benchmark and run-perf-tests
[WebKit-https.git] / PerformanceTests / StyleBench / resources / main.css
1 body {
2     background-color: rgb(46, 51, 55);
3     color: rgb(235, 235, 235);
4     font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
5 }
6
7 ::selection {
8     color: rgb(46, 51, 55);
9     background-color: rgb(235, 235, 235);
10 }
11
12 h1,
13 button {
14     font-family: "Futura-Medium", Futura, "Helvetica Neue", Helvetica, Verdana, sans-serif;
15 }
16
17 code {
18     font-family: Menlo, Monaco, monospace;
19     font-size: smaller;
20 }
21
22 button {
23     cursor: pointer;
24 }
25
26 hr {
27     border: 1px solid rgb(235, 235, 235);
28     width: 50%;
29     margin: 40px auto;
30 }
31
32 img {
33     -webkit-user-select: none;
34     -webkit-user-drag: none;
35 }
36
37 main {
38     display: block;
39     position: absolute;
40     width: 800px;
41     height: 600px;
42     top: 50%;
43     left: 50%;
44     margin-top: -321px;
45     margin-left: -421px;
46     padding: 15px;
47     border: 6px solid rgb(235, 235, 235);
48     border-radius: 20px;
49 }
50
51 #logo {
52     position: absolute;
53     left: -70px;
54     top: 115px;
55     width: 75px;
56     height: 406px;
57 }
58
59 h1 {
60     margin-top: 30px;
61     font-size: 40px;
62     font-weight: normal;
63     color: rgb(235, 235, 235);
64     text-align: center;
65 }
66
67 p {
68     font-size: 16px;
69     line-height: 21px;
70 }
71
72 a {
73     color: inherit;
74 }
75
76 .buttons {
77     margin-top: 30px;
78     text-align: center;
79 }
80
81 button {
82     -webkit-appearance: none;
83     border: 3px solid rgb(235, 235, 235);
84     border-radius: 10px;
85     min-width: 200px;
86     padding: 5px 20px;
87     margin: 0 40px;
88     font-size: 25px;
89     color: rgb(235, 235, 235);
90     background-color: transparent;
91
92     -webkit-user-select: none;
93 }
94
95 button:active {
96     background-color: rgb(235, 235, 235);
97     color: rgb(46, 51, 55);
98     border-color: rgb(235, 235, 235) !important;
99 }
100
101 button:focus {
102     outline: none;
103     border-color: rgb(232, 79, 79);
104 }
105
106 section {
107     display: none;
108 }
109
110 section > p {
111     margin: 10px 20px;
112 }
113
114 section.selected {
115     display: block;
116 }
117
118 #testContainer {
119     position: absolute;
120     top: 15px;
121     left: 15px;
122     width: 800px;
123     height: 600px;
124 }
125
126 section#home > p {
127     margin: 0 auto;
128     width: 70%;
129     text-align: center;
130 }
131
132 section#home > p:first-child {
133     margin-top: 160px;
134     text-align: center;
135 }
136
137 section#home > .show-about {
138     margin-top: 100px;
139 }
140
141 section#home > .buttons {
142     margin-top: 80px;
143 }
144
145 section#running > #progress {
146     position: absolute;
147     bottom: -6px;
148     left: 60px;
149     right: 60px;
150     height: 6px;
151     background-color: rgb(128, 128, 128);
152     border-left: 6px solid rgb(46, 51, 55);
153     border-right: 6px solid rgb(46, 51, 55);
154 }
155
156 section#running #progress-completed {
157     position: absolute;
158     top: 0;
159     left: 0;
160     height: 6px;
161     width: 0;
162     background-color: rgb(235, 235, 235);
163 }
164
165 section#running > #info {
166     position: absolute;
167     bottom: -25px;
168     left: 60px;
169     right: 60px;
170     height: 12px;
171     color: rgb(128, 128, 128);
172     text-align: center;
173     font-size: 12px;
174 }
175
176 section#summarized-results > #result-number,
177 section#summarized-results > #confidence-number {
178     font-family: "Futura-CondensedMedium", Futura, "Helvetica Neue", Helvetica, Verdana, sans-serif;
179 }
180
181 section#summarized-results > #result-number {
182     text-align: center;
183     font-size: 145px;
184     line-height: 145px;
185 }
186
187 section#summarized-results > #confidence-number {
188     text-align: center;
189     font-size: 36px;
190     line-height: 36px;
191     color: rgb(128, 128, 128);
192 }
193
194 section#detailed-results > table {
195     float: left;
196     width: 50%;
197 }
198
199 section#detailed-results > .arithmetic-mean {
200     clear: both;
201     padding-top: 32px;
202     text-align: center;
203 }
204
205 section#detailed-results > .arithmetic-mean > label {
206     font-weight: bold;
207     margin-right: 10px;
208     color: rgb(128, 128, 128);
209 }
210
211 section#detailed-results > .show-about {
212     margin-top: 30px;
213     text-align: center;
214 }
215
216 section#about h1 {
217     margin-top: 10px;
218     margin-bottom: 0px;
219     font-size: 25px;
220 }
221
222 section#about .note {
223     color: rgb(128, 128, 128);
224 }
225
226 table {
227     border-spacing: 0;
228     border-collapse: collapse;
229 }
230
231 th,
232 td {
233     padding: 5px;
234 }
235
236 th {
237     text-align: right;
238     color: rgb(128, 128, 128);
239 }
240
241 .gauge {
242     position: relative;
243     width: 738px;
244     height: 78px;
245     background-image: url(gauge.png);
246     background-size: 100% 100%;
247     background-repat: no-repeat;
248     margin: 0 auto;
249 }
250
251 .gauge > .window {
252     position: absolute;
253     left: 0;
254     top: 33px;
255     bottom: 0;
256     right: 0;
257     overflow: hidden;
258 }
259
260 .gauge > .window > .needle {
261     position: absolute;
262     left: 363px;
263     bottom: -88px;
264     width: 4px;
265     height: 400px;
266     background-color: rgb(247, 148, 29);
267
268     -webkit-transform: rotate(-70deg);
269     -webkit-transform-origin: 2px 400px;
270
271     -moz-transform: rotate(-70deg);
272     -moz-transform-origin: 2px 400px;
273
274     transform: rotate(-70deg);
275     transform-origin: 2px 400px;
276 }
277
278 @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi) {
279     #logo {
280         content: url(logo@2x.png); /* FIXME: This does not work in Firefox. */
281     }
282
283     .gauge {
284         background-image: url(gauge@2x.png);
285     }
286 }