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