chromeos/login/screen_locally_managed_user_creation.css

/* Copyright (c) 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.
 *
 * This is the stylesheet used by the Locally managed user creation flow screen.
 */

#managed-user-creation {
  height: 609px; /* Same size as GAIA sign in screen.*/
  padding: 0 0;  /* Some screens have elements right next to borders. */
  width: 722px;
}

#managed-user-creation .step-contents {
  height: 100%;
}

#managed-user-creation .nofocus:focus {
  outline: none;
}

#managed-user-creation .step-controls {
  -webkit-padding-end: 20px;
  align-items: center;
  bottom: 20px;
  display: flex;
  justify-content: space-between;
}

#managed-user-creation .controls-links {
  align-items: center;
  display: flex;
  justify-content: flex-start;
}

#managed-user-creation .controls-buttons {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

#managed-user-creation .logo-padded-text {
  padding: 0 17px 0;
}

#managed-user-creation .marketing {
  background-color: green;
  height: 344px;
}

#managed-user-creation .below-marketing {
  font-size: 12px;
  line-height: 18px;
  max-height: 184px;
  overflow-x: auto;
}

#managed-user-creation .button-link {
  font-size: small;
  padding: 0 20px;
}

.below-marketing::-webkit-scrollbar {
  width: 8px;
}

.below-marketing::-webkit-scrollbar-track-piece {
  background: #eee;
}

.below-marketing::-webkit-scrollbar-thumb {
  background: #888;
}

#managed-user-creation .page-no-marketing {
  height: 470px;
  padding: 70px 17px 0;
}

#managed-user-creation .page-title {
  color: #000;
  font-size: 15px;
  line-height: 24px;
}

.below-marketing strong {
  color: #000;
  font-weight: bold;
}

#managed-user-creation .page-title-explanation {
  color: rgb(150, 150, 150);
  font-size: 12px;
}

#managed-user-creation .page-title.inline {
  -webkit-margin-end: 1ex;
  display: inline-block;
}

#managed-user-creation .page-title-explanation.inline {
  display: inline;
}

#managed-user-creation .page-title.centred {
  text-align: center;
}

#managed-user-creation .page-title-explanation.centred {
  text-align: center;
}

#managed-user-creation-intro-title {
  font-size: x-large;
  text-align: center;
}

#managed-user-creation-intro-placeholder {
  background-color: gray;
  font-size: x-large;
  height: 150px;
  text-align: center;
}

#managed-user-creation-intro .below-marketing {
  margin: 20px 21px 2px 40px;
}

#managed-user-creation-intro-alternate-text {
  margin-bottom: 12px;
  margin-top: 12px;
}

#managed-user-creation-intro-text-3 {
  margin-top: 12px;
}

#managed-user-creation-created .below-marketing {
  margin: 20px 40px 0;
}

#managed-user-creation-created-text-1 {
  max-width: 600px;
  word-wrap: break-word;
}

#managed-user-creation-created-text-2 {
  margin-top: 20px;
  max-width: 600px;
  word-wrap: break-word;
}

#managed-user-creation-created-text-3 {
  margin-top: 20px;
}

#managed-user-creation-password-block,
#managed-user-creation-password-title {
  margin-top: 10px;
}

#managed-user-creation-name-block {
  margin-bottom: 20px;
  margin-top: 10px;
}

input.managed-user-creation-manager-password,
#managed-user-creation-name,
#managed-user-creation-password {
  padding: 4px 6px;
}
#managed-user-creation-password-confirm {
  margin-top: 12px;
  padding: 4px 6px;
}

#managed-user-creation-name-error {
  visibility: hidden;
}

#managed-user-creation-name-error.error {
  color: rgb(207, 93, 70);
  padding-left: 28px;
  visibility: visible;
}

#managed-user-creation-managers-block {
  -webkit-flex-direction: column;
  display: -webkit-flex;
  height: 100%;
}

#managed-user-creation-managers-pane {
  border: 1px solid #c8c8c8;
  height: 100%;
  margin-top: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* This class will be set for elements with hide-on-import class by JS when
 * page is used in 'import' mode
 */
#managed-user-creation .hidden-on-import {
  display: none;
}

#managed-user-creation-error {
  padding: 175px 120px 0;
  text-align: center;
}

#managed-user-creation-error .error-icon {
  -webkit-margin-after: 50px;
}

#managed-user-creation-error  .error-message-paragraph {
  -webkit-margin-after: 40px;
  -webkit-margin-before: 30px;
}

.screen-control-button {
  margin-left: 10px !important;
}

.import-pod {
  height: 32px;
  opacity: 0.8;
  padding: 20px;
  width: 646px;
}

.import-pod .import-pod-name {
  color: #000;
  display: inline-block;
  height: 32px;
  max-height: 32px;
  padding-top: 6px;
  vertical-align: top;
}

.import-pod.imported .import-pod-name {
  color: rgb(141, 141, 141);
}

.import-pod .import-pod-image {
  border: 1px solid gray;
  display: inline;
  height: 30px;
  width: 30px;
}

.manager-pod {
  height: 32px;
  opacity: 0.8;
  padding: 20px;
  width: 646px;
}

.manager-pod .managed-user-creation-manager-info-block {
  float: left;
  min-height: 32px;
}

.manager-pod .managed-user-creation-manager-image {
  border: 1px solid gray;
  display: inline-block;
  height: 30px;
  width: 30px;
}

.manager-pod .managed-user-creation-manager-info {
  display: inline-block;
  margin: 0 8px;
  min-height: 32px;
}

.manager-pod .managed-user-creation-manager-info-text {
  display: inline-block;
  min-height: 32px;
  vertical-align: top;
}

.manager-pod .password-block {
  float: right;
}

.manager-pod .managed-user-creation-manager-email {
  color: #666;
  font-size: small;
  max-height: 16px;
}

.manager-pod .managed-user-creation-manager-name {
  color: #000;
  font-size: small;
  max-height: 16px;
}

#managed-user-creation-status {
  margin: 4px 10px;
}

#managed-user-creation-status .error {
  color: rgb(207, 93, 70);
}

#managed-user-creation-status .spinner-wrapper {
  -webkit-margin-start: 3px;
  display: -webkit-inline-box;
  margin-top: 3px;
  vertical-align: top;
}

#managed-user-creation-status .id-text {
  display: -webkit-inline-box;
  margin-top: 1px;
  max-width: 480px;
  vertical-align: baseline;
}

.manager-pod.focused {
  background-color: rgb(66, 129, 244);
  opacity: 1;
}

.import-pod.imported.focused {
  background-color: rgb(238, 238, 238);
  opacity: 1;
}

.import-pod.focused {
  background-color: rgb(66, 129, 244);
  opacity: 1;
}

.manager-pod.focused .managed-user-creation-manager-email {
  color: #fff;
}

.manager-pod.focused .managed-user-creation-manager-name {
  color: #fff;
}

#managed-user-creation-import-pane {
  border: 1px solid #c8c8c8;
  height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
}

#managed-user-creation-import .page-title-explanation {
  padding-bottom: 10px;
  padding-top: 6px;
}

.manager-pod .password-error,
#managed-user-creation .password-error,
#managed-user-creation .duplicate-name {
  border: 1px solid red !important;
}

#managed-user-creation-image-picker {
  margin-top: 16px;
}

#managed-user-creation-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;
}

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

#managed-user-creation-image-grid > li {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  display: inline-block;
  margin: 4px;
  padding: 3px;
}

#managed-user-creation-image-grid [selected] {
  border: 2px solid rgb(0, 102, 204);
  padding: 2px;
}

#managed-user-creation-image-preview {
  float: right;
  margin: 4px;
  max-width: 220px;
  position: relative;
}

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

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

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

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

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

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

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

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

#managed-user-creation-image-stream-crop {
  -webkit-transition: -webkit-transform 200ms linear;
  height: 220px;
  overflow: hidden;
  position: relative;
  width: 220px;
}

.flip-x #managed-user-creation-image-stream-crop {
  -webkit-transform: rotateY(180deg);
}

.managed-user-creation-image-stream {
  border: solid 1px #cacaca;
  height: 220px;
  /* Center image for 4:3 aspect ratio. */
  left: -16.6%;
  position: absolute;
  visibility: hidden;
}

.online .managed-user-creation-image-stream {
  visibility: visible;
}

#managed-user-creation-image-preview-caption {
  color: dimGray;
  font-size: smaller;
  margin: 8px 4px;
}

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

#managed-user-creation-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] #managed-user-creation-flip-photo {
  left: 8px;
  right: auto;
}

/* "Flip photo" button is hidden during flip animation. */
.camera.online:not(.animation) #managed-user-creation-flip-photo,
.camera.phototaken:not(.animation) #managed-user-creation-flip-photo {
  opacity: 0.75;
}

#managed-user-creation-discard-photo,
#managed-user-creation-take-photo {
  display: none;
  height: 25px;
  margin: 4px 1px;
  padding: 0;
  width: 220px;
}

.camera:not(.live) #managed-user-creation-discard-photo {
  background: url('chrome://theme/IDR_USER_IMAGE_RECYCLE')
      no-repeat center center;
  display: block;
}

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

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

.managed-user-creation-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) .managed-user-creation-image-stream-area .spinner {
  display: block;
}