chrome/browser/resources/downloads/manager.html

<style include="cr-page-host-style cr-shared-style cr-hidden-style">
  :host {
    display: flex;
    flex: 1 0;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    z-index: 0;
  }

  @media (prefers-color-scheme: dark) {
    :host {
      color: var(--cr-secondary-text-color);
    }
  }

  #toolbar {
    z-index: 1;
  }

  :host([has-shadow_]) #drop-shadow {
    opacity: var(--cr-container-shadow-max-opacity);
  }

  downloads-item,
  #downloadsList {
    --downloads-card-margin: 24px;
    --downloads-card-width: 680px;
  }

  #downloadsList {
    min-width: calc(
      var(--downloads-card-width) + 2 * var(--downloads-card-margin));
  }

  #no-downloads,
  #downloadsList {
    flex: 1;
  }

  :host([loading]) #no-downloads,
  :host([loading]) #downloadsList {
    display: none;
  }

  #no-downloads {
    align-items: center;
    color: #6e6e6e;
    display: flex;
    font-size: 123.1%;
    font-weight: 500;
    justify-content: center;
    /* To avoid overlapping with the header, we need this min-height
     * until bug 596743 is fixed. */
    min-height: min-content;
  }

  @media (prefers-color-scheme: dark) {
    #no-downloads {
      color: var(--cr-secondary-text-color);
    }
  }

  #no-downloads .illustration {
    background: url(images/no_downloads.svg) no-repeat
        center center;
    background-size: contain;
    height: 144px;
    margin-bottom: 32px;
  }

  #mainContainer {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    overflow-y: overlay;
  }

  managed-footnote {
    border-top: none;
    /* margin-bottom is needed to compensate for the next element's 21px
     * margin at the top and 8px padding at the top. This leaves a 12px
     * padding between this element's content and the top of the next
     * element's text. */
    margin-bottom: calc(-21px - 8px);
    min-width: calc(
        var(--downloads-card-width) + 2 * var(--downloads-card-margin));
    padding-bottom: 12px;
    padding-top: 12px;
    /* The next element spills over this element. This ensures the link
     * is clickable. */
    z-index: 1;
  }
</style>

<downloads-toolbar id="toolbar" items="[[items_]]"
    spinner-active="{{spinnerActive_}}" role="none"
    on-search-changed="onSearchChanged_">
</downloads-toolbar>
<div id="drop-shadow" class="cr-container-shadow"></div>
<div id="mainContainer" on-scroll="onScroll_">
  <managed-footnote hidden="[[inSearchMode_]]"></managed-footnote>
  <iron-list id="downloadsList" items="[[items_]]"
      role="grid" aria-rowcount$="[[items_.length]]"
      hidden="[[!hasDownloads_]]" scroll-target="mainContainer"
      preserve-focus>
    <template>
      <downloads-item data="[[item]]" tabindex$="[[tabIndex]]"
          iron-list-tab-index="[[tabIndex]]" last-focused="{{lastFocused_}}"
          list-blurred="{{listBlurred_}}" focus-row-index="[[index]]">
      </downloads-item>
    </template>
  </iron-list>
  <div id="no-downloads" hidden="[[hasDownloads_]]">
    <div>
      <div class="illustration"></div>
      <span>[[noDownloadsText_(inSearchMode_)]]</span>
    </div>
  </div>
</div>
<cr-toast-manager duration="0">
  <cr-button aria-label="$i18n{undoDescription}" on-click="onUndoClick_">
    $i18n{undo}
  </cr-button>
</cr-toast-manager>