central-auth-js-sdk 1.2.0 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/styles.css +134 -106
package/package.json
CHANGED
package/styles.css
CHANGED
|
@@ -1,80 +1,91 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Central Auth SDK — Design System
|
|
3
|
-
*
|
|
4
|
-
*
|
|
2
|
+
* Central Auth SDK — Design System: Verdant 2.0
|
|
3
|
+
* Warm, calm, premium. Beige canvas, ink-blue text, brand-green accent.
|
|
4
|
+
* Non-flat tiles (warm diffuse shadows + inset highlight), quiet ambient motion,
|
|
5
|
+
* pill buttons, Inter type with JetBrains Mono for numerics.
|
|
5
6
|
*
|
|
6
7
|
* NOTE: Only presentation changed. Every selector, class name and CSS custom
|
|
7
|
-
* property used by the SDK markup and theme engine is preserved verbatim
|
|
8
|
+
* property used by the SDK markup and theme engine is preserved verbatim, so
|
|
9
|
+
* the JS / flow logic and the theme engine continue to work unchanged.
|
|
8
10
|
*/
|
|
9
11
|
|
|
10
|
-
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,450;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&display=swap');
|
|
12
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,450;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
|
|
11
13
|
|
|
12
14
|
/* ============================= DESIGN TOKENS ============================= */
|
|
13
15
|
|
|
14
16
|
:root {
|
|
15
17
|
--wf-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
|
18
|
+
--wf-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
|
|
16
19
|
|
|
17
|
-
/* Surfaces */
|
|
18
|
-
--wf-bg: #
|
|
20
|
+
/* Surfaces — warm beige canvas, white cards, soft off-white fills */
|
|
21
|
+
--wf-bg: #F1EBDF;
|
|
19
22
|
--wf-card: #FFFFFF;
|
|
20
|
-
--wf-input-bg: #
|
|
21
|
-
--wf-muted-bg: #
|
|
23
|
+
--wf-input-bg: #FBF8F1;
|
|
24
|
+
--wf-muted-bg: #EFE8DA;
|
|
22
25
|
|
|
23
|
-
/*
|
|
24
|
-
--wf-fg: #
|
|
25
|
-
--wf-fg-soft: #
|
|
26
|
-
--wf-muted: #
|
|
26
|
+
/* Ink — ink-blue text ramp */
|
|
27
|
+
--wf-fg: #1E2A33;
|
|
28
|
+
--wf-fg-soft: #45535D;
|
|
29
|
+
--wf-muted: #7C8893;
|
|
27
30
|
|
|
28
|
-
/* Primary accent (
|
|
29
|
-
--wf-primary: #
|
|
30
|
-
--wf-primary-dark: #
|
|
31
|
-
--wf-primary-light: rgba(
|
|
32
|
-
--wf-primary-glow: rgba(
|
|
31
|
+
/* Primary accent — brand green (600 primary, 500 ring/accent) */
|
|
32
|
+
--wf-primary: #1E8A57;
|
|
33
|
+
--wf-primary-dark: #15633F;
|
|
34
|
+
--wf-primary-light: rgba(30, 138, 87, 0.08);
|
|
35
|
+
--wf-primary-glow: rgba(47, 162, 104, 0.22);
|
|
33
36
|
|
|
34
|
-
/*
|
|
35
|
-
--wf-border: #
|
|
36
|
-
--wf-border-hover: #
|
|
37
|
+
/* Lines — warm dividers, never neutral gray */
|
|
38
|
+
--wf-border: #E3DBCB;
|
|
39
|
+
--wf-border-hover: #D2C8B4;
|
|
37
40
|
|
|
38
41
|
/* Feedback states */
|
|
39
|
-
--wf-destructive: #
|
|
40
|
-
--wf-destructive-bg: rgba(
|
|
42
|
+
--wf-destructive: #C0392B;
|
|
43
|
+
--wf-destructive-bg: rgba(192, 57, 43, 0.07);
|
|
41
44
|
--wf-warning: #B45309;
|
|
42
45
|
--wf-warning-bg: rgba(217, 119, 6, 0.08);
|
|
43
|
-
--wf-success: #
|
|
44
|
-
--wf-success-bg: rgba(
|
|
46
|
+
--wf-success: #1E8A57;
|
|
47
|
+
--wf-success-bg: rgba(30, 138, 87, 0.10);
|
|
45
48
|
--wf-success-fg: #FFFFFF;
|
|
46
49
|
|
|
47
|
-
/* Radii */
|
|
48
|
-
--wf-radius-sm: 0.
|
|
49
|
-
--wf-radius: 0.
|
|
50
|
-
--wf-radius-lg:
|
|
51
|
-
--wf-radius-xl:
|
|
50
|
+
/* Radii — sm 8 · md 12 · lg 16 · xl(card/2xl) 24 */
|
|
51
|
+
--wf-radius-sm: 0.5rem;
|
|
52
|
+
--wf-radius: 0.75rem;
|
|
53
|
+
--wf-radius-lg: 1rem;
|
|
54
|
+
--wf-radius-xl: 1.5rem;
|
|
52
55
|
|
|
53
|
-
/* Elevation */
|
|
56
|
+
/* Elevation — warm & diffuse oklch shadows + inset top highlight */
|
|
54
57
|
--wf-shadow-card:
|
|
55
|
-
|
|
56
|
-
0 1px 2px
|
|
57
|
-
0
|
|
58
|
-
0
|
|
59
|
-
--wf-shadow-btn:
|
|
60
|
-
|
|
61
|
-
|
|
58
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.6),
|
|
59
|
+
0 1px 2px oklch(0.3 0.02 85 / 0.05),
|
|
60
|
+
0 10px 28px -10px oklch(0.3 0.02 85 / 0.16),
|
|
61
|
+
0 32px 60px -28px oklch(0.3 0.02 85 / 0.22);
|
|
62
|
+
--wf-shadow-btn:
|
|
63
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.22),
|
|
64
|
+
0 1px 2px oklch(0.3 0.02 85 / 0.12),
|
|
65
|
+
0 6px 16px -6px oklch(0.55 0.13 155 / 0.42);
|
|
66
|
+
--wf-shadow-btn-hover:
|
|
67
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.22),
|
|
68
|
+
0 2px 4px oklch(0.3 0.02 85 / 0.12),
|
|
69
|
+
0 12px 26px -8px oklch(0.55 0.13 155 / 0.50);
|
|
70
|
+
--wf-shadow-input:
|
|
71
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
|
72
|
+
0 1px 2px oklch(0.3 0.02 85 / 0.05);
|
|
62
73
|
|
|
63
74
|
/* Motion */
|
|
64
75
|
--wf-ease: cubic-bezier(0.4, 0, 0.2, 1);
|
|
65
76
|
--wf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
66
77
|
|
|
67
78
|
/* Gradient endpoints (derived from primary; overridden by theme engine) */
|
|
68
|
-
--wf-primary-grad-start: #
|
|
69
|
-
--wf-primary-grad-end: #
|
|
79
|
+
--wf-primary-grad-start: #2FA86B;
|
|
80
|
+
--wf-primary-grad-end: #176A43;
|
|
70
81
|
|
|
71
|
-
/*
|
|
72
|
-
--wf-orb-1:
|
|
73
|
-
--wf-orb-2:
|
|
74
|
-
--wf-orb-3:
|
|
82
|
+
/* Ambient halos — green / blue-soft / purple-soft (AmbientBackdrop palette) */
|
|
83
|
+
--wf-orb-1: rgba(30, 138, 87, 0.16);
|
|
84
|
+
--wf-orb-2: rgba(58, 124, 196, 0.12);
|
|
85
|
+
--wf-orb-3: rgba(138, 110, 200, 0.11);
|
|
75
86
|
|
|
76
87
|
/* Face-capture overlay border */
|
|
77
|
-
--wf-face-border: rgba(
|
|
88
|
+
--wf-face-border: rgba(30, 138, 87, 0.55);
|
|
78
89
|
}
|
|
79
90
|
|
|
80
91
|
/* ============================= BASE ============================= */
|
|
@@ -119,16 +130,16 @@
|
|
|
119
130
|
pointer-events: none;
|
|
120
131
|
z-index: 0;
|
|
121
132
|
background:
|
|
122
|
-
radial-gradient(ellipse 90% 55% at 50% -10%,
|
|
123
|
-
radial-gradient(ellipse 70% 50% at 100% 100%,
|
|
133
|
+
radial-gradient(ellipse 90% 55% at 50% -10%, rgba(30, 138, 87, 0.10) 0%, transparent 60%),
|
|
134
|
+
radial-gradient(ellipse 70% 50% at 100% 100%, rgba(58, 124, 196, 0.08) 0%, transparent 55%),
|
|
124
135
|
var(--wf-bg);
|
|
125
136
|
}
|
|
126
137
|
|
|
127
138
|
.wf-bg-orb {
|
|
128
139
|
position: absolute;
|
|
129
140
|
border-radius: 50%;
|
|
130
|
-
filter: blur(
|
|
131
|
-
opacity: 0.
|
|
141
|
+
filter: blur(96px);
|
|
142
|
+
opacity: 0.8;
|
|
132
143
|
will-change: transform;
|
|
133
144
|
}
|
|
134
145
|
|
|
@@ -194,7 +205,7 @@
|
|
|
194
205
|
}
|
|
195
206
|
|
|
196
207
|
.wf-card-inner {
|
|
197
|
-
padding: 1.
|
|
208
|
+
padding: 1.875rem 2rem 2rem;
|
|
198
209
|
}
|
|
199
210
|
|
|
200
211
|
/* ============================= CARD HEADER ============================= */
|
|
@@ -221,7 +232,9 @@
|
|
|
221
232
|
align-items: center;
|
|
222
233
|
justify-content: center;
|
|
223
234
|
color: white;
|
|
224
|
-
box-shadow:
|
|
235
|
+
box-shadow:
|
|
236
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.35),
|
|
237
|
+
0 2px 6px -1px oklch(0.55 0.13 155 / 0.4);
|
|
225
238
|
}
|
|
226
239
|
|
|
227
240
|
.wf-card-logo svg {
|
|
@@ -291,6 +304,7 @@
|
|
|
291
304
|
font-weight: 600;
|
|
292
305
|
color: var(--wf-primary);
|
|
293
306
|
line-height: 1;
|
|
307
|
+
font-family: var(--wf-font-mono);
|
|
294
308
|
font-variant-numeric: tabular-nums;
|
|
295
309
|
}
|
|
296
310
|
|
|
@@ -316,11 +330,12 @@
|
|
|
316
330
|
display: flex;
|
|
317
331
|
align-items: flex-start;
|
|
318
332
|
gap: 0.5rem;
|
|
319
|
-
padding: 0.
|
|
333
|
+
padding: 0.6875rem 0.875rem;
|
|
320
334
|
margin-bottom: 1.125rem;
|
|
321
335
|
border-radius: var(--wf-radius);
|
|
322
336
|
background: var(--wf-destructive-bg);
|
|
323
|
-
border: 1px solid rgba(
|
|
337
|
+
border: 1px solid rgba(192, 57, 43, 0.18);
|
|
338
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
|
324
339
|
color: var(--wf-destructive);
|
|
325
340
|
font-size: 0.8125rem;
|
|
326
341
|
font-weight: 500;
|
|
@@ -384,6 +399,7 @@
|
|
|
384
399
|
padding: 0.5rem 0.75rem;
|
|
385
400
|
border-radius: var(--wf-radius);
|
|
386
401
|
background: var(--wf-muted-bg, rgba(0, 0, 0, 0.04));
|
|
402
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
387
403
|
color: var(--wf-fg-soft);
|
|
388
404
|
font-size: 0.8125rem;
|
|
389
405
|
font-weight: 500;
|
|
@@ -440,8 +456,8 @@
|
|
|
440
456
|
}
|
|
441
457
|
|
|
442
458
|
.wf-screen-back .wf-btn-ghost {
|
|
443
|
-
padding-left: 0.
|
|
444
|
-
margin-left: -0.
|
|
459
|
+
padding-left: 0.625rem;
|
|
460
|
+
margin-left: -0.625rem;
|
|
445
461
|
}
|
|
446
462
|
|
|
447
463
|
.wf-screen-header {
|
|
@@ -453,7 +469,8 @@
|
|
|
453
469
|
height: 2.5rem;
|
|
454
470
|
border-radius: var(--wf-radius-lg);
|
|
455
471
|
background: var(--wf-primary-light);
|
|
456
|
-
border: 1px solid rgba(
|
|
472
|
+
border: 1px solid rgba(30, 138, 87, 0.16);
|
|
473
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
|
457
474
|
display: flex;
|
|
458
475
|
align-items: center;
|
|
459
476
|
justify-content: center;
|
|
@@ -483,7 +500,7 @@
|
|
|
483
500
|
|
|
484
501
|
.wf-highlight {
|
|
485
502
|
font-weight: 600;
|
|
486
|
-
color: var(--wf-
|
|
503
|
+
color: var(--wf-primary);
|
|
487
504
|
}
|
|
488
505
|
|
|
489
506
|
/* ============================= FORM ============================= */
|
|
@@ -501,10 +518,11 @@
|
|
|
501
518
|
}
|
|
502
519
|
|
|
503
520
|
.wf-label {
|
|
504
|
-
font-size: 0.
|
|
505
|
-
font-weight:
|
|
521
|
+
font-size: 0.6875rem;
|
|
522
|
+
font-weight: 600;
|
|
506
523
|
color: var(--wf-fg-soft);
|
|
507
|
-
|
|
524
|
+
text-transform: uppercase;
|
|
525
|
+
letter-spacing: 0.05em;
|
|
508
526
|
}
|
|
509
527
|
|
|
510
528
|
/* ============================= INPUTS ============================= */
|
|
@@ -515,13 +533,13 @@
|
|
|
515
533
|
|
|
516
534
|
.wf-input {
|
|
517
535
|
display: flex;
|
|
518
|
-
height: 2.
|
|
536
|
+
height: 2.875rem;
|
|
519
537
|
width: 100%;
|
|
520
538
|
border-radius: var(--wf-radius);
|
|
521
539
|
border: 1px solid var(--wf-border);
|
|
522
540
|
background: var(--wf-input-bg);
|
|
523
|
-
padding: 0 0.
|
|
524
|
-
font-size: 0.
|
|
541
|
+
padding: 0 0.9375rem;
|
|
542
|
+
font-size: 0.9375rem;
|
|
525
543
|
font-family: var(--wf-font);
|
|
526
544
|
color: var(--wf-fg);
|
|
527
545
|
box-shadow: var(--wf-shadow-input);
|
|
@@ -536,7 +554,7 @@
|
|
|
536
554
|
outline: none;
|
|
537
555
|
border-color: var(--wf-primary);
|
|
538
556
|
background: var(--wf-card);
|
|
539
|
-
box-shadow: 0 0 0 3px var(--wf-primary-glow);
|
|
557
|
+
box-shadow: 0 0 0 3px var(--wf-primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
540
558
|
}
|
|
541
559
|
|
|
542
560
|
.wf-input::placeholder {
|
|
@@ -544,16 +562,16 @@
|
|
|
544
562
|
}
|
|
545
563
|
|
|
546
564
|
.wf-input-wrap .wf-input {
|
|
547
|
-
padding-left: 2.
|
|
565
|
+
padding-left: 2.625rem;
|
|
548
566
|
}
|
|
549
567
|
|
|
550
568
|
.wf-input-password .wf-input {
|
|
551
|
-
padding-right: 2.
|
|
569
|
+
padding-right: 2.625rem;
|
|
552
570
|
}
|
|
553
571
|
|
|
554
572
|
.wf-input-icon-left {
|
|
555
573
|
position: absolute;
|
|
556
|
-
left: 0.
|
|
574
|
+
left: 0.9375rem;
|
|
557
575
|
top: 50%;
|
|
558
576
|
transform: translateY(-50%);
|
|
559
577
|
width: 1rem;
|
|
@@ -596,19 +614,20 @@
|
|
|
596
614
|
.wf-mobile-row .wf-country-select {
|
|
597
615
|
width: auto;
|
|
598
616
|
min-width: 0;
|
|
599
|
-
max-width: 5.
|
|
617
|
+
max-width: 5.5rem;
|
|
600
618
|
flex-shrink: 0;
|
|
601
619
|
cursor: pointer;
|
|
602
620
|
appearance: none;
|
|
603
621
|
-webkit-appearance: none;
|
|
604
|
-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%
|
|
622
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237C8893' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
|
605
623
|
background-repeat: no-repeat;
|
|
606
624
|
background-position: right 0.625rem center;
|
|
607
625
|
padding-right: 2rem;
|
|
608
|
-
font-weight:
|
|
626
|
+
font-weight: 600;
|
|
627
|
+
font-family: var(--wf-font-mono);
|
|
609
628
|
}
|
|
610
629
|
|
|
611
|
-
.wf-mobile-row .wf-mobile-input { flex: 1; min-width: 0; }
|
|
630
|
+
.wf-mobile-row .wf-mobile-input { flex: 1; min-width: 0; font-family: var(--wf-font-mono); }
|
|
612
631
|
|
|
613
632
|
/* ============================= OTP ============================= */
|
|
614
633
|
|
|
@@ -618,15 +637,15 @@
|
|
|
618
637
|
}
|
|
619
638
|
|
|
620
639
|
.wf-otp-input {
|
|
621
|
-
width: 2.
|
|
622
|
-
height:
|
|
640
|
+
width: 2.875rem;
|
|
641
|
+
height: 3.25rem;
|
|
623
642
|
text-align: center;
|
|
624
|
-
font-size: 1.
|
|
643
|
+
font-size: 1.25rem;
|
|
625
644
|
font-weight: 600;
|
|
626
645
|
border-radius: var(--wf-radius);
|
|
627
646
|
border: 1px solid var(--wf-border);
|
|
628
647
|
background: var(--wf-input-bg);
|
|
629
|
-
font-family: var(--wf-font);
|
|
648
|
+
font-family: var(--wf-font-mono);
|
|
630
649
|
color: var(--wf-fg);
|
|
631
650
|
box-shadow: var(--wf-shadow-input);
|
|
632
651
|
transition: border-color 0.16s var(--wf-ease), box-shadow 0.16s var(--wf-ease), transform 0.16s var(--wf-ease);
|
|
@@ -637,16 +656,17 @@
|
|
|
637
656
|
.wf-otp-input:focus {
|
|
638
657
|
outline: none;
|
|
639
658
|
border-color: var(--wf-primary);
|
|
640
|
-
box-shadow: 0 0 0 3px var(--wf-primary-glow);
|
|
659
|
+
box-shadow: 0 0 0 3px var(--wf-primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
641
660
|
background: var(--wf-card);
|
|
642
661
|
}
|
|
643
662
|
|
|
644
663
|
.wf-otp-input:not(:placeholder-shown),
|
|
645
664
|
.wf-otp-input[value]:not([value=""]) {
|
|
646
|
-
border-color: var(--wf-
|
|
665
|
+
border-color: var(--wf-primary);
|
|
666
|
+
color: var(--wf-primary);
|
|
647
667
|
}
|
|
648
668
|
|
|
649
|
-
/* ============================= BUTTONS ============================= */
|
|
669
|
+
/* ============================= BUTTONS — pill family ============================= */
|
|
650
670
|
|
|
651
671
|
.wf-btn {
|
|
652
672
|
display: inline-flex;
|
|
@@ -654,8 +674,8 @@
|
|
|
654
674
|
justify-content: center;
|
|
655
675
|
gap: 0.5rem;
|
|
656
676
|
white-space: nowrap;
|
|
657
|
-
border-radius:
|
|
658
|
-
font-size: 0.
|
|
677
|
+
border-radius: 999px;
|
|
678
|
+
font-size: 0.875rem;
|
|
659
679
|
font-weight: 600;
|
|
660
680
|
font-family: var(--wf-font);
|
|
661
681
|
letter-spacing: -0.005em;
|
|
@@ -672,25 +692,25 @@
|
|
|
672
692
|
outline-offset: 2px;
|
|
673
693
|
}
|
|
674
694
|
|
|
675
|
-
.wf-btn-lg { height: 2.
|
|
695
|
+
.wf-btn-lg { height: 2.875rem; padding: 0 1.375rem; font-size: 0.875rem; }
|
|
676
696
|
.wf-btn-full { width: 100%; }
|
|
677
697
|
.wf-btn-flex { flex: 1; }
|
|
678
698
|
|
|
679
699
|
.wf-btn-primary {
|
|
680
700
|
background: linear-gradient(180deg, var(--wf-primary-grad-start) 0%, var(--wf-primary) 100%);
|
|
681
701
|
color: white;
|
|
682
|
-
box-shadow: var(--wf-shadow-btn)
|
|
702
|
+
box-shadow: var(--wf-shadow-btn);
|
|
683
703
|
}
|
|
684
704
|
|
|
685
705
|
.wf-btn-primary:hover:not(:disabled) {
|
|
686
|
-
box-shadow: var(--wf-shadow-btn-hover)
|
|
706
|
+
box-shadow: var(--wf-shadow-btn-hover);
|
|
687
707
|
transform: translateY(-1px);
|
|
688
708
|
filter: brightness(1.04);
|
|
689
709
|
}
|
|
690
710
|
|
|
691
711
|
.wf-btn-primary:active:not(:disabled) {
|
|
692
712
|
transform: translateY(0);
|
|
693
|
-
box-shadow: 0 1px
|
|
713
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px oklch(0.3 0.02 85 / 0.12);
|
|
694
714
|
filter: brightness(0.98);
|
|
695
715
|
}
|
|
696
716
|
|
|
@@ -704,6 +724,7 @@
|
|
|
704
724
|
.wf-btn-outline:hover:not(:disabled) {
|
|
705
725
|
background: var(--wf-muted-bg);
|
|
706
726
|
border-color: var(--wf-border-hover);
|
|
727
|
+
transform: translateY(-1px);
|
|
707
728
|
}
|
|
708
729
|
|
|
709
730
|
.wf-btn-social {
|
|
@@ -711,24 +732,25 @@
|
|
|
711
732
|
background: var(--wf-card);
|
|
712
733
|
color: var(--wf-fg-soft);
|
|
713
734
|
box-shadow: var(--wf-shadow-input);
|
|
714
|
-
font-weight:
|
|
735
|
+
font-weight: 600;
|
|
715
736
|
}
|
|
716
737
|
|
|
717
738
|
.wf-btn-social:hover:not(:disabled) {
|
|
718
739
|
background: var(--wf-muted-bg);
|
|
719
740
|
border-color: var(--wf-border-hover);
|
|
720
741
|
color: var(--wf-fg);
|
|
742
|
+
transform: translateY(-1px);
|
|
721
743
|
}
|
|
722
744
|
|
|
723
745
|
.wf-btn-success {
|
|
724
|
-
background: linear-gradient(180deg,
|
|
746
|
+
background: linear-gradient(180deg, var(--wf-primary-grad-start) 0%, var(--wf-success) 100%);
|
|
725
747
|
color: var(--wf-success-fg);
|
|
726
|
-
box-shadow:
|
|
748
|
+
box-shadow: var(--wf-shadow-btn);
|
|
727
749
|
}
|
|
728
750
|
|
|
729
751
|
.wf-btn-success:hover:not(:disabled) {
|
|
730
752
|
transform: translateY(-1px);
|
|
731
|
-
box-shadow:
|
|
753
|
+
box-shadow: var(--wf-shadow-btn-hover);
|
|
732
754
|
filter: brightness(1.03);
|
|
733
755
|
}
|
|
734
756
|
|
|
@@ -739,7 +761,7 @@
|
|
|
739
761
|
.wf-btn-ghost {
|
|
740
762
|
background: transparent;
|
|
741
763
|
color: var(--wf-muted);
|
|
742
|
-
font-weight:
|
|
764
|
+
font-weight: 600;
|
|
743
765
|
}
|
|
744
766
|
|
|
745
767
|
.wf-btn-ghost:hover:not(:disabled) {
|
|
@@ -759,7 +781,7 @@
|
|
|
759
781
|
.wf-social-buttons .wf-btn-social {
|
|
760
782
|
flex: 1 1 0;
|
|
761
783
|
min-width: 0;
|
|
762
|
-
height: 2.
|
|
784
|
+
height: 2.875rem;
|
|
763
785
|
font-size: 0.875rem;
|
|
764
786
|
font-weight: 600;
|
|
765
787
|
}
|
|
@@ -811,9 +833,10 @@
|
|
|
811
833
|
display: grid;
|
|
812
834
|
grid-template-columns: repeat(2, 1fr);
|
|
813
835
|
gap: 0.375rem 0.75rem;
|
|
814
|
-
padding: 0.
|
|
836
|
+
padding: 0.8125rem 0.9375rem;
|
|
815
837
|
background: var(--wf-muted-bg);
|
|
816
838
|
border-radius: var(--wf-radius);
|
|
839
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
817
840
|
}
|
|
818
841
|
|
|
819
842
|
.wf-rule {
|
|
@@ -871,6 +894,7 @@
|
|
|
871
894
|
overflow: hidden;
|
|
872
895
|
background: var(--wf-muted-bg);
|
|
873
896
|
border: 1px dashed var(--wf-border-hover);
|
|
897
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
874
898
|
display: flex;
|
|
875
899
|
align-items: center;
|
|
876
900
|
justify-content: center;
|
|
@@ -883,6 +907,7 @@
|
|
|
883
907
|
height: 3rem;
|
|
884
908
|
border-radius: 50%;
|
|
885
909
|
background: var(--wf-primary-light);
|
|
910
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
|
886
911
|
display: flex;
|
|
887
912
|
align-items: center;
|
|
888
913
|
justify-content: center;
|
|
@@ -892,7 +917,7 @@
|
|
|
892
917
|
.wf-camera-icon svg { width: 1.25rem; height: 1.25rem; color: var(--wf-primary); }
|
|
893
918
|
.wf-camera-placeholder p { font-size: 0.8125rem; color: var(--wf-muted); margin-bottom: 0.75rem; }
|
|
894
919
|
|
|
895
|
-
.wf-video, .wf-captured { width: 100%; height: 100%; object-fit: cover; }
|
|
920
|
+
.wf-video, .wf-captured { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
|
|
896
921
|
|
|
897
922
|
.wf-face-overlay {
|
|
898
923
|
position: absolute;
|
|
@@ -909,7 +934,7 @@
|
|
|
909
934
|
height: 13rem;
|
|
910
935
|
border: 2px solid var(--wf-face-border);
|
|
911
936
|
border-radius: 50%;
|
|
912
|
-
box-shadow: 0 0 0 9999px
|
|
937
|
+
box-shadow: 0 0 0 9999px oklch(0.3 0.02 85 / 0.12);
|
|
913
938
|
}
|
|
914
939
|
|
|
915
940
|
.wf-face-actions { display: flex; flex-direction: column; gap: 0.625rem; }
|
|
@@ -969,14 +994,14 @@
|
|
|
969
994
|
display: inline-flex;
|
|
970
995
|
align-items: center;
|
|
971
996
|
gap: 0.375rem;
|
|
972
|
-
padding: 0.
|
|
997
|
+
padding: 0.5rem 0.875rem;
|
|
973
998
|
font-size: 0.75rem;
|
|
974
999
|
font-weight: 600;
|
|
975
1000
|
font-family: var(--wf-font);
|
|
976
1001
|
color: var(--wf-primary);
|
|
977
1002
|
background: transparent;
|
|
978
1003
|
border: 1px solid var(--wf-border);
|
|
979
|
-
border-radius:
|
|
1004
|
+
border-radius: 999px;
|
|
980
1005
|
cursor: pointer;
|
|
981
1006
|
transition: all 0.15s var(--wf-ease);
|
|
982
1007
|
}
|
|
@@ -1000,15 +1025,16 @@
|
|
|
1000
1025
|
background: var(--wf-input-bg, var(--wf-card));
|
|
1001
1026
|
border: 1.5px solid var(--wf-primary);
|
|
1002
1027
|
border-radius: var(--wf-radius-sm);
|
|
1028
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
1003
1029
|
font-size: 1.375rem;
|
|
1004
1030
|
font-weight: 700;
|
|
1005
|
-
color: var(--wf-
|
|
1006
|
-
font-family: var(--wf-font);
|
|
1031
|
+
color: var(--wf-primary);
|
|
1032
|
+
font-family: var(--wf-font-mono);
|
|
1007
1033
|
font-variant-numeric: tabular-nums;
|
|
1008
1034
|
}
|
|
1009
1035
|
|
|
1010
1036
|
.wf-capture-meta { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
|
|
1011
|
-
.wf-capture-timer { font-size: 0.75rem; color: var(--wf-muted); margin: 0; font-variant-numeric: tabular-nums; }
|
|
1037
|
+
.wf-capture-timer { font-size: 0.75rem; color: var(--wf-muted); margin: 0; font-family: var(--wf-font-mono); font-variant-numeric: tabular-nums; }
|
|
1012
1038
|
.wf-capture-status { font-size: 0.8125rem; color: var(--wf-fg-soft); margin: 0; }
|
|
1013
1039
|
.wf-capture-status-done { color: var(--wf-success); font-weight: 600; }
|
|
1014
1040
|
|
|
@@ -1027,6 +1053,7 @@
|
|
|
1027
1053
|
height: 3rem;
|
|
1028
1054
|
border-radius: 50%;
|
|
1029
1055
|
background: var(--wf-success-bg);
|
|
1056
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
|
1030
1057
|
display: flex;
|
|
1031
1058
|
align-items: center;
|
|
1032
1059
|
justify-content: center;
|
|
@@ -1051,6 +1078,7 @@
|
|
|
1051
1078
|
height: 3.75rem;
|
|
1052
1079
|
border-radius: 50%;
|
|
1053
1080
|
background: var(--wf-success-bg);
|
|
1081
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 20px -8px oklch(0.55 0.13 155 / 0.4);
|
|
1054
1082
|
display: flex;
|
|
1055
1083
|
align-items: center;
|
|
1056
1084
|
justify-content: center;
|
|
@@ -1109,7 +1137,7 @@
|
|
|
1109
1137
|
/* ---- Tablet (portrait) & small laptops ---- */
|
|
1110
1138
|
@media (max-width: 768px) {
|
|
1111
1139
|
.wf-card { max-width: 420px; }
|
|
1112
|
-
.wf-card-inner { padding: 1.
|
|
1140
|
+
.wf-card-inner { padding: 1.625rem 1.625rem 1.75rem; }
|
|
1113
1141
|
.wf-card-header { margin-bottom: 1.375rem; }
|
|
1114
1142
|
.wf-screen { gap: 1.125rem; }
|
|
1115
1143
|
.wf-screen-title { font-size: 1.375rem; }
|
|
@@ -1147,14 +1175,14 @@
|
|
|
1147
1175
|
|
|
1148
1176
|
.wf-form { gap: 0.875rem; }
|
|
1149
1177
|
|
|
1150
|
-
.wf-social-buttons .wf-btn-social { height: 2.
|
|
1178
|
+
.wf-social-buttons .wf-btn-social { height: 2.75rem; font-size: 0.8125rem; }
|
|
1151
1179
|
|
|
1152
1180
|
.wf-row-2 { grid-template-columns: 1fr 1fr; gap: 0.625rem; }
|
|
1153
1181
|
|
|
1154
1182
|
.wf-password-rules { grid-template-columns: 1fr; }
|
|
1155
1183
|
|
|
1156
1184
|
.wf-otp-row { gap: 0.5rem; justify-content: space-between; }
|
|
1157
|
-
.wf-otp-input { flex: 1; width: auto; height:
|
|
1185
|
+
.wf-otp-input { flex: 1; width: auto; height: 3rem; font-size: 1.125rem; }
|
|
1158
1186
|
|
|
1159
1187
|
.wf-camera-view { aspect-ratio: 1 / 1; }
|
|
1160
1188
|
.wf-face-overlay::before { width: 8rem; height: 10rem; }
|
|
@@ -1178,14 +1206,14 @@
|
|
|
1178
1206
|
|
|
1179
1207
|
.wf-screen-title { font-size: 1.1875rem; }
|
|
1180
1208
|
.wf-screen-desc { font-size: 0.75rem; }
|
|
1181
|
-
.wf-label { font-size: 0.
|
|
1182
|
-
.wf-input { height: 2.
|
|
1183
|
-
.wf-input-wrap .wf-input { padding-left: 2.
|
|
1184
|
-
.wf-btn-lg { height: 2.
|
|
1209
|
+
.wf-label { font-size: 0.625rem; }
|
|
1210
|
+
.wf-input { height: 2.75rem; font-size: 0.875rem; padding: 0 0.8125rem; }
|
|
1211
|
+
.wf-input-wrap .wf-input { padding-left: 2.375rem; }
|
|
1212
|
+
.wf-btn-lg { height: 2.75rem; font-size: 0.8125rem; padding: 0 1.125rem; }
|
|
1185
1213
|
|
|
1186
1214
|
.wf-row-2 { grid-template-columns: 1fr; }
|
|
1187
1215
|
|
|
1188
|
-
.wf-otp-input { height: 2.
|
|
1216
|
+
.wf-otp-input { height: 2.75rem; font-size: 1.0625rem; }
|
|
1189
1217
|
.wf-otp-row { gap: 0.375rem; }
|
|
1190
1218
|
|
|
1191
1219
|
.wf-divider span { font-size: 0.625rem; }
|