module.css: Öffnungszeiten und News (zt-, fn-, nw-)
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Sonnet 5.5 committed
1 parent
b20ac71750
commit
a9b50a5542
2 files changed
+221
-1
No files matched your search
@@ -612,3 +612,223 @@
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.kn .sh-zeile, .kn .bk-zeile, .kn .bk-tag { transition: none; }
|
||||
}
|
||||
|
||||
/* ============================================================ 3 Öffnungszeiten live (zt-) === */
|
||||
/* Bestellseite, Einschalt-Seite, Statuskarte und Hinweise nutzen die tm-Bausteine aus Abschnitt 1. */
|
||||
|
||||
.kn .zt-kopf > .kb-panel { margin: 0; }
|
||||
.kn .zt-kopf + .zt-editor { margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--kn-line); }
|
||||
.kn .zt-editor { margin-top: 4px; }
|
||||
.kn .zt-editor[hidden], .kn .zt-editor:empty { display: none; }
|
||||
.kn .zt-hinweis h3 { margin-bottom: 8px; }
|
||||
.kn .zt-hinweis .kb-btn-outline { margin-top: 4px; }
|
||||
.kn .zt-bestellen .tm-bestellen-aktion .kb-btn-outline { justify-self: start; }
|
||||
.kn .zt-status .tm-box { margin-bottom: 0; }
|
||||
.kn .zt-status .tm-box .kb-btn-outline { flex: none; }
|
||||
|
||||
/* ---- Editor: Zeitpläne, Feiertage, Ausnahmen ---- */
|
||||
.kn .zt-editor > * + * { margin-top: 16px; }
|
||||
.kn .zt-editor > .tm-meldung:empty, .kn .zt-editor > .tm-box[hidden] { margin: 0; }
|
||||
/* die Bestätigung klebt oben: nach dem Speichern eines unteren Abschnitts springt der Fokus auf den Knopf, „gespeichert“ läge sonst außer Sicht */
|
||||
.kn .zt-editor > .tm-meldung:not(:empty) { position: sticky; top: 8px; z-index: 5; box-shadow: var(--kn-ring); }
|
||||
.kn .zt-kopfbereich:empty { display: none; }
|
||||
.kn .zt-spaeter { margin: 0 4px; }
|
||||
.kn .zt-plaene { display: grid; gap: 0; }
|
||||
.kn .zt-plan { border-bottom: 1px solid var(--kn-line); }
|
||||
.kn .zt-plan:first-child { border-top: 1px solid var(--kn-line); }
|
||||
.kn .zt-plan[open] { background: var(--kn-bg); }
|
||||
.kn .zt-plan-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; padding: 10px 8px; list-style: none; cursor: pointer; }
|
||||
.kn .zt-plan-kopf:hover { background: var(--kn-bg-hover); }
|
||||
.kn .zt-plan-kopf::-webkit-details-marker { display: none; }
|
||||
.kn .zt-plan-kopf::before { content: '▸'; flex: none; color: var(--kn-text-2); transition: transform .12s; }
|
||||
.kn .zt-plan[open] > .zt-plan-kopf::before { transform: rotate(90deg); }
|
||||
.kn .zt-plan-kopf .tm-name { display: inline; font-weight: 500; }
|
||||
.kn .zt-plan-kopf .tm-meta { display: inline; margin: 0; }
|
||||
.kn .zt-plan-kopf code, .kn .tm-formular code { padding: 1px 6px; border-radius: 4px; background: var(--kn-bg-hover); font-size: 13px; }
|
||||
.kn .zt-plan > .tm-editor { margin: 0; padding: 0 8px 16px; }
|
||||
.kn .zt-plan-form .tm-frage-knoepfe { margin-top: 16px; }
|
||||
.kn .zt-plan-form > .tm-hinweis { margin-top: 10px; }
|
||||
.kn .zt-grenze { margin: 0 0 12px; }
|
||||
.kn .zt-grenze:empty { display: none; }
|
||||
.kn .zt-werkzeuge { display: flex; flex-wrap: wrap; gap: 0 8px; }
|
||||
.kn .zt-werkzeuge:empty { display: none; }
|
||||
.kn .zt-editor .tm-abschnitt > .tm-frage-box { margin: 12px 0 16px; }
|
||||
.kn .zt-tage { display: grid; gap: 0; margin-top: 12px; }
|
||||
.kn .zt-tag { min-width: 0; padding: 10px 0; border-top: 1px solid var(--kn-line); }
|
||||
.kn .zt-tag > .tm-feld { margin-top: 0; }
|
||||
.kn .zt-tag-felder { display: grid; gap: 10px; margin-top: 8px; }
|
||||
.kn .zt-tag-felder[hidden], .kn .zt-zeiten[hidden] { display: none; }
|
||||
.kn .zt-tag select, .kn .zt-feiertag select { width: 100%; max-width: 360px; }
|
||||
.kn .zt-zeiten { display: grid; gap: 8px; }
|
||||
.kn .zt-fenster { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
|
||||
.kn .zt-fenster-name { min-width: 11rem; font-size: 13px; color: var(--kn-text-2); }
|
||||
.kn .zt-zeit { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
|
||||
.kn .zt-zeit input { width: 8.5rem; font-variant-numeric: tabular-nums; }
|
||||
.kn .zt-tag > .tm-fehler { margin-top: 8px; }
|
||||
.kn .zt-feiertag .zt-tag { margin-top: 8px; padding: 0; border: 0; }
|
||||
|
||||
/* ---- Live-Vorschau, Hinweis-Leiste, Kontakt-Leiste, Google ---- */
|
||||
.kn .zt-editor [hidden] { display: none; }
|
||||
.kn .zt-vorschau { padding: 16px 0; }
|
||||
.kn .zt-vorschau-zeile { margin: 0; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
|
||||
.kn .zt-vorschau-text { font-size: 17px; line-height: 24px; font-weight: 500; }
|
||||
.kn .zt-vorschau-text::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--kn-text-3); }
|
||||
.kn .zt-vorschau-text[data-offen='true']::before { background: #006908; }
|
||||
.kn .zt-vorschau-text[data-offen='false']::before { background: #c0123c; }
|
||||
.kn .zt-vorschau-text[data-offen='null']::before { background: #a82c00; }
|
||||
.kn .zt-regler { min-width: 0; margin: 12px 0 0; padding: 0; border: 0; }
|
||||
.kn .zt-regler legend { margin-bottom: 2px; padding: 0; font-weight: 500; }
|
||||
.kn .zt-regler-felder { display: flex; flex-wrap: wrap; gap: 0 16px; }
|
||||
.kn .zt-regler-felder .tm-feld { margin-top: 8px; }
|
||||
.kn .zt-regler-ergebnis { margin-top: 10px; overflow-wrap: anywhere; }
|
||||
.kn .zt-regler-ergebnis:empty { display: none; }
|
||||
.kn .zt-regler-ergebnis[role='alert'] { color: var(--kn-danger); }
|
||||
.kn .zt-art { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; background: #e0f2fe; color: #075985; font-size: 12px; font-weight: 500; }
|
||||
.kn .zt-art-info { background: #e0f2fe; color: #075985; }
|
||||
.kn .zt-art-aktion { background: #d7f7c2; color: #006908; }
|
||||
.kn .zt-art-urlaub { background: #fcedb9; color: #a82c00; }
|
||||
.kn .zt-art-wichtig { background: #b3093c; color: #fff; }
|
||||
.kn .zt-muster { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; height: auto; margin: 12px 0 0; padding: 10px 14px; border-radius: var(--kn-radius); font-size: 14px; line-height: 20px; font-weight: 400; text-align: center; }
|
||||
.kn .zt-muster-text { overflow-wrap: anywhere; }
|
||||
.kn .zt-muster-knopf { padding: 2px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 13px; font-weight: 600; }
|
||||
.kn .zt-knopf-felder { margin-top: 0; }
|
||||
.kn .zt-hinweis-form .zt-tag { margin-top: 0; }
|
||||
.kn .zt-hinweis-liste { min-width: 0; }
|
||||
.kn .zt-whatsapp { margin-top: 10px; padding: 0 14px 10px; border-radius: var(--kn-radius-lg); background: var(--kn-bg-subtle); }
|
||||
.kn .zt-google-text { display: block; width: 100%; font-size: 13px; line-height: 20px; white-space: pre; overflow: auto; }
|
||||
.kn .zt-google-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
|
||||
.kn .zt-google-aktionen a { display: inline-flex; align-items: center; text-decoration: none; }
|
||||
.kn .zt-google-meldung { margin-top: 10px; font-size: 13px; }
|
||||
.kn .zt-google-meldung:empty { display: none; }
|
||||
|
||||
@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
|
||||
.kn .zt-zeit input, .kn .zt-tag select, .kn .zt-feiertag select, .kn .zt-regler .tm-feld select, .kn .zt-regler .tm-feld input { min-height: 44px; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.kn .zt-fenster-name { min-width: 100%; }
|
||||
.kn .zt-zeit input { width: 7.75rem; }
|
||||
.kn .zt-plan > .tm-editor { padding: 0 0 14px; }
|
||||
.kn .zt-bestellen .tm-bestellen-aktion { justify-items: stretch; }
|
||||
.kn .zt-status .tm-box .kb-btn-outline { width: 100%; }
|
||||
.kn .zt-status .tm-aktionen > * { flex: 1 1 auto; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.kn .zt-plan-kopf::before { transition: none; }
|
||||
}
|
||||
|
||||
/* ============================================================ 4 News (fn-, nw-) === */
|
||||
/* fn-: Projektwahl, Buchungs- und Statusseite der News (dieselben Klassen nutzen alle Module); die Kachel-Klassen (fn-tile …) gehören der Funktionen-Ansicht. */
|
||||
|
||||
.kn .fn-project { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 16px; padding: 0; border: 0; }
|
||||
.kn .fn-project + .kb-panel { border-top: 0; }
|
||||
.kn .fn-project label { font-weight: 500; }
|
||||
.kn .fn-project select { flex: 1 1 220px; max-width: 420px; }
|
||||
.kn .fn-booking p, .kn .fn-status p { margin: 0 0 12px; }
|
||||
.kn .fn-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
|
||||
.kn .fn-price strong { font-size: 24px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
|
||||
.kn .fn-price span, .kn .fn-estimate { font-size: 14px; color: var(--kn-text-2); }
|
||||
.kn .fn-desc-link { margin: 0 0 12px; }
|
||||
.kn .fn-consent { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; font-size: 14px; cursor: pointer; }
|
||||
.kn .fn-consent input { flex: none; width: 16px; height: 16px; margin-top: 2px; }
|
||||
.kn .fn-thanks { max-width: 640px; margin: 0 0 16px; padding: 10px 12px; border-radius: var(--kn-radius); background: #d7f7c2; color: #006908; font-size: 14px; font-weight: 500; }
|
||||
.kn .fn-status h3 { margin: 8px 0; }
|
||||
.kn .fn-facts { display: grid; gap: 8px; margin: 16px 0; }
|
||||
.kn .fn-facts > div { display: flex; flex-wrap: wrap; gap: 4px 16px; }
|
||||
.kn .fn-facts dt { min-width: 150px; color: var(--kn-text-2); }
|
||||
.kn .fn-facts dd { margin: 0; font-weight: 500; }
|
||||
.kn .fn-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; background: #ebeef1; color: #414552; font-size: 12px; font-weight: 500; white-space: nowrap; }
|
||||
.kn .fn-pill-off, .kn .fn-pill-soon { background: #ebeef1; color: #414552; }
|
||||
.kn .fn-pill-setup { background: #fcedb9; color: #a82c00; }
|
||||
.kn .fn-pill-on { background: #d7f7c2; color: #006908; }
|
||||
|
||||
/* ---- Editor der Pinnwand ---- */
|
||||
.kn .nw { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
|
||||
.kn .nw-form { display: grid; gap: 0; min-width: 0; }
|
||||
.kn .nw-side { position: sticky; top: 24px; display: grid; gap: 16px; min-width: 0; }
|
||||
.kn .nw-card { padding: 20px 0; }
|
||||
.kn .nw-card + .nw-card { border-top: 1px solid var(--kn-line); }
|
||||
.kn .nw-card h3 { margin: 0 0 16px; }
|
||||
.kn .nw-step { margin: 0 0 4px; font-size: 12px; font-weight: 500; color: var(--kn-text-2); }
|
||||
.kn .nw-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
|
||||
.kn .nw-type { display: grid; justify-items: center; gap: 6px; padding: 14px 6px 10px; border: 0; border-radius: var(--kn-radius-lg); background: var(--kn-bg); box-shadow: var(--kn-ring); color: inherit; font: inherit; font-weight: 600; text-align: center; cursor: pointer; transition: background-color .12s; }
|
||||
.kn .nw-type:hover { background: var(--kn-bg-hover); }
|
||||
.kn .nw-type small { font-size: 12px; font-weight: 400; color: var(--kn-text-2); }
|
||||
.kn .nw-type-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--kn-radius-lg); background: var(--kn-bg-hover); }
|
||||
.kn .nw-type-ico svg { width: 22px; height: 22px; fill: none; stroke: #111; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.kn .nw-type[aria-pressed="true"] { box-shadow: 0 0 0 2px #111; }
|
||||
.kn .nw-field { display: grid; gap: 6px; margin-bottom: 16px; }
|
||||
.kn .nw-field > label { font-weight: 500; }
|
||||
.kn .nw-field input:not([type=file]):not([type=checkbox]):not([type=radio]), .kn .nw-field select, .kn .nw-field textarea { width: 100%; }
|
||||
.kn .nw-hint { margin: 0; font-size: 13px; color: var(--kn-text-2); }
|
||||
.kn .nw-hint-row { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
|
||||
.kn .nw-err { margin: 0; font-size: 13px; color: var(--kn-danger); }
|
||||
.kn .nw-err:empty { display: none; }
|
||||
.kn .nw-drop { display: grid; justify-items: center; gap: 12px; padding: 16px 14px; border-radius: var(--kn-radius-lg); background: var(--kn-bg-subtle); box-shadow: inset 0 0 0 1px var(--kn-line-strong); text-align: center; }
|
||||
.kn .nw-drop-img { width: 100%; }
|
||||
.kn .nw-drop-img img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--kn-radius); }
|
||||
.kn .nw-drop-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
|
||||
.kn .nw-drop .nw-hint { margin: 0; }
|
||||
.kn .nw-only-phone { display: none; }
|
||||
@media (pointer: coarse) { .kn .nw-only-phone { display: inline-flex; } }
|
||||
.kn .nw-swatches { display: flex; gap: 10px; }
|
||||
.kn .nw-sw { width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--kn-radius-lg); box-shadow: var(--kn-ring); cursor: pointer; }
|
||||
.kn .nw-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px #111; }
|
||||
.kn .nw-actions { margin-top: 6px; }
|
||||
.kn .nw-paper-sun { --paper: #fff6d6; }
|
||||
.kn .nw-paper-sky { --paper: #ddeffb; }
|
||||
.kn .nw-paper-coral { --paper: #ffe1d9; }
|
||||
.kn .nw-paper-white { --paper: #fff; }
|
||||
.kn .nw-sw, .kn .nw-thumb.nw-paper-sun, .kn .nw-thumb.nw-paper-sky, .kn .nw-thumb.nw-paper-coral, .kn .nw-thumb.nw-paper-white { background: var(--paper); }
|
||||
|
||||
/* ---- Vorschau: Papierzettel und Polaroid (dunkle Schrift auf hellem Papier, Drehung bleibt) ---- */
|
||||
.kn .nw-prev-label { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 12px; font-weight: 500; color: var(--kn-text-2); }
|
||||
.kn .nw-prev-label i { width: 8px; height: 8px; border-radius: 50%; background: #006908; }
|
||||
.kn #nw-preview { max-width: 380px; margin: 0 auto; color: #1a1f36; }
|
||||
.kn .nw-paper { padding: 24px 22px 20px; border-radius: 6px 6px 18px 6px; background: var(--paper, #fff); box-shadow: var(--kn-ring); transform: rotate(-1.2deg); }
|
||||
.kn .nw-paper h4 { margin: 8px 0; font-size: 19px; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; }
|
||||
.kn .nw-paper p { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
|
||||
.kn .nw-date { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5e6678; }
|
||||
.kn .nw-polaroid { margin: 0; padding: 10px 10px 14px; border-radius: 4px; background: #fff; box-shadow: var(--kn-ring); transform: rotate(-2deg); }
|
||||
.kn .nw-polaroid img, .kn .nw-ph { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; background: #ebeef1; }
|
||||
.kn .nw-ph { display: grid; place-items: center; color: #8a93a3; font-size: 14px; }
|
||||
.kn .nw-polaroid figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; }
|
||||
.kn .nw-polaroid figcaption b { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
|
||||
.kn .nw-polaroid figcaption span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5e6678; }
|
||||
.kn .nw-combo { display: grid; gap: 0; }
|
||||
.kn .nw-combo .nw-paper { position: relative; margin: -22px 10px 0 24px; transform: rotate(2deg); }
|
||||
.kn .nw-prev-toggle { display: none; width: 100%; justify-content: center; }
|
||||
|
||||
/* ---- Listen: hängende und abgelaufene Zettel ---- */
|
||||
.kn .nw-lists h3 { margin: 0; font-size: 15px; font-weight: 600; }
|
||||
.kn .nw-lists-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 8px; }
|
||||
.kn .nw-expired-title { margin-top: 24px !important; }
|
||||
.kn .nw-empty { margin: 8px 0 0; color: var(--kn-text-2); }
|
||||
.kn .nw-rows { margin: 0; padding: 0; list-style: none; }
|
||||
.kn .nw-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--kn-line); }
|
||||
.kn .nw-thumb { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: var(--kn-radius); object-fit: cover; color: #1a1f36; font-weight: 600; }
|
||||
.kn .nw-row-text { flex: 1 1 140px; min-width: 0; }
|
||||
.kn .nw-row-text b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
|
||||
.kn .nw-row-text small { font-size: 13px; color: var(--kn-text-2); }
|
||||
.kn .nw-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
|
||||
.kn .nw-row-actions button, .kn .nw-row-actions select { min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--kn-radius); background: var(--kn-bg); box-shadow: var(--kn-ring); color: inherit; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
|
||||
.kn .nw-row-actions button:hover { background: var(--kn-bg-hover); }
|
||||
.kn .nw-row-actions .nw-del { color: var(--kn-danger); }
|
||||
.kn .nw-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
|
||||
.kn .nw-row-err { flex: 1 0 100%; }
|
||||
|
||||
@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
|
||||
.kn .nw { grid-template-columns: minmax(0, 1fr); }
|
||||
.kn .nw-side { position: static; order: 2; }
|
||||
.kn .nw-prev-toggle { display: flex; }
|
||||
.kn .nw-prev { display: none; }
|
||||
.kn .nw-prev.is-open { display: block; }
|
||||
.kn .nw-types { gap: 8px; }
|
||||
.kn .nw-type small { display: none; }
|
||||
.kn .nw-type, .kn .nw-sw { min-height: 44px; }
|
||||
.kn .nw-actions .abo-btn { flex: 1 1 auto; }
|
||||
.kn .nw-row-actions button, .kn .nw-row-actions select { min-height: 44px; }
|
||||
.kn .fn-facts dt { min-width: 0; flex: 1 0 100%; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.kn .nw-type { transition: none; }
|
||||
}
|
||||
@@ -72,7 +72,7 @@ function klassen(css, praefix) {
|
||||
return treffer
|
||||
}
|
||||
|
||||
const FERTIG = ['tm', 'sh', 'bk'] // Präfixe mit geprüfter Abdeckung; Task 12 und 13 ergänzen sie
|
||||
const FERTIG = ['tm', 'sh', 'bk', 'zt', 'fn', 'nw'] // Präfixe mit geprüfter Abdeckung; Task 13 ergänzt an und hs
|
||||
const UNGENUTZT = new Set([]) // alte Klassen, die in keiner JS-Datei vorkommen; der Test prüft das
|
||||
const ALT = { tm: 'termine.css', sh: 'shop.css', bk: 'buchungen.css', zt: 'zeiten.css', an: 'analyse.css', hs: 'analyse.css', nw: 'funktionen.css' }
|
||||
const FN_NEWS = ['fn-project', 'fn-booking', 'fn-price', 'fn-estimate', 'fn-desc-link', 'fn-consent', 'fn-thanks', 'fn-status', 'fn-facts', 'fn-pill', 'fn-pill-setup']
|
||||
|
||||
Reference in new issue
Block a user