margin.at
1.login-page {
2 display: flex;
3 flex-direction: column;
4 align-items: center;
5 justify-content: center;
6 min-height: 70vh;
7 padding: 60px 20px;
8 width: 100%;
9 max-width: 500px;
10 margin: 0 auto;
11}
12
13.login-at-logo {
14 font-size: 5rem;
15 font-weight: 800;
16 color: var(--accent);
17 margin-bottom: 24px;
18 line-height: 1;
19}
20
21.login-logo-img {
22 width: 80px;
23 height: 80px;
24 margin-bottom: 24px;
25 object-fit: contain;
26}
27
28.login-heading {
29 font-size: 1.5rem;
30 font-weight: 600;
31 margin-bottom: 32px;
32 display: flex;
33 align-items: center;
34 gap: 10px;
35 text-align: center;
36 line-height: 1.4;
37}
38
39.login-help-btn {
40 background: none;
41 border: none;
42 color: var(--text-tertiary);
43 cursor: pointer;
44 padding: 4px;
45 display: flex;
46 align-items: center;
47 transition: color 0.15s;
48 flex-shrink: 0;
49}
50
51.login-help-btn:hover {
52 color: var(--accent);
53}
54
55.login-help-text {
56 background: var(--bg-elevated);
57 border: 1px solid var(--border);
58 border-radius: var(--radius-md);
59 padding: 16px 20px;
60 margin-bottom: 24px;
61 font-size: 0.95rem;
62 color: var(--text-secondary);
63 line-height: 1.6;
64 text-align: center;
65}
66
67.login-help-text code {
68 background: var(--bg-tertiary);
69 padding: 2px 8px;
70 border-radius: var(--radius-sm);
71 font-size: 0.9rem;
72}
73
74.login-form {
75 display: flex;
76 flex-direction: column;
77 gap: 16px;
78 width: 100%;
79}
80
81.login-input-wrapper {
82 position: relative;
83}
84
85.login-input {
86 width: 100%;
87 padding: 14px 16px;
88 background: var(--bg-elevated);
89 border: 1px solid var(--border);
90 border-radius: var(--radius-md);
91 color: var(--text-primary);
92 font-size: 1rem;
93 transition:
94 border-color 0.15s,
95 box-shadow 0.15s;
96}
97
98.login-input:focus {
99 outline: none;
100 border-color: var(--accent);
101 box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
102}
103
104.login-input::placeholder {
105 color: var(--text-tertiary);
106}
107
108.login-suggestions {
109 position: absolute;
110 top: calc(100% + 4px);
111 left: 0;
112 right: 0;
113 background: var(--bg-card);
114 border: 1px solid var(--border);
115 border-radius: var(--radius-md);
116 box-shadow: var(--shadow-lg);
117 overflow: hidden;
118 z-index: 100;
119}
120
121.login-suggestion {
122 display: flex;
123 align-items: center;
124 gap: 12px;
125 width: 100%;
126 padding: 12px 16px;
127 background: transparent;
128 border: none;
129 cursor: pointer;
130 text-align: left;
131 transition: background 0.1s;
132}
133
134.login-suggestion:hover,
135.login-suggestion.selected {
136 background: var(--bg-elevated);
137}
138
139.login-suggestion-avatar {
140 width: 40px;
141 height: 40px;
142 border-radius: var(--radius-full);
143 background: linear-gradient(135deg, var(--accent), #a855f7);
144 display: flex;
145 align-items: center;
146 justify-content: center;
147 flex-shrink: 0;
148 overflow: hidden;
149 font-size: 0.875rem;
150 font-weight: 600;
151 color: white;
152}
153
154.login-suggestion-avatar img {
155 width: 100%;
156 height: 100%;
157 object-fit: cover;
158}
159
160.login-suggestion-info {
161 display: flex;
162 flex-direction: column;
163 min-width: 0;
164}
165
166.login-suggestion-name {
167 font-weight: 600;
168 color: var(--text-primary);
169 white-space: nowrap;
170 overflow: hidden;
171 text-overflow: ellipsis;
172}
173
174.login-suggestion-handle {
175 font-size: 0.875rem;
176 color: var(--text-secondary);
177 white-space: nowrap;
178 overflow: hidden;
179 text-overflow: ellipsis;
180}
181
182.login-error {
183 padding: 12px 16px;
184 background: rgba(239, 68, 68, 0.1);
185 border: 1px solid rgba(239, 68, 68, 0.3);
186 border-radius: var(--radius-md);
187 color: #ef4444;
188 font-size: 0.875rem;
189}
190
191.login-legal {
192 font-size: 0.75rem;
193 color: var(--text-tertiary);
194 line-height: 1.5;
195 margin-top: 16px;
196}
197
198.login-brand {
199 display: flex;
200 align-items: center;
201 justify-content: center;
202 gap: 12px;
203 margin-bottom: 24px;
204}
205
206.login-brand-icon {
207 width: 48px;
208 height: 48px;
209 background: linear-gradient(135deg, var(--accent), #a855f7);
210 border-radius: var(--radius-lg);
211 display: flex;
212 align-items: center;
213 justify-content: center;
214 font-size: 1.75rem;
215 font-weight: 800;
216 color: white;
217}
218
219.login-brand-name {
220 font-size: 1.75rem;
221 font-weight: 700;
222}
223
224.login-avatar {
225 width: 72px;
226 height: 72px;
227 border-radius: var(--radius-full);
228 background: linear-gradient(135deg, var(--accent), #a855f7);
229 display: flex;
230 align-items: center;
231 justify-content: center;
232 margin: 0 auto 16px;
233 font-weight: 700;
234 font-size: 1.5rem;
235 color: white;
236 overflow: hidden;
237}
238
239.login-avatar img {
240 width: 100%;
241 height: 100%;
242 object-fit: cover;
243}
244
245.login-avatar-large {
246 width: 100px;
247 height: 100px;
248 border-radius: var(--radius-full);
249 background: linear-gradient(135deg, var(--accent), #a855f7);
250 display: flex;
251 align-items: center;
252 justify-content: center;
253 margin-bottom: 20px;
254 font-weight: 700;
255 font-size: 2rem;
256 color: white;
257 overflow: hidden;
258}
259
260.login-avatar-large img {
261 width: 100%;
262 height: 100%;
263 object-fit: cover;
264}
265
266.login-welcome {
267 font-size: 1.5rem;
268 font-weight: 600;
269 margin-bottom: 32px;
270 text-align: center;
271}
272
273.login-welcome-name {
274 font-size: 1.25rem;
275 font-weight: 600;
276 margin-bottom: 24px;
277}
278
279.login-actions {
280 display: flex;
281 flex-direction: column;
282 gap: 12px;
283 width: 100%;
284}
285
286.login-btn {
287 width: 100%;
288 padding: 14px 24px;
289 font-size: 1rem;
290 font-weight: 600;
291}
292
293.login-submit {
294 padding: 18px 32px;
295 font-size: 1.1rem;
296 font-weight: 600;
297}