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