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