8e5bf8cf9c394363cfdbd64beca8625af9f64ac5
[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 .commits-viewer {
245     width: 100%;
246 }
247
248 .chart-pane .details-table td:last-child {
249     padding-right: 1px;
250 }
251
252 .chart-pane .details-table th {
253     width: 30%;
254     text-align: right;
255     font-weight: normal;
256     padding: 0;
257 }
258
259 .chart-pane .details-table td {
260     width: 70%;
261 }
262
263 .chart-pane .details-table .bugs th {
264     font-weight: bold;
265 }
266
267 .chart-pane .details-table th:after {
268     content: " : ";
269 }
270
271 .chart-pane .details-table .status th {
272     visibility: hidden;
273 }
274
275 .chart-pane .details-table .status td {
276     font-size: 1rem;
277 }
278
279 .chart-pane .commits-viewer caption {
280     border-top: solid 1px #ccc;
281     font-weight: normal;
282     text-align: left;
283     padding: 0.2rem;
284     padding-left: 0.5rem;
285     cursor: pointer;
286 }
287
288 .chart-pane .commits-viewer caption:before,
289 .analysis-group .results .summary .config-letter:before {
290     display: inline-block;
291     width: 0.8rem;
292     content: "\25BE"; /* Down arrow */
293 }
294
295 .chart-pane .commits-viewer.hidden caption:before,
296 .analysis-group .results .hideRequests .summary .config-letter:before {
297     display: inline-block;
298     width: 0.8rem;
299     content: "\25B8"; /* Right arrow */
300 }
301
302 .chart-pane .commits {
303     border-bottom: solid 1px #ccc;
304     margin-bottom: 0.2rem;
305 }
306
307 .chart-pane .commits-viewer {
308     border-collapse: collapse;
309 }
310
311 .chart-pane .commits-viewer td,
312 .chart-pane .commits-viewer th {
313     word-break: break-word;
314     border-top: solid 1px #ccc;
315     padding: 0.2rem;
316 }
317
318 .chart-pane .commits-viewer th {
319     width: 20%;
320     font-weight: normal;
321 }
322
323 .chart-pane .commits-viewer td {
324     width: 60%;
325 }
326
327 .chart-pane .chart {
328     height: 100%;
329 }
330
331 .chart-pane .chart svg {
332     height: 100%;
333 }
334
335 .chart {
336     position: relative;
337     overflow: hidden;
338 }
339
340 .chart svg {
341     stroke: #666;
342     fill: #000;
343     color: #000;
344     font-size: 0.7rem;
345 }
346
347 .chart path {
348     fill: none;
349     stroke-width: 1.5px;
350 }
351
352 .chart .dot {
353     fill: #ccc;
354     stroke: none;
355 }
356 .chart .dot.foreground {
357     fill: #666;
358 }
359
360 .chart path.area {
361     stroke: none;
362     fill: #ccc;
363     opacity: 0.8;
364 }
365 .chart path.area.foreground {
366 }
367
368 .chart path.current {
369     stroke: #ccc;
370 }
371
372 .chart path.current.foreground {
373     stroke: #999;
374 }
375
376 .chart path.movingAverage {
377     stroke: #363;
378     fill: none;
379     opacity: 0.8;
380 }
381
382 .chart path.envelope {
383     stroke: none;
384     fill: #6c6;
385     opacity: 0.4;
386 }
387
388 .chart path.baseline {
389     stroke: #f66;
390 }
391 .chart-pane .status .worse,
392 .dashboard-status .worse {
393     color: #c33;
394 }
395
396 .chart path.target {
397     stroke: #66f;
398 }
399 .chart-pane .status .better,
400 .dashboard-status .better {
401     color: #33c;
402 }
403
404 .dashboard-status .status-label {
405     margin-left: 1rem;
406 }
407
408 .chart .axis,
409 .chart .domain {
410   fill: none;
411   stroke-width: 1px;
412   stroke: #ddd;
413   color: #000;
414   shape-rendering: crispEdges;
415 }
416
417 .chart .domain {
418     stroke: none;
419 }
420
421 .chart .current-item {
422     stroke: #f93;
423     stroke-width: 2px;
424     fill: #f93;
425 }
426
427 .chart .highlight {
428     stroke: #f93;
429     stroke-width: 2px;
430     fill: none;
431 }
432
433 .chart .extent {
434     stroke: #f93;
435     stroke-width: 1px;
436     fill: #9c6;
437     fill-opacity: .125;
438     shape-rendering: crispEdges;
439 }
440
441 .chart .axis text {
442     fill: #333;
443     stroke: none;
444 }
445
446 .chart .axis.interactive text {
447     cursor: pointer;
448 }
449
450 .chart .rangeBar {
451     display: block;
452     background-color: #fc6;
453     position: absolute;
454 }