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