Add an option to output the results of the graphics benchmark in JSON format
[WebKit-https.git] / PerformanceTests / Animometer / runner / resources / animometer.css
1 body {
2     background-color: rgb(96, 96, 96);
3     color: rgb(235, 235, 235);
4     font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
5 }
6
7 main {
8     display: block;
9     position: absolute;
10     width: 800px;
11     height: 600px;
12     top: 50%;
13     left: 50%;
14     margin-top: -321px;
15     margin-left: -421px;
16     padding: 15px;
17     border: 6px solid rgb(235, 235, 235);
18     border-radius: 20px;
19 }
20
21 iframe {
22     width: 800px;
23     height: 600px;
24     border: 0px none;
25     position: absolute;
26 }
27
28 label, p {
29     font-size: 16px;
30     line-height: 21px;
31 }
32
33 section {
34     display: none;
35 }
36
37 section > p {
38     margin: 10px 20px;
39 }
40
41 section#home > p {
42     margin: 0 auto;
43     width: 70%;
44     text-align: center;
45 }
46
47 section#home > p:first-child {
48     margin-top: 160px;
49     text-align: center;
50 }
51
52 section.selected {
53     display: block;
54 }
55
56 #testContainer {
57     position: absolute;
58     top: 15px;
59     left: 15px;
60     width: 800px;
61     height: 600px;
62 }
63
64 section#running > #progress {
65     position: absolute;
66     bottom: -6px;
67     left: 60px;
68     right: 60px;
69     height: 6px;
70     background-color: rgb(128, 128, 128);
71     border-left: 6px solid rgb(46, 51, 55);
72     border-right: 6px solid rgb(46, 51, 55);
73 }
74
75 section#running #progress-completed {
76     position: absolute;
77     top: 0;
78     left: 0;
79     height: 6px;
80     width: 0;
81     background-color: rgb(235, 235, 235);
82 }
83
84 section#running > #record {
85     position: absolute;
86     bottom: -130px;
87     left: 0px;
88     right: 0px;
89     height: 75px;
90     color: rgb(128, 128, 128);
91     padding: 15px;
92     border: 6px solid rgb(235, 235, 235);
93     border-radius: 20px;
94 }
95
96 section#running > #record > table,
97 section#results > table {
98     width: 100%;
99 }
100
101 section#running > #record > table td, th,
102 section#results > table td, th {
103     font-size: 11px;
104     border: 1px solid #98bf21;
105     padding: 3px 4px 2px 4px;
106 }
107                                            
108 section#running > #record > table tr.alt, td
109 section#results > table tr.alt, td {
110     color: #000000;
111     background-color: #EAF2D3;
112 }
113                                              
114 section#running > #record > table th,
115 section#results > table th {
116     background-color: #A7C942; 
117     text-align: center;
118 }
119
120 section#test-json > textarea,
121 section#json > textarea {
122     width: 800px;
123     height: 460px;
124     background-color: rgb(128, 128, 128);
125     border: 1px solid rgb(235, 235, 235);
126     color: white;
127     white-space: pre;
128     overflow: scroll;
129 }
130
131 .options {
132     margin:0 auto;    
133     margin-top: 30px;
134     width: 500px;
135     align: center;
136 }
137
138 .column {
139     width: 45%;
140     float:left;
141     height: 120px;
142     padding:5px;
143 }
144
145 input[type="number"] {
146    width:50px;
147 }
148
149 .buttons {
150     margin-top: 10px;
151     text-align: center;
152     clear: both;
153 }
154
155 button {
156     -webkit-appearance: none;
157     border: 3px solid rgb(235, 235, 235);
158     border-radius: 10px;
159     min-width: 200px;
160     padding: 5px 20px;
161     margin: 0 40px;
162     font-size: 25px;
163     color: rgb(235, 235, 235);
164     background-color: transparent;
165
166     -webkit-user-select: none;
167 }
168
169 button:active {
170     background-color: rgb(235, 235, 235);
171     color: rgb(46, 51, 55);
172     border-color: rgb(235, 235, 235) !important;
173 }
174
175 button:focus {
176     outline: none;
177     border-color: rgb(232, 79, 79);
178 }
179
180 .small-button {
181     -webkit-appearance: none;
182     border: 1px solid rgb(96, 96, 96);
183     border-radius: 2px;
184     padding: 1px 4px;
185     margin: 0 4px;
186     background-color: transparent;
187     cursor: pointer;
188     text-align: center;
189     -webkit-user-select: none;
190 }
191
192 #graphContainer {
193   font: 10px sans-serif;
194   color: rgb(235, 235, 235);  
195 }
196
197 .axis path,
198 .axis line {
199   fill: none;
200   stroke: #999;
201   shape-rendering: crispEdges;
202 }
203
204 .left-samples {
205   fill: none;
206   stroke: #7ADD49;
207   stroke-width: 1.5px;
208 }
209
210 .right-samples {
211     fill: none;
212     stroke: #FA4925;
213     stroke-width: 1.5px;
214 }
215
216 .sample-time {
217     fill: none;
218     stroke: #5493D6;
219     stroke-width: 1px;
220 }
221
222 .left-mean {
223     fill: none;
224     stroke: #7ADD49;
225     stroke-width: 1px;
226     opacity: .8;
227 }
228
229 .right-mean {
230     fill: none;
231     stroke: #FA4925;
232     stroke-width: 1px;
233     opacity: .8;
234 }