| <style> |
| :host { |
| color: var(--cr-primary-text-color); |
| } |
| |
| .left-illustration, |
| .right-illustration { |
| position: absolute; |
| top:0; |
| width: 20vw; |
| } |
| |
| .left-illustration { |
| content: url(images/left_illustration.svg); |
| left: 0; |
| } |
| |
| .right-illustration { |
| content: url(images/right_illustration.svg); |
| right: 0; |
| } |
| |
| .button-container { |
| bottom: 0; |
| display: flex; |
| position: absolute; |
| width: 100%; |
| } |
| |
| cr-button { |
| margin: 25px; |
| } |
| |
| .first-button { |
| margin-inline-end: auto; |
| } |
| |
| .second-button { |
| margin-inline-start: auto; |
| } |
| |
| .content-container { |
| align-items: center; |
| display: flex; |
| flex-direction: column; |
| margin: auto; |
| max-width: 472px; |
| text-align: center; |
| } |
| |
| .title { |
| font-weight: 400; |
| margin-top: 68px; |
| } |
| |
| .subtitle { |
| color: var(--cr-seconday-text-color); |
| font-size: 0.88rem; |
| line-height: 22px; |
| } |
| |
| .image-placeholder { |
| background-color: blue; |
| height: 70px; |
| width: 250px; |
| } |
| |
| .choice-list { |
| display: flex; |
| flex-direction: column; |
| gap: 1px; |
| } |
| |
| .choice { |
| align-items: center; |
| background-color: var(--google-grey-200); |
| display: flex; |
| flex-direction: row; |
| gap: 16px; |
| height: 24px; |
| padding: 16px 24px; |
| width: 424px; |
| } |
| |
| .choice:first-child { |
| border-top-left-radius: 24px; |
| border-top-right-radius: 24px; |
| } |
| |
| div.choice:last-of-type { |
| border-bottom-left-radius: 24px; |
| border-bottom-right-radius: 24px; |
| } |
| |
| .choice-icon { |
| background-color: green; |
| height: 24px; |
| width: 24px; |
| } |
| |
| .choice-text { |
| font-size: 0.88rem; |
| line-height: 20px; |
| } |
| |
| cr-checkbox { |
| margin-inline-start: auto; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| .left-illustration { |
| content: url(images/left_illustration_dark.svg); |
| } |
| |
| .right-illustration { |
| content: url(images/right_illustration_dark.svg); |
| } |
| } |
| </style> |
| |
| <img class="left-illustration" alt=""> |
| <img class="right-illustration" alt=""> |
| <div class="content-container"> |
| <h1 class="title">$i18n{title}</h1> |
| <div class="image-placeholder"></div> |
| <p class="subtitle">$i18n{subtitle}</p> |
| <div class="choice-list"> |
| <template is="dom-repeat" items="[[choiceList_]]"> |
| <div class="choice"> |
| <div class="choice-icon"></div> |
| <div class="choice-text">[[item.name]]</div> |
| <cr-checkbox></cr-checkbox> |
| </div> |
| </template> |
| </div> |
| </div> |
| <div class="button-container"> |
| <cr-button class="first-button">$i18n{firstButton}</cr-button> |
| <cr-button class="second-button action-button" disabled> |
| $i18n{secondButton}</cr-button> |
| </div> |