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.
6 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
7 blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
8 font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl,
9 dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
10 tfoot, thead, tr, th, td, button {
18 vertical-align: baseline;
22 padding: 20px 20px 0 20px;
27 font-family: "Arial", "Helvetica", sans-serif;
31 direction: __MSG_@@bidi_dir__;
36 * The "app-v2" class is added to the <html> node by remoting.init if it's
37 * running as a V2 app.
39 html.apps-v2 .apps-v1-only {
40 display: none !important;
43 html:not(.apps-v2) .apps-v2-only {
44 display: none !important;
48 text-decoration: none;
61 /*------------------------------------------------------------------
63 ------------------------------------------------------------------*/
66 border:1px solid #DCDCDC;
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);
81 border: 1px solid #C6C6C6;
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);
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);
97 border: 1px solid #4d90fe;
100 button[disabled], button[disabled]:hover, button[disabled]:active {
101 background: linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
107 /* Colored Buttons */
109 border: 1px solid #29691d;
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));
116 .kd-button-share:hover {
117 border: 1px solid #404040;
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));
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));
130 .kd-button-share:focus {
131 border-color:#29691d;
132 box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
135 .kd-button-share:focus:hover {
136 box-shadow:inset 0 0 0 1px #fff, 0px 1px 1px rgba(0,0,0,0.1);
139 .kd-button-share[disabled], .kd-button-share[disabled]:hover,
140 .kd-button-share[disabled]:active {
141 border: 1px solid #505050;
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));
149 ::-webkit-scrollbar {
154 ::-webkit-scrollbar-button {
159 ::-webkit-scrollbar-thumb {
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);
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);
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);
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);
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);
189 ::-webkit-scrollbar-track-piece {
193 /*------------------------------------------------------------------
194 Component: Text Field
195 ------------------------------------------------------------------*/
197 input[type=password] {
199 padding-__MSG_@@bidi_start_edge__: 8px;
201 border: 1px solid #d9d9d9;
202 border-top: 1px solid #c0c0c0;
204 -webkit-border-radius: 1px;
206 input[type=text]:hover,
207 input[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);
212 input[type=text]:focus,
213 input[type=password]:focus {
214 box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
216 border: 1px solid #4d90fe;
219 /*------------------------------------------------------------------
220 Component: Modal Dialog
221 ------------------------------------------------------------------*/
222 .kd-modaldialog:not([hidden]) {
224 -webkit-transform: scale(1.0);
228 box-shadow: 0 4px 16px rgba(0,0,0,0.2);
230 outline:1px solid rgba(0,0,0,0.2);
238 -webkit-transform: scale(1.05);
239 -webkit-transition: all 0.218s;
243 vertical-align: 14px;
248 font-family: "Open sans", "Ariel", sans-serif;
250 display: inline-block;
251 margin-__MSG_@@bidi_start_edge__: 10px;
263 float: __MSG_@@bidi_end_edge__;
266 #host-list-loading-indicator:not(.loading) #host-list-loading,
267 #host-list-loading-indicator.loading #host-list-reload {
275 .icon-black:hover > img {
289 -webkit-user-select: none;
299 border: 1px solid #e5e5e5;
301 padding: 20px 30px 20px 30px;
303 box-shadow: 0 2px 5px rgba(0,0,0,0.07);
307 .access-code-digit-group {
309 Used for each of the four-digit components of the access code as
310 displayed by the host.
326 justify-content: flex-end;
334 .button-row span:first-child {
346 .host-list-empty-instructions {
347 padding-__MSG_@@bidi_start_edge__: 36px;
349 background-image: url('host_setup_instructions.webp');
350 background-repeat: no-repeat;
351 background-position: -3px -2px;
354 #host-list-empty-hosting-supported {
357 border-top: 1px solid #E5E5E5;
358 background-position-y: 18px;
362 -webkit-user-select: text;
368 -webkit-align-items: center;
370 border-top: 1px solid #EBEBEB;
373 .section-row button {
374 margin-__MSG_@@bidi_start_edge__: 20px;
377 .section-row:first-child,
378 .section-row.no-non-local-hosts {
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;
394 /* Vertical align the text*/
396 vertical-align: middle;
401 color: #900 !important;
406 __MSG_@@bidi_end_edge__: 22px;
410 .infographic-description {
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);
432 display: -webkit-box;
436 #butter-bar-dismiss img {
439 margin-__MSG_@@bidi_start_edge__: 2px;
440 margin-__MSG_@@bidi_end_edge__: -12px;
443 #butter-bar-dimiss:hover {
448 background-color: #f9edbe;
449 border: 1px solid #f0c36d;
451 box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
460 text-decoration: underline;
461 padding-__MSG_@@bidi_start_edge__: 2px;
464 #paired-clients-list table {
472 .mode-select-button-column {
473 text-align: __MSG_@@bidi_end_edge__;
476 .mode-select-button-column button {
481 vertical-align: middle;
488 .host-online.clickable:hover,
489 .host-online.clickable.child-focused {
490 background-color: #f2f2f2;
493 .host-list-rename-icon,
494 .host-list-remove-icon {
498 .section-row:hover .host-list-rename-icon,
499 .section-row.child-focused .host-list-rename-icon {
503 .section-row:hover .host-list-remove-icon,
504 .section-row.child-focused .host-list-remove-icon {
508 .host-list-rename-icon:hover {
509 opacity: 1 !important;
512 .host-list-remove-icon:hover {
513 opacity: 0.5 !important;
520 .host-list-label, .host-list-label:visited, .host-list-label:active {
525 .host-list-main-icon {
526 margin-__MSG_@@bidi_end_edge__: 10px;
527 vertical-align: middle;
531 .host-list-main-icon > span {
532 background-image: url('icon_warning.webp');
533 background-repeat: no-repeat;
541 .host-offline .host-list-label,
542 .host-offline .host-list-main-icon {
556 background-image: url('spinner.gif');
557 background-repeat: no-repeat;
558 background-position: __MSG_@@bidi_start_edge__ 3px;
560 color: rgb(180, 180, 180);
567 #access-code-countdown-container {
572 #access-code-display {
580 #access-code-entry-row {
584 #ask-pin-form .table-label {
586 text-align: __MSG_@@bidi_end_edge__;
587 display: inline-block;
590 #ask-pin-form > div {
596 padding-__MSG_@@bidi_start_edge__: 20px;
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;
609 color: rgba(0, 0, 0, 0.5);
612 #daemon-plugin-container {
631 background-color: #fff;
636 /* TODO(jamiewalch): crbug.com/252796: Remove these once crbug.com/240772
638 .no-horizontal-scroll {
639 overflow-x: hidden !important;
642 .no-vertical-scroll {
643 overflow-y: hidden !important;
646 html.apps-v2.scrollable {
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.
657 #host-plugin-container {
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 {
673 #session-client-plugin {
674 box-shadow: 0 0 8px 0 black;
675 -webkit-user-select: none;
678 #session-client-plugin {
683 .session-client-inactive {
684 -webkit-filter: grayscale(70%);
685 transition: -webkit-filter 0.218s;
689 border-bottom: 6px solid transparent;
696 #webapp-description {
701 box-sizing: border-box;
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).
709 display: none !important;
720 .horizontally-centered {
725 .vertically-centered {
727 flex-direction: column;
731 .horizontally-centered::before,
732 .horizontally-centered::after,
733 .vertically-centered::before,
734 .vertically-centered::after {
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)
744 .full-screen #session-mode {
751 /* Override full-height class until connected, otherwise it takes up 100% of
752 * the window height in addition to the home-screen UI. */
753 body:not(.connected) #session-mode {
757 /* video-container needs relative position so that mediasource-video-output can
758 * be positioned relative to the parent with position:absolute. */
763 /* mediasource-video-output is hidden by default. */
764 #video-container video {
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 {
775 box-shadow: 0 0 8px 0 black;
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.
782 * TODO(sergeyu): This is temporary solution. Ideally mouse and keyboard events
783 * should be captured on JS level and passed to the plugin.
785 #video-container.mediasource-rendering .client-plugin-container {
789 .mouse-cursor-overlay {
791 pointer-events: none;
794 body.hangout-remote-desktop .home-screen {