main.css revision 5821806d5e7f356e8fa4b058a389a808ea183019 
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
6html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
7blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
8font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl,
9dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
10tfoot, thead, tr, th, td, button {
11  margin: 0;
12  padding: 0;
13  border: 0;
14  font-weight: inherit;
15  font-style: inherit;
16  font-size: 100%;
17  font-family: inherit;
18  vertical-align: baseline;
19}
20
21body {
22  font-family: "Arial", "Helvetica", sans-serif;
23  color: #222;
24  font-size: 13px;
25  margin: 0;
26  padding: 20px;
27  direction: __MSG_@@bidi_dir__;
28}
29
30a {
31  text-decoration: none;
32  color: #15c;
33  cursor: pointer;
34}
35
36a:active {
37  color: #d14836;
38}
39
40strong, b {
41  color: #000;
42}
43
44
45/*------------------------------------------------------------------
46Component: Buttons
47------------------------------------------------------------------*/
48button {
49  min-width: 72px;
50  border:1px solid #DCDCDC;
51  color: #444;
52  font-size: 11px;
53  font-weight: bold;
54  height: 27px;
55  padding: 0 8px;
56  line-height: 27px;
57  border-radius:2px;
58  -webkit-transition: all 0.218s;
59  background-image: -webkit-gradient(linear, left top, left bottom,
60                                     from(#f5f5f5), to(#f1f1f1));
61  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
62}
63
64button:hover {
65  border: 1px solid #C6C6C6;
66  color: #222;
67  transition: all 0.0s;
68  background-image: -webkit-gradient(linear, left top, left bottom,
69                                     from(#f8f8f8), to(#f1f1f1));
70  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
71}
72
73button:active {
74  background: #f6f6f6 -webkit-gradient(linear,left top,left bottom,
75                                       from(#f6f6f6),to(#f1f1f1));
76  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
77}
78
79button:focus {
80  outline: none;
81  border: 1px solid #4d90fe;
82}
83
84button[disabled], button[disabled]:hover, button[disabled]:active {
85  background: linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
86  border-color: #aaa;
87  color: #888;
88  box-shadow: none;
89}
90
91/* Colored Buttons */
92.kd-button-share {
93  border: 1px solid #29691d;
94  color: #FFF;
95  text-shadow: 0px 1px rgba(0,0,0,0.1);
96  background-image: -webkit-gradient(linear,left top,left bottom,
97                                     from(#3d9400),to(#398a00));
98}
99
100.kd-button-share:hover {
101  border: 1px solid #404040;
102  color: #FFF;
103  text-shadow: 0px 1px rgba(0,0,0,0.3);
104  background-image: -webkit-gradient(linear,left top,left bottom,
105                                     from(#3d9400),to(#368200));
106}
107
108.kd-button-share:active, .kd-button-share:focus:active {
109  box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
110  background-image: -webkit-gradient(linear,left top,left bottom,
111                                     from(#3d9400),to(#368200));
112}
113
114.kd-button-share:focus {
115  border-color:#29691d;
116  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
117}
118
119.kd-button-share:focus:hover {
120  box-shadow:inset 0 0 0 1px #fff, 0px 1px 1px rgba(0,0,0,0.1);
121}
122
123.kd-button-share[disabled], .kd-button-share[disabled]:hover,
124.kd-button-share[disabled]:active {
125  border: 1px solid #505050;
126  color: #FFF;
127  opacity: 0.5;
128  text-shadow: 0px 1px rgba(0,0,0,0.1);
129  background-image: -webkit-gradient(linear,left top,left bottom,
130                                     from(#3d9400),to(#398a00));
131}
132
133::-webkit-scrollbar {
134    width: 16px;
135    height: 16px;
136}
137
138::-webkit-scrollbar-button {
139    height: 0px;
140    width: 0px;
141}
142
143::-webkit-scrollbar-thumb {
144    min-height: 28px;
145    padding-top:100px;
146    background-clip:padding-box;
147    background-color: rgba(0,0,0,0.2);
148    -webkit-box-shadow: inset 1px 1px 0px rgba(0,0,0,0.10),
149                        inset 0px -1px 0px  rgba(0,0,0,0.07);
150}
151
152::-webkit-scrollbar-thumb:hover {
153    background-color: rgba(0,0,0,0.4);
154    -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.25);
155}
156
157::-webkit-scrollbar-thumb:active {
158    -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
159    background-color: rgba(0,0,0,0.5);
160}
161
162::-webkit-scrollbar-track:hover {
163  background-color:rgba(0,0,0,0.05);
164   -webkit-box-shadow: inset 1px 0px 0px  rgba(0,0,0,0.10);
165}
166
167::-webkit-scrollbar-track:active {
168  background-color:rgba(0,0,0,0.05);
169  -webkit-box-shadow: inset 1px 0px 0px  rgba(0,0,0,0.14),
170                      inset -1px -1px 0px  rgba(0,0,0,0.07);
171}
172
173::-webkit-scrollbar-track-piece {
174  background: white;
175}
176
177/*------------------------------------------------------------------
178Component: Text Field
179------------------------------------------------------------------*/
180input[type=text],
181input[type=password] {
182    height: 29px;
183    padding-__MSG_@@bidi_start_edge__: 8px;
184    color: #333;
185    border: 1px solid #d9d9d9;
186    border-top: 1px solid #c0c0c0;
187    vertical-align: top;
188    -webkit-border-radius: 1px;
189}
190input[type=text]:hover,
191input[type=password]:hover {
192    border: 1px solid #b9b9b9;
193    border-top: 1px solid #a0a0a0;
194    -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
195}
196input[type=text]:focus,
197input[type=password]:focus {
198    -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
199    outline: none;
200    border: 1px solid #4d90fe;
201}
202
203/*------------------------------------------------------------------
204Component: Modal Dialog
205------------------------------------------------------------------*/
206.kd-modaldialog:not([hidden]) {
207  opacity: 1.0;
208  -webkit-transform: scale(1.0);
209}
210
211.kd-modaldialog {
212  -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.2);
213  background: white;
214  outline:1px solid rgba(0,0,0,0.2);
215  padding:30px 42px;
216  width: 500px;
217  height: auto;
218  overflow: hidden;
219  z-index: 100;
220  opacity: 0.0;
221  -webkit-transform: scale(1.05);
222  -webkit-transition: all 0.218s;
223}
224
225h1.icon-label {
226  vertical-align: 14px;
227  margin-bottom: 60px;
228  font-size: 28px;
229  font-weight: 300;
230  color: #999;
231  font-family: "Open sans", "Ariel", sans-serif;
232  line-height: 24px;
233  display: inline-block;
234  margin-__MSG_@@bidi_start_edge__: 10px;
235}
236
237h2 {
238  font-size: 16px;
239  line-height:24px;
240  font-weight: normal;
241  color: #222;
242  margin-bottom: 10px;
243}
244
245section > h2 {
246  color: #666;
247}
248
249header {
250  display: -webkit-box;
251  width: 100%;
252}
253
254html {
255  -webkit-user-select: none;
256  cursor: default;
257}
258
259section {
260  width: 690px;
261  margin: 30px auto;
262}
263
264section {
265  border: 1px solid #e5e5e5;
266  background: #f9f9f9;
267  padding: 20px 30px 20px 30px;
268  border-radius: 3px;
269  box-shadow: 0 2px 5px rgba(0,0,0,0.07);
270  position: relative;
271}
272
273.access-code-digit-group {
274  /*
275    Used for each of the four-digit components of the access code as
276    displayed by the host.
277  */
278  padding: 0px 6px;
279}
280
281.box-spacer {
282  -webkit-box-flex: 1;
283}
284
285.centered {
286  text-align: center;
287}
288
289.clickable {
290  cursor: pointer;
291}
292
293.box {
294  display: -webkit-box;
295}
296
297.host-list-empty-instructions {
298  padding-__MSG_@@bidi_start_edge__: 36px;
299  color: #666;
300  background-image: url('host_setup_instructions.png');
301  background-repeat: no-repeat;
302  background-position: -3px -2px;
303}
304
305#host-list-empty-hosting-supported {
306  margin-top: 14px;
307  padding-top: 20px;
308  border-top: 1px solid #E5E5E5;
309  background-position-y: 18px;
310}
311
312.selectable {
313  -webkit-user-select: text;
314  cursor: text;
315}
316
317.section-row {
318  display: -webkit-box;
319  -webkit-box-align: center;
320  padding: 10px 0;
321  border-top: 1px solid #EBEBEB;
322}
323
324.section-row button {
325  margin-__MSG_@@bidi_start_edge__: 20px;
326}
327
328.section-row:first-child,
329.section-row.no-non-local-hosts {
330  border-top: none;
331}
332
333.editbox-label {
334  line-height: 29px;
335  font-weight: bold;
336}
337
338.error-state {
339  background-image: url('icon_warning.png');
340  background-repeat: no-repeat;
341  background-position: top __MSG_@@bidi_start_edge__;
342  padding-__MSG_@@bidi_start_edge__: 30px;
343  padding-top: 5px;
344  color: #900;
345}
346
347.expiring {
348  color: #900 !important;
349}
350
351.infographic {
352  position: absolute;
353  __MSG_@@bidi_end_edge__: 22px;
354  top: 24px;
355}
356
357.infographic-description {
358  height: 80px;
359  width: 400px;
360  padding-top: 2em;
361}
362
363.information-box {
364  background-color: #f9edbe;
365  border: 1px solid #f0c36d;
366  -webkit-border-radius: 2px;
367  -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
368  color: #222;
369  padding: 8px 16px;
370  text-align: center;
371  font-size: 12px;
372}
373
374.message {
375  margin-bottom: 24px;
376}
377
378.mode-select-button-column {
379  text-align: __MSG_@@bidi_end_edge__;
380}
381
382.mode-select-button-column button {
383  min-width: 72px;
384}
385
386td {
387  vertical-align: middle;
388}
389
390.host-online.clickable:hover,
391.host-online.clickable.child-focused {
392  background-color: #f2f2f2;
393}
394
395.host-list-rename-icon,
396.host-list-remove-icon {
397  opacity: 0;
398}
399
400.section-row:hover .host-list-rename-icon,
401.section-row.child-focused .host-list-rename-icon {
402  opacity: 0.6;
403}
404
405.section-row:hover .host-list-remove-icon,
406.section-row.child-focused .host-list-remove-icon {
407  opacity: 0.3;
408}
409
410.host-list-rename-icon:hover {
411  opacity: 1 !important;
412}
413
414.host-list-remove-icon:hover {
415  opacity: 0.5 !important;
416}
417
418.host-list-edit {
419  padding: 0 5px;
420}
421
422.host-list-label, .host-list-label:visited, .host-list-label:active {
423  color: inherit;
424  cursor: inherit;
425}
426
427.host-list-main-icon {
428  margin-__MSG_@@bidi_end_edge__: 10px;
429  vertical-align: middle;
430}
431
432.host-offline .host-list-label,
433.host-offline .host-list-main-icon {
434  opacity: 0.5;
435}
436
437button {
438  white-space:nowrap;
439}
440
441.small-print {
442  font-size: 13px;
443  color: #AAA;
444}
445
446.waiting {
447  background-image: url('spinner.gif');
448  background-repeat: no-repeat;
449  background-position: top __MSG_@@bidi_start_edge__;
450  padding-__MSG_@@bidi_start_edge__: 30px;
451  padding-top: 2px;
452  padding-bottom: 4px;
453  color: rgb(180, 180, 180);
454  line-height: 27px; /* Same as line-height for buttons */
455}
456
457.prominent {
458  color: #222;
459}
460
461.space-before {
462  margin-top: 20px;
463}
464
465
466#access-code-countdown-container {
467  height: 50px;
468  text-align: center;
469}
470
471#access-code-display {
472  margin-top: 50px;
473  color: rgb(0, 0, 0);
474  font-weight: bold;
475  font-size: 26px;
476  text-align: center;
477}
478
479#access-code-entry-row {
480  margin-top: 24px;
481}
482
483#ask-pin-form .table-label {
484  min-width: 120px;
485  text-align: __MSG_@@bidi_end_edge__;
486  display: inline-block;
487}
488
489#ask-pin-form > div {
490  margin-bottom: 8px;
491}
492
493.checkbox-label {
494  display: block;
495  padding-__MSG_@@bidi_start_edge__: 20px;
496}
497
498.checkbox-label input[type=checkbox] {
499  float: __MSG_@@bidi_start_edge__;
500  margin-__MSG_@@bidi_start_edge__: -20px;
501  margin-__MSG_@@bidi_end_edge__: 0;
502  width: 20px;
503  margin-top: 2px;
504}
505
506#current-email {
507  color: rgba(0, 0, 0, 0.5);
508}
509
510#daemon-plugin-container {
511  width: 0;
512  height: 0;
513}
514
515#dialog-container {
516  position: fixed;
517  top: 200px;
518  left: 0;
519  width: 100%;
520  display: -webkit-box;
521}
522
523#dialog-screen {
524  position: fixed;
525  top: 0;
526  left: 0;
527  width: 100%;
528  height: 100%;
529  background-color: #fff;
530  opacity: 0.75;
531}
532
533/* TODO(jamiewalch): Reinstate this if we're able to get translations for
534 *     "Why is this safe?" that don't overflow in any language.
535#host-setup-dialog {
536  width: 460px;
537}
538*/
539
540#host-plugin-container {
541  width: 0;
542  height: 0;
543}
544
545#nat-box {
546  margin-top: 30px;
547}
548
549/* The NAT traversal state is independent of the app mode, and both need
550 * to be combined to determine the visibility of the butter bar. We use
551 * a style for the former and the 'hidden' property for the latter. */
552#nat-box.traversal-enabled {
553  display: none;
554}
555
556#session-mode {
557  position: absolute;
558  -webkit-box-shadow: 0 0 8px 0 black;
559  -webkit-user-select: none;
560}
561
562#session-client-plugin {
563  display: block;
564}
565
566.session-client-inactive {
567  -webkit-filter: grayscale(70%);
568  -webkit-transition: -webkit-filter 0.218s;
569}
570
571#set-pin-table td {
572  border-bottom: 6px solid transparent;
573  text-align: right;
574}
575
576#top-secondary {
577  margin-top: 10px
578}
579
580#webapp-description {
581  margin-bottom: 10px;
582}
583
584#why-is-this-safe {
585  display: inline-block;
586  margin-top: 7px;
587}
588
589* {
590  box-sizing: border-box;
591}
592
593/*
594 * Setting hidden on elements that match some rule overriding 'display' doesn't
595 * do what you would expect unless this is made explicit (and !important).
596 */
597[hidden] {
598  display: none !important;
599}
600