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

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

Issue 2691883002: Uprefix CSS transitions in ui/ and chrome/ styles (Closed)
Patch Set: transitions only 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: 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 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: 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 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;
(...skipping 12 matching lines...) Expand all
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 transform: translateZ(1px); 188 transform: translateZ(1px);
189 } 189 }
190 190
191 html[dir=rtl] #flip-photo { 191 html[dir=rtl] #flip-photo {
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after
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