OLD | NEW |
(Empty) | |
| 1 /* Copyright 2014 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 bottom: 57px; /* Leave space for the header bar */ |
| 10 display: -webkit-box; |
| 11 left: 0; |
| 12 min-height: 717px; /* This enables scrolling. Min resolution: 1024x768 */ |
| 13 perspective: 1px; /* Workaround, see http://crbug.com/360567 */ |
| 14 position: absolute; |
| 15 right: 0; |
| 16 top: 0; |
| 17 z-index: 1; |
| 18 } |
| 19 |
| 20 .oobe-display #outer-container { |
| 21 bottom: 47px; /* header-bar is 47 pixels high during OOBE */ |
| 22 perspective: 600px; |
| 23 } |
| 24 |
| 25 .pin-container.pin-enabled { |
| 26 opacity: 1; |
| 27 transition: opacity 200ms ease-in-out 180ms; |
| 28 visibility: visible; |
| 29 } |
| 30 |
| 31 .pin-container.pin-disabled { |
| 32 opacity: 0; /* Opacity is set to 1 after the pin element is loaded. */ |
| 33 transition: none; |
| 34 visibility: hidden; /* Needed because pin-keyboard's offsetHeight is |
| 35 checked to determine if loaded. */ |
| 36 } |
| 37 |
| 38 #scroll-container { |
| 39 bottom: 0; /* Allows content overlap with control bar. */ |
| 40 left: 0; |
| 41 overflow-x: hidden; |
| 42 overflow-y: auto; |
| 43 position: absolute; |
| 44 right: 0; |
| 45 top: 0; |
| 46 } |
| 47 |
| 48 #scroll-container::-webkit-scrollbar { |
| 49 display: none; |
| 50 } |
| 51 |
| 52 #inner-container { |
| 53 border-radius: 2px; |
| 54 position: relative; |
| 55 } |
| 56 |
| 57 #inner-container.animation { |
| 58 overflow: hidden; |
| 59 } |
| 60 |
| 61 #inner-container.disabled { |
| 62 opacity: 0.4; |
| 63 pointer-events: none; |
| 64 } |
| 65 |
| 66 #oobe-shield { |
| 67 display: none; |
| 68 } |
| 69 |
| 70 #oobe-shield[md-mode] { |
| 71 background-color: rgba(20, 29, 40, .8); /* #141D28 80% */ |
| 72 display: block; |
| 73 height: 100%; |
| 74 left: 0; |
| 75 position: absolute; |
| 76 top: 0; |
| 77 width: 100%; |
| 78 } |
| 79 |
| 80 #oobe[md-mode] #progress-dots { |
| 81 display: none; |
| 82 } |
| 83 |
| 84 /* Screens that have a border and background. */ |
| 85 #oobe.auto-enrollment-check #inner-container, |
| 86 #oobe.autolaunch #inner-container, |
| 87 #oobe.confirm-password #inner-container, |
| 88 #oobe:not([md-mode]).connect #inner-container, |
| 89 #oobe.debugging #inner-container, |
| 90 #oobe.enrollment #inner-container, |
| 91 #oobe:not([md-mode]).eula #inner-container, |
| 92 #oobe.fatal-error #inner-container, |
| 93 #oobe.gaia-signin #inner-container, |
| 94 #oobe.hid-detection #inner-container, |
| 95 #oobe.kiosk-enable #inner-container, |
| 96 #oobe.oauth-enrollment #inner-container, |
| 97 #oobe.password-changed #inner-container, |
| 98 #oobe.ad-password-change #inner-container, |
| 99 #oobe.reset #inner-container, |
| 100 #oobe.supervised-user-creation #inner-container, |
| 101 #oobe.supervised-user-creation-dialog #inner-container, |
| 102 #oobe.terms-of-service #inner-container, |
| 103 #oobe.arc-tos #inner-container, |
| 104 #oobe.update #inner-container, |
| 105 #oobe.user-image #inner-container, |
| 106 #oobe.wrong-hwid #inner-container, |
| 107 #oobe.unrecoverable-cryptohome-error #inner-container { |
| 108 background: white; |
| 109 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), |
| 110 0 4px 23px 5px rgba(0, 0, 0, 0.2), |
| 111 0 2px 6px rgba(0, 0, 0, 0.15); |
| 112 } |
| 113 |
| 114 #oobe.error-message #inner-container, |
| 115 #oobe.tpm-error-message #inner-container { |
| 116 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), |
| 117 0 4px 23px 5px rgba(0, 0, 0, 0.2), |
| 118 0 2px 6px rgba(0, 0, 0, 0.15); |
| 119 |
| 120 } |
| 121 |
| 122 /* Only play this animation when 'down' class is removed. */ |
| 123 .oobe-display #inner-container:not(.down) { |
| 124 transition: transform 200ms ease-in-out; |
| 125 } |
| 126 |
| 127 .oobe-display #inner-container.down { |
| 128 transform: translateY(50px) rotateX(-2.5deg); |
| 129 } |
| 130 |
| 131 #oobe:not([md-mode]) #step-logo { |
| 132 -webkit-margin-start: 17px; |
| 133 display: -webkit-box; |
| 134 position: absolute; |
| 135 top: 15px; |
| 136 } |
| 137 |
| 138 #oobe[md-mode] #step-logo { |
| 139 display: none; |
| 140 } |
| 141 |
| 142 #progress-dots { |
| 143 -webkit-box-pack: center; |
| 144 display: -webkit-box; |
| 145 margin-top: 15px; |
| 146 transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out; |
| 147 } |
| 148 |
| 149 #oobe[md-mode] #progress-dots { |
| 150 display: none; |
| 151 } |
| 152 |
| 153 /* Hidden for the duration of initial transition. */ |
| 154 .oobe-display #progress-dots.down { |
| 155 visibility: hidden; |
| 156 } |
| 157 |
| 158 .progdot { |
| 159 -webkit-margin-end: 12px; |
| 160 background: white; |
| 161 height: 10px; |
| 162 opacity: 0.4; |
| 163 width: 10px; |
| 164 } |
| 165 |
| 166 .progdot-active { |
| 167 opacity: 0.5; |
| 168 } |
| 169 |
| 170 #account-picker-dot, |
| 171 #app-launch-splash-dot, |
| 172 #arc-kiosk-splash-dot, |
| 173 #auto-enrollment-check-dot, |
| 174 #autolaunch-dot, |
| 175 #confirm-password-dot, |
| 176 #controller-pairing-dot, |
| 177 #debugging-dot, |
| 178 #device-disabled-dot, |
| 179 #enrollment-dot, |
| 180 #error-message-dot, |
| 181 #fatal-error-dot, |
| 182 #hid-detection-dot, |
| 183 #host-pairing-dot, |
| 184 #kiosk-enable-dot, |
| 185 #oauth-enrollment-dot, |
| 186 #password-changed-dot, |
| 187 #reset-dot, |
| 188 #supervised-user-creation-dialog-dot, |
| 189 #supervised-user-creation-dot, |
| 190 #terms-of-service-dot, |
| 191 #arc-tos-dot, |
| 192 #tpm-error-message-dot, |
| 193 #wrong-hwid-dot, |
| 194 #unrecoverable-cryptohome-error-dot { |
| 195 display: none; |
| 196 } |
| 197 |
| 198 #oobe.connect #connect-dot, |
| 199 #oobe.enrollment #gaia-signin-dot, |
| 200 #oobe.enrollment #signin-dot, |
| 201 #oobe.eula #eula-dot, |
| 202 #oobe.gaia-signin #gaia-signin-dot, |
| 203 #oobe.oauth-enrollment #gaia-signin-dot, |
| 204 #oobe.oauth-enrollment #signin-dot, |
| 205 #oobe.signin #signin-dot, |
| 206 #oobe.update #update-dot, |
| 207 #oobe.user-image #user-image-dot { |
| 208 opacity: 1; |
| 209 } |
| 210 |
| 211 #oobe.debugging #progress-dots, |
| 212 #oobe.reset #progress-dots, |
| 213 #oobe.host-pairing #progress-dots, |
| 214 #oobe.controller-pairing #progress-dots { |
| 215 visibility: hidden; |
| 216 } |
| 217 |
| 218 body:not(.oobe-display) #inner-container { |
| 219 height: 262px; |
| 220 padding: 0; |
| 221 width: 1100px; |
| 222 } |
| 223 |
| 224 body:not(.oobe-display) #progress-dots { |
| 225 display: none; |
| 226 } |
| 227 |
| 228 #outer-container.fullscreen, |
| 229 #outer-container.fullscreen #oobe, |
| 230 #outer-container.fullscreen #oobe #inner-container { |
| 231 height: 100%; |
| 232 width: 100%; |
| 233 } |
| 234 |
| 235 html[build=chrome] #header-sections { |
| 236 -webkit-margin-start: -48px; |
| 237 margin-top: -1px; |
| 238 } |
| 239 |
| 240 html[build=chromium] #header-sections { |
| 241 -webkit-margin-start: 5px; |
| 242 margin-top: -1px; |
| 243 } |
| 244 |
| 245 .header-section { |
| 246 color: rgb(119, 120, 123); /* Should matching text color of the logo. */ |
| 247 display: none; |
| 248 font-size: 23px; |
| 249 line-height: 31px; |
| 250 text-transform: lowercase; |
| 251 width: 23em; |
| 252 } |
| 253 |
| 254 .header-section::before { |
| 255 /* Divider in header between product name and title, |
| 256 * like "[Product name] > [step header]". */ |
| 257 content: '\00A0\203A\00A0\00A0'; |
| 258 } |
OLD | NEW |