blob: 3cf3204a657a1663ed26b10aff95ebe31ad8fc6f [file] [log] [blame]
<style include="profile-creation-shared">
#actionContainer {
align-items: center;
display: flex;
flex-direction: column;
}
#signinPromoBanner {
background-image: url(profile_creation_flow/images/banner_light_image.svg);
}
@media (prefers-color-scheme: dark) {
#signinPromoBanner {
background-image:
url(profile_creation_flow/images/banner_dark_image.svg);
}
}
#bannerContainer {
height: 266px;
position: relative;
width: 100%;
}
#notNowButton {
background: none;
border: none;
color: var(--cr-link-color);
cursor: pointer;
font-size: 1em;
font-weight: normal;
line-height: 20px;
margin-top: 18px;
}
/* The "not now" button is styled like a link, and uses FocusOutlineManager to
* only show outlines when focus was triggered by keyboard.
*/
:host-context(html:not(.focus-outline-visible)) #notNowButton {
outline: none;
}
#signInButton {
font-size: 1em;
font-weight: normal;
width: 208px;
}
.title-container {
margin: 104px auto;
margin-bottom: 48px;
text-align: center;
}
</style>
<div id="headerContainer"
style$="--theme-frame-color:[[profileThemeInfo.themeFrameColor]];
--theme-text-color:[[profileThemeInfo.themeFrameTextColor]];">
<cr-icon-button id="backButton" class="icon-arrow-back"
on-click="onClickBack_" aria-label="$i18n{backButtonLabel}"
disabled="[[loadSigninInProgess_]]">
</cr-icon-button>
<div id="signinPromoBanner" class="banner"></div>
<img class="avatar" alt="" src="[[profileThemeInfo.themeGenericAvatar]]">
</div>
<div class="title-container">
<h2>$i18n{profileTypeChoiceTitle}</h2>
<h3>$i18n{profileTypeChoiceSubtitle}</h3>
</div>
<div id="actionContainer">
<cr-button id="signInButton" class="action-button" on-click="onSignInClick_"
disabled="[[loadSigninInProgess_]]">
$i18n{signInButtonLabel}
</cr-button>
<button id="notNowButton" on-click="onNotNowClick_"
disabled="[[loadSigninInProgess_]]">
$i18n{notNowButtonLabel}
</button>
</div>