3b0b7f2ea90855ec8b2f69ba44fb67fb391b3b65
[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 .chart-pane .overview {
175     height: 5rem;
176     border-bottom: solid 0px #eee;
177 }
178
179 .chart-pane .details-table-container {
180     position: absolute;
181     top: 5rem;
182     width: 100%;
183     height: 13rem;
184     overflow: scroll;
185 }
186
187 .chart-pane .details-table {
188     font-size: 0.8rem;
189     width: 100%;
190     table-layout: fixed;
191     border-collapse: collapse;
192 }
193
194 .chart-pane .details-table td:last-child {
195     padding-right: 1px;
196 }
197
198 .chart-pane .details-table td table {
199     border-collapse: collapse;
200 }
201
202 .chart-pane .details-table td table td {
203     word-break: break-word;
204     border-top: solid 1px #ccc;
205     padding: 0.2rem;
206 }
207
208 .chart-pane .details-table td table td a {
209     text-decoration: none;
210 }
211
212 .chart-pane .details-table th {
213     width: 7rem;
214     text-align: right;
215     font-weight: normal;
216     padding: 0;
217 }
218
219 .chart-pane .details-table .bugs th {
220     font-weight: bold;
221 }
222
223 .chart-pane .details-table th:after {
224     content: " : ";
225 }
226
227 .chart-pane .chart {
228     height: 100%;
229 }
230
231 .chart-pane .chart svg {
232     height: 100%;
233 }
234
235 .chart {
236     position: relative;
237     overflow: hidden;
238 }
239
240 .chart svg {
241     stroke: #666;
242     fill: #000;
243     color: #000;
244     font-size: 0.7rem;
245 }
246
247 .chart path {
248     fill: none;
249     stroke-width: 1.5px;
250 }
251
252 .chart .commit-time-line {
253     stroke: #999;
254 }
255
256 .chart .dot {
257     fill: #666;
258     stroke: none;
259 }
260
261 .chart .marked {
262     fill: #c33;
263 }
264
265 .chart path.area {
266     stroke: none;
267     fill: #ccc;
268     opacity: 0.8;
269 }
270
271 .chart path.area.baseline {
272     stroke: #f66;
273     fill: #fdd;
274     opacity: 0.4;
275 }
276
277 .chart path.area.target {
278     stroke: #66f;
279     fill: #ddf;
280     opacity: 0.4;
281 }
282
283 .chart .axis,
284 .chart .domain {
285   fill: none;
286   stroke-width: 1px;
287   stroke: #ddd;
288   color: #000;
289   shape-rendering: crispEdges;
290 }
291
292 .chart .domain {
293     stroke: none;
294 }
295
296 .chart .current-item {
297     stroke: #f93;
298     stroke-width: 2px;
299     fill: #f93;
300 }
301
302 .chart .highlight {
303     stroke: #39f;
304     stroke-dasharray: 4, 4;
305     stroke-width: 1px;
306     fill: none;
307 }
308
309 .chart .extent {
310     stroke: #9c6;
311     stroke-width: 1px;
312     fill: #9c6;
313     fill-opacity: .125;
314     shape-rendering: crispEdges;
315 }
316
317 .chart .axis text {
318     fill: #333;
319     stroke: none;
320 }