src/chrome/browser/resources/login/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   -webkit-transform: scale3d(0.9, 0.9, 0.9);
  25   background-color: white;
  26   border-radius: 2px;
  27   box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2),
  28               0 2px 6px rgba(0, 0, 0, 0.15),
  29               0 3px 0 rgba(0, 0, 0, 0.08);
  30   cursor: pointer;
  31   display: flex;
  32   flex-flow: row;
  33   outline: none;
  34   padding: 10px 10px 3px;
  35   position: absolute;
  36   vertical-align: middle;
  37   width: 160px;
  38   z-index: 0;
  39 }
  40
  41 html[run=firstExecAfterBoot] .pod {
  42   -webkit-transition: -webkit-transform 180ms ease,
  43                       opacity 180ms ease;
  44 }
  45
  46 .account-picker.flying-pods .pod {
  47   -webkit-transition: all 180ms ease;
  48 }
  49
  50 .pod .main-pane {
  51   position: relative;
  52   text-align: center;
  53   width: 160px;
  54 }
  55
  56 podrow[ncolumns='6'] .pod {
  57   -webkit-transform: scale3d(0.8, 0.8, 0.8);
  58 }
  59
  60 .pod.focused {
  61   /* Focused pod has the same size no matter how many pods. */
  62   -webkit-transform: scale3d(1, 1, 1) !important;
  63   cursor: default;
  64   z-index: 1;
  65 }
  66
  67 .pod.focused[auth-type='userClick'] {
  68   cursor: pointer;
  69 }
  70
  71 .pod .user-image-container {
  72   align-items: center;
  73   display: flex;
  74   height: 160px;
  75   justify-content: center;
  76   width: 160px;
  77 }
  78
  79 .pod .user-image {
  80   height: 160px;
  81   opacity: 0.7;
  82   width: 160px;
  83 }
  84
  85 .pod.faded {
  86   opacity: .75;
  87 }
  88
  89 .pod.focused .user-image {
  90   opacity: 1;
  91 }
  92
  93 .pod.not-focusable .user-image {
  94   -webkit-filter: grayscale(100%);
  95 }
  96
  97 .pod.init {
  98   -webkit-transform: scale3d(2.4, 2.4, 2.4);
  99   opacity: 0;
 100 }
 101
 102 .pod.left {
 103   -webkit-transform: translateX(-25px);
 104   opacity: 0;
 105 }
 106
 107 .pod.right {
 108   -webkit-transform: translateX(25px);
 109   opacity: 0;
 110 }
 111
 112 .pod.zoom {
 113   -webkit-transform: scale3d(2.2, 2.2, 2.2);
 114   opacity: 0;
 115 }
 116
 117 .name {
 118   -webkit-transition: all 170ms ease;
 119   color: #565656;
 120   /* Matching font-size 14px but since name is visible
 121    when pod is not focused increase that a bit. */
 122   font-size: 16px;
 123   height: 26px;
 124   line-height: 26px;  /* This vertically centers text */
 125   margin: 10px 0 4px;
 126   overflow: hidden;
 127   text-overflow: ellipsis;
 128   white-space: nowrap;
 129 }
 130
 131 .name.init {
 132   opacity: 0;
 133 }
 134
 135 .pod.need-password.focused .name {
 136   display: none;
 137 }
 138
 139 .password-area {
 140   display: none;
 141 }
 142
 143 .password-input-container {
 144   -webkit-box-flex: 1;
 145   /* This relative position is so the capslock hint is positioned correctly. */
 146   position: relative;
 147 }
 148
 149 .password-label {
 150   -webkit-box-align: center;
 151   border: none;
 152   display: none;
 153   font-size: 14px;
 154   height: 40px;
 155   text-overflow: ellipsis;
 156 }
 157
 158 .pod[auth-type='userClick'] .password-label {
 159   display: -webkit-box;
 160 }
 161
 162 .custom-button {
 163   -webkit-box-align: center;
 164   background-color: rgba(0, 0, 0, 0);
 165   background-image: none;
 166   cursor: pointer;
 167   display: -webkit-box;
 168   height: 40px;
 169   margin: 0;
 170   max-width: 40px;
 171   min-height: 0;
 172   min-width: 0;
 173   padding: 0;
 174 }
 175
 176 button.custom-button:focus:active,
 177 button.custom-button:focus:hover {
 178   border: 1px solid transparent !important;
 179 }
 180
 181 .custom-button img {
 182   max-height: 100%;
 183   max-width: 100%;
 184 }
 185
 186 .pod input[type='password'] {
 187   -webkit-transition: opacity linear 150ms;
 188   background: white;
 189   border: none;
 190   border-radius: 0; /* override widgets.css rule */
 191   box-sizing: border-box;
 192   display: none;
 193   height: 40px;
 194   outline: none;
 195   padding: 4px 6px;
 196   width: 100%;
 197 }
 198
 199 .pod[auth-type='offlinePassword'] input[type='password'] {
 200   display: inline-block;
 201 }
 202
 203 .pod.need-password.focused .password-area {
 204   display: -webkit-box;
 205 }
 206
 207 .pod .signin-button,
 208 .pod .launch-app-button {
 209   box-sizing: border-box;
 210   display: none;
 211   height: 26px;
 212   margin: 6px 0 !important;
 213   max-width: 100%;
 214   min-width: 72px !important;
 215   padding: 4px 8px;
 216 }
 217
 218 .pod.focused .launch-app-button,
 219 .pod.focused[auth-type='onlineSignIn'] .signin-button {
 220   display: inline-block;
 221 }
 222
 223 .pod .capslock-hint {
 224   bottom: 13px;
 225   cursor: text;
 226   position: absolute;
 227   right: 6px;
 228   visibility: hidden;
 229   z-index: 1;
 230 }
 231
 232 html[dir=rtl] .pod .capslock-hint {
 233   left: 10px;
 234   right: auto;
 235 }
 236
 237 .capslock-on .pod.focused input[type='password']:not([hidden]) ~ .capslock-hint {
 238   visibility: visible;
 239 }
 240
 241 .capslock-on .pod.focused .password {
 242   padding: 4px 27px 4px 6px;
 243 }
 244
 245 .action-box-area {
 246   -webkit-transition: opacity 100ms ease-in-out;
 247   background-color: white;
 248   border-radius: 2px;
 249   box-shadow: none;
 250   height: 23px;
 251   margin: 0;
 252   opacity: 0;
 253   outline: none;
 254   padding: 0;
 255   position: absolute;
 256   right: 0;
 257   top: 0;
 258   width: 23px;
 259   z-index: 1;
 260 }
 261
 262 .action-box-area:focus,
 263 .action-box-area.hovered,
 264 .action-box-area.active {
 265   opacity: 1;
 266 }
 267
 268 .action-box-button {
 269   background-color: transparent;
 270   background-image: url('chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_NORMAL');
 271   border: 0 !important;
 272   height: 13px;
 273   margin: 5px;
 274   padding: 0;
 275   width: 13px;
 276 }
 277
 278 .user-type-icon-area {
 279   background-color: white;
 280   border-radius: 2px;
 281   box-shadow: none;
 282   height: 26px;
 283   left: 0;
 284   margin: 0;
 285   outline: none;
 286   padding: 0;
 287   position: absolute;
 288   top: 0;
 289   width: 26px;
 290   z-index: 1;
 291 }
 292
 293 html[dir=rtl] .user-type-icon-area {
 294   left: auto;
 295   right: 0;
 296 }
 297
 298 .user-type-icon-image {
 299   background-color: transparent;
 300   border: 0 !important;
 301   height: 16px;
 302   margin: 5px;
 303   padding: 0;
 304   width: 16px;
 305 }
 306
 307 .user-type-icon-area.supervised .user-type-icon-image {
 308   background-image: url('chrome://theme/IDR_MANAGED_MODE_ICON');
 309 }
 310
 311 .user-type-icon-area.policy .user-type-icon-image {
 312   background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
 313 }
 314
 315 .user-type-icon-area.app .user-type-icon-image {
 316   background-image: url('chrome://theme/IDR_KIOSK_APP_USER_POD_ICON');
 317 }
 318
 319 .user-type-icon-area.policy:hover ~ .user-type-bubble {
 320   opacity: 1;
 321   visibility: visible;
 322 }
 323
 324 .user-type-bubble {
 325   -webkit-transition: all 100ms ease-in-out;
 326   background-color: white;
 327   border: 1px solid lightgray;
 328   border-radius: 2px;
 329   box-shadow: none;
 330   font-size: 14px;
 331   left: 5px;
 332   margin: 0;
 333   opacity: 0;
 334   padding: 17px;
 335   position: absolute;
 336   top: 20px;
 337   visibility: hidden;
 338   width: 200px;
 339   z-index: 1;
 340 }
 341
 342 html[dir=rtl] .user-type-bubble {
 343   left: auto;
 344   right: 5px;
 345 }
 346
 347 .user-type-bubble-header {
 348   font-weight: bold;
 349   margin-bottom: 14px;
 350 }
 351
 352 .easy-unlock-button-content {
 353   width: 145px;
 354 }
 355
 356 html[dir=rtl] .action-box-area {
 357   left: 0;
 358   right: auto;
 359 }
 360
 361 .action-box-button:hover {
 362   background-image: url('chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_HOVER');
 363 }
 364
 365 .action-box-area.active .action-box-button {
 366   background-image: url('chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_PRESSED');
 367 }
 368
 369 .action-box-menu {
 370   -webkit-transition: opacity 100ms ease-in-out;
 371   background-color: white;
 372   border: 1px solid lightgray;
 373   border-radius: 2px;
 374   box-shadow: none;
 375   display: none;
 376   font-size: 13px;
 377   line-height: 19px;
 378   margin: 0;
 379   opacity: 0;
 380   padding: 0;
 381   position: absolute;
 382   right: 5px;
 383   top: 18px;
 384   /* TODO(glotov): the menu should fade out with transition  */
 385   visibility: hidden;
 386   width: 220px;
 387   z-index: 1;
 388 }
 389
 390 html[dir=rtl] .action-box-menu {
 391   left: 5px;
 392   right: auto;
 393 }
 394
 395 .action-box-area.active ~ .action-box-menu {
 396   -webkit-box-orient: vertical;
 397   display: -webkit-box;
 398   opacity: 1;
 399   visibility: visible;
 400 }
 401
 402 .action-box-menu-title {
 403   -webkit-box-orient: vertical;
 404   -webkit-box-pack: center;
 405   color: #b4b4b4;
 406   display: -webkit-box;
 407   padding: 7px 20px;
 408 }
 409
 410 .action-box-menu-title-name {
 411   display: -webkit-box;
 412   height: 23px;
 413   overflow: hidden;
 414   text-overflow: ellipsis;
 415   white-space: nowrap;
 416   width: 180px;
 417 }
 418
 419 .action-box-menu-title-email {
 420   display: block;
 421   min-height: 23px;
 422   overflow: hidden;
 423   text-overflow: ellipsis;
 424   white-space: nowrap;
 425 }
 426
 427 .action-box-menu-remove {
 428   -webkit-box-align: center;
 429   border-top: 1px solid lightgray;
 430   display: -webkit-box;
 431   min-height: 29px;
 432   padding: 7px 20px;
 433 }
 434
 435 .action-box-menu-remove:hover,
 436 .action-box-menu-remove:focus {
 437   background-color: #f3f3f3;
 438   outline: none;
 439 }
 440
 441 .action-box-remove-user-warning {
 442   border-top: 1px solid lightgray;
 443   color: #000;
 444   font-size: 12px;
 445   line-height: 18px;
 446   padding: 20px;
 447 }
 448
 449 .action-box-remove-user-warning-text {
 450   padding-bottom: 20px;
 451 }
 452
 453 .action-box-remove-user-warning .remove-warning-button {
 454   width: 100%;
 455 }
 456
 457 html[oobe=old] .pod.focused .action-box-area {
 458   /* Track shifting of .user-image on pod focus. */
 459   -webkit-transform: translateY(-1px);
 460   -webkit-transition: -webkit-transform 140ms ease;
 461   opacity: 1;
 462 }
 463
 464 .signed-in-indicator {
 465   -webkit-transition: all 140ms ease;
 466   background: rgba(0, 0, 0, 0.5);
 467   color: white;
 468   font-size: small;
 469   padding: 3px 0;
 470   position: absolute;
 471   /* Width of .user-image. */
 472   width: 160px;
 473   z-index: 1;
 474 }
 475
 476 /**** Public account user pod rules *******************************************/
 477
 478 .pod.public-account .name {
 479   width: 140px;
 480 }
 481
 482 .pod.public-account .name,
 483 .side-pane-name {
 484   -webkit-padding-end: 16px;
 485   max-height: 42px;
 486   outline: none;
 487   overflow: hidden;
 488   text-overflow: ellipsis;
 489 }
 490
 491 .learn-more,
 492 .side-pane-learn-more {
 493   background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
 494   height: 16px;
 495   position: absolute;
 496   width: 16px;
 497 }
 498
 499 .learn-more:hover,
 500 .side-pane-learn-more:hover {
 501   background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
 502 }
 503
 504 .learn-more {
 505   right: 10px;
 506   top: 189px;
 507 }
 508
 509 html[dir=rtl] .learn-more {
 510   left: 10px;
 511   right: auto;
 512 }
 513
 514 .side-pane-divider,
 515 .side-pane-container {
 516   bottom: 5px;
 517   top: 5px;
 518   visibility: hidden;
 519 }
 520
 521 .side-pane-divider {
 522   -webkit-margin-start: 10px;
 523   border-left: 1px solid lightgray;
 524   left: 180px;
 525   right: auto;
 526   width: 1px;
 527 }
 528
 529 html[dir=rtl] .side-pane-divider {
 530   left: auto;
 531   right: 180px;
 532 }
 533
 534 .side-pane-container {
 535   left: 185px;
 536   overflow: hidden;
 537   padding: 5px;
 538   right: auto;
 539 }
 540
 541 html[dir=rtl] .side-pane-container {
 542   left: auto;
 543   right: 185px;
 544 }
 545
 546 .side-pane-contents {
 547   -webkit-transform: translateX(-240px);
 548   -webkit-transition: -webkit-transform 180ms ease;
 549   height: 100%;
 550   width: 225px;
 551 }
 552
 553 html[dir=rtl] .side-pane-contents {
 554   -webkit-transform: translateX(240px);
 555 }
 556
 557 .pod.public-account.expanded .side-pane-contents {
 558   -webkit-transform: translateX(0);
 559 }
 560
 561 .side-pane-learn-more {
 562   right: 0;
 563   top: 2px;
 564 }
 565
 566 html[dir=rtl] .side-pane-learn-more {
 567   left: 2px;
 568   right: auto;
 569 }
 570
 571 .side-pane-container .info,
 572 .side-pane-container .reminder {
 573   font-size: 12px;
 574 }
 575
 576 .side-pane-container .info {
 577   -webkit-margin-before: 25px;
 578 }
 579
 580 .side-pane-container .reminder {
 581   font-weight: bold;
 582 }
 583
 584 .side-pane-container .enter-button {
 585   bottom: 5px;
 586   display: block;
 587   float: right;
 588 }
 589
 590 html[dir=rtl] .side-pane-container .enter-button {
 591   left: 5px;
 592   right: auto;
 593 }
 594
 595 .pod.public-account.expanded {
 596   padding: 10px;
 597   width: 400px;
 598 }
 599
 600 .pod.public-account:not(.expanded) {
 601   max-height: 204px;
 602 }
 603
 604 .pod.public-account.expanded .name,
 605 .pod.public-account.expanded .learn-more {
 606   display: none;
 607 }
 608
 609 .pod.public-account.expanded .side-pane-divider,
 610 .pod.public-account.expanded .side-pane-container,
 611 .pod.public-account.animating .side-pane-container {
 612   visibility: inherit;
 613 }