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