Add v2 UI for the 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 }
9 .chart-pane header {
10     background: #fff;
11     margin: 0;
12     padding: 0.5rem;
13     color: #000;
14     border-bottom: 1px solid #bbb;
15     border-top-left-radius: 0.5rem;
16     border-top-right-radius: 0.5rem;
17     position: relative;
18 }
19 .chart-pane h1 {
20     color: #333;
21     font-size: 1rem;
22     font-weight: normal;
23     line-height: 1rem;
24     margin: 0 0 0 1.5rem;
25     padding: 0;
26 }
27 .chart-pane:focus header {
28     background-color: rgba(204, 153, 51, 0.1);
29     color: #333;
30 }
31
32 .chart-pane .progress {
33     height: 100%;
34     position: relative;
35 }
36
37 .chart-pane .progress .spinner {
38     position: absolute;
39     left: 50%;
40     top: 50%;
41     margin-left: -1rem;
42     margin-top: -1rem;
43 }
44
45 .chart-pane a.close-button {
46     display: inline-block;
47     position: absolute;
48     left: 0.55rem;
49     top: 0.55rem;
50 }
51
52 .chart-pane .body {
53     position: relative;
54     width: 100%;
55     height: 18rem;
56 }
57 .chart-pane .svg-container {
58     width: auto;
59     height: 100%;
60 }
61 .chart-pane .svg-container {
62     margin-right: 25rem;
63 }
64
65 .selection-toolbar {
66     display: inline-block;
67     background: white;
68     border: solid 1px #d9d9d9;
69     border-radius: 0.3rem;
70     z-index: 10;
71     position: absolute;
72     margin-top: -2rem;
73     margin-left: 0.5rem;
74     white-space: nowrap;
75 }
76
77 .selection-toolbar .button {
78     display: block;
79     float: left;
80     width: 1rem;
81     height: 1rem;
82     padding: 0.2rem;
83     margin: 0;
84     border-left: solid 1px #bbb;
85 }
86
87 .selection-toolbar .button:first-child {
88     border-left: none;
89 }
90
91 .selection-toolbar .button svg {
92     stroke: #666;
93     fill: #666;
94 }
95
96 .chart-pane .details {
97     position: absolute;
98     right: 0;
99     top: 0;
100     width: 25rem;
101     height: 100%;
102     border-left: solid 1px #bbb;
103 }
104
105 .chart-pane .overview {
106     height: 5rem;
107     border-bottom: solid 0px #eee;
108 }
109
110 .chart-pane .details-table-container {
111     position: absolute;
112     top: 5rem;
113     width: 100%;
114     height: 13rem;
115     overflow: scroll;
116 }
117
118 .chart-pane .details-table {
119     font-size: 0.8rem;
120     width: 100%;
121     table-layout: fixed;
122     border-collapse: collapse;
123 }
124
125 .chart-pane .details-table td:last-child {
126     padding-right: 1px;
127 }
128
129 .chart-pane .details-table td table {
130     border-collapse: collapse;
131 }
132
133 .chart-pane .details-table td table td {
134     word-break: break-word;
135     border-top: solid 1px #ccc;
136     padding: 0.2rem;
137 }
138
139 .chart-pane .details-table td table td a {
140     text-decoration: none;
141 }
142
143 .chart-pane .details-table th {
144     width: 4rem;
145     text-align: right;
146     font-weight: normal;
147     padding: 0;
148 }
149
150 .chart-pane .details-table th:after {
151     content: " : ";
152 }
153
154 .chart-pane .chart {
155     height: 100%;
156 }
157
158 .chart-pane .chart svg {
159     height: 100%;
160 }
161
162 .chart {
163     position: relative;
164     overflow: hidden;
165 }
166
167 .chart svg {
168     stroke: #666;
169     fill: #000;
170     color: #000;
171     font-size: 0.7rem;
172 }
173
174 .chart path {
175     fill: none;
176     stroke-width: 1.5px;
177 }
178
179 .chart .commit-time-line {
180     stroke: #999;
181 }
182
183 .chart .dot {
184     fill: #666;
185     stroke: none;
186 }
187
188 .chart path.area {
189     stroke: none;
190     fill: #ccc;
191     opacity: 0.8;
192 }
193
194 .chart path.area.baseline {
195     stroke: #f66;
196     fill: #fdd;
197     opacity: 0.4;
198 }
199
200 .chart path.area.target {
201     stroke: #66f;
202     fill: #ddf;
203     opacity: 0.4;
204 }
205
206 .chart .axis,
207 .chart .domain {
208   fill: none;
209   stroke-width: 1px;
210   stroke: #ddd;
211   color: #000;
212   shape-rendering: crispEdges;
213 }
214
215 .chart .domain {
216     stroke: none;
217 }
218
219 .chart .current-item {
220     stroke: #f93;
221     stroke-width: 2px;
222     fill: #f93;
223 }
224
225 .chart .extent {
226     stroke: #9c6;
227     stroke-width: 1px;
228     fill: #9c6;
229     fill-opacity: .125;
230     shape-rendering: crispEdges;
231 }
232
233 .chart .axis text {
234     fill: #333;
235     stroke: none;
236 }