forked from
tranquil.farm/tranquil-pds
Our Personal Data Server from scratch!
refactor(frontend): consolidate base stylesheet
authored by
did:plc:mb5to35neicxt4gemstoro…
and committed by
tangled.org
331d8438
79a3db8f
+728
-102
+728
-102
frontend/src/styles/base.css
+728
-102
frontend/src/styles/base.css
···
20
20
21
21
body {
22
22
margin: 0;
23
-
font-family:
24
-
"Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
23
+
font-family: system-ui, sans-serif;
25
24
font-size: var(--text-base);
26
25
line-height: var(--leading-normal);
27
26
color: var(--text-primary);
28
27
background: var(--bg-primary);
29
28
-webkit-font-smoothing: antialiased;
30
29
-moz-osx-font-smoothing: grayscale;
31
-
transition: background-color 0.3s ease;
32
30
overflow-wrap: anywhere;
33
31
word-break: break-word;
34
32
}
···
56
54
}
57
55
58
56
a {
59
-
color: var(--accent);
57
+
color: var(--secondary);
60
58
text-decoration: underline;
61
59
text-underline-offset: 2px;
62
60
}
63
61
64
62
a:hover {
65
-
color: var(--accent-hover);
63
+
color: var(--secondary-hover);
66
64
}
67
65
68
66
::selection {
···
77
75
line-height: var(--leading-normal);
78
76
padding: var(--space-4);
79
77
border: 1px solid var(--border-dark);
80
-
border-radius: var(--radius-md);
81
78
background: var(--bg-input);
82
79
color: var(--text-primary);
83
-
transition:
84
-
border-color var(--transition-normal),
85
-
box-shadow var(--transition-normal);
86
80
width: 100%;
87
81
}
88
82
···
90
84
select:focus,
91
85
textarea:focus {
92
86
outline: none;
93
-
border-color: var(--accent);
94
-
box-shadow: var(--shadow-focus);
87
+
border-color: var(--secondary);
88
+
box-shadow: 0 0 0 2px var(--secondary-muted);
95
89
}
96
90
97
91
input:disabled,
···
117
111
}
118
112
119
113
button {
114
+
display: inline-flex;
115
+
align-items: center;
116
+
justify-content: center;
117
+
gap: var(--space-2);
120
118
font-family: inherit;
121
119
font-size: var(--text-base);
122
120
font-weight: var(--font-medium);
123
121
line-height: var(--leading-normal);
124
-
padding: var(--space-4) var(--space-6);
122
+
padding: var(--space-2) var(--space-4);
125
123
border: none;
126
-
border-radius: var(--radius-md);
127
124
cursor: pointer;
128
-
transition:
129
-
background var(--transition-normal),
130
-
border-color var(--transition-normal),
131
-
opacity var(--transition-normal);
132
125
background: var(--accent);
133
126
color: var(--text-inverse);
134
127
}
···
144
137
145
138
button.secondary {
146
139
background: transparent;
147
-
color: var(--accent);
148
-
border: 1px solid var(--accent);
140
+
color: var(--secondary);
149
141
}
150
142
151
143
button.secondary:hover:not(:disabled) {
152
-
background: var(--accent);
144
+
background: var(--secondary);
153
145
color: var(--text-inverse);
154
146
}
155
147
156
148
button.tertiary {
157
149
background: transparent;
158
150
color: var(--text-secondary);
159
-
padding: var(--space-3) var(--space-4);
151
+
padding: var(--space-2) var(--space-3);
160
152
}
161
153
162
154
button.tertiary:hover:not(:disabled) {
···
165
157
}
166
158
167
159
button.danger {
168
-
background: var(--error-text);
160
+
background: var(--danger-bg);
161
+
color: var(--text-inverse);
169
162
}
170
163
171
164
button.danger:hover:not(:disabled) {
172
-
background: #900;
165
+
background: var(--danger-bg-hover);
173
166
}
174
167
175
168
button.danger-outline {
176
169
background: transparent;
177
-
border: 1px solid var(--error-border);
178
170
color: var(--error-text);
179
171
}
180
172
181
173
button.danger-outline:hover:not(:disabled) {
182
174
background: var(--error-bg);
183
-
border-color: var(--error-text);
175
+
}
176
+
177
+
button.cancel {
178
+
background: var(--bg-secondary);
179
+
color: var(--text-primary);
180
+
border: 1px solid var(--border-color);
181
+
}
182
+
183
+
button.cancel:hover:not(:disabled) {
184
+
background: var(--error-bg);
185
+
border-color: var(--error-border);
186
+
color: var(--error-text);
184
187
}
185
188
186
189
button.ghost {
187
190
background: transparent;
188
191
color: var(--text-secondary);
189
-
border: 1px solid var(--border-dark);
190
192
}
191
193
192
194
button.ghost:hover:not(:disabled) {
···
197
199
button.link {
198
200
background: none;
199
201
border: none;
200
-
color: var(--accent);
202
+
color: var(--secondary);
201
203
padding: var(--space-2);
202
204
font-size: var(--text-sm);
203
205
font-weight: var(--font-normal);
···
209
211
}
210
212
211
213
button.sm {
212
-
padding: var(--space-2) var(--space-3);
214
+
padding: var(--space-1) var(--space-2);
213
215
font-size: var(--text-xs);
214
216
}
215
217
···
237
239
fieldset {
238
240
border: none;
239
241
border-left: 3px solid var(--accent);
240
-
border-radius: var(--radius-lg);
241
242
padding: var(--space-5);
242
243
padding-left: var(--space-6);
243
244
margin: 0;
···
266
267
font-size: 0.9em;
267
268
background: var(--bg-tertiary);
268
269
padding: var(--space-1) var(--space-2);
269
-
border-radius: var(--radius-sm);
270
270
}
271
271
272
272
pre {
···
274
274
font-size: var(--text-sm);
275
275
background: var(--bg-tertiary);
276
276
padding: var(--space-4);
277
-
border-radius: var(--radius-md);
278
277
overflow-x: auto;
279
278
margin: 0;
280
279
}
···
319
318
320
319
.message {
321
320
padding: var(--space-4);
322
-
border-radius: var(--radius-md);
323
321
font-size: var(--text-sm);
324
322
}
325
323
326
324
.message.success {
327
325
background: var(--success-bg);
328
-
border: 1px solid var(--success-border);
329
326
color: var(--success-text);
330
327
}
331
328
332
329
.message.error {
333
330
background: var(--error-bg);
334
-
border: 1px solid var(--error-border);
335
331
color: var(--error-text);
336
332
}
337
333
338
334
.message.warning {
339
335
background: var(--warning-bg);
340
-
border: 1px solid var(--warning-border);
341
336
color: var(--warning-text);
342
337
}
343
338
339
+
.message.info {
340
+
background: var(--accent-muted);
341
+
color: var(--secondary);
342
+
}
343
+
344
344
.badge {
345
345
display: inline-block;
346
346
padding: var(--space-1) var(--space-3);
347
-
border-radius: var(--radius-md);
348
347
font-size: var(--text-xs);
349
348
font-weight: var(--font-medium);
350
349
}
···
371
370
372
371
.card {
373
372
background: var(--bg-card);
374
-
border: 1px solid var(--border-color);
375
-
border-radius: var(--radius-xl);
376
373
padding: var(--space-6);
377
374
overflow: hidden;
378
375
min-width: 0;
379
376
}
380
377
381
-
.section {
378
+
section {
382
379
background: var(--bg-secondary);
383
-
border-radius: var(--radius-xl);
384
380
padding: var(--space-6);
385
381
overflow: hidden;
386
382
min-width: 0;
387
383
}
388
384
389
-
.section + .section {
385
+
section + section {
390
386
margin-top: var(--space-6);
391
387
}
392
388
389
+
section h3 {
390
+
margin: 0 0 var(--space-4) 0;
391
+
font-size: var(--text-base);
392
+
}
393
+
394
+
.item {
395
+
display: flex;
396
+
justify-content: space-between;
397
+
align-items: center;
398
+
padding: var(--space-4);
399
+
background: var(--bg-card);
400
+
}
401
+
402
+
.item + .item {
403
+
border-top: 1px solid var(--border-light);
404
+
}
405
+
406
+
.item-info {
407
+
display: flex;
408
+
flex-direction: column;
409
+
gap: var(--space-1);
410
+
min-width: 0;
411
+
}
412
+
413
+
.item-actions {
414
+
display: flex;
415
+
gap: var(--space-2);
416
+
align-items: center;
417
+
flex-shrink: 0;
418
+
}
419
+
420
+
.definition-list {
421
+
display: grid;
422
+
grid-template-columns: auto 1fr;
423
+
gap: var(--space-2) var(--space-4);
424
+
font-size: var(--text-sm);
425
+
}
426
+
427
+
.definition-list dt {
428
+
color: var(--text-secondary);
429
+
}
430
+
431
+
.definition-list dd {
432
+
margin: 0;
433
+
}
434
+
435
+
.modal-backdrop {
436
+
position: fixed;
437
+
inset: 0;
438
+
background: var(--overlay-bg);
439
+
z-index: var(--z-modal);
440
+
display: flex;
441
+
align-items: center;
442
+
justify-content: center;
443
+
}
444
+
445
+
.modal {
446
+
background: var(--bg-card);
447
+
padding: var(--space-6);
448
+
width: 100%;
449
+
max-width: var(--width-sm);
450
+
max-height: 90vh;
451
+
overflow-y: auto;
452
+
}
453
+
454
+
.tabs {
455
+
display: flex;
456
+
gap: var(--space-1);
457
+
margin-bottom: var(--space-5);
458
+
}
459
+
460
+
.tab {
461
+
flex: 1;
462
+
padding: var(--space-3);
463
+
background: transparent;
464
+
color: var(--text-secondary);
465
+
font-size: var(--text-sm);
466
+
text-align: center;
467
+
}
468
+
469
+
.tab:hover:not(:disabled):not(.active) {
470
+
background: var(--bg-tertiary);
471
+
color: var(--text-primary);
472
+
}
473
+
474
+
.tab.active {
475
+
background: var(--accent);
476
+
color: var(--text-inverse);
477
+
}
478
+
479
+
.inline-form {
480
+
display: flex;
481
+
flex-direction: column;
482
+
gap: var(--space-4);
483
+
padding: var(--space-5);
484
+
background: var(--bg-card);
485
+
}
486
+
393
487
.page {
394
488
max-width: var(--width-lg);
395
489
margin: 0 auto;
···
443
537
}
444
538
445
539
.back-link:hover {
446
-
color: var(--accent);
540
+
color: var(--secondary);
447
541
text-decoration: none;
448
542
}
449
543
···
534
628
535
629
.info-panel {
536
630
background: var(--bg-secondary);
537
-
border-radius: var(--radius-xl);
538
631
padding: var(--space-6);
539
632
height: fit-content;
540
633
overflow: hidden;
···
557
650
margin-bottom: 0;
558
651
}
559
652
560
-
.spinner {
561
-
width: 40px;
562
-
height: 40px;
563
-
border: 3px solid var(--border-color);
564
-
border-top-color: var(--accent);
565
-
border-radius: 50%;
566
-
animation: spin 1s linear infinite;
567
-
}
568
-
569
-
.spinner.sm {
570
-
width: 20px;
571
-
height: 20px;
572
-
border-width: 2px;
573
-
}
574
-
575
-
.spinner.md {
576
-
width: 32px;
577
-
height: 32px;
578
-
}
579
-
580
-
.spinner.lg {
581
-
width: 60px;
582
-
height: 60px;
583
-
border-width: 4px;
584
-
}
585
-
586
-
@keyframes spin {
587
-
to {
588
-
transform: rotate(360deg);
589
-
}
590
-
}
591
653
592
654
.skeleton {
593
655
background: var(--bg-secondary);
594
-
border-radius: var(--radius-md);
595
-
animation: skeleton-pulse 1.5s ease-in-out infinite;
596
656
}
597
657
598
658
.skeleton-card {
599
659
height: 100px;
600
660
background: var(--bg-secondary);
601
-
border: 1px solid var(--border-color);
602
-
border-radius: var(--radius-xl);
603
-
animation: skeleton-pulse 1.5s ease-in-out infinite;
604
661
}
605
662
606
663
.skeleton-line {
607
664
height: var(--space-4);
608
665
background: var(--bg-secondary);
609
-
border-radius: var(--radius-sm);
610
-
animation: skeleton-pulse 1.5s ease-in-out infinite;
611
-
}
612
-
613
-
@keyframes skeleton-pulse {
614
-
0%, 100% {
615
-
opacity: 1;
616
-
}
617
-
50% {
618
-
opacity: 0.5;
619
-
}
620
666
}
621
667
622
668
.section-hint {
···
670
716
margin-top: var(--space-5);
671
717
padding: var(--space-5);
672
718
background: var(--warning-bg);
673
-
border: 1px solid var(--warning-border);
674
-
border-radius: var(--radius-lg);
675
719
font-size: var(--text-sm);
676
720
}
677
721
···
700
744
gap: var(--space-4);
701
745
padding: var(--space-5);
702
746
background: var(--accent-muted);
703
-
border: 1px solid var(--accent);
704
-
border-radius: var(--radius-xl);
705
747
margin-bottom: var(--space-6);
706
748
}
707
749
708
750
.migrate-icon {
709
751
font-size: var(--text-2xl);
710
752
line-height: 1;
711
-
color: var(--accent);
753
+
color: var(--secondary);
712
754
}
713
755
714
756
.migrate-content {
···
731
773
.migrate-link {
732
774
font-size: var(--text-sm);
733
775
font-weight: var(--font-medium);
734
-
color: var(--accent);
776
+
color: var(--secondary);
735
777
text-decoration: none;
736
778
}
737
779
···
758
800
759
801
.app-password-display {
760
802
background: var(--bg-card);
761
-
border: 2px solid var(--accent);
762
-
border-radius: var(--radius-xl);
763
803
padding: var(--space-6);
764
804
text-align: center;
765
805
}
···
777
817
letter-spacing: 0.1em;
778
818
padding: var(--space-5);
779
819
background: var(--bg-input);
780
-
border-radius: var(--radius-md);
781
820
margin-bottom: var(--space-4);
782
821
user-select: all;
783
822
}
···
814
853
}
815
854
816
855
.form-links .link-text a {
817
-
color: var(--accent);
856
+
color: var(--secondary);
818
857
}
819
858
820
859
.contact-fields {
···
833
872
gap: var(--space-3);
834
873
padding: var(--space-4);
835
874
background: var(--bg-secondary);
836
-
border-radius: var(--radius-md);
837
875
}
838
876
839
877
.provider-details {
···
858
896
.error-icon {
859
897
width: 48px;
860
898
height: 48px;
861
-
border-radius: 50%;
862
899
background: var(--error-text);
863
900
color: var(--text-inverse);
864
901
display: flex;
···
897
934
.required {
898
935
color: var(--error-text);
899
936
}
937
+
938
+
main {
939
+
min-height: 100vh;
940
+
}
941
+
942
+
form {
943
+
display: flex;
944
+
flex-direction: column;
945
+
gap: var(--space-4);
946
+
}
947
+
948
+
form > div {
949
+
display: flex;
950
+
flex-direction: column;
951
+
gap: var(--space-2);
952
+
}
953
+
954
+
form > button {
955
+
align-self: flex-start;
956
+
}
957
+
958
+
input.has-error,
959
+
textarea.has-error {
960
+
border-color: var(--error-text);
961
+
}
962
+
963
+
input.has-error:focus,
964
+
textarea.has-error:focus {
965
+
border-color: var(--error-text);
966
+
box-shadow: 0 0 0 2px var(--error-bg);
967
+
}
968
+
969
+
button.lg {
970
+
padding: var(--space-3) var(--space-5);
971
+
font-size: var(--text-lg);
972
+
}
973
+
974
+
a.btn {
975
+
display: inline-flex;
976
+
align-items: center;
977
+
justify-content: center;
978
+
gap: var(--space-2);
979
+
padding: var(--space-2) var(--space-4);
980
+
background: var(--accent);
981
+
color: var(--text-inverse);
982
+
text-decoration: none;
983
+
font-weight: var(--font-medium);
984
+
}
985
+
986
+
a.btn:hover {
987
+
background: var(--accent-hover);
988
+
color: var(--text-inverse);
989
+
text-decoration: none;
990
+
}
991
+
992
+
.card-interactive {
993
+
cursor: pointer;
994
+
}
995
+
996
+
.card-interactive:hover {
997
+
border-color: var(--secondary);
998
+
box-shadow: 0 2px 8px var(--accent-muted);
999
+
}
1000
+
1001
+
.card-danger {
1002
+
background: var(--error-bg);
1003
+
border-color: var(--error-border);
1004
+
}
1005
+
1006
+
.padding-none { padding: 0; }
1007
+
.padding-sm { padding: var(--space-4); }
1008
+
.padding-md { padding: var(--space-6); }
1009
+
.padding-lg { padding: var(--space-7); }
1010
+
1011
+
section.danger {
1012
+
background: var(--error-bg);
1013
+
}
1014
+
1015
+
section.danger h2 {
1016
+
color: var(--error-text);
1017
+
}
1018
+
1019
+
section h2 {
1020
+
margin: 0 0 var(--space-3) 0;
1021
+
font-size: var(--text-lg);
1022
+
}
1023
+
1024
+
section .description {
1025
+
color: var(--text-secondary);
1026
+
font-size: var(--text-sm);
1027
+
margin-bottom: var(--space-5);
1028
+
}
1029
+
1030
+
.page > header {
1031
+
margin-bottom: var(--space-7);
1032
+
}
1033
+
1034
+
.header-row {
1035
+
display: flex;
1036
+
justify-content: space-between;
1037
+
align-items: center;
1038
+
gap: var(--space-4);
1039
+
}
1040
+
1041
+
.actions {
1042
+
display: flex;
1043
+
flex-direction: row;
1044
+
gap: var(--space-3);
1045
+
}
1046
+
1047
+
.empty {
1048
+
color: var(--text-secondary);
1049
+
padding: var(--space-6);
1050
+
text-align: center;
1051
+
}
1052
+
1053
+
.subtitle {
1054
+
color: var(--text-secondary);
1055
+
margin: 0;
1056
+
}
1057
+
1058
+
.error {
1059
+
padding: var(--space-3);
1060
+
background: var(--error-bg);
1061
+
color: var(--error-text);
1062
+
}
1063
+
1064
+
.toast-container {
1065
+
position: fixed;
1066
+
top: var(--space-6);
1067
+
right: var(--space-6);
1068
+
z-index: 9999;
1069
+
display: flex;
1070
+
flex-direction: column;
1071
+
gap: var(--space-3);
1072
+
max-width: min(400px, calc(100vw - 3rem));
1073
+
pointer-events: none;
1074
+
}
1075
+
1076
+
.toast {
1077
+
display: flex;
1078
+
align-items: flex-start;
1079
+
gap: var(--space-3);
1080
+
padding: var(--space-4);
1081
+
box-shadow: var(--shadow-lg);
1082
+
pointer-events: auto;
1083
+
}
1084
+
1085
+
.toast-success {
1086
+
background: var(--success-bg);
1087
+
color: var(--success-text);
1088
+
}
1089
+
1090
+
.toast-error {
1091
+
background: var(--error-bg);
1092
+
color: var(--error-text);
1093
+
}
1094
+
1095
+
.toast-warning {
1096
+
background: var(--warning-bg);
1097
+
color: var(--warning-text);
1098
+
}
1099
+
1100
+
.toast-info {
1101
+
background: var(--bg-secondary);
1102
+
color: var(--text-primary);
1103
+
}
1104
+
1105
+
.toast-message {
1106
+
flex: 1;
1107
+
font-size: var(--text-sm);
1108
+
line-height: 1.4;
1109
+
}
1110
+
1111
+
.toast-dismiss {
1112
+
flex-shrink: 0;
1113
+
width: 20px;
1114
+
height: 20px;
1115
+
padding: 0;
1116
+
border: none;
1117
+
background: transparent;
1118
+
cursor: pointer;
1119
+
opacity: 0.6;
1120
+
font-size: var(--text-sm);
1121
+
line-height: 1;
1122
+
color: inherit;
1123
+
}
1124
+
1125
+
.toast-dismiss:hover {
1126
+
opacity: 1;
1127
+
background: var(--accent-muted);
1128
+
}
1129
+
1130
+
@media (max-width: 480px) {
1131
+
.toast-container {
1132
+
top: var(--space-4);
1133
+
right: var(--space-4);
1134
+
left: var(--space-4);
1135
+
max-width: none;
1136
+
}
1137
+
}
1138
+
1139
+
.skeleton-card {
1140
+
background: var(--bg-card);
1141
+
padding: var(--space-3);
1142
+
}
1143
+
1144
+
.skeleton-header {
1145
+
display: flex;
1146
+
gap: var(--space-2);
1147
+
margin-bottom: var(--space-2);
1148
+
}
1149
+
1150
+
.skeleton-line {
1151
+
height: 14px;
1152
+
background: var(--bg-tertiary);
1153
+
margin-bottom: var(--space-1);
1154
+
}
1155
+
1156
+
.skeleton-line.last {
1157
+
margin-bottom: 0;
1158
+
}
1159
+
1160
+
.skeleton-line.tiny { width: 50px; }
1161
+
.skeleton-line.short { width: 80px; }
1162
+
.skeleton-line.medium { width: 60%; }
1163
+
.skeleton-line.full { width: 100%; }
1164
+
1165
+
.skeleton-circle {
1166
+
width: 40px;
1167
+
height: 40px;
1168
+
background: var(--bg-tertiary);
1169
+
}
1170
+
1171
+
.account-type-switcher {
1172
+
display: flex;
1173
+
gap: var(--space-2);
1174
+
padding: var(--space-1);
1175
+
background: var(--bg-secondary);
1176
+
margin-bottom: var(--space-6);
1177
+
}
1178
+
1179
+
.switcher-option {
1180
+
flex: 1;
1181
+
display: flex;
1182
+
align-items: center;
1183
+
justify-content: center;
1184
+
gap: var(--space-2);
1185
+
padding: var(--space-3) var(--space-4);
1186
+
text-decoration: none;
1187
+
color: var(--text-secondary);
1188
+
font-weight: var(--font-medium);
1189
+
}
1190
+
1191
+
.switcher-option:hover {
1192
+
color: var(--text-primary);
1193
+
background: var(--bg-tertiary);
1194
+
text-decoration: none;
1195
+
}
1196
+
1197
+
.switcher-option.active {
1198
+
background: var(--bg-primary);
1199
+
color: var(--text-primary);
1200
+
box-shadow: var(--shadow-sm);
1201
+
}
1202
+
1203
+
.switcher-option.disabled {
1204
+
opacity: 0.4;
1205
+
cursor: not-allowed;
1206
+
}
1207
+
1208
+
.switcher-option.disabled:hover {
1209
+
color: var(--text-secondary);
1210
+
background: transparent;
1211
+
}
1212
+
1213
+
.handle-input-group {
1214
+
display: flex;
1215
+
gap: var(--space-2);
1216
+
align-items: center;
1217
+
}
1218
+
1219
+
.handle-input-group input {
1220
+
flex: 1;
1221
+
}
1222
+
1223
+
.handle-input-group select {
1224
+
width: auto;
1225
+
}
1226
+
1227
+
.domain-suffix {
1228
+
color: var(--text-secondary);
1229
+
font-size: var(--text-sm);
1230
+
white-space: nowrap;
1231
+
}
1232
+
1233
+
.load-more-sentinel {
1234
+
height: 40px;
1235
+
display: flex;
1236
+
align-items: center;
1237
+
justify-content: center;
1238
+
margin-top: var(--space-4);
1239
+
}
1240
+
1241
+
.loading-indicator {
1242
+
color: var(--text-secondary);
1243
+
font-size: var(--text-sm);
1244
+
}
1245
+
1246
+
.loading-container {
1247
+
display: flex;
1248
+
justify-content: center;
1249
+
align-items: center;
1250
+
min-height: 200px;
1251
+
padding: var(--space-7);
1252
+
}
1253
+
1254
+
.modal-header {
1255
+
display: flex;
1256
+
justify-content: space-between;
1257
+
align-items: center;
1258
+
padding: var(--space-4) var(--space-6);
1259
+
border-bottom: 1px solid var(--border-color);
1260
+
}
1261
+
1262
+
.modal-header h2 {
1263
+
margin: 0;
1264
+
font-size: var(--text-lg);
1265
+
}
1266
+
1267
+
.close-btn {
1268
+
background: none;
1269
+
border: none;
1270
+
font-size: var(--text-xl);
1271
+
cursor: pointer;
1272
+
color: var(--text-secondary);
1273
+
padding: 0;
1274
+
line-height: 1;
1275
+
}
1276
+
1277
+
.close-btn:hover {
1278
+
color: var(--text-primary);
1279
+
}
1280
+
1281
+
.modal-content {
1282
+
padding: var(--space-6);
1283
+
}
1284
+
1285
+
.modal-content form > div {
1286
+
margin-bottom: var(--space-4);
1287
+
}
1288
+
1289
+
.modal-content button:not(.tab) {
1290
+
width: 100%;
1291
+
}
1292
+
1293
+
.modal-footer {
1294
+
padding: 0 var(--space-6) var(--space-6);
1295
+
display: flex;
1296
+
justify-content: flex-end;
1297
+
}
1298
+
1299
+
.modal-body {
1300
+
padding: var(--space-5);
1301
+
}
1302
+
1303
+
.modal-actions {
1304
+
display: flex;
1305
+
flex-direction: row;
1306
+
gap: var(--space-3);
1307
+
flex-wrap: wrap;
1308
+
}
1309
+
1310
+
.modal .error-message {
1311
+
margin: var(--space-4) var(--space-6) 0;
1312
+
padding: var(--space-3);
1313
+
background: var(--error-bg);
1314
+
color: var(--error-text);
1315
+
font-size: var(--text-sm);
1316
+
}
1317
+
1318
+
.modal .tabs {
1319
+
margin-bottom: 0;
1320
+
padding: var(--space-4) var(--space-6) 0;
1321
+
gap: var(--space-2);
1322
+
}
1323
+
1324
+
.modal .tab {
1325
+
padding: var(--space-2) var(--space-4);
1326
+
border: 1px solid var(--border-color);
1327
+
}
1328
+
1329
+
.modal .tab.active {
1330
+
border-color: var(--accent);
1331
+
}
1332
+
1333
+
.passkey-auth {
1334
+
text-align: center;
1335
+
}
1336
+
1337
+
svg.sso-icon {
1338
+
display: block;
1339
+
}
1340
+
1341
+
1342
+
.form-actions {
1343
+
display: flex;
1344
+
flex-direction: row;
1345
+
gap: var(--space-4);
1346
+
margin-top: var(--space-5);
1347
+
}
1348
+
1349
+
.cancel-row {
1350
+
display: flex;
1351
+
justify-content: center;
1352
+
margin-top: var(--space-4);
1353
+
}
1354
+
1355
+
.form-actions .primary {
1356
+
flex: 1;
1357
+
}
1358
+
1359
+
.section-header-row {
1360
+
display: flex;
1361
+
justify-content: space-between;
1362
+
align-items: center;
1363
+
margin-bottom: var(--space-4);
1364
+
}
1365
+
1366
+
.section-header-row h3 {
1367
+
margin: 0;
1368
+
}
1369
+
1370
+
.info-box {
1371
+
background: var(--accent-muted);
1372
+
padding: var(--space-5);
1373
+
margin-bottom: var(--space-5);
1374
+
}
1375
+
1376
+
.info-box h3 {
1377
+
margin: 0 0 var(--space-3) 0;
1378
+
font-size: var(--text-base);
1379
+
}
1380
+
1381
+
.info-box ol,
1382
+
.info-box ul {
1383
+
margin: 0;
1384
+
padding-left: var(--space-5);
1385
+
}
1386
+
1387
+
.info-box li {
1388
+
margin-bottom: var(--space-2);
1389
+
color: var(--text-secondary);
1390
+
}
1391
+
1392
+
.info-box p {
1393
+
margin: 0;
1394
+
color: var(--text-secondary);
1395
+
}
1396
+
1397
+
.info-box strong {
1398
+
display: block;
1399
+
margin-bottom: var(--space-3);
1400
+
}
1401
+
1402
+
.or-divider {
1403
+
text-align: center;
1404
+
color: var(--text-muted);
1405
+
font-size: var(--text-sm);
1406
+
margin: var(--space-5) 0;
1407
+
}
1408
+
1409
+
.separator {
1410
+
margin: 0 var(--space-2);
1411
+
}
1412
+
1413
+
.forgot-links {
1414
+
margin-top: var(--space-4);
1415
+
font-size: var(--text-sm);
1416
+
color: var(--text-secondary);
1417
+
text-align: center;
1418
+
}
1419
+
1420
+
.forgot-links a {
1421
+
color: var(--secondary);
1422
+
}
1423
+
1424
+
.help-links {
1425
+
text-align: center;
1426
+
margin-top: var(--space-4);
1427
+
font-size: var(--text-sm);
1428
+
}
1429
+
1430
+
.help-links a {
1431
+
color: var(--secondary);
1432
+
text-decoration: none;
1433
+
}
1434
+
1435
+
.help-links a:hover {
1436
+
text-decoration: underline;
1437
+
}
1438
+
1439
+
.section-description {
1440
+
color: var(--text-secondary);
1441
+
font-size: var(--text-sm);
1442
+
margin: 0 0 var(--space-4) 0;
1443
+
}
1444
+
1445
+
.confirm-checkbox {
1446
+
display: flex;
1447
+
align-items: flex-start;
1448
+
gap: var(--space-2);
1449
+
cursor: pointer;
1450
+
padding: var(--space-3);
1451
+
background: var(--bg-tertiary);
1452
+
margin-bottom: var(--space-4);
1453
+
}
1454
+
1455
+
.confirm-checkbox input {
1456
+
width: 18px;
1457
+
height: 18px;
1458
+
flex-shrink: 0;
1459
+
margin-top: 2px;
1460
+
}
1461
+
1462
+
.confirm-checkbox span {
1463
+
font-size: var(--text-sm);
1464
+
font-weight: var(--font-medium);
1465
+
color: var(--text-primary);
1466
+
line-height: 1.4;
1467
+
}
1468
+
1469
+
.toggle-row {
1470
+
display: flex;
1471
+
justify-content: space-between;
1472
+
align-items: center;
1473
+
padding: var(--space-3);
1474
+
background: var(--bg-card);
1475
+
margin-bottom: var(--space-4);
1476
+
}
1477
+
1478
+
.toggle-info {
1479
+
display: flex;
1480
+
flex-direction: column;
1481
+
gap: var(--space-1);
1482
+
}
1483
+
1484
+
.toggle-label {
1485
+
font-weight: var(--font-medium);
1486
+
}
1487
+
1488
+
.toggle-description {
1489
+
font-size: var(--text-sm);
1490
+
color: var(--text-secondary);
1491
+
}
1492
+
1493
+
.toggle-button {
1494
+
position: relative;
1495
+
width: 52px;
1496
+
height: 28px;
1497
+
padding: 0;
1498
+
background: var(--border-color);
1499
+
border: none;
1500
+
cursor: pointer;
1501
+
flex-shrink: 0;
1502
+
}
1503
+
1504
+
.toggle-button.on {
1505
+
background: var(--accent);
1506
+
}
1507
+
1508
+
.toggle-button:disabled {
1509
+
opacity: 0.6;
1510
+
cursor: not-allowed;
1511
+
}
1512
+
1513
+
.toggle-slider {
1514
+
position: absolute;
1515
+
top: 2px;
1516
+
left: 2px;
1517
+
width: 24px;
1518
+
height: 24px;
1519
+
background: var(--text-inverse);
1520
+
box-shadow: var(--shadow-sm);
1521
+
}
1522
+
1523
+
.toggle-button.on .toggle-slider {
1524
+
transform: translateX(24px);
1525
+
}