Make the size of the benchmark canvas adaptive to the screen size and screen resolution
[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 /* -------------------------------------------------------------------------- */
165 /*                              Results JSON                                  */
166 /* -------------------------------------------------------------------------- */
167
168 div.results-json {
169     width: 100%;
170     background-color: rgb(128, 128, 128);
171     color: rgb(235, 235, 235);
172     white-space: pre;
173     font-size: 12px;
174 }
175
176 /* -------------------------------------------------------------------------- */
177 /*                                 Main Layout                                */
178 /* -------------------------------------------------------------------------- */
179
180 main {
181     width: 100%;
182     height: 100%;
183     display: -ms-flexbox;
184     display: -webkit-flex;
185     display: flex;
186     -ms-flex-align: center;
187     -webkit-align-items: center;
188     -webkit-box-align: center;
189     align-items: center;
190     -webkit-justify-content: center;
191     -ms-flex-pack: center;
192     justify-content: center;
193 }
194
195 section {
196     width: 800px;
197     height: 600px;
198     display: none;
199     padding: 10px;
200     border: 6px solid rgb(235, 235, 235);
201     border-radius: 20px;
202 }
203
204 section.selected {
205     display: -ms-flexbox;
206     display: -webkit-flex;
207     display: flex;
208 }
209
210 section > header,
211 section > footer {
212     margin: 10px;
213     padding: 10px;
214     -webkit-flex: 0 1 100%;
215     -ms-flex: 0 1 100%;
216     flex: 0 1 100%;
217     max-height: 15%;
218 }
219
220 section > footer {
221     text-align: center;
222     clear: both;
223     display: -ms-flexbox;
224     display: -webkit-flex;
225     display: flex;
226     -ms-flex-align: center;
227     -webkit-align-items: center;
228     -webkit-box-align: center;
229     align-items: center;
230     -webkit-justify-content: center;
231     -ms-flex-pack: center;
232     justify-content: center;
233 }
234
235 /* -------------------------------------------------------------------------- */
236 /*                                 Home Section                               */
237 /* -------------------------------------------------------------------------- */
238
239 section#home {
240     -webkit-flex-direction: row;
241     -ms-flex-direction: row;
242     flex-direction: row;
243     -webkit-flex-wrap: wrap;
244     -ms-flex-wrap: wrap;
245     flex-wrap: wrap;
246     -webkit-align-content: center;
247     -ms-flex-line-pack: center;
248     align-content: center;
249 }
250
251 section#home > suites,
252 section#home > options {
253     padding: 10px;
254     margin: 10px;
255     height: 50%;
256 }
257
258 section#home > suites {
259     padding-left: 80px;
260     -webkit-flex: 0 1 40%;
261     -ms-flex: 0 1 40%;
262     flex: 0 1 40%;
263 }
264
265 section#home > options {
266     -webkit-flex: 1 1 auto;
267     -ms-flex: 1 1 auto;
268     flex: 1 1 auto;
269 }
270
271 section#home > options > label {
272     margin: 2em;
273     line-height: 2;
274 }
275
276 section#home > header > h2 {
277     margin: 0 auto;
278     width: 70%;
279     text-align: center;
280 }
281
282 section#home > options > label > input[type="number"] {
283    width: 50px;
284 }
285
286 /* -------------------------------------------------------------------------- */
287 /*                           Running Section                                  */
288 /* -------------------------------------------------------------------------- */
289
290 section#running {
291     position: relative;
292     -ms-flex-align: center;
293     -webkit-align-items: center;
294     -webkit-box-align: center;
295     align-items: center;
296     -webkit-justify-content: center;
297     -ms-flex-pack: center;
298     justify-content: center;
299 }
300
301 section#running > #running-test {
302     width: 100%;
303     height: 100%;
304 }
305
306 section#running > #running-test > iframe {
307     width: 100%;
308     height: 100%;
309     border: 0px none;
310 }
311
312 section#running > #progress {
313     position: absolute;
314     bottom: -6px;
315     left: 60px;
316     right: 60px;
317     height: 6px;
318     background-color: rgb(128, 128, 128);
319     border-left: 6px solid rgb(46, 51, 55);
320     border-right: 6px solid rgb(46, 51, 55);
321 }
322
323 section#running > #progress > #progress-completed {
324     position: absolute;
325     top: 0;
326     left: 0;
327     height: 6px;
328     width: 0;
329     background-color: rgb(235, 235, 235);
330 }
331
332 section#running > #record {
333     position: absolute;
334     bottom: -95px;
335     left: 0px;
336     right: 0px;
337     padding: 16px;
338 }
339
340 /* -------------------------------------------------------------------------- */
341 /*                           Results Section                                  */
342 /* -------------------------------------------------------------------------- */
343
344 section#results,
345 section#json,
346 section#test-json,
347 section#test-graph {
348     -webkit-flex-direction: row;
349     -ms-flex-direction: row;
350     flex-direction: row;
351     -webkit-flex-wrap: wrap;
352     -ms-flex-wrap: wrap;
353     flex-wrap: wrap;
354     -webkit-justify-content: space-between;
355     -ms-flex-pack: justify;
356     justify-content: space-between;
357     -webkit-align-content: space-between;
358     -ms-flex-line-pack: justify;
359     align-content: space-between;
360     -webkit-align-items: flex-start;
361     -ms-flex-align: start;
362     align-items: flex-start;
363 }
364
365 section#results > data,
366 section#json > data,
367 section#test-json > data,
368 section#test-graph > data {
369     overflow-y: scroll;
370     height: 70%;
371     -webkit-flex: 0 1 100%;
372     -ms-flex: 0 1 100%;
373     flex: 0 1 100%;
374     -webkit-align-self: stretch;
375     -ms-flex-item-align: stretch;
376     align-self: stretch;
377 }
378
379 /* -------------------------------------------------------------------------- */
380 /*                           Graph Section                                    */
381 /* -------------------------------------------------------------------------- */
382
383 section#test-graph > data {
384     font: 10px sans-serif;
385     color: rgb(235, 235, 235);
386 }
387
388 section#test-graph > data > svg {
389     fill: none;
390     shape-rendering: crispEdges;  
391 }
392
393 .axis path,
394 .axis line {
395     fill: none;
396     stroke: #999999;
397     shape-rendering: crispEdges;
398 }
399
400 .left-samples {
401     stroke: #7ADD49;
402     stroke-width: 1.5px;
403 }
404
405 .right-samples {
406     stroke: #FA4925;
407     stroke-width: 1.5px;
408 }
409
410 .sample-time {
411     stroke: #5493D6;
412 }
413
414 .left-mean {
415     stroke: #7ADD49;
416     opacity: .8;
417 }
418
419 .right-mean {
420     stroke: #FA4925;
421     opacity: .8;
422 }
423
424 /* -------------------------------------------------------------------------- */
425 /*                           JSON Section                                  */
426 /* -------------------------------------------------------------------------- */
427
428 section#json > data,
429 section#test-json > data {
430     border: 1px solid rgb(235, 235, 235);
431     box-sizing: border-box;
432 }