| /* 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; |
| -webkit-perspective: 1px; /* Workaround, see http://crbug.com/360567 */ |
| bottom: 51px; /* Leave space for the header bar */ |
| display: -webkit-box; |
| left: 0; |
| min-height: 717px; /* This enables scrolling. Min resolution: 1024x768 */ |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| .oobe-display #outer-container.down { |
| -webkit-perspective: 600px; |
| } |
| |
| #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; |
| padding: 0; |
| 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.connect #inner-container, |
| #oobe.enrollment #inner-container, |
| #oobe.eula #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.reset #inner-container, |
| #oobe.supervised-user-creation #inner-container, |
| #oobe.supervised-user-creation-dialog #inner-container, |
| #oobe.terms-of-service #inner-container, |
| #oobe.update #inner-container, |
| #oobe.user-image #inner-container, |
| #oobe.wrong-hwid #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); |
| |
| } |
| |
| #oobe.account-picker.flying-pods #inner-container { |
| -webkit-transition: width 180ms ease, |
| height 180ms ease; |
| } |
| |
| /* Only play this animation when 'down' class is removed. */ |
| .oobe-display #inner-container:not(.down) { |
| -webkit-transition: -webkit-transform 200ms ease-in-out; |
| } |
| |
| .oobe-display #inner-container.down { |
| -webkit-transform: translateY(50px) rotateX(-2.5deg); |
| } |
| |
| #step-logo { |
| -webkit-margin-start: 17px; |
| display: -webkit-box; |
| position: absolute; |
| top: 15px; |
| } |
| |
| #progress-dots { |
| -webkit-box-pack: center; |
| -webkit-margin-before: 15px; |
| -webkit-transition: opacity 200ms ease-in-out, |
| visibility 200ms ease-in-out; |
| display: -webkit-box; |
| } |
| |
| /* Hidden for the duration of initial transition. */ |
| .oobe-display #progress-dots.down { |
| visibility: hidden; |
| } |
| |
| .progdot { |
| -webkit-margin-end: 12px; |
| background: white; |
| height: 10px; |
| opacity: 0.4; |
| width: 10px; |
| } |
| |
| .progdot-active { |
| opacity: 0.5; |
| } |
| |
| #account-picker-dot, |
| #app-launch-splash-dot, |
| #auto-enrollment-check-dot, |
| #autolaunch-dot, |
| #confirm-password-dot, |
| #controller-pairing-dot, |
| #enrollment-dot, |
| #error-message-dot, |
| #fatal-error-dot, |
| #hid-detection-dot, |
| #host-pairing-dot, |
| #kiosk-enable-dot, |
| #oauth-enrollment-dot, |
| #password-changed-dot, |
| #reset-dot, |
| #supervised-user-creation-dot, |
| #supervised-user-creation-dialog-dot, |
| #terms-of-service-dot, |
| #tpm-error-message-dot, |
| #wrong-hwid-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; |
| } |
| |
| #oobe.reset #progress-dots { |
| visibility: hidden; |
| } |
| |
| body:not(.oobe-display) #inner-container { |
| height: 262px; |
| padding: 0; |
| width: 1100px; |
| } |
| |
| body:not(.oobe-display) #progress-dots { |
| display: none; |
| } |
| |
| #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'; |
| } |