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 * This is the stylesheet used by the Out of the box experience (OOBE) flow, | |
6 * sign in and lock screens. | |
7 */ | |
8 | |
9 html, | |
10 body { | |
11 height: 100%; | |
12 width: 100%; | |
13 } | |
14 | |
15 body { | |
16 background-color: transparent; | |
17 cursor: default; | |
18 font-size: 14px; | |
19 margin: 0; | |
20 overflow: hidden; | |
21 padding: 0; | |
22 position: fixed; | |
23 top: 0; | |
24 } | |
25 | |
26 body.solid { | |
27 background-color: white; | |
28 } | |
29 | |
30 button { | |
31 font-family: inherit; | |
32 outline: none; | |
33 } | |
34 | |
35 /* Follow same focus coloring as in widgets.css */ | |
36 /* Do not apply this style to restricted button state. */ | |
37 button.custom-appearance:not(.button-restricted):not(.button-fancy) { | |
38 -webkit-transition: border-color 200ms; | |
39 border: 1px solid transparent; | |
40 /* Don't grey out disabled buttons. */ | |
41 color: buttontext !important; | |
42 } | |
43 | |
44 /* ':focus' used twice to increase specificity. */ | |
45 button.custom-appearance:focus:focus { | |
46 border-color: rgb(77, 144, 254); | |
47 } | |
48 | |
49 button:not(.custom-appearance) { | |
50 min-width: 72px !important; | |
51 } | |
52 | |
53 button.button-fancy { | |
54 min-width: 72px !important; | |
55 } | |
56 | |
57 button.button-blue { | |
58 background-image: -webkit-linear-gradient(rgb(93, 154, 255), | |
59 rgb(93, 154, 255) 38%, | |
60 rgb(88, 145, 240)); | |
61 border: 1px solid rgba(45, 102, 195, 1); | |
62 border-radius: 2px; | |
63 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 2px | |
64 rgba(255, 255, 255, 0.4); | |
65 color: #fff; | |
66 font-size: 14px; | |
67 margin: 0 1px 0 0; | |
68 min-height: 2em; | |
69 min-width: 4em; | |
70 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); | |
71 } | |
72 | |
73 | |
74 button.button-blue:hover { | |
75 background-image: -webkit-linear-gradient(rgb(101, 158, 253), | |
76 rgb(101, 158, 253) 38%, | |
77 rgb(96, 151, 241)); | |
78 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 2px | |
79 rgba(255, 255, 255, 0.4); | |
80 } | |
81 | |
82 button.button-blue:active { | |
83 background-image: -webkit-linear-gradient(rgb(96, 149, 237), | |
84 rgb(96, 149, 237) 38%, | |
85 rgb(96, 149, 237)); | |
86 border: 1px solid rgba(38, 84, 160, 1); | |
87 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); | |
88 } | |
89 | |
90 button.button-red { | |
91 background-image: -webkit-linear-gradient(rgb(221, 75, 57), | |
92 rgb(221, 75, 57) 38%, | |
93 rgb(197, 66, 49)); | |
94 border: 1px solid rgba(167, 57, 44, 1); | |
95 border-radius: 2px; | |
96 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 2px | |
97 rgba(255, 255, 255, 0.4); | |
98 color: #fff; | |
99 margin: 0 1px 0 0; | |
100 min-height: 2em; | |
101 min-width: 4em; | |
102 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); | |
103 } | |
104 | |
105 button.button-red:hover { | |
106 background-image: -webkit-linear-gradient(rgb(231, 78, 59), | |
107 rgb(231, 78, 59) 38%, | |
108 rgb(209, 70, 52)); | |
109 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 2px | |
110 rgba(255, 255, 255, 0.4); | |
111 } | |
112 | |
113 button.button-red:active { | |
114 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); | |
115 } | |
116 | |
117 .label, | |
118 .flexible-label { | |
119 display: block; | |
120 margin: 5px 5px 5px 0; | |
121 padding: 5px 5px 5px 0; | |
122 } | |
123 | |
124 .label { | |
125 width: 170px; | |
126 } | |
127 | |
128 .flexible-label { | |
129 max-width: 250px; | |
130 } | |
131 | |
132 #installation-settings-popup { | |
133 background: white; | |
134 border: 1px solid rgb(188, 193, 208); | |
135 border-radius: 2px; | |
136 box-shadow: 0 5px 80px #505050; | |
137 min-height: 250px; | |
138 position: relative; | |
139 width: 460px; | |
140 z-index: 10; | |
141 } | |
142 | |
143 #installation-settings-popup h1 { | |
144 -webkit-padding-end: 24px; | |
145 -webkit-user-select: none; | |
146 background: -webkit-linear-gradient(white, #F8F8F8); | |
147 color: rgb(83, 99, 125); | |
148 font-size: 105%; | |
149 font-weight: bold; | |
150 margin: 0; | |
151 padding: 10px 15px 8px 15px; | |
152 text-shadow: white 0 1px 2px; | |
153 } | |
154 | |
155 .popup-content-area { | |
156 padding: 0 20px 60px 20px; | |
157 } | |
158 | |
159 #installation-settings-popup button { | |
160 bottom: 20px; | |
161 position: absolute; | |
162 right: 20px; | |
163 } | |
164 | |
165 #tpm-busy { | |
166 text-align: center; | |
167 } | |
168 | |
169 #tpm-password { | |
170 font-weight: bold; | |
171 text-align: center; | |
172 } | |
173 | |
174 [hidden] { | |
175 display: none !important; | |
176 } | |
177 | |
178 #popup-overlay { | |
179 -webkit-box-align: center; | |
180 -webkit-box-pack: center; | |
181 -webkit-transition: 250ms opacity; | |
182 background: rgba(255, 255, 255, .75); | |
183 bottom: 0; | |
184 display: -webkit-box; | |
185 left: 0; | |
186 padding: 20px; | |
187 position: fixed; | |
188 right: 0; | |
189 top: 0; | |
190 z-index: 5; | |
191 } | |
192 | |
193 #bubble { | |
194 -webkit-transition: 250ms opacity; | |
195 } | |
196 | |
197 span.bold { | |
198 font-weight: bold; | |
199 } | |
200 | |
201 #version-labels { | |
202 -webkit-transition: all 500ms linear; | |
203 color: #fff; | |
204 font-size: 11px; | |
205 margin: 10px; | |
206 text-align: end; | |
207 text-shadow: | |
208 0 0 4px rgba(0,0,0,.6), | |
209 0 1px 2px rgba(0,0,0,.8), | |
210 0 -1px 2px rgba(0,0,0,1); | |
211 } | |
212 | |
213 #background { | |
214 -webkit-transition: 700ms opacity; | |
215 background-size: 100% 100%; | |
216 height: 100%; | |
217 left: 0; | |
218 position: absolute; | |
219 top: 0; | |
220 width: 100%; | |
221 } | |
222 | |
223 .background-initial { | |
224 opacity: 0; | |
225 } | |
226 | |
227 .throbber { | |
228 -webkit-animation: throbber-animation 1s steps(36) infinite; | |
229 -webkit-margin-before: 2px; | |
230 -webkit-margin-end: 4px; | |
231 background-image: url(chrome://theme/IDR_CROS_DEFAULT_THROBBER); | |
232 display: inline-block; | |
233 height: 16px; | |
234 width: 16px; | |
235 } | |
236 | |
237 @-webkit-keyframes throbber-animation { | |
238 from { | |
239 background-position: 0; | |
240 } | |
241 to { | |
242 background-position: -576px; | |
243 } | |
244 } | |
245 | |
OLD | NEW |