| <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> |