Use the media queries to dynamically set the stage for the graphics benchmark
[WebKit-https.git] / PerformanceTests / Animometer / runner / resources / animometer.css
1 /* -------------------------------------------------------------------------- */
2 /*                                HTML and Body                               */
3 /* -------------------------------------------------------------------------- */
4
5 html,body {
6     height: 100%;
7     margin: 0px;
8     padding: 0px;
9 }
10
11 body {
12     background-color: rgb(96, 96, 96);
13     color: rgb(235, 235, 235);
14     font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
15 }
16
17 /* -------------------------------------------------------------------------- */
18 /*                              Buttons                                       */
19 /* -------------------------------------------------------------------------- */
20
21 button {
22     -webkit-appearance: none;
23     -webkit-user-select: none;
24     background-color: transparent;
25 }
26
27 button.large-button {
28     border: 3px solid rgb(235, 235, 235);
29     border-radius: 10px;
30     min-width: 200px;
31     padding: .5em 2em;
32     margin: 0 1em;
33     font-size: 25px;
34     color: rgb(235, 235, 235);
35 }
36
37 button.large-button:active {
38     background-color: rgb(235, 235, 235);
39     color: rgb(46, 51, 55);
40     border-color: rgb(235, 235, 235) !important;
41 }
42
43 button.large-button:disabled {
44     background-color: rgb(96, 96, 96);
45     color: rgb(128, 128, 128);
46 }
47
48 button.small-button {
49     border: 1px solid DarkCyan;
50     border-radius: 2px;
51     padding: 1px 4px;
52     margin: 0 4px;
53     font-size: 9px;
54     color: black;
55 }
56
57 button.small-button:active {
58     background-color: DarkCyan;
59     color: rgb(46, 51, 55);
60     border-color: DarkCyan !important;
61 }
62
63 /* -------------------------------------------------------------------------- */
64 /*                               Tree                                         */
65 /* -------------------------------------------------------------------------- */
66
67 .tree {
68     margin: 1em;
69     overflow-y: scroll;
70     height: 80%;
71 }
72
73 .tree .expand-button {
74     position: absolute;
75     clip: rect(0, 0, 0, 0);
76 }
77
78 .tree .expand-button ~ ul {
79     display: none;
80 }
81
82 .tree .expand-button:checked ~ ul {
83     display: block;
84 }
85
86 .tree ul {
87     list-style-type:none;
88 }
89
90 .tree li {
91     position: relative;
92     padding: 0 0 1em 1em;
93 }
94
95 .tree ul li {
96     list-style:none;
97     padding: 1em 0 0 0em;
98 }
99
100 .tree > li:last-child {
101     padding-bottom: 0;
102 }
103
104 .tree-label {
105   position: relative;
106   display: inline-block;
107 }
108
109 label.tree-label {
110     cursor: pointer;
111 }
112
113 label.tree-label:before {
114     background: black;
115     color: white;
116     position: relative;
117     z-index: 1;
118     float: left;
119     margin: 0 1em 0 -2.1em;
120     width: 1em;
121     height: 1em;
122     border-radius: 1em;
123     content: '+';
124     text-align: center;
125     line-height: .9em;
126 }
127
128 :checked ~ label.tree-label:before {
129     content: '\2013';
130 }
131
132 /* -------------------------------------------------------------------------- */
133 /*                              Results Table                                 */
134 /* -------------------------------------------------------------------------- */
135
136 table.results-table {
137     width: 100%;
138     border: 2px solid DarkCyan;
139     border-collapse: collapse;
140 }
141
142 .results-table th,
143 .results-table td {
144     font-size: 11px;
145     padding: 3px 4px 2px 4px;
146 }
147
148 .results-table th {
149     background: DarkCyan;
150     border-left: 1px solid LightCyan;
151     border-right: 1px solid LightCyan;
152     border-top: 1px solid LightCyan;
153 }
154
155 .results-table td {
156     background: white;
157     border-bottom: none;
158     border-left: none;
159     border-right: 1px solid DarkCyan;
160     border-top: 1px solid DarkCyan;
161     color: black;
162 }
163
164 .results-table td.noisy-results {
165     color: red;
166 }
167
168 .results-table td.suites-separator {
169     background-color: yellow;
170 }
171  
172 /* -------------------------------------------------------------------------- */
173 /*                              Results JSON                                  */
174 /* -------------------------------------------------------------------------- */
175
176 div.results-json {
177     width: 100%;
178     background-color: rgb(128, 128, 128);
179     color: rgb(235, 235, 235);
180     white-space: pre;
181     font-size: 12px;
182 }
183
184 /* -------------------------------------------------------------------------- */
185 /*                                 Main Layout                                */
186 /* -------------------------------------------------------------------------- */
187
188 main {
189     width: 100%;
190     height: 100%;
191     display: -ms-flexbox;
192     display: -webkit-flex;
193     display: flex;
194     -ms-flex-align: center;
195     -webkit-align-items: center;
196     -webkit-box-align: center;
197     align-items: center;
198     -webkit-justify-content: center;
199     -ms-flex-pack: center;
200     justify-content: center;
201 }
202
203 section {
204     width: 800px;
205     height: 600px;
206     display: none;
207     padding: 10px;
208     border: 6px solid rgb(235, 235, 235);
209     border-radius: 20px;
210 }
211
212 section.selected {
213     display: -ms-flexbox;
214     display: -webkit-flex;
215     display: flex;
216 }
217
218 section > header,
219 section > footer {
220     margin: 10px;
221     padding: 10px;
222     -webkit-flex: 0 1 100%;
223     -ms-flex: 0 1 100%;
224     flex: 0 1 100%;
225     max-height: 15%;
226 }
227
228 section > footer {
229     text-align: center;
230     clear: both;
231     display: -ms-flexbox;
232     display: -webkit-flex;
233     display: flex;
234     -ms-flex-align: center;
235     -webkit-align-items: center;
236     -webkit-box-align: center;
237     align-items: center;
238     -webkit-justify-content: center;
239     -ms-flex-pack: center;
240     justify-content: center;
241 }
242
243 @media screen and (min-device-width: 1800px) {
244     section {
245         width: 1600px;
246         height: 800px;
247     }
248 }
249
250 /* -------------------------------------------------------------------------- */
251 /*                                 Home Section                               */
252 /* -------------------------------------------------------------------------- */
253
254 section#home {
255     -webkit-flex-direction: row;
256     -ms-flex-direction: row;
257     flex-direction: row;
258     -webkit-flex-wrap: wrap;
259     -ms-flex-wrap: wrap;
260     flex-wrap: wrap;
261     -webkit-align-content: center;
262     -ms-flex-line-pack: center;
263     align-content: center;
264 }
265
266 section#home > suites,
267 section#home > options {
268     padding: 10px;
269     margin: 10px;
270     height: 50%;
271 }
272
273 section#home > suites {
274     padding-left: 80px;
275     -webkit-flex: 0 1 40%;
276     -ms-flex: 0 1 40%;
277     flex: 0 1 40%;
278 }
279
280 section#home > options {
281     -webkit-flex: 1 1 auto;
282     -ms-flex: 1 1 auto;
283     flex: 1 1 auto;
284 }
285
286 section#home > options > label {
287     margin: 2em;
288     line-height: 2;
289 }
290
291 section#home > header > h2 {
292     margin: 0 auto;
293     width: 70%;
294     text-align: center;
295 }
296
297 section#home input[type="number"] {
298     width: 70px;
299 }
300  
301 section#home > suites input[type="number"] {
302     display: none;
303     float: right;
304 }
305
306 section#home > suites input[type="number"].selected {
307     display: inline;
308 }
309
310 /* -------------------------------------------------------------------------- */
311 /*                           Running Section                                  */
312 /* -------------------------------------------------------------------------- */
313
314 section#running {
315     position: relative;
316     -ms-flex-align: center;
317     -webkit-align-items: center;
318     -webkit-box-align: center;
319     align-items: center;
320     -webkit-justify-content: center;
321     -ms-flex-pack: center;
322     justify-content: center;
323 }
324
325 section#running > #running-test {
326     width: 100%;
327     height: 100%;
328 }
329
330 section#running > #running-test > iframe {
331     width: 100%;
332     height: 100%;
333     border: 0px none;
334 }
335
336 section#running > #progress {
337     position: absolute;
338     bottom: -6px;
339     left: 60px;
340     right: 60px;
341     height: 6px;
342     background-color: rgb(128, 128, 128);
343     border-left: 6px solid rgb(46, 51, 55);
344     border-right: 6px solid rgb(46, 51, 55);
345 }
346
347 section#running > #progress > #progress-completed {
348     position: absolute;
349     top: 0;
350     left: 0;
351     height: 6px;
352     width: 0;
353     background-color: rgb(235, 235, 235);
354 }
355
356 section#running > #record {
357     position: absolute;
358     bottom: -95px;
359     left: 0px;
360     right: 0px;
361     padding: 16px;
362 }
363
364 /* -------------------------------------------------------------------------- */
365 /*                           Results Section                                  */
366 /* -------------------------------------------------------------------------- */
367
368 section#results,
369 section#json,
370 section#test-json,
371 section#test-graph {
372     -webkit-flex-direction: row;
373     -ms-flex-direction: row;
374     flex-direction: row;
375     -webkit-flex-wrap: wrap;
376     -ms-flex-wrap: wrap;
377     flex-wrap: wrap;
378     -webkit-justify-content: space-between;
379     -ms-flex-pack: justify;
380     justify-content: space-between;
381     -webkit-align-content: space-between;
382     -ms-flex-line-pack: justify;
383     align-content: space-between;
384     -webkit-align-items: flex-start;
385     -ms-flex-align: start;
386     align-items: flex-start;
387 }
388
389 section#results > data,
390 section#json > data,
391 section#test-json > data,
392 section#test-graph > data {
393     overflow-y: scroll;
394     height: 70%;
395     -webkit-flex: 0 1 100%;
396     -ms-flex: 0 1 100%;
397     flex: 0 1 100%;
398     -webkit-align-self: stretch;
399     -ms-flex-item-align: stretch;
400     align-self: stretch;
401 }
402
403 /* -------------------------------------------------------------------------- */
404 /*                           Graph Section                                    */
405 /* -------------------------------------------------------------------------- */
406
407 section#test-graph > data {
408     font: 10px sans-serif;
409     color: rgb(235, 235, 235);
410 }
411
412 section#test-graph > data > svg {
413     fill: none;
414     shape-rendering: crispEdges;  
415 }
416
417 .axis path,
418 .axis line {
419     fill: none;
420     stroke: #999999;
421     shape-rendering: crispEdges;
422 }
423
424 .left-samples {
425     stroke: #7ADD49;
426     stroke-width: 1.5px;
427 }
428
429 .right-samples {
430     stroke: #FA4925;
431     stroke-width: 1.5px;
432 }
433
434 .sample-time {
435     stroke: #5493D6;
436 }
437
438 .left-mean {
439     stroke: #7ADD49;
440     opacity: .8;
441 }
442
443 .right-mean {
444     stroke: #FA4925;
445     opacity: .8;
446 }
447
448 /* -------------------------------------------------------------------------- */
449 /*                           JSON Section                                  */
450 /* -------------------------------------------------------------------------- */
451
452 section#json > data,
453 section#test-json > data {
454     border: 1px solid rgb(235, 235, 235);
455     box-sizing: border-box;
456 }