atproto blogging
nonbinary.computer
1.invites-page {
2 max-width: 800px;
3 margin: 0 auto;
4 padding: 2rem;
5}
6
7.invites-header {
8 margin-bottom: 2rem;
9}
10
11.invites-header h1 {
12 margin: 0 0 0.5rem 0;
13}
14
15.invites-description {
16 color: var(--color-subtle);
17 margin: 0;
18}
19
20/* Invites list component styles */
21.invites-list {
22 display: flex;
23 flex-direction: column;
24 gap: 2rem;
25}
26
27.invites-section h3 {
28 margin: 0 0 1rem 0;
29 padding-bottom: 0.5rem;
30 border-bottom: 1px solid var(--color-border);
31}
32
33.empty-state {
34 color: var(--color-subtle);
35 text-align: center;
36 padding: 2rem;
37}
38
39.invite-card {
40 display: flex;
41 flex-direction: column;
42 gap: 0.75rem;
43 padding: 1rem;
44 background: var(--color-surface);
45 border: 1px solid var(--color-border);
46 border-radius: 0;
47 margin-bottom: 0.5rem;
48}
49
50.invite-card:hover {
51 border-color: var(--color-primary);
52}
53
54.invite-info {
55 display: flex;
56 flex-direction: column;
57 gap: 0.25rem;
58}
59
60.invite-from,
61.invite-to {
62 font-weight: 500;
63}
64
65.invite-resource {
66 font-size: 0.875rem;
67 color: var(--color-subtle);
68 word-break: break-all;
69}
70
71.invite-message {
72 margin: 0.5rem 0 0 0;
73 padding: 0.5rem;
74 background: var(--color-background);
75 border-inline-start: 3px solid var(--color-primary);
76 font-style: italic;
77}
78
79.invite-actions {
80 display: flex;
81 gap: 0.5rem;
82 align-items: center;
83}
84
85.invite-status {
86 display: flex;
87 align-items: center;
88}
89
90.status-badge {
91 font-size: 0.75rem;
92 padding: 0.25rem 0.75rem;
93 border-radius: 4px;
94 font-weight: 500;
95}
96
97.status-badge.pending {
98 background: var(--color-surface);
99 color: var(--color-warning);
100 border: 1px solid var(--color-warning);
101}
102
103.status-badge.accepted,
104.invite-status.accepted {
105 background: var(--color-surface);
106 color: var(--color-success);
107 border: 1px solid var(--color-success);
108}
109
110.error-message {
111 color: var(--color-error);
112 font-size: 0.875rem;
113 padding: 0.5rem;
114 background: var(--color-error-background, rgba(220, 38, 38, 0.1));
115 border-radius: 4px;
116}
117
118/* Mobile adjustments */
119@media (max-width: 600px) {
120 .invites-page {
121 padding: 1rem;
122 }
123
124 .invite-card {
125 padding: 0.75rem;
126 }
127
128 .invite-resource {
129 font-size: 0.75rem;
130 }
131}