Kevin Adametz
83c6c5813d
Offline - Alle Schreibzugriffe von API-Nutzern laufen über eine Warteschlange in IndexedDB (services/syncQueue.js): FIFO, zusammengefasste Updates, Wiederholung bei Netz/Sichtbarkeit/Backoff, 4xx wird als Fehler gemeldet. - Medien-Uploads liegen mit Bytes in der Queue, erscheinen sofort mit Marker und werden nach dem Upload durch das Server-Objekt ersetzt. - PWA-Modus mit Service Worker für die App-Hülle; API nie gecacht. npm run build erzeugt dist/pwa. - Speicherzustand im Panel: ausstehend / Fehler mit Wiederholen-Knopf, Verbindungsanzeige im Header. Event - Event entsteht erst mit dem ersten Eintrag; jede Löschung fragt nach. - Key Image als 4:3-Rahmen, Galerie mit Video, mehrere Sprachnotizen mit Notiz, Live-Pegel beim Aufnehmen, WAV-Umwandlung für lokale Aufnahmen. - Neue Felder: Zeitraum, Kategorie, Personen, Meilenstein; Stimmung als kompakte Zeile mit ausklappbarer Punktfarbe. Oberfläche - Untere Leiste: Darstellung und Zoom links, Jahres-Pille mittig, Plus rechts. - Logos und Goldpalette, Login neu, zehn Wellen-Presets mit Vorschau, Hintergrundbilder als Kacheln, Kontomenü und Einstellungen bereinigt, Escape schließt Ebenen, größere Touch-Ziele. - Alten Sync-Service und ungenutzte Legacy-Seiten entfernt. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
74 lines
1.7 KiB
SCSS
74 lines
1.7 KiB
SCSS
:root {
|
|
// Brand palette (from the logo): gold accent, ink for text on light
|
|
// ground, paper for text on dark ground.
|
|
--tm-gold: #f5c26b;
|
|
--tm-gold-dark: #d59040;
|
|
--tm-gold-rgb: 245, 194, 107;
|
|
--tm-gold-gradient: linear-gradient(135deg, #f5c26b, #d59040);
|
|
--tm-ink: #292a2b;
|
|
--tm-ink-rgb: 41, 42, 43;
|
|
--tm-paper: #f7f3ea;
|
|
--tm-paper-rgb: 247, 243, 234;
|
|
|
|
// Selected accent; the settings store overrides these at runtime.
|
|
--tm-accent: #f5c26b;
|
|
--tm-accent-rgb: 245, 194, 107;
|
|
--q-primary: #f5c26b;
|
|
--q-secondary: #d59040;
|
|
--q-accent: #f5c26b;
|
|
}
|
|
|
|
// Glass button style
|
|
.glass--button {
|
|
background: rgba(128, 128, 128, 0.1);
|
|
border: 1px solid rgba(var(--tm-accent-rgb), 0.24);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
transition: background 0.2s ease;
|
|
|
|
&:hover {
|
|
background: rgba(128, 128, 128, 0.18);
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
// Glass panel style — strong blur for slide-up panels
|
|
.glass--panel {
|
|
background: rgba(var(--tm-paper-rgb), 0.78);
|
|
border-top: 1px solid rgba(var(--tm-accent-rgb), 0.24);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
color: var(--tm-ink);
|
|
|
|
.body--dark & {
|
|
background: rgba(var(--tm-ink-rgb), 0.74);
|
|
border-top-color: rgba(var(--tm-paper-rgb), 0.1);
|
|
color: var(--tm-paper);
|
|
}
|
|
}
|
|
|
|
// GlowDot animations — soft opacity pulse on the glow aura
|
|
@keyframes glowPulse {
|
|
0%, 100% {
|
|
opacity: 0.85;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.06);
|
|
}
|
|
}
|
|
|
|
@keyframes ghostPulse {
|
|
0%, 100% {
|
|
opacity: 0.5;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.9;
|
|
transform: scale(1.12);
|
|
}
|
|
}
|