/** * ITMP – UI Modal * * Allgemeine Modal-Komponente. * * Keine globalen Button-Styles. * Keine eigenen Design Tokens. * * Buttons werden über ui-button.css gesteuert. */ /* ============================================================ * UTILITY * ============================================================ */ .mp-hidden { display: none !important; } body.mp-modal-open { overflow: hidden; } /* ============================================================ * MODAL * ============================================================ */ .mp-modal { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; background: var(--mp-overlay-75); animation: mpModalFadeIn 0.15s ease; } /* ============================================================ * OVERLAY * ============================================================ */ .mp-modal__overlay { position: absolute; inset: 0; cursor: default; /* Standard: schließt nicht, sieht also auch nicht klickbar aus */ } /* Nur wenn mp_render_modal() mit overlay_closes=true gerendert wurde (siehe components.php) trägt das Overlay dieses Attribut. */ .mp-modal__overlay[data-modal-close] { cursor: pointer; } /* ============================================================ * INNER * ============================================================ */ .mp-modal__inner { position: relative; z-index: 1; width: 660px; max-width: 100%; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; background: var(--mp-surface); /* KORREKTUR (11.09.26): war --mp-radius-lg (8px) - Style Guide, Abschnitt "Border Radius", nennt für Modale Dialoge explizit 10px, dafür gibt es --mp-radius-modal (identisch genutzt in mp-notification.css/mp-user-menu.css für ihre Panels). */ border-radius: var(--mp-radius-modal); box-shadow: 0 24px 64px rgba(20, 22, 28, 0.28), 0 4px 14px rgba(20, 22, 28, 0.12); animation: mpModalSlideUp 0.2s ease; } /* ============================================================ * HEADER * ============================================================ */ .mp-modal__header { flex-shrink: 0; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-3); padding: 0 var(--mp-space-5) 0 var(--mp-space-8); /* KORREKTUR (11.09.26): --mp-border-light gab es nie in mp-tokens.css - lief seit jeher ins Leere, der Header hatte dadurch faktisch GAR KEINEN unteren Rahmen (nicht "unsichtbar hell", sondern komplett ungültige Deklaration, vom Browser verworfen). Richtiges Token: --mp-ink-200, dasselbe "Border Standard", das auch Cards/Panels überall sonst nutzen. */ border-bottom: 1px solid var(--mp-ink-200); } /* KORREKTUR (11.09.26): font-family/-size/-weight/line-height/color hier komplett entfernt. Grund: Guide führt "Modal-Titel" explizit als eigenen Stil unter H4 (Merriweather 600 · 20/28, siehe Style Guide Abschnitt 04). Die Werte hier (Roboto-Default, 700, 20px, 1.3) waren nie auf diesen Guide-Eintrag abgestimmt UND kollidieren inzwischen mit den globalen !important-Regeln auf h1-h5 in mp-base.css (siehe dortiger Kommentar zum Elementor-Kit-Konflikt) - eine hier lokal gesetzte, nicht-!important H3-Typografie kann gegen die globale H3- Regel (Merriweather 600, 24/32) ohnehin nicht mehr gewinnen. Der Titel bekommt seine H4-Optik jetzt stattdessen über die Klasse mp-h4 im Markup (siehe components.php, mp_render_modal()) - Tag bleibt semantisch h3 für die Dokumenten-Gliederung, Optik kommt über die Klasse, exakt wie an jeder anderen Stelle im Projekt, wo Tag- Semantik und visuelle Stufe auseinanderfallen. */ .mp-modal__header h3 { margin: 0; } /* NEU (17.09.26): Gruppiert Header-Extra-Icon (z. B. Löschen) + X-Button, damit mp_render_modal()'s $args['header_extra'] IMMER direkt links vom Schließen-Button landet - unabhängig von justify-content:space-between am äußeren .mp-modal__header. Ohne header_extra verhält es sich exakt wie vorher (ein Button in einem Wrapper statt direkt im Header). */ .mp-modal__header-actions { display: flex; align-items: center; gap: var(--mp-space-2); } /* ============================================================ * BODY * ============================================================ */ .mp-modal__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--mp-space-5) var(--mp-space-8) var(--mp-space-4); } /* ============================================================ * FOOTER * ============================================================ */ .mp-modal__footer { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--mp-space-3); /* KORREKTUR (11.09.26): war 14px - Do's & Don'ts im Style Guide nennt 14px explizit als verbotenes Beispiel ("keine 10, 14, 18 oder 30 px"). Auf var(--mp-space-3) = 12px gerundet (nächster erlaubter Wert darunter). Optisch minimal knapper (-2px), sag Bescheid falls stattdessen lieber auf --mp-space-4 (16px) hoch gerundet werden soll. */ padding: var(--mp-space-3) var(--mp-space-8); border-top: 1px solid var(--mp-ink-200); background: var(--mp-surface); } /* ============================================================ * ANIMATIONEN * ============================================================ */ @keyframes mpModalFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mpModalSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ * MOBILE * ============================================================ */ @media (max-width: 600px) { .mp-modal { padding: var(--mp-space-3); } .mp-modal__inner { width: 100%; max-height: 90vh; } .mp-modal__header { padding: 0 var(--mp-space-4) 0 var(--mp-space-5); } .mp-modal__body { padding: var(--mp-space-5); } .mp-modal__footer { /* gleiche 14px->12px-Rundung wie oben im Desktop-Footer */ padding: var(--mp-space-3) var(--mp-space-5); } }