183 lines
3.2 KiB
SCSS
183 lines
3.2 KiB
SCSS
@use "@styles/common";
|
|
@use "@styles/var";
|
|
@use "@styles/color";
|
|
|
|
#settings {
|
|
#settings-panel {
|
|
gap: var.$block-spacing;
|
|
|
|
.settings-box {
|
|
background: color.$default-bg;
|
|
border-radius: var.$block-radius;
|
|
box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow;
|
|
}
|
|
|
|
.settings-header {
|
|
text-align: center;
|
|
|
|
.logo {
|
|
display: block;
|
|
border-radius: var.$block-radius;
|
|
background: color.$default-bg-light;
|
|
padding: var.$block-spacing;
|
|
|
|
&:has(+ .last_update) {
|
|
padding: 2 * var.$block-spacing;
|
|
}
|
|
|
|
img {
|
|
width: 65%;
|
|
}
|
|
}
|
|
|
|
.last_update {
|
|
position: absolute;
|
|
margin-top: -2 * var.$block-spacing;
|
|
line-height: 2 * var.$block-spacing;
|
|
padding: 0 var.$block-spacing;
|
|
width: calc(100% - 2 * var.$block-spacing);
|
|
|
|
p {
|
|
font-size: 0.8em;
|
|
margin: 0;
|
|
color: color.$subtitle;
|
|
|
|
span {
|
|
margin-right: var.$elem-spacing;
|
|
img {
|
|
width: 12px;
|
|
vertical-align: center;
|
|
animation: spotlogo 20s infinite;
|
|
}
|
|
}
|
|
|
|
abbr {
|
|
text-decoration: none;
|
|
vertical-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.settings-footer {
|
|
flex: 0 1 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 0.7em;
|
|
color: color.$default-inv;
|
|
text-shadow: 0px 1px 1px color.$over-img-shadow;
|
|
|
|
a {
|
|
color: color.$default-inv;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: color.$default-inv-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.settings-sections {
|
|
flex: 1 1 auto;
|
|
overflow: auto;
|
|
border-radius: var.$block-radius;
|
|
|
|
#settings-sections-scrollbox {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.settings-section {
|
|
display: inline-block;
|
|
width: 100%;
|
|
|
|
& + .settings-section {
|
|
margin-top: var.$block-spacing;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
padding: var.$block-spacing;
|
|
border-radius: var.$block-radius var.$block-radius 0 0;
|
|
color: color.$title;
|
|
font-size: 1.75em;
|
|
background: color.$default-bg-light;
|
|
}
|
|
|
|
.settings-section-body {
|
|
padding: var.$block-spacing;
|
|
|
|
.radio {
|
|
&:not(:first-child) {
|
|
margin-top: var.$elem-spacing;
|
|
}
|
|
|
|
label {
|
|
margin-left: var.$text-spacing;
|
|
@extend .clickable;
|
|
@include common.no-text-overflow();
|
|
|
|
&:hover {
|
|
color: color.$default-hover;
|
|
}
|
|
}
|
|
|
|
.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.manage {
|
|
flex: 0 0 auto;
|
|
|
|
&.loading {
|
|
background-color: color.$message;
|
|
color: color.$post-input-bg;
|
|
|
|
.spot-icon {
|
|
@extend .flicker;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.admin {
|
|
.admin-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var.$block-spacing;
|
|
|
|
a.button {
|
|
flex: 0 0 auto;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|