OLD | NEW |
1 /* Copyright 2013 The Chromium Authors. All rights reserved. | 1 /* Copyright 2013 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 #user-image { | 5 #user-image { |
6 min-height: 443px; | 6 min-height: 443px; |
7 padding: 70px 17px 21px; | 7 padding: 70px 17px 21px; |
8 width: 702px; | 8 width: 702px; |
9 } | 9 } |
10 | 10 |
(...skipping 87 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
98 float: left; | 98 float: left; |
99 } | 99 } |
100 | 100 |
101 #user-image-preview-img { | 101 #user-image-preview-img { |
102 display: block; | 102 display: block; |
103 max-height: 220px; | 103 max-height: 220px; |
104 max-width: 220px; | 104 max-width: 220px; |
105 } | 105 } |
106 | 106 |
107 #user-image-preview-img.animated-transform { | 107 #user-image-preview-img.animated-transform { |
108 -webkit-transition: -webkit-transform 200ms linear; | 108 transition: transform 200ms linear; |
109 } | 109 } |
110 | 110 |
111 .camera.live #user-image-preview-img { | 111 .camera.live #user-image-preview-img { |
112 display: none; | 112 display: none; |
113 } | 113 } |
114 | 114 |
115 .camera.flip-x #user-image-preview-img { | 115 .camera.flip-x #user-image-preview-img { |
116 -webkit-transform: rotateY(180deg); | 116 transform: rotateY(180deg); |
117 } | 117 } |
118 | 118 |
119 .default-image #user-image-preview-img { | 119 .default-image #user-image-preview-img { |
120 background: white; | 120 background: white; |
121 border: solid 1px #cacaca; | 121 border: solid 1px #cacaca; |
122 border-radius: 4px; | 122 border-radius: 4px; |
123 padding: 2px; | 123 padding: 2px; |
124 } | 124 } |
125 | 125 |
126 .user-image-stream-area { | 126 .user-image-stream-area { |
127 display: none; | 127 display: none; |
128 padding: 0; | 128 padding: 0; |
129 position: relative; | 129 position: relative; |
130 } | 130 } |
131 | 131 |
132 .camera.live .user-image-stream-area { | 132 .camera.live .user-image-stream-area { |
133 display: block; | 133 display: block; |
134 } | 134 } |
135 | 135 |
136 #user-image-stream-crop { | 136 #user-image-stream-crop { |
137 -webkit-transition: -webkit-transform 200ms linear; | |
138 height: 220px; | 137 height: 220px; |
139 overflow: hidden; | 138 overflow: hidden; |
140 position: relative; | 139 position: relative; |
| 140 transition: transform 200ms linear; |
141 width: 220px; | 141 width: 220px; |
142 } | 142 } |
143 | 143 |
144 .flip-x #user-image-stream-crop { | 144 .flip-x #user-image-stream-crop { |
145 -webkit-transform: rotateY(180deg); | 145 transform: rotateY(180deg); |
146 } | 146 } |
147 | 147 |
148 /* TODO(ivankr): specify dimensions from real capture size. */ | 148 /* TODO(ivankr): specify dimensions from real capture size. */ |
149 .user-image-stream { | 149 .user-image-stream { |
150 border: solid 1px #cacaca; | 150 border: solid 1px #cacaca; |
151 height: 220px; | 151 height: 220px; |
152 /* Center image for 4:3 aspect ratio. */ | 152 /* Center image for 4:3 aspect ratio. */ |
153 left: -16.6%; | 153 left: -16.6%; |
154 position: absolute; | 154 position: absolute; |
155 visibility: hidden; | 155 visibility: hidden; |
156 } | 156 } |
157 | 157 |
158 .online .user-image-stream { | 158 .online .user-image-stream { |
159 visibility: visible; | 159 visibility: visible; |
160 } | 160 } |
161 | 161 |
162 #user-image-preview-caption { | 162 #user-image-preview-caption { |
163 color: dimGray; | 163 color: dimGray; |
164 font-size: smaller; | 164 font-size: smaller; |
165 margin: 8px 4px; | 165 margin: 8px 4px; |
166 } | 166 } |
167 | 167 |
168 .camera #user-image-preview-caption { | 168 .camera #user-image-preview-caption { |
169 display: none; | 169 display: none; |
170 } | 170 } |
171 | 171 |
172 #flip-photo { | 172 #flip-photo { |
173 -webkit-transition: opacity 75ms linear; | |
174 background: url(chrome://theme/IDR_MIRROR_FLIP) no-repeat; | 173 background: url(chrome://theme/IDR_MIRROR_FLIP) no-repeat; |
175 border: none; | 174 border: none; |
176 bottom: 44px; /* 8px + image bottom. */ | 175 bottom: 44px; /* 8px + image bottom. */ |
177 display: block; | 176 display: block; |
178 height: 32px; | 177 height: 32px; |
179 opacity: 0; | 178 opacity: 0; |
180 position: absolute; | 179 position: absolute; |
181 right: 8px; | 180 right: 8px; |
| 181 transition: opacity 75ms linear; |
182 width: 32px; | 182 width: 32px; |
183 z-index: 1; | 183 z-index: 1; |
184 } | 184 } |
185 | 185 |
186 /* TODO(merkulova): remove when webkit crbug.com/126479 is fixed. */ | 186 /* TODO(merkulova): remove when webkit crbug.com/126479 is fixed. */ |
187 .flip-trick { | 187 .flip-trick { |
188 -webkit-transform: translateZ(1px); | 188 transform: translateZ(1px); |
189 } | 189 } |
190 | 190 |
191 html[dir=rtl] #flip-photo { | 191 html[dir=rtl] #flip-photo { |
192 left: 8px; | 192 left: 8px; |
193 right: auto; | 193 right: auto; |
194 } | 194 } |
195 | 195 |
196 /* "Flip photo" button is hidden during flip animation. */ | 196 /* "Flip photo" button is hidden during flip animation. */ |
197 .camera.online:not(.animation) #flip-photo, | 197 .camera.online:not(.animation) #flip-photo, |
198 .camera.phototaken:not(.animation) #flip-photo { | 198 .camera.phototaken:not(.animation) #flip-photo { |
(...skipping 15 matching lines...) Expand all Loading... |
214 display: block; | 214 display: block; |
215 } | 215 } |
216 | 216 |
217 .camera.live.online #take-photo { | 217 .camera.live.online #take-photo { |
218 background: url(chrome://theme/IDR_USER_IMAGE_CAPTURE) | 218 background: url(chrome://theme/IDR_USER_IMAGE_CAPTURE) |
219 no-repeat center -1px; | 219 no-repeat center -1px; |
220 display: block; | 220 display: block; |
221 } | 221 } |
222 | 222 |
223 #user-image-preview .perspective-box { | 223 #user-image-preview .perspective-box { |
224 -webkit-perspective: 600px; | |
225 border: solid 1px #cacaca; | 224 border: solid 1px #cacaca; |
226 border-radius: 4px; | 225 border-radius: 4px; |
227 padding: 2px; | 226 padding: 2px; |
| 227 perspective: 600px; |
228 width: 220px; | 228 width: 220px; |
229 } | 229 } |
230 | 230 |
231 #user-image-attribution { | 231 #user-image-attribution { |
232 /* Turned off for now. */ | 232 /* Turned off for now. */ |
233 display: none; | 233 display: none; |
234 } | 234 } |
235 | 235 |
236 #user-image .step-contents { | 236 #user-image .step-contents { |
237 -webkit-margin-start: 31px; | 237 -webkit-margin-start: 31px; |
238 margin-bottom: 30px; | 238 margin-bottom: 30px; |
239 } | 239 } |
240 | 240 |
241 .user-image-stream-area .spinner { | 241 .user-image-stream-area .spinner { |
242 display: none; | 242 display: none; |
243 height: 44px; | 243 height: 44px; |
244 left: 50%; | 244 left: 50%; |
245 margin-left: -22px; | 245 margin-left: -22px; |
246 margin-top: -22px; | 246 margin-top: -22px; |
247 position: absolute; | 247 position: absolute; |
248 top: 50%; | 248 top: 50%; |
249 width: 44px; | 249 width: 44px; |
250 } | 250 } |
251 | 251 |
252 .camera.live:not(.online) .user-image-stream-area .spinner { | 252 .camera.live:not(.online) .user-image-stream-area .spinner { |
253 display: block; | 253 display: block; |
254 } | 254 } |
255 | 255 |
OLD | NEW |