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

201 lines
3.1 KiB
Text
Raw Normal View History

/* 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-checkbox {
width: 5%;
}
.cell-email {
width: 45%;
}
.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-checkbox {
width: 5%;
}
.cell-email {
width: 34%;
}
.cell-name {
width: 20%;
}
.cell-last-active {
width: 20%;
}
.cell-security {
width: 15%;
}
.cell-dropdown {
width: 6%;
min-width: 25px;
}
}
@media (min-width: @screen-lg) {
.cell-checkbox {
width: 5%;
}
.cell-email {
width: 43%;
}
.cell-name {
width: 20%;
}
.cell-last-active {
width: 15%;
}
.cell-security {
width: 12%;
}
.cell-dropdown {
width: 5%;
min-width: 25px;
}
}
}
.managed-user-security {
.material-symbols {
position: relative;
top: 4px;
}
}