chrome/browser/resources/chromeos/cloud_upload/file_handler_page.html

<style>
  :host {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 475px;
    width: 512px;
  }

  .title {
    color: var(--cros-text-color-primary);
    font: var(--cros-headline-1-font);
    padding-block-end: 8px;
    padding-block-start: 24px;
    padding-inline: 24px;
  }

  .description {
    color: var(--cros-text-color-secondary);
    font: var(--cros-body-2-font);
    padding-block-end: 18px;
    padding-inline: 24px;
  }

  #content {
    border-top: 1px solid transparent;
    flex-grow: 1;
    overflow: scroll;
    padding-inline: 24px;
  }

  #content.separator-top {
    border-top: 1px solid var(--cros-separator-color);
  }

  #content.fade-bottom::after {
    background: linear-gradient(transparent 0,
                                var(--cros-bg-color) 100%);
    bottom: 88px;  /* button container + padding */
    content: '';
    height: 20px;
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
  }

  @media (prefers-color-scheme: dark) {
    #content.fade-bottom::after {
      background: linear-gradient(transparent 0,
                                  var(--cros-bg-color-elevation-3) 100%);
    }
  }

  #button-container {
    display: flex;
    justify-content: flex-end;
    padding-block-end: 24px;
    padding-block-start: 32px;
    padding-inline: 24px;
  }
</style>

<!-- TODO(b:251046594): Use localized strings -->
<div class="title">
  Choose an application to open “<span id="file-name"></span>”
</div>
<div class="description">
  Choose how you'd like to open files like this. You can always change this
  later by right-clicking on a file.
</div>
<div id="content"></div>
<div id="button-container">
  <cr-button class="cancel-button">Cancel</cr-button>
  <cr-button class="action-button">Open</cr-button>
</div>