| OLD | NEW |
| 1 /* Copyright (c) 2011 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2011 The Chromium Authors. All rights reserved. |
| 2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
| 3 * found in the LICENSE file. | 3 * found in the LICENSE file. |
| 4 * | 4 * |
| 5 * This is the stylesheet used by user pods row of account picker UI. | 5 * This is the stylesheet used by user pods row of account picker UI. |
| 6 */ | 6 */ |
| 7 | 7 |
| 8 podrow { | 8 podrow { |
| 9 -webkit-box-align: center; | 9 -webkit-box-align: center; |
| 10 -webkit-box-pack: center; | 10 -webkit-box-pack: center; |
| 11 -webkit-transition: all .2s ease-in-out; | 11 -webkit-transition: all 200ms ease-in-out; |
| 12 display: -webkit-box; | 12 display: -webkit-box; |
| 13 height: 225px; | 13 height: 225px; |
| 14 position: relative; | 14 position: relative; |
| 15 } | 15 } |
| 16 | 16 |
| 17 .pod { | 17 .pod { |
| 18 -webkit-transition: all .23s ease; | 18 -webkit-transition: all 230ms ease; |
| 19 border-radius: 2px; | 19 border-radius: 2px; |
| 20 cursor: pointer; | 20 cursor: pointer; |
| 21 margin: 0 10px; | 21 margin: 0 10px; |
| 22 outline: none; | 22 outline: none; |
| 23 padding: 10px; | 23 padding: 10px; |
| 24 position: relative; | 24 position: relative; |
| 25 width: 170px; | 25 width: 170px; |
| 26 } | 26 } |
| 27 | 27 |
| 28 .pod .user-image { | 28 .pod .user-image { |
| 29 -webkit-box-shadow: 0 3px 12px #ccc; | 29 -webkit-box-shadow: 0 3px 12px #ccc; |
| 30 -webkit-transition: all .14s ease; | 30 -webkit-transition: all 140ms ease; |
| 31 background-color: #fff; | 31 background-color: #fff; |
| 32 border: 1px solid #ccc; | 32 border: 1px solid #ccc; |
| 33 border-radius: 2px; | 33 border-radius: 2px; |
| 34 height: 160px; | 34 height: 160px; |
| 35 padding: 4px; | 35 padding: 4px; |
| 36 margin-bottom: 18px; | 36 margin-bottom: 18px; |
| 37 width: 160px; | 37 width: 160px; |
| 38 } | 38 } |
| 39 | 39 |
| 40 .pod.focused { | 40 .pod.focused { |
| (...skipping 24 matching lines...) Expand all Loading... |
| 65 -webkit-transform: translateX(25px); | 65 -webkit-transform: translateX(25px); |
| 66 opacity: 0; | 66 opacity: 0; |
| 67 } | 67 } |
| 68 | 68 |
| 69 .pod.zoom { | 69 .pod.zoom { |
| 70 -webkit-transform: scale(2.2); | 70 -webkit-transform: scale(2.2); |
| 71 opacity: 0; | 71 opacity: 0; |
| 72 } | 72 } |
| 73 | 73 |
| 74 .name { | 74 .name { |
| 75 -webkit-transition: opacity .8s ease; | 75 -webkit-transition: opacity 800ms ease; |
| 76 color: #565656; | 76 color: #565656; |
| 77 font-weight: bold; | 77 font-weight: bold; |
| 78 font-size: 15px; | 78 font-size: 15px; |
| 79 overflow: hidden; | 79 overflow: hidden; |
| 80 text-align: center; | 80 text-align: center; |
| 81 text-overflow: ellipsis; | 81 text-overflow: ellipsis; |
| 82 } | 82 } |
| 83 | 83 |
| 84 .name.init { | 84 .name.init { |
| 85 opacity: 0; | 85 opacity: 0; |
| (...skipping 90 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 176 html[dir=rtl] .pod .capslock-hint { | 176 html[dir=rtl] .pod .capslock-hint { |
| 177 left: 10px; | 177 left: 10px; |
| 178 right: auto; | 178 right: auto; |
| 179 } | 179 } |
| 180 | 180 |
| 181 .capslock-on .pod.focused input[type='password']:not([hidden]) ~ .capslock-hint
{ | 181 .capslock-on .pod.focused input[type='password']:not([hidden]) ~ .capslock-hint
{ |
| 182 visibility: visible; | 182 visibility: visible; |
| 183 } | 183 } |
| 184 | 184 |
| 185 .remove-user-button { | 185 .remove-user-button { |
| 186 -webkit-transition: width .1s ease-in-out, background .2s ease-in-out; | 186 -webkit-transition: width 100ms ease-in-out, background 200ms ease-in-out; |
| 187 -webkit-box-shadow: none; | 187 -webkit-box-shadow: none; |
| 188 background: url('chrome://theme/IDR_CLOSE_BAR') center center no-repeat; | 188 background: url('chrome://theme/IDR_CLOSE_BAR') center center no-repeat; |
| 189 border: 0; | 189 border: 0; |
| 190 height: 16px; | 190 height: 16px; |
| 191 margin: 0; | 191 margin: 0; |
| 192 min-width: 16px; | 192 min-width: 16px; |
| 193 padding: 0; | 193 padding: 0; |
| 194 position: absolute; | 194 position: absolute; |
| 195 right: 14px; | 195 right: 14px; |
| 196 top: 14px; | 196 top: 14px; |
| (...skipping 10 matching lines...) Expand all Loading... |
| 207 background-image: none; | 207 background-image: none; |
| 208 border-radius: 4px; | 208 border-radius: 4px; |
| 209 color: white; | 209 color: white; |
| 210 font-size: 10px; | 210 font-size: 10px; |
| 211 height: initial; | 211 height: initial; |
| 212 padding: 2px 4px; | 212 padding: 2px 4px; |
| 213 width: initial; | 213 width: initial; |
| 214 } | 214 } |
| 215 | 215 |
| 216 .signed-in-indicator { | 216 .signed-in-indicator { |
| 217 -webkit-transition: all .14s ease; | 217 -webkit-transition: all 140ms ease; |
| 218 background: rgba(0, 0, 0, 0.5); | 218 background: rgba(0, 0, 0, 0.5); |
| 219 color: white; | 219 color: white; |
| 220 font-size: small; | 220 font-size: small; |
| 221 margin: 5px; | 221 margin: 5px; |
| 222 position: absolute; | 222 position: absolute; |
| 223 padding-bottom: 3px; | 223 padding-bottom: 3px; |
| 224 padding-top: 3px; | 224 padding-top: 3px; |
| 225 text-align: center; | 225 text-align: center; |
| 226 /* Width of .user-image. */ | 226 /* Width of .user-image. */ |
| 227 width: 160px; | 227 width: 160px; |
| 228 z-index: 1; | 228 z-index: 1; |
| 229 } | 229 } |
| 230 | 230 |
| 231 .pod.focused .signed-in-indicator { | 231 .pod.focused .signed-in-indicator { |
| 232 /* Track shifting of .user-image on pod focus. */ | 232 /* Track shifting of .user-image on pod focus. */ |
| 233 -webkit-transform: translateY(-1px); | 233 -webkit-transform: translateY(-1px); |
| 234 } | 234 } |
| OLD | NEW |