notyfikacje

server/static/retro.css

@@ -100,6 +100,16 @@ nav a {
     margin-right: 0.2em;
 }
 nav a:hover { background: var(--mc-cyan); color: var(--mc-black); }
+.nav-badge {
+    display: inline-block;
+    background: var(--mc-yellow);
+    color: var(--mc-black);
+    border: 1px solid var(--mc-black);
+    padding: 0 0.35em;
+    margin-left: 0.25em;
+    font-size: 0.8em;
+    line-height: 1.2;
+}
 
 /* --- Panels and dialogs --- */
 .panel {
@@ -393,3 +403,44 @@ textarea {
 .note-delete-form { margin-top: 0.75rem; }
 .note-delete-form button { background: var(--mc-red); color: var(--mc-bright); }
 .note-delete-form button:hover { background: var(--mc-red-bright); }
+
+
+/* --- Notifications --- */
+.notification-list { list-style: none; padding: 0; margin: 1rem 0; }
+.notification-item {
+    border: 2px solid var(--mc-dim);
+    margin: 0.5rem 0;
+    background: var(--mc-deep);
+}
+.notification-item.unread { border-left: 6px solid var(--mc-yellow); }
+.notification-item.read { opacity: 0.78; }
+.notification-item a {
+    display: block;
+    padding: 0.5rem 0.7rem;
+    color: var(--mc-fg);
+    text-decoration: none;
+}
+.notification-item a:hover {
+    background: var(--mc-cyan);
+    color: var(--mc-black);
+}
+.notification-message { display: block; margin-bottom: 0.25rem; }
+.notification-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.75em;
+    font-size: 0.8em;
+    color: var(--mc-dim);
+}
+.notification-item a:hover .notification-meta { color: var(--mc-black); }
+.notification-status {
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    padding: 0 0.45em;
+    background: var(--mc-dim);
+    color: var(--mc-black);
+}
+.notification-item.unread .notification-status {
+    background: var(--mc-yellow);
+    color: var(--mc-black);
+}