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