central-auth-js-sdk 1.0.14 → 1.2.1
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 +302 -196
- 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,91 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Central Auth SDK — Design System
|
|
3
|
-
*
|
|
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.
|
|
6
|
+
*
|
|
7
|
+
* NOTE: Only presentation changed. Every selector, class name and CSS custom
|
|
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.
|
|
4
10
|
*/
|
|
5
11
|
|
|
6
|
-
@import url('https://fonts.googleapis.com/css2?family=
|
|
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');
|
|
7
13
|
|
|
8
14
|
/* ============================= DESIGN TOKENS ============================= */
|
|
9
15
|
|
|
10
16
|
:root {
|
|
11
|
-
--wf-font: '
|
|
12
|
-
--wf-
|
|
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;
|
|
19
|
+
|
|
20
|
+
/* Surfaces — warm beige canvas, white cards, soft off-white fills */
|
|
21
|
+
--wf-bg: #F1EBDF;
|
|
13
22
|
--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
|
-
|
|
23
|
+
--wf-input-bg: #FBF8F1;
|
|
24
|
+
--wf-muted-bg: #EFE8DA;
|
|
25
|
+
|
|
26
|
+
/* Ink — ink-blue text ramp */
|
|
27
|
+
--wf-fg: #1E2A33;
|
|
28
|
+
--wf-fg-soft: #45535D;
|
|
29
|
+
--wf-muted: #7C8893;
|
|
30
|
+
|
|
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);
|
|
36
|
+
|
|
37
|
+
/* Lines — warm dividers, never neutral gray */
|
|
38
|
+
--wf-border: #E3DBCB;
|
|
39
|
+
--wf-border-hover: #D2C8B4;
|
|
40
|
+
|
|
41
|
+
/* Feedback states */
|
|
42
|
+
--wf-destructive: #C0392B;
|
|
43
|
+
--wf-destructive-bg: rgba(192, 57, 43, 0.07);
|
|
44
|
+
--wf-warning: #B45309;
|
|
45
|
+
--wf-warning-bg: rgba(217, 119, 6, 0.08);
|
|
46
|
+
--wf-success: #1E8A57;
|
|
47
|
+
--wf-success-bg: rgba(30, 138, 87, 0.10);
|
|
29
48
|
--wf-success-fg: #FFFFFF;
|
|
49
|
+
|
|
50
|
+
/* Radii — sm 8 · md 12 · lg 16 · xl(card/2xl) 24 */
|
|
30
51
|
--wf-radius-sm: 0.5rem;
|
|
31
52
|
--wf-radius: 0.75rem;
|
|
32
53
|
--wf-radius-lg: 1rem;
|
|
33
54
|
--wf-radius-xl: 1.5rem;
|
|
55
|
+
|
|
56
|
+
/* Elevation — warm & diffuse oklch shadows + inset top highlight */
|
|
34
57
|
--wf-shadow-card:
|
|
35
|
-
|
|
36
|
-
0 1px 2px
|
|
37
|
-
0
|
|
38
|
-
0
|
|
39
|
-
--wf-shadow-btn:
|
|
40
|
-
|
|
41
|
-
|
|
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);
|
|
73
|
+
|
|
74
|
+
/* Motion */
|
|
42
75
|
--wf-ease: cubic-bezier(0.4, 0, 0.2, 1);
|
|
43
76
|
--wf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
44
77
|
|
|
45
78
|
/* Gradient endpoints (derived from primary; overridden by theme engine) */
|
|
46
|
-
--wf-primary-grad-start: #
|
|
47
|
-
--wf-primary-grad-end: #
|
|
79
|
+
--wf-primary-grad-start: #2FA86B;
|
|
80
|
+
--wf-primary-grad-end: #176A43;
|
|
48
81
|
|
|
49
|
-
/*
|
|
50
|
-
--wf-orb-1:
|
|
51
|
-
--wf-orb-2:
|
|
52
|
-
--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);
|
|
53
86
|
|
|
54
87
|
/* Face-capture overlay border */
|
|
55
|
-
--wf-face-border: rgba(
|
|
88
|
+
--wf-face-border: rgba(30, 138, 87, 0.55);
|
|
56
89
|
}
|
|
57
90
|
|
|
58
91
|
/* ============================= BASE ============================= */
|
|
@@ -79,7 +112,17 @@
|
|
|
79
112
|
overflow-x: hidden;
|
|
80
113
|
}
|
|
81
114
|
|
|
82
|
-
|
|
115
|
+
@media (prefers-reduced-motion: reduce) {
|
|
116
|
+
.wf-layout *,
|
|
117
|
+
.wf-layout *::before,
|
|
118
|
+
.wf-layout *::after {
|
|
119
|
+
animation-duration: 0.001ms !important;
|
|
120
|
+
animation-iteration-count: 1 !important;
|
|
121
|
+
transition-duration: 0.001ms !important;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* ============================= BACKGROUND ============================= */
|
|
83
126
|
|
|
84
127
|
.wf-bg {
|
|
85
128
|
position: fixed;
|
|
@@ -87,60 +130,59 @@
|
|
|
87
130
|
pointer-events: none;
|
|
88
131
|
z-index: 0;
|
|
89
132
|
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%),
|
|
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%),
|
|
93
135
|
var(--wf-bg);
|
|
94
136
|
}
|
|
95
137
|
|
|
96
138
|
.wf-bg-orb {
|
|
97
139
|
position: absolute;
|
|
98
140
|
border-radius: 50%;
|
|
99
|
-
filter: blur(
|
|
100
|
-
opacity: 0.
|
|
141
|
+
filter: blur(96px);
|
|
142
|
+
opacity: 0.8;
|
|
101
143
|
will-change: transform;
|
|
102
144
|
}
|
|
103
145
|
|
|
104
146
|
.wf-bg-orb-1 {
|
|
105
|
-
width:
|
|
106
|
-
height:
|
|
107
|
-
top: -
|
|
108
|
-
left: -
|
|
147
|
+
width: 480px;
|
|
148
|
+
height: 480px;
|
|
149
|
+
top: -12%;
|
|
150
|
+
left: -6%;
|
|
109
151
|
background: var(--wf-orb-1);
|
|
110
|
-
animation: wf-drift-1
|
|
152
|
+
animation: wf-drift-1 24s ease-in-out infinite;
|
|
111
153
|
}
|
|
112
154
|
|
|
113
155
|
.wf-bg-orb-2 {
|
|
114
|
-
width:
|
|
115
|
-
height:
|
|
116
|
-
bottom: -
|
|
117
|
-
right: -
|
|
156
|
+
width: 420px;
|
|
157
|
+
height: 420px;
|
|
158
|
+
bottom: -12%;
|
|
159
|
+
right: -6%;
|
|
118
160
|
background: var(--wf-orb-2);
|
|
119
|
-
animation: wf-drift-2
|
|
161
|
+
animation: wf-drift-2 28s ease-in-out infinite;
|
|
120
162
|
}
|
|
121
163
|
|
|
122
164
|
.wf-bg-orb-3 {
|
|
123
|
-
width:
|
|
124
|
-
height:
|
|
125
|
-
top:
|
|
126
|
-
right:
|
|
165
|
+
width: 320px;
|
|
166
|
+
height: 320px;
|
|
167
|
+
top: 32%;
|
|
168
|
+
right: 22%;
|
|
127
169
|
background: var(--wf-orb-3);
|
|
128
|
-
animation: wf-drift-3
|
|
170
|
+
animation: wf-drift-3 22s ease-in-out infinite;
|
|
129
171
|
}
|
|
130
172
|
|
|
131
173
|
@keyframes wf-drift-1 {
|
|
132
174
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
133
|
-
50% { transform: translate(
|
|
175
|
+
50% { transform: translate(36px, 28px) scale(1.05); }
|
|
134
176
|
}
|
|
135
177
|
|
|
136
178
|
@keyframes wf-drift-2 {
|
|
137
179
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
138
|
-
50% { transform: translate(-
|
|
180
|
+
50% { transform: translate(-28px, -36px) scale(1.08); }
|
|
139
181
|
}
|
|
140
182
|
|
|
141
183
|
@keyframes wf-drift-3 {
|
|
142
184
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
143
|
-
50% { transform: translate(-
|
|
185
|
+
50% { transform: translate(-18px, 18px) scale(0.95); }
|
|
144
186
|
}
|
|
145
187
|
|
|
146
188
|
/* ============================= CARD ============================= */
|
|
@@ -149,26 +191,21 @@
|
|
|
149
191
|
position: relative;
|
|
150
192
|
z-index: 1;
|
|
151
193
|
width: 100%;
|
|
152
|
-
max-width:
|
|
194
|
+
max-width: 440px;
|
|
153
195
|
background: var(--wf-card);
|
|
154
196
|
border-radius: var(--wf-radius-xl);
|
|
155
197
|
box-shadow: var(--wf-shadow-card);
|
|
156
|
-
|
|
198
|
+
overflow: hidden;
|
|
199
|
+
animation: wf-card-enter 0.45s var(--wf-ease) both;
|
|
157
200
|
}
|
|
158
201
|
|
|
159
202
|
@keyframes wf-card-enter {
|
|
160
|
-
from { opacity: 0; transform: translateY(
|
|
203
|
+
from { opacity: 0; transform: translateY(12px) scale(0.99); }
|
|
161
204
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
162
205
|
}
|
|
163
206
|
|
|
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
207
|
.wf-card-inner {
|
|
171
|
-
padding: 2rem
|
|
208
|
+
padding: 1.875rem 2rem 2rem;
|
|
172
209
|
}
|
|
173
210
|
|
|
174
211
|
/* ============================= CARD HEADER ============================= */
|
|
@@ -177,7 +214,7 @@
|
|
|
177
214
|
display: flex;
|
|
178
215
|
align-items: center;
|
|
179
216
|
justify-content: space-between;
|
|
180
|
-
margin-bottom: 1.
|
|
217
|
+
margin-bottom: 1.5rem;
|
|
181
218
|
}
|
|
182
219
|
|
|
183
220
|
.wf-card-brand {
|
|
@@ -187,24 +224,27 @@
|
|
|
187
224
|
}
|
|
188
225
|
|
|
189
226
|
.wf-card-logo {
|
|
190
|
-
width:
|
|
191
|
-
height:
|
|
192
|
-
border-radius: var(--wf-radius
|
|
193
|
-
background: var(--wf-primary);
|
|
227
|
+
width: 1.875rem;
|
|
228
|
+
height: 1.875rem;
|
|
229
|
+
border-radius: var(--wf-radius);
|
|
230
|
+
background: linear-gradient(135deg, var(--wf-primary-grad-start) 0%, var(--wf-primary) 100%);
|
|
194
231
|
display: flex;
|
|
195
232
|
align-items: center;
|
|
196
233
|
justify-content: center;
|
|
197
234
|
color: white;
|
|
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);
|
|
198
238
|
}
|
|
199
239
|
|
|
200
240
|
.wf-card-logo svg {
|
|
201
|
-
width:
|
|
202
|
-
height:
|
|
241
|
+
width: 0.9375rem;
|
|
242
|
+
height: 0.9375rem;
|
|
203
243
|
}
|
|
204
244
|
|
|
205
245
|
.wf-card-brand-name {
|
|
206
246
|
font-size: 0.9375rem;
|
|
207
|
-
font-weight:
|
|
247
|
+
font-weight: 600;
|
|
208
248
|
color: var(--wf-fg);
|
|
209
249
|
letter-spacing: -0.01em;
|
|
210
250
|
}
|
|
@@ -213,8 +253,8 @@
|
|
|
213
253
|
|
|
214
254
|
.wf-ring {
|
|
215
255
|
position: relative;
|
|
216
|
-
width: 2.
|
|
217
|
-
height: 2.
|
|
256
|
+
width: 2.375rem;
|
|
257
|
+
height: 2.375rem;
|
|
218
258
|
flex-shrink: 0;
|
|
219
259
|
}
|
|
220
260
|
|
|
@@ -231,7 +271,7 @@
|
|
|
231
271
|
|
|
232
272
|
@keyframes wf-ring-glow {
|
|
233
273
|
0%, 100% { opacity: 0; transform: scale(0.85); }
|
|
234
|
-
50% { opacity: 0.
|
|
274
|
+
50% { opacity: 0.4; transform: scale(1.08); }
|
|
235
275
|
}
|
|
236
276
|
|
|
237
277
|
.wf-ring-svg {
|
|
@@ -244,12 +284,12 @@
|
|
|
244
284
|
.wf-ring-track {
|
|
245
285
|
fill: none;
|
|
246
286
|
stroke: var(--wf-muted-bg);
|
|
247
|
-
stroke-width: 2.
|
|
287
|
+
stroke-width: 2.6;
|
|
248
288
|
}
|
|
249
289
|
|
|
250
290
|
.wf-ring-fill {
|
|
251
291
|
fill: none;
|
|
252
|
-
stroke-width: 2.
|
|
292
|
+
stroke-width: 2.6;
|
|
253
293
|
stroke-linecap: round;
|
|
254
294
|
transition: stroke-dashoffset 0.6s var(--wf-ease);
|
|
255
295
|
}
|
|
@@ -261,9 +301,11 @@
|
|
|
261
301
|
align-items: center;
|
|
262
302
|
justify-content: center;
|
|
263
303
|
font-size: 0.8125rem;
|
|
264
|
-
font-weight:
|
|
304
|
+
font-weight: 600;
|
|
265
305
|
color: var(--wf-primary);
|
|
266
306
|
line-height: 1;
|
|
307
|
+
font-family: var(--wf-font-mono);
|
|
308
|
+
font-variant-numeric: tabular-nums;
|
|
267
309
|
}
|
|
268
310
|
|
|
269
311
|
.wf-ring-num.wf-ring-pop {
|
|
@@ -285,15 +327,36 @@
|
|
|
285
327
|
/* ============================= ERROR BANNER ============================= */
|
|
286
328
|
|
|
287
329
|
.wf-error-banner {
|
|
288
|
-
|
|
289
|
-
|
|
330
|
+
display: flex;
|
|
331
|
+
align-items: flex-start;
|
|
332
|
+
gap: 0.5rem;
|
|
333
|
+
padding: 0.6875rem 0.875rem;
|
|
334
|
+
margin-bottom: 1.125rem;
|
|
290
335
|
border-radius: var(--wf-radius);
|
|
291
336
|
background: var(--wf-destructive-bg);
|
|
292
|
-
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);
|
|
293
339
|
color: var(--wf-destructive);
|
|
294
340
|
font-size: 0.8125rem;
|
|
295
341
|
font-weight: 500;
|
|
296
|
-
line-height: 1.
|
|
342
|
+
line-height: 1.45;
|
|
343
|
+
animation: wf-banner-in 0.25s var(--wf-ease) both;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.wf-error-banner::before {
|
|
347
|
+
content: '';
|
|
348
|
+
flex-shrink: 0;
|
|
349
|
+
width: 1rem;
|
|
350
|
+
height: 1rem;
|
|
351
|
+
margin-top: 0.0625rem;
|
|
352
|
+
background-color: currentColor;
|
|
353
|
+
-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");
|
|
354
|
+
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");
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
@keyframes wf-banner-in {
|
|
358
|
+
from { opacity: 0; transform: translateY(-4px); }
|
|
359
|
+
to { opacity: 1; transform: translateY(0); }
|
|
297
360
|
}
|
|
298
361
|
|
|
299
362
|
.wf-error-banner.hidden {
|
|
@@ -336,6 +399,7 @@
|
|
|
336
399
|
padding: 0.5rem 0.75rem;
|
|
337
400
|
border-radius: var(--wf-radius);
|
|
338
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);
|
|
339
403
|
color: var(--wf-fg-soft);
|
|
340
404
|
font-size: 0.8125rem;
|
|
341
405
|
font-weight: 500;
|
|
@@ -358,7 +422,8 @@
|
|
|
358
422
|
|
|
359
423
|
#wf-form-inner.wf-loading-active {
|
|
360
424
|
pointer-events: none;
|
|
361
|
-
opacity: 0.
|
|
425
|
+
opacity: 0.6;
|
|
426
|
+
transition: opacity 0.2s var(--wf-ease);
|
|
362
427
|
}
|
|
363
428
|
|
|
364
429
|
/* ============================= PAGE FOOTER ============================= */
|
|
@@ -377,8 +442,8 @@
|
|
|
377
442
|
.wf-screen {
|
|
378
443
|
display: flex;
|
|
379
444
|
flex-direction: column;
|
|
380
|
-
gap: 1.
|
|
381
|
-
animation: wf-screen-in 0.
|
|
445
|
+
gap: 1.25rem;
|
|
446
|
+
animation: wf-screen-in 0.3s var(--wf-ease) both;
|
|
382
447
|
}
|
|
383
448
|
|
|
384
449
|
@keyframes wf-screen-in {
|
|
@@ -387,11 +452,12 @@
|
|
|
387
452
|
}
|
|
388
453
|
|
|
389
454
|
.wf-screen-back {
|
|
390
|
-
margin-bottom: 0.
|
|
455
|
+
margin-bottom: 0.5rem;
|
|
391
456
|
}
|
|
392
457
|
|
|
393
458
|
.wf-screen-back .wf-btn-ghost {
|
|
394
|
-
padding-left: 0;
|
|
459
|
+
padding-left: 0.625rem;
|
|
460
|
+
margin-left: -0.625rem;
|
|
395
461
|
}
|
|
396
462
|
|
|
397
463
|
.wf-screen-header {
|
|
@@ -401,12 +467,14 @@
|
|
|
401
467
|
.wf-icon-box {
|
|
402
468
|
width: 2.5rem;
|
|
403
469
|
height: 2.5rem;
|
|
404
|
-
border-radius: var(--wf-radius);
|
|
470
|
+
border-radius: var(--wf-radius-lg);
|
|
405
471
|
background: var(--wf-primary-light);
|
|
472
|
+
border: 1px solid rgba(30, 138, 87, 0.16);
|
|
473
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
|
406
474
|
display: flex;
|
|
407
475
|
align-items: center;
|
|
408
476
|
justify-content: center;
|
|
409
|
-
margin-bottom:
|
|
477
|
+
margin-bottom: 0.875rem;
|
|
410
478
|
}
|
|
411
479
|
|
|
412
480
|
.wf-icon-box svg {
|
|
@@ -416,11 +484,11 @@
|
|
|
416
484
|
}
|
|
417
485
|
|
|
418
486
|
.wf-screen-title {
|
|
419
|
-
font-size: 1.
|
|
487
|
+
font-size: 1.4375rem;
|
|
420
488
|
font-weight: 700;
|
|
421
489
|
letter-spacing: -0.025em;
|
|
422
490
|
line-height: 1.2;
|
|
423
|
-
margin-bottom: 0.
|
|
491
|
+
margin-bottom: 0.3125rem;
|
|
424
492
|
color: var(--wf-fg);
|
|
425
493
|
}
|
|
426
494
|
|
|
@@ -432,7 +500,7 @@
|
|
|
432
500
|
|
|
433
501
|
.wf-highlight {
|
|
434
502
|
font-weight: 600;
|
|
435
|
-
color: var(--wf-
|
|
503
|
+
color: var(--wf-primary);
|
|
436
504
|
}
|
|
437
505
|
|
|
438
506
|
/* ============================= FORM ============================= */
|
|
@@ -446,13 +514,15 @@
|
|
|
446
514
|
.wf-field {
|
|
447
515
|
display: flex;
|
|
448
516
|
flex-direction: column;
|
|
449
|
-
gap: 0.
|
|
517
|
+
gap: 0.375rem;
|
|
450
518
|
}
|
|
451
519
|
|
|
452
520
|
.wf-label {
|
|
453
|
-
font-size: 0.
|
|
521
|
+
font-size: 0.6875rem;
|
|
454
522
|
font-weight: 600;
|
|
455
523
|
color: var(--wf-fg-soft);
|
|
524
|
+
text-transform: uppercase;
|
|
525
|
+
letter-spacing: 0.05em;
|
|
456
526
|
}
|
|
457
527
|
|
|
458
528
|
/* ============================= INPUTS ============================= */
|
|
@@ -463,29 +533,28 @@
|
|
|
463
533
|
|
|
464
534
|
.wf-input {
|
|
465
535
|
display: flex;
|
|
466
|
-
height: 2.
|
|
536
|
+
height: 2.875rem;
|
|
467
537
|
width: 100%;
|
|
468
538
|
border-radius: var(--wf-radius);
|
|
469
|
-
border:
|
|
539
|
+
border: 1px solid var(--wf-border);
|
|
470
540
|
background: var(--wf-input-bg);
|
|
471
|
-
padding: 0 0.
|
|
472
|
-
font-size: 0.
|
|
541
|
+
padding: 0 0.9375rem;
|
|
542
|
+
font-size: 0.9375rem;
|
|
473
543
|
font-family: var(--wf-font);
|
|
474
544
|
color: var(--wf-fg);
|
|
475
545
|
box-shadow: var(--wf-shadow-input);
|
|
476
|
-
transition: border-color 0.
|
|
546
|
+
transition: border-color 0.16s var(--wf-ease), box-shadow 0.16s var(--wf-ease), background 0.16s var(--wf-ease);
|
|
477
547
|
}
|
|
478
548
|
|
|
479
549
|
.wf-input:hover {
|
|
480
550
|
border-color: var(--wf-border-hover);
|
|
481
|
-
background: var(--wf-card);
|
|
482
551
|
}
|
|
483
552
|
|
|
484
553
|
.wf-input:focus {
|
|
485
554
|
outline: none;
|
|
486
555
|
border-color: var(--wf-primary);
|
|
487
556
|
background: var(--wf-card);
|
|
488
|
-
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);
|
|
489
558
|
}
|
|
490
559
|
|
|
491
560
|
.wf-input::placeholder {
|
|
@@ -493,23 +562,23 @@
|
|
|
493
562
|
}
|
|
494
563
|
|
|
495
564
|
.wf-input-wrap .wf-input {
|
|
496
|
-
padding-left: 2.
|
|
565
|
+
padding-left: 2.625rem;
|
|
497
566
|
}
|
|
498
567
|
|
|
499
568
|
.wf-input-password .wf-input {
|
|
500
|
-
padding-right: 2.
|
|
569
|
+
padding-right: 2.625rem;
|
|
501
570
|
}
|
|
502
571
|
|
|
503
572
|
.wf-input-icon-left {
|
|
504
573
|
position: absolute;
|
|
505
|
-
left: 0.
|
|
574
|
+
left: 0.9375rem;
|
|
506
575
|
top: 50%;
|
|
507
576
|
transform: translateY(-50%);
|
|
508
577
|
width: 1rem;
|
|
509
578
|
height: 1rem;
|
|
510
579
|
color: var(--wf-muted);
|
|
511
580
|
pointer-events: none;
|
|
512
|
-
transition: color 0.
|
|
581
|
+
transition: color 0.16s var(--wf-ease);
|
|
513
582
|
}
|
|
514
583
|
|
|
515
584
|
.wf-input:focus ~ .wf-input-icon-left,
|
|
@@ -519,19 +588,23 @@
|
|
|
519
588
|
|
|
520
589
|
.wf-input-toggle {
|
|
521
590
|
position: absolute;
|
|
522
|
-
right: 0.
|
|
591
|
+
right: 0.5rem;
|
|
523
592
|
top: 50%;
|
|
524
593
|
transform: translateY(-50%);
|
|
525
594
|
background: none;
|
|
526
595
|
border: none;
|
|
527
596
|
cursor: pointer;
|
|
528
597
|
color: var(--wf-muted);
|
|
529
|
-
padding: 0.
|
|
530
|
-
border-radius:
|
|
531
|
-
|
|
598
|
+
padding: 0.375rem;
|
|
599
|
+
border-radius: var(--wf-radius-sm);
|
|
600
|
+
display: flex;
|
|
601
|
+
align-items: center;
|
|
602
|
+
justify-content: center;
|
|
603
|
+
transition: color 0.16s var(--wf-ease), background 0.16s var(--wf-ease);
|
|
532
604
|
}
|
|
533
605
|
|
|
534
|
-
.wf-input-toggle:hover { color: var(--wf-fg); }
|
|
606
|
+
.wf-input-toggle:hover { color: var(--wf-fg); background: var(--wf-muted-bg); }
|
|
607
|
+
.wf-input-toggle:focus-visible { outline: 2px solid var(--wf-primary); outline-offset: 1px; }
|
|
535
608
|
|
|
536
609
|
.wf-input-toggle svg { width: 1rem; height: 1rem; }
|
|
537
610
|
|
|
@@ -541,18 +614,20 @@
|
|
|
541
614
|
.wf-mobile-row .wf-country-select {
|
|
542
615
|
width: auto;
|
|
543
616
|
min-width: 0;
|
|
544
|
-
max-width: 5rem;
|
|
617
|
+
max-width: 5.5rem;
|
|
545
618
|
flex-shrink: 0;
|
|
546
619
|
cursor: pointer;
|
|
547
620
|
appearance: none;
|
|
548
621
|
-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='%
|
|
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");
|
|
550
623
|
background-repeat: no-repeat;
|
|
551
624
|
background-position: right 0.625rem center;
|
|
552
625
|
padding-right: 2rem;
|
|
626
|
+
font-weight: 600;
|
|
627
|
+
font-family: var(--wf-font-mono);
|
|
553
628
|
}
|
|
554
629
|
|
|
555
|
-
.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); }
|
|
556
631
|
|
|
557
632
|
/* ============================= OTP ============================= */
|
|
558
633
|
|
|
@@ -562,18 +637,18 @@
|
|
|
562
637
|
}
|
|
563
638
|
|
|
564
639
|
.wf-otp-input {
|
|
565
|
-
width: 2.
|
|
566
|
-
height:
|
|
640
|
+
width: 2.875rem;
|
|
641
|
+
height: 3.25rem;
|
|
567
642
|
text-align: center;
|
|
568
|
-
font-size: 1.
|
|
643
|
+
font-size: 1.25rem;
|
|
569
644
|
font-weight: 600;
|
|
570
645
|
border-radius: var(--wf-radius);
|
|
571
|
-
border:
|
|
646
|
+
border: 1px solid var(--wf-border);
|
|
572
647
|
background: var(--wf-input-bg);
|
|
573
|
-
font-family: var(--wf-font);
|
|
648
|
+
font-family: var(--wf-font-mono);
|
|
574
649
|
color: var(--wf-fg);
|
|
575
650
|
box-shadow: var(--wf-shadow-input);
|
|
576
|
-
transition: border-color 0.
|
|
651
|
+
transition: border-color 0.16s var(--wf-ease), box-shadow 0.16s var(--wf-ease), transform 0.16s var(--wf-ease);
|
|
577
652
|
}
|
|
578
653
|
|
|
579
654
|
.wf-otp-input:hover { border-color: var(--wf-border-hover); }
|
|
@@ -581,11 +656,17 @@
|
|
|
581
656
|
.wf-otp-input:focus {
|
|
582
657
|
outline: none;
|
|
583
658
|
border-color: var(--wf-primary);
|
|
584
|
-
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);
|
|
585
660
|
background: var(--wf-card);
|
|
586
661
|
}
|
|
587
662
|
|
|
588
|
-
|
|
663
|
+
.wf-otp-input:not(:placeholder-shown),
|
|
664
|
+
.wf-otp-input[value]:not([value=""]) {
|
|
665
|
+
border-color: var(--wf-primary);
|
|
666
|
+
color: var(--wf-primary);
|
|
667
|
+
}
|
|
668
|
+
|
|
669
|
+
/* ============================= BUTTONS — pill family ============================= */
|
|
589
670
|
|
|
590
671
|
.wf-btn {
|
|
591
672
|
display: inline-flex;
|
|
@@ -593,29 +674,30 @@
|
|
|
593
674
|
justify-content: center;
|
|
594
675
|
gap: 0.5rem;
|
|
595
676
|
white-space: nowrap;
|
|
596
|
-
border-radius:
|
|
597
|
-
font-size: 0.
|
|
677
|
+
border-radius: 999px;
|
|
678
|
+
font-size: 0.875rem;
|
|
598
679
|
font-weight: 600;
|
|
599
680
|
font-family: var(--wf-font);
|
|
681
|
+
letter-spacing: -0.005em;
|
|
600
682
|
cursor: pointer;
|
|
601
683
|
border: none;
|
|
602
|
-
transition:
|
|
684
|
+
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
685
|
position: relative;
|
|
604
686
|
}
|
|
605
687
|
|
|
606
|
-
.wf-btn:disabled { pointer-events: none; opacity: 0.
|
|
688
|
+
.wf-btn:disabled { pointer-events: none; opacity: 0.45; }
|
|
607
689
|
|
|
608
690
|
.wf-btn:focus-visible {
|
|
609
691
|
outline: 2px solid var(--wf-primary);
|
|
610
692
|
outline-offset: 2px;
|
|
611
693
|
}
|
|
612
694
|
|
|
613
|
-
.wf-btn-lg { height: 2.
|
|
695
|
+
.wf-btn-lg { height: 2.875rem; padding: 0 1.375rem; font-size: 0.875rem; }
|
|
614
696
|
.wf-btn-full { width: 100%; }
|
|
615
697
|
.wf-btn-flex { flex: 1; }
|
|
616
698
|
|
|
617
699
|
.wf-btn-primary {
|
|
618
|
-
background: linear-gradient(
|
|
700
|
+
background: linear-gradient(180deg, var(--wf-primary-grad-start) 0%, var(--wf-primary) 100%);
|
|
619
701
|
color: white;
|
|
620
702
|
box-shadow: var(--wf-shadow-btn);
|
|
621
703
|
}
|
|
@@ -623,16 +705,17 @@
|
|
|
623
705
|
.wf-btn-primary:hover:not(:disabled) {
|
|
624
706
|
box-shadow: var(--wf-shadow-btn-hover);
|
|
625
707
|
transform: translateY(-1px);
|
|
626
|
-
filter: brightness(1.
|
|
708
|
+
filter: brightness(1.04);
|
|
627
709
|
}
|
|
628
710
|
|
|
629
711
|
.wf-btn-primary:active:not(:disabled) {
|
|
630
712
|
transform: translateY(0);
|
|
631
|
-
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);
|
|
714
|
+
filter: brightness(0.98);
|
|
632
715
|
}
|
|
633
716
|
|
|
634
717
|
.wf-btn-outline {
|
|
635
|
-
border:
|
|
718
|
+
border: 1px solid var(--wf-border);
|
|
636
719
|
background: var(--wf-card);
|
|
637
720
|
color: var(--wf-fg);
|
|
638
721
|
box-shadow: var(--wf-shadow-input);
|
|
@@ -641,37 +724,44 @@
|
|
|
641
724
|
.wf-btn-outline:hover:not(:disabled) {
|
|
642
725
|
background: var(--wf-muted-bg);
|
|
643
726
|
border-color: var(--wf-border-hover);
|
|
727
|
+
transform: translateY(-1px);
|
|
644
728
|
}
|
|
645
729
|
|
|
646
730
|
.wf-btn-social {
|
|
647
|
-
border:
|
|
731
|
+
border: 1px solid var(--wf-border);
|
|
648
732
|
background: var(--wf-card);
|
|
649
733
|
color: var(--wf-fg-soft);
|
|
650
734
|
box-shadow: var(--wf-shadow-input);
|
|
651
|
-
font-weight:
|
|
735
|
+
font-weight: 600;
|
|
652
736
|
}
|
|
653
737
|
|
|
654
738
|
.wf-btn-social:hover:not(:disabled) {
|
|
655
739
|
background: var(--wf-muted-bg);
|
|
656
740
|
border-color: var(--wf-border-hover);
|
|
657
|
-
|
|
741
|
+
color: var(--wf-fg);
|
|
742
|
+
transform: translateY(-1px);
|
|
658
743
|
}
|
|
659
744
|
|
|
660
745
|
.wf-btn-success {
|
|
661
|
-
background: linear-gradient(
|
|
746
|
+
background: linear-gradient(180deg, var(--wf-primary-grad-start) 0%, var(--wf-success) 100%);
|
|
662
747
|
color: var(--wf-success-fg);
|
|
663
|
-
box-shadow:
|
|
748
|
+
box-shadow: var(--wf-shadow-btn);
|
|
664
749
|
}
|
|
665
750
|
|
|
666
751
|
.wf-btn-success:hover:not(:disabled) {
|
|
667
752
|
transform: translateY(-1px);
|
|
668
|
-
box-shadow:
|
|
753
|
+
box-shadow: var(--wf-shadow-btn-hover);
|
|
754
|
+
filter: brightness(1.03);
|
|
755
|
+
}
|
|
756
|
+
|
|
757
|
+
.wf-btn-success:active:not(:disabled) {
|
|
758
|
+
transform: translateY(0);
|
|
669
759
|
}
|
|
670
760
|
|
|
671
761
|
.wf-btn-ghost {
|
|
672
762
|
background: transparent;
|
|
673
763
|
color: var(--wf-muted);
|
|
674
|
-
font-weight:
|
|
764
|
+
font-weight: 600;
|
|
675
765
|
}
|
|
676
766
|
|
|
677
767
|
.wf-btn-ghost:hover:not(:disabled) {
|
|
@@ -689,9 +779,16 @@
|
|
|
689
779
|
}
|
|
690
780
|
|
|
691
781
|
.wf-social-buttons .wf-btn-social {
|
|
692
|
-
flex: 1;
|
|
693
|
-
|
|
694
|
-
|
|
782
|
+
flex: 1 1 0;
|
|
783
|
+
min-width: 0;
|
|
784
|
+
height: 2.875rem;
|
|
785
|
+
font-size: 0.875rem;
|
|
786
|
+
font-weight: 600;
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
.wf-social-buttons .wf-btn-social .wf-icon-sm {
|
|
790
|
+
width: 1.125rem;
|
|
791
|
+
height: 1.125rem;
|
|
695
792
|
}
|
|
696
793
|
|
|
697
794
|
.wf-divider {
|
|
@@ -709,12 +806,12 @@
|
|
|
709
806
|
}
|
|
710
807
|
|
|
711
808
|
.wf-divider span {
|
|
712
|
-
font-size: 0.
|
|
713
|
-
font-weight:
|
|
809
|
+
font-size: 0.6875rem;
|
|
810
|
+
font-weight: 600;
|
|
714
811
|
color: var(--wf-muted);
|
|
715
812
|
white-space: nowrap;
|
|
716
813
|
text-transform: uppercase;
|
|
717
|
-
letter-spacing: 0.
|
|
814
|
+
letter-spacing: 0.06em;
|
|
718
815
|
}
|
|
719
816
|
|
|
720
817
|
/* ============================= ROWS ============================= */
|
|
@@ -722,7 +819,7 @@
|
|
|
722
819
|
.wf-row-2 {
|
|
723
820
|
display: grid;
|
|
724
821
|
grid-template-columns: repeat(2, 1fr);
|
|
725
|
-
gap: 0.
|
|
822
|
+
gap: 0.75rem;
|
|
726
823
|
}
|
|
727
824
|
|
|
728
825
|
.wf-btn-row {
|
|
@@ -735,7 +832,11 @@
|
|
|
735
832
|
.wf-password-rules {
|
|
736
833
|
display: grid;
|
|
737
834
|
grid-template-columns: repeat(2, 1fr);
|
|
738
|
-
gap: 0.
|
|
835
|
+
gap: 0.375rem 0.75rem;
|
|
836
|
+
padding: 0.8125rem 0.9375rem;
|
|
837
|
+
background: var(--wf-muted-bg);
|
|
838
|
+
border-radius: var(--wf-radius);
|
|
839
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
739
840
|
}
|
|
740
841
|
|
|
741
842
|
.wf-rule {
|
|
@@ -743,17 +844,17 @@
|
|
|
743
844
|
align-items: center;
|
|
744
845
|
gap: 0.375rem;
|
|
745
846
|
font-size: 0.6875rem;
|
|
847
|
+
font-weight: 500;
|
|
746
848
|
transition: color 0.2s var(--wf-ease);
|
|
747
849
|
}
|
|
748
850
|
|
|
749
|
-
.wf-rule-icon { width: 0.
|
|
750
|
-
.wf-rule-unmet { color: var(--wf-muted); opacity: 0.
|
|
851
|
+
.wf-rule-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
|
|
852
|
+
.wf-rule-unmet { color: var(--wf-muted); opacity: 0.6; }
|
|
751
853
|
.wf-rule-met { color: var(--wf-success); }
|
|
752
854
|
|
|
753
855
|
.wf-error {
|
|
754
856
|
font-size: 0.8125rem;
|
|
755
857
|
color: var(--wf-destructive);
|
|
756
|
-
text-align: center;
|
|
757
858
|
font-weight: 500;
|
|
758
859
|
}
|
|
759
860
|
|
|
@@ -774,10 +875,12 @@
|
|
|
774
875
|
padding: 0;
|
|
775
876
|
font-family: var(--wf-font);
|
|
776
877
|
font-size: inherit;
|
|
878
|
+
border-radius: 2px;
|
|
777
879
|
transition: color 0.15s var(--wf-ease);
|
|
778
880
|
}
|
|
779
881
|
|
|
780
882
|
.wf-link:hover { color: var(--wf-primary-dark); text-decoration: underline; }
|
|
883
|
+
.wf-link:focus-visible { outline: 2px solid var(--wf-primary); outline-offset: 2px; }
|
|
781
884
|
|
|
782
885
|
/* ============================= FACE REGISTRATION ============================= */
|
|
783
886
|
|
|
@@ -790,7 +893,8 @@
|
|
|
790
893
|
border-radius: var(--wf-radius-lg);
|
|
791
894
|
overflow: hidden;
|
|
792
895
|
background: var(--wf-muted-bg);
|
|
793
|
-
border:
|
|
896
|
+
border: 1px dashed var(--wf-border-hover);
|
|
897
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
794
898
|
display: flex;
|
|
795
899
|
align-items: center;
|
|
796
900
|
justify-content: center;
|
|
@@ -803,6 +907,7 @@
|
|
|
803
907
|
height: 3rem;
|
|
804
908
|
border-radius: 50%;
|
|
805
909
|
background: var(--wf-primary-light);
|
|
910
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
|
806
911
|
display: flex;
|
|
807
912
|
align-items: center;
|
|
808
913
|
justify-content: center;
|
|
@@ -829,6 +934,7 @@
|
|
|
829
934
|
height: 13rem;
|
|
830
935
|
border: 2px solid var(--wf-face-border);
|
|
831
936
|
border-radius: 50%;
|
|
937
|
+
box-shadow: 0 0 0 9999px oklch(0.3 0.02 85 / 0.12);
|
|
832
938
|
}
|
|
833
939
|
|
|
834
940
|
.wf-face-actions { display: flex; flex-direction: column; gap: 0.625rem; }
|
|
@@ -844,7 +950,7 @@
|
|
|
844
950
|
}
|
|
845
951
|
|
|
846
952
|
.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; }
|
|
953
|
+
.wf-phone-capture-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; color: var(--wf-fg); margin: 0; }
|
|
848
954
|
.wf-phone-capture-desc { font-size: 0.8125rem; color: var(--wf-muted); margin: 0; max-width: 22rem; line-height: 1.45; }
|
|
849
955
|
|
|
850
956
|
.wf-phone-capture-loading {
|
|
@@ -877,9 +983,9 @@
|
|
|
877
983
|
.wf-qr-code {
|
|
878
984
|
padding: 0.75rem;
|
|
879
985
|
background: #fff;
|
|
880
|
-
border-radius: var(--wf-radius);
|
|
986
|
+
border-radius: var(--wf-radius-lg);
|
|
881
987
|
border: 1px solid var(--wf-border);
|
|
882
|
-
box-shadow:
|
|
988
|
+
box-shadow: var(--wf-shadow-input);
|
|
883
989
|
line-height: 0;
|
|
884
990
|
}
|
|
885
991
|
.wf-qr-code img { width: 180px; height: 180px; border-radius: 4px; }
|
|
@@ -888,23 +994,23 @@
|
|
|
888
994
|
display: inline-flex;
|
|
889
995
|
align-items: center;
|
|
890
996
|
gap: 0.375rem;
|
|
891
|
-
padding: 0.
|
|
997
|
+
padding: 0.5rem 0.875rem;
|
|
892
998
|
font-size: 0.75rem;
|
|
893
999
|
font-weight: 600;
|
|
894
1000
|
font-family: var(--wf-font);
|
|
895
1001
|
color: var(--wf-primary);
|
|
896
1002
|
background: transparent;
|
|
897
1003
|
border: 1px solid var(--wf-border);
|
|
898
|
-
border-radius:
|
|
1004
|
+
border-radius: 999px;
|
|
899
1005
|
cursor: pointer;
|
|
900
1006
|
transition: all 0.15s var(--wf-ease);
|
|
901
1007
|
}
|
|
902
|
-
.wf-btn-copy-link:hover { border-color: var(--wf-primary); background: var(--wf-
|
|
1008
|
+
.wf-btn-copy-link:hover { border-color: var(--wf-primary); background: var(--wf-primary-light); }
|
|
903
1009
|
.wf-btn-copy-link svg { width: 0.875rem; height: 0.875rem; }
|
|
904
1010
|
.wf-btn-copy-link-done { color: var(--wf-success); border-color: var(--wf-success); }
|
|
905
1011
|
|
|
906
1012
|
.wf-pin-section { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
|
|
907
|
-
.wf-pin-label { font-size: 0.
|
|
1013
|
+
.wf-pin-label { font-size: 0.6875rem; color: var(--wf-muted); margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
|
|
908
1014
|
|
|
909
1015
|
.wf-pin-display {
|
|
910
1016
|
display: flex;
|
|
@@ -917,16 +1023,18 @@
|
|
|
917
1023
|
width: 2.25rem;
|
|
918
1024
|
height: 2.75rem;
|
|
919
1025
|
background: var(--wf-input-bg, var(--wf-card));
|
|
920
|
-
border:
|
|
1026
|
+
border: 1.5px solid var(--wf-primary);
|
|
921
1027
|
border-radius: var(--wf-radius-sm);
|
|
1028
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
922
1029
|
font-size: 1.375rem;
|
|
923
1030
|
font-weight: 700;
|
|
924
|
-
color: var(--wf-
|
|
925
|
-
font-family: var(--wf-font);
|
|
1031
|
+
color: var(--wf-primary);
|
|
1032
|
+
font-family: var(--wf-font-mono);
|
|
1033
|
+
font-variant-numeric: tabular-nums;
|
|
926
1034
|
}
|
|
927
1035
|
|
|
928
1036
|
.wf-capture-meta { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
|
|
929
|
-
.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; }
|
|
930
1038
|
.wf-capture-status { font-size: 0.8125rem; color: var(--wf-fg-soft); margin: 0; }
|
|
931
1039
|
.wf-capture-status-done { color: var(--wf-success); font-weight: 600; }
|
|
932
1040
|
|
|
@@ -945,6 +1053,7 @@
|
|
|
945
1053
|
height: 3rem;
|
|
946
1054
|
border-radius: 50%;
|
|
947
1055
|
background: var(--wf-success-bg);
|
|
1056
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
|
948
1057
|
display: flex;
|
|
949
1058
|
align-items: center;
|
|
950
1059
|
justify-content: center;
|
|
@@ -965,17 +1074,18 @@
|
|
|
965
1074
|
.wf-screen-success { align-items: center; text-align: center; }
|
|
966
1075
|
|
|
967
1076
|
.wf-success-icon {
|
|
968
|
-
width:
|
|
969
|
-
height:
|
|
1077
|
+
width: 3.75rem;
|
|
1078
|
+
height: 3.75rem;
|
|
970
1079
|
border-radius: 50%;
|
|
971
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);
|
|
972
1082
|
display: flex;
|
|
973
1083
|
align-items: center;
|
|
974
1084
|
justify-content: center;
|
|
975
1085
|
animation: wf-success-pop 0.5s var(--wf-ease-spring) both;
|
|
976
1086
|
}
|
|
977
1087
|
|
|
978
|
-
.wf-success-icon svg { width:
|
|
1088
|
+
.wf-success-icon svg { width: 1.875rem; height: 1.875rem; color: var(--wf-success); }
|
|
979
1089
|
|
|
980
1090
|
.wf-success-actions {
|
|
981
1091
|
width: 100%;
|
|
@@ -993,21 +1103,22 @@
|
|
|
993
1103
|
|
|
994
1104
|
/* ============================= LOGIN METHODS ============================= */
|
|
995
1105
|
|
|
996
|
-
.wf-login-methods { display: flex; flex-direction: column; gap: 0.
|
|
1106
|
+
.wf-login-methods { display: flex; flex-direction: column; gap: 0.625rem; }
|
|
997
1107
|
|
|
998
1108
|
.wf-login-method {
|
|
999
1109
|
display: inline-flex;
|
|
1000
1110
|
align-items: center;
|
|
1001
|
-
gap: 0.
|
|
1111
|
+
gap: 0.75rem;
|
|
1002
1112
|
justify-content: flex-start;
|
|
1003
1113
|
text-align: left;
|
|
1004
1114
|
border-radius: var(--wf-radius);
|
|
1005
|
-
transition: all 0.
|
|
1115
|
+
transition: all 0.16s var(--wf-ease);
|
|
1006
1116
|
}
|
|
1007
1117
|
|
|
1008
1118
|
.wf-login-method:hover:not(:disabled) {
|
|
1009
1119
|
border-color: var(--wf-primary);
|
|
1010
1120
|
background: var(--wf-primary-light);
|
|
1121
|
+
color: var(--wf-fg);
|
|
1011
1122
|
}
|
|
1012
1123
|
|
|
1013
1124
|
.wf-login-method-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
|
|
@@ -1026,9 +1137,9 @@
|
|
|
1026
1137
|
/* ---- Tablet (portrait) & small laptops ---- */
|
|
1027
1138
|
@media (max-width: 768px) {
|
|
1028
1139
|
.wf-card { max-width: 420px; }
|
|
1029
|
-
.wf-card-inner { padding: 1.
|
|
1030
|
-
.wf-card-header { margin-bottom: 1.
|
|
1031
|
-
.wf-screen { gap: 1.
|
|
1140
|
+
.wf-card-inner { padding: 1.625rem 1.625rem 1.75rem; }
|
|
1141
|
+
.wf-card-header { margin-bottom: 1.375rem; }
|
|
1142
|
+
.wf-screen { gap: 1.125rem; }
|
|
1032
1143
|
.wf-screen-title { font-size: 1.375rem; }
|
|
1033
1144
|
.wf-screen-desc { font-size: 0.8125rem; }
|
|
1034
1145
|
}
|
|
@@ -1046,37 +1157,32 @@
|
|
|
1046
1157
|
border-radius: var(--wf-radius-lg);
|
|
1047
1158
|
}
|
|
1048
1159
|
|
|
1049
|
-
.wf-card-accent { border-radius: var(--wf-radius-lg) var(--wf-radius-lg) 0 0; }
|
|
1050
|
-
|
|
1051
1160
|
.wf-card-inner { padding: 1.25rem 1.125rem 1.5rem; }
|
|
1052
1161
|
|
|
1053
1162
|
.wf-card-header { margin-bottom: 1.25rem; }
|
|
1054
1163
|
|
|
1055
|
-
.wf-card-brand-name { font-size: 0.
|
|
1164
|
+
.wf-card-brand-name { font-size: 0.875rem; }
|
|
1056
1165
|
.wf-card-logo { width: 1.75rem; height: 1.75rem; }
|
|
1057
1166
|
.wf-card-logo svg { width: 0.875rem; height: 0.875rem; }
|
|
1058
1167
|
.wf-ring { width: 2.125rem; height: 2.125rem; }
|
|
1059
|
-
.wf-ring-num { font-size: 0.
|
|
1168
|
+
.wf-ring-num { font-size: 0.75rem; }
|
|
1060
1169
|
|
|
1061
1170
|
.wf-screen { gap: 1rem; }
|
|
1062
|
-
.wf-screen-title { font-size: 1.
|
|
1171
|
+
.wf-screen-title { font-size: 1.3125rem; }
|
|
1063
1172
|
.wf-screen-desc { font-size: 0.8125rem; }
|
|
1064
1173
|
.wf-icon-box { width: 2.25rem; height: 2.25rem; margin-bottom: 0.75rem; }
|
|
1065
1174
|
.wf-icon-box svg { width: 1rem; height: 1rem; }
|
|
1066
1175
|
|
|
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; }
|
|
1176
|
+
.wf-form { gap: 0.875rem; }
|
|
1070
1177
|
|
|
1071
|
-
.wf-social-buttons {
|
|
1072
|
-
.wf-social-buttons .wf-btn-social { height: 2.5rem; }
|
|
1178
|
+
.wf-social-buttons .wf-btn-social { height: 2.75rem; font-size: 0.8125rem; }
|
|
1073
1179
|
|
|
1074
|
-
.wf-row-2 { grid-template-columns: 1fr 1fr; gap: 0.
|
|
1180
|
+
.wf-row-2 { grid-template-columns: 1fr 1fr; gap: 0.625rem; }
|
|
1075
1181
|
|
|
1076
1182
|
.wf-password-rules { grid-template-columns: 1fr; }
|
|
1077
1183
|
|
|
1078
|
-
.wf-otp-row { gap: 0.
|
|
1079
|
-
.wf-otp-input { width:
|
|
1184
|
+
.wf-otp-row { gap: 0.5rem; justify-content: space-between; }
|
|
1185
|
+
.wf-otp-input { flex: 1; width: auto; height: 3rem; font-size: 1.125rem; }
|
|
1080
1186
|
|
|
1081
1187
|
.wf-camera-view { aspect-ratio: 1 / 1; }
|
|
1082
1188
|
.wf-face-overlay::before { width: 8rem; height: 10rem; }
|
|
@@ -1088,27 +1194,27 @@
|
|
|
1088
1194
|
.wf-success-icon svg { width: 1.75rem; height: 1.75rem; }
|
|
1089
1195
|
.wf-success-actions { max-width: 100%; }
|
|
1090
1196
|
|
|
1091
|
-
.wf-bg-orb-1 { width:
|
|
1092
|
-
.wf-bg-orb-2 { width:
|
|
1197
|
+
.wf-bg-orb-1 { width: 260px; height: 260px; }
|
|
1198
|
+
.wf-bg-orb-2 { width: 220px; height: 220px; }
|
|
1093
1199
|
.wf-bg-orb-3 { display: none; }
|
|
1094
1200
|
}
|
|
1095
1201
|
|
|
1096
|
-
/* ---- Very small phones (< 380px
|
|
1202
|
+
/* ---- Very small phones (< 380px) ---- */
|
|
1097
1203
|
@media (max-width: 380px) {
|
|
1098
1204
|
.wf-layout { padding: 0.5rem; padding-top: 1rem; }
|
|
1099
1205
|
.wf-card-inner { padding: 1rem 0.875rem 1.25rem; }
|
|
1100
1206
|
|
|
1101
|
-
.wf-screen-title { font-size: 1.
|
|
1207
|
+
.wf-screen-title { font-size: 1.1875rem; }
|
|
1102
1208
|
.wf-screen-desc { font-size: 0.75rem; }
|
|
1103
|
-
.wf-label { font-size: 0.
|
|
1104
|
-
.wf-input { height: 2.
|
|
1105
|
-
.wf-input-wrap .wf-input { padding-left: 2.
|
|
1106
|
-
.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; }
|
|
1107
1213
|
|
|
1108
1214
|
.wf-row-2 { grid-template-columns: 1fr; }
|
|
1109
1215
|
|
|
1110
|
-
.wf-otp-input {
|
|
1111
|
-
.wf-otp-row { gap: 0.
|
|
1216
|
+
.wf-otp-input { height: 2.75rem; font-size: 1.0625rem; }
|
|
1217
|
+
.wf-otp-row { gap: 0.375rem; }
|
|
1112
1218
|
|
|
1113
1219
|
.wf-divider span { font-size: 0.625rem; }
|
|
1114
1220
|
}
|
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