remoting/webapp/main.css

   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
   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 {
  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
  26 body {
  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 */
  39 html.apps-v2 .apps-v1-only {
  40   display: none !important;
  41 }
  42
  43 html:not(.apps-v2) .apps-v2-only {
  44   display: none !important;
  45 }
  46
  47 a {
  48   text-decoration: none;
  49   color: #15c;
  50   cursor: pointer;
  51 }
  52
  53 a:active {
  54   color: #d14836;
  55 }
  56
  57 strong, b {
  58   color: #000;
  59 }
  60
  61 /*------------------------------------------------------------------
  62 Component: Buttons
  63 ------------------------------------------------------------------*/
  64 button {
  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
  80 button: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
  89 button: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
  95 button:focus {
  96   outline: none;
  97   border: 1px solid #4d90fe;
  98 }
  99
 100 button[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 /*------------------------------------------------------------------
 194 Component: Text Field
 195 ------------------------------------------------------------------*/
 196 input[type=text],
 197 input[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 }
 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);
 211 }
 212 input[type=text]:focus,
 213 input[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 /*------------------------------------------------------------------
 220 Component: 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
 242 h1.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
 254 h2 {
 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
 279 section h2 {
 280   color: #666;
 281 }
 282
 283 header {
 284   display: flex;
 285   width: 100%;
 286 }
 287
 288 html {
 289   -webkit-user-select: none;
 290   cursor: default;
 291 }
 292
 293 section {
 294   width: 690px;
 295   margin: 30px auto;
 296 }
 297
 298 section {
 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
 480 td {
 481   vertical-align: middle;
 482 }
 483
 484 thead {
 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
 546 button {
 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 }
 623
 624 .dialog-screen {
 625   position: absolute;
 626   top: 0;
 627   left: 0;
 628   width: 100%;
 629   height: 100%;
 630   background-color: #fff;
 631   opacity: 0.75;
 632 }
 633
 634 /* TODO(jamiewalch): crbug.com/252796: Remove these once crbug.com/240772
 635  * is fixed. */
 636 .no-horizontal-scroll {
 637   overflow-x: hidden !important;
 638 }
 639
 640 .no-vertical-scroll {
 641   overflow-y: hidden !important;
 642 }
 643
 644 html.apps-v2.scrollable {
 645   overflow: scroll;
 646 }
 647
 648
 649 /* TODO(jamiewalch): Reinstate this if we're able to get translations for
 650  *     "Why is this safe?" that don't overflow in any language.
 651 #host-setup-dialog {
 652   width: 460px;
 653 }
 654 */
 655
 656 #host-plugin-container {
 657   width: 0;
 658   height: 0;
 659 }
 660
 661 /* The NAT traversal state is independent of the app mode, and both need
 662  * to be combined to determine the visibility of the butter bar. We use
 663  * a style for the former and the 'hidden' property for the latter. */
 664 #nat-box.traversal-enabled {
 665   display: none;
 666 }
 667
 668 #remember-pin {
 669   width: 315px;
 670 }
 671
 672 #session-client-plugin {
 673   box-shadow: 0 0 8px 0 black;
 674   -webkit-user-select: none;
 675 }
 676
 677 #session-client-plugin {
 678   display: block;
 679   flex-shrink: 0;
 680 }
 681
 682 .session-client-inactive {
 683   -webkit-filter: grayscale(70%);
 684   transition: -webkit-filter 0.218s;
 685 }
 686
 687 #set-pin-table td {
 688   border-bottom: 6px solid transparent;
 689 }
 690
 691 #top-secondary {
 692   margin-top: 10px
 693 }
 694
 695 #webapp-description {
 696   margin-bottom: 10px;
 697 }
 698
 699 * {
 700   box-sizing: border-box;
 701 }
 702
 703 /*
 704  * Setting hidden on elements that match some rule overriding 'display' doesn't
 705  * do what you would expect unless this is made explicit (and !important).
 706  */
 707 [hidden] {
 708   display: none !important;
 709 }
 710
 711 .full-width {
 712   width: 100%;
 713 }
 714
 715 .full-height {
 716   height: 100%;
 717 }
 718
 719 .horizontally-centered {
 720   display: flex;
 721   align-items: center;
 722 }
 723
 724 .vertically-centered {
 725   display: flex;
 726   flex-direction: column;
 727   height: 100%
 728 }
 729
 730 .horizontally-centered::before,
 731 .horizontally-centered::after,
 732 .vertically-centered::before,
 733 .vertically-centered::after {
 734   content: "";
 735   flex: 1;
 736 }
 737
 738 /* Bump-scrolling is currently implemented by adjusting the margins, which is
 739  * easier to implement with "position: fixed". In full-screen mode there are
 740  * no scroll-bars, so the advantages of flex-box layout to achieve centering
 741  * (ie, the DOM is easier to measure to determine when scroll-bars are needed)
 742  * don't apply */
 743 .full-screen #session-mode {
 744   position: fixed;
 745   top: 0;
 746   left: 0;
 747   width: 100%;
 748 }
 749
 750 /* video-container needs relative position so that mediasource-video-output can
 751  * be positioned relative to the parent with position:absolute. */
 752 #video-container {
 753   position: relative;
 754 }
 755
 756 /* mediasource-video-output is hidden by default. */
 757 #video-container video {
 758   display: none;
 759 }
 760
 761 /* Use absolute positioning for mediasource-video-output so that it's rendered
 762  * at the same position as the plugin. */
 763 #video-container.mediasource-rendering video {
 764   display: block;
 765   position: absolute;
 766   left: 0;
 767   top: 0;
 768   box-shadow: 0 0 8px 0 black;
 769 }
 770
 771 /*
 772  * With MediaSource-based rendering the plugin is transparent and is placed on
 773  * top of the <video> element so that it can still receive mouse events.
 774  *
 775  * TODO(sergeyu): This is temporary solution. Ideally mouse and keyboard events
 776  * should be captured on JS level and passed to the plugin.
 777  */
 778 #video-container.mediasource-rendering .client-plugin-container {
 779   opacity: 0;
 780 }
 781
 782 .mouse-cursor-overlay {
 783   position: absolute;
 784   pointer-events: none;
 785 };