chromium/ash/webui/common/resources/cr_elements/cr_dialog/cr_dialog.html

<style include="cr-hidden-style cr-icons">
  dialog {
    --cr-dialog-background-color: var(--cros-sys-dialog_container);
    --cr-dialog-border-radius: 20px;
    --cr-dialog-title-font: var(--cros-display-7-font);
    --scroll-border-color: #e0e0e0;  /* --paper-grey-300 */
    --scroll-border: 1px solid var(--scroll-border-color);

    background-color: var(--cr-dialog-background-color);
    border: 0;
    border-radius: var(--cr-dialog-border-radius);
    bottom: 50%;
    box-shadow: var(--cros-sys-app-elevation-3-shadow);
    color: inherit;
    max-height: initial;
    max-width: initial;
    overflow-y: hidden;
    padding: 0;
    position: absolute;
    top: 50%;
    width: var(--cr-dialog-width, 512px);
  }

  @media (prefers-color-scheme: dark) {
    dialog {
      --scroll-border-color: var(--google-grey-700);
    }
  }

  @media (forced-colors: active) {
    dialog {
      /* Use border instead of box-shadow (which does not work) in Windows
         HCM. */
      border: var(--cr-border-hcm);
    }
  }

  dialog[open] #content-wrapper {
    /* Keep max-height within viewport, and flex content accordingly. */
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    overflow: auto;
  }

  /* When needing to flex, force .body-container alone to shrink. */
  .top-container,
  :host ::slotted([slot=button-container]),
  :host ::slotted([slot=footer]) {
    flex-shrink: 0;
  }

  dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
  }

  :host ::slotted([slot=body]) {
    color: var(--cr-secondary-text-color);
    padding: 0 var(--cr-dialog-body-padding-horizontal, 20px);
  }

  :host ::slotted([slot=title]) {
    color: var(--cr-primary-text-color);
    flex: 1;
    font: var(--cr-dialog-title-font);
    padding-bottom: var(--cr-dialog-title-slot-padding-bottom, 16px);
    padding-inline-end:  var(--cr-dialog-title-slot-padding-end, 20px);
    padding-inline-start: var(--cr-dialog-title-slot-padding-start, 20px);
    padding-top: var(--cr-dialog-title-slot-padding-top, 20px);
  }

  /* Note that if the padding is non-uniform and the button-container
   * border is visible, then the buttons will appear off-center. */
  :host ::slotted([slot=button-container]) {
    display: flex;
    justify-content: flex-end;
    padding-bottom: var(--cr-dialog-button-container-padding-bottom, 16px);
    padding-inline-end: var(--cr-dialog-button-container-padding-horizontal, 16px);
    padding-inline-start: var(--cr-dialog-button-container-padding-horizontal, 16px);
    padding-top: var(--cr-dialog-button-container-padding-top, 16px);
  }

  :host ::slotted([slot=footer]) {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-top: 1px solid #dbdbdb;
    margin: 0;
    padding: 16px 20px;
  }

  :host([hide-backdrop]) dialog::backdrop {
    opacity: 0;
  }

  @media (prefers-color-scheme: dark) {
    :host ::slotted([slot=footer]) {
      border-top-color: var(--cr-separator-color);
    }
  }

  .body-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 1.375rem; /* Minimum reasonably usable height. */
    overflow: auto;
  }

  :host {
    --transparent-border: 1px solid transparent;
  }

  /* Cr Dialog uses borders instead of box-shadows. */
  #cr-container-shadow-top {
    border-bottom: var(--cr-dialog-body-border-top,
        var(--transparent-border));
  }

  #cr-container-shadow-bottom {
    border-bottom: var(--cr-dialog-body-border-bottom,
        var(--transparent-border));
  }

  #cr-container-shadow-top.has-shadow,
  #cr-container-shadow-bottom.has-shadow {
    border-bottom: var(--scroll-border);
  }

  .top-container {
    align-items: flex-start;
    display: flex;
    min-height: var(--cr-dialog-top-container-min-height, 31px);
  }

  .title-container {
    display: flex;
    flex: 1;
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    outline: none;
  }

  #close {
    align-self: flex-start;
    margin-inline-end: 4px;
    margin-top: 4px;
  }
</style>
<dialog id="dialog" on-close="onNativeDialogClose_"
    on-cancel="onNativeDialogCancel_" part="dialog"
    aria-labelledby="title" aria-description$="[[ariaDescriptionText]]">
<!-- This wrapper is necessary, such that the "pulse" animation is not
    erroneously played when the user clicks on the outer-most scrollbar. -->
  <div id="content-wrapper" part="wrapper">
    <div class="top-container">
      <h2 id="title" class="title-container" tabindex="-1">
        <slot name="title"></slot>
      </h2>
      <cr-icon-button id="close" class="icon-clear"
          hidden$="[[!showCloseButton]]" aria-label$="[[closeText]]"
          on-click="cancel" on-keypress="onCloseKeypress_">
      </cr-icon-button>
    </div>
    <slot name="header"></slot>
    <div class="body-container" id="container" show-bottom-shadow
        part="body-container">
      <slot name="body"></slot>
    </div>
    <slot name="button-container"></slot>
    <slot name="footer"></slot>
  </div>
</dialog>