b5470ed14079c7a4475f4b60930468be69b889ee
[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 }
353
354 #test-graph nav {
355     position: absolute;
356     top: 1.5em;
357     right: 0;
358     font-size: .8em;
359     width: 25%;
360 }
361
362 #test-graph nav ul {
363     margin: 0 30px 0 0;
364     padding: 0;
365     list-style: none;
366 }
367
368 #test-graph nav ul ul {
369     padding-left: 2em;
370 }
371
372 #test-graph nav li {
373     padding: .1em 0;
374 }
375
376 #test-graph nav li > span {
377     float: right;
378 }
379
380 #test-graph nav.hide-data span {
381     display: none;
382 }
383
384 /* -------------------------------------------------------------------------- */
385 /*                           Graph Section                                    */
386 /* -------------------------------------------------------------------------- */
387
388 #test-graph-data {
389     font: 10px sans-serif;
390     color: rgb(235, 235, 235);
391 }
392
393 #test-graph-data > svg {
394     fill: none;
395     overflow: visible;
396 }
397
398 .axis path,
399 .axis line {
400     fill: none;
401     stroke: #999999;
402     shape-rendering: crispEdges;
403 }
404
405 .sample-time {
406     stroke: #5493D6;
407 }
408
409 .left-mean {
410     stroke: #7ADD49;
411     opacity: .8;
412 }
413
414 .target-fps {
415     stroke: rgba(250, 73, 37, .4);
416     stroke-width: 1px;
417     stroke-dasharray: 10, 10;
418 }
419
420 .right-mean {
421     stroke: #FA4925;
422     opacity: .8;
423 }
424
425 #cursor line {
426     stroke: rgb(250, 250, 250);
427     stroke-width: 1px;
428 }
429
430 #cursor circle {
431     fill: rgb(250, 250, 250);
432 }
433
434 #complexity path {
435     stroke: rgba(122, 221, 73, .7);
436     stroke-width: 2px;
437 }
438
439 #complexity circle {
440     fill: rgb(122, 221, 73);
441 }
442
443 #filteredFPS path {
444     stroke: rgba(250, 73, 37, .7);
445     stroke-width: 2px;
446 }
447
448 #filteredFPS circle {
449     fill: rgb(250, 73, 37);
450 }
451
452 #rawFPS path {
453     stroke: rgba(250, 73, 37, .7);
454     stroke-width: 1px;
455 }
456
457 #rawFPS circle {
458     fill: rgb(250, 73, 37);
459 }
460
461 #intervalFPS path {
462     stroke: hsla(30, 96%, 56%, .7);
463     stroke-width: 1px;
464 }
465
466 #intervalFPS circle {
467     fill: hsl(30, 96%, 56%);
468 }