main.css revision 90dce4d38c5ff5333bea97d859d4e484e27edf0c
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 6html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 7blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 8font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, 9dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, 10tfoot, 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 21body { 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 30a { 31 text-decoration: none; 32 color: #15c; 33 cursor: pointer; 34} 35 36a:active { 37 color: #d14836; 38} 39 40strong, b { 41 color: #000; 42} 43 44 45/*------------------------------------------------------------------ 46Component: Buttons 47------------------------------------------------------------------*/ 48button { 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 64button: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 73button: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 79button:focus { 80 outline: none; 81 border: 1px solid #4d90fe; 82} 83 84button[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/*------------------------------------------------------------------ 178Component: Text Field 179------------------------------------------------------------------*/ 180input[type=text], 181input[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} 190input[type=text]:hover, 191input[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} 196input[type=text]:focus, 197input[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/*------------------------------------------------------------------ 204Component: 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 225h1.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 237h2 { 238 font-size: 16px; 239 line-height:24px; 240 font-weight: normal; 241 color: #222; 242 margin-bottom: 10px; 243} 244 245section > h2 { 246 color: #666; 247} 248 249header { 250 display: -webkit-flex; 251 width: 100%; 252} 253 254html { 255 -webkit-user-select: none; 256 cursor: default; 257} 258 259section { 260 width: 690px; 261 margin: 30px auto; 262} 263 264section { 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 431td { 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 493button { 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 margin-top: 12px; 553} 554 555.checkbox-label input[type=checkbox] { 556 float: __MSG_@@bidi_start_edge__; 557 margin-__MSG_@@bidi_start_edge__: -20px; 558 margin-__MSG_@@bidi_end_edge__: 0; 559 width: 20px; 560 margin-top: 2px; 561} 562 563#current-email { 564 color: rgba(0, 0, 0, 0.5); 565} 566 567#daemon-plugin-container { 568 width: 0; 569 height: 0; 570} 571 572.dialog-container { 573 position: fixed; 574 top: 200px; 575 left: 0; 576 width: 100%; 577 display: -webkit-flex; 578} 579 580.dialog-screen { 581 position: fixed; 582 top: 0; 583 left: 0; 584 width: 100%; 585 height: 100%; 586 background-color: #fff; 587 opacity: 0.75; 588} 589 590/* TODO(jamiewalch): Reinstate this if we're able to get translations for 591 * "Why is this safe?" that don't overflow in any language. 592#host-setup-dialog { 593 width: 460px; 594} 595*/ 596 597#host-plugin-container { 598 width: 0; 599 height: 0; 600} 601 602/* The NAT traversal state is independent of the app mode, and both need 603 * to be combined to determine the visibility of the butter bar. We use 604 * a style for the former and the 'hidden' property for the latter. */ 605#nat-box.traversal-enabled { 606 display: none; 607} 608 609#session-mode { 610 position: absolute; 611 box-shadow: 0 0 8px 0 black; 612 -webkit-user-select: none; 613} 614 615#session-client-plugin { 616 display: block; 617} 618 619.session-client-inactive { 620 -webkit-filter: grayscale(70%); 621 -webkit-transition: -webkit-filter 0.218s; 622} 623 624#set-pin-table td { 625 border-bottom: 6px solid transparent; 626} 627 628#top-secondary { 629 margin-top: 10px 630} 631 632#webapp-description { 633 margin-bottom: 10px; 634} 635 636* { 637 box-sizing: border-box; 638} 639 640/* 641 * Setting hidden on elements that match some rule overriding 'display' doesn't 642 * do what you would expect unless this is made explicit (and !important). 643 */ 644[hidden] { 645 display: none !important; 646} 647