| /* Copyright 2014 The Chromium Authors |
| * 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 Out of the box experience (OOBE) flow, |
| * sign in and lock screens. |
| */ |
| |
| :root { |
| --shelf-area-height-base: 57px; |
| --oobe-oobe-dialog-height-base: 504px; |
| --oobe-oobe-dialog-width-base: 461px; |
| --oobe-bg-color: var(--cros-bg-color); |
| --oobe-container-border-radius: 2px; |
| --oobe-container-elevation: none; |
| } |
| :root.jelly-enabled { |
| --oobe-bg-color: var(--cros-sys-app_base_shaded); |
| } |
| :root.simon-enabled { |
| --oobe-container-border-radius: 24px; |
| /* TODO(b/268463435) Migrate to cros.sys.app-elevation3 when available */ |
| --oobe-container-elevation: 0 12px 12px 0 var(--cros-shadow-color-key); |
| } |
| |
| html, |
| body { |
| background-color: var(--oobe-bg-color); |
| height: 100%; |
| transition: background-color 250ms linear; |
| width: 100%; |
| } |
| html.simon-enabled, |
| :root.simon-enabled body { |
| background-color: transparent; |
| } |
| |
| html { |
| --shelf-area-height: var(--shelf-area-height-base); |
| } |
| |
| html[virtual-keyboard=true], |
| html[screen=gaia-signin] { |
| /* has to be with px suffix to be used in calc */ |
| --shelf-area-height: 0px; |
| } |
| |
| body { |
| cursor: default; |
| font-size: 14px; |
| margin: 0; |
| overflow: hidden; |
| padding: 0; |
| position: fixed; |
| top: 0; |
| } |
| |
| /* New dialog size */ |
| html { |
| --oobe-adaptive-dialog-width: var(--oobe-oobe-dialog-width-base); |
| --oobe-adaptive-dialog-height: var(--oobe-oobe-dialog-height-base); |
| } |
| |
| /* Padding defaults */ |
| html { |
| /* --oobe-dialog-content-padding is not used anymore. It is set to be equal to |
| * --oobe-adaptive-dialog-content-padding */ |
| --oobe-dialog-content-padding: 40px; |
| --oobe-dialog-content-padding-top: 20px; |
| |
| /* This size fits 675px screen with docked magnifier and shelf. Basically this |
| * is calc(675px * (1 - 1 / 3) - 10px - var(--shelf-area-height-base)) where |
| * 3 is DockedMagnifierController::kDefaultScreenHeightDivisor |
| * 10 is DockedMagnifierController::kSeparatorHeight */ |
| --oobe-dialog-min-height: 384px; |
| |
| --oobe-dialog-side-margin: 48px; |
| |
| --oobe-dialog-adaptable-flex-direction: column; |
| |
| --oobe-forward-slide-animation: translateX(+100%); |
| --oobe-backward-slide-animation: translateX(-100%); |
| } |
| |
| html[dir=rtl] { |
| --oobe-forward-slide-animation: translateX(-100%); |
| --oobe-backward-slide-animation: translateX(+100%); |
| } |
| |
| html[screen=gaia-signin] { |
| /* has to be with px suffix to be used in calc */ |
| --oobe-dialog-side-margin: 0px; |
| --oobe-bg-color: var(--cros-bg-color-elevation-3); |
| } |
| |
| /* Adapt for horizontal screen */ |
| @media screen and (min-width: 768px) and (max-height: 768px) { |
| html[screen=oobe] { |
| --oobe-dialog-adaptable-flex-direction: row; |
| } |
| } |
| |
| /* Adapt for horizontal screen. 616px - corresponding height of the OOBE dialog |
| * for gaia-signin flow when screen height is 768px */ |
| @media screen and (min-width: 616px) and (max-height: 616px) { |
| html[screen=gaia-signin] { |
| --oobe-dialog-adaptable-flex-direction: row; |
| } |
| } |
| |
| button { |
| font-family: inherit; |
| outline: none; |
| } |
| |
| [hidden] { |
| display: none !important; |
| } |
| |
| span.bold { |
| font-weight: bold; |
| } |
| |
| #version-labels { |
| color: var(--cros-text-color-secondary); |
| font-size: 13px; |
| margin: 10px; |
| position: relative; |
| text-align: end; |
| transition: all 500ms linear; |
| z-index: 1; |
| } |
| |
| #bluetooth-name { |
| background: rgba(255,255,255,.17); |
| border-radius: 4px; |
| display: inline-block; |
| font-size: 12px; |
| height: 28px; |
| line-height: 28px; |
| padding: 0 12px; |
| } |
| |
| .throbber { |
| margin-block-end: 0.5em; |
| margin-top: 1px; |
| } |
| |
| /* |
| Styles related to the `md-screen-container` |
| */ |
| |
| #scroll-container { |
| bottom: var(--shelf-area-height); /* Leave space for the shelf */ |
| left: 0; |
| overflow-x: hidden; |
| overflow-y: auto; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| /* Animation to fade in shelf for simon-enabled */ |
| :root.simon-enabled #scroll-container:has(#oobe.connect |
| #inner-container:not(.down)) { |
| transition: bottom 900ms cubic-bezier(0.20, 0.00, 0.00, 1.00); |
| } |
| :root.simon-enabled #scroll-container:has(#oobe.connect |
| #inner-container.down) { |
| bottom: 0; |
| } |
| #scroll-container.disable-scroll { |
| overflow-y: hidden; |
| } |
| |
| #outer-container { |
| display: flex; |
| height: 100%; |
| z-index: 1; |
| } |
| |
| .oobe-vertical-margin { |
| align-self: stretch; |
| flex: 0 1 auto; /* grow shrink basis */ |
| height: var(--oobe-dialog-side-margin); |
| min-height: 0; |
| } |
| |
| #oobe { |
| display: grid; |
| flex: 1 0 auto; /* grow shrink basis */ |
| min-height: var(--oobe-dialog-min-height); |
| place-items: center; |
| width: 100%; |
| } |
| |
| #inner-container { |
| background-color: var(--oobe-bg-color); |
| border-radius: var(--oobe-container-border-radius); |
| box-shadow: var(--oobe-container-elevation); |
| display: grid; |
| overflow: hidden; |
| place-items: center; |
| position: relative; |
| } |
| |
| #inner-container.animation { |
| overflow: hidden; |
| } |
| |
| #inner-container.disabled { |
| opacity: 0.4; |
| pointer-events: none; |
| } |
| |
| #inner-container.disable-scroll { |
| left: 0; |
| position: absolute; |
| } |
| |
| #welcome-backdrop { |
| background-color: var(--oobe-bg-color); |
| background-position: center; |
| background-size: cover; |
| display: none; |
| inset: 0; |
| position: absolute; |
| z-index: -1; |
| } |
| :root.simon-enabled[dir=rtl] #oobe.connect #welcome-backdrop { |
| transform: scaleX(-100%); |
| } |
| :root.simon-enabled #oobe.connect #welcome-backdrop { |
| display: block; |
| } |
| :root.simon-enabled #oobe.connect #inner-container { |
| background-color: transparent; |
| } |
| |
| /* Only play this animation when 'down' class is removed. */ |
| .oobe-display #inner-container:not(.down) { |
| transition: transform 200ms ease-in-out; |
| } |
| :root.simon-enabled #oobe.connect #inner-container:not(.down) { |
| min-height: var(--oobe-adaptive-dialog-height); |
| min-width: var(--oobe-adaptive-dialog-width); |
| /* Property duration curve delay */ |
| transition: border-radius 900ms cubic-bezier(0.20, 0.00, 0.00, 1.00), |
| min-height 900ms cubic-bezier(0.20, 0.00, 0.00, 1.00), |
| min-width 900ms cubic-bezier(0.20, 0.00, 0.00, 1.00); |
| } |
| :root.simon-enabled #oobe.connect #inner-container #connect { |
| /* Property duration curve delay */ |
| transition: opacity 250ms linear 900ms; |
| } |
| |
| .oobe-display #inner-container.down { |
| transform: translateY(50px) rotateX(-2.5deg); |
| } |
| :root.simon-enabled #oobe.connect #inner-container.down { |
| border-radius: 0; |
| min-height: 100vh; |
| min-width: 100vw; |
| transform: translateY(0) rotateX(0); |
| } |
| :root.simon-enabled [orientation=vertical] #oobe.connect #inner-container.down { |
| min-height: 100vw; |
| min-width: 100vh; |
| } |
| :root.simon-enabled #oobe.connect #inner-container.down #connect { |
| opacity: 0; |
| } |
| |
| /* Styles related to the `top_header_bar` */ |
| |
| #top-header-bar { |
| display: none; |
| min-height: 0; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| z-index: 1; |
| } |
| |
| .oobe-display #top-header-bar { |
| display: flex; |
| justify-content: flex-end; |
| } |