vicwalker.dev.br
forked from
tranquil.farm/tranquil-pds
Our Personal Data Server from scratch!
oyster.cafe
1.migration-wizard {
2 max-width: var(--width-sm);
3 margin: 0 auto;
4}
5
6.field-label {
7 display: block;
8 font-size: var(--text-sm);
9 font-weight: var(--font-medium);
10 color: var(--text-primary);
11 margin-bottom: var(--space-2);
12}
13
14.step-indicator {
15 display: flex;
16 align-items: center;
17 justify-content: center;
18 margin-bottom: var(--space-6);
19 gap: var(--space-1);
20}
21
22.step {
23 display: flex;
24 align-items: center;
25 justify-content: center;
26}
27
28.step-dot {
29 width: 24px;
30 height: 24px;
31 border-radius: 50%;
32 background: var(--bg-secondary);
33 border: 2px solid var(--border-color);
34 display: flex;
35 align-items: center;
36 justify-content: center;
37 font-size: var(--text-xs);
38 font-weight: var(--font-medium);
39 color: var(--text-secondary);
40 flex-shrink: 0;
41}
42
43.step.active .step-dot {
44 background: var(--accent);
45 border-color: var(--accent);
46 color: var(--text-inverse);
47 width: 28px;
48 height: 28px;
49}
50
51.step.completed .step-dot {
52 background: var(--success-bg);
53 border-color: var(--success-text);
54 color: var(--success-text);
55}
56
57.step-label {
58 display: none;
59}
60
61.step-line {
62 width: 16px;
63 height: 2px;
64 background: var(--border-color);
65 flex-shrink: 0;
66}
67
68.step-line.completed {
69 background: var(--success-text);
70}
71
72.current-step-label {
73 text-align: center;
74 font-size: var(--text-sm);
75 color: var(--text-secondary);
76 margin-bottom: var(--space-5);
77}
78
79.current-step-label strong {
80 color: var(--text-primary);
81}
82
83.step-content {
84 background: var(--bg-secondary);
85 border-radius: var(--radius-xl);
86 padding: var(--space-6);
87}
88
89.step-content h2 {
90 margin: 0 0 var(--space-3) 0;
91}
92
93.step-content > p {
94 color: var(--text-secondary);
95 margin: 0 0 var(--space-5) 0;
96}
97
98.info-box {
99 background: var(--accent-muted);
100 border: 1px solid var(--border-color);
101 border-radius: var(--radius-lg);
102 padding: var(--space-5);
103 margin-bottom: var(--space-5);
104}
105
106.info-box h3 {
107 margin: 0 0 var(--space-3) 0;
108 font-size: var(--text-base);
109}
110
111.info-box ol,
112.info-box ul {
113 margin: 0;
114 padding-left: var(--space-5);
115}
116
117.info-box li {
118 margin-bottom: var(--space-2);
119 color: var(--text-secondary);
120}
121
122.info-box p {
123 margin: 0;
124 color: var(--text-secondary);
125}
126
127.warning-box {
128 background: var(--warning-bg);
129 border: 1px solid var(--warning-border);
130 border-radius: var(--radius-lg);
131 padding: var(--space-5);
132 margin-bottom: var(--space-5);
133 font-size: var(--text-sm);
134}
135
136.warning-box strong {
137 color: var(--warning-text);
138}
139
140.warning-box p {
141 margin: var(--space-3) 0 0 0;
142 color: var(--text-secondary);
143}
144
145.warning-box ul {
146 margin: var(--space-3) 0 0 0;
147 padding-left: var(--space-5);
148}
149
150.checkbox-label {
151 display: inline-flex;
152 align-items: flex-start;
153 gap: var(--space-3);
154 cursor: pointer;
155 margin-bottom: var(--space-5);
156 text-align: left;
157}
158
159.checkbox-label input[type="checkbox"] {
160 width: 18px;
161 height: 18px;
162 margin: 0;
163 flex-shrink: 0;
164}
165
166.button-row {
167 display: flex;
168 gap: var(--space-3);
169 justify-content: flex-end;
170 margin-top: var(--space-5);
171}
172
173.handle-input-group {
174 display: flex;
175 gap: var(--space-2);
176}
177
178.handle-input-group input {
179 flex: 1;
180}
181
182.handle-input-group select {
183 width: auto;
184}
185
186.current-info {
187 background: var(--bg-primary);
188 border-radius: var(--radius-lg);
189 padding: var(--space-4);
190 margin-bottom: var(--space-5);
191 display: flex;
192 justify-content: space-between;
193}
194
195.current-info .label {
196 color: var(--text-secondary);
197}
198
199.current-info .value {
200 font-weight: var(--font-medium);
201 word-break: break-all;
202}
203
204.current-info .value.mono {
205 font-family: var(--font-mono);
206 font-size: var(--text-sm);
207}
208
209.review-card {
210 background: var(--bg-primary);
211 border-radius: var(--radius-lg);
212 padding: var(--space-4);
213 margin-bottom: var(--space-5);
214}
215
216.review-row {
217 display: flex;
218 justify-content: space-between;
219 padding: var(--space-3) 0;
220 border-bottom: 1px solid var(--border-color);
221}
222
223.review-row:last-child {
224 border-bottom: none;
225}
226
227.review-row .label {
228 color: var(--text-secondary);
229}
230
231.review-row .value {
232 font-weight: var(--font-medium);
233 text-align: right;
234 word-break: break-all;
235}
236
237.review-row .value.mono {
238 font-family: var(--font-mono);
239 font-size: var(--text-sm);
240}
241
242.progress-section {
243 margin-bottom: var(--space-5);
244}
245
246.progress-item {
247 display: flex;
248 align-items: center;
249 gap: var(--space-3);
250 padding: var(--space-3) 0;
251 color: var(--text-secondary);
252}
253
254.progress-item.completed {
255 color: var(--success-text);
256}
257
258.progress-item.active {
259 color: var(--accent);
260}
261
262.progress-item .icon {
263 width: 24px;
264 text-align: center;
265}
266
267.progress-bar {
268 height: 8px;
269 background: var(--bg-primary);
270 border-radius: var(--radius-md);
271 overflow: hidden;
272 margin-bottom: var(--space-4);
273}
274
275.progress-fill {
276 height: 100%;
277 background: var(--accent);
278 transition: width var(--transition-slow);
279}
280
281.status-text {
282 text-align: center;
283 color: var(--text-secondary);
284 font-size: var(--text-sm);
285}
286
287.blob-progress {
288 margin: var(--space-4) 0;
289}
290
291.blob-progress-bar {
292 height: 8px;
293 background: var(--bg-primary);
294 border-radius: var(--radius-md);
295 overflow: hidden;
296 margin-bottom: var(--space-2);
297}
298
299.blob-progress-fill {
300 height: 100%;
301 background: var(--accent);
302 transition: width var(--transition-slow);
303}
304
305.blob-progress-text {
306 text-align: center;
307 color: var(--text-secondary);
308 font-size: var(--text-sm);
309 margin: 0;
310}
311
312.success-content {
313 text-align: center;
314}
315
316.success-icon {
317 width: 64px;
318 height: 64px;
319 background: var(--success-bg);
320 color: var(--success-text);
321 border-radius: 50%;
322 display: flex;
323 align-items: center;
324 justify-content: center;
325 font-size: var(--text-2xl);
326 margin: 0 auto var(--space-5) auto;
327}
328
329.success-details {
330 background: var(--bg-primary);
331 border-radius: var(--radius-lg);
332 padding: var(--space-4);
333 margin: var(--space-5) 0;
334 text-align: left;
335}
336
337.success-details .detail-row {
338 display: flex;
339 justify-content: space-between;
340 padding: var(--space-2) 0;
341}
342
343.success-details .label {
344 color: var(--text-secondary);
345}
346
347.success-details .value {
348 font-weight: var(--font-medium);
349}
350
351.success-details .value.mono {
352 font-family: var(--font-mono);
353 font-size: var(--text-sm);
354}
355
356.redirect-text {
357 color: var(--text-secondary);
358 font-style: italic;
359}
360
361.code-block {
362 background: var(--bg-primary);
363 border: 1px solid var(--border-color);
364 border-radius: var(--radius-lg);
365 padding: var(--space-4);
366 margin-bottom: var(--space-5);
367 overflow-x: auto;
368}
369
370.code-block pre {
371 margin: 0;
372 font-family: var(--font-mono);
373 font-size: var(--text-sm);
374 white-space: pre-wrap;
375 word-break: break-all;
376}
377
378.auth-method-options {
379 display: flex;
380 flex-direction: column;
381 gap: var(--space-3);
382}
383
384label.auth-option {
385 display: flex;
386 flex-direction: row;
387 align-items: center;
388 gap: var(--space-3);
389 padding: var(--space-4);
390 border: 2px solid var(--border-color);
391 border-radius: var(--radius-lg);
392 cursor: pointer;
393 margin-bottom: 0;
394 transition:
395 border-color var(--transition-normal),
396 background-color var(--transition-normal);
397}
398
399.auth-option:hover {
400 border-color: var(--accent);
401 background: var(--bg-hover);
402}
403
404.auth-option.selected {
405 border-color: var(--accent);
406 background: var(--accent-muted);
407}
408
409.auth-option input[type="radio"] {
410 flex-shrink: 0;
411 width: 18px;
412 height: 18px;
413 margin: 0;
414}
415
416.auth-option-content {
417 display: flex;
418 flex-direction: column;
419 gap: var(--space-1);
420}
421
422.auth-option-content strong {
423 color: var(--text-primary);
424}
425
426.auth-option-content span {
427 font-size: var(--text-sm);
428 color: var(--text-secondary);
429}
430
431.loading-indicator {
432 display: flex;
433 flex-direction: column;
434 align-items: center;
435 gap: var(--space-4);
436 padding: var(--space-8);
437}
438
439.spinner {
440 width: 40px;
441 height: 40px;
442 border: 3px solid var(--border-color);
443 border-top-color: var(--accent);
444 border-radius: 50%;
445 animation: spin 1s linear infinite;
446}
447
448.passkey-section {
449 margin-top: var(--space-5);
450 text-align: center;
451}
452
453.passkey-section p {
454 margin-bottom: var(--space-4);
455 color: var(--text-secondary);
456}
457
458.app-password-display {
459 background: var(--bg-primary);
460 border-radius: var(--radius-lg);
461 padding: var(--space-5);
462 margin-bottom: var(--space-5);
463 text-align: center;
464}
465
466.app-password-label {
467 font-size: var(--text-sm);
468 color: var(--text-secondary);
469 margin-bottom: var(--space-3);
470}
471
472.app-password-code {
473 display: block;
474 font-family: var(--font-mono);
475 font-size: var(--text-lg);
476 letter-spacing: 0.1em;
477 padding: var(--space-4);
478 background: var(--bg-tertiary);
479 border-radius: var(--radius-md);
480 margin-bottom: var(--space-4);
481 user-select: all;
482}
483
484.copy-btn {
485 font-size: var(--text-sm);
486}
487
488.current-account {
489 background: var(--bg-primary);
490 border-radius: var(--radius-lg);
491 padding: var(--space-4);
492 margin-bottom: var(--space-5);
493 display: flex;
494 justify-content: space-between;
495 align-items: center;
496}
497
498.current-account .label {
499 color: var(--text-secondary);
500}
501
502.current-account .value {
503 font-weight: var(--font-medium);
504 font-size: var(--text-lg);
505}
506
507.server-info {
508 background: var(--bg-primary);
509 border-radius: var(--radius-lg);
510 padding: var(--space-4);
511 margin-top: var(--space-5);
512}
513
514.server-info h3 {
515 margin: 0 0 var(--space-3) 0;
516 font-size: var(--text-base);
517 color: var(--success-text);
518}
519
520.server-info .info-row {
521 display: flex;
522 justify-content: space-between;
523 padding: var(--space-2) 0;
524 font-size: var(--text-sm);
525}
526
527.server-info .label {
528 color: var(--text-secondary);
529}
530
531.server-info a {
532 display: inline-block;
533 margin-top: var(--space-2);
534 margin-right: var(--space-3);
535 color: var(--accent);
536 font-size: var(--text-sm);
537}
538
539.final-warning {
540 background: var(--error-bg);
541 border-color: var(--error-border);
542}
543
544.final-warning strong {
545 color: var(--error-text);
546}
547
548.next-steps {
549 background: var(--accent-muted);
550 border-radius: var(--radius-lg);
551 padding: var(--space-5);
552 margin: var(--space-5) 0;
553 text-align: left;
554}
555
556.next-steps h3 {
557 margin: 0 0 var(--space-3) 0;
558}
559
560.next-steps ol {
561 margin: 0;
562 padding-left: var(--space-5);
563}
564
565.next-steps li {
566 margin-bottom: var(--space-2);
567}
568
569.next-steps a {
570 color: var(--accent);
571}
572
573.resume-info {
574 margin-bottom: var(--space-5);
575}
576
577.resume-details {
578 display: flex;
579 flex-direction: column;
580 gap: var(--space-2);
581 margin-top: var(--space-3);
582}
583
584.resume-row {
585 display: flex;
586 gap: var(--space-3);
587}
588
589.resume-row .label {
590 color: var(--text-secondary);
591 min-width: 80px;
592}
593
594.resume-row .value {
595 font-weight: var(--font-medium);
596}
597
598.resume-note {
599 margin-top: var(--space-4);
600 font-size: var(--text-sm);
601 font-style: italic;
602}
603
604.file-input-container {
605 display: flex;
606 flex-direction: column;
607 gap: var(--space-3);
608}
609
610.file-info {
611 display: flex;
612 gap: var(--space-2);
613 align-items: center;
614 padding: var(--space-3);
615 background: var(--bg-primary);
616 border-radius: var(--radius-md);
617}
618
619.file-name {
620 font-weight: var(--font-medium);
621}
622
623.file-size {
624 color: var(--text-secondary);
625 font-size: var(--text-sm);
626}
627
628.step-content textarea {
629 width: 100%;
630 font-family: var(--font-mono);
631 font-size: var(--text-sm);
632 padding: var(--space-3);
633 border: 1px solid var(--border-color);
634 border-radius: var(--radius-md);
635 background: var(--bg-input);
636 color: var(--text-primary);
637 resize: vertical;
638}
639
640.step-content textarea:focus {
641 outline: none;
642 border-color: var(--accent);
643}
644
645.message {
646 padding: var(--space-4);
647 border-radius: var(--radius-lg);
648 margin-bottom: var(--space-4);
649}
650
651.message.success {
652 background: var(--success-bg);
653 color: var(--success-text);
654 border: 1px solid var(--success-border);
655}
656
657.message.error {
658 background: var(--error-bg);
659 color: var(--error-text);
660 border: 1px solid var(--error-border);
661}