| /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| #user-images-area { |
| display: -webkit-box; |
| } |
| |
| #user-image-grid { |
| -webkit-user-drag: none; |
| -webkit-user-select: none; |
| height: 264px; |
| margin: 10px; |
| outline: none; |
| /* Necessary for correct metrics calculation by grid.js. */ |
| overflow: hidden; |
| padding: 0; |
| width: 530px; |
| } |
| |
| #user-image-grid * { |
| margin: 0; |
| padding: 0; |
| } |
| |
| #user-image-grid img { |
| background-color: white; |
| height: 64px; |
| vertical-align: middle; |
| width: 64px; |
| } |
| |
| #user-image-grid > li { |
| border: 1px solid rgba(0, 0, 0, 0.15); |
| border-radius: 4px; |
| display: inline-block; |
| margin: 8px; |
| padding: 3px; |
| } |
| |
| #user-image-grid [selected] { |
| border: 2px solid rgb(0, 102, 204); |
| padding: 2px; |
| } |
| |
| /** |
| * #user-image-preview can have the following classes: |
| * .default-image: one of the default images is selected (including the grey |
| * silhouette); |
| * .profile-image: profile image is selected; |
| * .online: camera is streaming video; |
| * .camera: camera (live or photo) is selected; |
| * .live: camera is in live mode (no photo taken yet/last photo removed). |
| */ |
| |
| #user-image-preview { |
| margin: 20px 10px 0 0; |
| max-width: 220px; |
| position: relative; |
| } |
| |
| #user-image-preview .perspective-box { |
| -webkit-perspective: 600px; |
| } |
| |
| #user-image-preview-img { |
| background: white; |
| border: solid 1px #cacaca; |
| border-radius: 4px; |
| max-height: 220px; |
| max-width: 220px; |
| padding: 2px; |
| } |
| |
| .camera.live #user-image-preview-img { |
| display: none; |
| } |
| |
| .animation #user-image-preview-img { |
| -webkit-transition: -webkit-transform 200ms linear; |
| } |
| |
| .camera.flip-x #user-image-preview-img { |
| -webkit-transform: rotateY(180deg); |
| } |
| |
| .user-image-stream-area { |
| display: none; |
| position: relative; |
| } |
| |
| .camera.live .user-image-stream-area { |
| display: block; |
| } |
| |
| #user-image-stream-crop { |
| /* TODO(ivankr): temporary workaround for crbug.com/142347. */ |
| -webkit-transform: rotateY(360deg); |
| -webkit-transition: -webkit-transform 200ms linear; |
| height: 220px; |
| overflow: hidden; |
| position: relative; |
| width: 220px; |
| } |
| |
| .flip-x #user-image-stream-crop { |
| -webkit-transform: rotateY(180deg); |
| } |
| |
| /* TODO(ivankr): specify dimensions from real capture size. */ |
| .user-image-stream { |
| border: solid 1px #cacaca; |
| height: 220px; |
| /* Center image for 4:3 aspect ratio. */ |
| left: -16.6%; |
| position: absolute; |
| visibility: hidden; |
| } |
| |
| .online .user-image-stream { |
| visibility: visible; |
| } |
| |
| .user-image-stream-area .spinner { |
| display: none; |
| height: 44px; |
| left: 50%; |
| margin: -22px 0 0 -22px; |
| position: absolute; |
| top: 50%; |
| width: 44px; |
| } |
| |
| .camera.live:not(.online) .user-image-stream-area .spinner { |
| display: block; |
| } |
| |
| #flip-photo { |
| -webkit-transition: opacity 75ms linear; |
| background: url('chrome://theme/IDR_MIRROR_FLIP') no-repeat; |
| border: none; |
| bottom: 44px; /* 8px + image bottom. */ |
| display: block; |
| height: 32px; |
| opacity: 0; |
| position: absolute; |
| right: 8px; |
| width: 32px; |
| } |
| |
| html[dir=rtl] #flip-photo { |
| left: 8px; |
| right: auto; |
| } |
| |
| /* "Flip photo" button is hidden during flip animation. */ |
| .camera.online:not(.animation) #flip-photo, |
| .camera:not(.live):not(.animation) #flip-photo { |
| opacity: 0.75; |
| } |
| |
| #discard-photo, |
| #take-photo { |
| display: none; |
| height: 25px; |
| margin: 4px 1px; |
| padding: 0; |
| width: 220px; |
| } |
| |
| .camera:not(.live) #discard-photo { |
| background: url('chrome://theme/IDR_USER_IMAGE_RECYCLE') |
| no-repeat center 0; |
| display: block; |
| } |
| |
| .camera.live.online #take-photo { |
| background: url('chrome://theme/IDR_USER_IMAGE_CAPTURE') |
| no-repeat center -1px; |
| display: block; |
| } |
| |
| #user-image-attribution { |
| -webkit-padding-start: 34px; |
| line-height: 26px; |
| } |
| |
| #user-image-author-website { |
| -webkit-padding-start: 5px; |
| } |