/* Copyright 2016 The Chromium Authors. All rights reserved. * Use of this source code is governed by a BSD-style license that can be * found in the LICENSE file. */ body { align-items: center; color: var(--paper-grey-900); display: flex; flex-direction: column; font-size: 100%; justify-content: center; margin: 0; min-height: 100vh; } @keyframes slideUpContent { from { transform: translateY(186px); } } @keyframes fadeIn { from { opacity: 0; } } @keyframes fadeOut { to { opacity: 0; } } @keyframes fadeInAndSlideUp { from { opacity: 0; transform: translateY(8px); } } @keyframes spin { from { transform: rotate(1440deg) scale(0.8); } } @keyframes fadeInAndSlideDownShadow { from { opacity: .6; top: 0; } } @keyframes scaleUp { 0% { transform: scale(.8); } } @keyframes colorize { from { filter: grayscale(100%) brightness(128%) contrast(20%) brightness(161%); opacity: .6; } } @keyframes bounce { 0% { transform: matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 7.61% { transform: matrix3d(0.907, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 11.41% { transform: matrix3d(0.948, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 15.12% { transform: matrix3d(0.976, 0, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 18.92% { transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 22.72% { transform: matrix3d(1.008, 0, 0, 0, 0, 1.008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 30.23% { transform: matrix3d(1.014, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 50.25% { transform: matrix3d(1.003, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 70.27% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } .content { height: 100%; overflow-y: hidden; } .slider { align-items: center; animation: slideUpContent 600ms 1.8s cubic-bezier(.4, .2, 0, 1) both; display: flex; flex: 1; flex-direction: column; justify-content: center; max-width: 500px; } .heading { animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4, .2, 0, 1) both; font-size: 2.125em; margin-bottom: .25em; margin-top: 1.5em; text-align: center; } .subheading { animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4, .2, 0, 1) both; color: #939393; font-size: 1em; font-weight: 500; margin-top: .25em; text-align: center; } .logo { animation: fadeIn 600ms both, bounce 1s 600ms linear both; height: 96px; position: relative; width: 96px; } .logo-icon { animation: spin 2.4s cubic-bezier(.4, .2, 0, 1) both, colorize 300ms 700ms linear both; background-image: -webkit-image-set(url(chrome://welcome/logo.png) 1x, url(chrome://welcome/logo2x.png) 2x); background-size: 100%; height: 96px; width: 96px; } .logo-shadow { animation: fadeInAndSlideDownShadow 300ms 600ms both; background: rgba(0, 0, 0, .2); border-radius: 50%; filter: blur(16px); height: 96px; position: absolute; top: 16px; width: 96px; z-index: -1; } .signin { animation: fadeInAndSlideUp 600ms 2s cubic-bezier(.4, .2, 0, 1) both; margin-top: 3em; text-align: left; } .signin-description { font-size: .875em; line-height: 1.725em; max-width: 344px; } .signin-buttons { align-items: center; display: flex; flex-direction: column; margin-top: 2em; } .action { -webkit-font-smoothing: antialiased; background: var(--google-blue-500); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); color: white; font-size: .8125em; font-weight: 500; line-height: 2.25rem; padding: 0 1.5em; transition: 300ms cubic-bezier(.4, .2, 0, 1); will-change: box-shadow; } .action:hover { background: var(--paper-blue-a400); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .24); } .action:active { background: var(--google-blue-500); } .action.keyboard-focus { background: var(--google-blue-700); } .link { color: var(--google-blue-700); display: inline-block; font-size: .8125em; margin: 1.5em; text-align: center; text-decoration: none; } .watermark { -webkit-mask-image: url(chrome://welcome/watermark.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100%; animation: fadeIn 1s cubic-bezier(0, 0, .2, 1) both; background: var(--paper-grey-400); bottom: 24px; height: 24px; position: absolute; width: 74px; } @media(max-height: 608px) { .watermark { display: none; } }