| /* Copyright 2014 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 user pods row of account picker UI. |
| */ |
| |
| podrow { |
| /* Temporarily disabled because animation interferes with updating screen's |
| size. */ |
| height: 100%; |
| overflow: visible; |
| position: absolute; |
| width: 100%; |
| } |
| |
| /* Hide the pod row while images are loading. */ |
| podrow.images-loading { |
| visibility: hidden; |
| } |
| |
| .pod { |
| -webkit-tap-highlight-color: transparent; |
| background-color: white; |
| border-radius: 2px; |
| box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), |
| 0 2px 6px rgba(0, 0, 0, 0.15), |
| 0 3px 0 rgba(0, 0, 0, 0.08); |
| cursor: pointer; |
| height: 213px; |
| outline: none; |
| position: absolute; |
| transform: scale3d(0.9, 0.9, 0.9); |
| width: 180px; |
| z-index: 0; |
| } |
| |
| .account-picker.flying-pods .pod { |
| transition: all 180ms; |
| } |
| |
| .pod.faded { |
| opacity: .75; |
| } |
| |
| podrow[ncolumns='6'] .pod { |
| transform: scale3d(0.8, 0.8, 0.8); |
| } |
| |
| .pod.focused { |
| /* Focused pod has the same size no matter how many pods. */ |
| cursor: default; |
| transform: scale3d(1, 1, 1) !important; |
| z-index: 1; |
| } |
| |
| .pod.focused[auth-type='userClick'] { |
| cursor: pointer; |
| } |
| |
| .user-image-pane { |
| background-color: white; |
| height: 160px; |
| left: 10px; |
| position: absolute; |
| top: 10px; |
| width: 160px; |
| z-index: 3; |
| } |
| |
| html[dir=rtl] .user-image-pane { |
| left: auto; |
| right: 10px; |
| } |
| |
| .user-image-container { |
| align-items: center; |
| display: flex; |
| height: 100%; |
| justify-content: center; |
| width: 100%; |
| } |
| |
| .pod .user-image { |
| flex: none; |
| } |
| |
| /* TODO(noms): Refactor this out into a CrOS-specific file and simplify the |
| style rule once it is included on CrOS only. crbug.com/397638 */ |
| html:not([screen=login-add-user]) .pod .user-image { |
| max-height: 160px; |
| max-width: 160px; |
| opacity: 0.7; |
| } |
| |
| html:not([screen=login-add-user]) .pod.focused .user-image { |
| opacity: 1; |
| } |
| |
| .pod.multiprofiles-policy-applied .user-image { |
| -webkit-filter: grayscale(100%); |
| } |
| |
| .signed-in-indicator { |
| display: none; |
| } |
| |
| .pod.signed-in .signed-in-indicator { |
| background-color: rgba(0, 0, 0, 0.5); |
| color: white; |
| display: block; |
| font-size: small; |
| padding: 3px 0; |
| position: absolute; |
| text-align: center; |
| top: 0; |
| width: 100%; |
| } |
| |
| .main-pane { |
| left: 10px; |
| position: absolute; |
| top: 10px; |
| z-index: 2; |
| } |
| |
| html[dir=rtl] .main-pane { |
| left: auto; |
| right: 10px; |
| } |
| |
| .name-container, |
| .pod.focused:not(.multiprofiles-policy-applied) .auth-container { |
| background-color: white; |
| display: flex; |
| position: absolute; |
| top: 160px; |
| width: 160px; |
| } |
| |
| .name-container { |
| transition: transform 180ms; |
| } |
| |
| .pod.focused .name-container { |
| display: none; |
| } |
| |
| .pod.focused.multiprofiles-policy-applied .name-container { |
| display: flex; |
| } |
| |
| .name { |
| color: #565656; |
| /* This should be 15.6px - the equivalent of 14px at 90% scale. */ |
| flex: auto; |
| font-size: 16px; |
| margin-top: 12px; |
| outline: none; |
| overflow: hidden; |
| padding: 0 6px; |
| text-align: center; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| .learn-more-container, |
| .auth-container, |
| .password-entry-container, |
| .signin-button-container { |
| display: none; |
| } |
| |
| .pod[auth-type='offlinePassword'].focused .password-entry-container, |
| .pod[auth-type='forceOfflinePassword'].focused .password-entry-container { |
| display: flex; |
| flex: auto; |
| } |
| |
| .password-container { |
| flex: auto; |
| } |
| |
| .pod input[type='password'] { |
| background-color: white; |
| border: none; |
| padding: 4px 6px; |
| position: relative; |
| top: 6px; |
| width: 100%; |
| } |
| |
| .capslock-hint-container { |
| display: none; |
| } |
| |
| .capslock-on .capslock-hint-container { |
| display: block; |
| flex: none; |
| } |
| |
| .capslock-hint { |
| -webkit-margin-end: 6px; |
| -webkit-margin-start: -2px; |
| position: relative; |
| top: 11px; |
| } |
| |
| .password-label, |
| .signin-transition-container { |
| display: none; |
| } |
| |
| .pod[auth-type='userClick']:not(.signing-in) .password-label, |
| .pod[auth-type='userClick'].signing-in .signin-transition-container { |
| color: grey; |
| display: block; |
| flex: auto; |
| margin-top: 11px; |
| outline: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| .custom-icon { |
| -webkit-margin-end: 0; |
| -webkit-margin-start: auto; |
| background-position: center; |
| background-repeat: no-repeat; |
| flex: none; |
| height: 27px; |
| width: 27px; |
| } |
| |
| .custom-icon.faded { |
| -webkit-transition: opacity 200ms ease-in-out, |
| visibility 200ms ease-in-out; |
| } |
| |
| .custom-icon-hardlocked { |
| background-image: url('chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED'); |
| } |
| |
| .custom-icon-hardlocked.icon-with-tooltip:hover { |
| background-image: url('chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED_HOVER'); |
| } |
| |
| .custom-icon-hardlocked.interactive-custom-icon:active { |
| background-image: url('chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED_PRESSED'); |
| } |
| |
| .custom-icon-locked { |
| background-image: url('chrome://theme/IDR_EASY_UNLOCK_LOCKED'); |
| } |
| |
| .custom-icon-locked.icon-with-tooltip:hover { |
| background-image: url('chrome://theme/IDR_EASY_UNLOCK_LOCKED_HOVER'); |
| } |
| |
| .custom-icon-locked.interactive-custom-icon:active { |
| background-image: url('chrome://theme/IDR_EASY_UNLOCK_LOCKED_PRESSED'); |
| } |
| |
| .custom-icon-unlocked { |
| background-image: url('chrome://theme/IDR_EASY_UNLOCK_UNLOCKED'); |
| } |
| |
| .custom-icon-unlocked.icon-with-tooltip:hover { |
| background-image: url('chrome://theme/IDR_EASY_UNLOCK_UNLOCKED_HOVER'); |
| } |
| |
| .custom-icon-unlocked.interactive-custom-icon:active { |
| background-image: url('chrome://theme/IDR_EASY_UNLOCK_UNLOCKED_PRESSED'); |
| } |
| |
| /** |
| * Preloads resources for custom icon. Without this, the resources will be |
| * loaded when CSS properties using them are first applied, which has visible |
| * delay and may cause a short white flash when the icon background changes. |
| */ |
| .custom-icon::after { |
| content: |
| url('chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED') |
| url('chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED_HOVER') |
| url('chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED_PRESSED') |
| url('chrome://theme/IDR_EASY_UNLOCK_LOCKED') |
| url('chrome://theme/IDR_EASY_UNLOCK_LOCKED_HOVER') |
| url('chrome://theme/IDR_EASY_UNLOCK_LOCKED_PRESSED') |
| url('chrome://theme/IDR_EASY_UNLOCK_UNLOCKED') |
| url('chrome://theme/IDR_EASY_UNLOCK_UNLOCKED_HOVER') |
| url('chrome://theme/IDR_EASY_UNLOCK_UNLOCKED_PRESSED'); |
| display: none; |
| } |
| |
| .custom-icon-spinner { |
| -webkit-animation: easy-unlock-spinner-animation 2s steps(45) infinite; |
| background-image: url('chrome://theme/IDR_EASY_UNLOCK_SPINNER'); |
| } |
| |
| @-webkit-keyframes easy-unlock-spinner-animation { |
| from { background-position: 0 } |
| to { background-position: -1215px } |
| } |
| |
| .interactive-custom-icon { |
| cursor: pointer; |
| } |
| |
| .custom-icon-container { |
| display: flex; |
| flex: none; |
| flex-direction: column; |
| height: 40px; |
| justify-content: center; |
| width: 40px; |
| } |
| |
| .pod[auth-type='onlineSignIn'] .signin-button-container, |
| .launch-app-button-container { |
| display: block; |
| flex: auto; |
| text-align: center; |
| } |
| |
| .signin-button, |
| .launch-app-button { |
| display: inline; |
| margin-top: 6px !important; |
| max-width: 100%; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .action-box-area, |
| .user-type-icon-area { |
| background-color: white; |
| border-radius: 2px; |
| position: absolute; |
| top: 0; |
| } |
| |
| .action-box-area { |
| opacity: 0; |
| outline: none; |
| right: 0; |
| transition: opacity 100ms; |
| z-index: 4; |
| } |
| |
| html[dir=rtl] .action-box-area { |
| left: 0; |
| right: auto; |
| } |
| |
| .action-box-area:focus, |
| .action-box-area.hovered, |
| .action-box-area.active { |
| opacity: 1; |
| } |
| |
| .action-box-button { |
| background-image: url('chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_NORMAL'); |
| height: 13px; |
| margin: 5px; |
| width: 13px; |
| } |
| |
| .action-box-button:hover { |
| background-image: url('chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_HOVER'); |
| } |
| |
| .action-box-area.active .action-box-button { |
| background-image: url('chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_PRESSED'); |
| } |
| |
| .user-type-icon-area { |
| left: 0; |
| z-index: 5; |
| } |
| |
| html[dir=rtl] .user-type-icon-area { |
| left: auto; |
| right: 0; |
| } |
| |
| .user-type-icon-image { |
| height: 16px; |
| margin: 5px; |
| width: 16px; |
| } |
| |
| .user-type-icon-area.supervised .user-type-icon-image { |
| background-image: url('chrome://theme/IDR_SUPERVISED_USER_ICON'); |
| } |
| |
| .user-type-icon-area.policy .user-type-icon-image { |
| background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY'); |
| } |
| |
| .user-type-icon-area.app .user-type-icon-image { |
| background-image: url('chrome://theme/IDR_KIOSK_APP_USER_POD_ICON'); |
| } |
| |
| .action-box-menu { |
| display: none; |
| z-index: 6; |
| } |
| |
| .action-box-area.active ~ .action-box-menu { |
| background-color: white; |
| border: 1px solid lightgray; |
| border-radius: 2px; |
| display: flex; |
| flex-direction: column; |
| font-size: 13px; |
| position: absolute; |
| right: 5px; |
| width: 220px; |
| } |
| |
| .action-box-area.active ~ .action-box-menu.left-edge-offset { |
| left: 0 !important; |
| } |
| |
| .action-box-area.active ~ .action-box-menu.right-edge-offset { |
| right: 0 !important; |
| } |
| |
| .action-box-area.active ~ .action-box-menu:not(.menu-moved-up) { |
| top: 18px; |
| } |
| |
| .action-box-area.active ~ .action-box-menu.menu-moved-up { |
| bottom: 210px; |
| } |
| |
| .action-box-area.menu-moved-up { |
| -webkit-transform: rotate(180deg); |
| } |
| |
| html[dir=rtl] .action-box-area.active ~ .action-box-menu { |
| left: 5px; |
| right: auto; |
| } |
| |
| .action-box-menu-title { |
| color: #b4b4b4; |
| display: flex; |
| flex-direction: column; |
| padding: 7px 20px; |
| } |
| |
| .action-box-menu-title-name, |
| .action-box-menu-title-email { |
| flex: none; |
| height: 23px; |
| line-height: 19px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| .action-box-menu-remove { |
| border-top: 1px solid lightgray; |
| line-height: 19px; |
| min-height: 24px; |
| outline: none; |
| padding: 12px 20px 7px; |
| } |
| |
| .action-box-menu-remove:hover, |
| .action-box-menu-remove:focus { |
| background-color: #f3f3f3; |
| } |
| |
| .action-box-remove-user-warning { |
| border-top: 1px solid lightgray; |
| font-size: 12px; |
| line-height: 18px; |
| padding: 20px; |
| } |
| |
| .action-box-remove-user-warning-text, |
| .action-box-remove-supervised-user-warning-text { |
| padding-bottom: 20px; |
| } |
| |
| .action-box-remove-user-warning .remove-warning-button { |
| width: 100%; |
| } |
| |
| .user-type-bubble { |
| background-color: white; |
| border: 1px solid lightgray; |
| border-radius: 2px; |
| left: 5px; |
| opacity: 0; |
| padding: 17px; |
| position: absolute; |
| top: 20px; |
| transition: all 100ms; |
| visibility: hidden; |
| width: 200px; |
| z-index: 7; |
| } |
| |
| html[dir=rtl] .user-type-bubble { |
| left: auto; |
| right: 5px; |
| } |
| |
| .bubble-shown, |
| .user-type-icon-area.policy:hover ~ .user-type-bubble { |
| opacity: 1; |
| visibility: visible; |
| } |
| |
| .user-type-bubble-header { |
| font-weight: bold; |
| margin-bottom: 14px; |
| } |
| |
| /**** Public account user pod rules *******************************************/ |
| |
| .pod.public-account.expanded { |
| width: 500px; |
| } |
| |
| .pod.public-account.expanded.advanced { |
| width: 610px; |
| } |
| |
| .pod.public-account.focused .name-container { |
| display: flex; |
| } |
| |
| .pod.public-account.expanded .name-container { |
| transform: translateY(-34px); |
| } |
| |
| .pod.public-account .learn-more-container { |
| display: block; |
| flex: none; |
| } |
| |
| .pod.public-account .learn-more { |
| background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY'); |
| height: 16px; |
| position: relative; |
| top: 16px; |
| width: 16px; |
| } |
| |
| .expanded-pane { |
| display: none; |
| } |
| |
| .pod.public-account.animating .expanded-pane, |
| .pod.public-account.expanded .expanded-pane { |
| display: block; |
| font-size: 12px; |
| margin: 10px; |
| overflow: hidden; |
| z-index: 1; |
| } |
| |
| .expanded-pane-contents { |
| display: flex; |
| flex-direction: column; |
| float: right; |
| height: 193px; |
| width: 490px; |
| } |
| |
| .pod.public-account.transitioning-to-advanced .expanded-pane-contents { |
| transition: width 180ms; |
| } |
| |
| .pod.public-account.expanded.advanced .expanded-pane-contents { |
| width: 600px; |
| } |
| |
| html[dir=rtl] .expanded-pane-contents { |
| float: left; |
| } |
| |
| .side-container { |
| -webkit-margin-start: 200px; |
| flex: auto; |
| } |
| |
| .expanded-pane-name { |
| font-size: 19px; |
| margin-bottom: 11px; |
| margin-top: -2px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| .reminder { |
| font-weight: bold; |
| } |
| |
| .language-and-input-section { |
| display: none; |
| } |
| |
| .pod.public-account.transitioning-to-advanced .language-and-input-section { |
| display: block; |
| opacity: 0; |
| transition: opacity 180ms ease 180ms; |
| } |
| |
| .pod.public-account.expanded.advanced .language-and-input-section { |
| display: block; |
| opacity: 1; |
| } |
| |
| .select-with-label { |
| display: flex; |
| margin-top: 20px; |
| } |
| |
| .language-select-label, |
| .keyboard-select-label { |
| flex: none; |
| margin-top: 3px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| width: 170px; |
| } |
| |
| .select-container { |
| flex: auto; |
| } |
| |
| .language-select, |
| .keyboard-select { |
| width: 100%; |
| } |
| |
| .bottom-container { |
| -webkit-margin-start: 10px; |
| display: flex; |
| flex: none; |
| font-size: 13px; |
| } |
| |
| .expanded-pane-learn-more-container, |
| .enter-button { |
| flex: none; |
| } |
| |
| .expanded-pane-learn-more { |
| background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY'); |
| height: 16px; |
| position: relative; |
| top: 6px; |
| width: 16px; |
| } |
| |
| .info { |
| flex: auto; |
| margin: 5px 10px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| .language-and-input-container { |
| -webkit-margin-end: 25px; |
| flex: none; |
| } |
| |
| .language-and-input { |
| color: rgb(49, 106, 197); |
| position: relative; |
| text-decoration: none; |
| top: 4px; |
| } |
| |
| .pod.public-account.expanded.advanced .language-and-input-container { |
| display: none; |
| } |
| |
| .enter-button { |
| font-size: 14px; |
| } |
| |
| /* Animations for the animated ellipsis: */ |
| .animated-ellipsis-component0 { |
| -webkit-animation: ellipsis-component0 1.5s infinite; |
| } |
| |
| @-webkit-keyframes ellipsis-component0 { |
| 0% { opacity: 0; } |
| 25% { opacity: 1; } |
| 50% { opacity: 1; } |
| 75% { opacity: 1; } |
| 100% { opacity: 0; } |
| } |
| |
| .animated-ellipsis-component1 { |
| -webkit-animation: ellipsis-component1 1.5s infinite; |
| } |
| |
| @-webkit-keyframes ellipsis-component1 { |
| 0% { opacity: 0; } |
| 25% { opacity: 0; } |
| 50% { opacity: 1; } |
| 75% { opacity: 1; } |
| 100% { opacity: 0; } |
| } |
| |
| .animated-ellipsis-component2 { |
| -webkit-animation: ellipsis-component2 1.5s infinite; |
| } |
| |
| @-webkit-keyframes ellipsis-component2 { |
| 0% { opacity: 0; } |
| 25% { opacity: 0; } |
| 50% { opacity: 0; } |
| 75% { opacity: 1; } |
| 100% { opacity: 0; } |
| } |