OLD | NEW |
1 /* Copyright 2016 The Chromium Authors. All rights reserved. | 1 /* Copyright 2016 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 body { | 5 body { |
6 align-items: center; | 6 align-items: center; |
7 color: var(--paper-grey-900); | 7 color: var(--paper-grey-900); |
8 display: flex; | 8 display: flex; |
9 flex-direction: column; | 9 flex-direction: column; |
10 font-size: 100%; | 10 font-size: 100%; |
(...skipping 161 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
172 } | 172 } |
173 | 173 |
174 .signin-buttons { | 174 .signin-buttons { |
175 align-items: center; | 175 align-items: center; |
176 display: flex; | 176 display: flex; |
177 flex-direction: column; | 177 flex-direction: column; |
178 margin-top: 2em; | 178 margin-top: 2em; |
179 } | 179 } |
180 | 180 |
181 .action { | 181 .action { |
| 182 -webkit-font-smoothing: antialiased; |
182 background: var(--google-blue-500); | 183 background: var(--google-blue-500); |
183 border-radius: 2px; | 184 border-radius: 2px; |
| 185 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); |
184 color: white; | 186 color: white; |
185 font-size: .8125em; | 187 font-size: .8125em; |
186 font-weight: 500; | 188 font-weight: 500; |
187 line-height: 2.25rem; | 189 line-height: 2.25rem; |
188 padding: 0 1.5em; | 190 padding: 0 1.5em; |
| 191 transition: 300ms cubic-bezier(.4, .2, 0, 1); |
| 192 will-change: box-shadow; |
| 193 } |
| 194 |
| 195 .action:hover { |
| 196 background: var(--paper-blue-a400); |
| 197 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .24); |
189 } | 198 } |
190 | 199 |
191 .action:active { | 200 .action:active { |
192 background: var(--google-blue-500); | 201 background: var(--google-blue-500); |
193 } | 202 } |
194 | 203 |
195 .action:focus { | 204 .action.keyboard-focus { |
196 background: var(--google-blue-700); | 205 background: var(--google-blue-700); |
197 } | 206 } |
198 | 207 |
199 .link { | 208 .link { |
200 color: var(--google-blue-700); | 209 color: var(--google-blue-700); |
201 display: inline-block; | 210 display: inline-block; |
202 font-size: .8125em; | 211 font-size: .8125em; |
203 margin: 1.5em; | 212 margin: 1.5em; |
204 text-align: center; | 213 text-align: center; |
205 text-decoration: none; | 214 text-decoration: none; |
206 } | 215 } |
207 | 216 |
208 .watermark { | 217 .watermark { |
209 -webkit-mask-image: url(chrome://welcome/watermark.svg); | 218 -webkit-mask-image: url(chrome://welcome/watermark.svg); |
210 -webkit-mask-repeat: no-repeat; | 219 -webkit-mask-repeat: no-repeat; |
211 -webkit-mask-size: 100%; | 220 -webkit-mask-size: 100%; |
212 animation: fadeIn 1s cubic-bezier(0, 0, .2, 1) both; | 221 animation: fadeIn 1s cubic-bezier(0, 0, .2, 1) both; |
213 background: var(--paper-grey-400); | 222 background: var(--paper-grey-400); |
214 bottom: 24px; | 223 bottom: 24px; |
215 height: 24px; | 224 height: 24px; |
216 position: absolute; | 225 position: absolute; |
217 width: 74px; | 226 width: 74px; |
218 } | 227 } |
219 | 228 |
220 @media(max-height: 608px) { | 229 @media(max-height: 608px) { |
221 .watermark { | 230 .watermark { |
222 display: none; | 231 display: none; |
223 } | 232 } |
224 } | 233 } |
OLD | NEW |