chrome/browser/resources/chromeos/login/oobe_screen_user_image.css

/* Copyright 2013 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-image {
  min-height: 443px;
  padding: 70px 17px 21px;
  width: 702px;
}

#user-image.loading {
  min-height: 609px; /* Should be the same as #gaia-signin height. */
  width: 722px; /* Should be the same as #gaia-signin width. */
}

#user-image-screen-curtain {
  -webkit-margin-start: 8px;
}

#user-image-screen-description {
  margin-top: 0;
}

#user-image-grid {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  display: inline-block;
  height: 264px;
  margin: 0;
  outline: none;
  overflow: hidden;
  padding: 0;
  width: 400px;
}

#user-image-grid img {
  background-color: white;
  height: 50px;
  vertical-align: middle;
  width: 50px;
}

#user-image-grid > li {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  display: inline-block;
  margin: 4px;
  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;
 * .profile-image-loading: profile image is being loaded;
 * .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 {
  float: right;
  margin: 4px;
  max-width: 220px;
  position: relative;
}

#profile-image {
  position: relative;
}

/* White background for spinner styled like user image */
#profile-image .spinner-bg {
  background-color: white;
  display: none;
  height: 50px;
  left: 3px;
  position: absolute;
  top: 3px;
  width: 50px;
}

.profile-image-loading #profile-image .spinner-bg {
  display: block;
}

#profile-image .spinner {
  left: 14px;
  position: absolute;
  top: 14px;
}

html[dir=rtl] #user-image-preview {
  float: left;
}

#user-image-preview-img {
  display: block;
  max-height: 220px;
  max-width: 220px;
}

#user-image-preview-img.animated-transform {
  -webkit-transition: -webkit-transform 200ms linear;
}

.camera.live #user-image-preview-img {
  display: none;
}

.camera.flip-x #user-image-preview-img {
  -webkit-transform: rotateY(180deg);
}

.default-image #user-image-preview-img {
  background: white;
  border: solid 1px #cacaca;
  border-radius: 4px;
  padding: 2px;
}

.user-image-stream-area {
  display: none;
  padding: 0;
  position: relative;
}

.camera.live .user-image-stream-area {
  display: block;
}

#user-image-stream-crop {
  -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-preview-caption {
  color: dimGray;
  font-size: smaller;
  margin: 8px 4px;
}

.camera #user-image-preview-caption {
  display: none;
}

#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;
  z-index: 1;
}

/* 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.phototaken: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 center;
  display: block;
}

.camera.live.online #take-photo {
  background: url('chrome://theme/IDR_USER_IMAGE_CAPTURE')
      no-repeat center -1px;
  display: block;
}

#user-image-preview .perspective-box {
  -webkit-perspective: 600px;
  border: solid 1px #cacaca;
  border-radius: 4px;
  padding: 2px;
  width: 220px;
}

#user-image-attribution {
  /* Turned off for now. */
  display: none;
}

#user-image .step-contents {
  -webkit-margin-start: 31px;
  margin-bottom: 30px;
}

.user-image-stream-area .spinner {
  display: none;
  height: 44px;
  left: 50%;
  margin-left: -22px;
  margin-top: -22px;
  position: absolute;
  top: 50%;
  width: 44px;
}

.camera.live:not(.online) .user-image-stream-area .spinner {
  display: block;
}

#user-images-loading {
  color: #9c9c9c;
}