discourse/app/assets/stylesheets/common/base/group.scss

276 lines
4.1 KiB
SCSS

// We should try to reuse the user page HTML for groups when possible
// To style group content differently, use the existing classes with a .group parent class.
// For example: .group .user-secondary-navigation
span.mention-group {
color: var(--primary);
}
.group-details-container {
background: var(--primary-very-low);
padding: 20px;
margin-bottom: 15px;
position: relative;
}
.group-delete-tooltip {
background-color: var(--tertiary-low);
padding: 0.1em 2.5em 0.1em 1em;
margin-bottom: 10px;
}
.group-outlet {
position: relative;
}
.group-members-actions {
display: flex;
flex-wrap: wrap;
width: 100%;
input + .group-members-manage {
margin-left: auto;
}
.group-username-filter {
margin: 0 0 5px 0;
vertical-align: middle;
}
}
.group-info {
align-items: flex-start;
display: flex;
gap: 10px;
.group-info-names {
flex-grow: 1;
}
.group-info-name {
font-size: var(--font-up-3);
font-weight: bold;
color: var(--primary);
}
.group-info-full-name {
font-size: var(--font-up-2);
color: var(--primary-high-or-secondary-low);
}
$size: 50px;
$icon-size: $size / 1.8;
.avatar-flair-image {
width: $size;
}
.avatar-flair {
background-size: $size;
height: $size;
width: $size;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
.d-icon {
height: $icon-size;
width: $icon-size;
}
}
.group-details-button {
display: flex;
flex-wrap: wrap;
button:not(:last-child) {
margin-right: 0.5em;
}
}
}
.group-nav {
.count {
margin-left: 5px;
}
}
.group-manage-logs-filter {
margin-right: 10px;
&:hover {
background-color: var(--danger);
}
}
table.group-manage-logs {
width: 100%;
td {
padding: 0.5em;
}
.group-manage-logs-expand-details {
cursor: pointer;
.d-icon {
color: var(--primary-medium);
}
}
}
table.group-members {
width: 100%;
th {
text-align: center;
&.bulk-select {
height: 30px;
width: 30px;
}
&.bulk-select-buttons {
text-align: left;
white-space: nowrap;
width: 1%;
.bulk-select-buttons-wrap {
display: flex;
}
.btn {
margin-right: 0.25em;
}
}
&.username {
text-align: left;
}
}
td {
color: var(--primary-medium);
padding: 0.8em 0;
text-align: center;
&.avatar {
text-align: left;
}
}
.user-info {
display: block;
.avatar-flair {
color: var(--primary);
}
}
}
.group-owner-label {
color: var(--primary);
}
.group-flair-inputs {
display: inline-block;
.avatar-flair-preview {
position: relative;
width: 45px;
.avatar-wrapper {
background-color: var(--primary-very-low);
}
}
.radios {
margin-bottom: 5px;
}
.radio-label {
display: inline-flex;
padding-right: 10px;
margin-bottom: 0;
align-items: center;
}
.uploaded-image-preview {
height: 75px;
width: 275px;
}
}
.group-form-save {
margin-right: 20px;
}
.group-add-members {
.ac-wrap {
overflow: hidden;
}
.group-add-members-make-owner {
label {
display: inline;
vertical-align: middle;
}
input[type="checkbox"] {
vertical-align: middle;
}
}
}
label.group-category-permissions-desc {
font-size: 1.15em;
margin-bottom: 1em;
}
table.group-category-permissions {
width: 100%;
tr {
line-height: 3em;
width: 100%;
.category-name {
font-size: 1.25em;
}
}
}
.group-smtp-email-settings,
.group-imap-email-settings {
.groups-form {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin-bottom: 0;
&.groups-form-imap {
grid-template-columns: 1fr 1fr 2fr;
}
}
background-color: var(--primary-very-low);
padding: 1em;
margin: 1em 0;
border: 1px solid var(--primary-low);
.group-imap-mailboxes {
.combo-box {
width: 50%;
}
}
}
.group-manage-email-additional-settings-wrapper {
margin-top: 1em;
}
.groups-form .control-group.buttons {
margin-bottom: 0px;
padding: 1em 0;
}