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