diff options
Diffstat (limited to 'chromium/ui/login/account_picker/chromeos_user_pod_row.css')
| -rw-r--r-- | chromium/ui/login/account_picker/chromeos_user_pod_row.css | 1218 |
1 files changed, 0 insertions, 1218 deletions
diff --git a/chromium/ui/login/account_picker/chromeos_user_pod_row.css b/chromium/ui/login/account_picker/chromeos_user_pod_row.css deleted file mode 100644 index 0fb30ac8fdd..00000000000 --- a/chromium/ui/login/account_picker/chromeos_user_pod_row.css +++ /dev/null @@ -1,1218 +0,0 @@ -/* 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 { - overflow: visible; -} - -/* Hide the pod row while images are loading. */ -podrow.images-loading { - visibility: hidden; -} - -pin-keyboard { - display: block; -} - -.pod { - -webkit-tap-highlight-color: transparent; - border-radius: 2px; - cursor: pointer; - opacity: 0.54; - outline: none; - position: absolute; - z-index: 0; -} - -.account-picker.flying-pods .pod { - transition: all 180ms; -} - -.pod .pin-container { - position: absolute; - width: 234px; - z-index: 3; -} - -.pod .pin-container.pin-enabled { - left: 36px; - opacity: 1; - top: 300px; - transition: opacity 200ms ease-in-out 180ms; - visibility: visible; -} - -.pod .pin-container.pin-disabled { - opacity: 0; /* Opacity is set to 1 after the pin element is loaded. */ - transition: none; - visibility: hidden; /* Needed because pin-keyboard's offsetHeight is - checked to determine if loaded. */ - z-index: -1; -} - -.pod.faded { - opacity: .75; -} - -.pod.focused { - cursor: default; - opacity: 1; - z-index: 1; -} - -.pod.focused[auth-type='userClick'] { - cursor: pointer; -} - -.pod.hovered { - opacity: 1; -} - -.user-image-pane { - height: 96px; - left: 105px; - position: absolute; - top: 54px; - transition: height 180ms ease-in-out, - left 180ms ease-in-out, - right 180ms ease-in-out, - top 180ms ease-in-out, - width 180ms ease-in-out; - width: 96px; - z-index: 3; -} - -html[dir=rtl] .user-image-pane { - left: auto; - right: 105px; -} - -.user-image-container { - align-items: center; - display: flex; - height: 100%; - justify-content: center; - width: 100%; -} - -.pod .user-image { - border-radius: 50%; - flex: none; - height: 100%; - width: 100%; -} - -.pod .user-image.switch-image-animation { - animation: switch-image 180ms; -} - -.pod.hovered .user-image { - display: none; -} - -.pod.focused .user-image { - display: none; -} - -.pod .animated-image { - display: none; -} - -.pod.hovered .animated-image { - display: block; -} - -.pod.focused .animated-image { - display: block; -} - -.pod .badge-container { - background: #FFF; - border-radius: 50%; - bottom: 0; - display: none; - height: 27px; - position: absolute; - right: 0; - width: 27px; -} - -.pod .badge-container iron-icon { - --iron-icon-height: 25px; - --iron-icon-width: 25px; - display: none; - padding: 0; -} - -.pod.legacy-supervised .badge-container, -.pod.legacy-supervised .legacy-supervised-badge { - display: block; -} - -/* 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; - position: absolute; -} - -html:not([screen=login-add-user]) .pod.focused .user-image { - opacity: 1; -} - -.pod.multiprofiles-policy-applied .user-image { - -webkit-filter: grayscale(100%); -} - -.main-pane { - z-index: 2; -} - -.name-container { - display: flex; - position: absolute; - top: 182px; -} - -.pod.focused:not(.multiprofiles-policy-applied):not(.public-account) .auth-container { - display: flex; - height: 40px; - left: 51px; - position: absolute; - top: 236px; -/* On chromeos we extend the width to cover the padding on the user pods. This - is so the submit button on chromeos can extend onto the padding as shown on - mocks. */ -<if expr="not chromeos"> - width: 160px; -</if> -<if expr="chromeos"> - width: 204px; -</if> -} - -html[dir=rtl] .pod.focused:not(.multiprofiles-policy-applied):not(.public-account) .auth-container { - left: auto; - right: 51px; -} - -.auth-container .submit-button[disabled] { - opacity: 0.34; -} - -.auth-container .submit-button { - --cr-icon-button--icon-size: 20px; - --cr-icon-button-size: 20px; - --cr-icon-button-fill-color: white; - margin: 15px 0 5px 0; - opacity: 1; -} - -.auth-container .custom-icon-shown .submit-button { - margin: 11px 0 5px 0; -} - -.name-container { - transition: transform 180ms; -} - -.pod.focused .name-container { - display: flex; -} - -.pod.focused.multiprofiles-policy-applied .name-container { - display: flex; -} - -.name { - color: #FFFFFF; - flex: auto; - font: 24px Roboto; - font-weight: 300; /* roboto-light */ - outline: none; - overflow: hidden; - text-align: center; - text-overflow: ellipsis; - white-space: nowrap; -} - -.auth-container, -.password-entry-container, -.reauth-hint-container { - display: none; -} - -.input-line { - display: none; - height: 1px; - opacity: 0.34; - position: absolute; - stroke: #FFFFFF; - stroke-width: 1px; - top: 40px; - width: 204px; -} - -.input-present .input-line { - opacity: 1; -} - -.pod[is-active-directory] .reauth-warning { - display: none; -} - -.pod[auth-type='offlinePassword'].focused .password-entry-container, -.pod[auth-type='forceOfflinePassword'].focused .password-entry-container, -.pod[auth-type='offlinePassword'].focused .input-line, -.pod[auth-type='forceOfflinePassword'].focused .input-line { - display: flex; - flex: auto; -} - -.password-container { - height: 34px; - margin-top: 6px; - width: 184px; /* Input line width - Submit button width */ -} - -.capslock-on .password-container { - width: 164px; /* Input line width - Caps lock icon width */ -} - -.custom-icon-shown .password-container { - -webkit-padding-start: 8px; - height: 39px; - margin-top: 1px; - width: 149px; /* Input line width - - (Submit button width + Custom icon width) */ -} - -.capslock-on .custom-icon-shown .password-container { - width: 129px; /* Input line width - - (Submit button width + Caps lock icon width + - Custom icon width) */ -} - -.pod input[type='password'] { - background-color: transparent; - border: none; - color: rgba(255, 255, 255, .67); - font-family: "Roboto"; - font-size: 16px; - height: 100%; - letter-spacing: 6px; - padding: 0; - width: 100%; -} - -.pod input[type='password']::-webkit-input-placeholder { - color: rgba(255, 255, 255, .67); - font-size: 13px; - letter-spacing: 0; -} - -.capslock-hint-container { - display: none; -} - -<if expr="chromeos"> -.capslock-on .capslock-hint-container { - display: block; - flex: none; - height: 40px; - position: relative; - width: 20px; -} -</if> - -.capslock-hint { - --iron-icon-height: 22px; - --iron-icon-width: 22px; - opacity: 0.34; - padding: 13px 0 5px; -} - -.custom-icon-shown .capslock-hint { - padding: 12px 0 6px; -} - -.input-present .capslock-hint { - opacity: 1; -} - -.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; - margin: 8px 0; - width: 27px; -} - -.custom-icon.faded { - 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-locked-to-be-activated { - background-image: - url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED); -} - -.custom-icon-locked-to-be-activated.icon-with-tooltip:hover { - background-image: - url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED_HOVER); -} - -.custom-icon-locked-to-be-activated.interactive-custom-icon:active { - background-image: - url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED_PRESSED); -} - -.custom-icon-locked-with-proximity-hint { - background-image: - url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT); -} - -.custom-icon-locked-with-proximity-hint.icon-with-tooltip:hover { - background-image: - url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT_HOVER); -} - -.custom-icon-locked-with-proximity-hint.interactive-custom-icon:active { - background-image: - url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT_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_LOCKED_TO_BE_ACTIVATED) - url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED_HOVER) - url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED_PRESSED) - url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT) - url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT_HOVER) - url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT_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 { - animation: easy-unlock-spinner-animation 2s steps(45) infinite; - background-image: url(chrome://theme/IDR_EASY_UNLOCK_SPINNER); -} - -@keyframes easy-unlock-spinner-animation { - from { background-position: 0 } - to { background-position: -1215px } -} - -.interactive-custom-icon { - cursor: pointer; -} - -.pod[auth-type='onlineSignIn'] .custom-icon-container { - display: none; -} - -.fingerprint-icon-container, -.custom-icon-container { - display: flex; - flex: none; - flex-direction: column; - height: 43px; - width: 27px; -} - -.pod[auth-type='onlineSignIn'] .reauth-hint-container { - display: flex; - justify-content: center; - margin-top: 8px; - width: 100%; -} - -.reauth-hint-container .reauth-warning { - -webkit-mask-image: url(../../../ui/webui/resources/images/warning.svg); - -webkit-mask-position: center; - -webkit-mask-repeat: no-repeat; - -webkit-mask-size: 20px; - background-color: #E67C73; - width: 24px; -} - -.reauth-hint-container .reauth-name-hint { - align-self: center; - color: #E67C73; - font-size: 12px; - outline: none; - overflow: hidden; - padding: 0 6px; - text-align: center; - text-overflow: ellipsis; - white-space: nowrap; -} - -.user-type-icon-area { - background-color: white; - border-radius: 2px; - position: absolute; - top: 0; -} - -.action-box-area { - opacity: 0; - outline: none; - transition: opacity 100ms; - z-index: 4; -} - -.action-box-area:focus, -.action-box-area.hovered, -.action-box-area.active, -.action-box-area.forced { - opacity: 1; -} - -.action-box-button { - --cr-icon-button-icon-size: 24px; - --cr-icon-button-size: 28px; - margin-inline-end: 0; - margin-inline-start: 8px; - margin-top: 3px; -} - -.action-box-button.ripple-circle { - background: #FFF; - border-radius: 50%; - opacity: .08; - position: absolute; - transform: scale(0); -} - -.action-box-area.active .action-box-button.ripple-circle { - animation: ripple 360ms; - transform: scale(1); -} - -@keyframes ripple { - 0% { transform: scale(0); } - 30% { transform: scale(1); } - 100% { transform: scale(1); } -} - -.action-box-area .action-box-icon { - /* overriden in chrome/browser/resources/user_manager/user_manager.css */ - display: none; -} - -.user-image-gradient-area { - /* overriden in chrome/browser/resources/user_manager/user_manager.css */ - display: none; -} - -.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.legacySupervised .user-type-icon-image { - background-image: url(../../webui/resources/images/supervisor_account.svg); - background-size: 18px; -} - -.user-type-icon-area.child .user-type-icon-image { - background-image: url(../../webui/resources/images/account_child_invert.svg); - background-size: 18px; -} - -.user-type-icon-area.policy .user-type-icon-image { - background-image: url(../../webui/resources/images/business.svg); - background-size: 18px; -} - -.user-type-icon-area.app .user-type-icon-image { - background-image: url(chrome://theme/IDR_KIOSK_APP_USER_POD_ICON); -} - -.fingerprint-icon-container.hidden { - display: none; -} - -.fingerprint-icon-container.default .fingerprint-icon-image { - background-image: url(../../webui/resources/images/fingerprint_default.svg); -} - -.fingerprint-icon-container.default:hover .fingerprint-icon-image { - background-image: url(../../webui/resources/images/fingerprint_signin.svg); -} - -.fingerprint-icon-container.signin .fingerprint-icon-image { - background-image: url(../../webui/resources/images/fingerprint_signin.svg); -} - -.fingerprint-icon-container.failed .fingerprint-icon-image { - background-image: url(../../webui/resources/images/icon_error_outline.svg); -} - -.action-box-menu { - display: none; - position: absolute; - z-index: 6; -} - -.action-box-area.active ~ .action-box-menu { - -webkit-margin-start: 12px; - animation: fade-in 180ms; - background-color: rgba(0, 0, 0, 0.8); - border-radius: 2px; - display: flex; - flex-direction: column; - font-size: 13px; - margin-top: 3px; - 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: 200px; -} - -.action-box-area.active ~ .action-box-menu.menu-moved-up { - bottom: 207px; -} - -.action-box-area.menu-moved-up { - transform: rotate(180deg); -} - -.action-box-menu-title { - color: #FFFFFF; - display: flex; - flex-direction: column; - padding: 13px 14px 18px; -} - -.action-box-menu-title:focus { - outline-style: none; -} - -.action-box-menu-title-name, -.action-box-menu-title-email { - flex: none; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.action-box-menu-title-name { - padding-bottom: 7px; -} - -.action-box-menu-title-email { - opacity: 0.54; -} - -.action-box-menu-remove { - border-top: 0.17px solid rgba(255, 255, 255, .34); - color: #7BAAF7; - outline: none; - padding: 18px 14px; -} - -.action-box-menu-remove:focus { - font-weight: bold; -} - -.action-box-remove-user-warning { - border-top: 0.17px solid rgba(255, 255, 255, .34); - color: white; - font-size: 13px; - line-height: 18px; - padding: 13px 14px 18px; -} - -.action-box-remove-user-warning > div, -.action-box-remove-user-warning > table { - padding-bottom: 19px; -} - -.action-box-remove-non-owner-user-warning-text span.email { - display: block; - overflow: hidden; - text-overflow: ellipsis; -} - -.total-count { - font-weight: bold; -} - -.action-box-remove-user-warning-table-nonsync { - border-spacing: 0; - width: 100%; -} - -.action-box-remove-user-warning-table td { - padding: 0; -} - -.action-box-remove-user-warning-table-numbers { - color: #757575; - text-align: end; -} - -/* Hide dialog elements not in a correct category. Only combinations currently - in use are included here. */ -.pod.legacy-supervised .non-sync, -.pod.legacy-supervised .action-box-remove-user-warning-text, -.pod.legacy-supervised .action-box-remove-non-owner-user-warning-text, -.pod:not(.legacy-supervised) - .action-box-remove-legacy-supervised-user-warning-text, -.pod.synced .non-sync { - display: none; -} - -.user-type-bubble { - background-color: rgba(0, 0, 0, 0.9); - border-radius: 4px; - color: #FFF; - font-family: "Roboto"; - font-size: 13px; - left: 36px; - opacity: 0; - padding: 17px; - position: absolute; - top: 35px; - transition: all 100ms; - visibility: hidden; - width: 200px; - z-index: 7; -} - -html[dir=rtl] .user-type-bubble { - left: auto; - right: 36px; -} - -.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; - text-align: center; -} - -/**** Public account user pod rules *******************************************/ - -.public-account-expanded > div, -.public-account-expanded .pod:not(.expanded) { - opacity: 0; /* Cannot be replaced with display: none, otherwise the tab - indexes of other elements in the pod row will be ignored. */ -} - -.pod.public-account.expanded { - animation: fade-in 180ms; - background-color: rgba(0, 0, 0, 0.56); - border-radius: 2px; - height: 324px; - transition: none; - width: 622px; -} - -.expanded-pane { - display: none; -} - -.pod.public-account.expanded .expanded-pane { - border-left: 0.17px solid rgba(255, 255, 255, .34); - color: rgba(255, 255, 255, .87); - display: block; - font-family: "Roboto"; - font-size: 13px; - height: 324px; - left: 322px; - overflow: hidden; - position: absolute; - top: 0; - width: 300px; - z-index: 1; -} - -html[dir=rtl] .expanded-pane { - float: left; -} - -.expanded-pane-container { - margin-left: 28px; - margin-right: 28px; -} - -.reminder { - margin-top: 20px; -} - -.language-and-input-section { - display: none; -} - -.pod.public-account.expanded.advanced .language-and-input-section { - display: block; - margin-left: 28px; - margin-right: 28px; - margin-top: 37px; - opacity: 1; -} - -.select-with-label { - display: flex; - flex-direction: column; - margin-top: 20px; -} - -.language-select-label, -.keyboard-select-label { - opacity: .34; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 170px; -} - -.select-container { - height: 16px; - margin-top: 5px; - width: 178px; -} - -.language-select, -.keyboard-select { - width: 100%; -} - -.enter-button { - flex: none; -} - -.pod.public-account .full-name { - display: none; - left: 50%; - position: absolute; - top: 100%; - z-index: 3; -} - -html[dir=rtl] .pod.public-account .full-name { - left: auto; - right: 50%; -} - -.pod.public-account .name-container:hover .full-name { - animation: fade-in 180ms; - background-color: rgba(0, 0, 0, 0.8); - border-radius: 2px; - color: rgba(255, 255, 255, .87); - display: flex; - font-size: 13px; - padding: 8px; -} - -.pod .public-account-info-container { - display: none; -} - -.pod.public-account .public-account-info-container { - display: block; - position: absolute; - top: 230px; -} - -.public-account-info-container .learn-more { - --iron-icon-height: 12px; - --iron-icon-width: 12px; - display: block; - opacity: .67; - padding: 0; - position: absolute; -} - -.public-account-info-container .info { - -webkit-padding-start: 8px; - color: rgba(255, 255, 255, .67); - font-family: "Roboto"; - font-size: 13px; - overflow: hidden; - position: absolute; - text-overflow: ellipsis; - white-space: nowrap; -} - -.pod.public-account .button-container { - background: rgba(255, 255, 255, .17); - border-radius: 50%; - display: none; - height: 40px; - left: 133px; - position: absolute; - top: 59px; - width: 40px; -} - -html[dir=rtl] .pod.public-account .button-container { - left: auto; - right: 133px; -} - -.pod.public-account .button-container.forced, -.pod.public-account.hovered .button-container, -.pod.public-account.focused .button-container { - display: block; -} - -.pod.public-account.expanded .button-container { - display: none; -} - -.public-account-submit-button { - --cr-icon-button-fill-color: #FFF; - --cr-icon-button-size: 40px; - opacity: 1; -} - -.monitoring-container { - margin-top: 106px; -} - -.advanced .monitoring-container { - margin-top: 35px; - transition: margin-top 180ms; -} - -.monitoring-learn-more { - color: #7BAAF7; - text-decoration: none; -} - -.monitoring-learn-more:focus, -.language-and-input:focus { - font-weight: bold; - outline: none; -} - -.monitoring-dialog-container .cr-dialog-shield { - background: black; - opacity: 0.5; -} - -.monitoring-dialog-container .cr-dialog-buttons { - display: none; -} - -.monitoring-dialog-container .cr-dialog-frame { - height: 170px; - padding: 0px; - position: relative; - width: 430px; -} - -.monitoring-dialog-container .cr-dialog-close { - color: grey; - height: 34px; - position: absolute; - top: 0px; - width: 34px; -} - -.monitoring-dialog-container .cr-dialog-title { - font-size: 16px; - font-weight: bold; - left: 20px; - position: absolute; - top: 15px; -} - -.monitoring-dialog-container .cr-dialog-text { - color: grey; - font-size: 13px; - overflow: visible; - position: absolute; - top: 20px; -} - -.monitoring-dialog-container .cr-dialog-item { - -webkit-margin-start: 42px; - display: list-item; - margin-bottom: -6px; -} - -.language-and-input-container { - margin-top: 20px; - flex: none; -} - -.language-and-input { - color: #7BAAF7; - text-decoration: none; -} - -.enter-button-container { - background-color: #4285F4; - border-radius: 50%; - bottom: 28px; - height: 40px; - position: absolute; - right: 28px; - width: 40px; -} - -html[dir=rtl] .enter-button-container { - left: 28px; - right: auto; -} - -.language-and-input-dropdown { - -webkit-margin-start: 6px; - height: 16px; - padding: 0; - width: 16px; -} - -/* Animations for the animated ellipsis: */ -.animated-ellipsis-component0 { - animation: ellipsis-component0 1.5s infinite; -} - -@keyframes ellipsis-component0 { - 0% { opacity: 0; } - 25% { opacity: 1; } - 50% { opacity: 1; } - 75% { opacity: 1; } - 100% { opacity: 0; } -} - -.animated-ellipsis-component1 { - animation: ellipsis-component1 1.5s infinite; -} - -@keyframes ellipsis-component1 { - 0% { opacity: 0; } - 25% { opacity: 0; } - 50% { opacity: 1; } - 75% { opacity: 1; } - 100% { opacity: 0; } -} - -.animated-ellipsis-component2 { - animation: ellipsis-component2 1.5s infinite; -} - -@keyframes ellipsis-component2 { - 0% { opacity: 0; } - 25% { opacity: 0; } - 50% { opacity: 0; } - 75% { opacity: 1; } - 100% { opacity: 0; } -} - -.large-pod { - height: 346px; - width: 306px; -} - -.pod.pin-enabled .large-pod { - height: 618px; -} - -.pod.public-account.expanded .large-pod { - left: 8px; - position: absolute; - top: 8px; -} - -.small-pod { - height: 74px; - width: 304px; -} - -.small-pod.extra-small { - height: 60px; - width: 282px; -} - -.small-user-image-container { - align-items: center; - height: 74px; - justify-content: center; - position: absolute; - transition: height 180ms ease-in-out, - left 180ms ease-in-out, - right 180ms ease-in-out, - top 180ms ease-in-out, - width 180ms ease-in-out; - width: 74px; -} - -.small-pod.extra-small .small-user-image-container { - height: 60px; - width: 60px; -} - -.small-pod-name { - color: #FFFFFF; - flex: auto; - font: 20px Roboto; - font-weight: 300; /* roboto-light */ - height: 28px; - left: 90px; - opacity: 1; - outline: none; - overflow: hidden; - padding: 23px 0; - position: absolute; - text-overflow: ellipsis; - white-space: nowrap; - width: 214px; -} - -html[dir=rtl] .small-pod-name { - left: auto; - right: 90px; -} - -.small-pod.extra-small .small-pod-name { - left: 76px; - padding: 16px 0; - width: 190px; -} - -html[dir=rtl] .small-pod.extra-small .small-pod-name { - left: auto; - right: 76px; -} - -.pod-background { - background-color: rgba(0, 0, 0, 0.9); - border-radius: 4px; - display: none; - position: absolute; -} - -.large-pod .pod-background { - height: 378px; - left: -16px; - top: -16px; - width: 338px; -} - -.small-pod .pod-background { - height: 90px; - left: -8px; - top: -8px; - width: 320px; -} - -.pod.show-pod-background:not(.expanded) .large-pod .pod-background, -.pod.show-pod-background .small-pod:not(.extra-small) .pod-background { - display: block; -} - -@keyframes switch-image { - from { transform: rotate3d(0, 1, 0, 90deg); } - to { transform: none; } -} - -@keyframes fade-in { - from { opacity: 0; } - to { opacity: 1; } -} |