79 lines
1.6 KiB
CSS
79 lines
1.6 KiB
CSS
#noti-center-box {
|
|
background-color: alpha(#fff, 0.09);
|
|
|
|
border: 1px solid alpha(#111, 0.3);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
margin: 6px;
|
|
}
|
|
|
|
#noti-clear-button {
|
|
min-width: 10px;
|
|
min-height: 40px;
|
|
border-radius: 50px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#noti-clear-button {
|
|
background-color: alpha(#888, 0.09);
|
|
}
|
|
#noti-clear-button:hover {
|
|
background-color: alpha(#fff, 0.09);
|
|
}
|
|
|
|
/* Stacked notification group styles */
|
|
.stacked-notification-group {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.stacked-notification-container {
|
|
}
|
|
|
|
.stacked-notification-item {
|
|
background-color: alpha(#000, 0.4);
|
|
border: 0.5px solid alpha(#111, 0.4);
|
|
box-shadow:
|
|
inset 0 0 200px 0 alpha(#111, 0.5),
|
|
inset 0 0 0 0.5px alpha(#aaa, 0.4);
|
|
border-radius: 12px;
|
|
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
#notif-clear-btn {
|
|
border-radius: 10px;
|
|
font-size: 12px;
|
|
padding: 2px;
|
|
}
|
|
|
|
#notif-clear-btn:hover {
|
|
background-color: var(--surface-bright);
|
|
}
|
|
|
|
#stacked-notification-item:hover {
|
|
background-color: alpha(#111, 0.5);
|
|
box-shadow:
|
|
inset 0 0 200px 0 alpha(#111, 0.5),
|
|
inset 0 0 0 0.5px alpha(#aaa, 0.4),
|
|
0 4px 12px alpha(#000, 0.3);
|
|
}
|
|
|
|
/* Stack count indicator */
|
|
#stack-count-indicator {
|
|
font-size: 10px;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
margin: 2px 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Expanded view styles - notifications use their default styling */
|
|
#expanded-notification-list {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Make expanded notifications clickable with subtle hover effect */
|
|
#expanded-notification-list:hover {
|
|
background-color: alpha(#111, 0.1);
|
|
border-radius: 8px;
|
|
transition: background-color 0.2s ease;
|
|
}
|