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