OLD | NEW |
---|---|
1 /* Copyright 2015 The Chromium Authors. All rights reserved. | 1 /* Copyright 2015 The Chromium Authors. All rights reserved. |
2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
4 | 4 |
5 body { | 5 body { |
6 font-size: 100%; | 6 font-size: 100%; |
7 margin: 0; | 7 margin: 0; |
8 padding: 0; | 8 padding: 0; |
9 } | 9 } |
10 | 10 |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
42 padding: 20px 24px; | 42 padding: 20px 24px; |
43 } | 43 } |
44 | 44 |
45 .sync-message { | 45 .sync-message { |
46 color: #595959; | 46 color: #595959; |
47 font-size: 0.8125em; | 47 font-size: 0.8125em; |
48 line-height: 150%; | 48 line-height: 150%; |
49 padding-bottom: 32px; | 49 padding-bottom: 32px; |
50 } | 50 } |
51 | 51 |
52 .picture-container { | 52 #picture-container { |
53 align-items: center; | 53 align-items: center; |
54 display: flex; | 54 display: flex; |
55 justify-content: center; | 55 justify-content: center; |
56 padding-bottom: 32px; | 56 padding-bottom: 32px; |
57 } | 57 } |
58 | 58 |
59 .picture { | 59 .picture { |
60 height: 96px; | 60 height: 96px; |
61 left: 84px; | |
61 position: relative; | 62 position: relative; |
62 width: 96px; | 63 width: 96px; |
63 } | 64 } |
64 | 65 |
65 #profile-picture, | 66 #profile-picture, |
66 .checkmark-bubble { | 67 .checkmark-circle { |
67 position: absolute; | 68 position: absolute; |
68 } | 69 } |
69 | 70 |
70 .checkmark-bubble { | |
71 background-color: white; | |
72 background-image: url(//resources/images/check_circle.svg); | |
73 background-size: 100%; | |
74 border: 1px solid white; | |
75 border-radius: 50%; | |
76 display: inline-block; | |
77 height: 30px; | |
78 left: 64px; | |
79 top: 66px; | |
80 width: 30px; | |
81 } | |
82 | |
83 .action-container { | 71 .action-container { |
84 align-items: baseline; | 72 align-items: baseline; |
85 display: flex; | 73 display: flex; |
86 justify-content: flex-end; | 74 justify-content: flex-end; |
87 } | 75 } |
88 | 76 |
89 paper-button { | 77 paper-button { |
90 font-size: 0.8125em; | 78 font-size: 0.8125em; |
91 padding-left: 12px; | 79 padding-left: 12px; |
92 padding-right: 12px; | 80 padding-right: 12px; |
93 } | 81 } |
94 | 82 |
95 #confirmButton { | 83 #confirmButton { |
96 background-color: rgb(66, 133, 244); | 84 background-color: rgb(66, 133, 244); |
97 color: white; | 85 color: white; |
98 } | 86 } |
99 | 87 |
100 #undoButton { | 88 #undoButton { |
101 color: #5A5A5A; | 89 color: #5A5A5A; |
102 } | 90 } |
91 | |
92 #illustration { | |
93 height: 96px; | |
94 margin: 0 auto; | |
95 position: relative; | |
96 width: 264px; | |
97 } | |
98 | |
99 #checkmark-circle { | |
100 background: rgb(66, 133, 244); | |
101 border: 2px solid #fff; | |
102 border-radius: 50%; | |
103 bottom: 0; | |
104 height: 24px; | |
105 position: absolute; | |
106 right: 0; | |
107 transform: scale(0); | |
108 width: 24px; | |
109 } | |
110 | |
111 .loaded #checkmark-circle { | |
112 animation: scaleCircle 300ms cubic-bezier(0, 0, 0.2, 1) forwards; | |
113 } | |
114 | |
115 @keyframes scaleCircle { | |
Dan Beam
2016/02/13 02:17:03
why keyframeNamesLikeThis rather than keyframe-nam
anthonyvd
2016/02/22 17:09:23
Done.
| |
116 from {transform: scale(0);} | |
117 to {transform: scale(1);} | |
118 } | |
119 | |
120 #checkmark-check { | |
121 left: 5px; | |
122 position: absolute; | |
123 top: 7px; | |
124 } | |
125 | |
126 .loaded #checkmark-path { | |
127 animation: drawPath 300ms cubic-bezier(0, 0, 0.2, 1) 100ms forwards; | |
128 } | |
129 | |
130 @keyframes drawPath { | |
131 from {stroke-dashoffset: 16;} | |
132 to {stroke-dashoffset: 0;} | |
133 } | |
134 | |
135 #icons { | |
136 height: 96px; | |
137 position: absolute; | |
138 width: 264px; | |
139 } | |
140 | |
141 #icons > div { | |
142 animation-delay: 200ms; | |
143 animation-duration: 1.4s; | |
144 animation-fill-mode: forwards; | |
145 animation-timing-function: cubic-bezier(0.25, 0.45, 0.4, 0.7); | |
146 background-size: cover; | |
147 opacity: 0; | |
148 position: absolute; | |
149 } | |
150 | |
151 #icon-bookmarks { | |
152 background: url(../../../../ui/webui/resources/images/icon_bookmarks.svg); | |
153 height: 36px; | |
154 left: 58px; | |
155 top: 0; | |
156 width: 36px; | |
157 } | |
158 | |
159 #icon-extensions { | |
160 background: url(../../../../ui/webui/resources/images/icon_extensions.svg); | |
161 height: 24px; | |
162 left: 30px; | |
163 top: 30px; | |
164 width: 24px; | |
165 } | |
166 | |
167 | |
168 #icon-passwords { | |
169 background: url(../../../../ui/webui/resources/images/icon_passwords.svg); | |
170 height: 30px; | |
171 left: 38px; | |
172 top: 66px; | |
173 width: 40px; | |
174 } | |
175 | |
176 #icon-history { | |
177 background: url(../../../../ui/webui/resources/images/icon_history.svg); | |
178 height: 36px; | |
179 left: 190px; | |
180 top: 6px; | |
181 width: 36px; | |
182 } | |
183 | |
184 #icon-tabs { | |
185 background: url(../../../../ui/webui/resources/images/icon_tabs.svg); | |
186 height: 24px; | |
187 left: 222px; | |
188 top: 44px; | |
189 width: 24px; | |
190 } | |
191 | |
192 #icon-themes { | |
193 background: url(../../../../ui/webui/resources/images/icon_themes.svg); | |
194 height: 30px; | |
195 left: 184px; | |
196 top: 62px; | |
197 width: 32px; | |
198 } | |
199 | |
200 #icon-circle-open { | |
201 border: 2px solid #000; | |
202 border-radius: 50%; | |
203 height: 8px; | |
204 left: 6px; | |
205 top: 56px; | |
206 width: 8px; | |
207 } | |
208 | |
209 .icon-circle { | |
210 background: #000; | |
211 border-radius: 50%; | |
212 height: 4px; | |
213 width: 4px; | |
214 } | |
215 | |
216 #icon-circle-1 { | |
217 left: 64px; | |
218 top: 50px; | |
219 } | |
220 | |
221 #icon-circle-2 { | |
222 left: 178px; | |
223 top: 18px; | |
224 } | |
225 | |
226 #icon-circle-3 { | |
227 left: 194px; | |
228 top: 50px; | |
229 } | |
230 | |
231 #icon-circle-4 { | |
232 left: 258px; | |
233 top: 36px; | |
234 } | |
235 | |
236 .loaded .fade-top-left { | |
237 animation-name: fadeInIconTopLeft; | |
238 } | |
239 | |
240 .loaded .fade-top-right { | |
241 animation-name: fadeInIconTopRight; | |
242 } | |
243 | |
244 | |
245 .loaded .fade-middle-left { | |
246 animation-name: fadeInIconMiddleLeft; | |
247 } | |
248 | |
249 .loaded .fade-middle-right { | |
250 animation-name: fadeInIconMiddleRight; | |
251 } | |
252 | |
253 .loaded .fade-bottom-left { | |
254 animation-name: fadeInIconBottomLeft; | |
255 } | |
256 | |
257 .loaded .fade-bottom-right { | |
258 animation-name: fadeInIconBottomRight; | |
259 } | |
260 | |
261 @keyframes fadeInIconTopLeft { | |
262 from { | |
263 opacity: 0; | |
264 transform: translate(0, 0); | |
265 } | |
266 to { | |
267 opacity: 0.1; | |
268 transform: translate(-4px, -4px); | |
269 } | |
270 } | |
271 | |
272 @keyframes fadeInIconTopRight { | |
273 from { | |
274 opacity: 0; | |
275 transform: translate(0, 0); | |
276 } | |
277 to { | |
278 opacity: 0.1; | |
279 transform: translate(4px, -4px); | |
280 } | |
281 } | |
282 | |
283 @keyframes fadeInIconMiddleLeft { | |
284 from { | |
285 opacity: 0; | |
286 transform: translate(0, 0); | |
287 } | |
288 to { | |
289 opacity: 0.1; | |
290 transform: translate(-4px, 0); | |
291 } | |
292 } | |
293 | |
294 @keyframes fadeInIconMiddleRight { | |
295 from { | |
296 opacity: 0; | |
297 transform: translate(0, 0); | |
298 } | |
299 to { | |
300 opacity: 0.1; | |
301 transform: translate(4px, 0); | |
302 } | |
303 } | |
304 | |
305 @keyframes fadeInIconBottomLeft { | |
306 from { | |
307 opacity: 0; | |
308 transform: translate(0, 0); | |
309 } | |
310 to { | |
311 opacity: 0.1; | |
312 transform: translate(-4px, 4px); | |
313 } | |
314 } | |
315 | |
316 @keyframes fadeInIconBottomRight { | |
317 from { | |
318 opacity: 0; | |
319 transform: translate(0, 0); | |
320 } | |
321 to { | |
322 opacity: 0.1; | |
323 transform: translate(4px, 4px); | |
324 } | |
325 } | |
OLD | NEW |