162 lines
2.9 KiB
SCSS
162 lines
2.9 KiB
SCSS
@use "common";
|
|
@use "var";
|
|
@use "color";
|
|
|
|
#settings {
|
|
#settings-panel {
|
|
.settings-header {
|
|
text-align: center;
|
|
flex: 0 1 auto;
|
|
|
|
.logo {
|
|
background: color.$default-bg;
|
|
padding: 2rem 1rem;
|
|
border-radius: var.$block-radius var.$block-radius 0 0;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
max-width: 180px;
|
|
transform: translateX(-10%); //Center Text, not logo. logo width (40px) / image width (200px) = 20%. And centering: 20% / 2 = 10%
|
|
}
|
|
}
|
|
|
|
#last_update {
|
|
position: absolute;
|
|
margin-top: -2em;
|
|
padding: 0 1rem;
|
|
width: calc(100% - 2rem);
|
|
|
|
p {
|
|
text-align: center;
|
|
font-size: 0.8em;
|
|
margin: 0;
|
|
color: color.$subtitle;
|
|
transform: translateX(calc(-0.5 * (12px + 0.5em))); //icon width + margin right
|
|
|
|
span {
|
|
margin-right: 0.5em;
|
|
img {
|
|
width: 12px;
|
|
vertical-align: middle;
|
|
animation: spotlogo 20s infinite;
|
|
}
|
|
}
|
|
|
|
abbr {
|
|
text-decoration: none;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.settings-footer {
|
|
flex: 0 1 auto;
|
|
background: color.$default-bg;
|
|
border-radius: 0 0 3px 3px;
|
|
font-size: 0.7em;
|
|
padding: var.$text-spacing;
|
|
text-align: center;
|
|
color: color.$default;
|
|
|
|
a {
|
|
color: color.$default;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.settings-sections {
|
|
flex: 1 1 auto;
|
|
overflow: auto;
|
|
|
|
#settings-sections-scrollbox {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.settings-section {
|
|
display: inline-block;
|
|
margin: 1.5rem 1rem 0 1rem;
|
|
width: calc(100% - 2 * var.$block-spacing);
|
|
|
|
&:last-child {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 var.$block-spacing;
|
|
color: color.$title;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.settings-section-body {
|
|
.radio {
|
|
&:not(:first-child) {
|
|
margin-top: var.$elem-spacing;
|
|
}
|
|
|
|
label {
|
|
margin-left: var.$text-spacing;
|
|
@extend .clickable;
|
|
@include common.no-text-overflow();
|
|
}
|
|
|
|
.download {
|
|
color: color.$default;
|
|
|
|
&:hover {
|
|
color: color.$download-hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.newsletter {
|
|
.newsletter-form {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: var.$block-spacing;
|
|
margin-bottom: var.$block-spacing;
|
|
|
|
input#email {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
|
|
&:disabled {
|
|
color: color.$default-disabled;
|
|
background: color.$default-bg-trans-disabled;
|
|
}
|
|
}
|
|
|
|
button#nl_btn {
|
|
flex: 0 0 auto;
|
|
|
|
&.loading {
|
|
background-color: color.$message;
|
|
color: color.$post-input-bg;
|
|
span {
|
|
@extend .flicker;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.admin {
|
|
.admin-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var.$block-spacing;
|
|
|
|
a.button {
|
|
flex: 0 0 auto;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|