1/* Copyright (c) 2012 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/* TODO(jhawkins): Organize these by page. */
6
7#sync-setup-overlay * h4 {
8  margin: 5px 0;
9}
10
11#sync-setup-overlay * form {
12  -webkit-user-select: none;
13}
14
15#sync-setup-overlay * .content-area {
16  padding: 10px 15px;
17}
18
19.action-area-link-container {
20  -webkit-box-flex: 1;
21}
22
23.sync-customize-section-container {
24  margin: 5px 0 10px 0;
25}
26
27#sync-custom-passphrase {
28  margin: 0 25px;
29}
30
31#sync-passphrase-message {
32  color: gray;
33}
34
35.sync-custom-passphrase-input {
36  margin: 10px 0;
37}
38
39#sync-existing-passphrase-container {
40  background: rgb(255, 242, 158);
41  border: 1px solid rgb(212, 205, 173);
42  padding: 10px;
43}
44
45#sync-select-container {
46  margin-bottom: 10px;
47}
48
49#sync-instructions-container {
50  line-height: 1.8em;
51  margin-bottom: 30px;
52}
53
54#choose-data-types-body {
55  -webkit-column-count: 3;
56  margin: 10px 0;
57}
58
59#choose-data-types-body > .checkbox:first-child {
60  margin-top: 0;
61}
62
63#choose-data-types-body > .checkbox:last-child {
64  margin-bottom: 0;
65}
66
67#sync-setup-overlay {
68  -webkit-user-select: none;
69  background-color: white;
70  margin-bottom: 6px;
71  margin-top: 6px;
72  width: 500px;
73}
74
75#sync-setup-overlay * a:link {
76  color: rgb(0, 0, 204);
77}
78
79#sync-setup-overlay * a:visited {
80  color: rgb(85, 26, 139);
81}
82
83#sync-setup-overlay * a:active {
84  color: rgb(255, 0, 0);
85}
86
87#sync-setup-overlay * hr {
88  background-color: #ddd;
89  border: 0;
90  height: 1px;
91  text-align: left;
92  width: 100%;
93}
94
95#sync-setup-overlay * input[type='button'],
96#sync-setup-overlay * input[type='submit'] {
97  min-height: 26px;
98  min-width: 87px;
99}
100
101#sync-setup-delete-profile {
102  margin: 10px 0 0 0;
103}
104
105#email-readonly {
106  font-size: 15px;
107  height: 29px;
108  line-height: 29px;
109  margin: 0;
110}
111
112#encryption-section-message {
113  color: gray;
114  margin-bottom: 5px;
115}
116
117#basic-encryption-body,
118#full-encryption-body {
119  display: table;
120}
121
122#passphrase-input {
123  margin-bottom: 5px;
124  margin-top: 5px;
125}
126
127#incorrect-passphrase {
128  margin-top: 5px;
129}
130
131#sync-setup-overlay * .error {
132  color: red;
133}
134
135.overlay-warning {
136  background: white;
137  border: 2px solid #888;
138  border-radius: 8px;
139  box-shadow: 0.2em 0.2em 0.5em #888;
140  left: 25px;
141  padding: 15px;
142  position: absolute;
143  right: 25px;
144  top: 100px;
145}
146
147#cancel-warning-header {
148  font-weight: bold;
149  margin-bottom: 8px;
150}
151
152.overlay-warning input {
153  float: right;
154  margin-left: 5px;
155  margin-top: 12px;
156}
157
158#sync-passphrase-warning {
159  margin-bottom: 5px;
160}
161
162#captcha-div {
163  background: white;
164  border: 1px solid #e5e5e5;
165  overflow: hidden;
166  padding: 1em 1em;
167}
168
169#captcha-wrapper {
170  background: no-repeat;
171  background-position: center;
172  background-size: 200px 70px;
173  margin: 0 0 1em;
174}
175
176#captcha-image {
177  height: 70px;
178  width: 200px;
179}
180
181#asp-warning-div {
182  text-align: left;
183}
184
185#logging-in-throbber {
186  margin: 0 10px;
187}
188
189#password-row {
190  margin-bottom: 0;
191  margin-top: 2px;
192}
193
194#action-area {
195  margin: 1em 0;
196}
197
198#sign-in {
199  margin: 0;
200}
201
202#sync-setup-configure {
203  background: white;
204}
205
206#choose-data-types-form {
207  -webkit-user-select: none;
208}
209
210#chooseDataTypesRadio {
211  vertical-align: top;
212}
213
214#chooseDataTypes > div {
215  display: inline-block;
216}
217
218.sync-data-types {
219  margin-left: 5px;
220}
221
222#learn-more-link {
223  float: right;
224}
225
226html[dir='rtl'] #learn-more-link {
227  float: left;
228}
229
230#customize-link,
231#use-default-link {
232  -webkit-transition: opacity 250ms;
233}
234
235
236/* Sign in box. */
237
238.sign-in {
239  margin: 20px auto;
240  width: 335px;
241}
242
243.signin-box {
244  background: #f5f5f5;
245  border: 1px solid #e5e5e5;
246  padding: 20px 25px 15px;
247}
248
249#signin-header {
250  position: relative;
251}
252
253#signin-header h2 {
254  color: #222;
255  font-size: 16px;
256  font-weight: normal;
257  height: 16px;
258  line-height: 16px;
259  margin-top: 0;
260}
261
262#signin-header-logo {
263  background: transparent
264      url('chrome://resources/images/google-transparent.png') no-repeat;
265  display: inline-block;
266  height: 19px;
267  position: absolute;
268  right: 0;
269  top: 1px;
270  width: 52px;
271}
272
273html[dir='rtl'] #signin-header-logo {
274  left: 0;
275  right: auto;
276}
277
278#email-row,
279#email-readonly-row,
280#password-row {
281  margin: 0 0 1.5em;
282}
283
284/* Sign in buttons. */
285
286.signin-box input[type=submit] {
287  -webkit-margin-end: 0.4em;
288  -webkit-margin-start: 0;
289  -webkit-transition: all 218ms;
290  -webkit-user-select: none;
291  background-image: -webkit-linear-gradient(top, rgb(77, 144, 254),
292                                                 rgb(71, 135, 237));
293  border: 1px solid rgb(48, 121, 237);
294  border-radius: 2px;
295  color: white;
296  display: inline-block;
297  font-size: 13px;
298  font-weight: bold;
299  height: 32px;
300  line-height: 27px;
301  margin-bottom: 1.2em;
302  margin-top: 0;
303  min-width: 54px !important;
304  padding: 0 8px;
305}
306
307.signin-box input[type=submit]:hover {
308  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
309  -webkit-transition: all 0;
310  background-image: -webkit-linear-gradient(top, rgb(77, 144, 254),
311                                                 rgb(53, 122, 232));
312  border-color: rgb(47, 91, 183);
313  color: white;
314}
315
316.signin-box input[type=submit]:focus {
317  -webkit-box-shadow: inset 0 0 0 1px white;
318  border-color: rgb(77, 144, 254);
319  outline: none;
320  z-index: 4 !important;
321}
322
323.signin-box input[type=submit]:active,
324.signin-box input[type=submit]:focus:active {
325  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
326}
327
328.signin-box input[type=submit]:focus:hover {
329  -webkit-box-shadow: inset 0 0 0 1px white, 0 1px 1px rgba(0, 0, 0, 0.1);
330}
331
332.signin-box input[type=submit][disabled],
333.signin-box input[type=submit][disabled]:hover,
334.signin-box input[type=submit][disabled]:active {
335  -webkit-box-shadow: none;
336  background-color: rgb(77, 144, 254);
337  border: 1px solid rgb(48, 121, 237);
338  color: white;
339  opacity: 0.5;
340}
341
342/* Sign in text fields. */
343
344.signin-box input[type=text],
345.signin-box input[type=password] {
346  -webkit-border-radius: 1px;
347  -webkit-box-sizing: border-box;
348  background-color: white;
349  border: 1px solid #d9d9d9;
350  border-top: 1px solid #c0c0c0;
351  color: #333;
352  display: inline-block;
353  font-size: 15px;
354  height: 32px;
355  line-height: 27px;
356  margin-top: 0.5em;
357  padding-left: 8px;
358  vertical-align: top;
359  width: 100%;
360}
361
362html[dir='rtl'] .signin-box input[type=text],
363html[dir='rtl'] .signin-box input[type=password] {
364  padding-left: 0;
365  padding-right: 8px;
366}
367
368.signin-box input[type=text]:hover,
369.signin-box input[type=password]:hover {
370  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
371  border-color: #b9b9b9;
372  border-top: 1px solid #a0a0a0;
373}
374
375.signin-box input[type=text]:focus,
376.signin-box input[type=password]:focus {
377  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
378  border-color: rgb(77, 144, 254);
379  outline: none;
380}
381
382.signin-box input[type=text][disabled],
383.signin-box input[type=password][disabled] {
384  -webkit-box-shadow: none;
385  background: #f5f5f5;
386  border: 1px solid #e5e5e5;
387}
388
389.signin-box input[type=text][disabled]:hover,
390.signin-box input[type=password][disabled]:hover {
391  -webkit-box-shadow: none;
392}
393
394
395/* Sign in links. */
396
397.signin-box .account-link {
398  color: rgb(17, 85, 204) !important;
399  text-decoration: none;
400}
401
402.signin-box .account-link:visited {
403  color: rgb(102, 17, 204) !important;
404  text-decoration: none;
405}
406
407.signin-box .account-link:hover {
408  text-decoration: underline;
409}
410
411.signin-box .account-link:active {
412  color: rgb(209, 72, 54) !important;
413  text-decoration: underline;
414}
415
416/* Sign in text. */
417
418.signin-box strong {
419  color: #222;
420  display: block;
421}
422
423.signin-box label {
424  display: block;
425  font-weight: bold;
426}
427
428/* The help links inside the signin box labels should use a normal font. */
429.signin-box label a {
430  font-weight: normal;
431}
432
433/* Sign in miscellaneous. */
434
435.signin-box .throbber {
436  float: right;
437}
438
439html[dir='rtl'] .signin-box .throbber {
440  float: left;
441}
442
443#create-account-div {
444  display: inline-block;
445}
446
447.signin-box .errormsg {
448  color: rgb(221, 75, 57) !important;
449  font-size: 13px !important;
450  line-height: 17px;
451  margin: 0.5em 0 1.5em;
452}
453
454.signin-box .help-link {
455  -webkit-border-radius: 1em;
456  background: rgb(221, 75, 57);
457  color: white !important;
458  display: inline-block;
459  font-weight: bold;
460  padding: 0 5px;
461  position: relative;
462  text-decoration: none;
463  top: 0;
464}
465
466.signin-box .help-link:visited {
467  color: white !important;
468}
469
470.signin-box .help-link:hover {
471  color: white !important;
472  opacity: .7;
473}
474