[Glitch] Change settings area to be separated into categories in admin UI

Port 7c152acb2c to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2022-10-22 11:44:41 +02:00 committed by Claire
parent 58e2b0973d
commit 80b53623e1
3 changed files with 85 additions and 18 deletions

View file

@ -188,24 +188,71 @@ $content-width: 840px;
padding-top: 30px;
}
&-heading {
display: flex;
&__heading {
padding-bottom: 36px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
margin: -15px -15px 40px 0;
margin-bottom: 40px;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
&__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: -15px -15px 0 0;
& > * {
margin-top: 15px;
margin-right: 15px;
& > * {
margin-top: 15px;
margin-right: 15px;
}
}
&-actions {
&__tabs {
margin-top: 30px;
margin-bottom: -31px;
& > div {
display: flex;
gap: 10px;
}
a {
font-size: 14px;
display: inline-flex;
align-items: center;
padding: 7px 15px;
border-radius: 4px;
color: $darker-text-color;
text-decoration: none;
position: relative;
font-weight: 500;
gap: 5px;
white-space: nowrap;
&.selected {
font-weight: 700;
color: $primary-text-color;
&::after {
content: "";
display: block;
width: 100%;
border-bottom: 1px solid $ui-highlight-color;
position: absolute;
bottom: -5px;
left: 0;
}
}
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 4%);
}
}
}
&__actions {
display: inline-flex;
& > :not(:first-child) {
@ -231,11 +278,7 @@ $content-width: 840px;
color: $secondary-text-color;
font-size: 24px;
line-height: 36px;
font-weight: 400;
@media screen and (max-width: $no-columns-breakpoint) {
font-weight: 700;
}
font-weight: 700;
}
h3 {
@ -440,6 +483,11 @@ body,
}
}
& > div {
display: flex;
gap: 5px;
}
strong {
font-weight: 500;
text-transform: uppercase;
@ -1162,7 +1210,7 @@ a.name-tag,
path:first-child {
fill: rgba($highlight-text-color, 0.25) !important;
fill-opacity: 1 !important;
fill-opacity: 100% !important;
}
path:last-child {

View file

@ -20,6 +20,11 @@
background: transparent;
padding: 0;
cursor: pointer;
text-decoration: none;
&--destructive {
color: $error-value-color;
}
&:hover,
&:active {

View file

@ -244,7 +244,7 @@ code {
& > label {
font-family: inherit;
font-size: 16px;
font-size: 14px;
color: $primary-text-color;
display: block;
font-weight: 500;
@ -281,6 +281,20 @@ code {
.input:last-child {
margin-bottom: 0;
}
&__thumbnail {
display: block;
margin: 0;
margin-bottom: 10px;
max-width: 100%;
height: auto;
border-radius: 4px;
background: url("images/void.png");
&:last-child {
margin-bottom: 0;
}
}
}
.fields-row {