/* 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;
}

/* TODO(merkulova): remove when webkit crbug.com/126479 is fixed. */
.flip-trick {
  -webkit-transform: translateZ(1px);
}

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