chrome/browser/resources/new_tab_page/customize_backgrounds.html

<style include="cr-hidden-style">
  :host {
    display: flex;
  }

  #container {
    padding: 4px;
  }

  cr-grid {
    --cr-grid-gap: 8px;
  }

  .tile {
    cursor: pointer;
    outline-width: 0;
  }

  ntp-iframe {
    pointer-events: none;
  }

  :host-context(.focus-outline-visible) .tile:focus {
    box-shadow: var(--ntp-focus-shadow);
  }

  .image {
    border-radius: 4px;
    display: block;
    height: 176px;
    width: 176px;
  }

  .label {
    color: var(--color-new-tab-page-dialog-foreground);
    margin-bottom: 4px;
    margin-top: 12px;
    min-height: 30px;
  }

  .selected {
    background-color: var(--color-new-tab-page-selected-background);
    border-radius: 4px;
    position: relative;
  }

  .selected .image,
  .selected #uploadFromDevice {
    box-shadow: 0 1px 3px 0 rgba(var(--google-grey-800-rgb), .3),
        0 4px 8px 3px rgba(var(--google-grey-800-rgb), .15);
  }

  .selected .image {
    transform: scale(.8);
  }

  .selected-circle {
    background-color: var(--color-new-tab-page-dialog-background);
    border-radius: 50%;
    box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .16),
        0 1px 2px 1px rgba(0, 0, 0, .23);
    display: none;
    height: 22px;
    left: initial;
    position: absolute;
    right: 10px;
    top: 8px;
    width: 22px;
  }

  :host-context([dir=rtl]) .selected-circle {
    left: 10px;
    right: initial;
  }

  .selected-check {
    -webkit-mask-image: url(icons/check_circle.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 28px;
    background-color: var(--color-new-tab-page-dialog-border-selected);
    display: none;
    height: 28px;
    left: initial;
    position: absolute;
    right: 7px;
    top: 5px;
    width: 28px;
  }

  :host-context([dir=rtl]) .selected-check {
    left: 7px;
    right: initial;
  }

  .selected :-webkit-any(.selected-circle, .selected-check) {
    display: block;
  }

  #noBackground .image,
  #uploadFromDevice .image {
    background: var(--color-new-tab-page-dialog-background);
    border: 1px solid var(--color-new-tab-page-dialog-border);
  }

  #uploadFromDevice {
    position: relative;
  }

  #uploadFromDeviceImage {
    position: absolute;
    top: 0;
    width: 100%;
  }

  #uploadFromDeviceImage .label {
    text-align: center;
  }

  #uploadIcon {
    -webkit-mask-image: url(icons/upload.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    background-color: var(--google-grey-700);
    height: 32px;
    margin: 61px auto 8px;
    width: 32px;
  }

  #backgroundsDisabled {
    align-items: center;
    align-self: center;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  #backgroundsDisabledIcon {
    -webkit-mask-image: url(chrome://resources/images/business.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    background-color: var(--color-new-tab-page-dialog-foreground);
    height: 48px;
    margin: auto;
    width: 48px;
  }

  #backgroundsDisabledTitle {
    margin-top: 10px;
    text-align: center;
    width: 50%;
  }

  @media (prefers-color-scheme: dark) {
    .selected .image,
    .selected #uploadFromDevice {
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3),
          0 4px 8px 3px rgba(0, 0, 0, .15);
    }

    #uploadIcon {
      background-color: var(--google-grey-500);
    }
  }

  @media (forced-colors: active) {
    :host-context(.focus-outline-visible) .tile:focus {
      outline: var(--cr-focus-outline-hcm);
    }

    #backgroundsDisabledIcon,
    #uploadIcon,
    .selected-check {
      background-color: ButtonText;
    }

    .selected {
      background-color: SelectedItem;
    }
  }
</style>
<div id="backgroundsDisabled" hidden$="[[!customBackgroundDisabledByPolicy_]]">
  <div id="backgroundsDisabledIcon"></div>
  <div id="backgroundsDisabledTitle">$i18n{customBackgroundDisabled}</div>
</div>
<cr-grid id="collections" columns="3" hidden="[[!showBackgroundSelection_]]">
  <div id="uploadFromDevice" class="tile" role="button"
      on-click="onUploadFromDeviceClick_" tabindex="0">
    <div class$="[[getCustomBackgroundClass_(theme, backgroundSelection)]]">
      <div class="image">
      </div>
      <div id="uploadFromDeviceImage">
        <div id="uploadIcon"></div>
        <div class="label">$i18n{uploadFromDevice}</div>
      </div>
      <div class="selected-circle"></div>
      <div class="selected-check"></div>
    </div>
    <div class="label"></div>
  </div>
  <div id="noBackground" class="tile" role="button" on-click="onDefaultClick_"
       tabindex="0">
    <div class$="[[getNoBackgroundClass_(theme, backgroundSelection)]]">
      <div class="image">
        <ntp-mini-page></ntp-mini-page>
      </div>
      <div class="selected-circle"></div>
      <div class="selected-check"></div>
    </div>
    <div class="label">$i18n{noBackground}</div>
  </div>
  <dom-repeat id="collectionsRepeat" items="[[collections_]]">
    <template>
      <div class="tile" tabindex="0" title="[[item.label]]" role="button"
          on-click="onCollectionClick_">
        <ntp-iframe class="image"
            src="chrome-untrusted://new-tab-page/background_image?[[item.previewImageUrl.url]]">
        </ntp-iframe>
        <div class="label">[[item.label]]</div>
      </div>
    </template>
  </dom-repeat>
</cr-grid>
<cr-grid id="images" columns="3" hidden="[[!selectedCollection]]">
  <dom-repeat id="imagesRepeat" items="[[images_]]">
    <template>
      <div
          class$="tile
              [[getImageSelectedClass_(index, theme, backgroundSelection)]]"
          tabindex="0" title="[[item.attribution1]]" role="button"
          on-click="onImageClick_">
        <ntp-iframe class="image"
            src="chrome-untrusted://new-tab-page/background_image?[[item.previewImageUrl.url]]">
        </ntp-iframe>
        <div class="selected-circle"></div>
        <div class="selected-check"></div>
      </div>
    </template>
  </dom-repeat>
</cr-grid>