chrome/browser/resources/new_tab_page/customize_dialog.html

<style include="cr-hidden-style cr-icons">
  cr-dialog::part(dialog) {
    height: 100%;
    max-height: 520px;
    min-width: 800px;
  }

  cr-dialog::part(wrapper) {
    height: 100%;
  }

  cr-dialog::part(body-container) {
    flex-grow: 1;
  }

  div[slot=title] {
    align-items: center;
    color: var(--cr-primary-text-color);
    display: flex;
    flex-direction: row;
    height: 64px;
    margin-top: 16px;
    padding: 0;
  }

  div[slot=body] {
    color: var(--cr-primary-text-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
  }

  #bodyContainer {
    display: flex;
    flex-direction: row;
    overflow: hidden;
  }

  div[slot=button-container] {
    padding-top: 16px;
  }

  #leftTitleSpacer,
  #menu {
    width: 218px;
  }

  #title {
    line-height: 1.5;
    margin-bottom: -2px;
    padding-inline-end: 24px;
    user-select: none;
  }

  /* We pad the pages to allow content to overflow horizontally. We can't use
   * overflow-x: visible since that will be ignored if overflow-y: auto. */
  #title,
  #pages {
    flex-grow: 1;
    padding-inline-start: 14px;
  }

  #menu,
  #pages {
    height: 100%;
    overflow: auto;
  }

  #pages > iron-pages {
    /* Margin is for focus outline. */
    margin: 2px;
  }

  div[scroll-border] {
    border-bottom: 1px solid transparent;
  }

  div[scroll-border][show-1],
  div[scroll-border][show-2] {
    border-bottom-color: var(--ntp-border-color);
  }

  #menu {
    display: flex;
    flex-direction: column;
  }

  #menuSelector {
    margin-bottom: 2px;
    margin-top: 2px;
  }

  .menu-item {
    align-items: center;
    border-radius: 0 16px 16px 0;
    color: var(--cr-primary-text-color);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    font-size: 14px;
    height: 32px;
    outline: none;
    width: 192px;
  }

  .menu-item + .menu-item {
    margin-top: 16px;
  }

  :host-context([dir=rtl]) .menu-item {
    border-radius: 16px 0 0 16px;
  }

  .menu-item:hover {
    background-color: var(--ntp-hover-background-color);
  }

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

  .menu-item:active {
    background-color: var(--ntp-active-background-color);
  }

  .menu-item[selected] {
    background-color: var(--ntp-selected-background-color);
    color: var(--ntp-selected-primary-text-color);
  }

  .menu-item-icon {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    background-color: var(--cr-primary-text-color);
    height: 20px;
    margin-inline-end: 16px;
    margin-inline-start: 24px;
    width: 20px;
  }

  .menu-item[selected] .menu-item-icon {
    background-color: var(--ntp-selected-primary-text-color);
  }

  #backgroundsIcon {
    -webkit-mask-image: url(icons/backgrounds.svg);
  }

  #shortcutsIcon {
    -webkit-mask-image: url(icons/link.svg);
  }

  #modulesIcon {
    -webkit-mask-image: url(icons/cards.svg);
  }

  #themesIcon {
    -webkit-mask-image: url(icons/colors.svg);
  }

  #backButton {
    --cr-icon-button-fill-color: var(--cr-primary-text-color);
    margin-inline-end: 4px;
    /* So that the arrow aligns with the grid. */
    margin-inline-start: -12px;
  }

  #titleNavigation {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

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

  #collectionTitle {
    flex-grow: 1;
  }
</style>
<cr-dialog id="dialog" on-cancel="onCancel_" show-on-attach>
  <div slot="title">
    <div id="leftTitleSpacer"></div>
    <div id="title">
      <div id="titleText" hidden="[[showTitleNavigation_]]">
        [[i18n('customizeThisPage')]]
      </div>
      <div id="titleNavigation" hidden="[[!showTitleNavigation_]]">
        <cr-icon-button id="backButton" class="icon-arrow-back"
            on-click="onBackClick_" title="[[i18n('backButton')]]">
        </cr-icon-button>
        <div id="collectionTitle">[[selectedCollection_.label]]</div>
        <cr-toggle id="refreshToggle" checked="[[isRefreshToggleChecked_]]"
            on-change="onBackgroundDailyRefreshToggleChange_">
        </cr-toggle>
        [[i18n('refreshDaily')]]
      </div>
    </div>
  </div>
  <div slot="body">
    <div id="topPageScrollBorder" scroll-border></div>
    <div id="bodyContainer">
      <div id="menu">
        <iron-selector id="menuSelector" selected-attribute="selected"
            attr-for-selected="page-name" selected="{{selectedPage}}"
            on-keydown="onMenuItemKeyDown_" fallback-selection="backgrounds">
          <div class="menu-item" page-name="backgrounds" tabindex="0">
            <div id="backgroundsIcon" class="menu-item-icon"></div>
            [[i18n('backgroundsMenuItem')]]
          </div>
          <div class="menu-item" page-name="shortcuts" tabindex="0"
              hidden$="[[!shortcutsEnabled_]]">
            <div id="shortcutsIcon" class="menu-item-icon"></div>
            [[i18n('shortcutsMenuItem')]]
          </div>
          <div class="menu-item" page-name="modules" tabindex="0"
              hidden$="[[!modulesEnabled_]]">
            <div id="modulesIcon" class="menu-item-icon"></div>
            [[i18n('modulesMenuItem')]]
          </div>
          <div class="menu-item" page-name="themes" tabindex="0">
            <div id="themesIcon" class="menu-item-icon"></div>
            [[i18n('themesMenuItem')]]
          </div>
        </iron-selector>
      </div>
      <div id="pages">
        <iron-pages selected="[[selectedPage]]" attr-for-selected="page-name">
          <ntp-customize-backgrounds id="backgrounds" page-name="backgrounds"
              selected-collection="{{selectedCollection_}}" theme="[[theme]]"
              background-selection="{{backgroundSelection}}">
          </ntp-customize-backgrounds>
          <ntp-customize-shortcuts page-name="shortcuts">
          </ntp-customize-shortcuts>
          <ntp-customize-modules page-name="modules"
              hidden$="[[!modulesEnabled_]]">
          </ntp-customize-modules>
          <cr-customize-themes id="customizeThemes" page-name="themes">
          </cr-customize-themes>
        </iron-pages>
      </div>
    </div>
    <div id="bottomPageScrollBorder" scroll-border></div>
  </div>
  <div slot="button-container">
    <cr-button class="cancel-button" on-click="onCancelClick_">
      [[i18n('cancelButton')]]
    </cr-button>
    <cr-button class="action-button" on-click="onDoneClick_">
      [[i18n('doneButton')]]
    </cr-button>
  </div>
</cr-dialog>