margin.at
1.notifications-page {
2 max-width: 680px;
3 margin: 0 auto;
4}
5
6.notifications-list {
7 display: flex;
8 flex-direction: column;
9 gap: 12px;
10}
11
12.notification-item {
13 display: flex;
14 gap: 16px;
15 align-items: flex-start;
16 text-decoration: none;
17 color: inherit;
18}
19
20.notification-item:hover {
21 background: var(--bg-hover);
22}
23
24.notification-icon {
25 width: 36px;
26 height: 36px;
27 border-radius: var(--radius-full);
28 display: flex;
29 align-items: center;
30 justify-content: center;
31 background: var(--bg-tertiary);
32 color: var(--text-secondary);
33 flex-shrink: 0;
34}
35
36.notification-icon[data-type="like"] {
37 color: #ef4444;
38 background: rgba(239, 68, 68, 0.1);
39}
40
41.notification-icon[data-type="reply"] {
42 color: #3b82f6;
43 background: rgba(59, 130, 246, 0.1);
44}
45
46.notification-content {
47 flex: 1;
48 min-width: 0;
49}
50
51.notification-text {
52 font-size: 0.95rem;
53 margin-bottom: 4px;
54 line-height: 1.4;
55 color: var(--text-primary);
56}
57
58.notification-text strong {
59 font-weight: 600;
60}
61
62.notification-time {
63 font-size: 0.85rem;
64 color: var(--text-tertiary);
65}