1 /* Copyright 2014 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 * This is the stylesheet used by user pods row of account picker UI. 6 */ 7 8 podrow { 9 /* Temporarily disabled because animation interferes with updating screen's 10 size. */ 11 height: 100%; 12 overflow: visible; 13 position: absolute; 14 width: 100%; 15 } 16 17 /* Hide the pod row while images are loading. */ 18 podrow.images-loading { 19 visibility: hidden; 20 } 21 22 .pod { 23 -webkit-tap-highlight-color: transparent; 24 background-color: white; 25 border-radius: 2px; 26 box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 27 0 2px 6px rgba(0, 0, 0, 0.15), 28 0 3px 0 rgba(0, 0, 0, 0.08); 29 cursor: pointer; 30 height: 213px; 31 outline: none; 32 position: absolute; 33 transform: scale3d(0.9, 0.9, 0.9); 34 width: 180px; 35 z-index: 0; 36 } 37 38 .account-picker.flying-pods .pod { 39 transition: all 180ms; 40 } 41 42 .pod.faded { 43 opacity: .75; 44 } 45 46 podrow[ncolumns='6'] .pod { 47 transform: scale3d(0.8, 0.8, 0.8); 48 } 49 50 .pod.focused { 51 /* Focused pod has the same size no matter how many pods. */ 52 cursor: default; 53 transform: scale3d(1, 1, 1) !important; 54 z-index: 1; 55 } 56 57 .pod.focused[auth-type='userClick'] { 58 cursor: pointer; 59 } 60 61 .user-image-pane { 62 background-color: white; 63 height: 160px; 64 left: 10px; 65 position: absolute; 66 top: 10px; 67 width: 160px; 68 z-index: 3; 69 } 70 71 html[dir=rtl] .user-image-pane { 72 left: auto; 73 right: 10px; 74 } 75 76 .user-image-container { 77 align-items: center; 78 display: flex; 79 height: 100%; 80 justify-content: center; 81 width: 100%; 82 } 83 84 .pod .user-image { 85 flex: none; 86 } 87 88 /* TODO(noms): Refactor this out into a CrOS-specific file and simplify the 89 style rule once it is included on CrOS only. crbug.com/397638 */ 90 html:not([screen=login-add-user]) .pod .user-image { 91 max-height: 160px; 92 max-width: 160px; 93 opacity: 0.7; 94 } 95 96 html:not([screen=login-add-user]) .pod.focused .user-image { 97 opacity: 1; 98 } 99 100 .pod.multiprofiles-policy-applied .user-image { 101 -webkit-filter: grayscale(100%); 102 } 103 104 .signed-in-indicator { 105 display: none; 106 } 107 108 .pod.signed-in .signed-in-indicator { 109 background-color: rgba(0, 0, 0, 0.5); 110 color: white; 111 display: block; 112 font-size: small; 113 padding: 3px 0; 114 position: absolute; 115 text-align: center; 116 top: 0; 117 width: 100%; 118 } 119 120 .main-pane { 121 left: 10px; 122 position: absolute; 123 top: 10px; 124 z-index: 2; 125 } 126 127 html[dir=rtl] .main-pane { 128 left: auto; 129 right: 10px; 130 } 131 132 .name-container, 133 .pod.focused:not(.multiprofiles-policy-applied) .auth-container { 134 background-color: white; 135 display: flex; 136 position: absolute; 137 top: 160px; 138 width: 160px; 139 } 140 141 .name-container { 142 transition: transform 180ms; 143 } 144 145 .pod.focused .name-container { 146 display: none; 147 } 148 149 .pod.focused.multiprofiles-policy-applied .name-container { 150 display: flex; 151 } 152 153 .name { 154 color: #565656; 155 /* This should be 15.6px - the equivalent of 14px at 90% scale. */ 156 flex: auto; 157 font-size: 16px; 158 margin-top: 12px; 159 outline: none; 160 overflow: hidden; 161 padding: 0 6px; 162 text-align: center; 163 text-overflow: ellipsis; 164 white-space: nowrap; 165 } 166 167 .learn-more-container, 168 .auth-container, 169 .password-entry-container, 170 .signin-button-container { 171 display: none; 172 } 173 174 .pod[auth-type='offlinePassword'].focused .password-entry-container, 175 .pod[auth-type='forceOfflinePassword'].focused .password-entry-container { 176 display: flex; 177 flex: auto; 178 } 179 180 .password-container { 181 flex: auto; 182 } 183 184 .pod input[type='password'] { 185 background-color: white; 186 border: none; 187 padding: 4px 6px; 188 position: relative; 189 top: 6px; 190 width: 100%; 191 } 192 193 .capslock-hint-container { 194 display: none; 195 } 196 197 .capslock-on .capslock-hint-container { 198 display: block; 199 flex: none; 200 } 201 202 .capslock-hint { 203 -webkit-margin-end: 6px; 204 -webkit-margin-start: -2px; 205 position: relative; 206 top: 11px; 207 } 208 209 .password-label, 210 .signin-transition-container { 211 display: none; 212 } 213 214 .pod[auth-type='userClick']:not(.signing-in) .password-label, 215 .pod[auth-type='userClick'].signing-in .signin-transition-container { 216 color: grey; 217 display: block; 218 flex: auto; 219 margin-top: 11px; 220 outline: 0; 221 overflow: hidden; 222 text-overflow: ellipsis; 223 white-space: nowrap; 224 } 225 226 .custom-icon { 227 -webkit-margin-end: 0; 228 -webkit-margin-start: auto; 229 background-position: center; 230 background-repeat: no-repeat; 231 flex: none; 232 height: 27px; 233 width: 27px; 234 } 235 236 .custom-icon.faded { 237 -webkit-transition: opacity 200ms ease-in-out, 238 visibility 200ms ease-in-out; 239 } 240 241 .custom-icon-hardlocked { 242 background-image: url('chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED'); 243 } 244 245 .custom-icon-hardlocked.icon-with-tooltip:hover { 246 background-image: url('chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED_HOVER'); 247 } 248 249 .custom-icon-hardlocked.interactive-custom-icon:active { 250 background-image: url('chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED_PRESSED'); 251 } 252 253 .custom-icon-locked { 254 background-image: url('chrome://theme/IDR_EASY_UNLOCK_LOCKED'); 255 } 256 257 .custom-icon-locked.icon-with-tooltip:hover { 258 background-image: url('chrome://theme/IDR_EASY_UNLOCK_LOCKED_HOVER'); 259 } 260 261 .custom-icon-locked.interactive-custom-icon:active { 262 background-image: url('chrome://theme/IDR_EASY_UNLOCK_LOCKED_PRESSED'); 263 } 264 265 .custom-icon-unlocked { 266 background-image: url('chrome://theme/IDR_EASY_UNLOCK_UNLOCKED'); 267 } 268 269 .custom-icon-unlocked.icon-with-tooltip:hover { 270 background-image: url('chrome://theme/IDR_EASY_UNLOCK_UNLOCKED_HOVER'); 271 } 272 273 .custom-icon-unlocked.interactive-custom-icon:active { 274 background-image: url('chrome://theme/IDR_EASY_UNLOCK_UNLOCKED_PRESSED'); 275 } 276 277 /** 278 * Preloads resources for custom icon. Without this, the resources will be 279 * loaded when CSS properties using them are first applied, which has visible 280 * delay and may cause a short white flash when the icon background changes. 281 */ 282 .custom-icon::after { 283 content: 284 url('chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED') 285 url('chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED_HOVER') 286 url('chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED_PRESSED') 287 url('chrome://theme/IDR_EASY_UNLOCK_LOCKED') 288 url('chrome://theme/IDR_EASY_UNLOCK_LOCKED_HOVER') 289 url('chrome://theme/IDR_EASY_UNLOCK_LOCKED_PRESSED') 290 url('chrome://theme/IDR_EASY_UNLOCK_UNLOCKED') 291 url('chrome://theme/IDR_EASY_UNLOCK_UNLOCKED_HOVER') 292 url('chrome://theme/IDR_EASY_UNLOCK_UNLOCKED_PRESSED'); 293 display: none; 294 } 295 296 .custom-icon-spinner { 297 -webkit-animation: easy-unlock-spinner-animation 2s steps(45) infinite; 298 background-image: url('chrome://theme/IDR_EASY_UNLOCK_SPINNER'); 299 } 300 301 @-webkit-keyframes easy-unlock-spinner-animation { 302 from { background-position: 0 } 303 to { background-position: -1215px } 304 } 305 306 .interactive-custom-icon { 307 cursor: pointer; 308 } 309 310 .custom-icon-container { 311 display: flex; 312 flex: none; 313 flex-direction: column; 314 height: 40px; 315 justify-content: center; 316 width: 40px; 317 } 318 319 .pod[auth-type='onlineSignIn'] .signin-button-container, 320 .launch-app-button-container { 321 display: block; 322 flex: auto; 323 text-align: center; 324 } 325 326 .signin-button, 327 .launch-app-button { 328 display: inline; 329 margin-top: 6px !important; 330 max-width: 100%; 331 overflow: hidden; 332 text-overflow: ellipsis; 333 } 334 335 .action-box-area, 336 .user-type-icon-area { 337 background-color: white; 338 border-radius: 2px; 339 position: absolute; 340 top: 0; 341 } 342 343 .action-box-area { 344 opacity: 0; 345 outline: none; 346 right: 0; 347 transition: opacity 100ms; 348 z-index: 4; 349 } 350 351 html[dir=rtl] .action-box-area { 352 left: 0; 353 right: auto; 354 } 355 356 .action-box-area:focus, 357 .action-box-area.hovered, 358 .action-box-area.active { 359 opacity: 1; 360 } 361 362 .action-box-button { 363 background-image: url('chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_NORMAL'); 364 height: 13px; 365 margin: 5px; 366 width: 13px; 367 } 368 369 .action-box-button:hover { 370 background-image: url('chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_HOVER'); 371 } 372 373 .action-box-area.active .action-box-button { 374 background-image: url('chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_PRESSED'); 375 } 376 377 .user-type-icon-area { 378 left: 0; 379 z-index: 5; 380 } 381 382 html[dir=rtl] .user-type-icon-area { 383 left: auto; 384 right: 0; 385 } 386 387 .user-type-icon-image { 388 height: 16px; 389 margin: 5px; 390 width: 16px; 391 } 392 393 .user-type-icon-area.supervised .user-type-icon-image { 394 background-image: url('chrome://theme/IDR_SUPERVISED_USER_ICON'); 395 } 396 397 .user-type-icon-area.policy .user-type-icon-image { 398 background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY'); 399 } 400 401 .user-type-icon-area.app .user-type-icon-image { 402 background-image: url('chrome://theme/IDR_KIOSK_APP_USER_POD_ICON'); 403 } 404 405 .action-box-menu { 406 display: none; 407 z-index: 6; 408 } 409 410 .action-box-area.active ~ .action-box-menu { 411 background-color: white; 412 border: 1px solid lightgray; 413 border-radius: 2px; 414 display: flex; 415 flex-direction: column; 416 font-size: 13px; 417 position: absolute; 418 right: 5px; 419 width: 220px; 420 } 421 422 .action-box-area.active ~ .action-box-menu.left-edge-offset { 423 left: 0 !important; 424 } 425 426 .action-box-area.active ~ .action-box-menu.right-edge-offset { 427 right: 0 !important; 428 } 429 430 .action-box-area.active ~ .action-box-menu:not(.menu-moved-up) { 431 top: 18px; 432 } 433 434 .action-box-area.active ~ .action-box-menu.menu-moved-up { 435 bottom: 210px; 436 } 437 438 .action-box-area.menu-moved-up { 439 -webkit-transform: rotate(180deg); 440 } 441 442 html[dir=rtl] .action-box-area.active ~ .action-box-menu { 443 left: 5px; 444 right: auto; 445 } 446 447 .action-box-menu-title { 448 color: #b4b4b4; 449 display: flex; 450 flex-direction: column; 451 padding: 7px 20px; 452 } 453 454 .action-box-menu-title-name, 455 .action-box-menu-title-email { 456 flex: none; 457 height: 23px; 458 line-height: 19px; 459 overflow: hidden; 460 text-overflow: ellipsis; 461 white-space: nowrap; 462 } 463 464 .action-box-menu-remove { 465 border-top: 1px solid lightgray; 466 line-height: 19px; 467 min-height: 24px; 468 outline: none; 469 padding: 12px 20px 7px; 470 } 471 472 .action-box-menu-remove:hover, 473 .action-box-menu-remove:focus { 474 background-color: #f3f3f3; 475 } 476 477 .action-box-remove-user-warning { 478 border-top: 1px solid lightgray; 479 font-size: 12px; 480 line-height: 18px; 481 padding: 20px; 482 } 483 484 .action-box-remove-user-warning-text, 485 .action-box-remove-supervised-user-warning-text { 486 padding-bottom: 20px; 487 } 488 489 .action-box-remove-user-warning .remove-warning-button { 490 width: 100%; 491 } 492 493 .user-type-bubble { 494 background-color: white; 495 border: 1px solid lightgray; 496 border-radius: 2px; 497 left: 5px; 498 opacity: 0; 499 padding: 17px; 500 position: absolute; 501 top: 20px; 502 transition: all 100ms; 503 visibility: hidden; 504 width: 200px; 505 z-index: 7; 506 } 507 508 html[dir=rtl] .user-type-bubble { 509 left: auto; 510 right: 5px; 511 } 512 513 .bubble-shown, 514 .user-type-icon-area.policy:hover ~ .user-type-bubble { 515 opacity: 1; 516 visibility: visible; 517 } 518 519 .user-type-bubble-header { 520 font-weight: bold; 521 margin-bottom: 14px; 522 } 523 524 /**** Public account user pod rules *******************************************/ 525 526 .pod.public-account.expanded { 527 width: 500px; 528 } 529 530 .pod.public-account.expanded.advanced { 531 width: 610px; 532 } 533 534 .pod.public-account.focused .name-container { 535 display: flex; 536 } 537 538 .pod.public-account.expanded .name-container { 539 transform: translateY(-34px); 540 } 541 542 .pod.public-account .learn-more-container { 543 display: block; 544 flex: none; 545 } 546 547 .pod.public-account .learn-more { 548 background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY'); 549 height: 16px; 550 position: relative; 551 top: 16px; 552 width: 16px; 553 } 554 555 .expanded-pane { 556 display: none; 557 } 558 559 .pod.public-account.animating .expanded-pane, 560 .pod.public-account.expanded .expanded-pane { 561 display: block; 562 font-size: 12px; 563 margin: 10px; 564 overflow: hidden; 565 z-index: 1; 566 } 567 568 .expanded-pane-contents { 569 display: flex; 570 flex-direction: column; 571 float: right; 572 height: 193px; 573 width: 490px; 574 } 575 576 .pod.public-account.transitioning-to-advanced .expanded-pane-contents { 577 transition: width 180ms; 578 } 579 580 .pod.public-account.expanded.advanced .expanded-pane-contents { 581 width: 600px; 582 } 583 584 html[dir=rtl] .expanded-pane-contents { 585 float: left; 586 } 587 588 .side-container { 589 -webkit-margin-start: 200px; 590 flex: auto; 591 } 592 593 .expanded-pane-name { 594 font-size: 19px; 595 margin-bottom: 11px; 596 margin-top: -2px; 597 overflow: hidden; 598 text-overflow: ellipsis; 599 white-space: nowrap; 600 } 601 602 .reminder { 603 font-weight: bold; 604 } 605 606 .language-and-input-section { 607 display: none; 608 } 609 610 .pod.public-account.transitioning-to-advanced .language-and-input-section { 611 display: block; 612 opacity: 0; 613 transition: opacity 180ms ease 180ms; 614 } 615 616 .pod.public-account.expanded.advanced .language-and-input-section { 617 display: block; 618 opacity: 1; 619 } 620 621 .select-with-label { 622 display: flex; 623 margin-top: 20px; 624 } 625 626 .language-select-label, 627 .keyboard-select-label { 628 flex: none; 629 margin-top: 3px; 630 overflow: hidden; 631 text-overflow: ellipsis; 632 white-space: nowrap; 633 width: 170px; 634 } 635 636 .select-container { 637 flex: auto; 638 } 639 640 .language-select, 641 .keyboard-select { 642 width: 100%; 643 } 644 645 .bottom-container { 646 -webkit-margin-start: 10px; 647 display: flex; 648 flex: none; 649 font-size: 13px; 650 } 651 652 .expanded-pane-learn-more-container, 653 .enter-button { 654 flex: none; 655 } 656 657 .expanded-pane-learn-more { 658 background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY'); 659 height: 16px; 660 position: relative; 661 top: 6px; 662 width: 16px; 663 } 664 665 .info { 666 flex: auto; 667 margin: 5px 10px; 668 overflow: hidden; 669 text-overflow: ellipsis; 670 white-space: nowrap; 671 } 672 673 .language-and-input-container { 674 -webkit-margin-end: 25px; 675 flex: none; 676 } 677 678 .language-and-input { 679 color: rgb(49, 106, 197); 680 position: relative; 681 text-decoration: none; 682 top: 4px; 683 } 684 685 .pod.public-account.expanded.advanced .language-and-input-container { 686 display: none; 687 } 688 689 .enter-button { 690 font-size: 14px; 691 } 692 693 /* Animations for the animated ellipsis: */ 694 .animated-ellipsis-component0 { 695 -webkit-animation: ellipsis-component0 1.5s infinite; 696 } 697 698 @-webkit-keyframes ellipsis-component0 { 699 0% { opacity: 0; } 700 25% { opacity: 1; } 701 50% { opacity: 1; } 702 75% { opacity: 1; } 703 100% { opacity: 0; } 704 } 705 706 .animated-ellipsis-component1 { 707 -webkit-animation: ellipsis-component1 1.5s infinite; 708 } 709 710 @-webkit-keyframes ellipsis-component1 { 711 0% { opacity: 0; } 712 25% { opacity: 0; } 713 50% { opacity: 1; } 714 75% { opacity: 1; } 715 100% { opacity: 0; } 716 } 717 718 .animated-ellipsis-component2 { 719 -webkit-animation: ellipsis-component2 1.5s infinite; 720 } 721 722 @-webkit-keyframes ellipsis-component2 { 723 0% { opacity: 0; } 724 25% { opacity: 0; } 725 50% { opacity: 0; } 726 75% { opacity: 1; } 727 100% { opacity: 0; } 728 } 729