overleaf/services/web/frontend/stylesheets/app/editor/share.less

.modal-body-share {
  h3 {
    border-bottom: 1px solid @gray-lighter;
    padding-bottom: @line-height-computed / 4;
    margin: 0;
    font-size: 1rem;
  }

  .project-member.form-group {
    margin-bottom: 0;
  }

  .project-member .form-control-static.text-center {
    padding-top: 0;
  }

  .project-member .remove-button {
    font-size: inherit;
  }

  .project-member {
    padding: (@line-height-computed / 2) 0;
    font-size: 16px;
    span {
      padding-right: @line-height-computed / 2;
    }
  }

  .project-invite,
  .public-access-level {
    font-size: 14px;
    padding: (@line-height-computed / 2) 0;
    border-bottom: 1px solid @gray-lighter;
  }

  .public-access-level {
    margin-top: @line-height-computed / 4;
    font-size: 13px;
    padding-bottom: @modal-inner-padding;
    .access-token-display-area {
      margin-top: @line-height-computed / 4;
      .access-token-wrapper {
        padding-top: @line-height-computed / 4;
        .access-token {
          margin-top: @line-height-computed / 4;
          background-color: @gray-lightest;
          border: 1px solid @gray-lighter;
          padding: 6px 12px 6px 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
    .fa-chevron-down,
    .fa-chevron-up {
      vertical-align: top;
      color: @neutral-70;
    }
    .btn-chevron {
      padding: 0 (@line-height-computed / 2);
    }
  }

  .public-access-level.public-access-level--notice {
    background-color: @gray-lightest;
    border-bottom: none;
    margin-top: @margin-md;
    padding-top: @margin-md;
  }

  .project-member,
  .project-invite {
    &:hover {
      background-color: @gray-lightest;
    }
  }

  .project-member {
    .select-trigger {
      color: @neutral-70;
      border: none;
      padding: 0 10px 5px 10px;
    }

    .select-items {
      max-height: 300px;
      width: 250%;
      li:last-child {
        color: @brand-danger;
      }
    }

    .project-member-email-icon {
      display: grid;
      grid-template-columns: 2em auto;
      align-items: center;
      padding-bottom: 5px;

      .fa-warning {
        color: @brand-warning;
      }

      .subtitle {
        font-size: @font-size-small;
      }
    }
  }

  .project-member .text-left,
  .project-invite .text-left {
    padding-left: 25px;
  }

  .invite-controls {
    .small {
      padding: 2px;
      margin-bottom: 0;
    }
    padding: @line-height-computed / 2;
    background-color: @gray-lightest;
    margin-top: @line-height-computed / 2;
    form {
      .form-group {
        margin-bottom: @line-height-computed / 2;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .privileges {
        display: inline-block;
        width: auto;
      }
      .tags-new .privileges {
        background: transparent;
        width: auto;
        height: 30px;
        font-size: 14px;
        border: none;
        border-right: 5px solid transparent;
      }
    }
    .add-collaborators-upgrade {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: var(--spacing-08);

      .upgrade-actions {
        display: flex;
        gap: @margin-md;
      }
    }
  }

  .rbt-menu > .dropdown-item {
    display: block;
    padding: 0.25rem 1rem;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &:hover {
      text-decoration: none;
      background-color: @gray-lightest;
    }
  }
}
.modal-footer-share {
  .modal-footer-left {
    max-width: 70%;
    text-align: left;
  }
}

.copy-button:focus-within {
  outline: none;
}

.modal-link-share-new {
  .invite-controls {
    padding: 0;
    background-color: transparent;
    margin-top: 0;
  }
  .public-access-level {
    border: none;
  }

  .invite-warning {
    margin-bottom: @line-height-computed / 2;
  }
}