src/chrome/browser/resources/chromeos/login/user_pod_row.css

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