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