New perf dashboard should compare results to baseline and target
[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.bugs-button {
54     display: inline-block;
55     position: absolute;
56     right: 1.85rem;
57     top: 0.55rem;
58 }
59
60 .chart-pane a.search-button {
61     display: inline-block;
62     position: absolute;
63     right: 0.55rem;
64     top: 0.55rem;
65 }
66
67 .search-pane, .analysis-pane {
68     position: absolute;
69     top: 1.7rem;
70     border: 1px solid #bbb;
71     padding: 0;
72     border-radius: 0.5rem;
73     display: table;
74     background: white;
75 }
76
77 .analysis-pane {
78     right: 1.3rem;
79 }
80
81 .analysis-pane table {
82     margin: 0.2rem;
83     font-size: 0.8rem;
84 }
85
86 .analysis-pane th {
87     font-weight: normal;
88 }
89
90 .search-pane {
91     right: 0rem;
92 }
93
94 .analysis-pane.hidden,
95 .search-pane.hidden {
96     display: none;
97 }
98
99 .search-pane input {
100     display: table-cell;
101     vertical-align: middle;
102     outline: none;
103     border: none;
104     border-top-right-radius: 0.5rem;
105     border-bottom-right-radius: 0.5rem;
106     padding: 0.5rem;
107     font-size: 1rem;
108     margin: 0;
109 }
110
111 .search-pane .repositories {
112     display: table-cell;
113     vertical-align: middle;
114     padding: 0 0.5rem;
115 }
116
117 .search-pane input:focus {
118     background-color: rgb(249, 242, 228);
119 }
120
121 .chart-pane .body {
122     position: relative;
123     width: 100%;
124     height: 18rem;
125 }
126 .chart-pane .svg-container {
127     width: auto;
128     height: 100%;
129 }
130 .chart-pane .svg-container {
131     margin-right: 25rem;
132 }
133
134 .selection-toolbar {
135     display: inline-block;
136     background: white;
137     border: solid 1px #d9d9d9;
138     border-radius: 0.3rem;
139     z-index: 10;
140     position: absolute;
141     margin-top: -2rem;
142     margin-left: 0.5rem;
143     white-space: nowrap;
144 }
145
146 .selection-toolbar .button {
147     display: block;
148     float: left;
149     width: 1rem;
150     height: 1rem;
151     padding: 0.2rem;
152     margin: 0;
153     border-left: solid 1px #bbb;
154 }
155
156 .selection-toolbar .button:first-child {
157     border-left: none;
158 }
159
160 .selection-toolbar .button svg {
161     stroke: #666;
162     fill: #666;
163 }
164
165 .chart-pane .details {
166     position: absolute;
167     right: 0;
168     top: 0;
169     width: 25rem;
170     height: 100%;
171     border-left: solid 1px #bbb;
172 }
173
174 .analysis-chart-pane .details {
175     overflow: scroll;
176 }
177
178 .analysis-chart-pane .details table {
179     margin: 0.5rem;
180 }
181
182 .chart-pane .overview {
183     height: 5rem;
184     border-bottom: solid 0px #eee;
185 }
186
187 .chart-pane .details-table-container {
188     position: absolute;
189     top: 5rem;
190     width: 100%;
191     height: 13rem;
192     overflow: scroll;
193 }
194
195 .chart-pane .details-table {
196     font-size: 0.8rem;
197     width: 100%;
198     table-layout: fixed;
199     border-collapse: collapse;
200 }
201
202 .chart-pane .details-table td:last-child {
203     padding-right: 1px;
204 }
205
206 .chart-pane .details-table td table {
207     border-collapse: collapse;
208 }
209
210 .chart-pane .details-table td table td {
211     word-break: break-word;
212     border-top: solid 1px #ccc;
213     border-bottom: solid 1px #ccc;
214     padding: 0.2rem;
215 }
216
217 .chart-pane .details-table td table td a {
218     text-decoration: none;
219 }
220
221 .chart-pane .details-table th {
222     width: 7rem;
223     text-align: right;
224     font-weight: normal;
225     padding: 0;
226 }
227
228 .chart-pane .details-table .bugs th {
229     font-weight: bold;
230 }
231
232 .chart-pane .details-table th:after {
233     content: " : ";
234 }
235
236 .chart-pane .details-table .status th {
237     visibility: hidden;
238 }
239
240 .chart-pane .details-table .status td {
241     font-size: 1rem;
242 }
243
244 .chart-pane .chart {
245     height: 100%;
246 }
247
248 .chart-pane .chart svg {
249     height: 100%;
250 }
251
252 .chart {
253     position: relative;
254     overflow: hidden;
255 }
256
257 .chart svg {
258     stroke: #666;
259     fill: #000;
260     color: #000;
261     font-size: 0.7rem;
262 }
263
264 .chart path {
265     fill: none;
266     stroke-width: 1.5px;
267 }
268
269 .chart .dot {
270     fill: #666;
271     stroke: none;
272 }
273
274 .chart path.area {
275     stroke: none;
276     fill: #ccc;
277     opacity: 0.8;
278 }
279
280 .chart path.current {
281     stroke: #999;
282 }
283
284 .chart path.baseline {
285     stroke: #f66;
286 }
287 .chart-pane .status .worse {
288     color: #c33;
289 }
290
291 .chart path.target {
292     stroke: #66f;
293 }
294 .chart-pane .status .better {
295     color: #33c;
296 }
297
298 .chart .axis,
299 .chart .domain {
300   fill: none;
301   stroke-width: 1px;
302   stroke: #ddd;
303   color: #000;
304   shape-rendering: crispEdges;
305 }
306
307 .chart .domain {
308     stroke: none;
309 }
310
311 .chart .current-item {
312     stroke: #f93;
313     stroke-width: 2px;
314     fill: #f93;
315 }
316
317 .chart .highlight {
318     stroke: #f93;
319     stroke-width: 2px;
320     fill: none;
321 }
322
323 .chart .extent {
324     stroke: #f93;
325     stroke-width: 1px;
326     fill: #9c6;
327     fill-opacity: .125;
328     shape-rendering: crispEdges;
329 }
330
331 .chart .axis text {
332     fill: #333;
333     stroke: none;
334 }
335
336 .chart .rangeBar {
337     display: block;
338     background-color: #fc6;
339     position: absolute;
340 }