chrome/browser/resources/welcome/onboarding_welcome/ntp_background/nux_ntp_background.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="../navigation_behavior.html">
<link rel="import" href="../shared/i18n_setup.html">
<link rel="import" href="ntp_background_proxy.html">

<dom-module id="nux-ntp-background">
  <template>
    <style include="paper-button-style">
      :host {
        text-align: center;
      }

      .ntp-background-logo {
        content: -webkit-image-set(
            url(chrome://welcome/images/ntp_background_1x.png) 1x,
            url(chrome://welcome/images/ntp_background_2x.png) 2x);
        height: 39px;
        margin: auto;
        margin-bottom: 16px;
        width: 44px;
      }

      h1 {
        color: var(--google-grey-900);
        font-size: 1.5rem;
        font-weight: 500;
        margin: 0;
        margin-bottom: 46px;
        outline: none;
      }

      .ntp-backgrounds-grid {
        display: grid;
        grid-gap: 32px;
        grid-template-columns: repeat(3, 176px);
        grid-template-rows: repeat(2, 176px);
        width: 592px;
      }

      .ntp-background-grid-button {
        @apply --cr-card-elevation;
        align-items: stretch;
        background: var(--cr-card-background-color);
        border: 0;
        color: var(--cr-secondary-text-color);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 0;
        text-align: start;
        width: 100%;
      }

      /* Remove outline when button is focused using the mouse. */
      .ntp-background-grid-button:focus:not(.keyboard-focused) {
        outline: none;
      }

      .ntp-background-thumbnail {
        background-color: white;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        flex: 1;
      }

      .ntp-background-title {
        border-top: var(--cr-separator-line);
        font-size: 14px;
        height: 48px;
        line-height: 48px;
        overflow: hidden;
        padding: 0 12px;
        text-overflow: ellipsis;
      }

      .ntp-background-grid-button[active] .ntp-background-title {
        background: var(--google-blue-600);
        color: white;
      }

      .button-bar {
        display: flex;
        justify-content: space-between;
        margin-top: 56px;
      }

      iron-icon[icon='cr:chevron-right'] {
        height: 20px;
        margin-inline-end: -10px;
        margin-inline-start: 6px;
        width: 20px;
      }
    </style>
    <div class="ntp-background-logo"></div>
    <h1 tabindex="-1">$i18n{ntpBackgroundDescription}</h1>

    <div class="ntp-backgrounds-grid">
      <template is="dom-repeat" items="[[backgrounds_]]">
        <button
            active$="[[isSelectedBackground_(item, selectedBackground_)]]"
            aria-pressed$="[[getAriaPressedValue_(item, selectedBackground_)]]"
            class="ntp-background-grid-button"
            on-click="onBackgroundClick_"
            on-keyup="onBackgroundKeyUp_"
            on-pointerdown="onBackgroundPointerDown_">
          <div class="ntp-background-thumbnail"></div>
          <div class="ntp-background-title">[[item.title]]</div>
        </button>
      </template>
    </div>

    <div class="button-bar">
      <paper-button on-click="onSkipClicked_">
        $i18n{skip}
      </paper-button>
      <step-indicator model="[[indicatorModel]]"></step-indicator>
      <paper-button class="action-button" on-click="onNextClicked_">
        $i18n{next}
        <iron-icon icon="cr:chevron-right"></iron-icon>
      </paper-button>
    </div>
  </template>

  <script src="nux_ntp_background.js"></script>
</dom-module>