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 |