Add an option to make the graphics benchmark runs a specific test
[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: 600px;
135     align: center;
136 }
137
138 .options p {
139     margin-top: 0;
140 }
141
142 #suites ul {
143     list-style-type: none;
144     margin: 0;
145     padding: 0;
146 }
147
148 #suites ul ul {
149     padding-left: 1.5em;
150     display: none;
151 }
152
153 #suites ul ul input, #suites ul ul label {
154     font-size: .8em;
155 }
156
157 #suites.showTests ul ul {
158     display: block;
159 }
160
161 .column {
162     width: 55%;
163     float:left;
164 }
165
166 input[type="number"] {
167    width:50px;
168 }
169
170 .buttons {
171     margin-top: 10px;
172     text-align: center;
173     clear: both;
174 }
175
176 button {
177     -webkit-appearance: none;
178     border: 3px solid rgb(235, 235, 235);
179     border-radius: 10px;
180     min-width: 200px;
181     padding: 5px 20px;
182     margin: 0 40px;
183     font-size: 25px;
184     color: rgb(235, 235, 235);
185     background-color: transparent;
186
187     -webkit-user-select: none;
188 }
189
190 button:active {
191     background-color: rgb(235, 235, 235);
192     color: rgb(46, 51, 55);
193     border-color: rgb(235, 235, 235) !important;
194 }
195
196 button:focus {
197     outline: none;
198     border-color: rgb(232, 79, 79);
199 }
200
201 .small-button {
202     -webkit-appearance: none;
203     border: 1px solid rgb(96, 96, 96);
204     border-radius: 2px;
205     padding: 1px 4px;
206     margin: 0 4px;
207     background-color: transparent;
208     cursor: pointer;
209     text-align: center;
210     -webkit-user-select: none;
211 }
212
213 #graphContainer {
214   font: 10px sans-serif;
215   color: rgb(235, 235, 235);  
216 }
217
218 .axis path,
219 .axis line {
220   fill: none;
221   stroke: #999;
222   shape-rendering: crispEdges;
223 }
224
225 .left-samples {
226   fill: none;
227   stroke: #7ADD49;
228   stroke-width: 1.5px;
229 }
230
231 .right-samples {
232     fill: none;
233     stroke: #FA4925;
234     stroke-width: 1.5px;
235 }
236
237 .sample-time {
238     fill: none;
239     stroke: #5493D6;
240     stroke-width: 1px;
241 }
242
243 .left-mean {
244     fill: none;
245     stroke: #7ADD49;
246     stroke-width: 1px;
247     opacity: .8;
248 }
249
250 .right-mean {
251     fill: none;
252     stroke: #FA4925;
253     stroke-width: 1px;
254     opacity: .8;
255 }