/* ============================================================ static/admin/css/notification_bell.css Notification bell widget for Unfold admin header. ============================================================ */ /* ── Wrapper ─────────────────────────────────────────────── */ .notif-bell-wrapper { display: inline-flex; align-items: center; position: relative; margin-right: 4px; } /* ── Anchor / hit target ─────────────────────────────────── */ .notif-bell-link { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 36px; height: 36px; border-radius: 8px; color: inherit; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; cursor: pointer; } .notif-bell-link:hover { background-color: rgba(239, 68, 68, 0.12); /* red-500 at 12% opacity */ color: rgb(239, 68, 68); /* Kiure primary red */ } /* ── Bell SVG icon ───────────────────────────────────────── */ .notif-bell-icon { display: block; flex-shrink: 0; /* Inherits current color from the link */ } /* ── Badge ───────────────────────────────────────────────── */ .notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9999px; /* Kiure red palette (matches primary.600 in UNFOLD COLORS) */ background-color: rgb(220, 38, 38); color: #ffffff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; white-space: nowrap; /* Micro-animation when count changes */ transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease; transform-origin: center; } .notif-badge.hidden { opacity: 0; transform: scale(0); pointer-events: none; } /* Pulse ring when there are new notifications */ .notif-badge:not(.hidden)::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid rgb(220, 38, 38); animation: notif-pulse 2.5s ease-out infinite; opacity: 0; } @keyframes notif-pulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } } /* ── Dark mode support (Unfold switches .dark on ) ──── */ .dark .notif-bell-link:hover { background-color: rgba(239, 68, 68, 0.18); } /* ── Reduced-motion preference ───────────────────────────── */ @media (prefers-reduced-motion: reduce) { .notif-badge::after { animation: none; } .notif-badge { transition: none; } }