Overleaf/services/web/frontend/stylesheets/components/modal.scss

:root {
  --bs-heading-color: var(--content-primary);
}

.modal {
  // Until we add a dark modal version, all core components in modals should use light theme
  @include light-dropdown-menu;
  @include form-check-light;
  @include light-notification;
  @include light-input;
  @include light-buttons;
}

@include media-breakpoint-up(sm) {
  .modal-dialog {
    @include modal-md;
  }

  .modal-sm {
    @include modal-sm;
  }
}

@include media-breakpoint-up(md) {
  .modal-md {
    @include modal-md;
  }
}

@include media-breakpoint-up(lg) {
  .modal-lg {
    @include modal-lg;
  }
}

// OLModal wraps children in a FocusTrap that renders a <div> between
// .modal-content and .modal-header/.modal-body/.modal-footer, breaking
// Bootstrap's flex chain for scrollable modals. display: contents makes the
// wrapper invisible to the layout engine so Bootstrap's flex/overflow chain
// reaches .modal-body correctly.
.modal-dialog-scrollable .modal-content > .focus-trap-container {
  display: contents;
}

.modal-content {
  @include shadow-lg;

  border-radius: var(--border-radius-base);

  .modal-header {
    .modal-title {
      @include heading-sm;

      line-height: 35px;
    }

    .btn-close {
      margin-right: 0;
    }
  }

  .modal-footer {
    padding: var(--spacing-06);
    gap: var(--spacing-04);

    > * {
      margin: 0;
    }
  }
}

// Git bridge modal
.git-bridge-copy {
  background: var(--bg-light-secondary);
  color: var(--content-primary);
  padding: var(--spacing-05);
  border-radius: var(--border-radius-base);
  display: flex;
  justify-content: center;
  gap: var(--spacing-05);
  align-items: center;
  margin: var(--spacing-09) 0;

  & code {
    color: var(--content-primary);
    word-break: break-word;
  }
}

.git-bridge-optional-tokens {
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-07);
  margin: var(--spacing-09) 0;
}

.git-bridge-optional-tokens-header {
  font-size: 120%;
  font-weight: bold;
  margin-bottom: var(--spacing-05);
}

.git-bridge-optional-tokens-actions {
  margin-top: var(--spacing-05);
}

.upgrade-track-changes-modal {
  .teaser-title {
    font-family: var(--font-sans);
    font-size: var(--font-size-05);
    margin-bottom: var(--spacing-05);
    margin-top: var(--spacing-05);
    color: var(--content-secondary);
  }

  ul.list-unstyled li {
    font-family: var(--font-sans);
    padding: var(--spacing-02) 0;
    color: var(--content-secondary);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-04);
  }

  ul.list-unstyled li .check-icon {
    padding-top: 2px;
  }
}