diff options
Diffstat (limited to 'front/src/styles/NotificationCenter.css')
| -rw-r--r-- | front/src/styles/NotificationCenter.css | 263 |
1 files changed, 263 insertions, 0 deletions
diff --git a/front/src/styles/NotificationCenter.css b/front/src/styles/NotificationCenter.css new file mode 100644 index 0000000..6991118 --- /dev/null +++ b/front/src/styles/NotificationCenter.css @@ -0,0 +1,263 @@ +/* Notification Badge in Sidebar */ +.notification-item { + position: relative; +} + +.notification-icon-wrapper { + position: relative; + display: inline-block; +} + +.notification-badge { + position: absolute; + top: -4px; + right: -8px; + background: var(--color-error); + color: white; + border-radius: 10px; + padding: 2px 6px; + font-size: 10px; + font-weight: bold; + min-width: 18px; + text-align: center; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } + 100% { + transform: scale(1); + } +} + +/* Notification Center Modal */ +.notification-center { + max-width: 500px; + width: 100%; + max-height: 600px; + display: flex; + flex-direction: column; +} + +.notification-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + border-bottom: 1px solid var(--color-border); +} + +.notification-header h2 { + margin: 0; + color: var(--color-text); + font-size: 24px; +} + +.notification-actions { + display: flex; + gap: 8px; +} + +.mark-all-read-btn, +.clear-all-btn { + padding: 6px 12px; + font-size: 12px; + border: 1px solid var(--color-border); + background: transparent; + color: var(--color-text-secondary); + border-radius: 4px; + cursor: pointer; + transition: all 0.2s; +} + +.mark-all-read-btn:hover, +.clear-all-btn:hover { + background: var(--color-surface); + color: var(--color-text); + border-color: var(--color-primary); +} + +/* Notification Filters */ +.notification-filters { + display: flex; + gap: 8px; + padding: 12px 20px; + background: var(--color-surface); + border-bottom: 1px solid var(--color-border); +} + +.filter-btn { + padding: 8px 16px; + background: transparent; + border: 1px solid var(--color-border); + border-radius: 20px; + color: var(--color-text-secondary); + cursor: pointer; + font-size: 14px; + transition: all 0.2s; +} + +.filter-btn:hover { + background: var(--color-background); + color: var(--color-text); +} + +.filter-btn.active { + background: var(--color-primary); + color: white; + border-color: var(--color-primary); +} + +/* Notification List */ +.notification-list { + flex: 1; + overflow-y: auto; + background: var(--color-background); +} + +.no-notifications { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 60px 20px; + text-align: center; +} + +.no-notifications p { + margin: 16px 0 0 0; + color: var(--color-text-muted); + font-size: 16px; +} + +/* Notification Item */ +.notification-item { + display: flex; + align-items: flex-start; + padding: 16px 20px; + border-bottom: 1px solid var(--color-border-light); + cursor: pointer; + transition: background 0.2s; + position: relative; +} + +.notification-item:hover { + background: var(--color-surface); +} + +.notification-item.unread { + background: var(--color-surface); +} + +.notification-icon { + flex-shrink: 0; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-background); + border-radius: 50%; + margin-right: 12px; +} + +.notification-content { + flex: 1; + min-width: 0; +} + +.notification-user { + display: flex; + gap: 12px; + align-items: flex-start; +} + +.notification-text { + flex: 1; + min-width: 0; +} + +.notification-text p { + margin: 0; + color: var(--color-text); + font-size: 14px; + line-height: 1.4; +} + +.notification-item.unread .notification-text p { + font-weight: 500; +} + +.notification-time { + display: block; + margin-top: 4px; + color: var(--color-text-muted); + font-size: 12px; +} + +.unread-indicator { + position: absolute; + left: 8px; + top: 50%; + transform: translateY(-50%); + width: 8px; + height: 8px; + background: var(--color-primary); + border-radius: 50%; + animation: pulse 2s infinite; +} + +/* Scrollbar Styling */ +.notification-list::-webkit-scrollbar { + width: 8px; +} + +.notification-list::-webkit-scrollbar-track { + background: var(--color-background); +} + +.notification-list::-webkit-scrollbar-thumb { + background: var(--color-border); + border-radius: 4px; +} + +.notification-list::-webkit-scrollbar-thumb:hover { + background: var(--color-text-muted); +} + +/* Mobile Responsive */ +@media (max-width: 600px) { + .notification-center { + max-width: 100%; + max-height: 90vh; + } + + .notification-header { + padding: 16px; + } + + .notification-header h2 { + font-size: 20px; + } + + .notification-actions { + flex-direction: column; + gap: 4px; + } + + .mark-all-read-btn, + .clear-all-btn { + padding: 4px 8px; + font-size: 11px; + } + + .notification-item { + padding: 12px 16px; + } +}
\ No newline at end of file |