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