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-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;
    }
  }

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

    .cell-email {
      width: 50%;
    }

    &.group-sso-active {
      .cell-email {
        width: 37%;
      }
    }

    .cell-name {
      width: 20%;
    }

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

    .cell-security {
      width: 12%;
    }

    .cell-managed {
      width: 15%;
    }

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

    .cell-accepted-invite {
      width: 17%;
    }

    &.managed-users-active {
      .cell-email {
        width: 35%;
      }

      &.group-sso-active {
        .cell-checkbox {
          width: 3%;
        }

        .cell-email {
          width: 29%;
        }

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

        .cell-name {
          width: 18%;
        }
      }
    }
  }

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

    .cell-email {
      width: 55%;
    }

    &.group-sso-active .cell-email {
      width: 45%;
    }

    .cell-name {
      width: 20%;
    }

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

    .cell-security {
      width: 10%;
    }

    .cell-managed {
      width: 13%;
    }

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

    .cell-accepted-invite {
      width: 17%;
    }

    &.managed-users-active {
      .cell-email {
        width: 42%;
      }

      &.group-sso-active {
        .cell-checkbox {
          width: 3%;
        }

        .cell-email {
          width: 36%;
        }

        .cell-name {
          width: 18%;
        }
      }
    }
  }
}

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

.badge-group-settings {
  align-self: center;
  padding: 0 16px;
}