ui/login/account_picker/user_pod_row.css

   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 .reauth-hint-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-locked-to-be-activated {
 266   background-image:
 267       url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED);
 268 }
 269
 270 .custom-icon-locked-to-be-activated.icon-with-tooltip:hover {
 271   background-image:
 272       url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED_HOVER);
 273 }
 274
 275 .custom-icon-locked-to-be-activated.interactive-custom-icon:active {
 276   background-image:
 277       url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED_PRESSED);
 278 }
 279
 280 .custom-icon-locked-with-proximity-hint {
 281   background-image:
 282       url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT);
 283 }
 284
 285 .custom-icon-locked-with-proximity-hint.icon-with-tooltip:hover {
 286   background-image:
 287       url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT_HOVER);
 288 }
 289
 290 .custom-icon-locked-with-proximity-hint.interactive-custom-icon:active {
 291   background-image:
 292       url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT_PRESSED);
 293 }
 294
 295 .custom-icon-unlocked {
 296   background-image: url(chrome://theme/IDR_EASY_UNLOCK_UNLOCKED);
 297 }
 298
 299 .custom-icon-unlocked.icon-with-tooltip:hover {
 300   background-image: url(chrome://theme/IDR_EASY_UNLOCK_UNLOCKED_HOVER);
 301 }
 302
 303 .custom-icon-unlocked.interactive-custom-icon:active {
 304   background-image: url(chrome://theme/IDR_EASY_UNLOCK_UNLOCKED_PRESSED);
 305 }
 306
 307 /**
 308  * Preloads resources for custom icon. Without this, the resources will be
 309  * loaded when CSS properties using them are first applied, which has visible
 310  * delay and may cause a short white flash when the icon background changes.
 311  */
 312 .custom-icon::after {
 313   content:
 314     url(chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED)
 315     url(chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED_HOVER)
 316     url(chrome://theme/IDR_EASY_UNLOCK_HARDLOCKED_PRESSED)
 317     url(chrome://theme/IDR_EASY_UNLOCK_LOCKED)
 318     url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_HOVER)
 319     url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_PRESSED)
 320     url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED)
 321     url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED_HOVER)
 322     url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_TO_BE_ACTIVATED_PRESSED)
 323     url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT)
 324     url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT_HOVER)
 325     url(chrome://theme/IDR_EASY_UNLOCK_LOCKED_WITH_PROXIMITY_HINT_PRESSED)
 326     url(chrome://theme/IDR_EASY_UNLOCK_UNLOCKED)
 327     url(chrome://theme/IDR_EASY_UNLOCK_UNLOCKED_HOVER)
 328     url(chrome://theme/IDR_EASY_UNLOCK_UNLOCKED_PRESSED);
 329   display: none;
 330 }
 331
 332 .custom-icon-spinner {
 333   -webkit-animation: easy-unlock-spinner-animation 2s steps(45) infinite;
 334   background-image: url(chrome://theme/IDR_EASY_UNLOCK_SPINNER);
 335 }
 336
 337 @-webkit-keyframes easy-unlock-spinner-animation {
 338   from { background-position: 0 }
 339   to { background-position: -1215px }
 340 }
 341
 342 .interactive-custom-icon {
 343   cursor: pointer;
 344 }
 345
 346 .custom-icon-container {
 347   display: flex;
 348   flex: none;
 349   flex-direction: column;
 350   height: 40px;
 351   justify-content: center;
 352   width: 40px;
 353 }
 354
 355 .launch-app-button-container {
 356   display: block;
 357   flex: auto;
 358   text-align: center;
 359 }
 360
 361 .launch-app-button {
 362   display: inline;
 363   margin-top: 6px !important;
 364   max-width: 100%;
 365   overflow: hidden;
 366   text-overflow: ellipsis;
 367 }
 368
 369 .pod[auth-type='onlineSignIn'] .reauth-hint-container {
 370   display: flex;
 371   margin-top: 8px;
 372   width: 100%;
 373   justify-content: center;
 374 }
 375
 376 .reauth-hint-container .reauth-warning {
 377   color: #f4b400;
 378   display: inline-flex;
 379 }
 380
 381 .reauth-hint-container .reauth-name-hint {
 382   align-self: center;
 383   color: #565656;
 384   font-size: 16px;
 385   outline: none;
 386   overflow: hidden;
 387   padding: 0 6px;
 388   text-align: center;
 389   text-overflow: ellipsis;
 390   white-space: nowrap;
 391 }
 392
 393 .action-box-area,
 394 .user-type-icon-area {
 395   background-color: white;
 396   border-radius: 2px;
 397   position: absolute;
 398   top: 0;
 399 }
 400
 401 .action-box-area {
 402   opacity: 0;
 403   outline: none;
 404   right: 0;
 405   transition: opacity 100ms;
 406   z-index: 4;
 407 }
 408
 409 html[dir=rtl] .action-box-area {
 410   left: 0;
 411   right: auto;
 412 }
 413
 414 .action-box-area:focus,
 415 .action-box-area.hovered,
 416 .action-box-area.active,
 417 .action-box-area.forced {
 418   opacity: 1;
 419 }
 420
 421 .action-box-button {
 422   background-image: url(chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_NORMAL);
 423   height: 13px;
 424   margin: 5px;
 425   width: 13px;
 426 }
 427
 428 .action-box-button:hover {
 429   background-image: url(chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_HOVER);
 430 }
 431
 432 .action-box-area.active .action-box-button {
 433   background-image: url(chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_PRESSED);
 434 }
 435
 436 .user-type-icon-area {
 437   left: 0;
 438   z-index: 5;
 439 }
 440
 441 html[dir=rtl] .user-type-icon-area {
 442   left: auto;
 443   right: 0;
 444 }
 445
 446 .user-type-icon-image {
 447   height: 16px;
 448   margin: 5px;
 449   width: 16px;
 450 }
 451
 452 .user-type-icon-area.legacySupervised .user-type-icon-image {
 453   background-image: url(../../webui/resources/images/supervisor_account.svg);
 454   background-size: 18px;
 455 }
 456
 457 .user-type-icon-area.child .user-type-icon-image {
 458   background-image: url(../../webui/resources/images/account_child_invert.svg);
 459   background-size: 18px;
 460 }
 461
 462 .user-type-icon-area.policy .user-type-icon-image {
 463   background-image: url(../../webui/resources/images/business.svg);
 464   background-size: 18px;
 465 }
 466
 467 .user-type-icon-area.app .user-type-icon-image {
 468   background-image: url(chrome://theme/IDR_KIOSK_APP_USER_POD_ICON);
 469 }
 470
 471 .action-box-menu {
 472   display: none;
 473   z-index: 6;
 474 }
 475
 476 .action-box-area.active ~ .action-box-menu {
 477   background-color: white;
 478   border: 1px solid lightgray;
 479   border-radius: 2px;
 480   display: flex;
 481   flex-direction: column;
 482   font-size: 13px;
 483   position: absolute;
 484   right: 5px;
 485   width: 220px;
 486 }
 487
 488 .action-box-area.active ~ .action-box-menu.left-edge-offset {
 489   left: 0 !important;
 490 }
 491
 492 .action-box-area.active ~ .action-box-menu.right-edge-offset {
 493   right: 0 !important;
 494 }
 495
 496 .action-box-area.active ~ .action-box-menu:not(.menu-moved-up) {
 497   top: 18px;
 498 }
 499
 500 .action-box-area.active ~ .action-box-menu.menu-moved-up {
 501   bottom: 210px;
 502 }
 503
 504 .action-box-area.menu-moved-up {
 505   -webkit-transform: rotate(180deg);
 506 }
 507
 508 html[dir=rtl] .action-box-area.active ~ .action-box-menu {
 509   left: 5px;
 510   right: auto;
 511 }
 512
 513 .action-box-menu-title {
 514   color: #757575;
 515   display: flex;
 516   flex-direction: column;
 517   padding: 7px 20px;
 518 }
 519
 520 .action-box-menu-title-name,
 521 .action-box-menu-title-email {
 522   flex: none;
 523   height: 23px;
 524   line-height: 19px;
 525   overflow: hidden;
 526   text-overflow: ellipsis;
 527   white-space: nowrap;
 528 }
 529
 530 .action-box-menu-remove {
 531   border-top: 1px solid lightgray;
 532   line-height: 19px;
 533   min-height: 24px;
 534   outline: none;
 535   padding: 12px 20px 7px;
 536 }
 537
 538 .action-box-menu-remove:hover,
 539 .action-box-menu-remove:focus {
 540   background-color: #f3f3f3;
 541 }
 542
 543 .action-box-remove-user-warning {
 544   border-top: 1px solid lightgray;
 545   font-size: 12px;
 546   line-height: 18px;
 547   padding: 20px;
 548 }
 549
 550 .action-box-remove-user-warning-text,
 551 .action-box-remove-legacy-supervised-user-warning-text {
 552   padding-bottom: 20px;
 553 }
 554
 555 .action-box-remove-user-warning .remove-warning-button {
 556   width: 100%;
 557 }
 558
 559 .user-type-bubble {
 560   background-color: white;
 561   border: 1px solid lightgray;
 562   border-radius: 2px;
 563   left: 5px;
 564   opacity: 0;
 565   padding: 17px;
 566   position: absolute;
 567   top: 20px;
 568   transition: all 100ms;
 569   visibility: hidden;
 570   width: 200px;
 571   z-index: 7;
 572 }
 573
 574 html[dir=rtl] .user-type-bubble {
 575   left: auto;
 576   right: 5px;
 577 }
 578
 579 .bubble-shown,
 580 .user-type-icon-area.policy:hover ~ .user-type-bubble {
 581   opacity: 1;
 582   visibility: visible;
 583 }
 584
 585 .user-type-bubble-header {
 586   font-weight: bold;
 587   margin-bottom: 14px;
 588 }
 589
 590 /**** Public account user pod rules *******************************************/
 591
 592 .pod.public-account.expanded {
 593   width: 500px;
 594 }
 595
 596 .pod.public-account.expanded.advanced {
 597   width: 610px;
 598 }
 599
 600 .pod.public-account.focused .name-container {
 601   display: flex;
 602 }
 603
 604 .pod.public-account.expanded .name-container {
 605   transform: translateY(-34px);
 606 }
 607
 608 .pod.public-account .learn-more-container {
 609   display: block;
 610   flex: none;
 611 }
 612
 613 .pod.public-account .learn-more {
 614   top: 15px;
 615 }
 616
 617 .expanded-pane {
 618   display: none;
 619 }
 620
 621 .pod.public-account.animating .expanded-pane,
 622 .pod.public-account.expanded .expanded-pane {
 623   display: block;
 624   font-size: 12px;
 625   margin: 10px;
 626   overflow: hidden;
 627   z-index: 1;
 628 }
 629
 630 .expanded-pane-contents {
 631   display: flex;
 632   flex-direction: column;
 633   float: right;
 634   height: 193px;
 635   width: 490px;
 636 }
 637
 638 .pod.public-account.transitioning-to-advanced .expanded-pane-contents {
 639   transition: width 180ms;
 640 }
 641
 642 .pod.public-account.expanded.advanced .expanded-pane-contents {
 643   width: 600px;
 644 }
 645
 646 html[dir=rtl] .expanded-pane-contents {
 647   float: left;
 648 }
 649
 650 .side-container {
 651   -webkit-margin-start: 200px;
 652   flex: auto;
 653 }
 654
 655 .expanded-pane-name {
 656   font-size: 19px;
 657   margin-bottom: 11px;
 658   margin-top: -2px;
 659   overflow: hidden;
 660   text-overflow: ellipsis;
 661   white-space: nowrap;
 662 }
 663
 664 .reminder {
 665   font-weight: bold;
 666 }
 667
 668 .language-and-input-section {
 669   display: none;
 670 }
 671
 672 .pod.public-account.transitioning-to-advanced .language-and-input-section {
 673   display: block;
 674   opacity: 0;
 675   transition: opacity 180ms ease 180ms;
 676 }
 677
 678 .pod.public-account.expanded.advanced .language-and-input-section {
 679   display: block;
 680   opacity: 1;
 681 }
 682
 683 .select-with-label {
 684   display: flex;
 685   margin-top: 20px;
 686 }
 687
 688 .language-select-label,
 689 .keyboard-select-label {
 690   flex: none;
 691   margin-top: 3px;
 692   overflow: hidden;
 693   text-overflow: ellipsis;
 694   white-space: nowrap;
 695   width: 170px;
 696 }
 697
 698 .select-container {
 699   flex: auto;
 700 }
 701
 702 .language-select,
 703 .keyboard-select {
 704   width: 100%;
 705 }
 706
 707 .bottom-container {
 708   -webkit-margin-start: 10px;
 709   display: flex;
 710   flex: none;
 711   font-size: 13px;
 712 }
 713
 714 .expanded-pane-learn-more-container,
 715 .enter-button {
 716   flex: none;
 717 }
 718
 719 .expanded-pane-learn-more,
 720 .pod.public-account .learn-more {
 721   background-image: url(../../webui/resources/images/business.svg);
 722   height: 18px;
 723   position: relative;
 724   width: 18px;
 725 }
 726
 727 .expanded-pane-learn-more {
 728   top: 5px;
 729 }
 730
 731 .info {
 732   flex: auto;
 733   margin: 5px 10px;
 734   overflow: hidden;
 735   text-overflow: ellipsis;
 736   white-space: nowrap;
 737 }
 738
 739 .language-and-input-container {
 740   -webkit-margin-end: 25px;
 741   flex: none;
 742 }
 743
 744 .language-and-input {
 745   color: rgb(49, 106, 197);
 746   position: relative;
 747   text-decoration: none;
 748   top: 4px;
 749 }
 750
 751 .pod.public-account.expanded.advanced .language-and-input-container {
 752   display: none;
 753 }
 754
 755 .enter-button {
 756   font-size: 14px;
 757 }
 758
 759 /* Animations for the animated ellipsis: */
 760 .animated-ellipsis-component0 {
 761   -webkit-animation: ellipsis-component0 1.5s infinite;
 762 }
 763
 764 @-webkit-keyframes ellipsis-component0 {
 765   0% { opacity: 0; }
 766   25% { opacity: 1; }
 767   50% { opacity: 1; }
 768   75% { opacity: 1; }
 769   100% { opacity: 0; }
 770 }
 771
 772 .animated-ellipsis-component1 {
 773   -webkit-animation: ellipsis-component1 1.5s infinite;
 774 }
 775
 776 @-webkit-keyframes ellipsis-component1 {
 777   0% { opacity: 0; }
 778   25% { opacity: 0; }
 779   50% { opacity: 1; }
 780   75% { opacity: 1; }
 781   100% { opacity: 0; }
 782 }
 783
 784 .animated-ellipsis-component2 {
 785   -webkit-animation: ellipsis-component2 1.5s infinite;
 786 }
 787
 788 @-webkit-keyframes ellipsis-component2 {
 789   0% { opacity: 0; }
 790   25% { opacity: 0; }
 791   50% { opacity: 0; }
 792   75% { opacity: 1; }
 793   100% { opacity: 0; }
 794 }