/* ================================================================ Axeane UI — Notifications (angular-ui-notification 0.3.6) ---------------------------------------------------------------- Remplace l'habillage d'origine de la librairie (aplats pleins Bootstrap 3, angles droits, ombre dure) par le style Axeane UI V2. PÉRIMÈTRE : uniquement les classes `.ui-notification*` produites par la librairie. Ces éléments sont montés sur , ils ne peuvent donc pas être scopés sous une rubrique. Le gabarit de la librairie est figé :

Aucun élément ne peut y être ajouté : le pictogramme est donc dessiné en ::before, et le bouton de fermeture en ::after (toute la carte est déjà cliquable pour fermer). ⚠️ Ne pas modifier `position`, `width`, `top/left/right` : la librairie mesure et positionne l'élément en JavaScript. ================================================================ */ .ui-notification { box-sizing: border-box; padding: 14px 16px 14px 50px !important; border: 1px solid var(--ax-border, #e5e7eb) !important; border-left: 4px solid var(--ax-primary, #3f51b5) !important; border-radius: 12px !important; background: #fff !important; color: var(--ax-text-body, #1f2937) !important; font-family: var(--ax-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); box-shadow: 0 12px 32px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08) !important; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; } .ui-notification:hover { box-shadow: 0 16px 40px rgba(15, 23, 42, .22), 0 2px 6px rgba(15, 23, 42, .1) !important; transform: translateY(-1px); } /* Titre et message */ .ui-notification > h3 { display: block; margin: 0 0 3px !important; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ax-text-strong, #0f172a); font-family: inherit; } .ui-notification > h3:empty { display: none; } .ui-notification > .message { margin: 0 !important; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--ax-text-body, #1f2937); } .ui-notification a { color: var(--ax-primary, #3f51b5) !important; text-decoration: underline; font-weight: 600; } /* Pictogramme (Font Awesome 4) */ .ui-notification::before { content: "\f05a"; /* info-circle */ font-family: FontAwesome; font-size: 19px; line-height: 1; position: absolute; left: 16px; top: 15px; color: var(--ax-primary, #3f51b5); } /* Croix de fermeture (toute la carte est déjà cliquable) */ .ui-notification::after { content: "\f00d"; /* times */ font-family: FontAwesome; font-size: 12px; line-height: 1; position: absolute; right: 12px; top: 12px; color: var(--ax-text-light, #94a3b8); opacity: 0; transition: opacity .18s ease; } .ui-notification:hover::after { opacity: 1; } /* ── Types ─────────────────────────────────────────────────────── */ .ui-notification.success { background: #fff !important; color: var(--ax-text-body, #1f2937) !important; border-left-color: var(--ax-success, #16a34a) !important; } .ui-notification.success::before { content: "\f058"; /* check-circle */ color: var(--ax-success, #16a34a); } .ui-notification.error { background: #fff !important; color: var(--ax-text-body, #1f2937) !important; border-left-color: var(--ax-danger, #dc2626) !important; } .ui-notification.error::before { content: "\f057"; /* times-circle */ color: var(--ax-danger, #dc2626); } .ui-notification.warning { background: #fff !important; color: var(--ax-text-body, #1f2937) !important; border-left-color: #f0ad4e !important; } .ui-notification.warning::before { content: "\f071"; /* exclamation-triangle */ color: #d98e1f; } .ui-notification.info, .ui-notification.primary { background: #fff !important; color: var(--ax-text-body, #1f2937) !important; border-left-color: var(--ax-info, #2563eb) !important; } .ui-notification.info::before, .ui-notification.primary::before { content: "\f05a"; /* info-circle */ color: var(--ax-info, #2563eb); } /* Fermeture : la librairie pose .killed puis retire l'élément */ .ui-notification.killed { opacity: 0 !important; transform: translateY(-6px) scale(.98); transition: opacity .22s ease, transform .22s ease; } /* Écrans étroits : la carte ne doit pas toucher les bords */ @media (max-width: 480px) { .ui-notification { max-width: calc(100vw - 24px); } }