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