ClaudeandClaude Opus 5.5
aa9ee35ab6
- JSON-LD wird ohne "<" geschrieben (<), ein </script> im Firmennamen bricht keinen Block mehr - verschiebe(): ist die Hinweis-Leiste weggescrollt, bekommen feste Elemente ihren eigenen Inline-top zurück (Köpfe, die per Klasse beim Scrollen wegfahren, funktionieren wieder) - Späte Platzhalter (Einzelseiten-Apps): entprellter MutationObserver auf body zeichnet neue oder wieder eingehängte Platzhalter nach - sichererLink lehnt Zugangsdaten in der Adresse ab; die Adresse der Schnittstelle bestimmt nur das eigene Script-Tag, kein Platzhalter mehr (der siteKey am Platzhalter bleibt laut Spec 4.2) - Editor: die Bestätigung klebt unter der Kopfleiste und bleibt nach dem Speichern eines unteren Abschnitts sichtbar Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
129 lines
9.2 KiB
CSS
129 lines
9.2 KiB
CSS
/* Öffnungszeiten live im Kundenbereich (zeiten.js, zeiten-bestellen.js und der Editor: zeiten-editor.js, zeiten-plaene.js, zeiten-ausnahmen.js,
|
|
zeiten-leisten.js, zeiten-google.js).
|
|
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; }
|
|
|
|
/* Editor: Zeitplaene, Feiertage, Ausnahmen (zeiten-editor.js, zeiten-plaene.js, zeiten-ausnahmen.js) */
|
|
.zt-editor > * + * { margin-top: 16px; }
|
|
.zt-editor > .tm-meldung:empty, .zt-editor > .tm-box[hidden] { margin: 0; }
|
|
/* Die Bestätigung (erstes Kind des Editors) klebt unter der Kopfleiste: nach dem Speichern eines unteren Abschnitts springt der Fokus auf den Knopf,
|
|
und „gespeichert“ läge sonst ausser Sicht. Undurchsichtig, damit der Inhalt darunter nicht durchscheint; leer klebt nichts. */
|
|
.zt-editor > .tm-meldung:not(:empty) { position: sticky; top: calc(var(--kb-appbar-h, 0px) + 8px); z-index: 5; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
|
|
.zt-editor > .tm-meldung-ok:not(:empty) { background: linear-gradient(rgba(74, 222, 128, 0.1), rgba(74, 222, 128, 0.1)), #0c0c0e; }
|
|
.zt-editor > .tm-meldung-fehler:not(:empty) { background: linear-gradient(rgba(248, 113, 113, 0.1), rgba(248, 113, 113, 0.1)), #0c0c0e; }
|
|
.zt-kopfbereich:empty { display: none; }
|
|
.zt-spaeter { margin: 0 4px; line-height: 1.5; }
|
|
.zt-plaene { display: grid; gap: 12px; }
|
|
.zt-plan { border-radius: 14px; background: var(--kb-surface); border: 1px solid var(--kb-border); }
|
|
.zt-plan[open] { border-color: var(--kb-purple-line); }
|
|
.zt-plan-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; padding: 12px 16px; list-style: none; cursor: pointer; }
|
|
.zt-plan-kopf::-webkit-details-marker { display: none; }
|
|
.zt-plan-kopf::before { content: '▸'; flex: none; color: var(--kb-muted); transition: transform 0.15s; }
|
|
.zt-plan[open] > .zt-plan-kopf::before { transform: rotate(90deg); }
|
|
.zt-plan-kopf .tm-name { display: inline; }
|
|
.zt-plan-kopf .tm-meta { display: inline; margin: 0; }
|
|
.zt-plan-kopf code, .tm-formular code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); font-size: 12.5px; }
|
|
.zt-plan > .tm-editor { margin: 0; padding: 0 16px 16px; }
|
|
.zt-plan-form .tm-frage-knoepfe { margin-top: 16px; }
|
|
.zt-plan-form > .tm-hinweis { margin-top: 10px; }
|
|
.zt-grenze { margin: 0 0 12px; }
|
|
.zt-grenze:empty { display: none; }
|
|
.zt-werkzeuge { display: flex; flex-wrap: wrap; gap: 0 10px; }
|
|
.zt-werkzeuge:empty { display: none; }
|
|
.zt-editor .tm-abschnitt > .tm-frage-box { margin: 12px 0 16px; }
|
|
.zt-tage { display: grid; gap: 10px; margin-top: 14px; }
|
|
.zt-tag { min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--kb-border); background: rgba(255, 255, 255, 0.02); }
|
|
.zt-tag > .tm-feld { margin-top: 0; }
|
|
.zt-tag-felder { display: grid; gap: 10px; margin-top: 8px; }
|
|
.zt-tag-felder[hidden], .zt-zeiten[hidden] { display: none; }
|
|
.zt-tag select, .zt-feiertag select {
|
|
width: 100%; max-width: 360px; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; font: inherit; font-size: 16px;
|
|
border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.05); color: inherit;
|
|
}
|
|
.zt-tag select option { color: #111; }
|
|
.zt-zeiten { display: grid; gap: 8px; }
|
|
.zt-fenster { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
|
|
.zt-fenster-name { min-width: 11rem; font-size: 13px; color: var(--kb-muted); }
|
|
.zt-zeit { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
|
|
.zt-zeit input {
|
|
width: 8.5rem; min-height: 40px; box-sizing: border-box; padding: 8px 10px; border-radius: 12px; font: inherit; font-size: 16px; font-variant-numeric: tabular-nums;
|
|
border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.05); color: inherit;
|
|
}
|
|
.zt-tag [aria-invalid='true'] { border-color: #f87171; }
|
|
.zt-tag > .tm-fehler { margin-top: 8px; }
|
|
.zt-feiertag .zt-tag { margin-top: 10px; padding: 0; border: 0; background: transparent; }
|
|
|
|
/* Editor II: Live-Vorschau mit Regler „Uhrzeit testen“, Hinweis-Leiste, Kontakt-Leiste, Google (zeiten-editor.js, zeiten-leisten.js, zeiten-google.js) */
|
|
.zt-editor [hidden] { display: none; }
|
|
.zt-vorschau { padding: 16px 18px; }
|
|
.zt-vorschau-zeile { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
|
|
.zt-vorschau-text { font-size: 17px; }
|
|
.zt-vorschau-text::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--kb-muted); }
|
|
.zt-vorschau-text[data-offen='true']::before { background: #4ade80; }
|
|
.zt-vorschau-text[data-offen='false']::before { background: #f87171; }
|
|
.zt-vorschau-text[data-offen='null']::before { background: #fbbf24; }
|
|
.zt-regler { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
|
|
.zt-regler legend { padding: 0; margin-bottom: 2px; font-size: 13px; font-weight: 600; }
|
|
.zt-regler-felder { display: flex; flex-wrap: wrap; gap: 0 14px; }
|
|
.zt-regler-felder .tm-feld { margin-top: 8px; }
|
|
.zt-regler-ergebnis { margin-top: 10px; font-size: 14px; line-height: 1.5; color: inherit; overflow-wrap: anywhere; }
|
|
.zt-regler-ergebnis:empty { display: none; }
|
|
.zt-regler-ergebnis[role='alert'] { color: #fecaca; }
|
|
.zt-regler .tm-feld select, .zt-regler .tm-feld input { min-height: 40px; }
|
|
.zt-art { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
|
|
.zt-art-info { background: #e0f2fe; color: #0c4a6e; }
|
|
.zt-art-aktion { background: #dcfce7; color: #14532d; }
|
|
.zt-art-urlaub { background: #fef3c7; color: #78350f; }
|
|
.zt-art-wichtig { background: #b91c1c; color: #ffffff; }
|
|
.zt-muster { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 1.4; text-align: center; }
|
|
.zt-muster-text { overflow-wrap: anywhere; }
|
|
.zt-muster-knopf { padding: 3px 12px; border-radius: 999px; border: 1.5px solid currentColor; font-size: 13px; font-weight: 700; }
|
|
.zt-knopf-felder { margin-top: 0; }
|
|
.zt-hinweis-form .zt-tag { margin-top: 0; }
|
|
.zt-hinweis-liste { min-width: 0; }
|
|
.zt-whatsapp { margin-top: 10px; padding: 0 14px 10px; border-radius: 12px; border: 1px solid var(--kb-border); background: rgba(255, 255, 255, 0.02); }
|
|
.zt-google-text {
|
|
display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; white-space: pre; overflow: auto;
|
|
border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.05); color: inherit;
|
|
}
|
|
.zt-google-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
|
|
.zt-google-aktionen a { display: inline-flex; align-items: center; text-decoration: none; }
|
|
.zt-google-meldung { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: inherit; }
|
|
.zt-google-meldung:empty { display: 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; }
|
|
#view-zeiten .zt-zeit input, #view-zeiten .zt-tag select, #view-zeiten .zt-feiertag select, #view-zeiten .zt-regler .tm-feld select, #view-zeiten .zt-regler .tm-feld input { min-height: 44px; }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.zt-fenster-name { min-width: 100%; }
|
|
.zt-zeit input { width: 7.75rem; }
|
|
.zt-plan > .tm-editor { padding: 0 12px 14px; }
|
|
.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; } }
|