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

142 lines
2.5 KiB
SCSS

.directory {
margin-bottom: 100px;
.directory-table-container {
width: 100%;
overflow-x: auto;
}
.directory-table-top-scroll {
width: 100%;
overflow-x: auto;
}
&.users-directory {
.directory-group-selector {
vertical-align: top;
}
}
.user-info {
margin-bottom: 0;
}
.spinner {
clear: both;
}
.directory-controls {
display: flex;
justify-content: space-between;
.total-rows {
color: var(--primary-medium);
font-weight: normal;
}
}
.directory-last-updated {
margin-bottom: 0.5em;
color: var(--primary-medium);
font-size: var(--font-down-1);
}
table {
width: 100%;
margin-bottom: 1em;
td,
th {
padding: 0.5em;
text-align: left;
border-bottom: 1px solid var(--primary-low);
@media screen and (max-width: $small-width) {
padding: 0.5em 0.25em;
}
.number,
.time-read {
font-size: var(--font-up-3);
color: var(--primary-medium);
@media screen and (max-width: $small-width) {
font-size: var(--font-up-1);
}
}
.time-read {
white-space: nowrap;
}
.user-field-value {
font-size: var(--font-up-1);
color: var(--primary-medium);
@media screen and (max-width: $small-width) {
font-size: var(--font-0);
}
}
}
th.sortable {
width: 13%;
.d-icon-heart {
color: var(--love);
margin: 0 0.25em 0 0;
}
}
}
.me {
background-color: var(--highlight-low-or-medium);
.username a,
.name a,
.title,
.number,
.time-read {
color: var(--primary-medium);
}
}
}
.edit-user-directory-columns-modal {
.edit-directory-columns-container {
.edit-directory-column {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid var(--primary-low);
.column-name {
display: flex;
align-items: center;
margin-bottom: 0;
}
.d-icon-heart {
color: var(--love);
margin: 0 0.25em 0 0;
}
.move-column-up {
margin-right: 5px;
}
.left-content,
.right-content {
display: flex;
align-items: center;
}
&:last-of-type {
border-bottom: none;
}
}
}
.modal-footer {
display: flex;
justify-content: space-between;
.reset-to-default {
margin-right: 0;
}
}
}
.edit-user-directory-columns-modal .modal-inner-container {
min-width: 450px;
}