.notification-bell {
position: relative;
display: inline-block;
}
.bell-icon {
cursor: pointer;
position: relative;
}
.notification-icon {
font-size: 24px;
}
.notification-count {
position: absolute;
top: -5px;
right: -5px;
background-color: red;
color: white;
border-radius: 50%;
padding: 3px 6px;
font-size: 12px;
}
.notification-dropdown {
position: absolute;
top: 37px;
right: -86px;
min-width: 334px;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: none;
z-index: 1;
padding: 13px;
font-size: 18px;
}
.notification-list {
list-style: none;
padding: 0;
margin: 0;
}
.notification-list li {
padding: 10px;
border-bottom: 1px solid #eee;
} .notification-list li:hover {
background-color: #f5f5f5;
} .notification-list li {
color: red;
} @keyframes bellBlink {
0% { transform: rotate(0); }
50% { transform: rotate(20deg); }
100% { transform: rotate(0); }
}
.bell-icon.animate {
animation: bellBlink 0.5s infinite alternate;
} @keyframes bellShake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
.bell-icon.shake {
animation: bellShake 0.5s ease-in-out 1;
} @keyframes bellShakeContinuous {
0% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
100% { transform: rotate(-10deg); }
}
.bell-icon.shake-continuous {
animation: bellShakeContinuous 0.5s infinite;
}
.notification-list li {
padding: 10px 0;
cursor: pointer;
font-size: 18px;
color: #333; }
.notification-list li.unread {
color: red; }
.notification-list li:hover {
background-color: greenyellow;
}
.bell-icon-container {
position: relative !important;
display: inline-block !important;
}
.bell-icon {
position: relative !important;
z-index: 1 !important;
}
.notification-dropdown {
position: absolute;
top: 37px;
right: -86px;
min-width: 334px;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: none;
z-index: 1;
padding: 13px;
font-size: 18px;
max-height: 300px; overflow-y: auto; }