(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1.login-page {
2 display: flex;
3 flex-direction: column;
4 align-items: center;
5 justify-content: center;
6 min-height: 80vh;
7 padding: 40px 20px;
8 width: 100%;
9}
10
11.login-header-group {
12 display: flex;
13 flex-direction: row;
14 align-items: center;
15 justify-content: center;
16 gap: 24px;
17 margin-bottom: 48px;
18 width: auto;
19}
20
21.login-logo-img {
22 width: 60px;
23 height: 60px;
24 object-fit: contain;
25 display: block;
26}
27
28.login-x {
29 font-size: 2rem;
30 color: var(--text-tertiary);
31 font-weight: 300;
32 line-height: 1;
33 padding-bottom: 4px;
34}
35
36.login-atproto-icon {
37 color: #3b83f6 !important;
38 display: flex;
39 align-items: center;
40 justify-content: center;
41}
42
43.login-heading {
44 font-size: 1.5rem;
45 font-weight: 700;
46 margin-bottom: 32px;
47 display: flex;
48 align-items: center;
49 justify-content: center;
50 flex-wrap: wrap;
51 gap: 8px;
52 text-align: center;
53 line-height: 1.3;
54 color: var(--text-primary);
55}
56
57.login-help-btn {
58 background: none;
59 border: none;
60 color: var(--text-tertiary);
61 cursor: pointer;
62 padding: 4px;
63 display: flex;
64 align-items: center;
65 transition: color 0.15s;
66 flex-shrink: 0;
67}
68
69.login-help-btn:hover {
70 color: var(--accent);
71}
72
73.login-help-text {
74 background: var(--bg-tertiary);
75 border: 1px solid var(--border);
76 border-radius: var(--radius-md);
77 padding: 16px;
78 margin-bottom: 24px;
79 font-size: 0.9rem;
80 color: var(--text-secondary);
81 line-height: 1.5;
82 text-align: center;
83 width: 100%;
84}
85
86.login-help-text code {
87 background: rgba(255, 255, 255, 0.05);
88 padding: 2px 6px;
89 border-radius: var(--radius-sm);
90 font-size: 0.85rem;
91 font-family: var(--font-mono);
92}
93
94.login-form {
95 display: flex;
96 flex-direction: column;
97 gap: 20px;
98 width: 100%;
99}
100
101.login-input-wrapper {
102 position: relative;
103}
104
105.login-input {
106 width: 100%;
107 padding: 14px 16px;
108 background: var(--bg-secondary);
109 border: 1px solid var(--border);
110 border-radius: var(--radius-md);
111 color: var(--text-primary);
112 font-size: 1rem;
113 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
114 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
115}
116
117.login-input:focus {
118 outline: none;
119 border-color: var(--accent);
120 box-shadow: 0 0 0 4px var(--accent-subtle);
121 background: var(--bg-primary);
122}
123
124.login-input::placeholder {
125 color: var(--text-tertiary);
126}
127
128.login-suggestions {
129 position: absolute;
130 top: calc(100% + 8px);
131 left: 0;
132 right: 0;
133 background: var(--bg-elevated);
134 border: 1px solid var(--border);
135 border-radius: var(--radius-md);
136 box-shadow: var(--shadow-lg);
137 overflow: hidden;
138 z-index: 100;
139 max-height: 300px;
140 overflow-y: auto;
141}
142
143.login-suggestion {
144 display: flex;
145 align-items: center;
146 gap: 12px;
147 width: 100%;
148 padding: 12px 16px;
149 background: transparent;
150 border: none;
151 cursor: pointer;
152 text-align: left;
153 transition: background 0.1s;
154 border-bottom: 1px solid var(--border);
155}
156
157.login-suggestion:last-child {
158 border-bottom: none;
159}
160
161.login-suggestion:hover,
162.login-suggestion.selected {
163 background: var(--bg-tertiary);
164}
165
166.login-suggestion-avatar {
167 width: 36px;
168 height: 36px;
169 border-radius: var(--radius-full);
170 background: linear-gradient(135deg, var(--accent), #a855f7);
171 display: flex;
172 align-items: center;
173 justify-content: center;
174 flex-shrink: 0;
175 overflow: hidden;
176 font-size: 0.8rem;
177 font-weight: 600;
178 color: white;
179}
180
181.login-suggestion-avatar img {
182 width: 100%;
183 height: 100%;
184 object-fit: cover;
185}
186
187.login-suggestion-info {
188 display: flex;
189 flex-direction: column;
190 min-width: 0;
191 gap: 2px;
192}
193
194.login-suggestion-name {
195 font-weight: 600;
196 font-size: 0.95rem;
197 color: var(--text-primary);
198 white-space: nowrap;
199 overflow: hidden;
200 text-overflow: ellipsis;
201}
202
203.login-suggestion-handle {
204 font-size: 0.85rem;
205 color: var(--text-secondary);
206 white-space: nowrap;
207 overflow: hidden;
208 text-overflow: ellipsis;
209}
210
211.login-error {
212 padding: 12px 16px;
213 background: rgba(239, 68, 68, 0.1);
214 border: 1px solid rgba(239, 68, 68, 0.2);
215 border-radius: var(--radius-md);
216 color: var(--error);
217 font-size: 0.875rem;
218 text-align: center;
219}
220
221.login-submit {
222 padding: 14px 24px;
223 font-size: 1rem;
224 font-weight: 600;
225 width: 100%;
226 justify-content: center;
227}
228
229.login-avatar-large {
230 width: 80px;
231 height: 80px;
232 border-radius: var(--radius-full);
233 background: linear-gradient(135deg, var(--accent), #a855f7);
234 display: flex;
235 align-items: center;
236 justify-content: center;
237 margin-bottom: 20px;
238 font-weight: 700;
239 font-size: 2rem;
240 color: white;
241 overflow: hidden;
242 box-shadow: var(--shadow-md);
243}
244
245.login-avatar-large img {
246 width: 100%;
247 height: 100%;
248 object-fit: cover;
249}
250
251.login-welcome {
252 font-size: 1.25rem;
253 font-weight: 600;
254 margin-bottom: 32px;
255 text-align: center;
256 color: var(--text-primary);
257}
258
259.login-actions {
260 display: flex;
261 flex-direction: column;
262 gap: 12px;
263 width: 100%;
264}
265
266.morph-container {
267 display: inline-block;
268 color: var(--text-primary);
269 font-weight: 700;
270 transition:
271 opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
272 transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
273 filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
274 white-space: nowrap;
275 vertical-align: bottom;
276}
277
278.morph-out {
279 opacity: 0;
280 transform: translateY(8px) scale(0.95);
281 filter: blur(4px);
282}
283
284.morph-in {
285 opacity: 1;
286 transform: translateY(0) scale(1);
287 filter: blur(0);
288}
289
290.login-legal {
291 margin-top: 24px;
292 font-size: 0.85rem;
293 color: var(--text-tertiary);
294 text-align: center;
295 line-height: 1.5;
296}
297
298.login-legal a {
299 color: var(--accent);
300 text-decoration: underline;
301 text-decoration-color: var(--accent);
302 text-underline-offset: 4px;
303 font-weight: 500;
304}
305
306.login-legal a:hover {
307 text-decoration-thickness: 2px;
308 opacity: 0.8;
309}
310
311@media (max-width: 480px) {
312 .login-heading {
313 font-size: 1.25rem;
314 flex-wrap: wrap;
315 gap: 4px;
316 padding: 0 10px;
317 }
318
319 .login-header-group {
320 margin-bottom: 32px;
321 gap: 16px;
322 }
323
324 .login-logo-img {
325 width: 48px;
326 height: 48px;
327 }
328
329 .login-x {
330 font-size: 1.5rem;
331 }
332
333 .login-atproto-icon svg {
334 width: 48px;
335 height: 48px;
336 }
337}
338
339.login-divider {
340 display: flex;
341 align-items: center;
342 text-align: center;
343 margin: 24px 0;
344 color: var(--text-tertiary);
345 font-size: 13px;
346 font-weight: 500;
347 text-transform: uppercase;
348 letter-spacing: 0.5px;
349}
350
351.login-divider::before,
352.login-divider::after {
353 content: "";
354 flex: 1;
355 border-bottom: 1px solid var(--border);
356}
357
358.login-divider::before {
359 margin-right: 16px;
360}
361
362.login-divider::after {
363 margin-left: 16px;
364}
365
366.login-signup-btn {
367 width: 100%;
368 border: 1px solid var(--border);
369 background: transparent;
370 color: var(--text-primary);
371 transition: all 0.2s;
372}
373
374.login-signup-btn:hover {
375 border-color: var(--accent);
376 background: var(--bg-hover);
377 color: var(--accent);
378}