mirror of
https://github.com/discourse/discourse.git
synced 2025-02-24 04:46:24 +08:00
88af23e1ca
This PR modernizes the user fields area of the admin UI. It is largely based on the work on the emoji section.
130 lines
2.2 KiB
SCSS
130 lines
2.2 KiB
SCSS
.d-admin-table {
|
|
@include breakpoint("tablet") {
|
|
border-collapse: collapse;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
thead {
|
|
@include breakpoint("tablet") {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
th {
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
.d-admin-row__content {
|
|
position: relative;
|
|
padding: var(--space-1) 0;
|
|
|
|
@include breakpoint("tablet") {
|
|
display: block;
|
|
margin-bottom: var(--space-3);
|
|
border: 1px solid var(--primary-low);
|
|
}
|
|
}
|
|
|
|
td {
|
|
vertical-align: middle;
|
|
padding-top: var(--space-3);
|
|
padding-bottom: var(--space-3);
|
|
|
|
@include breakpoint("tablet") {
|
|
display: block;
|
|
border-top: 1px solid var(--primary-low);
|
|
}
|
|
|
|
&:first-child {
|
|
@include breakpoint("tablet") {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
&.d-admin-row__overview {
|
|
width: 55%;
|
|
|
|
@include breakpoint("tablet") {
|
|
width: auto;
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
&.d-admin-row__detail {
|
|
@include breakpoint("tablet") {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
&.d-admin-row__controls {
|
|
text-align: right;
|
|
|
|
@include breakpoint("tablet") {
|
|
position: absolute;
|
|
top: -3px;
|
|
right: 0;
|
|
border-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.d-admin-row__overview {
|
|
&-name {
|
|
font-weight: 700;
|
|
max-width: 80%;
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
&-author {
|
|
font-size: var(--font-down-1);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
&-about {
|
|
padding-right: var(--space-4);
|
|
|
|
@include breakpoint("tablet") {
|
|
padding-top: var(--space-1);
|
|
}
|
|
|
|
.d-icon {
|
|
font-size: var(--font-down-3);
|
|
margin-bottom: 0.1em;
|
|
}
|
|
}
|
|
|
|
&-flags {
|
|
color: var(--primary-high);
|
|
font-size: var(--font-down-1);
|
|
text-transform: lowercase;
|
|
|
|
&::first-letter {
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
|
|
.d-admin-row__controls {
|
|
&-options {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 0.5em;
|
|
justify-content: flex-end;
|
|
|
|
.fk-d-menu__trigger {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.d-admin-row__mobile-label {
|
|
display: none;
|
|
|
|
@include breakpoint("tablet") {
|
|
display: inline-flex;
|
|
color: var(--primary-high);
|
|
}
|
|
}
|