OLD | NEW |
| (Empty) |
1 /* Copyright (c) 2011 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 /* TODO(fsamuel, nkostylev): RTL support for the OOBE and Login screens. */ | |
7 | |
8 body { | |
9 /* Don't highlight links when they're tapped. Safari has bugs here that | |
10 show up as flicker when dragging in some situations */ | |
11 -webkit-tap-highlight-color: transparent; | |
12 /* Don't allow selecting text - can occur when dragging */ | |
13 -webkit-user-select: none; | |
14 background: -webkit-gradient(radial, center center, 0, center center, 400, | |
15 from(#fefefe), to(#efefef)); | |
16 font-family: 'Droid Sans', Arial, sans-serif; | |
17 font-size: 14px; | |
18 padding: 10px; | |
19 } | |
20 | |
21 #topshadow { | |
22 -webkit-mask: -webkit-gradient(linear, left top, right top, | |
23 from(rgba(0,0,0,0)), | |
24 color-stop(0.5, black), | |
25 to(rgba(0,0,0,0))); | |
26 -webkit-mask-clip: padding-box; | |
27 background: -webkit-gradient(linear, left top, left bottom, | |
28 from(rgba(0,0,0,0.3)), to(rgba(0,0,0,0.0))); | |
29 border: none; | |
30 border-top: 1px solid rgba(0,0,0,0.5); | |
31 height: 4px; | |
32 opacity: 0.3; | |
33 } | |
34 | |
35 #bottomshadow { | |
36 -webkit-mask: -webkit-gradient(linear, left top, right top, | |
37 from(rgba(0,0,0,0)), | |
38 color-stop(0.5, black), | |
39 to(rgba(0,0,0,0))); | |
40 -webkit-mask-clip: padding-box; | |
41 background: -webkit-gradient(linear, left bottom, left top, | |
42 from(rgba(0,0,0,0.2)), to(rgba(0,0,0,0.0))); | |
43 border: none; | |
44 border-bottom: 1px solid rgba(0,0,0,0.5); | |
45 height: 2px; | |
46 opacity: 0.3; | |
47 } | |
48 | |
49 input[type='text'], | |
50 input[type='password'], | |
51 select { | |
52 /* TODO(nkostylev): Remove this after merging the login screen with the OOBE. */ | |
53 font-family: 'Open Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; | |
54 } | |
55 | |
56 input[type='text'], | |
57 input[type='password'] { | |
58 -webkit-border-radius: 3px; | |
59 -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1), | |
60 0 1px 0 white, | |
61 0 0 1px transparent, | |
62 0 0 1px transparent, | |
63 0 0 1px transparent; | |
64 -webkit-margin-end: 7px; | |
65 -webkit-margin-start: 2px; | |
66 -webkit-transition: -webkit-box-shadow 100ms, background 100ms, border 500ms;
| |
67 border: 1px solid #a0a0a0; | |
68 font-size: 13px; | |
69 font-weight: 400; | |
70 padding: 4px 6px; | |
71 } | |
72 | |
73 input[type='text'].number, | |
74 input[type='password'].number { | |
75 border-bottom-right-radius: 0; | |
76 border-top-right-radius: 0; | |
77 } | |
78 | |
79 html[dir='rtl'] input[type='text'].number, | |
80 html[dir='rtl'] input[type='password'].number { | |
81 border-bottom-left-radius: 0; | |
82 border-top-left-radius: 0; | |
83 } | |
84 | |
85 input[type='text']::-webkit-input-placeholder, | |
86 input[type='password']::-webkit-input-placeholder, | |
87 input[type='text']::-webkit-input-placeholder:focus, | |
88 input[type='password']::-webkit-input-placeholder:focus{ | |
89 color: #a0a0a0; | |
90 } | |
91 | |
92 input[type='text']:first-child, | |
93 input[type='password']:first-child { | |
94 -webkit-margin-start: 0; | |
95 } | |
96 | |
97 input[type='text']:last-child, | |
98 input[type='password']:last-child { | |
99 -webkit-margin-end: 0; | |
100 } | |
101 | |
102 input[type='text']:focus, | |
103 input[type='text'].focus, | |
104 input[type='password']:focus, | |
105 input[type='password'].focus { | |
106 -webkit-transition: -webkit-box-shadow 200ms, background 200ms, border 200ms; | |
107 -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .15), | |
108 0 1px 0 transparent, | |
109 0 0 1px #c0c0c0, | |
110 0 0 1px #c0c0c0, | |
111 0 0 1px #c0c0c0; | |
112 background: #f8f8f8; | |
113 border-color: #4080fa; | |
114 outline: none; | |
115 } | |
116 | |
117 input[type='text'].small, | |
118 input[type='password'].small { | |
119 width: 2em; | |
120 } | |
121 | |
122 input[type='text'].invalid:not(:focus), | |
123 input[type='text'].invalid:not(:focus) { | |
124 background: #fff0f0; | |
125 color: #601414; | |
126 } | |
127 | |
128 input.emailbox { | |
129 margin-bottom: 20px; | |
130 } | |
131 | |
132 input.editbox { | |
133 height: 26px; | |
134 padding: 8px 5px 0; | |
135 width: 170px; | |
136 } | |
137 | |
138 /* Forms: Buttons */ | |
139 | |
140 button { | |
141 -webkit-box-shadow: inset 0 1px 2px white, | |
142 0 1px 2px rgba(0, 0, 0, .2); | |
143 -webkit-margin-end: 4px; | |
144 -webkit-margin-start: 4px; | |
145 -webkit-padding-end: 14px; | |
146 -webkit-padding-start: 14px; | |
147 -webkit-user-select: none; | |
148 background: -webkit-linear-gradient(#fafafa, #dcdcdc); | |
149 border: 1px solid #a0a0a0; | |
150 border-radius: 3px; | |
151 cursor: default; | |
152 font-size: 13px; | |
153 font-weight: 400; | |
154 margin: 0; | |
155 padding-bottom: 4px; | |
156 padding-top: 4px; | |
157 text-shadow: 0 1px 0 rgba(255, 255, 255, .5); | |
158 } | |
159 | |
160 button.default { | |
161 -webkit-padding-end: 21px; | |
162 -webkit-padding-start: 21px; | |
163 border-color: #808080; | |
164 border-width: 2px; | |
165 font-weight: 600; | |
166 padding-top: 7px; | |
167 padding-bottom: 7px; | |
168 } | |
169 | |
170 button.increment, | |
171 button.decrement { | |
172 -webkit-padding-end: 8px; | |
173 -webkit-padding-start: 8px; | |
174 font-weight: 600; | |
175 width: 25px; | |
176 } | |
177 | |
178 button.increment { | |
179 -webkit-margin-start: -11px !important; | |
180 border-radius: 0; | |
181 } | |
182 | |
183 button.decrement { | |
184 -webkit-margin-start: -8px; | |
185 border-bottom-left-radius: 0; | |
186 border-top-left-radius: 0; | |
187 } | |
188 | |
189 button:disabled, | |
190 button.disabled { | |
191 opacity: 0.5; | |
192 } | |
193 | |
194 button:not(:disabled):not(.disabled):hover, | |
195 button.hover, | |
196 .delete-button:hover { | |
197 -webkit-box-shadow: inset 0 1px 2px white, | |
198 0 2px 4px rgba(0, 0, 0, .2);
| |
199 background: -webkit-linear-gradient(#fff, #e6e6e6); | |
200 text-shadow: 0 1px 0 #fff; | |
201 } | |
202 | |
203 button:not(:disabled):not(.disabled):active, | |
204 button.active { | |
205 -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); | |
206 background: -webkit-linear-gradient(#f0f0f0, #bebebe); | |
207 border-color: #808080; | |
208 padding-bottom: 3px; | |
209 padding-top: 5px; | |
210 position: relative; | |
211 text-shadow: 0 1px 0 rgba(255, 255, 255, .25); | |
212 top: 1px; | |
213 } | |
214 | |
215 .delete-button:active { | |
216 -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); | |
217 background: -webkit-linear-gradient(#f0f0f0, #bebebe); | |
218 border-color: #808080; | |
219 text-shadow: 0 1px 0 rgba(255, 255, 255, .25); | |
220 } | |
221 | |
222 button.default:not(:disabled):not(.disabled):active, | |
223 button.default.active { | |
224 padding-bottom: 6px; | |
225 padding-top: 8px; | |
226 } | |
227 | |
228 button:first-child, | |
229 input[type='text'] + button { | |
230 -webkit-margin-start: 0; | |
231 } | |
OLD | NEW |