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