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