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: 18px 10px 0 0; 58 max-width: 220px; 59 position: relative; 60 } 61 62 #user-image-preview .perspective-box { 63 -webkit-perspective: 600px; 64 border: solid 1px #cacaca; 65 border-radius: 4px; 66 padding: 3px; 67 width: 220px; 68 } 69 70 #user-image-preview-img { 71 background: white; 72 border: solid 1px #cacaca; 73 border-radius: 4px; 74 max-height: 220px; 75 max-width: 220px; 76 padding: 3px; 77 } 78 79 .camera.live #user-image-preview-img { 80 display: none; 81 } 82 83 .animation #user-image-preview-img { 84 -webkit-transition: -webkit-transform 200ms linear; 85 } 86 87 .camera.flip-x #user-image-preview-img { 88 -webkit-transform: rotateY(180deg); 89 } 90 91 .user-image-stream-area { 92 display: none; 93 position: relative; 94 } 95 96 .camera.live .user-image-stream-area { 97 display: block; 98 } 99 100 #user-image-stream-crop { 101 /* TODO(ivankr): temporary workaround for crbug.com/142347. */ 102 -webkit-transform: rotateY(360deg); 103 -webkit-transition: -webkit-transform 200ms linear; 104 height: 220px; 105 overflow: hidden; 106 position: relative; 107 width: 220px; 108 } 109 110 .flip-x #user-image-stream-crop { 111 -webkit-transform: rotateY(180deg); 112 } 113 114 /* TODO(ivankr): specify dimensions from real capture size. */ 115 .user-image-stream { 116 border: solid 1px #cacaca; 117 height: 220px; 118 /* Center image for 4:3 aspect ratio. */ 119 left: -16.6%; 120 position: absolute; 121 visibility: hidden; 122 } 123 124 .online .user-image-stream { 125 visibility: visible; 126 } 127 128 .user-image-stream-area .spinner { 129 display: none; 130 height: 44px; 131 left: 50%; 132 margin: -22px 0 0 -22px; 133 position: absolute; 134 top: 50%; 135 width: 44px; 136 } 137 138 .camera.live:not(.online) .user-image-stream-area .spinner { 139 display: block; 140 } 141 142 #flip-photo { 143 -webkit-transition: opacity 75ms linear; 144 background: url('chrome://theme/IDR_MIRROR_FLIP') no-repeat; 145 border: none; 146 bottom: 44px; /* 8px + image bottom. */ 147 display: block; 148 height: 32px; 149 opacity: 0; 150 position: absolute; 151 right: 8px; 152 width: 32px; 153 } 154 155 /* TODO(merkulova): remove when webkit crbug.com/126479 is fixed. */ 156 .flip-trick { 157 -webkit-transform: translateZ(1px); 158 } 159 160 html[dir=rtl] #flip-photo { 161 left: 8px; 162 right: auto; 163 } 164 165 /* "Flip photo" button is hidden during flip animation. */ 166 .camera.online:not(.animation) #flip-photo, 167 .camera:not(.live):not(.animation) #flip-photo { 168 opacity: 0.75; 169 } 170 171 #discard-photo, 172 #take-photo { 173 display: none; 174 height: 25px; 175 margin: 4px; 176 padding: 0; 177 width: 220px; 178 } 179 180 .camera:not(.live) #discard-photo { 181 background: url('chrome://theme/IDR_USER_IMAGE_RECYCLE') 182 no-repeat center center; 183 display: block; 184 } 185 186 .camera.live.online #take-photo { 187 background: url('chrome://theme/IDR_USER_IMAGE_CAPTURE') 188 no-repeat center -1px; 189 display: block; 190 } 191 192 #user-image-attribution { 193 -webkit-padding-start: 34px; 194 line-height: 26px; 195 } 196 197 #user-image-author-website { 198 -webkit-padding-start: 5px; 199 } 200