overleaf/services/web/frontend/stylesheets/components/group-members.less

/* Styles for group-subscription members view */

.structured-list.managed-users-list {
  /* Override scrolling behaviour on structured-list */
  overflow: initial;
  overflow-y: initial;
  overflow-x: initial;
}

.managed-users-list {
  .security-state-invite-pending {
    color: @text-muted;
  }
  .security-state-managed {
    color: @green;
  }
  .security-state-not-managed {
    color: @red;
  }
  .managed-user-row {
    overflow-wrap: break-word;
  }

  .managed-user-security {
    display: flex;
    justify-content: space-between;
  }
  .managed-user-actions {
    button.dropdown-toggle {
      color: @text-color;
      padding-left: 1em;
      padding-right: 1em;
    }
    .managed-user-dropdown-menu {
      width: 300px;

      li > button {
        &:hover {
          background-color: @gray-lightest;
        }
      }
      .delete-user-action {
        button {
          color: @red;
        }
      }
    }
  }
  .managed-user-menu-item-button {
    padding: 12px 20px;
    position: relative;
    width: 100%;
    border: none;
    box-shadow: none;
    background: inherit;
    color: @ol-blue-gray-5;
    text-align: left;
    &[disabled] {
      background-color: @gray-lighter;
    }
  }
}

.managed-users-list-alert {
  display: flex;
  justify-content: space-between;
  .managed-users-list-alert-close {
    padding-left: @padding-sm;
    text-align: right;
    width: 10%;
    @media (min-width: @screen-sm-min) {
      width: auto;
    }
  }
}

.managed-users-table {
  width: 100%;
  table-layout: fixed;

  tr {
    border-bottom: 1px solid @structured-list-border-color;
  }

  th,
  td {
    padding: (@line-height-computed / 4) @line-height-computed / 2;
    vertical-align: top;
  }

  thead {
    tr:hover {
      background-color: transparent;
    }
  }

  tbody {
    tr:last-child {
      border-bottom: 0 none;
    }
    tr:hover {
      background-color: #f6f7f9;
    }
  }

  .cell-email {
    width: 50%;
  }

  .cell-name {
    width: 15%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cell-last-active {
    width: 15%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cell-security {
    width: 15%;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cell-dropdown {
    width: 5%;
    min-width: 25px;
  }

  @media (min-width: @screen-xs) {
    .cell-email {
      width: 40%;
    }

    .cell-name {
      width: 20%;
    }

    .cell-last-active {
      width: 20%;
    }

    .cell-security {
      width: 15%;
    }

    .cell-dropdown {
      width: 5%;
      button.dropdown-toggle {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }

  @media (min-width: @screen-lg) {
    .cell-email {
      width: 50%;
    }

    .cell-name {
      width: 20%;
    }

    .cell-last-active {
      width: 15%;
    }

    .cell-security {
      width: 12%;
    }

    .cell-dropdown {
      width: 3%;
    }
  }
}

.managed-user-security {
  .material-symbols {
    position: relative;
    top: 4px;
  }
}