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   height: 160px;
  73   line-height: 160px;
  74   text-align: center;
  75   width: 160px;
  76 }
  77
  78 .pod .user-image {
  79   height: 160px;
  80   opacity: 0.7;
  81   vertical-align: middle;
  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   box-sizing: border-box;
 191   display: none;
 192   height: 40px;
 193   outline: none;
 194   padding: 4px 6px;
 195   width: 100%;
 196 }
 197
 198 .pod[auth-type='offlinePassword'] input[type='password'] {
 199   display: inline-block;
 200 }
 201
 202 .pod.need-password.focused .password-area {
 203   display: -webkit-box;
 204 }
 205
 206 .pod .signin-button,
 207 .pod .launch-app-button {
 208   box-sizing: border-box;
 209   display: none;
 210   height: 26px;
 211   margin: 6px 0 !important;
 212   max-width: 100%;
 213   min-width: 72px !important;
 214   padding: 4px 8px;
 215 }
 216
 217 .pod.focused .launch-app-button,
 218 .pod.focused[auth-type='onlineSignIn'] .signin-button {
 219   display: inline-block;
 220 }
 221
 222 .pod .capslock-hint {
 223   bottom: 13px;
 224   cursor: text;
 225   position: absolute;
 226   right: 6px;
 227   visibility: hidden;
 228   z-index: 1;
 229 }
 230
 231 html[dir=rtl] .pod .capslock-hint {
 232   left: 10px;
 233   right: auto;
 234 }
 235
 236 .capslock-on .pod.focused input[type='password']:not([hidden]) ~ .capslock-hint {
 237   visibility: visible;
 238 }
 239
 240 .capslock-on .pod.focused .password {
 241   padding: 4px 27px 4px 6px;
 242 }
 243
 244 .action-box-area {
 245   -webkit-transition: opacity 100ms ease-in-out;
 246   background-color: white;
 247   border-radius: 2px;
 248   box-shadow: none;
 249   height: 23px;
 250   margin: 0;
 251   opacity: 0;
 252   outline: none;
 253   padding: 0;
 254   position: absolute;
 255   right: 0;
 256   top: 0;
 257   width: 23px;
 258   z-index: 1;
 259 }
 260
 261 .action-box-area:focus,
 262 .action-box-area.hovered,
 263 .action-box-area.active {
 264   opacity: 1;
 265 }
 266
 267 .action-box-button {
 268   background-color: transparent;
 269   background-image: url('chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_NORMAL');
 270   border: 0 !important;
 271   height: 13px;
 272   margin: 5px;
 273   padding: 0;
 274   width: 13px;
 275 }
 276
 277 .user-type-icon-area {
 278   background-color: white;
 279   border-radius: 2px;
 280   box-shadow: none;
 281   height: 26px;
 282   left: 0;
 283   margin: 0;
 284   outline: none;
 285   padding: 0;
 286   position: absolute;
 287   top: 0;
 288   width: 26px;
 289   z-index: 1;
 290 }
 291
 292 html[dir=rtl] .user-type-icon-area {
 293   left: auto;
 294   right: 0;
 295 }
 296
 297 .user-type-icon-image {
 298   background-color: transparent;
 299   border: 0 !important;
 300   height: 16px;
 301   margin: 5px;
 302   padding: 0;
 303   width: 16px;
 304 }
 305
 306 .user-type-icon-area.supervised .user-type-icon-image {
 307   background-image: url('chrome://theme/IDR_MANAGED_MODE_ICON');
 308 }
 309
 310 .user-type-icon-area.policy .user-type-icon-image {
 311   background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
 312 }
 313
 314 .user-type-icon-area.app .user-type-icon-image {
 315   background-image: url('chrome://theme/IDR_KIOSK_APP_USER_POD_ICON');
 316 }
 317
 318 .user-type-icon-area.policy:hover ~ .user-type-bubble {
 319   opacity: 1;
 320   visibility: visible;
 321 }
 322
 323 .user-type-bubble {
 324   -webkit-transition: all 100ms ease-in-out;
 325   background-color: white;
 326   border: 1px solid lightgray;
 327   border-radius: 2px;
 328   box-shadow: none;
 329   font-size: 14px;
 330   left: 5px;
 331   margin: 0;
 332   opacity: 0;
 333   padding: 17px;
 334   position: absolute;
 335   top: 20px;
 336   visibility: hidden;
 337   width: 200px;
 338   z-index: 1;
 339 }
 340
 341 html[dir=rtl] .user-type-bubble {
 342   left: auto;
 343   right: 5px;
 344 }
 345
 346 .user-type-bubble-header {
 347   font-weight: bold;
 348   margin-bottom: 14px;
 349 }
 350
 351 .easy-unlock-button-content {
 352   width: 145px;
 353 }
 354
 355 html[dir=rtl] .action-box-area {
 356   left: 0;
 357   right: auto;
 358 }
 359
 360 .action-box-button:hover {
 361   background-image: url('chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_HOVER');
 362 }
 363
 364 .action-box-area.active .action-box-button {
 365   background-image: url('chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_PRESSED');
 366 }
 367
 368 .action-box-menu {
 369   -webkit-transition: opacity 100ms ease-in-out;
 370   background-color: white;
 371   border: 1px solid lightgray;
 372   border-radius: 2px;
 373   box-shadow: none;
 374   display: none;
 375   font-size: 13px;
 376   line-height: 19px;
 377   margin: 0;
 378   opacity: 0;
 379   padding: 0;
 380   position: absolute;
 381   right: 5px;
 382   top: 18px;
 383   /* TODO(glotov): the menu should fade out with transition  */
 384   visibility: hidden;
 385   width: 220px;
 386   z-index: 1;
 387 }
 388
 389 html[dir=rtl] .action-box-menu {
 390   left: 5px;
 391   right: auto;
 392 }
 393
 394 .action-box-area.active ~ .action-box-menu {
 395   -webkit-box-orient: vertical;
 396   display: -webkit-box;
 397   opacity: 1;
 398   visibility: visible;
 399 }
 400
 401 .action-box-menu-title {
 402   -webkit-box-orient: vertical;
 403   -webkit-box-pack: center;
 404   color: #b4b4b4;
 405   display: -webkit-box;
 406   padding: 7px 20px;
 407 }
 408
 409 .action-box-menu-title-name {
 410   display: -webkit-box;
 411   height: 23px;
 412   overflow: hidden;
 413   text-overflow: ellipsis;
 414   white-space: nowrap;
 415   width: 180px;
 416 }
 417
 418 .action-box-menu-title-email {
 419   display: block;
 420   min-height: 23px;
 421   overflow: hidden;
 422   text-overflow: ellipsis;
 423   white-space: nowrap;
 424 }
 425
 426 .action-box-menu-remove {
 427   -webkit-box-align: center;
 428   border-top: 1px solid lightgray;
 429   display: -webkit-box;
 430   min-height: 29px;
 431   padding: 7px 20px;
 432 }
 433
 434 .action-box-menu-remove:hover,
 435 .action-box-menu-remove:focus {
 436   background-color: #f3f3f3;
 437   outline: none;
 438 }
 439
 440 .action-box-remove-user-warning {
 441   border-top: 1px solid lightgray;
 442   color: #000;
 443   font-size: 12px;
 444   line-height: 18px;
 445   padding: 20px;
 446 }
 447
 448 .action-box-remove-user-warning-text {
 449   padding-bottom: 20px;
 450 }
 451
 452 .action-box-remove-user-warning .remove-warning-button {
 453   width: 100%;
 454 }
 455
 456 html[oobe=old] .pod.focused .action-box-area {
 457   /* Track shifting of .user-image on pod focus. */
 458   -webkit-transform: translateY(-1px);
 459   -webkit-transition: -webkit-transform 140ms ease;
 460   opacity: 1;
 461 }
 462
 463 .signed-in-indicator {
 464   -webkit-transition: all 140ms ease;
 465   background: rgba(0, 0, 0, 0.5);
 466   color: white;
 467   font-size: small;
 468   padding: 3px 0;
 469   position: absolute;
 470   /* Width of .user-image. */
 471   width: 160px;
 472   z-index: 1;
 473 }
 474
 475 /**** Public account user pod rules *******************************************/
 476
 477 .pod.public-account .name {
 478   width: 140px;
 479 }
 480
 481 .pod.public-account .name,
 482 .side-pane-name {
 483   -webkit-padding-end: 16px;
 484   max-height: 42px;
 485   outline: none;
 486   overflow: hidden;
 487   text-overflow: ellipsis;
 488 }
 489
 490 .learn-more,
 491 .side-pane-learn-more {
 492   background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
 493   height: 16px;
 494   position: absolute;
 495   width: 16px;
 496 }
 497
 498 .learn-more:hover,
 499 .side-pane-learn-more:hover {
 500   background-image: url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
 501 }
 502
 503 .learn-more {
 504   right: 10px;
 505   top: 189px;
 506 }
 507
 508 html[dir=rtl] .learn-more {
 509   left: 10px;
 510   right: auto;
 511 }
 512
 513 .side-pane-divider,
 514 .side-pane-container {
 515   bottom: 5px;
 516   top: 5px;
 517   visibility: hidden;
 518 }
 519
 520 .side-pane-divider {
 521   -webkit-margin-start: 10px;
 522   border-left: 1px solid lightgray;
 523   left: 180px;
 524   right: auto;
 525   width: 1px;
 526 }
 527
 528 html[dir=rtl] .side-pane-divider {
 529   left: auto;
 530   right: 180px;
 531 }
 532
 533 .side-pane-container {
 534   left: 185px;
 535   overflow: hidden;
 536   padding: 5px;
 537   right: auto;
 538 }
 539
 540 html[dir=rtl] .side-pane-container {
 541   left: auto;
 542   right: 185px;
 543 }
 544
 545 .side-pane-contents {
 546   -webkit-transform: translateX(-240px);
 547   -webkit-transition: -webkit-transform 180ms ease;
 548   height: 100%;
 549   width: 225px;
 550 }
 551
 552 html[dir=rtl] .side-pane-contents {
 553   -webkit-transform: translateX(240px);
 554 }
 555
 556 .pod.public-account.expanded .side-pane-contents {
 557   -webkit-transform: translateX(0);
 558 }
 559
 560 .side-pane-learn-more {
 561   right: 0;
 562   top: 2px;
 563 }
 564
 565 html[dir=rtl] .side-pane-learn-more {
 566   left: 2px;
 567   right: auto;
 568 }
 569
 570 .side-pane-container .info,
 571 .side-pane-container .reminder {
 572   font-size: 12px;
 573 }
 574
 575 .side-pane-container .info {
 576   -webkit-margin-before: 25px;
 577 }
 578
 579 .side-pane-container .reminder {
 580   font-weight: bold;
 581 }
 582
 583 .side-pane-container .enter-button {
 584   bottom: 5px;
 585   display: block;
 586   float: right;
 587 }
 588
 589 html[dir=rtl] .side-pane-container .enter-button {
 590   left: 5px;
 591   right: auto;
 592 }
 593
 594 .pod.public-account.expanded {
 595   padding: 10px;
 596   width: 400px;
 597 }
 598
 599 .pod.public-account:not(.expanded) {
 600   max-height: 204px;
 601 }
 602
 603 .pod.public-account.expanded .name,
 604 .pod.public-account.expanded .learn-more {
 605   display: none;
 606 }
 607
 608 .pod.public-account.expanded .side-pane-divider,
 609 .pod.public-account.expanded .side-pane-container,
 610 .pod.public-account.animating .side-pane-container {
 611   visibility: inherit;
 612 }