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