main.css revision c2e0dbddbe15c98d52c4786dac06cb8952a8ae6d 
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    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    box-shadow: inset 1px 1px 1px rgba(0,0,0,0.25);
155}
156
157::-webkit-scrollbar-thumb:active {
158    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   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  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    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
195}
196input[type=text]:focus,
197input[type=password]:focus {
198    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  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-flex;
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-flex: 1;
283}
284
285.centered {
286  text-align: center;
287}
288
289.clickable {
290  cursor: pointer;
291}
292
293.box {
294  display: -webkit-flex;
295}
296
297.host-list-empty-instructions {
298  padding-__MSG_@@bidi_start_edge__: 36px;
299  color: #666;
300  background-image: url('host_setup_instructions.webp');
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-flex;
319  -webkit-align-items: 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.webp');
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.error-state.multi-line-error-state {
348  padding-top: 0;
349  min-height: 22px;
350}
351
352.expiring {
353  color: #900 !important;
354}
355
356.infographic {
357  position: absolute;
358  __MSG_@@bidi_end_edge__: 22px;
359  top: 24px;
360}
361
362.infographic-description {
363  height: 80px;
364  width: 400px;
365  padding-top: 2em;
366}
367
368.information-box {
369  background-color: #f9edbe;
370  border: 1px solid #f0c36d;
371  -webkit-border-radius: 2px;
372  box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
373  color: #222;
374  padding: 8px 16px;
375  text-align: center;
376  font-size: 12px;
377  margin-top: 30px;
378}
379
380#survey-opt-in {
381  position: absolute;
382  top: 80px;
383  left: 0;
384}
385
386.butter-bar {
387  display: -webkit-box;
388  width: 100%;
389}
390
391.butter-bar .close-icon {
392  vertical-align: top;
393  opacity: 0.4;
394  margin-__MSG_@@bidi_start_edge__: 2px;
395  margin-__MSG_@@bidi_end_edge__: -12px;
396}
397
398.butter-bar .close-icon:hover {
399  opacity: 0.7;
400}
401
402.butter-bar > p {
403  background-color: #f9edbe;
404  border: 1px solid #f0c36d;
405  -webkit-border-radius: 2px;
406  -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
407  color: #222;
408  font-size: 12px;
409  padding: 4px 16px;
410  margin: auto;
411}
412
413.butter-bar a {
414  color: inherit;
415  text-decoration: underline;
416  padding-__MSG_@@bidi_start_edge__: 2px;
417}
418
419.message {
420  margin-bottom: 24px;
421}
422
423.mode-select-button-column {
424  text-align: __MSG_@@bidi_end_edge__;
425}
426
427.mode-select-button-column button {
428  min-width: 72px;
429}
430
431td {
432  vertical-align: middle;
433}
434
435.host-online.clickable:hover,
436.host-online.clickable.child-focused {
437  background-color: #f2f2f2;
438}
439
440.host-list-rename-icon,
441.host-list-remove-icon {
442  opacity: 0;
443}
444
445.section-row:hover .host-list-rename-icon,
446.section-row.child-focused .host-list-rename-icon {
447  opacity: 0.6;
448}
449
450.section-row:hover .host-list-remove-icon,
451.section-row.child-focused .host-list-remove-icon {
452  opacity: 0.3;
453}
454
455.host-list-rename-icon:hover {
456  opacity: 1 !important;
457}
458
459.host-list-remove-icon:hover {
460  opacity: 0.5 !important;
461}
462
463.host-list-edit {
464  padding: 0 5px;
465}
466
467.host-list-label, .host-list-label:visited, .host-list-label:active {
468  color: inherit;
469  cursor: inherit;
470}
471
472.host-list-main-icon {
473  margin-__MSG_@@bidi_end_edge__: 10px;
474  vertical-align: middle;
475  position: relative;
476}
477
478.host-list-main-icon > span {
479  background-image: url('icon_warning.webp');
480  background-repeat: no-repeat;
481  position: absolute;
482  width: 22px;
483  height: 22px;
484  bottom: -5px;
485  right: -10px;
486}
487
488.host-offline .host-list-label,
489.host-offline .host-list-main-icon {
490  opacity: 0.5;
491}
492
493button {
494  white-space:nowrap;
495}
496
497.small-print {
498  font-size: 13px;
499  color: #AAA;
500}
501
502.waiting {
503  background-image: url('spinner.gif');
504  background-repeat: no-repeat;
505  background-position: top __MSG_@@bidi_start_edge__;
506  padding-__MSG_@@bidi_start_edge__: 30px;
507  padding-top: 2px;
508  padding-bottom: 4px;
509  color: rgb(180, 180, 180);
510  line-height: 27px; /* Same as line-height for buttons */
511}
512
513.prominent {
514  color: #222;
515}
516
517.space-before {
518  margin-top: 20px;
519}
520
521
522#access-code-countdown-container {
523  height: 50px;
524  text-align: center;
525}
526
527#access-code-display {
528  margin-top: 50px;
529  color: rgb(0, 0, 0);
530  font-weight: bold;
531  font-size: 26px;
532  text-align: center;
533}
534
535#access-code-entry-row {
536  margin-top: 24px;
537}
538
539#ask-pin-form .table-label {
540  min-width: 120px;
541  text-align: __MSG_@@bidi_end_edge__;
542  display: inline-block;
543}
544
545#ask-pin-form > div {
546  margin-bottom: 8px;
547}
548
549.checkbox-label {
550  display: block;
551  padding-__MSG_@@bidi_start_edge__: 20px;
552}
553
554.checkbox-label input[type=checkbox] {
555  float: __MSG_@@bidi_start_edge__;
556  margin-__MSG_@@bidi_start_edge__: -20px;
557  margin-__MSG_@@bidi_end_edge__: 0;
558  width: 20px;
559  margin-top: 2px;
560}
561
562#current-email {
563  color: rgba(0, 0, 0, 0.5);
564}
565
566#daemon-plugin-container {
567  width: 0;
568  height: 0;
569}
570
571.dialog-container {
572  position: fixed;
573  top: 200px;
574  left: 0;
575  width: 100%;
576  display: -webkit-flex;
577}
578
579.dialog-screen {
580  position: fixed;
581  top: 0;
582  left: 0;
583  width: 100%;
584  height: 100%;
585  background-color: #fff;
586  opacity: 0.75;
587}
588
589/* TODO(jamiewalch): Reinstate this if we're able to get translations for
590 *     "Why is this safe?" that don't overflow in any language.
591#host-setup-dialog {
592  width: 460px;
593}
594*/
595
596#host-plugin-container {
597  width: 0;
598  height: 0;
599}
600
601/* The NAT traversal state is independent of the app mode, and both need
602 * to be combined to determine the visibility of the butter bar. We use
603 * a style for the former and the 'hidden' property for the latter. */
604#nat-box.traversal-enabled {
605  display: none;
606}
607
608#session-mode {
609  position: absolute;
610  box-shadow: 0 0 8px 0 black;
611  -webkit-user-select: none;
612}
613
614#session-client-plugin {
615  display: block;
616}
617
618.session-client-inactive {
619  -webkit-filter: grayscale(70%);
620  -webkit-transition: -webkit-filter 0.218s;
621}
622
623#set-pin-table td {
624  border-bottom: 6px solid transparent;
625}
626
627#top-secondary {
628  margin-top: 10px
629}
630
631#webapp-description {
632  margin-bottom: 10px;
633}
634
635* {
636  box-sizing: border-box;
637}
638
639/*
640 * Setting hidden on elements that match some rule overriding 'display' doesn't
641 * do what you would expect unless this is made explicit (and !important).
642 */
643[hidden] {
644  display: none !important;
645}
646