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