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