1/* Copyright 2013 The Chromium Authors. All rights reserved. 2 * Use of this source code is governed by a BSD-style license that can be 3 * found in the LICENSE file. 4 */ 5 6#outer-container { 7 -webkit-box-align: center; 8 -webkit-box-pack: center; 9 -webkit-perspective: 600px; 10 bottom: 51px; /* Leave space for the header bar */ 11 display: -webkit-box; 12 left: 0; 13 position: absolute; 14 right: 0; 15 top: 0; 16} 17 18#inner-container { 19 border-radius: 2px; 20 padding: 0; 21 position: relative; 22} 23 24#inner-container.animation { 25 overflow: hidden; 26} 27 28/* Screens that have a border and background. */ 29#oobe.autolaunch #inner-container, 30#oobe.connect #inner-container, 31#oobe.enrollment #inner-container, 32#oobe.eula #inner-container, 33#oobe.gaia-signin #inner-container, 34#oobe.kiosk-enable #inner-container, 35#oobe.oauth-enrollment #inner-container, 36#oobe.reset #inner-container, 37#oobe.update #inner-container, 38#oobe.user-image #inner-container, 39#oobe.managed-user-creation-dialog #inner-container, 40#oobe.managed-user-creation #inner-container, 41#oobe.password-changed #inner-container, 42#oobe.terms-of-service #inner-container, 43#oobe.wrong-hwid #inner-container, 44#oobe.confirm-password #inner-container, 45#oobe.message-box #inner-container { 46 background: -webkit-linear-gradient(rgba(255,255,255,0.99), 47 rgba(255,255,255,0.95)); 48 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 49 0 4px 23px 5px rgba(0, 0, 0, 0.2), 50 0 2px 6px rgba(0, 0, 0, 0.15); 51} 52 53#oobe.error-message #inner-container, 54#oobe.tpm-error-message #inner-container { 55 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 56 0 4px 23px 5px rgba(0, 0, 0, 0.2), 57 0 2px 6px rgba(0, 0, 0, 0.15); 58 59} 60 61#oobe.account-picker.flying-pods #inner-container { 62 -webkit-transition: width 180ms ease, 63 height 180ms ease; 64} 65 66/* Only play this animation when 'down' class is removed. */ 67.oobe-display #inner-container:not(.down) { 68 -webkit-transition: -webkit-transform 200ms ease-in-out; 69} 70 71.oobe-display #inner-container.down { 72 -webkit-transform: translateY(50px) rotateX(-2.5deg); 73} 74 75#step-logo { 76 -webkit-margin-start: 17px; 77 display: -webkit-box; 78 position: absolute; 79 top: 15px; 80} 81 82#progress-dots { 83 -webkit-box-pack: center; 84 -webkit-margin-before: 15px; 85 display: -webkit-box; 86} 87 88/* Hidden for the duration of initial transition. */ 89.oobe-display #progress-dots.down { 90 visibility: hidden; 91} 92 93.progdot { 94 -webkit-margin-end: 12px; 95 background: white; 96 height: 10px; 97 opacity: 0.4; 98 width: 10px; 99} 100 101.progdot-active { 102 opacity: 0.5; 103} 104 105#account-picker-dot, 106#app-launch-splash-dot, 107#autolaunch-dot, 108#enrollment-dot, 109#kiosk-enable-dot, 110#oauth-enrollment-dot, 111#reset-dot, 112#error-message-dot, 113#tpm-error-message-dot, 114#password-changed-dot, 115#managed-user-creation-dot, 116#managed-user-creation-dialog-dot, 117#terms-of-service-dot, 118#wrong-hwid-dot, 119#confirm-password-dot, 120#message-box-dot { 121 display: none; 122} 123 124#oobe.connect #connect-dot, 125#oobe.enrollment #gaia-signin-dot, 126#oobe.enrollment #signin-dot, 127#oobe.eula #eula-dot, 128#oobe.gaia-signin #gaia-signin-dot, 129#oobe.oauth-enrollment #gaia-signin-dot, 130#oobe.oauth-enrollment #signin-dot, 131#oobe.signin #signin-dot, 132#oobe.update #update-dot, 133#oobe.user-image #user-image-dot { 134 opacity: 1; 135} 136 137body:not(.oobe-display) #inner-container { 138 height: 262px; 139 padding: 0; 140 width: 1100px; 141} 142 143body:not(.oobe-display) #progress-dots { 144 display: none; 145} 146 147#outer-container.fullscreen, 148#outer-container.fullscreen #oobe, 149#outer-container.fullscreen #oobe #inner-container { 150 height: 100%; 151 width: 100%; 152} 153 154html[build=chrome] #header-sections { 155 -webkit-margin-start: -48px; 156 margin-top: -1px; 157} 158 159html[build=chromium] #header-sections { 160 -webkit-margin-start: 5px; 161 margin-top: -1px; 162} 163 164.header-section { 165 color: rgb(119, 120, 123); /* Should matching text color of the logo. */ 166 display: none; 167 font-size: 23px; 168 line-height: 31px; 169 text-transform: lowercase; 170 width: 23em; 171} 172 173.header-section::before { 174 /* Divider in header between product name and title, 175 * like "[Product name] > [step header]". */ 176 content: '\00A0\203A\00A0\00A0'; 177} 178 179