| OLD | NEW |
| 1 /* Copyright 2014 The Chromium Authors. All rights reserved. | 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 | 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 /* Temporarily disabled because animation interferes with updating screen's | 9 /* Temporarily disabled because animation interferes with updating screen's |
| 10 size. */ | 10 size. */ |
| (...skipping 68 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 79 transform: scale3d(1, 1, 1) !important; | 79 transform: scale3d(1, 1, 1) !important; |
| 80 z-index: 1; | 80 z-index: 1; |
| 81 } | 81 } |
| 82 | 82 |
| 83 .pod.focused[auth-type='userClick'] { | 83 .pod.focused[auth-type='userClick'] { |
| 84 cursor: pointer; | 84 cursor: pointer; |
| 85 } | 85 } |
| 86 | 86 |
| 87 .user-image-pane { | 87 .user-image-pane { |
| 88 background-color: white; | 88 background-color: white; |
| 89 height: 160px; |
| 90 left: 10px; |
| 91 position: absolute; |
| 92 top: 10px; |
| 93 transition: height 180ms ease-in-out, |
| 94 left 180ms ease-in-out, |
| 95 right 180ms ease-in-out, |
| 96 top 180ms ease-in-out, |
| 97 width 180ms ease-in-out; |
| 98 width: 160px; |
| 99 z-index: 3; |
| 100 } |
| 101 |
| 102 .user-image-pane.pin-enabled { |
| 103 height: 230px; |
| 104 left: 20px; |
| 105 top: 20px; |
| 106 width: 230px; |
| 89 } | 107 } |
| 90 | 108 |
| 91 html[dir=rtl] .user-image-pane { | 109 html[dir=rtl] .user-image-pane { |
| 92 left: auto; | 110 left: auto; |
| 93 right: 10px; | 111 right: 10px; |
| 94 } | 112 } |
| 95 | 113 |
| 114 html[dir=rtl] .user-image-pane.pin-enabled { |
| 115 left: auto; |
| 116 right: 20px; |
| 117 } |
| 118 |
| 96 .user-image-container { | 119 .user-image-container { |
| 97 align-items: center; | 120 align-items: center; |
| 98 display: flex; | 121 display: flex; |
| 99 height: 100%; | 122 height: 100%; |
| 100 justify-content: center; | 123 justify-content: center; |
| 101 width: 100%; | 124 width: 100%; |
| 102 } | 125 } |
| 103 | 126 |
| 104 .pod .user-image { | 127 .pod .user-image { |
| 105 flex: none; | 128 flex: none; |
| 106 } | 129 } |
| 107 | 130 |
| 108 /* TODO(noms): Refactor this out into a CrOS-specific file and simplify the | 131 /* TODO(noms): Refactor this out into a CrOS-specific file and simplify the |
| 109 style rule once it is included on CrOS only. crbug.com/397638 */ | 132 style rule once it is included on CrOS only. crbug.com/397638 */ |
| 110 html:not([screen=login-add-user]) .pod .user-image { | 133 html:not([screen=login-add-user]) .pod .user-image { |
| 111 max-height: 160px; | 134 max-height: 160px; |
| 112 max-width: 160px; | 135 max-width: 160px; |
| 113 opacity: 0.7; | 136 opacity: 0.7; |
| 114 position: absolute; | 137 position: absolute; |
| 115 top: 10px; | |
| 116 transition: max-height 180ms ease-in-out, | 138 transition: max-height 180ms ease-in-out, |
| 117 max-width 180ms ease-in-out; | 139 max-width 180ms ease-in-out; |
| 118 } | 140 } |
| 119 | 141 |
| 120 html:not([screen=login-add-user]) .pod .user-image.pin-enabled { | 142 html:not([screen=login-add-user]) .pod .user-image.pin-enabled { |
| 121 max-height: 256px; | 143 max-height: 256px; |
| 122 max-width: 256px; | 144 max-width: 256px; |
| 123 } | 145 } |
| 124 | 146 |
| 125 html:not([screen=login-add-user]) .pod.focused .user-image { | 147 html:not([screen=login-add-user]) .pod.focused .user-image { |
| 126 opacity: 1; | 148 opacity: 1; |
| 127 } | 149 } |
| 128 | 150 |
| 129 .pod.multiprofiles-policy-applied .user-image { | 151 .pod.multiprofiles-policy-applied .user-image { |
| 130 -webkit-filter: grayscale(100%); | 152 -webkit-filter: grayscale(100%); |
| 131 } | 153 } |
| 132 | 154 |
| 133 .signed-in-indicator { | 155 .signed-in-indicator { |
| 134 display: none; | 156 display: none; |
| 135 } | 157 } |
| 136 | 158 |
| 137 .pod.signed-in .signed-in-indicator { | 159 .pod.signed-in .signed-in-indicator { |
| 138 background-color: rgba(0, 0, 0, 0.5); | 160 background-color: rgba(0, 0, 0, 0.5); |
| 139 color: white; | 161 color: white; |
| 140 display: block; | 162 display: block; |
| 141 font-size: small; | 163 font-size: small; |
| 142 left: 10px; | |
| 143 position: absolute; | 164 position: absolute; |
| 144 text-align: center; | 165 text-align: center; |
| 145 top: 10px; | 166 top: 0; |
| 146 transition: width 180ms ease-in-out; | 167 transition: width 180ms ease-in-out; |
| 147 width: 160px; | 168 width: 100%; |
| 148 } | 169 } |
| 149 | 170 |
| 150 .pod.signed-in .signed-in-indicator.pin-enabled { | 171 .pod.signed-in .signed-in-indicator.pin-enabled { |
| 151 width: 256px; | 172 width: 256px; |
| 152 } | 173 } |
| 153 | 174 |
| 154 .main-pane { | 175 .main-pane { |
| 155 left: 10px; | 176 left: 10px; |
| 156 position: absolute; | 177 position: absolute; |
| 157 top: 10px; | 178 top: 10px; |
| (...skipping 726 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 884 -webkit-animation: ellipsis-component2 1.5s infinite; | 905 -webkit-animation: ellipsis-component2 1.5s infinite; |
| 885 } | 906 } |
| 886 | 907 |
| 887 @-webkit-keyframes ellipsis-component2 { | 908 @-webkit-keyframes ellipsis-component2 { |
| 888 0% { opacity: 0; } | 909 0% { opacity: 0; } |
| 889 25% { opacity: 0; } | 910 25% { opacity: 0; } |
| 890 50% { opacity: 0; } | 911 50% { opacity: 0; } |
| 891 75% { opacity: 1; } | 912 75% { opacity: 1; } |
| 892 100% { opacity: 0; } | 913 100% { opacity: 0; } |
| 893 } | 914 } |
| OLD | NEW |