| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html"> |
| <link rel="import" href="chrome://resources/html/cr.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> |
| <link rel="import" href="welcome_browser_proxy.html"> |
| |
| <dom-module id="welcome-app"> |
| <template> |
| <style> |
| @keyframes slideUpContent { |
| from { |
| transform: translateY(120px); |
| } |
| } |
| |
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| } |
| } |
| |
| @keyframes fadeInAndSlideUp { |
| from { |
| opacity: 0; |
| transform: translateY(8px); |
| } |
| } |
| |
| @keyframes fadeOutAndSlideUp { |
| to { |
| height: 0; |
| opacity: 0; |
| transform: translateY(-8px); |
| } |
| } |
| |
| @keyframes spin { |
| from { |
| transform: rotate(1440deg) scale(0.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); |
| } |
| } |
| |
| .slider { |
| align-items: center; |
| animation: slideUpContent 600ms 2.5s cubic-bezier(.4, .2, 0, 1) both; |
| display: flex; |
| flex: 1; |
| flex-direction: column; |
| justify-content: center; |
| max-width: 500px; |
| } |
| |
| .heading-container { |
| animation: fadeInAndSlideUp 1s 400ms cubic-bezier(.4, .2, 0, 1) both; |
| color: var(--paper-grey-800); |
| font-size: 2.5em; |
| line-height: 1em; |
| margin-bottom: 0.25em; |
| margin-top: 1.5em; |
| position: relative; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| .heading-container { |
| color: var(--cr-primary-text-color); |
| } |
| } |
| |
| .heading { |
| animation: fadeOutAndSlideUp 600ms 2.1s cubic-bezier(.4, .2, 0, 1) forwards; |
| /* Makes sure fading-in/out doesn't impact the logo position. */ |
| position: absolute; |
| } |
| |
| .second-heading { |
| animation: fadeInAndSlideUp 600ms 2.5s cubic-bezier(.4, .2, 0, 1) both; |
| font-size: 0.6em; |
| } |
| |
| #logoWrapper { |
| animation: fadeIn 600ms both, bounce 1s 600ms linear both; |
| height: 96px; |
| position: relative; |
| width: 96px; |
| } |
| |
| #logo { |
| 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; |
| } |
| |
| .signin { |
| animation: fadeInAndSlideUp 600ms 2.5s cubic-bezier(.4, .2, 0, 1) both; |
| } |
| |
| .signin-description { |
| font-size: 1em; |
| line-height: 1.725em; |
| max-width: 344px; |
| } |
| |
| .signin-buttons { |
| align-items: center; |
| display: flex; |
| font-size: .8125em; |
| justify-content: space-between; |
| margin-top: 2.5em; |
| } |
| |
| cr-button { |
| min-width: 92px; |
| } |
| </style> |
| <div class="slider"> |
| <div id="logoWrapper"> |
| <div id="logo" on-click="onLogoTap_"></div> |
| </div> |
| <div class="heading-container"> |
| <div class="heading">$i18n{headerText}</div> |
| <div class="second-heading">$i18n{secondHeaderText}</div> |
| </div> |
| <div class="signin"> |
| <div class="signin-description">$i18n{descriptionText}</div> |
| <div class="signin-buttons"> |
| <cr-button on-click="onDecline_"> |
| $i18n{declineText} |
| </cr-button> |
| <cr-button class="action-button" on-click="onAccept_"> |
| $i18n{acceptText} |
| </cr-button> |
| </div> |
| </div> |
| </div> |
| </template> |
| <script src="welcome_app.js"></script> |
| </dom-module> |