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