overleaf/services/web/frontend/stylesheets/components/group-members.less
Alexandre Bourdin 0c5ba1e96e Merge pull request #14491 from overleaf/ab-update-managed-users-icons
[web] Update managed users icons and improve display on smaller screen sizes

GitOrigin-RevId: 7b6263ea9afa9bb52bed3a3f50cbe361e7064085
2023-08-28 08:04:02 +00:00

190 lines
3 KiB
Text

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