1/* Copyright (c) 2012 The Chromium Authors. All rights reserved. 2 * Use of this source code is governed by a BSD-style license that can be 3 * found in the LICENSE file. */ 4 5#user-images-area { 6 display: -webkit-box; 7} 8 9#user-image-grid { 10 -webkit-user-drag: none; 11 -webkit-user-select: none; 12 height: 264px; 13 margin: 10px; 14 outline: none; 15 /* Necessary for correct metrics calculation by grid.js. */ 16 overflow: hidden; 17 padding: 0; 18 width: 530px; 19} 20 21#user-image-grid * { 22 margin: 0; 23 padding: 0; 24} 25 26#user-image-grid img { 27 background-color: white; 28 height: 64px; 29 vertical-align: middle; 30 width: 64px; 31} 32 33#user-image-grid > li { 34 border: 1px solid rgba(0, 0, 0, 0.15); 35 border-radius: 4px; 36 display: inline-block; 37 margin: 8px; 38 padding: 3px; 39} 40 41#user-image-grid [selected] { 42 border: 2px solid rgb(0, 102, 204); 43 padding: 2px; 44} 45 46/** 47 * #user-image-preview can have the following classes: 48 * .default-image: one of the default images is selected (including the grey 49 * silhouette); 50 * .profile-image: profile image is selected; 51 * .online: camera is streaming video; 52 * .camera: camera (live or photo) is selected; 53 * .live: camera is in live mode (no photo taken yet/last photo removed). 54 */ 55 56#user-image-preview { 57 margin: 20px 10px 0 0; 58 max-width: 220px; 59 position: relative; 60} 61 62#user-image-preview .perspective-box { 63 -webkit-perspective: 600px; 64} 65 66#user-image-preview-img { 67 background: white; 68 border: solid 1px #cacaca; 69 border-radius: 4px; 70 max-height: 220px; 71 max-width: 220px; 72 padding: 2px; 73} 74 75.camera.live #user-image-preview-img { 76 display: none; 77} 78 79.animation #user-image-preview-img { 80 -webkit-transition: -webkit-transform 200ms linear; 81} 82 83.camera.flip-x #user-image-preview-img { 84 -webkit-transform: rotateY(180deg); 85} 86 87.user-image-stream-area { 88 display: none; 89 position: relative; 90} 91 92.camera.live .user-image-stream-area { 93 display: block; 94} 95 96#user-image-stream-crop { 97 /* TODO(ivankr): temporary workaround for crbug.com/142347. */ 98 -webkit-transform: rotateY(360deg); 99 -webkit-transition: -webkit-transform 200ms linear; 100 height: 220px; 101 overflow: hidden; 102 position: relative; 103 width: 220px; 104} 105 106.flip-x #user-image-stream-crop { 107 -webkit-transform: rotateY(180deg); 108} 109 110/* TODO(ivankr): specify dimensions from real capture size. */ 111.user-image-stream { 112 border: solid 1px #cacaca; 113 height: 220px; 114 /* Center image for 4:3 aspect ratio. */ 115 left: -16.6%; 116 position: absolute; 117 visibility: hidden; 118} 119 120.online .user-image-stream { 121 visibility: visible; 122} 123 124.user-image-stream-area .spinner { 125 display: none; 126 height: 44px; 127 left: 50%; 128 margin: -22px 0 0 -22px; 129 position: absolute; 130 top: 50%; 131 width: 44px; 132} 133 134.camera.live:not(.online) .user-image-stream-area .spinner { 135 display: block; 136} 137 138#flip-photo { 139 -webkit-transition: opacity 75ms linear; 140 background: url('chrome://theme/IDR_MIRROR_FLIP') no-repeat; 141 border: none; 142 bottom: 44px; /* 8px + image bottom. */ 143 display: block; 144 height: 32px; 145 opacity: 0; 146 position: absolute; 147 right: 8px; 148 width: 32px; 149} 150 151/* TODO(merkulova): remove when webkit crbug.com/126479 is fixed. */ 152.flip-trick { 153 -webkit-transform: translateZ(1px); 154} 155 156html[dir=rtl] #flip-photo { 157 left: 8px; 158 right: auto; 159} 160 161/* "Flip photo" button is hidden during flip animation. */ 162.camera.online:not(.animation) #flip-photo, 163.camera:not(.live):not(.animation) #flip-photo { 164 opacity: 0.75; 165} 166 167#discard-photo, 168#take-photo { 169 display: none; 170 height: 25px; 171 margin: 4px 1px; 172 padding: 0; 173 width: 220px; 174} 175 176.camera:not(.live) #discard-photo { 177 background: url('chrome://theme/IDR_USER_IMAGE_RECYCLE') 178 no-repeat center 0; 179 display: block; 180} 181 182.camera.live.online #take-photo { 183 background: url('chrome://theme/IDR_USER_IMAGE_CAPTURE') 184 no-repeat center -1px; 185 display: block; 186} 187 188#user-image-attribution { 189 -webkit-padding-start: 34px; 190 line-height: 26px; 191} 192 193#user-image-author-website { 194 -webkit-padding-start: 5px; 195} 196