15821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Copyright (c) 2012 The Chromium Authors. All rights reserved. 25821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Use of this source code is governed by a BSD-style license that can be 35821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * found in the LICENSE file. */ 45821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 52a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)#user-images-area { 62a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) display: -webkit-box; 75821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 85821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 95821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)#user-image-grid { 105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-user-drag: none; 115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-user-select: none; 122a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) height: 264px; 135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) margin: 10px; 145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) outline: none; 155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* Necessary for correct metrics calculation by grid.js. */ 165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) overflow: hidden; 175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 0; 182a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) width: 530px; 195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)#user-image-grid * { 225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) margin: 0; 235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 0; 245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)#user-image-grid img { 275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-color: white; 285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 64px; 295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) vertical-align: middle; 305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 64px; 315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)#user-image-grid > li { 345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border: 1px solid rgba(0, 0, 0, 0.15); 355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-radius: 4px; 365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: inline-block; 375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) margin: 8px; 385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 3px; 395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)#user-image-grid [selected] { 425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border: 2px solid rgb(0, 102, 204); 435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 2px; 445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * #user-image-preview can have the following classes: 485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * .default-image: one of the default images is selected (including the grey 495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * silhouette); 505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * .profile-image: profile image is selected; 515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * .online: camera is streaming video; 525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * .camera: camera (live or photo) is selected; 535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * .live: camera is in live mode (no photo taken yet/last photo removed). 545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)#user-image-preview { 570529e5d033099cbfc42635f6f6183833b09dff6eBen Murdoch margin: 18px 10px 0 0; 585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) max-width: 220px; 592a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) position: relative; 605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)#user-image-preview .perspective-box { 635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-perspective: 600px; 64a1401311d1ab56c4ed0a474bd38c108f75cb0cd9Torne (Richard Coles) border: solid 1px #cacaca; 65a1401311d1ab56c4ed0a474bd38c108f75cb0cd9Torne (Richard Coles) border-radius: 4px; 660529e5d033099cbfc42635f6f6183833b09dff6eBen Murdoch padding: 3px; 67a1401311d1ab56c4ed0a474bd38c108f75cb0cd9Torne (Richard Coles) width: 220px; 685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 702a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)#user-image-preview-img { 712a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) background: white; 722a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) border: solid 1px #cacaca; 732a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) border-radius: 4px; 745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) max-height: 220px; 755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) max-width: 220px; 760529e5d033099cbfc42635f6f6183833b09dff6eBen Murdoch padding: 3px; 775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 792a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles).camera.live #user-image-preview-img { 805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: none; 815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 832a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles).animation #user-image-preview-img { 842a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) -webkit-transition: -webkit-transform 200ms linear; 852a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)} 862a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 872a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles).camera.flip-x #user-image-preview-img { 882a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) -webkit-transform: rotateY(180deg); 895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).user-image-stream-area { 925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: none; 935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: relative; 945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 962a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles).camera.live .user-image-stream-area { 975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)#user-image-stream-crop { 1015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* TODO(ivankr): temporary workaround for crbug.com/142347. */ 1025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transform: rotateY(360deg); 1035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transition: -webkit-transform 200ms linear; 1045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 220px; 1055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) overflow: hidden; 1065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: relative; 1075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 220px; 1085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).flip-x #user-image-stream-crop { 1115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transform: rotateY(180deg); 1125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* TODO(ivankr): specify dimensions from real capture size. */ 1155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).user-image-stream { 1165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border: solid 1px #cacaca; 1175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 220px; 1185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* Center image for 4:3 aspect ratio. */ 1195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) left: -16.6%; 1205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: absolute; 1215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) visibility: hidden; 1225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).online .user-image-stream { 1255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) visibility: visible; 1265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).user-image-stream-area .spinner { 1295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: none; 1305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 44px; 1315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) left: 50%; 1322a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) margin: -22px 0 0 -22px; 1335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: absolute; 1345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) top: 50%; 1355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 44px; 1365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).camera.live:not(.online) .user-image-stream-area .spinner { 1395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 1405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)#flip-photo { 1435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transition: opacity 75ms linear; 1445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background: url('chrome://theme/IDR_MIRROR_FLIP') no-repeat; 1455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border: none; 1462a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) bottom: 44px; /* 8px + image bottom. */ 1475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 1485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 32px; 1495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) opacity: 0; 1505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: absolute; 1515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) right: 8px; 1525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 32px; 1535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1555d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles)/* TODO(merkulova): remove when webkit crbug.com/126479 is fixed. */ 1565d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles).flip-trick { 1575d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) -webkit-transform: translateZ(1px); 1585d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles)} 1595d1f7b1de12d16ceb2c938c56701a3e8bfa558f7Torne (Richard Coles) 1605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)html[dir=rtl] #flip-photo { 1615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) left: 8px; 1625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) right: auto; 1635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* "Flip photo" button is hidden during flip animation. */ 1662a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles).camera.online:not(.animation) #flip-photo, 1672a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles).camera:not(.live):not(.animation) #flip-photo { 1685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) opacity: 0.75; 1695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)#discard-photo, 1725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)#take-photo { 1735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: none; 1745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 25px; 1750529e5d033099cbfc42635f6f6183833b09dff6eBen Murdoch margin: 4px; 1765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 0; 1775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 220px; 1785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1802a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles).camera:not(.live) #discard-photo { 1815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background: url('chrome://theme/IDR_USER_IMAGE_RECYCLE') 182a1401311d1ab56c4ed0a474bd38c108f75cb0cd9Torne (Richard Coles) no-repeat center center; 1835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 1845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1862a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles).camera.live.online #take-photo { 1875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background: url('chrome://theme/IDR_USER_IMAGE_CAPTURE') 1885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) no-repeat center -1px; 1895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 1905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)#user-image-attribution { 1935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-padding-start: 34px; 1945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) line-height: 26px; 1955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)#user-image-author-website { 1985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-padding-start: 5px; 1995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 200