margin.at
1.profile-header {
2 display: flex;
3 align-items: center;
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}
49
50.profile-handle-row {
51 display: flex;
52 align-items: center;
53 gap: 12px;
54 margin-top: 4px;
55 flex-wrap: wrap;
56}
57
58.profile-handle-link {
59 color: var(--text-tertiary);
60 text-decoration: none;
61 font-size: 1rem;
62 transition: color 0.15s;
63}
64
65.profile-handle-link:hover {
66 color: var(--text-secondary);
67}
68
69.profile-bluesky-link {
70 display: inline-flex;
71 align-items: center;
72 gap: 6px;
73 color: #3b82f6;
74 text-decoration: none;
75 font-size: 0.85rem;
76 font-weight: 500;
77 padding: 2px 8px;
78 border-radius: var(--radius-sm);
79 background: rgba(59, 130, 246, 0.1);
80 transition: all 0.15s ease;
81}
82
83.profile-bluesky-link:hover {
84 background: rgba(59, 130, 246, 0.15);
85}
86
87.profile-stats {
88 display: flex;
89 gap: 24px;
90 margin-top: 12px;
91}
92
93.profile-stat {
94 color: var(--text-tertiary);
95 font-size: 0.9rem;
96}
97
98.profile-stat strong {
99 color: var(--text-primary);
100 font-weight: 600;
101}
102
103.profile-tabs {
104 display: flex;
105 gap: 24px;
106 margin-bottom: 24px;
107 border-bottom: 1px solid var(--border);
108}
109
110.profile-tab {
111 padding: 12px 0;
112 font-size: 0.95rem;
113 font-weight: 500;
114 color: var(--text-tertiary);
115 background: transparent;
116 border: none;
117 cursor: pointer;
118 transition: all 0.15s ease;
119 position: relative;
120}
121
122.profile-tab:hover {
123 color: var(--text-primary);
124}
125
126.profile-tab.active {
127 color: var(--text-primary);
128}
129
130.profile-tab.active::after {
131 content: "";
132 position: absolute;
133 bottom: -1px;
134 left: 0;
135 right: 0;
136 height: 2px;
137 background: var(--text-primary);
138}
139
140.profile-badge-wrapper {
141 display: inline-flex;
142 align-items: center;
143}
144
145.profile-badge-clickable {
146 position: relative;
147 display: inline-flex;
148 align-items: center;
149 cursor: pointer;
150 margin-left: 8px;
151}
152
153.badge-info-popover {
154 position: absolute;
155 top: calc(100% + 8px);
156 left: 50%;
157 transform: translateX(-50%);
158 padding: 16px;
159 background: var(--bg-elevated);
160 border: 1px solid var(--border);
161 border-radius: var(--radius-md);
162 box-shadow: var(--shadow-lg);
163 font-size: 0.85rem;
164 white-space: nowrap;
165 z-index: 100;
166 min-width: 200px;
167}
168
169.badge-info-title {
170 font-weight: 600;
171 color: var(--text-primary);
172 margin-bottom: 8px;
173}
174
175.verifier-link {
176 display: flex;
177 align-items: center;
178 gap: 8px;
179 padding: 8px;
180 background: var(--bg-tertiary);
181 border-radius: var(--radius-sm);
182 text-decoration: none;
183 transition: background 0.15s ease;
184}
185
186.verifier-link:hover {
187 background: var(--bg-hover);
188}
189
190.verifier-avatar {
191 width: 24px;
192 height: 24px;
193 border-radius: 50%;
194 object-fit: cover;
195}
196
197.verifier-name {
198 color: var(--text-primary);
199 font-size: 0.85rem;
200 font-weight: 500;
201}
202
203.profile-suspended {
204 display: flex;
205 flex-direction: column;
206 align-items: center;
207 justify-content: center;
208 padding: 60px 20px;
209 text-align: center;
210 background: var(--bg-secondary);
211 border-radius: var(--radius-lg);
212 margin-top: 20px;
213 border: 1px solid var(--border);
214}
215
216.suspended-icon {
217 font-size: 40px;
218 margin-bottom: 16px;
219 color: var(--text-tertiary);
220}
221
222.profile-suspended h2 {
223 color: var(--text-primary);
224 margin-bottom: 8px;
225 font-size: 1.25rem;
226}
227
228@media (max-width: 640px) {
229 .profile-header {
230 flex-direction: column;
231 text-align: center;
232 }
233
234 .profile-info {
235 align-items: center;
236 }
237
238 .profile-handle-row {
239 justify-content: center;
240 }
241
242 .profile-stats {
243 justify-content: center;
244 }
245
246 .profile-tabs {
247 justify-content: center;
248 gap: 16px;
249 }
250}