| <!doctype html> |
| <html dir="$i18n{textdirection}" lang="$i18n{language}" $i18n{dark}> |
| <head> |
| <meta charset="utf-8"> |
| <title>$i18n{headerText}</title> |
| |
| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
| <link rel="import" href="chrome://resources/html/cr.html"> |
| <link rel="import" href="chrome://resources/html/util.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> |
| |
| <link rel="stylesheet" href="chrome://resources/css/md_colors.css"> |
| <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> |
| <link rel="stylesheet" href="chrome://welcome/welcome.css"> |
| |
| <style> |
| html[dark] { |
| background-color: var(--md-background-color); |
| } |
| </style> |
| |
| <dom-module id="welcome-app"> |
| <template> |
| <style include="paper-button-style"> |
| @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: rgb(95, 99, 104); |
| font-size: 1em; |
| font-weight: 500; |
| margin-top: .25em; |
| text-align: center; |
| } |
| |
| :host-context([dark]) .subheading { |
| color: var(--cr-secondary-text-color); |
| } |
| |
| .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; |
| } |
| |
| .signin-description { |
| font-size: .875em; |
| line-height: 1.725em; |
| max-width: 344px; |
| } |
| |
| .signin-buttons { |
| align-items: center; |
| display: flex; |
| flex-direction: column; |
| margin: auto; |
| margin-top: 2em; |
| width: fit-content; |
| } |
| |
| paper-button { |
| font-size: .8125em; |
| /* Makes sure the two paper-buttons are the same width since they're |
| placed vertically. Requires parent to be "width: fit-content;". */ |
| width: 100%; |
| } |
| |
| #cancel { |
| margin-bottom: 2px; /* Prevent focus ring from being chopped. */ |
| margin-top: 1.5em; |
| } |
| </style> |
| <div class="content"> |
| <div class="slider"> |
| <div class="logo"> |
| <div class="logo-icon" on-click="onLogoTap_"></div> |
| <div class="logo-shadow"></div> |
| </div> |
| <div class="heading">$i18n{headerText}</div> |
| <if expr="_google_chrome"> |
| <div class="subheading">$i18n{subheaderText}</div> |
| </if> |
| <div class="signin"> |
| <div class="signin-description">$i18n{descriptionText}</div> |
| <div class="signin-buttons"> |
| <paper-button class="action-button" on-tap="onAccept_"> |
| $i18n{acceptText} |
| </paper-button> |
| <paper-button id="cancel" on-tap="onDecline_"> |
| $i18n{declineText} |
| </paper-button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </template> |
| <script src="welcome.js"></script> |
| </dom-module> |
| </head> |
| <body> |
| <welcome-app></welcome-app> |
| <div class="watermark"></div> |
| <link rel="import" href="chrome://resources/html/dark_mode.html"> |
| </body> |
| </html> |
