(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1.profile-header {
2 display: flex;
3 align-items: flex-start;
4 gap: 24px;
5 margin-bottom: 32px;
6 padding-bottom: 24px;
7 border-bottom: 1px solid var(--border);
8}
9
10.profile-avatar {
11 width: 80px;
12 height: 80px;
13 min-width: 80px;
14 border-radius: 50%;
15 background: var(--bg-tertiary);
16 display: flex;
17 align-items: center;
18 justify-content: center;
19 font-weight: 600;
20 font-size: 2rem;
21 color: var(--text-secondary);
22 overflow: hidden;
23 border: 1px solid var(--border);
24}
25
26.profile-avatar img {
27 width: 100%;
28 height: 100%;
29 object-fit: cover;
30}
31
32.profile-avatar-link {
33 text-decoration: none;
34}
35
36.profile-info {
37 flex: 1;
38 display: flex;
39 flex-direction: column;
40 gap: 4px;
41}
42
43.profile-name {
44 font-size: 1.5rem;
45 font-weight: 700;
46 color: var(--text-primary);
47 line-height: 1.2;
48 overflow-wrap: break-word;
49 word-break: break-word;
50}
51
52.profile-handle-row {
53 display: flex;
54 align-items: center;
55 gap: 12px;
56 margin-top: 4px;
57 flex-wrap: wrap;
58}
59
60.profile-handle-link {
61 color: var(--text-tertiary);
62 text-decoration: none;
63 font-size: 1rem;
64 transition: color 0.15s;
65 overflow-wrap: break-word;
66 word-break: break-all;
67}
68
69.profile-handle-link:hover {
70 color: var(--text-secondary);
71}
72
73.profile-bluesky-link {
74 display: inline-flex;
75 align-items: center;
76 gap: 6px;
77 color: #3b82f6;
78 text-decoration: none;
79 font-size: 0.85rem;
80 font-weight: 500;
81 padding: 2px 8px;
82 border-radius: var(--radius-sm);
83 background: rgba(59, 130, 246, 0.1);
84 transition: all 0.15s ease;
85 width: fit-content;
86}
87
88.profile-bluesky-link:hover {
89 background: rgba(59, 130, 246, 0.15);
90}
91
92.profile-stats {
93 display: flex;
94 gap: 24px;
95 margin-top: 12px;
96}
97
98.profile-stat {
99 color: var(--text-tertiary);
100 font-size: 0.9rem;
101}
102
103.profile-stat strong {
104 color: var(--text-primary);
105 font-weight: 600;
106}
107
108.profile-tabs {
109 display: flex;
110 gap: 24px;
111 margin-bottom: 24px;
112 border-bottom: 1px solid var(--border);
113 flex-wrap: wrap;
114 row-gap: 8px;
115}
116
117.profile-tab {
118 padding: 12px 0;
119 font-size: 0.95rem;
120 font-weight: 500;
121 color: var(--text-tertiary);
122 background: transparent;
123 border: none;
124 cursor: pointer;
125 transition: all 0.15s ease;
126 position: relative;
127}
128
129.profile-tab:hover {
130 color: var(--text-primary);
131}
132
133.profile-tab.active {
134 color: var(--text-primary);
135}
136
137.profile-tab.active::after {
138 content: "";
139 position: absolute;
140 bottom: -1px;
141 left: 0;
142 right: 0;
143 height: 2px;
144 background: var(--text-primary);
145}
146
147.profile-badge-wrapper {
148 display: inline-flex;
149 align-items: center;
150}
151
152.profile-badge-clickable {
153 position: relative;
154 display: inline-flex;
155 align-items: center;
156 cursor: pointer;
157 margin-left: 8px;
158}
159
160.badge-info-popover {
161 position: absolute;
162 top: calc(100% + 8px);
163 left: 50%;
164 transform: translateX(-50%);
165 padding: 16px;
166 background: var(--bg-elevated);
167 border: 1px solid var(--border);
168 border-radius: var(--radius-md);
169 box-shadow: var(--shadow-lg);
170 font-size: 0.85rem;
171 white-space: nowrap;
172 z-index: 100;
173 min-width: 200px;
174}
175
176.badge-info-title {
177 font-weight: 600;
178 color: var(--text-primary);
179 margin-bottom: 8px;
180}
181
182.verifier-link {
183 display: flex;
184 align-items: center;
185 gap: 8px;
186 padding: 8px;
187 background: var(--bg-tertiary);
188 border-radius: var(--radius-sm);
189 text-decoration: none;
190 transition: background 0.15s ease;
191}
192
193.verifier-link:hover {
194 background: var(--bg-hover);
195}
196
197.verifier-avatar {
198 width: 24px;
199 height: 24px;
200 border-radius: 50%;
201 object-fit: cover;
202}
203
204.verifier-name {
205 color: var(--text-primary);
206 font-size: 0.85rem;
207 font-weight: 500;
208}
209
210.profile-suspended {
211 display: flex;
212 flex-direction: column;
213 align-items: center;
214 justify-content: center;
215 padding: 60px 20px;
216 text-align: center;
217 background: var(--bg-secondary);
218 border-radius: var(--radius-lg);
219 margin-top: 20px;
220 border: 1px solid var(--border);
221}
222
223.suspended-icon {
224 font-size: 40px;
225 margin-bottom: 16px;
226 color: var(--text-tertiary);
227}
228
229.profile-suspended h2 {
230 color: var(--text-primary);
231 margin-bottom: 8px;
232 font-size: 1.25rem;
233}
234
235@media (max-width: 640px) {
236 .profile-header {
237 flex-direction: column;
238 text-align: center;
239 }
240
241 .profile-info {
242 align-items: center;
243 }
244
245 .profile-handle-row {
246 justify-content: center;
247 }
248
249 .profile-stats {
250 justify-content: center;
251 }
252
253 .profile-tabs {
254 justify-content: center;
255 gap: 16px;
256 }
257}
258
259.profile-margin-details {
260 margin-top: 16px;
261 display: flex;
262 flex-direction: column;
263 gap: 12px;
264}
265
266.profile-bio {
267 font-size: 0.95rem;
268 color: var(--text-primary);
269 line-height: 1.5;
270 white-space: pre-wrap;
271 max-width: 600px;
272}
273
274.profile-links {
275 display: flex;
276 flex-wrap: wrap;
277 gap: 8px;
278 align-items: center;
279}
280
281.profile-link-chip {
282 display: inline-flex;
283 align-items: center;
284 gap: 6px;
285 padding: 6px 12px;
286 background: var(--bg-tertiary);
287 border: 1px solid var(--border);
288 border-radius: 8px;
289 color: var(--text-secondary);
290 text-decoration: none;
291 font-size: 0.85rem;
292 font-weight: 500;
293 transition: all 0.2s ease;
294}
295
296.profile-link-chip:hover {
297 background: var(--bg-hover);
298 color: var(--text-primary);
299 border-color: var(--text-tertiary);
300 transform: translateY(-1px);
301}
302
303.profile-link-chip.main-website {
304 background: rgba(var(--accent-rgb), 0.1);
305 color: var(--accent);
306 border-color: var(--accent);
307}
308
309.profile-link-chip.main-website:hover {
310 background: rgba(var(--accent-rgb), 0.15);
311}