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