Introduce the concept of analysis task to perf dashboard
[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, .bugs-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 .bugs-pane {
78     right: 1.3rem;
79 }
80
81 .bugs-pane table {
82     margin: 0.2rem;
83     font-size: 0.8rem;
84 }
85
86 .bugs-pane th {
87     font-weight: normal;
88 }
89
90 .search-pane {
91     right: 0rem;
92 }
93
94 .bugs-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     padding: 0.2rem;
214 }
215
216 .chart-pane .details-table td table td a {
217     text-decoration: none;
218 }
219
220 .chart-pane .details-table th {
221     width: 7rem;
222     text-align: right;
223     font-weight: normal;
224     padding: 0;
225 }
226
227 .chart-pane .details-table .bugs th {
228     font-weight: bold;
229 }
230
231 .chart-pane .details-table th:after {
232     content: " : ";
233 }
234
235 .chart-pane .chart {
236     height: 100%;
237 }
238
239 .chart-pane .chart svg {
240     height: 100%;
241 }
242
243 .chart {
244     position: relative;
245     overflow: hidden;
246 }
247
248 .chart svg {
249     stroke: #666;
250     fill: #000;
251     color: #000;
252     font-size: 0.7rem;
253 }
254
255 .chart path {
256     fill: none;
257     stroke-width: 1.5px;
258 }
259
260 .chart .commit-time-line {
261     stroke: #999;
262 }
263
264 .chart .dot {
265     fill: #666;
266     stroke: none;
267 }
268
269 .chart .marked {
270     fill: #c33;
271 }
272
273 .chart path.area {
274     stroke: none;
275     fill: #ccc;
276     opacity: 0.8;
277 }
278
279 .chart path.area.baseline {
280     stroke: #f66;
281     fill: #fdd;
282     opacity: 0.4;
283 }
284
285 .chart path.area.target {
286     stroke: #66f;
287     fill: #ddf;
288     opacity: 0.4;
289 }
290
291 .chart .axis,
292 .chart .domain {
293   fill: none;
294   stroke-width: 1px;
295   stroke: #ddd;
296   color: #000;
297   shape-rendering: crispEdges;
298 }
299
300 .chart .domain {
301     stroke: none;
302 }
303
304 .chart .current-item {
305     stroke: #f93;
306     stroke-width: 2px;
307     fill: #f93;
308 }
309
310 .chart .highlight {
311     stroke: #39f;
312     stroke-dasharray: 4, 4;
313     stroke-width: 1px;
314     fill: none;
315 }
316
317 .chart .extent {
318     stroke: #9c6;
319     stroke-width: 1px;
320     fill: #9c6;
321     fill-opacity: .125;
322     shape-rendering: crispEdges;
323 }
324
325 .chart .axis text {
326     fill: #333;
327     stroke: none;
328 }