Analysis task pages are unusable
[WebKit-https.git] / Websites / perf.webkit.org / public / v2 / chart-pane.css
1 .chart-pane {
2     border: 1px solid #bbb;
3     border-radius: 0.5rem;
4     box-shadow: rgba(0, 0, 0, 0.03) 1px 1px 0px 0px;
5     padding: 0;
6     margin-bottom: 1rem;
7     outline: none;
8     position: relative;
9 }
10 .chart-pane header {
11     background: #fff;
12     margin: 0;
13     padding: 0.5rem;
14     color: #000;
15     border-bottom: 1px solid #bbb;
16     border-top-left-radius: 0.5rem;
17     border-top-right-radius: 0.5rem;
18     position: relative;
19 }
20 .chart-pane h1 {
21     color: #333;
22     font-size: 1rem;
23     font-weight: normal;
24     line-height: 1rem;
25     margin: 0 0 0 1.5rem;
26     padding: 0;
27 }
28 .chart-pane:focus header {
29     background-color: rgba(204, 153, 51, 0.1);
30     color: #333;
31 }
32
33 .chart-pane .progress {
34     height: 100%;
35     position: relative;
36 }
37
38 .chart-pane .progress .spinner {
39     position: absolute;
40     left: 50%;
41     top: 50%;
42     margin-left: -1rem;
43     margin-top: -1rem;
44 }
45
46 .chart-pane a.close-button {
47     display: inline-block;
48     position: absolute;
49     left: 0.55rem;
50     top: 0.55rem;
51 }
52
53 .chart-pane a.stat-button {
54     display: inline-block;
55     position: absolute;
56     right: 3.15rem;
57     top: 0.55rem;
58 }
59
60 .chart-pane a.bugs-button {
61     display: inline-block;
62     position: absolute;
63     right: 1.85rem;
64     top: 0.55rem;
65 }
66
67 .chart-pane a.search-button {
68     display: inline-block;
69     position: absolute;
70     right: 0.55rem;
71     top: 0.55rem;
72 }
73
74 .popup-pane {
75     position: absolute;
76     top: 1.7rem;
77     border: 1px solid #bbb;
78     font-size: 0.8rem;
79     padding: 0.2rem;
80     border-radius: 0.5rem;
81     display: table;
82     background: white;
83 }
84
85 .popup-pane.hidden {
86     display: none;
87 }
88
89 .stat-pane {
90     right: 2.6rem;
91     padding: 0;
92 }
93
94 .stat-pane fieldset {
95     border: solid 1px #ccc;
96     border-radius: 0.5rem;
97     margin: 0.2rem;
98     padding: 0;
99 }
100
101 .stat-option {
102     margin: 0;
103     padding: 0;
104     font-size: 0.8rem;
105 }
106
107 .stat-option h1 {
108     font-size: inherit;
109     line-height: 0.8rem;
110     padding: 0.3rem 0.5rem;
111     margin: 0;
112     border-top: solid 1px #ccc;
113     border-bottom: solid 1px #ccc;
114 }
115
116 .stat-option:first-child h1 {
117     border-top: none;
118 }
119
120 .stat-option > * {
121     display: block;
122     margin: 0.1rem 0.5rem 0.1rem 1rem;
123 }
124
125 .stat-option input {
126     width: 4rem;
127 }
128
129 .stat-option p {
130     max-width: 15rem;
131 }
132
133 .analysis-pane {
134     right: 1.3rem;
135 }
136
137 .analysis-pane > * {
138     margin: 0.2rem;
139 }
140
141 .search-pane {
142     right: 0rem;
143 }
144
145 .search-pane input {
146     display: table-cell;
147     vertical-align: middle;
148     outline: none;
149     border: none;
150     border-top-right-radius: 0.5rem;
151     border-bottom-right-radius: 0.5rem;
152     padding: 0.2rem;
153     font-size: 0.8rem;
154     margin: 0;
155 }
156
157 .search-pane .repositories {
158     display: table-cell;
159     vertical-align: middle;
160     padding: 0;
161 }
162
163 .search-pane input:focus {
164     background-color: rgb(249, 242, 228);
165 }
166
167 .chart-pane .body {
168     position: relative;
169     width: 100%;
170     height: 18rem;
171 }
172 .chart-pane .svg-container {
173     width: auto;
174     height: 100%;
175 }
176 .chart-pane .svg-container {
177     margin-right: 25rem;
178 }
179
180 .selection-toolbar {
181     display: inline-block;
182     background: white;
183     border: solid 1px #d9d9d9;
184     border-radius: 0.3rem;
185     z-index: 10;
186     position: absolute;
187     margin-top: -2rem;
188     margin-left: 0.5rem;
189     white-space: nowrap;
190 }
191
192 .selection-toolbar .button {
193     display: block;
194     float: left;
195     width: 1rem;
196     height: 1rem;
197     padding: 0.2rem;
198     margin: 0;
199     border-left: solid 1px #bbb;
200 }
201
202 .selection-toolbar .button:first-child {
203     border-left: none;
204 }
205
206 .selection-toolbar .button svg {
207     stroke: #666;
208     fill: #666;
209 }
210
211 .chart-pane .details {
212     position: absolute;
213     right: 0;
214     top: 0;
215     width: 25rem;
216     height: 100%;
217     border-left: solid 1px #bbb;
218 }
219
220 .analysis-chart-pane {
221     height: 15rem;
222 }
223
224 .analysis-chart-pane .details {
225     overflow: scroll;
226 }
227
228 .analysis-chart-pane table {
229     margin: 0.5rem;
230 }
231
232 .chart-pane .overview {
233     height: 5rem;
234     border-bottom: solid 0px #eee;
235 }
236
237 .chart-pane .details-table-container {
238     position: absolute;
239     top: 5rem;
240     width: 100%;
241     height: 13rem;
242     overflow: scroll;
243 }
244 .analysis-chart-pane .details-table-container {
245     position: static;
246     height: 15rem;
247 }
248
249 .chart-pane .details-table,
250 .chart-pane .commits-viewer {
251     font-size: 0.8rem;
252     width: 100%;
253     table-layout: fixed;
254     border-collapse: collapse;
255 }
256
257 .chart-pane .details-table td:last-child {
258     padding-right: 1px;
259 }
260
261 .chart-pane .details-table th {
262     width: 30%;
263     text-align: right;
264     font-weight: normal;
265     padding: 0;
266 }
267
268 .chart-pane .details-table td {
269     width: 70%;
270 }
271
272 .chart-pane .details-table .bugs th {
273     font-weight: bold;
274 }
275
276 .chart-pane .details-table th:after {
277     content: " : ";
278 }
279
280 .chart-pane .details-table .status th {
281     visibility: hidden;
282 }
283
284 .chart-pane .details-table .status td {
285     font-size: 1rem;
286 }
287
288 .chart-pane .commits-viewer caption {
289     border-top: solid 1px #ccc;
290     font-weight: normal;
291     text-align: left;
292     padding: 0.2rem;
293     padding-left: 0.5rem;
294     cursor: pointer;
295 }
296
297 .chart-pane .commits-viewer caption:before {
298     display: inline-block;
299     width: 0.8rem;
300     content: "\25BE"; /* Down arrow */
301 }
302
303 .chart-pane .commits-viewer.hidden caption:before {
304     display: inline-block;
305     width: 0.8rem;
306     content: "\25B8"; /* Right arrow */
307 }
308
309 .chart-pane .commits {
310     border-bottom: solid 1px #ccc;
311     margin-bottom: 0.2rem;
312 }
313
314 .chart-pane .commits-viewer {
315     border-collapse: collapse;
316 }
317
318 .chart-pane .commits-viewer td,
319 .chart-pane .commits-viewer th {
320     word-break: break-word;
321     border-top: solid 1px #ccc;
322     padding: 0.2rem;
323 }
324
325 .chart-pane .commits-viewer th {
326     width: 20%;
327     font-weight: normal;
328 }
329
330 .chart-pane .commits-viewer td {
331     width: 60%;
332 }
333
334 .chart-pane .chart {
335     height: 100%;
336 }
337
338 .chart-pane .chart svg {
339     height: 100%;
340 }
341
342 .chart {
343     position: relative;
344     overflow: hidden;
345 }
346
347 .chart svg {
348     stroke: #666;
349     fill: #000;
350     color: #000;
351     font-size: 0.7rem;
352 }
353
354 .chart path {
355     fill: none;
356     stroke-width: 1.5px;
357 }
358
359 .chart .dot {
360     fill: #ccc;
361     stroke: none;
362 }
363 .chart .dot.foreground {
364     fill: #666;
365 }
366
367 .chart path.area {
368     stroke: none;
369     fill: #ccc;
370     opacity: 0.8;
371 }
372 .chart path.area.foreground {
373 }
374
375 .chart path.current {
376     stroke: #ccc;
377 }
378
379 .chart path.current.foreground {
380     stroke: #999;
381 }
382
383 .chart path.movingAverage {
384     stroke: #363;
385     fill: none;
386     opacity: 0.8;
387 }
388
389 .chart path.envelope {
390     stroke: none;
391     fill: #6c6;
392     opacity: 0.4;
393 }
394
395 .chart path.baseline {
396     stroke: #f66;
397 }
398 .chart-pane .status .worse,
399 .dashboard-status .worse {
400     color: #c33;
401 }
402
403 .chart path.target {
404     stroke: #66f;
405 }
406 .chart-pane .status .better,
407 .dashboard-status .better {
408     color: #33c;
409 }
410
411 .dashboard-status .status-label {
412     margin-left: 1rem;
413 }
414
415 .chart .axis,
416 .chart .domain {
417   fill: none;
418   stroke-width: 1px;
419   stroke: #ddd;
420   color: #000;
421   shape-rendering: crispEdges;
422 }
423
424 .chart .domain {
425     stroke: none;
426 }
427
428 .chart .current-item {
429     stroke: #f93;
430     stroke-width: 2px;
431     fill: #f93;
432 }
433
434 .chart .highlight {
435     stroke: #f93;
436     stroke-width: 2px;
437     fill: none;
438 }
439
440 .chart .extent {
441     stroke: #f93;
442     stroke-width: 1px;
443     fill: #9c6;
444     fill-opacity: .125;
445     shape-rendering: crispEdges;
446 }
447
448 .chart .axis text {
449     fill: #333;
450     stroke: none;
451 }
452
453 .chart .axis.interactive text {
454     cursor: pointer;
455 }
456
457 .chart .rangeBar {
458     display: block;
459     background-color: #fc6;
460     position: absolute;
461 }