Meleki
d83a6f60ef
- Settings-Page mit Range-Slider für Seitenbreite (600-1800px) - JSON-basierter localStorage-Key 'settings' (zukunftssicher) - applySettings() beim App-Start für sofortige Wiederherstellung - Reset-Button mit Confirm-Dialog setzt alle Settings auf Defaults - Sanfte Breitenübergänge via --transition-duration
77 lines
1.4 KiB
CSS
77 lines
1.4 KiB
CSS
/* ── Settings ── */
|
|
|
|
.settings {
|
|
padding: var(--page-padding);
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--page-spacing);
|
|
}
|
|
|
|
.settings-section h2 {
|
|
margin-bottom: var(--box-spacing);
|
|
padding-bottom: var(--badge-spacing);
|
|
border-bottom: var(--border-width) solid var(--f2-border);
|
|
}
|
|
|
|
.setting-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--box-spacing);
|
|
padding: var(--box-padding);
|
|
background: var(--f1-bg);
|
|
border: var(--border-width) solid var(--f1-border);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.setting-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: .15em;
|
|
}
|
|
|
|
.setting-info label {
|
|
color: var(--text-accent);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.setting-hint {
|
|
opacity: var(--semi-transparent);
|
|
font-size: var(--font-size);
|
|
}
|
|
|
|
.setting-control {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--box-spacing);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.setting-control input[type="range"] {
|
|
width: 200px;
|
|
cursor: pointer;
|
|
accent-color: var(--primary);
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.setting-control input[type="range"]:hover {
|
|
border: none;
|
|
filter: none;
|
|
}
|
|
|
|
.setting-value {
|
|
min-width: 4.5em;
|
|
text-align: right;
|
|
font-family: var(--mono);
|
|
font-size: var(--mono-size);
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.settings-reset {
|
|
border-top: var(--border-width) solid var(--f2-border);
|
|
padding-top: var(--box-spacing);
|
|
}
|