/** * MP Notifications - Styles * Gehört zum Snippet "MP Notifications (Universal)". * Ablage: wp-content/themes/EUER-CHILD-THEME/assets/css/mp-notification.css * * ARCHITEKTUR / KONVENTIONEN (bewusst identisch zu mp-user-menu.css + * ui-button.css gehalten, NICHT dem alten "ANB Notification Dropdown"- * Snippet, das dieses hier ablöst): * * 1. Nur Tokens aus mp-tokens.css, keine eigenen Hex-/px-Farbwerte * (Stand 10.09.26-Architektur, siehe Kopf von ui-button.css). * Einzige Ausnahme: der Panel-Schatten "0 16px 40px rgba(20,22,28,.18)" * ist ein exakter Figma-Wert ohne passendes Token - genau wie * .mp-um-panel seinen eigenen Schatten ebenfalls literal führt. * * 2. Der Trigger-Button und der Footer-Link sind KEINE eigenen * Button-Styles, sondern nutzen im Markup zusätzlich die * bestehenden .ui-button-Klassen (ui-button--icon-ghost bzw. * ui-button--tertiary). Dadurch zieht "Alle Benachrichtigungen * anzeigen" automatisch jede globale Tertiary-Änderung aus * ui-button.css mit - wie gewünscht ("wenn ich global tertiary * ändere, soll sich das hier mitändern"). .mp-notif-* Klassen * liefern hier NUR Layout/Position, nie Farbe. * * 3. Öffnen/Schließen inkl. Mobile-Bottom-Sheet folgt 1:1 dem Muster * von mp-user-menu.js/css (Portal ins , Backdrop, fixed * Panel unten). Ausnahme: kein Chevron (Glocke hat keinen Pfeil) * und kein Notch-Dreieck am Panel - im Figma-Node ("Notifications * · 336px") ist keines vorgesehen, anders als beim User-Menu. * * ANNAHME (nicht im Figma-Node "Notifications · 336px" enthalten, * siehe auch PHP-Snippet-Kommentar für die vollständige Liste): * die read/unread-Optik (ausgegrauter Punkt + normale statt fette * Schrift) ist eine eigene Ergänzung, keine Figma-Vorgabe. */ .mp-notif-root { position: relative; display: inline-block; font-family: var(--mp-font-body); } /* ---- Trigger -------------------------------------------------------- Markup: