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