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

183 lines
2.6 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-navigation
.group-details-container {
background: $primary-very-low;
padding: 20px;
margin-bottom: 15px;
position: relative;
}
.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 {
width: 100%;
.group-info-name {
font-size: $font-up-3;
font-weight: bold;
color: $primary;
}
.group-info-full-name {
font-size: $font-up-2;
color: dark-light-choose($primary-high, $secondary-low);
}
span {
display: inline-block;
vertical-align: middle;
}
$size: 50px;
.avatar-flair-image {
width: $size;
}
.avatar-flair {
background-size: $size;
height: $size;
i {
font-size: $size !important;
}
}
}
.group-manage-logs-filter {
margin-right: 10px;
&:hover {
background-color: $danger;
}
}
table.group-manage-logs {
width: 100%;
th {
text-align: left;
padding: 5px 0;
}
td {
padding: 10px 0;
}
.group-manage-logs-expand-details {
cursor: pointer;
i {
color: blend-primary-secondary(50%);
}
}
}
table.group-members {
width: 100%;
table-layout: fixed;
th:first-child {
width: 30%;
text-align: left;
}
th:last-child {
width: 5%;
}
th.group-members-actions {
width: 5%;
}
th {
text-align: center;
padding: 5px 0 5px 5px;
color: dark-light-choose($primary-medium, $secondary-medium);
font-weight: normal;
}
th.sortable {
i {
margin-left: 5px;
}
&:hover {
cursor: pointer;
background-color: $primary-low;
}
}
tr {
.user-info {
display: block;
}
td:first-child {
text-align: left;
}
td {
text-align: center;
color: $primary-medium;
padding: 0.8em 0;
}
}
}
.group-owner-label {
color: $primary;
}
.form-vertical {
.group-flair-inputs {
display: inline-block;
}
.avatar-flair-preview {
position: relative;
width: 45px;
.avatar-wrapper {
background-color: #f4f4f4;
}
}
}
.group-form-save {
margin-right: 20px;
}
.group-add-members {
.group-add-members-make-owner {
label {
display: inline;
vertical-align: middle;
}
input[type='checkbox'] {
vertical-align: middle;
}
}
}