| <style include="profile-picker-shared"> |
| :host { |
| --avatar-icon-size: 74px; |
| --banner-img-height: 628px; |
| --banner-img-width: 250px; |
| } |
| |
| .banner { |
| height: var(--banner-img-height); |
| overflow: hidden; |
| position: absolute; |
| top: 0; |
| width: var(--banner-img-width); |
| z-index: -1; |
| } |
| |
| #leftBanner { |
| background: url(left_banner_image.svg); |
| left: 0; |
| } |
| |
| #rightBanner { |
| background: url(right_banner_image.svg); |
| right: 0; |
| } |
| |
| .title-container { |
| margin: 30px auto; |
| text-align: center; |
| } |
| |
| .profiles-container { |
| --grid-gutter: 24px; |
| --profile-item-height:178px; |
| --profile-item-width: 162px; |
| --scrollbar-width: 4px; |
| align-items: center; |
| display: grid; |
| grid-column-gap: var(--grid-gutter); |
| grid-row-gap: var(--grid-gutter); |
| grid-template-columns: repeat(auto-fit, var(--profile-item-width)); |
| justify-content: center; |
| margin: auto; |
| margin-inline-end: 140px; |
| margin-inline-start: 140px; |
| max-height: calc((var(--profile-item-height) + var(--grid-gutter)) * 2 + |
| 30px); |
| overflow-y: auto; |
| padding-inline-end: var(--scrollbar-width); |
| padding-inline-start: var(--scrollbar-width); |
| } |
| |
| .profiles-container::-webkit-scrollbar { |
| width: var(--scrollbar-width); |
| } |
| |
| /* Track */ |
| .profiles-container::-webkit-scrollbar-track { |
| border-radius: var(--scrollbar-width); |
| } |
| |
| /* Handle */ |
| .profiles-container::-webkit-scrollbar-thumb { |
| background: var(--google-grey-refresh-100); |
| border-radius: var(--scrollbar-width); |
| } |
| |
| .profile-item { |
| align-items: center; |
| border-radius: 12px; |
| display: flex; |
| flex-direction: column; |
| height: var(--profile-item-height); |
| justify-content: center; |
| width: var(--profile-item-width); |
| } |
| |
| #addProfile { |
| border: 1px dashed; |
| border-color: var(--google-grey-400); |
| } |
| |
| cr-icon-button[iron-icon='profiles:add'] { |
| --cr-icon-button-icon-size: var(--avatar-icon-size); |
| --cr-icon-button-size: 84px; |
| --cr-icon-button-fill-color: var(--google-grey-refresh-100); |
| --cr-icon-button-margin-end: 0; |
| --cr-icon-button-margin-start: 0; |
| --cr-icon-button-stroke-color: var(--google-grey-refresh-700); |
| } |
| |
| .footer { |
| bottom: 0; |
| display: flex; |
| margin-bottom: 40px; |
| position: absolute; |
| width: 100%; |
| } |
| |
| .footer > * { |
| background-color: rgba(255, 255, 255, .8); |
| } |
| |
| #browseAsGuestButton { |
| margin-inline-start: 40px; |
| } |
| |
| #browseAsGuestButton > iron-icon { |
| margin-inline-end: 8px; |
| } |
| |
| cr-checkbox { |
| --cr-checkbox-label-color: var(--google-grey-refresh-700); |
| --cr-checkbox-label-padding-start: 8px; |
| justify-content: flex-end; |
| margin-inline-end: 40px; |
| margin-inline-start: auto; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| /* TODO(msalama): Dark mode mocks not ready yet.*/ |
| .footer > * { |
| background-color: rgba(0, 0, 0, .5); |
| } |
| |
| cr-checkbox { |
| --cr-checkbox-label-color: var(--google-grey-refresh-500); |
| } |
| } |
| </style> |
| |
| <div id="leftBanner" class="banner"></div> |
| <div class="title-container"> |
| <img id="product-logo" on-click="onProductLogoTap_" |
| srcset="chrome://theme/current-channel-logo@1x 1x, |
| chrome://theme/current-channel-logo@2x 2x" |
| role="presentation"> |
| <h2>$i18n{mainViewTitle}</h2> |
| <h3>$i18n{mainViewSubtitle}</h3> |
| </div> |
| <div class="profiles-container"> |
| <template is="dom-repeat" |
| hidden="[[!profilesList_]]" items="[[profilesList_]]"> |
| <profile-card class="profile-item" profile-state="[[item]]"></profile-card> |
| </template> |
| <div id="addProfile" class="profile-item"> |
| <!-- TODO(msalama): Add title, aria-label once strings are ready--> |
| <cr-icon-button iron-icon="profiles:add" |
| on-click="onAddProfileClick_"> |
| </cr-icon-button> |
| </div> |
| </div> |
| <div id="rightBanner" class="banner"></div> |
| |
| <div class="footer"> |
| <cr-button id="browseAsGuestButton" on-click="onLaunchGuestProfileClick_"> |
| <iron-icon icon="profiles:account-circle"></iron-icon> |
| <div>$i18n{browseAsGuestButton}</div> |
| </cr-button> |
| <cr-checkbox checked="{{askOnStartup_}}" |
| on-change="onAskOnStartupChangedByUser_"> |
| $i18n{askOnStartupCheckboxText} |
| </cr-checkbox> |
| </div> |