/* assets/css/notifications.css (Final mit Anti-Flicker-Fix) */ :root { --p5-red: #d1001f; --p5-black: #111; --p5-white: #fff; --p5-grey: #c0c0c0; --p5-unread-bg: rgba(209, 0, 31, 0.15); --p5-font: 'Inter', sans-serif; } .notification-container, .notification-container-mobile { position: relative; display: inline-block; } .notification-badge { position: absolute; top: -6px; right: -6px; background-color: var(--p5-red); color: var(--p5-white); border-radius: 50%; padding: 1px 5px; font-size: 0.8rem; font-weight: bold; border: 2px solid var(--p5-black); min-width: 22px; text-align: center; box-shadow: 0 0 10px var(--p5-red); animation: pulse 2s infinite; } .notification-container-mobile .notification-badge { top: 2px; right: -2px; } @keyframes pulse { 0% { box-shadow: 0 0 5px rgba(209, 0, 31, 0.5); } 50% { box-shadow: 0 0 15px rgba(209, 0, 31, 1); } 100% { box-shadow: 0 0 5px rgba(209, 0, 31, 0.5); } } .notifications-dropdown { position: fixed; width: 380px; max-height: 450px; background-color: var(--p5-black); border: 2px solid var(--p5-white); box-shadow: 5px 5px 0px var(--p5-red); z-index: 2000; display: flex; flex-direction: column; font-family: var(--p5-font); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); --translateX: -100%; transform: translateX(var(--translateX)) translateY(-10px) scale(0.98); /* * ANTI-FLICKER-FIX: * Standardmäßig ist das Element komplett unsichtbar (opacity: 0, visibility: hidden) * und hat KEINE Übergangsanimation (transition: none). * Das verhindert, dass es beim Laden der Seite kurz aufblitzt. */ opacity: 0; visibility: hidden; transition: none; } /* * ANTI-FLICKER-FIX: * Die Übergangsanimationen werden erst dann aktiviert, wenn das JavaScript * die Klasse 'js-ready' zum -Tag hinzugefügt hat. */ .js-ready .notifications-dropdown { transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s; } .notifications-dropdown.is-open { opacity: 1; visibility: visible; transform: translateX(var(--translateX)) translateY(0) scale(1); transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s; } .notifications-header { padding: 12px 15px; background-color: var(--p5-red); color: var(--p5-white); text-transform: uppercase; font-weight: bold; } .notifications-header h3 { margin: 0; font-size: 1rem; } .notifications-list { list-style: none; padding: 5px; margin: 0; overflow-y: auto; flex-grow: 1; } .notifications-list::-webkit-scrollbar { width: 8px; } .notifications-list::-webkit-scrollbar-track { background: var(--p5-black); } .notifications-list::-webkit-scrollbar-thumb { background: var(--p5-red); } .notification-item { display: flex; align-items: center; border-radius: 4px; margin-bottom: 5px; transition: background-color 0.2s ease; position: relative; } .notification-item.new-item { animation: newItemFadeIn 0.5s ease-out; } @keyframes newItemFadeIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .notification-item.unread { background-color: var(--p5-unread-bg); } .notification-item:hover { background-color: rgba(255, 255, 255, 0.05); } .notification-item a { display: flex; align-items: center; padding: 10px; text-decoration: none; color: var(--p5-grey); flex-grow: 1; } .notification-avatar img { width: 40px; height: 40px; border-radius: 50%; margin-right: 12px; border: 2px solid #555; } .notification-item.unread .notification-avatar img { border-color: var(--p5-red); } .notification-content p { margin: 0; font-size: 0.9rem; line-height: 1.4; } .notification-content p strong { color: var(--p5-white); font-weight: 600; } .notification-content .notification-time { font-size: 0.75rem; color: #888; margin-top: 4px; } .notification-item-empty { padding: 40px 15px; text-align: center; color: #888; font-style: italic; } .notification-delete-btn { background: transparent; border: none; color: #666; cursor: pointer; font-size: 1rem; padding: 10px 15px; transition: color 0.2s ease, transform 0.2s ease; z-index: 2; } .notification-delete-btn:hover { color: var(--p5-red); transform: scale(1.2); }