chrome/browser/resources/new_tab_page/customize_shortcuts.html

<style include="cr-icons">
  :host {
    line-height: 20px;
  }

  #options {
    display: flex;
  }

  .option {
    margin-inline-end: 9px;
    width: 268px;
  }

  .option-image {
    border: 1px solid var(--color-new-tab-page-dialog-border);
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    height: 176px;
    position: relative;
    width: 268px;
  }

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

  .selected .option-image {
    background-color: var(--color-new-tab-page-selected-background);
    border-color: var(--color-new-tab-page-dialog-border-selected);
  }

  .option-mini {
    background-color: var(--color-new-tab-page-dialog-background);
    border: 1px solid var(--color-new-tab-page-dialog-border);
    border-radius: 4px;
    box-sizing: border-box;
    height: 144px;
    position: absolute;
    right: 40px;
    top: 16px;
    width: 144px;
  }

  :host-context([dir='rtl']) .option-mini {
    left: 40px;
    right: unset;
  }

  .selected .option-mini {
    border-color: transparent;
    box-shadow: 0 1px 3px 0 rgba(var(--google-grey-800-rgb), .3),
        0 4px 8px 3px rgba(var(--google-grey-800-rgb), .15);
  }

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

  ntp-mini-page {
    --ntp-mini-page-shortcut-color: var(--google-grey-500);
  }

  .selected ntp-mini-page {
    --ntp-mini-page-shortcut-color:
        var(--color-new-tab-page-dialog-border-selected);
  }

  .option-icon {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    background: 96px 96px var(--color-new-tab-page-dialog-border);
    height: 96px;
    left: 16px;
    position: absolute;
    top: 48px;
    width: 96px;
  }

  #optionCustomLinks .option-icon {
    -webkit-mask-image: url(icons/account_circle.svg);
  }

  #optionMostVisited .option-icon {
    -webkit-mask-image: url(icons/generic_globe.svg);
  }

  :host-context([dir='rtl']) .option-icon {
    right: 16px;
  }

  .selected .option-icon {
    background-color: var(--color-new-tab-page-control-background-selected);
  }

  @media (prefers-color-scheme: dark) {
    .selected .option-icon {
      background-color: var(--color-new-tab-page-dialog-border-selected);
    }
  }

  .option-image .selected-circle {
    box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .16),
        0 1px 2px 1px rgba(0, 0, 0, .23);
    height: 22px;
    left: 209px;
    top: 9px;
    width: 22px;
  }

  :host-context([dir='rtl']) .option-image .selected-circle {
    left: 0;
    right: 209px;
  }

  .option-image .selected-check {
    left: initial;
    right: 32px;
    top: 6px;
  }

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

  .option-title {
    font-weight: bold;
    margin-bottom: 4px;
    margin-top: 12px;
  }

  .option-description {
    color: var(--color-new-tab-page-dialog-secondary-foreground);
  }

  .selected #hideDescription {
    color: var(--color-new-tab-page-dialog-border-selected);
  }

  #hide {
    align-items: center;
    border: 1px solid var(--color-new-tab-page-dialog-border);
    border-radius: 4px;
    box-sizing: border-box;
    display: flex;
    height: 64px;
    margin-top: 24px;
    max-width: 544px;
    width: 100%;
  }

  #hide.selected {
    background-color: var(--color-new-tab-page-selected-background);
    border-color: var(--color-new-tab-page-dialog-border-selected);
    color: var(--color-new-tab-page-dialog-border-selected);
  }

  #hideIcon {
    margin-inline-end: 20px;
    margin-inline-start: 24px;
  }

  .selected #hideIcon {
    background-color: var(--color-new-tab-page-dialog-border-selected);
  }

  #hideTitleContainer {
    flex-grow: 1;
  }

  #hideTitle {
    font-weight: bold;
  }

  cr-toggle {
    margin-inline-end: 20px;
  }

  .selected-circle {
    background: var(--color-new-tab-page--dialog-background) no-repeat center;
    border-radius: 50%;
    display: none;
    height: 22px;
    left: 66px;
    position: absolute;
    top: 46px;
    width: 22px;
  }

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

  .selected-check {
    background: url(icons/check_circle.svg) no-repeat center;
    background-size: 28px 28px;
    display: none;
    height: 28px;
    left: 63px;
    position: absolute;
    top: 43px;
    width: 28px;
  }

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

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

  @media (prefers-color-scheme: dark) {
    .selected-check {
      background: transparent;
    }
  }

  /* We use ::after without content to provide the masked check element. */
  @media (prefers-color-scheme: dark) {
    .selected-check::after {
      -webkit-mask-image: url(icons/check_circle.svg);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 28px;
      background-color: var(--google-blue-300);
      content: '';
      display: block;
      height: 28px;
      left: 0;
      position: absolute;
      top: 0;
      width: 28px;
    }
  }

  @media (forced-colors: active) {
    .option-icon {
      background-color: ButtonText;
    }

    .selected .option-icon {
      background-color: SelectedItem;
    }
  }
</style>
<div id="options">
  <div id="optionCustomLinks"
      class$="option [[getCustomLinksSelected_(customLinksEnabled_, hide_)]]">
    <cr-button id="optionCustomLinksButton" class="option-image" tabindex="0"
        aria-pressed$="[[getCustomLinksAriaPressed_(customLinksEnabled_,
            hide_)]]"
        title="$i18n{myShortcuts}" on-click="onCustomLinksClick_" noink>
      <div class="option-icon"></div>
      <div class="option-mini">
        <ntp-mini-page single-colored-logo></ntp-mini-page>
      </div>
      <div class="selected-circle"></div>
      <div class="selected-check"></div>
    </cr-button>
    <div class="option-title">$i18n{myShortcuts}</div>
    <div class="option-description">$i18n{shortcutsCurated}</div>
  </div>
  <div id="optionMostVisited"
      class$="option [[getMostVisitedSelected_(customLinksEnabled_, hide_)]]">
    <cr-button id="optionMostVisitedButton" class="option-image" tabindex="0"
        aria-pressed$="[[getMostVisitedAriaPressed_(customLinksEnabled_,
            hide_)]]"
        title="$i18n{mostVisited}" on-click="onMostVisitedClick_"
        on-keydown="onMostVistedKey" noink>
      <div class="option-icon"></div>
      <div class="option-mini">
        <ntp-mini-page single-colored-logo></ntp-mini-page>
      </div>
      <div class="selected-circle"></div>
      <div class="selected-check"></div>
    </cr-button>
    <div class="option-title">$i18n{mostVisited}</div>
    <div class="option-description">$i18n{shortcutsSuggested}</div>
  </div>
</div>
<div id="hide" class$="[[getHideClass_(hide_)]]">
  <div id="hideIcon" class="cr-icon icon-visibility-off"></div>
  <div id="hideTitleContainer">
    <div id="hideTitle">$i18n{hideShortcuts}</div>
    <div id="hideDescription" class="option-description">
      $i18n{hideShortcutsDesc}
    </div>
  </div>
  <cr-toggle id="hideToggle" title="$i18n{hideShortcuts}"
      checked="[[hide_]]" on-change="onHideChange_"></cr-toggle>
</div>