Updating trunk VERSION from 2139.0 to 2140.0
[chromium-blink-merge.git] / ui / login / oobe.css
blob8dae75e767016de50ab00f6936c72d688cebec83
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.
5 * This is the stylesheet used by the Out of the box experience (OOBE) flow,
6 * sign in and lock screens.
7 */
9 html,
10 body {
11 height: 100%;
12 width: 100%;
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;
26 body.solid {
27 background-color: white;
30 button {
31 font-family: inherit;
32 outline: none;
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;
44 /* ':focus' used twice to increase specificity. */
45 button.custom-appearance:focus:focus {
46 border-color: rgb(77, 144, 254);
49 button:not(.custom-appearance) {
50 min-width: 72px !important;
53 button.button-fancy {
54 min-width: 72px !important;
57 button.button-blue {
58 background-image: 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);
74 button.button-blue:hover {
75 background-image: 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);
82 button.button-blue:active {
83 background-image: 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);
90 button.button-red {
91 background-image: 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);
105 button.button-red:hover {
106 background-image: 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);
113 button.button-red:active {
114 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
117 .label,
118 .flexible-label {
119 display: block;
120 margin: 5px 5px 5px 0;
121 padding: 5px 5px 5px 0;
124 .label {
125 width: 170px;
128 .flexible-label {
129 max-width: 250px;
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;
143 #installation-settings-popup h1 {
144 -webkit-padding-end: 24px;
145 -webkit-user-select: none;
146 background: 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;
155 .popup-content-area {
156 padding: 0 20px 60px 20px;
159 #installation-settings-popup button {
160 bottom: 20px;
161 position: absolute;
162 right: 20px;
165 #tpm-busy {
166 text-align: center;
169 #tpm-password {
170 font-weight: bold;
171 text-align: center;
174 [hidden] {
175 display: none !important;
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;
193 #bubble {
194 -webkit-transition: 250ms opacity;
197 span.bold {
198 font-weight: bold;
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);
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%;
223 .background-initial {
224 opacity: 0;
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;
237 @-webkit-keyframes throbber-animation {
238 from {
239 background-position: 0;
241 to {
242 background-position: -576px;