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