ClaudeandClaude Opus 5.5
7bb918390a
Kachel „Öffnungszeiten live“ inline in funktionen.js (keine neuen Importe, keine Zusatzabfrage), Ansicht #zeiten (zeiten.js, zeiten-bestellen.js, zeiten.css) mit Einschalten im Wartungs-Abo, Bestellen für 30 € (Widerrufsbelehrung vor dem Knopf, Ruling R32), Behalten nach dem Abo-Ende, Statuskarte je Zustand, Rückkehr von Stripe und Platz für den Editor (Aufgabe 29). GET /api/funktionen liefert dafür zeiten.belehrung (Haken belehrung der Funktion). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
36 lines
2.3 KiB
CSS
36 lines
2.3 KiB
CSS
/* Öffnungszeiten live im Kundenbereich (zeiten.js, zeiten-bestellen.js; der Editor kommt mit den Aufgaben 29 und 30 dazu).
|
|
Farben und Abstände aus den Tokens von kundenbereich.css (.kb-page). Die Bausteine der Bestell- und Statusseiten (tm-bestellen, tm-statuskarte,
|
|
tm-rechtstext, tm-haken, tm-pille, tm-box, tm-meldung, tm-info …) stehen in termine.css und gelten hier mit; neu sind nur Klassen mit zt-
|
|
und die Regeln für #view-zeiten. Handy: bis 880px wie die App-Ansicht, Tippflächen mindestens 44px. */
|
|
|
|
#view-zeiten .kb-panel { max-width: none; }
|
|
#view-zeiten .fn-project { margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; }
|
|
#view-zeiten button:focus-visible, #view-zeiten input:focus-visible, #view-zeiten select:focus-visible, #view-zeiten textarea:focus-visible,
|
|
#view-zeiten summary:focus-visible, #view-zeiten a:focus-visible { outline: 3px solid #d4b4ff; outline-offset: 2px; }
|
|
#view-zeiten input, #view-zeiten select, #view-zeiten textarea { color-scheme: dark; } /* Kalender und Auswahllisten der Zeitfelder dunkel */
|
|
#view-zeiten .kb-btn-outline, #view-zeiten .kb-btn-primary { min-height: 40px; }
|
|
|
|
/* Ansicht: oben die Karte oder die Bestellseite, darunter der Platz des Editors */
|
|
.zt-kopf > .kb-panel { margin-bottom: 16px; }
|
|
.zt-editor { margin-top: 4px; }
|
|
.zt-editor[hidden] { display: none; }
|
|
.zt-editor:empty { display: none; }
|
|
.zt-hinweis h3 { margin-bottom: 8px; }
|
|
.zt-hinweis .kb-btn-outline { margin-top: 4px; }
|
|
.zt-bestellen .tm-bestellen-aktion .kb-btn-outline { justify-self: start; }
|
|
.zt-status .tm-box { margin-bottom: 0; }
|
|
.zt-status .tm-box .kb-btn-outline { flex: none; }
|
|
|
|
@media (max-width: 880px), (pointer: coarse) {
|
|
#view-zeiten button, #view-zeiten .kb-btn-outline, #view-zeiten .kb-btn-primary { min-height: 44px; }
|
|
#view-zeiten .tm-haken { align-items: center; min-height: 44px; margin-top: 0; margin-bottom: 0; }
|
|
#view-zeiten .tm-haken input { margin-top: 0; }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.zt-bestellen .tm-bestellen-aktion { justify-items: stretch; }
|
|
.zt-status .tm-box .kb-btn-outline { width: 100%; }
|
|
.zt-status .tm-aktionen > * { flex: 1 1 auto; }
|
|
#view-zeiten .tm-rechtstext { max-height: 260px; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) { #view-zeiten * { transition: none !important; animation: none !important; } }
|