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