3c6c91d129e25d5d074f4d72146f59122dcc8e3f
[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 /* -------------------------------------------------------------------------- */
244 /*                                 Home Section                               */
245 /* -------------------------------------------------------------------------- */
246
247 section#home {
248     -webkit-flex-direction: row;
249     -ms-flex-direction: row;
250     flex-direction: row;
251     -webkit-flex-wrap: wrap;
252     -ms-flex-wrap: wrap;
253     flex-wrap: wrap;
254     -webkit-align-content: center;
255     -ms-flex-line-pack: center;
256     align-content: center;
257 }
258
259 section#home > suites,
260 section#home > options {
261     padding: 10px;
262     margin: 10px;
263     height: 50%;
264 }
265
266 section#home > suites {
267     padding-left: 80px;
268     -webkit-flex: 0 1 40%;
269     -ms-flex: 0 1 40%;
270     flex: 0 1 40%;
271 }
272
273 section#home > options {
274     -webkit-flex: 1 1 auto;
275     -ms-flex: 1 1 auto;
276     flex: 1 1 auto;
277 }
278
279 section#home > options > label {
280     margin: 2em;
281     line-height: 2;
282 }
283
284 section#home > header > h2 {
285     margin: 0 auto;
286     width: 70%;
287     text-align: center;
288 }
289
290 section#home input[type="number"] {
291     width: 70px;
292 }
293  
294 section#home > suites input[type="number"] {
295     display: none;
296     float: right;
297 }
298
299 section#home > suites input[type="number"].selected {
300     display: inline;
301 }
302
303 /* -------------------------------------------------------------------------- */
304 /*                           Running Section                                  */
305 /* -------------------------------------------------------------------------- */
306
307 section#running {
308     position: relative;
309     -ms-flex-align: center;
310     -webkit-align-items: center;
311     -webkit-box-align: center;
312     align-items: center;
313     -webkit-justify-content: center;
314     -ms-flex-pack: center;
315     justify-content: center;
316 }
317
318 section#running > #running-test {
319     width: 100%;
320     height: 100%;
321 }
322
323 section#running > #running-test > iframe {
324     width: 100%;
325     height: 100%;
326     border: 0px none;
327 }
328
329 section#running > #progress {
330     position: absolute;
331     bottom: -6px;
332     left: 60px;
333     right: 60px;
334     height: 6px;
335     background-color: rgb(128, 128, 128);
336     border-left: 6px solid rgb(46, 51, 55);
337     border-right: 6px solid rgb(46, 51, 55);
338 }
339
340 section#running > #progress > #progress-completed {
341     position: absolute;
342     top: 0;
343     left: 0;
344     height: 6px;
345     width: 0;
346     background-color: rgb(235, 235, 235);
347 }
348
349 section#running > #record {
350     position: absolute;
351     bottom: -95px;
352     left: 0px;
353     right: 0px;
354     padding: 16px;
355 }
356
357 /* -------------------------------------------------------------------------- */
358 /*                           Results Section                                  */
359 /* -------------------------------------------------------------------------- */
360
361 section#results,
362 section#json,
363 section#test-json,
364 section#test-graph {
365     -webkit-flex-direction: row;
366     -ms-flex-direction: row;
367     flex-direction: row;
368     -webkit-flex-wrap: wrap;
369     -ms-flex-wrap: wrap;
370     flex-wrap: wrap;
371     -webkit-justify-content: space-between;
372     -ms-flex-pack: justify;
373     justify-content: space-between;
374     -webkit-align-content: space-between;
375     -ms-flex-line-pack: justify;
376     align-content: space-between;
377     -webkit-align-items: flex-start;
378     -ms-flex-align: start;
379     align-items: flex-start;
380 }
381
382 section#results > data,
383 section#json > data,
384 section#test-json > data,
385 section#test-graph > data {
386     overflow-y: scroll;
387     height: 70%;
388     -webkit-flex: 0 1 100%;
389     -ms-flex: 0 1 100%;
390     flex: 0 1 100%;
391     -webkit-align-self: stretch;
392     -ms-flex-item-align: stretch;
393     align-self: stretch;
394 }
395
396 /* -------------------------------------------------------------------------- */
397 /*                           Graph Section                                    */
398 /* -------------------------------------------------------------------------- */
399
400 section#test-graph > data {
401     font: 10px sans-serif;
402     color: rgb(235, 235, 235);
403 }
404
405 section#test-graph > data > svg {
406     fill: none;
407     shape-rendering: crispEdges;  
408 }
409
410 .axis path,
411 .axis line {
412     fill: none;
413     stroke: #999999;
414     shape-rendering: crispEdges;
415 }
416
417 .left-samples {
418     stroke: #7ADD49;
419     stroke-width: 1.5px;
420 }
421
422 .right-samples {
423     stroke: #FA4925;
424     stroke-width: 1.5px;
425 }
426
427 .sample-time {
428     stroke: #5493D6;
429 }
430
431 .left-mean {
432     stroke: #7ADD49;
433     opacity: .8;
434 }
435
436 .right-mean {
437     stroke: #FA4925;
438     opacity: .8;
439 }
440
441 /* -------------------------------------------------------------------------- */
442 /*                           JSON Section                                  */
443 /* -------------------------------------------------------------------------- */
444
445 section#json > data,
446 section#test-json > data {
447     border: 1px solid rgb(235, 235, 235);
448     box-sizing: border-box;
449 }