central-auth-js-sdk 1.0.14 → 1.2.0
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/INTEGRATION_GUIDE.md +13 -0
- package/package.json +1 -1
- package/styles.css +255 -177
- package/theme.js +2 -2
- package/ui/layout.js +0 -1
package/INTEGRATION_GUIDE.md
CHANGED
|
@@ -411,6 +411,19 @@ You can also read **`instance.getState()`** after the flow completes; it include
|
|
|
411
411
|
|
|
412
412
|
---
|
|
413
413
|
|
|
414
|
+
## 8.1 Troubleshooting Callbacks
|
|
415
|
+
|
|
416
|
+
If you are not receiving the `onLoginComplete` callback, check the following common issues:
|
|
417
|
+
|
|
418
|
+
1. **Social Login (OAuth) Page Reloads:** Social login requires a full browser redirect. If you only pass `onLoginComplete` to `startLogin()`, it will be lost when the page reloads. You **must** pass `onLoginComplete` directly into `initializeAuth()` so the SDK can trigger it when it auto-resumes the OAuth flow.
|
|
419
|
+
2. **Differing Payload Structures:** The `payload` object returned by `onLoginComplete(payload)` differs slightly depending on the method.
|
|
420
|
+
- Standard logins (Password/OTP/FRS) return the exact API response (e.g. `payload.access_token`).
|
|
421
|
+
- Social Login returns URL params (e.g. `payload.token`).
|
|
422
|
+
- Always check for both (e.g., `payload.token || payload.access_token`) to prevent undefined errors in your callback.
|
|
423
|
+
3. **FRS Fallbacks:** If a user uses an FRS fallback ("Sign in with OTP instead" or "Use phone instead"), the SDK automatically handles the fallback and **still fires `onLoginComplete`** upon successful authentication. No separate callback handles these cases.
|
|
424
|
+
|
|
425
|
+
---
|
|
426
|
+
|
|
414
427
|
## 9. Returning to the parent application
|
|
415
428
|
|
|
416
429
|
The SDK does **not** automatically navigate your app when the user leaves auth. Your parent app is responsible for showing/hiding the auth container and routing the user back to your own UI. Use the callbacks below.
|
package/package.json
CHANGED
package/styles.css
CHANGED
|
@@ -1,58 +1,80 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Central Auth SDK — Design System
|
|
3
|
-
*
|
|
2
|
+
* Central Auth SDK — Design System v4.0
|
|
3
|
+
* Enterprise revamp: neutral base, confident indigo accent, crisp borders,
|
|
4
|
+
* refined elevation, Inter typography. Centered-card layout.
|
|
5
|
+
*
|
|
6
|
+
* NOTE: Only presentation changed. Every selector, class name and CSS custom
|
|
7
|
+
* property used by the SDK markup and theme engine is preserved verbatim.
|
|
4
8
|
*/
|
|
5
9
|
|
|
6
|
-
@import url('https://fonts.googleapis.com/css2?family=
|
|
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');
|
|
7
11
|
|
|
8
12
|
/* ============================= DESIGN TOKENS ============================= */
|
|
9
13
|
|
|
10
14
|
:root {
|
|
11
|
-
--wf-font: '
|
|
12
|
-
|
|
15
|
+
--wf-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
|
16
|
+
|
|
17
|
+
/* Surfaces */
|
|
18
|
+
--wf-bg: #F7F8FA;
|
|
13
19
|
--wf-card: #FFFFFF;
|
|
14
|
-
--wf-
|
|
15
|
-
--wf-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
--wf-
|
|
19
|
-
--wf-
|
|
20
|
-
--wf-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
--wf-
|
|
24
|
-
--wf-
|
|
25
|
-
--wf-
|
|
26
|
-
--wf-
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
--wf-input-bg: #FFFFFF;
|
|
21
|
+
--wf-muted-bg: #F4F4F5;
|
|
22
|
+
|
|
23
|
+
/* Text */
|
|
24
|
+
--wf-fg: #18181B;
|
|
25
|
+
--wf-fg-soft: #3F3F46;
|
|
26
|
+
--wf-muted: #71717A;
|
|
27
|
+
|
|
28
|
+
/* Primary accent (indigo) */
|
|
29
|
+
--wf-primary: #4F46E5;
|
|
30
|
+
--wf-primary-dark: #4338CA;
|
|
31
|
+
--wf-primary-light: rgba(79, 70, 229, 0.06);
|
|
32
|
+
--wf-primary-glow: rgba(79, 70, 229, 0.15);
|
|
33
|
+
|
|
34
|
+
/* Borders */
|
|
35
|
+
--wf-border: #E4E4E7;
|
|
36
|
+
--wf-border-hover: #D4D4D8;
|
|
37
|
+
|
|
38
|
+
/* Feedback states */
|
|
39
|
+
--wf-destructive: #DC2626;
|
|
40
|
+
--wf-destructive-bg: rgba(220, 38, 38, 0.06);
|
|
41
|
+
--wf-warning: #B45309;
|
|
42
|
+
--wf-warning-bg: rgba(217, 119, 6, 0.08);
|
|
43
|
+
--wf-success: #059669;
|
|
44
|
+
--wf-success-bg: rgba(5, 150, 105, 0.09);
|
|
29
45
|
--wf-success-fg: #FFFFFF;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
--wf-radius-
|
|
33
|
-
--wf-radius
|
|
46
|
+
|
|
47
|
+
/* Radii */
|
|
48
|
+
--wf-radius-sm: 0.375rem;
|
|
49
|
+
--wf-radius: 0.5rem;
|
|
50
|
+
--wf-radius-lg: 0.75rem;
|
|
51
|
+
--wf-radius-xl: 1rem;
|
|
52
|
+
|
|
53
|
+
/* Elevation */
|
|
34
54
|
--wf-shadow-card:
|
|
35
|
-
0 0 0 1px rgba(
|
|
36
|
-
0 1px 2px rgba(
|
|
37
|
-
0
|
|
38
|
-
0
|
|
39
|
-
--wf-shadow-btn: 0 1px
|
|
40
|
-
--wf-shadow-btn-hover: 0 2px
|
|
41
|
-
--wf-shadow-input: 0 1px 2px rgba(
|
|
55
|
+
0 0 0 1px rgba(24, 24, 27, 0.04),
|
|
56
|
+
0 1px 2px rgba(24, 24, 27, 0.04),
|
|
57
|
+
0 8px 24px -8px rgba(24, 24, 27, 0.10),
|
|
58
|
+
0 24px 48px -16px rgba(24, 24, 27, 0.10);
|
|
59
|
+
--wf-shadow-btn: 0 1px 2px rgba(24, 24, 27, 0.10), 0 1px 3px rgba(79, 70, 229, 0.20);
|
|
60
|
+
--wf-shadow-btn-hover: 0 2px 4px rgba(24, 24, 27, 0.10), 0 6px 16px -4px rgba(79, 70, 229, 0.32);
|
|
61
|
+
--wf-shadow-input: 0 1px 2px rgba(24, 24, 27, 0.04);
|
|
62
|
+
|
|
63
|
+
/* Motion */
|
|
42
64
|
--wf-ease: cubic-bezier(0.4, 0, 0.2, 1);
|
|
43
65
|
--wf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
44
66
|
|
|
45
67
|
/* Gradient endpoints (derived from primary; overridden by theme engine) */
|
|
46
|
-
--wf-primary-grad-start: #
|
|
47
|
-
--wf-primary-grad-end: #
|
|
68
|
+
--wf-primary-grad-start: #6366F1;
|
|
69
|
+
--wf-primary-grad-end: #4338CA;
|
|
48
70
|
|
|
49
|
-
/* Decorative orb colors */
|
|
50
|
-
--wf-orb-1: hsla(
|
|
51
|
-
--wf-orb-2: hsla(
|
|
52
|
-
--wf-orb-3: hsla(
|
|
71
|
+
/* Decorative orb colors — kept subtle for a clean enterprise default */
|
|
72
|
+
--wf-orb-1: hsla(243, 75%, 70%, 0.16);
|
|
73
|
+
--wf-orb-2: hsla(234, 89%, 74%, 0.12);
|
|
74
|
+
--wf-orb-3: hsla(250, 70%, 72%, 0.10);
|
|
53
75
|
|
|
54
76
|
/* Face-capture overlay border */
|
|
55
|
-
--wf-face-border: rgba(
|
|
77
|
+
--wf-face-border: rgba(79, 70, 229, 0.55);
|
|
56
78
|
}
|
|
57
79
|
|
|
58
80
|
/* ============================= BASE ============================= */
|
|
@@ -79,7 +101,17 @@
|
|
|
79
101
|
overflow-x: hidden;
|
|
80
102
|
}
|
|
81
103
|
|
|
82
|
-
|
|
104
|
+
@media (prefers-reduced-motion: reduce) {
|
|
105
|
+
.wf-layout *,
|
|
106
|
+
.wf-layout *::before,
|
|
107
|
+
.wf-layout *::after {
|
|
108
|
+
animation-duration: 0.001ms !important;
|
|
109
|
+
animation-iteration-count: 1 !important;
|
|
110
|
+
transition-duration: 0.001ms !important;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* ============================= BACKGROUND ============================= */
|
|
83
115
|
|
|
84
116
|
.wf-bg {
|
|
85
117
|
position: fixed;
|
|
@@ -87,60 +119,59 @@
|
|
|
87
119
|
pointer-events: none;
|
|
88
120
|
z-index: 0;
|
|
89
121
|
background:
|
|
90
|
-
radial-gradient(ellipse
|
|
91
|
-
radial-gradient(ellipse
|
|
92
|
-
radial-gradient(ellipse 50% 50% at 50% 50%, hsla(20, 30%, 92%, 0.4) 0%, transparent 60%),
|
|
122
|
+
radial-gradient(ellipse 90% 55% at 50% -10%, hsla(243, 80%, 96%, 0.9) 0%, transparent 60%),
|
|
123
|
+
radial-gradient(ellipse 70% 50% at 100% 100%, hsla(234, 70%, 96%, 0.6) 0%, transparent 55%),
|
|
93
124
|
var(--wf-bg);
|
|
94
125
|
}
|
|
95
126
|
|
|
96
127
|
.wf-bg-orb {
|
|
97
128
|
position: absolute;
|
|
98
129
|
border-radius: 50%;
|
|
99
|
-
filter: blur(
|
|
100
|
-
opacity: 0.
|
|
130
|
+
filter: blur(90px);
|
|
131
|
+
opacity: 0.7;
|
|
101
132
|
will-change: transform;
|
|
102
133
|
}
|
|
103
134
|
|
|
104
135
|
.wf-bg-orb-1 {
|
|
105
|
-
width:
|
|
106
|
-
height:
|
|
107
|
-
top: -
|
|
108
|
-
left: -
|
|
136
|
+
width: 480px;
|
|
137
|
+
height: 480px;
|
|
138
|
+
top: -12%;
|
|
139
|
+
left: -6%;
|
|
109
140
|
background: var(--wf-orb-1);
|
|
110
|
-
animation: wf-drift-1
|
|
141
|
+
animation: wf-drift-1 24s ease-in-out infinite;
|
|
111
142
|
}
|
|
112
143
|
|
|
113
144
|
.wf-bg-orb-2 {
|
|
114
|
-
width:
|
|
115
|
-
height:
|
|
116
|
-
bottom: -
|
|
117
|
-
right: -
|
|
145
|
+
width: 420px;
|
|
146
|
+
height: 420px;
|
|
147
|
+
bottom: -12%;
|
|
148
|
+
right: -6%;
|
|
118
149
|
background: var(--wf-orb-2);
|
|
119
|
-
animation: wf-drift-2
|
|
150
|
+
animation: wf-drift-2 28s ease-in-out infinite;
|
|
120
151
|
}
|
|
121
152
|
|
|
122
153
|
.wf-bg-orb-3 {
|
|
123
|
-
width:
|
|
124
|
-
height:
|
|
125
|
-
top:
|
|
126
|
-
right:
|
|
154
|
+
width: 320px;
|
|
155
|
+
height: 320px;
|
|
156
|
+
top: 32%;
|
|
157
|
+
right: 22%;
|
|
127
158
|
background: var(--wf-orb-3);
|
|
128
|
-
animation: wf-drift-3
|
|
159
|
+
animation: wf-drift-3 22s ease-in-out infinite;
|
|
129
160
|
}
|
|
130
161
|
|
|
131
162
|
@keyframes wf-drift-1 {
|
|
132
163
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
133
|
-
50% { transform: translate(
|
|
164
|
+
50% { transform: translate(36px, 28px) scale(1.05); }
|
|
134
165
|
}
|
|
135
166
|
|
|
136
167
|
@keyframes wf-drift-2 {
|
|
137
168
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
138
|
-
50% { transform: translate(-
|
|
169
|
+
50% { transform: translate(-28px, -36px) scale(1.08); }
|
|
139
170
|
}
|
|
140
171
|
|
|
141
172
|
@keyframes wf-drift-3 {
|
|
142
173
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
143
|
-
50% { transform: translate(-
|
|
174
|
+
50% { transform: translate(-18px, 18px) scale(0.95); }
|
|
144
175
|
}
|
|
145
176
|
|
|
146
177
|
/* ============================= CARD ============================= */
|
|
@@ -149,26 +180,21 @@
|
|
|
149
180
|
position: relative;
|
|
150
181
|
z-index: 1;
|
|
151
182
|
width: 100%;
|
|
152
|
-
max-width:
|
|
183
|
+
max-width: 440px;
|
|
153
184
|
background: var(--wf-card);
|
|
154
185
|
border-radius: var(--wf-radius-xl);
|
|
155
186
|
box-shadow: var(--wf-shadow-card);
|
|
156
|
-
|
|
187
|
+
overflow: hidden;
|
|
188
|
+
animation: wf-card-enter 0.45s var(--wf-ease) both;
|
|
157
189
|
}
|
|
158
190
|
|
|
159
191
|
@keyframes wf-card-enter {
|
|
160
|
-
from { opacity: 0; transform: translateY(
|
|
192
|
+
from { opacity: 0; transform: translateY(12px) scale(0.99); }
|
|
161
193
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
162
194
|
}
|
|
163
195
|
|
|
164
|
-
.wf-card-accent {
|
|
165
|
-
height: 3px;
|
|
166
|
-
background: linear-gradient(90deg, var(--wf-primary-grad-start) 0%, var(--wf-primary) 50%, var(--wf-primary-grad-end) 100%);
|
|
167
|
-
border-radius: var(--wf-radius-xl) var(--wf-radius-xl) 0 0;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
196
|
.wf-card-inner {
|
|
171
|
-
padding: 2rem
|
|
197
|
+
padding: 1.75rem 2rem 2rem;
|
|
172
198
|
}
|
|
173
199
|
|
|
174
200
|
/* ============================= CARD HEADER ============================= */
|
|
@@ -177,7 +203,7 @@
|
|
|
177
203
|
display: flex;
|
|
178
204
|
align-items: center;
|
|
179
205
|
justify-content: space-between;
|
|
180
|
-
margin-bottom: 1.
|
|
206
|
+
margin-bottom: 1.5rem;
|
|
181
207
|
}
|
|
182
208
|
|
|
183
209
|
.wf-card-brand {
|
|
@@ -187,24 +213,25 @@
|
|
|
187
213
|
}
|
|
188
214
|
|
|
189
215
|
.wf-card-logo {
|
|
190
|
-
width:
|
|
191
|
-
height:
|
|
192
|
-
border-radius: var(--wf-radius
|
|
193
|
-
background: var(--wf-primary);
|
|
216
|
+
width: 1.875rem;
|
|
217
|
+
height: 1.875rem;
|
|
218
|
+
border-radius: var(--wf-radius);
|
|
219
|
+
background: linear-gradient(135deg, var(--wf-primary-grad-start) 0%, var(--wf-primary) 100%);
|
|
194
220
|
display: flex;
|
|
195
221
|
align-items: center;
|
|
196
222
|
justify-content: center;
|
|
197
223
|
color: white;
|
|
224
|
+
box-shadow: 0 1px 2px rgba(24, 24, 27, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
|
198
225
|
}
|
|
199
226
|
|
|
200
227
|
.wf-card-logo svg {
|
|
201
|
-
width:
|
|
202
|
-
height:
|
|
228
|
+
width: 0.9375rem;
|
|
229
|
+
height: 0.9375rem;
|
|
203
230
|
}
|
|
204
231
|
|
|
205
232
|
.wf-card-brand-name {
|
|
206
233
|
font-size: 0.9375rem;
|
|
207
|
-
font-weight:
|
|
234
|
+
font-weight: 600;
|
|
208
235
|
color: var(--wf-fg);
|
|
209
236
|
letter-spacing: -0.01em;
|
|
210
237
|
}
|
|
@@ -213,8 +240,8 @@
|
|
|
213
240
|
|
|
214
241
|
.wf-ring {
|
|
215
242
|
position: relative;
|
|
216
|
-
width: 2.
|
|
217
|
-
height: 2.
|
|
243
|
+
width: 2.375rem;
|
|
244
|
+
height: 2.375rem;
|
|
218
245
|
flex-shrink: 0;
|
|
219
246
|
}
|
|
220
247
|
|
|
@@ -231,7 +258,7 @@
|
|
|
231
258
|
|
|
232
259
|
@keyframes wf-ring-glow {
|
|
233
260
|
0%, 100% { opacity: 0; transform: scale(0.85); }
|
|
234
|
-
50% { opacity: 0.
|
|
261
|
+
50% { opacity: 0.4; transform: scale(1.08); }
|
|
235
262
|
}
|
|
236
263
|
|
|
237
264
|
.wf-ring-svg {
|
|
@@ -244,12 +271,12 @@
|
|
|
244
271
|
.wf-ring-track {
|
|
245
272
|
fill: none;
|
|
246
273
|
stroke: var(--wf-muted-bg);
|
|
247
|
-
stroke-width: 2.
|
|
274
|
+
stroke-width: 2.6;
|
|
248
275
|
}
|
|
249
276
|
|
|
250
277
|
.wf-ring-fill {
|
|
251
278
|
fill: none;
|
|
252
|
-
stroke-width: 2.
|
|
279
|
+
stroke-width: 2.6;
|
|
253
280
|
stroke-linecap: round;
|
|
254
281
|
transition: stroke-dashoffset 0.6s var(--wf-ease);
|
|
255
282
|
}
|
|
@@ -261,9 +288,10 @@
|
|
|
261
288
|
align-items: center;
|
|
262
289
|
justify-content: center;
|
|
263
290
|
font-size: 0.8125rem;
|
|
264
|
-
font-weight:
|
|
291
|
+
font-weight: 600;
|
|
265
292
|
color: var(--wf-primary);
|
|
266
293
|
line-height: 1;
|
|
294
|
+
font-variant-numeric: tabular-nums;
|
|
267
295
|
}
|
|
268
296
|
|
|
269
297
|
.wf-ring-num.wf-ring-pop {
|
|
@@ -285,15 +313,35 @@
|
|
|
285
313
|
/* ============================= ERROR BANNER ============================= */
|
|
286
314
|
|
|
287
315
|
.wf-error-banner {
|
|
316
|
+
display: flex;
|
|
317
|
+
align-items: flex-start;
|
|
318
|
+
gap: 0.5rem;
|
|
288
319
|
padding: 0.625rem 0.875rem;
|
|
289
|
-
margin-bottom: 1.
|
|
320
|
+
margin-bottom: 1.125rem;
|
|
290
321
|
border-radius: var(--wf-radius);
|
|
291
322
|
background: var(--wf-destructive-bg);
|
|
292
|
-
border: 1px solid rgba(
|
|
323
|
+
border: 1px solid rgba(220, 38, 38, 0.16);
|
|
293
324
|
color: var(--wf-destructive);
|
|
294
325
|
font-size: 0.8125rem;
|
|
295
326
|
font-weight: 500;
|
|
296
|
-
line-height: 1.
|
|
327
|
+
line-height: 1.45;
|
|
328
|
+
animation: wf-banner-in 0.25s var(--wf-ease) both;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.wf-error-banner::before {
|
|
332
|
+
content: '';
|
|
333
|
+
flex-shrink: 0;
|
|
334
|
+
width: 1rem;
|
|
335
|
+
height: 1rem;
|
|
336
|
+
margin-top: 0.0625rem;
|
|
337
|
+
background-color: currentColor;
|
|
338
|
+
-webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
|
|
339
|
+
mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
@keyframes wf-banner-in {
|
|
343
|
+
from { opacity: 0; transform: translateY(-4px); }
|
|
344
|
+
to { opacity: 1; transform: translateY(0); }
|
|
297
345
|
}
|
|
298
346
|
|
|
299
347
|
.wf-error-banner.hidden {
|
|
@@ -358,7 +406,8 @@
|
|
|
358
406
|
|
|
359
407
|
#wf-form-inner.wf-loading-active {
|
|
360
408
|
pointer-events: none;
|
|
361
|
-
opacity: 0.
|
|
409
|
+
opacity: 0.6;
|
|
410
|
+
transition: opacity 0.2s var(--wf-ease);
|
|
362
411
|
}
|
|
363
412
|
|
|
364
413
|
/* ============================= PAGE FOOTER ============================= */
|
|
@@ -377,8 +426,8 @@
|
|
|
377
426
|
.wf-screen {
|
|
378
427
|
display: flex;
|
|
379
428
|
flex-direction: column;
|
|
380
|
-
gap: 1.
|
|
381
|
-
animation: wf-screen-in 0.
|
|
429
|
+
gap: 1.25rem;
|
|
430
|
+
animation: wf-screen-in 0.3s var(--wf-ease) both;
|
|
382
431
|
}
|
|
383
432
|
|
|
384
433
|
@keyframes wf-screen-in {
|
|
@@ -387,11 +436,12 @@
|
|
|
387
436
|
}
|
|
388
437
|
|
|
389
438
|
.wf-screen-back {
|
|
390
|
-
margin-bottom: 0.
|
|
439
|
+
margin-bottom: 0.5rem;
|
|
391
440
|
}
|
|
392
441
|
|
|
393
442
|
.wf-screen-back .wf-btn-ghost {
|
|
394
|
-
padding-left: 0;
|
|
443
|
+
padding-left: 0.5rem;
|
|
444
|
+
margin-left: -0.5rem;
|
|
395
445
|
}
|
|
396
446
|
|
|
397
447
|
.wf-screen-header {
|
|
@@ -401,12 +451,13 @@
|
|
|
401
451
|
.wf-icon-box {
|
|
402
452
|
width: 2.5rem;
|
|
403
453
|
height: 2.5rem;
|
|
404
|
-
border-radius: var(--wf-radius);
|
|
454
|
+
border-radius: var(--wf-radius-lg);
|
|
405
455
|
background: var(--wf-primary-light);
|
|
456
|
+
border: 1px solid rgba(79, 70, 229, 0.12);
|
|
406
457
|
display: flex;
|
|
407
458
|
align-items: center;
|
|
408
459
|
justify-content: center;
|
|
409
|
-
margin-bottom:
|
|
460
|
+
margin-bottom: 0.875rem;
|
|
410
461
|
}
|
|
411
462
|
|
|
412
463
|
.wf-icon-box svg {
|
|
@@ -416,11 +467,11 @@
|
|
|
416
467
|
}
|
|
417
468
|
|
|
418
469
|
.wf-screen-title {
|
|
419
|
-
font-size: 1.
|
|
470
|
+
font-size: 1.4375rem;
|
|
420
471
|
font-weight: 700;
|
|
421
472
|
letter-spacing: -0.025em;
|
|
422
473
|
line-height: 1.2;
|
|
423
|
-
margin-bottom: 0.
|
|
474
|
+
margin-bottom: 0.3125rem;
|
|
424
475
|
color: var(--wf-fg);
|
|
425
476
|
}
|
|
426
477
|
|
|
@@ -446,13 +497,14 @@
|
|
|
446
497
|
.wf-field {
|
|
447
498
|
display: flex;
|
|
448
499
|
flex-direction: column;
|
|
449
|
-
gap: 0.
|
|
500
|
+
gap: 0.375rem;
|
|
450
501
|
}
|
|
451
502
|
|
|
452
503
|
.wf-label {
|
|
453
504
|
font-size: 0.8125rem;
|
|
454
|
-
font-weight:
|
|
505
|
+
font-weight: 550;
|
|
455
506
|
color: var(--wf-fg-soft);
|
|
507
|
+
letter-spacing: -0.005em;
|
|
456
508
|
}
|
|
457
509
|
|
|
458
510
|
/* ============================= INPUTS ============================= */
|
|
@@ -466,19 +518,18 @@
|
|
|
466
518
|
height: 2.75rem;
|
|
467
519
|
width: 100%;
|
|
468
520
|
border-radius: var(--wf-radius);
|
|
469
|
-
border:
|
|
521
|
+
border: 1px solid var(--wf-border);
|
|
470
522
|
background: var(--wf-input-bg);
|
|
471
523
|
padding: 0 0.875rem;
|
|
472
524
|
font-size: 0.875rem;
|
|
473
525
|
font-family: var(--wf-font);
|
|
474
526
|
color: var(--wf-fg);
|
|
475
527
|
box-shadow: var(--wf-shadow-input);
|
|
476
|
-
transition: border-color 0.
|
|
528
|
+
transition: border-color 0.16s var(--wf-ease), box-shadow 0.16s var(--wf-ease), background 0.16s var(--wf-ease);
|
|
477
529
|
}
|
|
478
530
|
|
|
479
531
|
.wf-input:hover {
|
|
480
532
|
border-color: var(--wf-border-hover);
|
|
481
|
-
background: var(--wf-card);
|
|
482
533
|
}
|
|
483
534
|
|
|
484
535
|
.wf-input:focus {
|
|
@@ -509,7 +560,7 @@
|
|
|
509
560
|
height: 1rem;
|
|
510
561
|
color: var(--wf-muted);
|
|
511
562
|
pointer-events: none;
|
|
512
|
-
transition: color 0.
|
|
563
|
+
transition: color 0.16s var(--wf-ease);
|
|
513
564
|
}
|
|
514
565
|
|
|
515
566
|
.wf-input:focus ~ .wf-input-icon-left,
|
|
@@ -519,19 +570,23 @@
|
|
|
519
570
|
|
|
520
571
|
.wf-input-toggle {
|
|
521
572
|
position: absolute;
|
|
522
|
-
right: 0.
|
|
573
|
+
right: 0.5rem;
|
|
523
574
|
top: 50%;
|
|
524
575
|
transform: translateY(-50%);
|
|
525
576
|
background: none;
|
|
526
577
|
border: none;
|
|
527
578
|
cursor: pointer;
|
|
528
579
|
color: var(--wf-muted);
|
|
529
|
-
padding: 0.
|
|
530
|
-
border-radius:
|
|
531
|
-
|
|
580
|
+
padding: 0.375rem;
|
|
581
|
+
border-radius: var(--wf-radius-sm);
|
|
582
|
+
display: flex;
|
|
583
|
+
align-items: center;
|
|
584
|
+
justify-content: center;
|
|
585
|
+
transition: color 0.16s var(--wf-ease), background 0.16s var(--wf-ease);
|
|
532
586
|
}
|
|
533
587
|
|
|
534
|
-
.wf-input-toggle:hover { color: var(--wf-fg); }
|
|
588
|
+
.wf-input-toggle:hover { color: var(--wf-fg); background: var(--wf-muted-bg); }
|
|
589
|
+
.wf-input-toggle:focus-visible { outline: 2px solid var(--wf-primary); outline-offset: 1px; }
|
|
535
590
|
|
|
536
591
|
.wf-input-toggle svg { width: 1rem; height: 1rem; }
|
|
537
592
|
|
|
@@ -541,15 +596,16 @@
|
|
|
541
596
|
.wf-mobile-row .wf-country-select {
|
|
542
597
|
width: auto;
|
|
543
598
|
min-width: 0;
|
|
544
|
-
max-width:
|
|
599
|
+
max-width: 5.25rem;
|
|
545
600
|
flex-shrink: 0;
|
|
546
601
|
cursor: pointer;
|
|
547
602
|
appearance: none;
|
|
548
603
|
-webkit-appearance: none;
|
|
549
|
-
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='%
|
|
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='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
|
550
605
|
background-repeat: no-repeat;
|
|
551
606
|
background-position: right 0.625rem center;
|
|
552
607
|
padding-right: 2rem;
|
|
608
|
+
font-weight: 500;
|
|
553
609
|
}
|
|
554
610
|
|
|
555
611
|
.wf-mobile-row .wf-mobile-input { flex: 1; min-width: 0; }
|
|
@@ -568,12 +624,12 @@
|
|
|
568
624
|
font-size: 1.125rem;
|
|
569
625
|
font-weight: 600;
|
|
570
626
|
border-radius: var(--wf-radius);
|
|
571
|
-
border:
|
|
627
|
+
border: 1px solid var(--wf-border);
|
|
572
628
|
background: var(--wf-input-bg);
|
|
573
629
|
font-family: var(--wf-font);
|
|
574
630
|
color: var(--wf-fg);
|
|
575
631
|
box-shadow: var(--wf-shadow-input);
|
|
576
|
-
transition: border-color 0.
|
|
632
|
+
transition: border-color 0.16s var(--wf-ease), box-shadow 0.16s var(--wf-ease), transform 0.16s var(--wf-ease);
|
|
577
633
|
}
|
|
578
634
|
|
|
579
635
|
.wf-otp-input:hover { border-color: var(--wf-border-hover); }
|
|
@@ -585,6 +641,11 @@
|
|
|
585
641
|
background: var(--wf-card);
|
|
586
642
|
}
|
|
587
643
|
|
|
644
|
+
.wf-otp-input:not(:placeholder-shown),
|
|
645
|
+
.wf-otp-input[value]:not([value=""]) {
|
|
646
|
+
border-color: var(--wf-border-hover);
|
|
647
|
+
}
|
|
648
|
+
|
|
588
649
|
/* ============================= BUTTONS ============================= */
|
|
589
650
|
|
|
590
651
|
.wf-btn {
|
|
@@ -597,13 +658,14 @@
|
|
|
597
658
|
font-size: 0.8125rem;
|
|
598
659
|
font-weight: 600;
|
|
599
660
|
font-family: var(--wf-font);
|
|
661
|
+
letter-spacing: -0.005em;
|
|
600
662
|
cursor: pointer;
|
|
601
663
|
border: none;
|
|
602
|
-
transition:
|
|
664
|
+
transition: background 0.16s var(--wf-ease), box-shadow 0.16s var(--wf-ease), transform 0.12s var(--wf-ease), border-color 0.16s var(--wf-ease), color 0.16s var(--wf-ease), filter 0.16s var(--wf-ease);
|
|
603
665
|
position: relative;
|
|
604
666
|
}
|
|
605
667
|
|
|
606
|
-
.wf-btn:disabled { pointer-events: none; opacity: 0.
|
|
668
|
+
.wf-btn:disabled { pointer-events: none; opacity: 0.45; }
|
|
607
669
|
|
|
608
670
|
.wf-btn:focus-visible {
|
|
609
671
|
outline: 2px solid var(--wf-primary);
|
|
@@ -615,24 +677,25 @@
|
|
|
615
677
|
.wf-btn-flex { flex: 1; }
|
|
616
678
|
|
|
617
679
|
.wf-btn-primary {
|
|
618
|
-
background: linear-gradient(
|
|
680
|
+
background: linear-gradient(180deg, var(--wf-primary-grad-start) 0%, var(--wf-primary) 100%);
|
|
619
681
|
color: white;
|
|
620
|
-
box-shadow: var(--wf-shadow-btn);
|
|
682
|
+
box-shadow: var(--wf-shadow-btn), inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
|
621
683
|
}
|
|
622
684
|
|
|
623
685
|
.wf-btn-primary:hover:not(:disabled) {
|
|
624
|
-
box-shadow: var(--wf-shadow-btn-hover);
|
|
686
|
+
box-shadow: var(--wf-shadow-btn-hover), inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
|
625
687
|
transform: translateY(-1px);
|
|
626
|
-
filter: brightness(1.
|
|
688
|
+
filter: brightness(1.04);
|
|
627
689
|
}
|
|
628
690
|
|
|
629
691
|
.wf-btn-primary:active:not(:disabled) {
|
|
630
692
|
transform: translateY(0);
|
|
631
|
-
box-shadow: 0 1px 2px rgba(
|
|
693
|
+
box-shadow: 0 1px 2px rgba(24, 24, 27, 0.1);
|
|
694
|
+
filter: brightness(0.98);
|
|
632
695
|
}
|
|
633
696
|
|
|
634
697
|
.wf-btn-outline {
|
|
635
|
-
border:
|
|
698
|
+
border: 1px solid var(--wf-border);
|
|
636
699
|
background: var(--wf-card);
|
|
637
700
|
color: var(--wf-fg);
|
|
638
701
|
box-shadow: var(--wf-shadow-input);
|
|
@@ -644,34 +707,39 @@
|
|
|
644
707
|
}
|
|
645
708
|
|
|
646
709
|
.wf-btn-social {
|
|
647
|
-
border:
|
|
710
|
+
border: 1px solid var(--wf-border);
|
|
648
711
|
background: var(--wf-card);
|
|
649
712
|
color: var(--wf-fg-soft);
|
|
650
713
|
box-shadow: var(--wf-shadow-input);
|
|
651
|
-
font-weight:
|
|
714
|
+
font-weight: 550;
|
|
652
715
|
}
|
|
653
716
|
|
|
654
717
|
.wf-btn-social:hover:not(:disabled) {
|
|
655
718
|
background: var(--wf-muted-bg);
|
|
656
719
|
border-color: var(--wf-border-hover);
|
|
657
|
-
|
|
720
|
+
color: var(--wf-fg);
|
|
658
721
|
}
|
|
659
722
|
|
|
660
723
|
.wf-btn-success {
|
|
661
|
-
background: linear-gradient(
|
|
724
|
+
background: linear-gradient(180deg, #10B981 0%, var(--wf-success) 100%);
|
|
662
725
|
color: var(--wf-success-fg);
|
|
663
|
-
box-shadow: 0 1px
|
|
726
|
+
box-shadow: 0 1px 2px rgba(24, 24, 27, 0.1), 0 1px 3px rgba(5, 150, 105, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
|
664
727
|
}
|
|
665
728
|
|
|
666
729
|
.wf-btn-success:hover:not(:disabled) {
|
|
667
730
|
transform: translateY(-1px);
|
|
668
|
-
box-shadow: 0 2px
|
|
731
|
+
box-shadow: 0 2px 4px rgba(24, 24, 27, 0.1), 0 6px 16px -4px rgba(5, 150, 105, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
|
732
|
+
filter: brightness(1.03);
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.wf-btn-success:active:not(:disabled) {
|
|
736
|
+
transform: translateY(0);
|
|
669
737
|
}
|
|
670
738
|
|
|
671
739
|
.wf-btn-ghost {
|
|
672
740
|
background: transparent;
|
|
673
741
|
color: var(--wf-muted);
|
|
674
|
-
font-weight:
|
|
742
|
+
font-weight: 550;
|
|
675
743
|
}
|
|
676
744
|
|
|
677
745
|
.wf-btn-ghost:hover:not(:disabled) {
|
|
@@ -689,9 +757,16 @@
|
|
|
689
757
|
}
|
|
690
758
|
|
|
691
759
|
.wf-social-buttons .wf-btn-social {
|
|
692
|
-
flex: 1;
|
|
693
|
-
|
|
694
|
-
|
|
760
|
+
flex: 1 1 0;
|
|
761
|
+
min-width: 0;
|
|
762
|
+
height: 2.75rem;
|
|
763
|
+
font-size: 0.875rem;
|
|
764
|
+
font-weight: 600;
|
|
765
|
+
}
|
|
766
|
+
|
|
767
|
+
.wf-social-buttons .wf-btn-social .wf-icon-sm {
|
|
768
|
+
width: 1.125rem;
|
|
769
|
+
height: 1.125rem;
|
|
695
770
|
}
|
|
696
771
|
|
|
697
772
|
.wf-divider {
|
|
@@ -709,12 +784,12 @@
|
|
|
709
784
|
}
|
|
710
785
|
|
|
711
786
|
.wf-divider span {
|
|
712
|
-
font-size: 0.
|
|
713
|
-
font-weight:
|
|
787
|
+
font-size: 0.6875rem;
|
|
788
|
+
font-weight: 600;
|
|
714
789
|
color: var(--wf-muted);
|
|
715
790
|
white-space: nowrap;
|
|
716
791
|
text-transform: uppercase;
|
|
717
|
-
letter-spacing: 0.
|
|
792
|
+
letter-spacing: 0.06em;
|
|
718
793
|
}
|
|
719
794
|
|
|
720
795
|
/* ============================= ROWS ============================= */
|
|
@@ -722,7 +797,7 @@
|
|
|
722
797
|
.wf-row-2 {
|
|
723
798
|
display: grid;
|
|
724
799
|
grid-template-columns: repeat(2, 1fr);
|
|
725
|
-
gap: 0.
|
|
800
|
+
gap: 0.75rem;
|
|
726
801
|
}
|
|
727
802
|
|
|
728
803
|
.wf-btn-row {
|
|
@@ -735,7 +810,10 @@
|
|
|
735
810
|
.wf-password-rules {
|
|
736
811
|
display: grid;
|
|
737
812
|
grid-template-columns: repeat(2, 1fr);
|
|
738
|
-
gap: 0.
|
|
813
|
+
gap: 0.375rem 0.75rem;
|
|
814
|
+
padding: 0.75rem 0.875rem;
|
|
815
|
+
background: var(--wf-muted-bg);
|
|
816
|
+
border-radius: var(--wf-radius);
|
|
739
817
|
}
|
|
740
818
|
|
|
741
819
|
.wf-rule {
|
|
@@ -743,17 +821,17 @@
|
|
|
743
821
|
align-items: center;
|
|
744
822
|
gap: 0.375rem;
|
|
745
823
|
font-size: 0.6875rem;
|
|
824
|
+
font-weight: 500;
|
|
746
825
|
transition: color 0.2s var(--wf-ease);
|
|
747
826
|
}
|
|
748
827
|
|
|
749
|
-
.wf-rule-icon { width: 0.
|
|
750
|
-
.wf-rule-unmet { color: var(--wf-muted); opacity: 0.
|
|
828
|
+
.wf-rule-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
|
|
829
|
+
.wf-rule-unmet { color: var(--wf-muted); opacity: 0.6; }
|
|
751
830
|
.wf-rule-met { color: var(--wf-success); }
|
|
752
831
|
|
|
753
832
|
.wf-error {
|
|
754
833
|
font-size: 0.8125rem;
|
|
755
834
|
color: var(--wf-destructive);
|
|
756
|
-
text-align: center;
|
|
757
835
|
font-weight: 500;
|
|
758
836
|
}
|
|
759
837
|
|
|
@@ -774,10 +852,12 @@
|
|
|
774
852
|
padding: 0;
|
|
775
853
|
font-family: var(--wf-font);
|
|
776
854
|
font-size: inherit;
|
|
855
|
+
border-radius: 2px;
|
|
777
856
|
transition: color 0.15s var(--wf-ease);
|
|
778
857
|
}
|
|
779
858
|
|
|
780
859
|
.wf-link:hover { color: var(--wf-primary-dark); text-decoration: underline; }
|
|
860
|
+
.wf-link:focus-visible { outline: 2px solid var(--wf-primary); outline-offset: 2px; }
|
|
781
861
|
|
|
782
862
|
/* ============================= FACE REGISTRATION ============================= */
|
|
783
863
|
|
|
@@ -790,7 +870,7 @@
|
|
|
790
870
|
border-radius: var(--wf-radius-lg);
|
|
791
871
|
overflow: hidden;
|
|
792
872
|
background: var(--wf-muted-bg);
|
|
793
|
-
border:
|
|
873
|
+
border: 1px dashed var(--wf-border-hover);
|
|
794
874
|
display: flex;
|
|
795
875
|
align-items: center;
|
|
796
876
|
justify-content: center;
|
|
@@ -829,6 +909,7 @@
|
|
|
829
909
|
height: 13rem;
|
|
830
910
|
border: 2px solid var(--wf-face-border);
|
|
831
911
|
border-radius: 50%;
|
|
912
|
+
box-shadow: 0 0 0 9999px rgba(24, 24, 27, 0.12);
|
|
832
913
|
}
|
|
833
914
|
|
|
834
915
|
.wf-face-actions { display: flex; flex-direction: column; gap: 0.625rem; }
|
|
@@ -844,7 +925,7 @@
|
|
|
844
925
|
}
|
|
845
926
|
|
|
846
927
|
.wf-phone-capture-header { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; }
|
|
847
|
-
.wf-phone-capture-title { font-size: 1.0625rem; font-weight: 700; color: var(--wf-fg); margin: 0; }
|
|
928
|
+
.wf-phone-capture-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; color: var(--wf-fg); margin: 0; }
|
|
848
929
|
.wf-phone-capture-desc { font-size: 0.8125rem; color: var(--wf-muted); margin: 0; max-width: 22rem; line-height: 1.45; }
|
|
849
930
|
|
|
850
931
|
.wf-phone-capture-loading {
|
|
@@ -877,9 +958,9 @@
|
|
|
877
958
|
.wf-qr-code {
|
|
878
959
|
padding: 0.75rem;
|
|
879
960
|
background: #fff;
|
|
880
|
-
border-radius: var(--wf-radius);
|
|
961
|
+
border-radius: var(--wf-radius-lg);
|
|
881
962
|
border: 1px solid var(--wf-border);
|
|
882
|
-
box-shadow:
|
|
963
|
+
box-shadow: var(--wf-shadow-input);
|
|
883
964
|
line-height: 0;
|
|
884
965
|
}
|
|
885
966
|
.wf-qr-code img { width: 180px; height: 180px; border-radius: 4px; }
|
|
@@ -888,7 +969,7 @@
|
|
|
888
969
|
display: inline-flex;
|
|
889
970
|
align-items: center;
|
|
890
971
|
gap: 0.375rem;
|
|
891
|
-
padding: 0.
|
|
972
|
+
padding: 0.4375rem 0.75rem;
|
|
892
973
|
font-size: 0.75rem;
|
|
893
974
|
font-weight: 600;
|
|
894
975
|
font-family: var(--wf-font);
|
|
@@ -899,12 +980,12 @@
|
|
|
899
980
|
cursor: pointer;
|
|
900
981
|
transition: all 0.15s var(--wf-ease);
|
|
901
982
|
}
|
|
902
|
-
.wf-btn-copy-link:hover { border-color: var(--wf-primary); background: var(--wf-
|
|
983
|
+
.wf-btn-copy-link:hover { border-color: var(--wf-primary); background: var(--wf-primary-light); }
|
|
903
984
|
.wf-btn-copy-link svg { width: 0.875rem; height: 0.875rem; }
|
|
904
985
|
.wf-btn-copy-link-done { color: var(--wf-success); border-color: var(--wf-success); }
|
|
905
986
|
|
|
906
987
|
.wf-pin-section { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
|
|
907
|
-
.wf-pin-label { font-size: 0.
|
|
988
|
+
.wf-pin-label { font-size: 0.6875rem; color: var(--wf-muted); margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
|
|
908
989
|
|
|
909
990
|
.wf-pin-display {
|
|
910
991
|
display: flex;
|
|
@@ -917,12 +998,13 @@
|
|
|
917
998
|
width: 2.25rem;
|
|
918
999
|
height: 2.75rem;
|
|
919
1000
|
background: var(--wf-input-bg, var(--wf-card));
|
|
920
|
-
border:
|
|
1001
|
+
border: 1.5px solid var(--wf-primary);
|
|
921
1002
|
border-radius: var(--wf-radius-sm);
|
|
922
1003
|
font-size: 1.375rem;
|
|
923
1004
|
font-weight: 700;
|
|
924
1005
|
color: var(--wf-fg);
|
|
925
1006
|
font-family: var(--wf-font);
|
|
1007
|
+
font-variant-numeric: tabular-nums;
|
|
926
1008
|
}
|
|
927
1009
|
|
|
928
1010
|
.wf-capture-meta { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
|
|
@@ -965,8 +1047,8 @@
|
|
|
965
1047
|
.wf-screen-success { align-items: center; text-align: center; }
|
|
966
1048
|
|
|
967
1049
|
.wf-success-icon {
|
|
968
|
-
width:
|
|
969
|
-
height:
|
|
1050
|
+
width: 3.75rem;
|
|
1051
|
+
height: 3.75rem;
|
|
970
1052
|
border-radius: 50%;
|
|
971
1053
|
background: var(--wf-success-bg);
|
|
972
1054
|
display: flex;
|
|
@@ -975,7 +1057,7 @@
|
|
|
975
1057
|
animation: wf-success-pop 0.5s var(--wf-ease-spring) both;
|
|
976
1058
|
}
|
|
977
1059
|
|
|
978
|
-
.wf-success-icon svg { width:
|
|
1060
|
+
.wf-success-icon svg { width: 1.875rem; height: 1.875rem; color: var(--wf-success); }
|
|
979
1061
|
|
|
980
1062
|
.wf-success-actions {
|
|
981
1063
|
width: 100%;
|
|
@@ -993,21 +1075,22 @@
|
|
|
993
1075
|
|
|
994
1076
|
/* ============================= LOGIN METHODS ============================= */
|
|
995
1077
|
|
|
996
|
-
.wf-login-methods { display: flex; flex-direction: column; gap: 0.
|
|
1078
|
+
.wf-login-methods { display: flex; flex-direction: column; gap: 0.625rem; }
|
|
997
1079
|
|
|
998
1080
|
.wf-login-method {
|
|
999
1081
|
display: inline-flex;
|
|
1000
1082
|
align-items: center;
|
|
1001
|
-
gap: 0.
|
|
1083
|
+
gap: 0.75rem;
|
|
1002
1084
|
justify-content: flex-start;
|
|
1003
1085
|
text-align: left;
|
|
1004
1086
|
border-radius: var(--wf-radius);
|
|
1005
|
-
transition: all 0.
|
|
1087
|
+
transition: all 0.16s var(--wf-ease);
|
|
1006
1088
|
}
|
|
1007
1089
|
|
|
1008
1090
|
.wf-login-method:hover:not(:disabled) {
|
|
1009
1091
|
border-color: var(--wf-primary);
|
|
1010
1092
|
background: var(--wf-primary-light);
|
|
1093
|
+
color: var(--wf-fg);
|
|
1011
1094
|
}
|
|
1012
1095
|
|
|
1013
1096
|
.wf-login-method-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
|
|
@@ -1026,9 +1109,9 @@
|
|
|
1026
1109
|
/* ---- Tablet (portrait) & small laptops ---- */
|
|
1027
1110
|
@media (max-width: 768px) {
|
|
1028
1111
|
.wf-card { max-width: 420px; }
|
|
1029
|
-
.wf-card-inner { padding: 1.
|
|
1030
|
-
.wf-card-header { margin-bottom: 1.
|
|
1031
|
-
.wf-screen { gap: 1.
|
|
1112
|
+
.wf-card-inner { padding: 1.5rem 1.625rem 1.75rem; }
|
|
1113
|
+
.wf-card-header { margin-bottom: 1.375rem; }
|
|
1114
|
+
.wf-screen { gap: 1.125rem; }
|
|
1032
1115
|
.wf-screen-title { font-size: 1.375rem; }
|
|
1033
1116
|
.wf-screen-desc { font-size: 0.8125rem; }
|
|
1034
1117
|
}
|
|
@@ -1046,37 +1129,32 @@
|
|
|
1046
1129
|
border-radius: var(--wf-radius-lg);
|
|
1047
1130
|
}
|
|
1048
1131
|
|
|
1049
|
-
.wf-card-accent { border-radius: var(--wf-radius-lg) var(--wf-radius-lg) 0 0; }
|
|
1050
|
-
|
|
1051
1132
|
.wf-card-inner { padding: 1.25rem 1.125rem 1.5rem; }
|
|
1052
1133
|
|
|
1053
1134
|
.wf-card-header { margin-bottom: 1.25rem; }
|
|
1054
1135
|
|
|
1055
|
-
.wf-card-brand-name { font-size: 0.
|
|
1136
|
+
.wf-card-brand-name { font-size: 0.875rem; }
|
|
1056
1137
|
.wf-card-logo { width: 1.75rem; height: 1.75rem; }
|
|
1057
1138
|
.wf-card-logo svg { width: 0.875rem; height: 0.875rem; }
|
|
1058
1139
|
.wf-ring { width: 2.125rem; height: 2.125rem; }
|
|
1059
|
-
.wf-ring-num { font-size: 0.
|
|
1140
|
+
.wf-ring-num { font-size: 0.75rem; }
|
|
1060
1141
|
|
|
1061
1142
|
.wf-screen { gap: 1rem; }
|
|
1062
|
-
.wf-screen-title { font-size: 1.
|
|
1143
|
+
.wf-screen-title { font-size: 1.3125rem; }
|
|
1063
1144
|
.wf-screen-desc { font-size: 0.8125rem; }
|
|
1064
1145
|
.wf-icon-box { width: 2.25rem; height: 2.25rem; margin-bottom: 0.75rem; }
|
|
1065
1146
|
.wf-icon-box svg { width: 1rem; height: 1rem; }
|
|
1066
1147
|
|
|
1067
|
-
.wf-form { gap: 0.
|
|
1068
|
-
.wf-input { height: 2.625rem; font-size: 0.8125rem; }
|
|
1069
|
-
.wf-btn-lg { height: 2.625rem; font-size: 0.8125rem; }
|
|
1148
|
+
.wf-form { gap: 0.875rem; }
|
|
1070
1149
|
|
|
1071
|
-
.wf-social-buttons {
|
|
1072
|
-
.wf-social-buttons .wf-btn-social { height: 2.5rem; }
|
|
1150
|
+
.wf-social-buttons .wf-btn-social { height: 2.625rem; font-size: 0.8125rem; }
|
|
1073
1151
|
|
|
1074
|
-
.wf-row-2 { grid-template-columns: 1fr 1fr; gap: 0.
|
|
1152
|
+
.wf-row-2 { grid-template-columns: 1fr 1fr; gap: 0.625rem; }
|
|
1075
1153
|
|
|
1076
1154
|
.wf-password-rules { grid-template-columns: 1fr; }
|
|
1077
1155
|
|
|
1078
|
-
.wf-otp-row { gap: 0.
|
|
1079
|
-
.wf-otp-input { width:
|
|
1156
|
+
.wf-otp-row { gap: 0.5rem; justify-content: space-between; }
|
|
1157
|
+
.wf-otp-input { flex: 1; width: auto; height: 2.875rem; font-size: 1.0625rem; }
|
|
1080
1158
|
|
|
1081
1159
|
.wf-camera-view { aspect-ratio: 1 / 1; }
|
|
1082
1160
|
.wf-face-overlay::before { width: 8rem; height: 10rem; }
|
|
@@ -1088,27 +1166,27 @@
|
|
|
1088
1166
|
.wf-success-icon svg { width: 1.75rem; height: 1.75rem; }
|
|
1089
1167
|
.wf-success-actions { max-width: 100%; }
|
|
1090
1168
|
|
|
1091
|
-
.wf-bg-orb-1 { width:
|
|
1092
|
-
.wf-bg-orb-2 { width:
|
|
1169
|
+
.wf-bg-orb-1 { width: 260px; height: 260px; }
|
|
1170
|
+
.wf-bg-orb-2 { width: 220px; height: 220px; }
|
|
1093
1171
|
.wf-bg-orb-3 { display: none; }
|
|
1094
1172
|
}
|
|
1095
1173
|
|
|
1096
|
-
/* ---- Very small phones (< 380px
|
|
1174
|
+
/* ---- Very small phones (< 380px) ---- */
|
|
1097
1175
|
@media (max-width: 380px) {
|
|
1098
1176
|
.wf-layout { padding: 0.5rem; padding-top: 1rem; }
|
|
1099
1177
|
.wf-card-inner { padding: 1rem 0.875rem 1.25rem; }
|
|
1100
1178
|
|
|
1101
|
-
.wf-screen-title { font-size: 1.
|
|
1179
|
+
.wf-screen-title { font-size: 1.1875rem; }
|
|
1102
1180
|
.wf-screen-desc { font-size: 0.75rem; }
|
|
1103
1181
|
.wf-label { font-size: 0.75rem; }
|
|
1104
|
-
.wf-input { height: 2.
|
|
1182
|
+
.wf-input { height: 2.625rem; font-size: 0.8125rem; padding: 0 0.75rem; }
|
|
1105
1183
|
.wf-input-wrap .wf-input { padding-left: 2.25rem; }
|
|
1106
|
-
.wf-btn-lg { height: 2.
|
|
1184
|
+
.wf-btn-lg { height: 2.625rem; font-size: 0.8125rem; padding: 0 1rem; }
|
|
1107
1185
|
|
|
1108
1186
|
.wf-row-2 { grid-template-columns: 1fr; }
|
|
1109
1187
|
|
|
1110
|
-
.wf-otp-input {
|
|
1111
|
-
.wf-otp-row { gap: 0.
|
|
1188
|
+
.wf-otp-input { height: 2.625rem; font-size: 1rem; }
|
|
1189
|
+
.wf-otp-row { gap: 0.375rem; }
|
|
1112
1190
|
|
|
1113
1191
|
.wf-divider span { font-size: 0.625rem; }
|
|
1114
1192
|
}
|
package/theme.js
CHANGED
|
@@ -202,8 +202,8 @@ export function applyTheme(layoutRoot, theme) {
|
|
|
202
202
|
bgEl.querySelectorAll('.wf-bg-orb').forEach(orb => { orb.style.display = 'none'; });
|
|
203
203
|
} else if (primary || bgColor) {
|
|
204
204
|
backupInline(bgEl);
|
|
205
|
-
const p = primary || '#
|
|
206
|
-
const bg = bgColor || '#
|
|
205
|
+
const p = primary || '#4F46E5';
|
|
206
|
+
const bg = bgColor || '#F7F8FA';
|
|
207
207
|
bgEl.style.background = [
|
|
208
208
|
`radial-gradient(ellipse 80% 50% at 20% 80%, ${withAlpha(lighten(p, 0.45), 0.7)} 0%, transparent 55%)`,
|
|
209
209
|
`radial-gradient(ellipse 60% 60% at 85% 15%, ${withAlpha(lighten(p, 0.50), 0.5)} 0%, transparent 50%)`,
|
package/ui/layout.js
CHANGED