199 lines
3.6 KiB
SCSS
199 lines
3.6 KiB
SCSS
@use "@styles/common";
|
|
@use "@styles/var";
|
|
@use "@styles/color";
|
|
|
|
#settings {
|
|
#settings-panel {
|
|
gap: var.$block-spacing;
|
|
|
|
.settings-box {
|
|
box-shadow: var.$map-shadow;
|
|
}
|
|
|
|
.settings-header {
|
|
padding: 2 * var.$block-spacing;
|
|
border-radius: var.$block-radius var.$block-radius;
|
|
@include common.topo-bg(radial, circle farthest-side at 50% 50%, color.$default-bg-light, 40%);
|
|
|
|
img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
object-fit: contain;
|
|
|
|
&.logo-icon {
|
|
width: 40%;
|
|
}
|
|
&.logo-title {
|
|
width: 70%;
|
|
margin-top: var.$block-spacing;
|
|
}
|
|
}
|
|
|
|
.last_update {
|
|
margin-top: var.$block-spacing - var.$elem-spacing; //Gap counts for 1 $elem-spacing
|
|
font-size: 0.8em;
|
|
color: color.$subtitle;
|
|
|
|
.find-me-spot {
|
|
color: color.$spot;
|
|
animation: spin 20s infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.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;
|
|
color: color.$title;
|
|
font-size: 1.75em;
|
|
border-radius: var.$block-radius var.$block-radius 0 0;
|
|
@include common.topo-bg(linear, 0deg, color.$default-bg);
|
|
}
|
|
|
|
.settings-section-body {
|
|
padding: var.$block-spacing;
|
|
border-radius: 0 0 var.$block-radius var.$block-radius;
|
|
background: color.$default-bg;
|
|
|
|
.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.$main;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.settings-footer {
|
|
flex: 0 1 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 0.7em;
|
|
color: color.$default-inv;
|
|
text-shadow: var.$elem-shadow;
|
|
|
|
a {
|
|
color: color.$default-inv;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: color.$default-inv-hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#title {
|
|
left: calc(100% + var(--button-width) + 2 * var.$block-spacing);
|
|
max-width: calc(100vw - var.$block-spacing - (var(--button-width) + 2 * var.$block-spacing) * 2);
|
|
transition: max-width 0.5s;
|
|
@include common.no-text-overflow();
|
|
|
|
span {
|
|
font-size: 1.3em;
|
|
line-height: calc(var.$block-spacing / 1.3);
|
|
vertical-align: center;
|
|
}
|
|
}
|
|
|
|
#legend {
|
|
.track {
|
|
white-space: nowrap;
|
|
.line {
|
|
width: 2em;
|
|
display: inline-block;
|
|
border-radius: 2px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 1em;
|
|
margin-left: 0.5em;
|
|
color: color.$legend;
|
|
}
|
|
}
|
|
}
|
|
}
|