ClaudeandClaude Opus 5.5
f01ed15247
Ungespeicherte Eingaben in anderen Formularen bleiben stehen: nach dem Speichern wird nur die Plankarte, die Planliste (mit den Eingaben der übrigen Karten), Feiertage oder Ausnahmen neu gezeichnet, „Nein, danke“ entfernt nur die Frage. Während des Speicherns sind auch die Eingabefelder gesperrt. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
85 lines
5.5 KiB
CSS
85 lines
5.5 KiB
CSS
/* Öffnungszeiten live im Kundenbereich (zeiten.js, zeiten-bestellen.js und der Editor: zeiten-editor.js, zeiten-plaene.js, zeiten-ausnahmen.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; }
|
|
.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; }
|
|
|
|
@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 { 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; } }
|