chrome/browser/resources/signin/dice_web_signin_intercept/dice_web_signin_intercept_app.html

<style include="signin-dialog-shared">
  #interceptDialog {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #header {
    background-color: var(--header-background-color);
    color: var(--header-text-color);
    margin-bottom: 16px;
    min-height: 136px;
    position: relative;
  }

  #headerText {
    font-size: 15px;
    font-weight: bold;
    line-height: 18px;
    margin: 16px auto 9px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #avatar-container {
    --avatar-image-width: 60px;
    --avatar-border: 2px;
    --avatar-size: calc(var(--avatar-image-width) + 2 * var(--avatar-border));
    height: var(--avatar-size);
    left: calc(50% - var(--avatar-size)/2);
    position: absolute;
    width: var(--avatar-size);
  }

  #avatar {
    /** The user avatar may be transparent, add a background */
    background-color: var(--md-background-color);
    border: var(--avatar-border) solid var(--md-background-color);
    border-radius: 50%;
    height: var(--avatar-image-width);
    top: 43px;
    width: var(--avatar-image-width);
  }

  .work-badge {
    --badge-width: 20px;
    --badge-offset: -4px;
    background-color: var(--signin-work-badge-background-color);
    border: 2px solid var(--header-background-color);
    border-radius: 50%;
    bottom: var(--badge-offset);
    height: var(--badge-width);
    position: absolute;
    right: var(--badge-offset);
    width: var(--badge-width);
  }

  .work-badge > iron-icon {
    --work-icon-size: 15px;
    bottom: 0;
    color: var(--signin-work-badge-foreground-color);
    height: var(--work-icon-size);
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: var(--work-icon-size);
  }

  #body {
    color: var(--cr-secondary-text-color);
    flex-grow: 1;
    font-size: 13px;
    line-height: 20px;
    margin: 0 16px;
  }

  #title {
    color: var(--cr-primary-text-color);
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    margin: 0 0 8px;
  }

  #contents {
    overflow-wrap: break-word;  /** For very long names and emails */
  }

  #actionRow {
    display: flex;
    justify-content: flex-end;
    padding: 0 16px 16px;
  }

  .action-container {
    padding: 0 0 0 8px;
  }

  paper-spinner-lite {
    margin: auto 0;
  }

  cr-button {
    font-size: 12px;
  }

  #interceptDialog [slot=footer] {
        background: var(--paper-grey-50);
        border-top: none;
        padding: 0;
      }

      @media (prefers-color-scheme: dark) {
        #interceptDialog [slot=footer] {
          background: rgb(50, 54, 57);  /* Custom color from Namrata. */
        }
      }

      .divider {
        border-top: var(--cr-separator-line);
      }

      #footer-description {
        color: var(--cr-secondary-text-color);
        padding: 16px;
        text-align: center;
      }

</style>

<div role="dialog" id="interceptDialog" aria-labelledby="title"
     aria-describedby="contents">
  <div id="header">
    <div id="headerText">[[interceptionParameters_.headerText]]</div>
    <div id="avatar-container">
      <img id="avatar" alt=""
          src="[[interceptionParameters_.interceptedAccount.pictureUrl]]">
      <div class="work-badge" id="badge"
          hidden="[[!interceptionParameters_.interceptedAccount.isManaged]]">
        <iron-icon class="icon" icon="cr:domain"></iron-icon>
      </div>
    </div>
  </div>

  <div id="body">
    <div id="title">[[interceptionParameters_.bodyTitle]]</div>
    <div id="contents">[[interceptionParameters_.bodyText]]</div>
  </div>

  <div id="actionRow">
    <paper-spinner-lite active="[[acceptButtonClicked_]]"></paper-spinner-lite>
    <div class="action-container">
      <cr-button id="acceptButton" class="action-button" on-click="onAccept_"
          disabled="[[acceptButtonClicked_]]" autofocus>
        [[interceptionParameters_.confirmButtonLabel]]
      </cr-button>
      <cr-button id="cancelButton" on-click="onCancel_"
          disabled="[[acceptButtonClicked_]]">
        [[interceptionParameters_.cancelButtonLabel]]
      </cr-button>
    </div>
  </div>
  <!-- TODO(https://crbug.com/1157764): Change to make only link clickable. -->
  <template is="dom-if" if="[[shouldShowGuest_]]" restamp>
    <div slot="footer">
      <div class="divider"></div>
      <div id="footer-description" on-click="onGuest_"
          inner-h-t-m-l="[[guestLink_]]"></div>
    </div>
  </template>
</div>