86 lines
7.4 KiB
CSS
86 lines
7.4 KiB
CSS
/* Kundenansicht neu: Stile der gemeinsamen Funktionsmodule (Terminplaner, Webshop, Buchungskalender, Öffnungszeiten live, News, Analyse) unter .kn.
|
|
Besitzer: P4. Die Module sind dieselben Dateien wie in der alten Ansicht und bringen ihre Klassen mit (tm-, sh-, bk-, zt-, fn-, nw-, an-, hs-);
|
|
diese Datei ersetzt termine.css, shop.css, buchungen.css, zeiten.css, funktionen.css (News) und analyse.css vollständig. Jede Regel steht unter .kn.
|
|
Aussehen wie das Ticketsystem: Abschnitte mit Haarlinien statt Karten, Pillen für Zustände, Ring-Schatten, ein Akzent (#111). Der Prüftest
|
|
test/kundenansichtNeuModulCss.test.js sichert Scope, Palette, Verbote und die Abdeckung aller Klassen der alten Dateien.
|
|
Abschnitte: 0 gemeinsame Bausteine, 1 Terminplaner, 2 Webshop und Buchungskalender, 3 Öffnungszeiten live, 4 News, 5 Analyse. */
|
|
|
|
/* ============================================================ 0 Gemeinsame Bausteine === */
|
|
|
|
/* Abschnitt statt Karte: ohne Fläche, Rahmen und Radius; ab dem zweiten Abschnitt eine Haarlinie darüber */
|
|
.kn .kb-panel { max-width: none; margin: 0; padding: 20px 0; }
|
|
.kn .kb-panel + .kb-panel { border-top: 1px solid var(--kn-line); }
|
|
.kn .kb-panel h3 { margin: 0 0 6px; font-size: 15px; line-height: 22px; font-weight: 600; }
|
|
.kn .kb-panel h4 { margin: 16px 0 4px; font-size: 14px; line-height: 20px; font-weight: 600; }
|
|
.kn .kb-panel p { margin: 0 0 10px; }
|
|
.kn .kb-panel p:last-child { margin-bottom: 0; }
|
|
.kn .kb-empty { margin: 0; padding: 24px 0; color: var(--kn-text-2); }
|
|
|
|
/* Link im Text (auch als Knopf mit data-view) */
|
|
.kn .kb-link { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--kn-text); text-decoration: underline; text-decoration-color: var(--kn-line-strong); text-underline-offset: 3px; cursor: pointer; }
|
|
.kn .kb-link:hover { text-decoration-color: currentColor; }
|
|
|
|
/* Aufzählung mit Häkchen */
|
|
.kn .kb-checks { margin: 12px 0; padding: 0; list-style: none; }
|
|
.kn .kb-checks li { position: relative; padding: 4px 0 4px 24px; }
|
|
.kn .kb-checks li::before { content: '✓'; position: absolute; left: 0; color: var(--kn-gruen-fg); font-weight: 600; }
|
|
|
|
.kn .abo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
|
|
.kn .muted { color: var(--kn-text-2); }
|
|
.kn .error { margin: 0 0 12px; font-size: 13px; color: var(--kn-danger); }
|
|
|
|
/* Knöpfe: Hauptaktion schwarz, sonst weiß mit Ring-Schatten */
|
|
.kn .kb-btn-primary, .kn .abo-btn, .kn .kb-btn, .kn .kb-btn-outline {
|
|
display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-height: 36px; padding: 0 14px;
|
|
border: 0; border-radius: var(--kn-radius); font: inherit; font-weight: 500; line-height: 20px; text-align: center; text-decoration: none; cursor: pointer;
|
|
transition: background-color .12s, box-shadow .12s;
|
|
}
|
|
.kn .kb-btn-primary, .kn .abo-btn { background: var(--kn-accent); color: #fff; box-shadow: var(--kn-shadow-btn); }
|
|
.kn .kb-btn-primary:hover, .kn .abo-btn:hover { background: var(--kn-accent-hover); }
|
|
.kn .kb-btn, .kn .kb-btn-outline { background: var(--kn-bg); color: var(--kn-text); box-shadow: var(--kn-ring); }
|
|
.kn .kb-btn:hover, .kn .kb-btn-outline:hover { background: var(--kn-bg-hover); }
|
|
.kn .kb-btn-primary:disabled, .kn .abo-btn:disabled, .kn .kb-btn:disabled, .kn .kb-btn-outline:disabled { opacity: .4; cursor: not-allowed; }
|
|
|
|
/* Felder der Module: weiß mit Ring-Schatten, 6 px Radius, 36 px hoch */
|
|
.kn :is(.tm-feld, .sh-feld, .nw-field, .zt-tag, .zt-zeit, .zt-regler, .tm-sprung, .fn-project, .bk-posten, .bk-staffel, .bk-filter, .bk-vorschaufelder, .bk-importform, .bk-personpreis, .an-heat-bar) :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
|
|
.kn .tm-link-feld, .kn .tm-code-feld, .kn .zt-google-text, .kn .bk-link input, .kn input[readonly] {
|
|
box-sizing: border-box; min-width: 0; min-height: 36px; padding: 6px 10px; border: 0; border-radius: var(--kn-radius); background: var(--kn-bg); color: var(--kn-text);
|
|
box-shadow: var(--kn-ring); font: inherit; line-height: 20px; outline: none; transition: box-shadow .12s;
|
|
}
|
|
.kn :is(.tm-feld, .sh-feld, .nw-field, .zt-tag, .zt-zeit, .zt-regler, .tm-sprung, .fn-project, .bk-posten, .bk-staffel, .bk-filter, .bk-vorschaufelder, .bk-importform, .bk-personpreis, .an-heat-bar) textarea,
|
|
.kn .tm-code-feld, .kn .zt-google-text { min-height: 80px; resize: vertical; }
|
|
.kn :is(.tm-feld, .sh-feld, .nw-field, .zt-tag, .zt-zeit, .zt-regler, .tm-sprung, .fn-project, .bk-posten, .bk-staffel, .bk-filter, .bk-vorschaufelder, .bk-importform, .bk-personpreis, .an-heat-bar) select,
|
|
.kn .zt-feiertag select {
|
|
padding-right: 28px; appearance: none; -webkit-appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235e6678' stroke-width='1.5'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat; background-position: right 10px center;
|
|
}
|
|
.kn :is(.tm-feld, .sh-feld, .nw-field, .zt-tag, .zt-zeit, .zt-regler, .tm-sprung, .fn-project, .bk-posten, .bk-staffel, .bk-filter, .bk-vorschaufelder, .bk-importform, .bk-personpreis, .an-heat-bar) :is(input, select, textarea):focus,
|
|
.kn .tm-link-feld:focus, .kn .tm-code-feld:focus, .kn .zt-google-text:focus { box-shadow: 0 0 0 1px var(--kn-accent), 0 0 0 4px var(--kn-accent-ring); }
|
|
.kn :is(.tm-feld, .sh-feld, .nw-field, .zt-tag, .zt-zeit) [aria-invalid='true'] { box-shadow: 0 0 0 1px var(--kn-danger), 0 0 0 4px var(--kn-danger-ring); }
|
|
.kn :is(.tm-feld, .sh-feld, .nw-field, .zt-tag, .zt-zeit) input::placeholder { color: var(--kn-text-3); }
|
|
.kn :is(.tm-feld, .sh-feld, .nw-field) input[type=color] { min-height: 36px; padding: 2px; cursor: pointer; }
|
|
.kn input[type=checkbox], .kn input[type=radio] { accent-color: var(--kn-accent); }
|
|
|
|
/* Fokus schwarz, überall gleich */
|
|
.kn button:focus-visible, .kn input:focus-visible, .kn select:focus-visible, .kn textarea:focus-visible, .kn summary:focus-visible, .kn a:focus-visible, .kn [tabindex]:focus-visible {
|
|
outline: 2px solid #111; outline-offset: 2px;
|
|
}
|
|
|
|
/* Screenreader-Text */
|
|
.kn .tm-sr, .kn .sh-sr, .kn .an-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
|
|
|
|
/* Handy: Tippflächen 44 px, Felder 16 px gegen den Zoom von iOS */
|
|
@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
|
|
.kn .kb-btn-primary, .kn .abo-btn, .kn .kb-btn, .kn .kb-btn-outline { min-height: 44px; padding: 0 16px; }
|
|
.kn :is(.tm-feld, .sh-feld, .nw-field, .zt-tag, .zt-zeit, .zt-regler, .tm-sprung, .fn-project, .bk-posten, .bk-staffel, .bk-filter, .bk-vorschaufelder, .bk-importform, .bk-personpreis, .an-heat-bar) :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
|
|
.kn .tm-link-feld, .kn .tm-code-feld, .kn .zt-google-text, .kn .bk-link input, .kn input[readonly] { min-height: 44px; font-size: 16px; }
|
|
.kn .kb-link { display: inline-flex; align-items: center; min-height: 44px; }
|
|
}
|
|
|
|
/* Reduzierte Bewegung: keine Übergänge */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.kn .kb-btn-primary, .kn .abo-btn, .kn .kb-btn, .kn .kb-btn-outline { transition: none; }
|
|
.kn :is(.tm-feld, .sh-feld, .nw-field, .zt-tag, .zt-zeit, .zt-regler, .tm-sprung, .fn-project, .bk-posten, .bk-staffel, .bk-filter, .bk-vorschaufelder, .bk-importform, .bk-personpreis, .an-heat-bar) :is(input, select, textarea) { transition: none; }
|
|
}
|