| /* 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 .step-controls { |
| -webkit-padding-end: 20px; |
| bottom: 20px; |
| } |
| |
| #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; |
| position: absolute; |
| } |
| |
| .below-marketing::-webkit-scrollbar { |
| width: 8px; |
| } |
| |
| .below-marketing::-webkit-scrollbar-track-piece { |
| background: #888 |
| } |
| |
| .below-marketing::-webkit-scrollbar-thumb { |
| background: #eee |
| } |
| |
| #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 40px 0; |
| } |
| |
| #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-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: 6px; |
| width: 626px; |
| } |
| |
| .import-pod .import-pod-name { |
| color: #000; |
| display: inline; |
| max-height: 30px; |
| 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; |
| } |
| |
| .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 { |
| -webkit-transition: -webkit-transform 200ms linear; |
| display: block; |
| max-height: 220px; |
| max-width: 220px; |
| } |
| |
| .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; |
| } |
| |
| 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 { |
| 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 0; |
| 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; |
| } |
| |
| .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; |
| } |