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: 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 Loading... |
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 Loading... |
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 |