chrome/browser/resources/new_tab_page/app.html

<style include="cr-shared-style">
  :host {
    --ntp-theme-shortcut-background-color: rgb(229, 231, 232);
    --ntp-theme-text-color: var(--google-grey-800);
    --ntp-theme-text-shadow: none;
    --ntp-one-google-bar-height: 56px;
    --ntp-search-box-width: 337px;
  }

  @media (min-width: 560px) {
    :host {
      --ntp-search-box-width: 449px;
    }
  }

  @media (min-width: 672px) {
    :host {
      --ntp-search-box-width: 561px;
    }
  }

  @media (prefers-color-scheme: dark) {
    :host {
      --ntp-theme-shortcut-background-color: var(--google-grey-refresh-100);
      --ntp-theme-text-color: white;
    }
  }

  :host([show-background-image_]) {
    --ntp-theme-text-shadow: 0 0 16px rgba(0, 0, 0, .3);
  }

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

  #oneGoogleBarOverlayBackdrop {
    background: rgba(0, 0, 0, .6);
    display: none;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }

  #oneGoogleBarOverlayBackdrop[show] {
    display: block;
  }

  #content {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--ntp-one-google-bar-height));
    position: relative;
  }

  :host([iframe-one-google-bar-enabled_]) #content {
    padding-top: var(--ntp-one-google-bar-height);
  }

  #logo {
    margin-bottom: 38px;
    z-index: 1;  /* Needed so it layers on top of OneGoogleBar. */
  }

  ntp-fakebox,
  ntp-realbox {
    margin-bottom: 32px;
  }

  ntp-fakebox,
  ntp-realbox,
  ntp-module-wrapper {
    flex-shrink: 0;
    width: var(--ntp-search-box-width);
  }

  :host([modules-enabled_]) ntp-middle-slot-promo {
    width: var(--ntp-search-box-width);
  }

  :host(:not([modules-enabled_])) ntp-middle-slot-promo {
    bottom: 16px;
    position: fixed;
  }

  ntp-realbox {
    visibility: hidden;
  }

  ntp-realbox[shown] {
    visibility: visible;
  }

  ntp-most-visited[dark] {
    --icon-button-color-active: var(--google-grey-refresh-300);
    --icon-button-color: white;
    --tile-hover-color: rgba(255, 255, 255, .1);
  }

  ntp-middle-slot-promo:not([hidden]) + ntp-module-wrapper,
  ntp-module-wrapper + ntp-module-wrapper {
    margin-top: 16px;
  }

  :host(:not([promo-and-modules-loaded_])) ntp-middle-slot-promo,
  :host(:not([promo-and-modules-loaded_])) ntp-module-wrapper,
  :host(:not([modules-visible_])) ntp-module-wrapper {
    display: none;
  }

  #customizeButtonSpacer {
    flex-grow: 1;
  }

  #customizeButtonContainer {
    align-self: flex-end;
    background-color: var(--ntp-background-override-color);
    border-radius: calc(.5 * var(--cr-button-height));
    bottom: 16px;
    margin-inline-end: 16px;
    position: sticky;
  }

  :host([show-background-image_]) #customizeButtonContainer {
    background-color: transparent;
  }

  :host([show-background-image_]) #customizeButtonContainer:hover {
    background-color: rgba(255, 255, 255, .1);
  }

  #customizeButton {
    border: none;
    border-radius: calc(.5 * var(--cr-button-height));
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .23);
    font-weight: 400;
    min-width: 32px;
  }

  :host([show-background-image_]) #customizeButton {
    box-shadow: none;
    padding: 0;
  }

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

  #customizeIcon {
    -webkit-mask-image: url(icons/icon_pencil.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    background-color: var(--text-color);
    height: 16px;
    margin-inline-end: 8px;
    width: 16px;
  }

  :host([show-background-image_]) #customizeIcon {
    background-color: white;
    margin: 0;
  }

  @media (max-width: 550px) {
    #customizeButton {
      padding: 0;
    }

    #customizeIcon {
      margin: 0;
    }

    #customizeText {
      display: none;
    }
  }

  #themeAttribution {
    align-self: flex-start;
    bottom: 16px;
    color: var(--cr-secondary-text-color);
    margin-inline-start: 16px;
    position: fixed;
  }

  #backgroundImageAttribution {
    border-radius: 8px;
    bottom: 16px;
    color: var(--ntp-theme-text-color);
    line-height: 20px;
    max-width: 50vw;
    padding: 8px;
    position: fixed;
    text-shadow: var(--ntp-theme-text-shadow);
  }

  :host-context([dir='ltr']) #backgroundImageAttribution {
    left: 16px;
  }

  :host-context([dir='rtl']) #backgroundImageAttribution {
    right: 16px;
  }

  #backgroundImageAttribution:hover {
    background: rgba(var(--google-grey-900-rgb), .1);
  }

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

  #linkIcon {
    -webkit-mask-image: url(icons/link.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    background-color: var(--ntp-theme-text-color);
    height: 16px;
    margin-inline-end: 8px;
    width: 16px;
  }

  #backgroundImageAttribution1,
  #backgroundImageAttribution2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #backgroundImageAttribution1 {
    font-size: .875rem;
  }

  #backgroundImageAttribution2 {
    font-size: .75rem;
  }

  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .fadein {
    animation: 100ms ease-in-out fadein;
  }

  svg {
    position: fixed;
  }
</style>
<div id="content"
    style="--ntp-theme-text-color: [[rgbaOrInherit_(theme_.shortcutTextColor)]];
        --ntp-theme-shortcut-background-color:
              [[rgbaOrInherit_(theme_.shortcutBackgroundColor)]];
        --ntp-logo-color: [[rgbaOrInherit_(logoColor_)]];">
  <template is="dom-if" if="[[showIframedOneGoogleBar_]]">
    <ntp-iframe id="oneGoogleBar" src="[[oneGoogleBarIframePath_]]"
        hidden$="[[!oneGoogleBarLoaded_]]">
    </ntp-iframe>
  </template>
  <ntp-logo id="logo" doodle-allowed$="[[doodleAllowed_]]"
      single-colored$="[[singleColoredLogo_]]" dark="[[theme_.isDark]]"
      background-color="[[backgroundColor_]]">
  </ntp-logo>
  <ntp-fakebox id="fakebox" on-open-voice-search="onOpenVoiceSearch_"
      hidden$="[[realboxEnabled_]]">
  </ntp-fakebox>
  <ntp-realbox id="realbox" on-open-voice-search="onOpenVoiceSearch_"
      theme="[[theme_.searchBox]]" shown$="[[realboxShown_]]"
      hidden$="[[!realboxEnabled_]]">
  </ntp-realbox>
  <ntp-most-visited id="mostVisited" dark$="[[theme_.isDark]]"
      use-white-add-icon$="[[theme_.shortcutUseWhiteAddIcon]]"
      use-title-pill$="[[theme_.shortcutUseTitlePill]]">
  </ntp-most-visited>
  <dom-if if="[[lazyRender_]]" on-dom-change="onLazyRendered_">
    <template>
      <ntp-middle-slot-promo
          on-ntp-middle-slot-promo-loaded="onMiddleSlotPromoLoaded_" hidden>
      </ntp-middle-slot-promo>
      <template is="dom-repeat" items="[[moduleDescriptors_]]" id="modules"
          on-dom-change="onModulesLoaded_">
        <ntp-module-wrapper descriptor="[[item]]"
            on-dismiss-module="onDismissModule_">
        </ntp-module-wrapper>
      </template>
      <a id="backgroundImageAttribution"
          href="[[backgroundImageAttributionUrl_]]"
          hidden="[[!backgroundImageAttribution1_]]">
        <div id="backgroundImageAttribution1Container">
          <div id="linkIcon"></div>
          <div id="backgroundImageAttribution1">
            [[backgroundImageAttribution1_]]
          </div>
        </div>
        <div id="backgroundImageAttribution2"
            hidden="[[!backgroundImageAttribution2_]]">
          [[backgroundImageAttribution2_]]
        </div>
      </a>
      <div id="customizeButtonSpacer"></div>
      <!-- cr-button has a transparent background. This leads to incorrect
           results when a custom background is set. Therefore, wrap customize
           button in container to enfore solid background color. -->
      <div id="customizeButtonContainer">
        <cr-button id="customizeButton" on-click="onCustomizeClick_"
            title="$i18n{customizeThisPage}">
          <div id="customizeIcon"></div>
          <div id="customizeText" hidden$="[[showBackgroundImage_]]">
            $i18n{customizeButton}
          </div>
        </cr-button>
      </div>
      <div id="themeAttribution"
          hidden$="[[!theme_.backgroundImage.attributionUrl]]">
        <div>$i18n{themeCreatedBy}</div>
        <img src="[[theme_.backgroundImage.attributionUrl.url]]"><img>
      </div>
    </template>
  </dom-if>
</div>
<dom-if if="[[showVoiceSearchOverlay_]]" restamp>
  <template>
    <ntp-voice-search-overlay on-close="onVoiceSearchOverlayClose_">
    </ntp-voice-search-overlay>
  </template>
</dom-if>
<dom-if if="[[showCustomizeDialog_]]" restamp>
  <template>
    <ntp-customize-dialog on-close="onCustomizeDialogClose_"
        theme="[[theme_]]"
        background-selection="{{backgroundSelection_}}">
    </ntp-customize-dialog>
  </template>
</dom-if>
<dom-if if="[[lazyRender_]]" restamp>
  <template>
    <cr-toast id="dismissModuleToast" duration="10000">
      <div id="dismissModuleToastMessage">[[dismissModuleToastMessage_]]</div>
      <cr-button id="undoDismissModuleButton"
          aria-label="$i18n{undoDescription}"
          on-click="onUndoDismissModuleButtonClick_">
        $i18n{undo}
      </cr-button>
    </cr-toast>
  </template>
</dom-if>
<div id="oneGoogleBarOverlayBackdrop"></div>
<svg>
  <defs>
    <clipPath id="oneGoogleBarClipPath"></clipPath>
  </defs>
</svg>