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