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