• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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  -webkit-perspective: 1px; /* Workaround, see http://crbug.com/360567 */
10  bottom: 51px;  /* Leave space for the header bar */
11  display: -webkit-box;
12  left: 0;
13  min-height: 717px; /* This enables scrolling. Min resolution: 1024x768 */
14  position: absolute;
15  right: 0;
16  top: 0;
17}
18
19.oobe-display #outer-container.down {
20  -webkit-perspective: 600px;
21}
22
23#scroll-container {
24  bottom: 0;        /* Allows content overlap with control bar. */
25  left: 0;
26  overflow-x: hidden;
27  overflow-y: auto;
28  position: absolute;
29  right: 0;
30  top: 0;
31}
32
33#scroll-container::-webkit-scrollbar {
34  display: none;
35}
36
37#inner-container {
38  border-radius: 2px;
39  padding: 0;
40  position: relative;
41}
42
43#inner-container.animation {
44  overflow: hidden;
45}
46
47#inner-container.disabled {
48  opacity: 0.4;
49  pointer-events: none;
50}
51
52/* Screens that have a border and background. */
53#oobe.autolaunch #inner-container,
54#oobe.connect #inner-container,
55#oobe.enrollment #inner-container,
56#oobe.eula #inner-container,
57#oobe.gaia-signin #inner-container,
58#oobe.kiosk-enable #inner-container,
59#oobe.oauth-enrollment #inner-container,
60#oobe.reset #inner-container,
61#oobe.hid-detection #inner-container,
62#oobe.update #inner-container,
63#oobe.user-image #inner-container,
64#oobe.managed-user-creation-dialog #inner-container,
65#oobe.managed-user-creation #inner-container,
66#oobe.password-changed #inner-container,
67#oobe.terms-of-service #inner-container,
68#oobe.auto-enrollment-check #inner-container,
69#oobe.wrong-hwid #inner-container,
70#oobe.confirm-password #inner-container,
71#oobe.fatal-error #inner-container {
72  background: white;
73  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
74              0 4px 23px 5px rgba(0, 0, 0, 0.2),
75              0 2px 6px rgba(0, 0, 0, 0.15);
76}
77
78#oobe.error-message #inner-container,
79#oobe.tpm-error-message #inner-container {
80  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
81              0 4px 23px 5px rgba(0, 0, 0, 0.2),
82              0 2px 6px rgba(0, 0, 0, 0.15);
83
84}
85
86#oobe.account-picker.flying-pods #inner-container {
87  -webkit-transition: width 180ms ease,
88                      height 180ms ease;
89}
90
91/* Only play this animation when 'down' class is removed. */
92.oobe-display #inner-container:not(.down) {
93  -webkit-transition: -webkit-transform 200ms ease-in-out;
94}
95
96.oobe-display #inner-container.down {
97  -webkit-transform: translateY(50px) rotateX(-2.5deg);
98}
99
100#step-logo {
101  -webkit-margin-start: 17px;
102  display: -webkit-box;
103  position: absolute;
104  top: 15px;
105}
106
107#progress-dots {
108  -webkit-box-pack: center;
109  -webkit-margin-before: 15px;
110  -webkit-transition: opacity 200ms ease-in-out,
111                      visibility 200ms ease-in-out;
112  display: -webkit-box;
113}
114
115/* Hidden for the duration of initial transition. */
116.oobe-display #progress-dots.down {
117  visibility: hidden;
118}
119
120.progdot {
121  -webkit-margin-end: 12px;
122  background: white;
123  height: 10px;
124  opacity: 0.4;
125  width: 10px;
126}
127
128.progdot-active {
129  opacity: 0.5;
130}
131
132#account-picker-dot,
133#app-launch-splash-dot,
134#autolaunch-dot,
135#enrollment-dot,
136#kiosk-enable-dot,
137#oauth-enrollment-dot,
138#reset-dot,
139#error-message-dot,
140#tpm-error-message-dot,
141#password-changed-dot,
142#managed-user-creation-dot,
143#managed-user-creation-dialog-dot,
144#terms-of-service-dot,
145#wrong-hwid-dot,
146#confirm-password-dot,
147#fatal-error-dot,
148#hid-detection-dot {
149  display: none;
150}
151
152#oobe.connect #connect-dot,
153#oobe.enrollment #gaia-signin-dot,
154#oobe.enrollment #signin-dot,
155#oobe.eula #eula-dot,
156#oobe.gaia-signin #gaia-signin-dot,
157#oobe.oauth-enrollment #gaia-signin-dot,
158#oobe.oauth-enrollment #signin-dot,
159#oobe.signin #signin-dot,
160#oobe.update #update-dot,
161#oobe.user-image #user-image-dot {
162  opacity: 1;
163}
164
165#oobe.reset #progress-dots {
166  visibility: hidden;
167}
168
169body:not(.oobe-display) #inner-container {
170  height: 262px;
171  padding: 0;
172  width: 1100px;
173}
174
175body:not(.oobe-display) #progress-dots {
176  display: none;
177}
178
179#outer-container.fullscreen,
180#outer-container.fullscreen #oobe,
181#outer-container.fullscreen #oobe #inner-container {
182  height: 100%;
183  width: 100%;
184}
185
186html[build=chrome] #header-sections {
187  -webkit-margin-start: -48px;
188  margin-top: -1px;
189}
190
191html[build=chromium] #header-sections {
192  -webkit-margin-start: 5px;
193  margin-top: -1px;
194}
195
196.header-section {
197  color: rgb(119, 120, 123);  /* Should matching text color of the logo. */
198  display: none;
199  font-size: 23px;
200  line-height: 31px;
201  text-transform: lowercase;
202  width: 23em;
203}
204
205.header-section::before {
206  /* Divider in header between product name and title,
207   * like "[Product name] > [step header]". */
208  content: '\00A0\203A\00A0\00A0';
209}
210