| 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 |