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