blob: 84b8c28c5a05984cb9381e974910500c30b96890 [file] [log] [blame]
<!DOCTYPE html>
<html>
<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/icons.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="chrome://resources/html/action_link.html">
<link rel="import" href="chrome://resources/html/action_link_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<link rel="stylesheet" href="/welcome_win10.css">
<script src="strings.js"></script>
<dom-module id="welcome-win10">
<template>
<style include="action-link">
:host {
--expandable-section-height: 28.375em;
align-items: flex-start;
display: inline-flex;
flex-direction: column;
opacity: 0;
padding: 4em 1.5em 1.5em 1.5em;
transition: opacity 300ms;
}
:host(.accelerated) {
--expandable-section-height: 26.375em;
}
a {
color: var(--google-blue-500);
text-decoration: none;
}
ol {
margin: 0;
overflow: auto;
padding: 0;
}
strong {
font-weight: 500;
}
.header-logo {
content: url(chrome://welcome-win10/logo-large.png);
height: 3.125em;
margin: 0 -0.0625em;
}
.heading {
font-size: 2.125em;
padding-bottom: 2rem;
padding-top: 1rem;
}
.sections {
margin-bottom: 2em;
}
.section.expandable:first-child {
border-top: 1px solid var(--google-grey-300);
}
.section.expandable {
border-bottom: 1px solid var(--google-grey-300);
}
.section.expandable .section-heading {
color: var(--google-blue-500);
cursor: pointer;
}
.section-heading {
align-items: center;
display: flex;
padding: 1.5em 0;
}
.section-heading-text {
flex: 1;
font-weight: 500;
}
.section.expandable .section-heading-text {
font-weight: normal;
}
.section.expandable.expanded .section-heading-text {
font-weight: 500;
}
.section-heading-expand {
height: 1.25em;
transition: transform 150ms cubic-bezier(.4, .2, 0, 1) 50ms;
width: 1.25em;
}
.section.expandable.expanded .section-heading-expand {
transform: rotate(180deg);
transition-delay: 150ms;
}
.section-steps {
overflow: hidden;
}
.section-steps li {
-webkit-margin-start: 1.25em;
-webkit-padding-start: 1em;
margin-bottom: 1em;
}
.section-steps li:last-child {
margin-bottom: 1em;
}
.section.expandable .section-steps {
height: var(--expandable-section-height);
max-height: 0;
opacity: 0;
transition: max-height 300ms cubic-bezier(.4, .2, 0, 1) 50ms,
opacity 150ms;
visibility: hidden;
}
.section.expandable.expanded .section-steps {
max-height: var(--expandable-section-height);
opacity: 1;
transition: max-height 300ms cubic-bezier(.4, .2, 0, 1) 50ms,
opacity 150ms 250ms;
visibility: visible;
}
.button {
-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: #fff;
display: inline-block;
font-size: .8125em;
font-weight: 500;
line-height: 2.25rem;
padding: 0 1em;
text-align: center;
transition: 300ms cubic-bezier(.4, .2, 0, 1);
will-change: box-shadow;
}
.button: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);
}
.button:active {
background: var(--google-blue-500);
}
.button.keyboard-focus {
background: var(--google-blue-700);
}
.logo-small {
content: url(chrome://welcome-win10/logo-small.png);
display: inline;
height: 1.25em;
vertical-align: top;
width: 1.25em;
}
.screenshot {
display: block;
height: 440px;
margin: 0 auto;
max-width: 100%;
position: relative;
top: -96px;
width: 720px;
}
.screenshot-image {
box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 1px 2px
rgba(0, 0, 0, .24);
height: 48vw;
margin: 1em 0;
max-height: 300px;
max-width: 400px;
min-height: 150px;
min-width: 200px;
position: relative;
width: 64vw;
}
#default-image {
background: url(chrome://welcome-win10/default.webp);
background-repeat: no-repeat;
background-size: cover;
}
#taskbar-image {
background: url(chrome://welcome-win10/pin.webp);
background-repeat: no-repeat;
background-size: cover;
}
.screenshot-overlay {
box-sizing: border-box;
line-height: 0;
position: absolute;
user-select: none;
}
.screenshot-overlay div {
cursor: default;
}
#taskbar-overlay {
left: 31%;
top: 73%;
}
#taskbar-overlay div {
color: #ccc;
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-weight: 500;
}
#switch-anyway-overlay {
left: 38%;
top: 83%;
}
#switch-anyway-overlay div {
color: rgb(0, 117, 218);
font-family: Segoe UI;
}
#icon-overlay {
background-image: url(chrome://welcome-win10/logo-small.png);
background-size: cover;
height: 8%;
left: 46%;
top: 90%;
width: 6%;
}
/* These values are precisely set so that the text over the screenshot
* starts scaling at the same time the image starts scaling too. */
@media (max-width: 626px) {
#taskbar-overlay {
font-size: 1.95vw;
}
#switch-anyway-overlay {
font-size: 1.92vw;
}
}
/* Font-sizes used when the screenshot exactly reaches its max size. */
@media (min-width: 626px) {
#taskbar-overlay {
font-size: 12.2px;
}
#switch-anyway-overlay {
font-size: 12px;
}
}
</style>
<div class="header-logo" role="presentation"></div>
<div class="heading" role="heading" aria-level="1">$i18n{headerText}</div>
<div class="sections">
<div class$="[[computeClasses(isCombined)]]">
<template is="dom-if" if="[[isCombined]]">
<div role="heading" aria-level="2">
<a id="tab1" is="action-link" class="section-heading"
on-tap="onToggle" role="button" aria-controls="panel1"
aria-expanded="true">
<div class="section-heading-text" role="presentation">
$i18n{defaultBrowserSubheaderText}
</div>
<iron-icon class="section-heading-expand" icon="cr:expand-more"
role="presentation">
</iron-icon>
</a>
</div>
</template>
<template is="dom-if" if="[[!isCombined]]">
<div class="section-heading" role="text">
<div class="section-heading-text" role="presentation">
$i18n{defaultBrowserSubheaderText}
</div>
</div>
</template>
<ol id="panel1" class="section-steps" aria-labelledby="tab1">
<li>
<a is="action-link" on-tap="onOpenSettings">
$i18n{openSettingsText}
</a>
</li>
<template is="dom-if" if="[[!isAccelerated]]">
<li>
<div role="presentation">$i18nRaw{clickEdgeText}</div>
</li>
</template>
<li>
<div role="presentation">$i18nRaw{clickSelectChrome}</div>
</li>
<li>
<div role="presentation">$i18nRaw{clickSwitchAnywayText}</div>
<div class="screenshot-image" id="default-image"
role="presentation">
<div class="screenshot-overlay" id="switch-anyway-overlay">
<div aria-hidden="true">$i18n{switchAnywayLabel}</div>
</div>
</div>
</li>
</ol>
</div>
<template is="dom-if" if="[[isCombined]]">
<div class="section expandable">
<div role="heading" aria-level="2">
<a id="tab2" is="action-link" class="section-heading"
on-tap="onToggle" role="button" aria-controls="panel2"
aria-expanded="false">
<div class="section-heading-text" role="presentation">
$i18n{pinSubheaderText}
</div>
<iron-icon class="section-heading-expand" icon="cr:expand-more"
role="presentation">
</iron-icon>
</a>
</div>
<ol id="panel2" class="section-steps" aria-labelledby="tab2">
<li>$i18nRaw{rightClickText}</li>
<li>
<div role="presentation">$i18nRaw{pinInstructionText}</div>
<div class="screenshot-image" id="taskbar-image"
role="presentation">
<div class="screenshot-overlay" id="taskbar-overlay">
<div aria-hidden="true">$i18n{pinToTaskbarLabel}</div>
</div>
<div class="screenshot-overlay" id="icon-overlay">
</div>
</div>
</li>
</ol>
</div>
</template>
</div>
<paper-button class="button" on-tap="onContinue">
$i18n{continueText}
</paper-button>
</template>
<script src="/welcome_win10.js"></script>
</dom-module>
</head>
<body>
<welcome-win10></welcome-win10>
</body>
</html>