Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(174)

Side by Side Diff: chrome/browser/resources/chromeos/login/oobe_screen_user_image.css

Issue 2535573002: Reduce usage of webkit CSS prefixes in chrome/browser/resources (Closed)
Patch Set: rebase Created 3 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698