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 padding-top: 5px; 393 color: #900; 394} 395 396.error-state.multi-line-error-state { 397 padding-top: 0; 398 min-height: 22px; 399} 400 401.expiring { 402 color: #900 !important; 403} 404 405.infographic { 406 position: absolute; 407 __MSG_@@bidi_end_edge__: 22px; 408 top: 24px; 409} 410 411.infographic-description { 412 height: 80px; 413 width: 400px; 414 padding-top: 2em; 415} 416 417.information-box { 418 background-color: #f9edbe; 419 border: 1px solid #f0c36d; 420 -webkit-border-radius: 2px; 421 box-shadow: 0px 2px 4px rgba(0,0,0,0.2); 422 color: #222; 423 padding: 8px 16px; 424 text-align: center; 425 font-size: 12px; 426 margin-top: 30px; 427} 428 429#butter-bar { 430 position: absolute; 431 top: 80px; 432 left: 0; 433 display: -webkit-box; 434 width: 100%; 435} 436 437#butter-bar-dismiss img { 438 vertical-align: top; 439 opacity: 0.4; 440 margin-__MSG_@@bidi_start_edge__: 2px; 441 margin-__MSG_@@bidi_end_edge__: -12px; 442} 443 444#butter-bar-dimiss:hover { 445 opacity: 0.7; 446} 447 448#butter-bar > p { 449 background-color: #f9edbe; 450 border: 1px solid #f0c36d; 451 border-radius: 2px; 452 box-shadow: 0px 2px 4px rgba(0,0,0,0.2); 453 color: #222; 454 font-size: 12px; 455 padding: 4px 16px; 456 margin: auto; 457} 458 459#butter-bar a { 460 color: inherit; 461 text-decoration: underline; 462 padding-__MSG_@@bidi_start_edge__: 2px; 463} 464 465#paired-clients-list table { 466 width: 100%; 467} 468 469.message { 470 margin-bottom: 24px; 471} 472 473.mode-select-button-column { 474 text-align: __MSG_@@bidi_end_edge__; 475} 476 477.mode-select-button-column button { 478 min-width: 72px; 479} 480 481td { 482 vertical-align: middle; 483} 484 485thead { 486 font-weight: bold; 487} 488 489.host-online.clickable:hover, 490.host-online.clickable.child-focused { 491 background-color: #f2f2f2; 492} 493 494.host-list-rename-icon, 495.host-list-remove-icon { 496 opacity: 0; 497} 498 499.section-row:hover .host-list-rename-icon, 500.section-row.child-focused .host-list-rename-icon { 501 opacity: 0.6; 502} 503 504.section-row:hover .host-list-remove-icon, 505.section-row.child-focused .host-list-remove-icon { 506 opacity: 0.3; 507} 508 509.host-list-rename-icon:hover { 510 opacity: 1 !important; 511} 512 513.host-list-remove-icon:hover { 514 opacity: 0.5 !important; 515} 516 517.host-list-edit { 518 padding: 0 5px; 519} 520 521.host-list-label, .host-list-label:visited, .host-list-label:active { 522 color: inherit; 523 cursor: inherit; 524} 525 526.host-list-main-icon { 527 margin-__MSG_@@bidi_end_edge__: 10px; 528 vertical-align: middle; 529 position: relative; 530} 531 532.host-list-main-icon > span { 533 background-image: url('icon_warning.webp'); 534 background-repeat: no-repeat; 535 position: absolute; 536 width: 22px; 537 height: 22px; 538 bottom: -5px; 539 right: -10px; 540} 541 542.host-offline .host-list-label, 543.host-offline .host-list-main-icon { 544 opacity: 0.5; 545} 546 547button { 548 white-space:nowrap; 549} 550 551.small-print { 552 font-size: 13px; 553 color: #AAA; 554} 555 556.waiting { 557 background-image: url('spinner.gif'); 558 background-repeat: no-repeat; 559 background-position: __MSG_@@bidi_start_edge__ 3px; 560 padding: 5px 30px; 561 color: rgb(180, 180, 180); 562} 563 564.prominent { 565 color: #222; 566} 567 568#access-code-countdown-container { 569 height: 50px; 570 text-align: center; 571} 572 573#access-code-display { 574 margin-top: 50px; 575 color: rgb(0, 0, 0); 576 font-weight: bold; 577 font-size: 26px; 578 text-align: center; 579} 580 581#access-code-entry-row { 582 margin-top: 24px; 583} 584 585#ask-pin-form .table-label { 586 min-width: 120px; 587 text-align: __MSG_@@bidi_end_edge__; 588 display: inline-block; 589} 590 591#ask-pin-form > div { 592 margin-bottom: 8px; 593} 594 595.checkbox-label { 596 display: block; 597 padding-__MSG_@@bidi_start_edge__: 20px; 598 margin-top: 12px; 599} 600 601.checkbox-label input[type=checkbox] { 602 float: __MSG_@@bidi_start_edge__; 603 margin-__MSG_@@bidi_start_edge__: -20px; 604 margin-__MSG_@@bidi_end_edge__: 0; 605 width: 20px; 606 margin-top: 2px; 607} 608 609#current-email { 610 color: rgba(0, 0, 0, 0.5); 611} 612 613#daemon-plugin-container { 614 width: 0; 615 height: 0; 616} 617 618.dialog-container { 619 position: absolute; 620 top: 200px; 621 left: 0; 622 width: 100%; 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} 634 635/* TODO(jamiewalch): crbug.com/252796: Remove these once crbug.com/240772 636 * is fixed. */ 637.no-horizontal-scroll { 638 overflow-x: hidden !important; 639} 640 641.no-vertical-scroll { 642 overflow-y: hidden !important; 643} 644 645html.apps-v2.scrollable { 646 overflow: scroll; 647} 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/* video-container needs relative position so that mediasource-video-output can 752 * be positioned relative to the parent with position:absolute. */ 753#video-container { 754 position: relative; 755} 756 757/* mediasource-video-output is hidden by default. */ 758#mediasource-video-output { 759 display: none; 760} 761 762/* Use absolute positioning for mediasource-video-output so that it's rendered 763 * at the same position as the plugin. */ 764#video-container.mediasource-rendering #mediasource-video-output { 765 display: block; 766 position: absolute; 767 left: 0; 768 top: 0; 769 box-shadow: 0 0 8px 0 black; 770} 771 772/* 773 * With MediaSource-based rendering the plugin is transparent and is placed on 774 * top of the <video> element so that it can still receive mouse events. 775 * 776 * TODO(sergeyu): This is temporary solution. Ideally mouse and keyboard events 777 * should be captured on JS level and passed to the plugin. 778 */ 779#video-container.mediasource-rendering #client-plugin-container { 780 opacity: 0; 781} 782 783.mouse-cursor-overlay { 784 position: absolute; 785 pointer-events: none; 786}; 787