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 * This contains common styling for all the OOBE screens.
6 */
7
8.step {
9  box-sizing: border-box;
10  position: absolute;
11}
12
13.step.animated:not(.faded) {
14  -webkit-transition: -webkit-transform 200ms ease-in-out,
15                      opacity 200ms ease-in-out,
16                      visibility 200ms ease-in-out;
17}
18
19.step.hidden {
20  visibility: hidden;
21}
22
23.faded,
24.left,
25.right {
26  opacity: 0;
27}
28
29.step.right {
30  -webkit-transform: translateX(50px);
31}
32
33.step.left {
34  -webkit-transform: translateX(-50px)
35}
36
37.step.fullscreen {
38  height: 100%;
39  left: 0;
40  right: 0;
41  top: 0;
42  width: 100%;
43}
44
45.step-controls {
46  bottom: 21px;
47  box-sizing: border-box;
48  display: flex;
49  height: 28px;
50  justify-content: flex-end;
51  padding-right: 34px;  /* Double the padding of .step */
52  position: absolute;
53  width: 100%;
54}
55
56html[dir=rtl] .step-controls {
57  /* Hack as -webkit-padding-end doesn't catch direction. crbug.com/363836 */
58  padding-left: 34px;
59}
60
61.animation .step-controls button {
62  /* Don't grey out disabled buttons during animation. */
63  color: buttontext !important;
64}
65
66.step.loading .step-contents,
67.step.loading .step-controls,
68.step.loading .step-extra-controls {
69  visibility: hidden;
70}
71
72.step:not(.loading) #user-images-loading {
73  visibility: hidden;
74}
75
76.step:not(.loading) #eula-busy {
77  visibility: hidden;
78}
79
80/* Center spinner wrapper vertically and horizontally.
81 * Vertical centering uses top: 50% and negative margin
82 * instead of top: 0; bottom: 0 due to http://crbug.com/155320.
83 */
84.step-loading {
85  -webkit-align-items: center;
86  -webkit-justify-content: center;
87  display: -webkit-flex;
88  left: 0;
89  margin-top: -8px;
90  position: absolute;
91  right: 0;
92  top: 50%;
93}
94
95/* Fixes perfomance problem caused by http://crbug.com/229405 . */
96.step.hidden .throbber,
97.step.hidden .spinner,
98.step.hidden .inline-spinner {
99  display: none;
100}
101
102#security-info a,
103#eula a,
104.step-extra-controls a {
105  color: rgb(49, 106, 197); /* same as 'Learn more' link */
106  font-size: 12px;
107  text-decoration: none;
108}
109
110.step-extra-controls {
111  bottom: 26px;
112  left: 49px;
113  position: absolute;
114}
115
116/* EULA screen extra controls have 2 elements
117   so they require different alignment. */
118#eula-extra-controls {
119  bottom: 17px;
120}
121
122#security-info a:focus,
123#eula a:focus,
124.step-extra-controls a:focus {
125  -webkit-transition: outline-color 200ms;
126  /* Note: May use 1px solid here. */
127  outline-color: rgb(77, 144, 254);
128}
129
130.step-extra-controls > *:not(:first-child) {
131  -webkit-margin-before: 7px;
132}
133
134html[dir=rtl] .step-extra-controls {
135  left: auto;
136  right: 49px;
137}
138
139#oobe.autolaunch #autolaunch-confirm-button,
140#oobe.autolaunch #autolaunch-cancel-button,
141#oobe.connect #continue-button,
142#oobe.eula #accept-button,
143#oobe.eula #back-button,
144#oobe.kiosk-enable #kiosk-cancel-button,
145#oobe.kiosk-enable #kiosk-enable-button,
146#oobe.reset #reset-button,
147#oobe.reset #reset-cancel-button,
148#oobe.signin #signin-button,
149#oobe.user-image #ok-button {
150  display: block;
151}
152
153#autolaunch-confirm-button,
154#back-button,
155#kiosk-enable-button,
156#reset-button,
157#password-changed-back-button,
158#tos-back-button {
159  -webkit-margin-end: 8px;
160}
161
162.menu-area {
163  margin: 5px;
164}
165
166.menu-control {
167  color: #444;
168  font-family: inherit;
169  line-height: 20px;
170  position: relative;
171  width: 250px;
172}
173
174html[highlight=strong] #security-info a:focus,
175html[highlight=strong] #eula a:focus,
176html[highlight=strong] .step-extra-controls a:focus,
177html[highlight=strong] .menu-control:focus,
178html[highlight=strong] input[type='button']:focus,
179html[highlight=strong] button:focus {
180  box-shadow: 0 0 23px rgb(77, 144, 254) !important;
181}
182
183