| /* 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. |
| */ |
| |
| #outer-container { |
| -webkit-box-align: center; |
| -webkit-box-pack: center; |
| bottom: 57px; /* Leave space for the header bar */ |
| display: -webkit-box; |
| left: 0; |
| min-height: 717px; /* This enables scrolling. Min resolution: 1024x768 */ |
| perspective: 1px; /* Workaround, see http://crbug.com/360567 */ |
| position: absolute; |
| right: 0; |
| top: 0; |
| z-index: 1; |
| } |
| |
| .oobe-display #outer-container { |
| bottom: 47px; /* header-bar is 47 pixels high during OOBE */ |
| perspective: 600px; |
| } |
| |
| .pin-container.pin-enabled { |
| opacity: 1; |
| transition: opacity 200ms ease-in-out 180ms; |
| visibility: visible; |
| } |
| |
| .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. */ |
| } |
| |
| #scroll-container { |
| bottom: 0; /* Allows content overlap with control bar. */ |
| left: 0; |
| overflow-x: hidden; |
| overflow-y: auto; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| #scroll-container::-webkit-scrollbar { |
| display: none; |
| } |
| |
| #inner-container { |
| border-radius: 2px; |
| position: relative; |
| } |
| |
| #inner-container.animation { |
| overflow: hidden; |
| } |
| |
| #inner-container.disabled { |
| opacity: 0.4; |
| pointer-events: none; |
| } |
| |
| /* Screens that have a border and background. */ |
| #oobe.auto-enrollment-check #inner-container, |
| #oobe.autolaunch #inner-container, |
| #oobe.confirm-password #inner-container, |
| #oobe.debugging #inner-container, |
| #oobe.enrollment #inner-container, |
| #oobe.fatal-error #inner-container, |
| #oobe.gaia-signin #inner-container, |
| #oobe.hid-detection #inner-container, |
| #oobe.kiosk-enable #inner-container, |
| #oobe.oauth-enrollment #inner-container, |
| #oobe.password-changed #inner-container, |
| #oobe.ad-password-change #inner-container, |
| #oobe.supervised-user-creation #inner-container, |
| #oobe.supervised-user-creation-dialog #inner-container, |
| #oobe.terms-of-service #inner-container, |
| #oobe.arc-tos #inner-container, |
| #oobe.update #inner-container, |
| #oobe.update-required #inner-container, |
| #oobe.user-image #inner-container, |
| #oobe.wrong-hwid #inner-container, |
| #oobe.unrecoverable-cryptohome-error #inner-container { |
| background: white; |
| box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), |
| 0 4px 23px 5px rgba(0, 0, 0, 0.2), |
| 0 2px 6px rgba(0, 0, 0, 0.15); |
| } |
| |
| #oobe.error-message #inner-container, |
| #oobe.tpm-error-message #inner-container { |
| box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), |
| 0 4px 23px 5px rgba(0, 0, 0, 0.2), |
| 0 2px 6px rgba(0, 0, 0, 0.15); |
| |
| } |
| |
| /* Only play this animation when 'down' class is removed. */ |
| .oobe-display #inner-container:not(.down) { |
| transition: transform 200ms ease-in-out; |
| } |
| |
| .oobe-display #inner-container.down { |
| transform: translateY(50px) rotateX(-2.5deg); |
| } |
| |
| #oobe #step-logo { |
| display: none; |
| } |
| |
| #account-picker-dot, |
| #app-launch-splash-dot, |
| #arc-kiosk-splash-dot, |
| #auto-enrollment-check-dot, |
| #autolaunch-dot, |
| #confirm-password-dot, |
| #debugging-dot, |
| #device-disabled-dot, |
| #enrollment-dot, |
| #error-message-dot, |
| #fatal-error-dot, |
| #hid-detection-dot, |
| #kiosk-enable-dot, |
| #oauth-enrollment-dot, |
| #password-changed-dot, |
| #reset-dot, |
| #supervised-user-creation-dialog-dot, |
| #supervised-user-creation-dot, |
| #terms-of-service-dot, |
| #arc-tos-dot, |
| #tpm-error-message-dot, |
| #update-required-dot, |
| #wrong-hwid-dot, |
| #unrecoverable-cryptohome-error-dot { |
| display: none; |
| } |
| |
| #oobe.connect #connect-dot, |
| #oobe.enrollment #gaia-signin-dot, |
| #oobe.enrollment #signin-dot, |
| #oobe.eula #eula-dot, |
| #oobe.gaia-signin #gaia-signin-dot, |
| #oobe.oauth-enrollment #gaia-signin-dot, |
| #oobe.oauth-enrollment #signin-dot, |
| #oobe.signin #signin-dot, |
| #oobe.update #update-dot, |
| #oobe.user-image #user-image-dot { |
| opacity: 1; |
| } |
| |
| body:not(.oobe-display) #inner-container { |
| height: 262px; |
| padding: 0; |
| width: 1100px; |
| } |
| |
| #outer-container.fullscreen, |
| #outer-container.fullscreen #oobe, |
| #outer-container.fullscreen #oobe #inner-container { |
| height: 100%; |
| width: 100%; |
| } |
| |
| html[build=chrome] #header-sections { |
| -webkit-margin-start: -48px; |
| margin-top: -1px; |
| } |
| |
| html[build=chromium] #header-sections { |
| -webkit-margin-start: 5px; |
| margin-top: -1px; |
| } |
| |
| .header-section { |
| color: rgb(119, 120, 123); /* Should matching text color of the logo. */ |
| display: none; |
| font-size: 23px; |
| line-height: 31px; |
| text-transform: lowercase; |
| width: 23em; |
| } |
| |
| .header-section::before { |
| /* Divider in header between product name and title, |
| * like "[Product name] > [step header]". */ |
| content: '\00A0\203A\00A0\00A0'; |
| } |