Add visual feedback for unread messages in the menu. Implement a pulsing animation and color change for the inbox button when there are unread chats. Also, add sound notification for new messages received, enhancing user experience.
This commit is contained in:
@@ -67,6 +67,24 @@ html, body, #app {
|
||||
background-color: #52a052;
|
||||
}
|
||||
|
||||
.menu button.has-unread {
|
||||
background-color: #ff6b6b;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.menu button.has-unread:hover {
|
||||
background-color: #ff5252;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.menu span {
|
||||
display: inline-block;
|
||||
padding: 0.375em 0.4em;
|
||||
|
||||
Reference in New Issue
Block a user