a052de3ab3d5b8e004b2cbca1cba8994f5163791
[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 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 .chart-pane .commits-viewer {
197     font-size: 0.8rem;
198     width: 100%;
199     table-layout: fixed;
200     border-collapse: collapse;
201 }
202
203 .chart-pane .details-table td:last-child {
204     padding-right: 1px;
205 }
206
207 .chart-pane .details-table th {
208     width: 30%;
209     text-align: right;
210     font-weight: normal;
211     padding: 0;
212 }
213
214 .chart-pane .details-table td {
215     width: 70%;
216 }
217
218 .chart-pane .details-table .bugs th {
219     font-weight: bold;
220 }
221
222 .chart-pane .details-table th:after {
223     content: " : ";
224 }
225
226 .chart-pane .details-table .status th {
227     visibility: hidden;
228 }
229
230 .chart-pane .details-table .status td {
231     font-size: 1rem;
232 }
233
234 .chart-pane .commits-viewer caption {
235     border-top: solid 1px #ccc;
236     font-weight: normal;
237     text-align: left;
238     padding: 0.2rem;
239     padding-left: 0.5rem;
240     cursor: pointer;
241 }
242
243 .chart-pane .commits-viewer caption:before {
244     display: inline-block;
245     width: 0.8rem;
246     content: "\25BE"; /* Down arrow */
247 }
248
249 .chart-pane .commits-viewer.hidden caption:before {
250     display: inline-block;
251     width: 0.8rem;
252     content: "\25B8"; /* Right arrow */
253 }
254
255 .chart-pane .commits {
256     border-bottom: solid 1px #ccc;
257     margin-bottom: 0.2rem;
258 }
259
260 .chart-pane .commits-viewer {
261     border-collapse: collapse;
262 }
263
264 .chart-pane .commits-viewer td,
265 .chart-pane .commits-viewer th {
266     word-break: break-word;
267     border-top: solid 1px #ccc;
268     padding: 0.2rem;
269 }
270
271 .chart-pane .commits-viewer th {
272     width: 20%;
273     font-weight: normal;
274 }
275
276 .chart-pane .commits-viewer td {
277     width: 60%;
278 }
279
280 .chart-pane .chart {
281     height: 100%;
282 }
283
284 .chart-pane .chart svg {
285     height: 100%;
286 }
287
288 .chart {
289     position: relative;
290     overflow: hidden;
291 }
292
293 .chart svg {
294     stroke: #666;
295     fill: #000;
296     color: #000;
297     font-size: 0.7rem;
298 }
299
300 .chart path {
301     fill: none;
302     stroke-width: 1.5px;
303 }
304
305 .chart .dot {
306     fill: #666;
307     stroke: none;
308 }
309
310 .chart path.area {
311     stroke: none;
312     fill: #ccc;
313     opacity: 0.8;
314 }
315
316 .chart path.current {
317     stroke: #999;
318 }
319
320 .chart path.baseline {
321     stroke: #f66;
322 }
323 .chart-pane .status .worse,
324 .dashboard-status .worse {
325     color: #c33;
326 }
327
328 .chart path.target {
329     stroke: #66f;
330 }
331 .chart-pane .status .better,
332 .dashboard-status .better {
333     color: #33c;
334 }
335
336 .dashboard-status .status-label {
337     margin-left: 1rem;
338 }
339
340 .chart .axis,
341 .chart .domain {
342   fill: none;
343   stroke-width: 1px;
344   stroke: #ddd;
345   color: #000;
346   shape-rendering: crispEdges;
347 }
348
349 .chart .domain {
350     stroke: none;
351 }
352
353 .chart .current-item {
354     stroke: #f93;
355     stroke-width: 2px;
356     fill: #f93;
357 }
358
359 .chart .highlight {
360     stroke: #f93;
361     stroke-width: 2px;
362     fill: none;
363 }
364
365 .chart .extent {
366     stroke: #f93;
367     stroke-width: 1px;
368     fill: #9c6;
369     fill-opacity: .125;
370     shape-rendering: crispEdges;
371 }
372
373 .chart .axis text {
374     fill: #333;
375     stroke: none;
376 }
377
378 .chart .rangeBar {
379     display: block;
380     background-color: #fc6;
381     position: absolute;
382 }