@matchain/matchid-sdk-react 0.1.33 → 0.1.35
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/dist/index.css +406 -235
- package/dist/index.d.mts +17 -6
- package/dist/index.d.ts +17 -6
- package/dist/index.js +178 -122
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +160 -104
- package/dist/index.mjs.map +1 -1
- package/example/src/components/Login/index.tsx +2 -2
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -32,11 +32,11 @@ body {
|
|
|
32
32
|
--matchid-login-method-round: var(--matchid-round);
|
|
33
33
|
--matchid-login-method-color: var(--matchid-text-color);
|
|
34
34
|
|
|
35
|
-
--matchid-login-other-color:var(--matchid-gray-600);
|
|
35
|
+
--matchid-login-other-color: var(--matchid-gray-600);
|
|
36
36
|
|
|
37
|
-
--matchid-login-recommend-wallet-color:var(--matchid-black);
|
|
38
|
-
--matchid-login-recommend-wallet-hover-color:var(--matchid-white);
|
|
39
|
-
--matchid-login-recommend-wallet-hover-bg:var(--matchid-highlight-orange);
|
|
37
|
+
--matchid-login-recommend-wallet-color: var(--matchid-black);
|
|
38
|
+
--matchid-login-recommend-wallet-hover-color: var(--matchid-white);
|
|
39
|
+
--matchid-login-recommend-wallet-hover-bg: var(--matchid-highlight-orange);
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
--matchid-login-panel-divide-color: var(--matchid-line);
|
|
@@ -51,6 +51,7 @@ body {
|
|
|
51
51
|
--matchid-modal-border-color: var(--matchid-white);
|
|
52
52
|
--matchid-modal-round: var(--matchid-round-lg);
|
|
53
53
|
--matchid-modal-padding: var(--matchid-padding-lg);
|
|
54
|
+
--matchid-mobile-modal-padding: var(20px);
|
|
54
55
|
|
|
55
56
|
--matchid-modal-header-border-color: var(--matchid-line);
|
|
56
57
|
--matchid-modal-header-color: var(--matchid-text-color);
|
|
@@ -67,7 +68,7 @@ body {
|
|
|
67
68
|
--matchid-field-error-color: var(--matchid-red-600);
|
|
68
69
|
--matchid-field-required-color: #E60808;
|
|
69
70
|
/**popover component**/
|
|
70
|
-
--matchid-popover-bg:var(--matchid-white);
|
|
71
|
+
--matchid-popover-bg: var(--matchid-white);
|
|
71
72
|
/**button component**/
|
|
72
73
|
--matchid-btn-border-color: var(--matchid-black);
|
|
73
74
|
--matchid-btn-color: var(--matchid-black);
|
|
@@ -108,8 +109,8 @@ body {
|
|
|
108
109
|
--matchid-valid-error-color: var(--matchid-gray-600);
|
|
109
110
|
--matchid-valid-success-color: var(--matchid-black);
|
|
110
111
|
--matchid-password-header-color: var(--matchid-black);
|
|
111
|
-
--matchid-user-popover-color:var(--matchid-black);
|
|
112
|
-
--matchid-user-popover-hover-color:var(--matchid-highlight-orange);
|
|
112
|
+
--matchid-user-popover-color: var(--matchid-black);
|
|
113
|
+
--matchid-user-popover-hover-color: var(--matchid-highlight-orange);
|
|
113
114
|
|
|
114
115
|
}
|
|
115
116
|
|
|
@@ -120,13 +121,21 @@ body {
|
|
|
120
121
|
align-items: center;
|
|
121
122
|
flex-direction: column;
|
|
122
123
|
gap: 64px;
|
|
123
|
-
|
|
124
|
+
@media screen and (max-width: 768px) {
|
|
125
|
+
gap: 48px;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.matchid-login-recommend-list {
|
|
124
129
|
width: 100%;
|
|
125
130
|
display: flex;
|
|
126
131
|
justify-content: center;
|
|
127
132
|
align-items: center;
|
|
128
133
|
flex-direction: column;
|
|
129
134
|
gap: 16px;
|
|
135
|
+
@media screen and (max-width: 768px) {
|
|
136
|
+
gap: 12px;
|
|
137
|
+
}
|
|
138
|
+
|
|
130
139
|
.matchid-login-recommend-method {
|
|
131
140
|
width: 100%;
|
|
132
141
|
position: relative;
|
|
@@ -136,11 +145,12 @@ body {
|
|
|
136
145
|
flex-direction: column;
|
|
137
146
|
border-radius: var(--matchid-login-method-round, 12px);
|
|
138
147
|
border: 1px solid var(--matchid-login-method-border-color, #E3E3E3);
|
|
148
|
+
|
|
139
149
|
&:hover {
|
|
140
150
|
border-color: var(--matchid-login-method-hover-border-color, #FC802D);
|
|
141
151
|
}
|
|
142
|
-
.matchid-login-recommend-method-item{
|
|
143
152
|
|
|
153
|
+
.matchid-login-recommend-method-item {
|
|
144
154
|
display: flex;
|
|
145
155
|
justify-content: space-between;
|
|
146
156
|
align-items: center;
|
|
@@ -150,69 +160,96 @@ body {
|
|
|
150
160
|
padding: 16px;
|
|
151
161
|
cursor: pointer;
|
|
152
162
|
color: var(--matchid-login-method-color, #000000);
|
|
163
|
+
@media screen and (max-width: 768px) {
|
|
164
|
+
height: 56px;
|
|
165
|
+
padding: 10px 16px;
|
|
166
|
+
}
|
|
153
167
|
|
|
154
168
|
.matchid-login-recommend-method-content {
|
|
155
169
|
display: flex;
|
|
156
170
|
justify-content: flex-start;
|
|
157
171
|
align-items: center;
|
|
158
172
|
gap: 8px;
|
|
173
|
+
font-size: 16px;
|
|
174
|
+
font-weight: 600;
|
|
175
|
+
@media screen and (max-width: 768px) {
|
|
176
|
+
gap: 12px
|
|
177
|
+
}
|
|
159
178
|
}
|
|
160
|
-
|
|
179
|
+
|
|
180
|
+
.matchid-login-recommend-method-arrow {
|
|
161
181
|
transition: all 0.3s;
|
|
162
|
-
|
|
182
|
+
|
|
183
|
+
&.matchid-login-recommend-method-arrow-active {
|
|
163
184
|
transform: rotate(180deg);
|
|
164
185
|
}
|
|
165
186
|
}
|
|
166
187
|
}
|
|
167
|
-
|
|
188
|
+
|
|
189
|
+
.matchid-login-recommend-method-popover {
|
|
168
190
|
display: none;
|
|
169
191
|
width: 100%;
|
|
170
|
-
padding:0 16px 16px;
|
|
192
|
+
padding: 0 16px 16px;
|
|
171
193
|
flex-direction: column;
|
|
172
|
-
|
|
194
|
+
|
|
195
|
+
&.matchid-login-recommend-method-popover-active {
|
|
173
196
|
display: flex;
|
|
174
197
|
}
|
|
175
|
-
|
|
198
|
+
|
|
199
|
+
.matchid-login-recommend-wallet-divider {
|
|
176
200
|
height: 1px;
|
|
177
201
|
width: 100%;
|
|
178
202
|
background: var(--matchid-line);
|
|
179
203
|
}
|
|
180
|
-
|
|
181
|
-
|
|
204
|
+
|
|
205
|
+
.matchid-login-recommend-wallet-list {
|
|
206
|
+
margin-top: 16px;
|
|
182
207
|
display: flex;
|
|
183
208
|
flex-direction: column;
|
|
184
|
-
gap:8px;
|
|
209
|
+
gap: 8px;
|
|
185
210
|
width: 100%;
|
|
186
|
-
|
|
211
|
+
@media screen and (max-width: 768px) {
|
|
212
|
+
margin-top: 10px;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.matchid-login-recommend-wallet-item {
|
|
187
216
|
display: flex;
|
|
188
217
|
justify-content: space-between;
|
|
189
218
|
align-items: center;
|
|
190
219
|
gap: 16px;
|
|
191
|
-
height:56px;
|
|
220
|
+
height: 56px;
|
|
192
221
|
border-radius: 8px;
|
|
193
222
|
font-size: 16px;
|
|
194
223
|
font-weight: 600;
|
|
224
|
+
@media screen and (max-width: 768px) {
|
|
225
|
+
height: 48px;
|
|
226
|
+
}
|
|
195
227
|
|
|
196
228
|
color: var(--matchid-login-recommend-wallet-color, #000000);
|
|
197
229
|
cursor: pointer;
|
|
198
|
-
padding:0 16px;
|
|
199
|
-
|
|
230
|
+
padding: 0 16px;
|
|
231
|
+
|
|
232
|
+
.matchid-login-recommend-wallet-item-content {
|
|
200
233
|
display: flex;
|
|
201
234
|
justify-content: space-between;
|
|
202
235
|
align-items: center;
|
|
203
|
-
gap:8px;
|
|
204
|
-
|
|
236
|
+
gap: 8px;
|
|
237
|
+
|
|
238
|
+
.matchid-login-recommend-wallet-item-hover-icon {
|
|
205
239
|
display: none;
|
|
206
240
|
}
|
|
207
241
|
}
|
|
208
|
-
|
|
242
|
+
|
|
243
|
+
&:hover {
|
|
209
244
|
background: var(--matchid-login-recommend-wallet-hover-bg, #FC802D);
|
|
210
245
|
color: var(--matchid-login-recommend-wallet-hover-color, #FFF);
|
|
211
|
-
--matchid-arrow-color:var(--matchid-login-recommend-wallet-hover-color, #FFF);
|
|
212
|
-
|
|
246
|
+
--matchid-arrow-color: var(--matchid-login-recommend-wallet-hover-color, #FFF);
|
|
247
|
+
|
|
248
|
+
.matchid-login-recommend-wallet-item-hover-icon {
|
|
213
249
|
display: block;
|
|
214
250
|
}
|
|
215
|
-
|
|
251
|
+
|
|
252
|
+
.matchid-login-recommend-wallet-item-icon {
|
|
216
253
|
display: none;
|
|
217
254
|
}
|
|
218
255
|
|
|
@@ -223,31 +260,30 @@ body {
|
|
|
223
260
|
|
|
224
261
|
}
|
|
225
262
|
}
|
|
263
|
+
|
|
226
264
|
.matchid-login-other {
|
|
227
265
|
width: 100%;
|
|
228
|
-
gap:16px;
|
|
266
|
+
gap: 16px;
|
|
229
267
|
display: flex;
|
|
230
268
|
flex-direction: column;
|
|
231
|
-
|
|
269
|
+
|
|
270
|
+
.matchid-login-other-text {
|
|
232
271
|
text-align: center;
|
|
233
272
|
font-size: 14px;
|
|
234
273
|
color: var(--matchid-login-other-color, #6E6E6E);
|
|
235
274
|
font-weight: 400;
|
|
275
|
+
@media screen and (max-width: 768px) {
|
|
276
|
+
font-size: 12px;
|
|
277
|
+
}
|
|
236
278
|
}
|
|
237
|
-
|
|
279
|
+
|
|
280
|
+
.matchid-login-method-box {
|
|
238
281
|
display: grid;
|
|
239
|
-
padding:16px;
|
|
240
|
-
gap:
|
|
282
|
+
padding: 16px;
|
|
283
|
+
gap: 16px 16px;
|
|
241
284
|
grid-template-columns: repeat(5, 1fr);
|
|
242
285
|
|
|
243
|
-
|
|
244
|
-
grid-template-columns: repeat(4, 1fr);
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
@media screen and (max-width: 350px) {
|
|
248
|
-
grid-template-columns: repeat(3, 1fr);
|
|
249
|
-
}
|
|
250
|
-
.matchid-login-method-item{
|
|
286
|
+
.matchid-login-method-item {
|
|
251
287
|
cursor: pointer;
|
|
252
288
|
display: flex;
|
|
253
289
|
justify-content: center;
|
|
@@ -258,51 +294,67 @@ body {
|
|
|
258
294
|
}
|
|
259
295
|
|
|
260
296
|
|
|
261
|
-
|
|
262
297
|
.matchid-login-panel {
|
|
263
298
|
display: flex;
|
|
264
299
|
flex-direction: column;
|
|
265
300
|
gap: 24px;
|
|
266
|
-
|
|
301
|
+
@media screen and (max-width: 768px) {
|
|
302
|
+
gap: 16px;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.matchid-login-panel-box {
|
|
267
306
|
max-height: 500px;
|
|
268
307
|
overflow-y: auto;
|
|
308
|
+
|
|
269
309
|
&::-webkit-scrollbar {
|
|
270
310
|
width: 8px;
|
|
271
311
|
background-color: #D3D3D3;
|
|
272
312
|
border-radius: 4px;
|
|
273
313
|
}
|
|
274
314
|
}
|
|
275
|
-
}
|
|
276
315
|
|
|
277
|
-
.matchid-login-panel-divide {
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
}
|
|
316
|
+
.matchid-login-panel-divide {
|
|
317
|
+
height: 1px;
|
|
318
|
+
width: 100%;
|
|
319
|
+
background-color: var(--matchid-login-panel-divide-color, #E3E3E3);
|
|
320
|
+
}
|
|
282
321
|
|
|
283
|
-
.matchid-login-panel-header {
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
gap: 4px;
|
|
289
|
-
}
|
|
322
|
+
.matchid-login-panel-header {
|
|
323
|
+
display: flex;
|
|
324
|
+
width: 100%;
|
|
325
|
+
justify-content: space-between;
|
|
326
|
+
align-items: center;
|
|
290
327
|
|
|
291
|
-
.matchid-login-panel-header-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
}
|
|
328
|
+
.matchid-login-panel-header-content {
|
|
329
|
+
display: flex;
|
|
330
|
+
gap: 4px;
|
|
331
|
+
flex-direction: column;
|
|
332
|
+
}
|
|
296
333
|
|
|
297
|
-
.matchid-login-panel-header-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
334
|
+
.matchid-login-panel-header-title {
|
|
335
|
+
color: var(--matchid-login-panel-title-color, #000000);
|
|
336
|
+
font-size: 18px;
|
|
337
|
+
font-weight: 600;
|
|
338
|
+
@media screen and (max-width: 768px) {
|
|
339
|
+
font-size: 16px;
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.matchid-login-panel-header-subtilte {
|
|
344
|
+
color: var(--matchid-login-panel-subtitle-color, #6E6E6E);
|
|
345
|
+
font-size: 14px;
|
|
346
|
+
font-weight: 400;
|
|
347
|
+
line-height: 120%;
|
|
348
|
+
@media screen and (max-width: 768px) {
|
|
349
|
+
font-size: 12px;
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.matchid-login-panel-header-close {
|
|
354
|
+
cursor: pointer;
|
|
355
|
+
}
|
|
356
|
+
}
|
|
303
357
|
|
|
304
|
-
.matchid-login-panel-header-close {
|
|
305
|
-
cursor: pointer;
|
|
306
358
|
}
|
|
307
359
|
|
|
308
360
|
.matchid-overlay {
|
|
@@ -316,8 +368,12 @@ body {
|
|
|
316
368
|
align-items: center;
|
|
317
369
|
z-index: var(--matchid-overlay-index);
|
|
318
370
|
overflow: hidden;
|
|
319
|
-
backdrop-filter: blur(
|
|
371
|
+
backdrop-filter: blur(2px);
|
|
320
372
|
background: rgba(0, 0, 0, .3);
|
|
373
|
+
@media screen and (max-width: 768px) {
|
|
374
|
+
align-items: flex-end;
|
|
375
|
+
padding-bottom: 32px;
|
|
376
|
+
}
|
|
321
377
|
}
|
|
322
378
|
|
|
323
379
|
.matchid-modal {
|
|
@@ -328,37 +384,62 @@ body {
|
|
|
328
384
|
width: 480px;
|
|
329
385
|
max-width: 90vw;
|
|
330
386
|
padding: var(--matchid-modal-padding, 32px);
|
|
331
|
-
|
|
387
|
+
@media screen and (max-width: 768px) {
|
|
388
|
+
width: calc(100vw - 20px);
|
|
389
|
+
max-width: calc(100vw - 20px);
|
|
390
|
+
padding: var(--matchid-mobile-modal-padding, 20px);
|
|
391
|
+
padding-top: 0px;
|
|
392
|
+
.matchid-modal-mobile-header {
|
|
393
|
+
width: 44px;
|
|
394
|
+
height: 5px;
|
|
395
|
+
border-radius: 3px;
|
|
396
|
+
background: var(--matchid-line);
|
|
397
|
+
margin: 8px auto 21px;
|
|
398
|
+
}
|
|
399
|
+
}
|
|
332
400
|
|
|
333
|
-
.matchid-modal-header {
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
401
|
+
.matchid-modal-header {
|
|
402
|
+
padding-bottom: 24px;
|
|
403
|
+
margin-bottom: 24px;
|
|
404
|
+
height: 54px;
|
|
405
|
+
display: flex;
|
|
406
|
+
align-items: center;
|
|
407
|
+
justify-content: space-between;
|
|
408
|
+
@media screen and (max-width: 768px) {
|
|
409
|
+
height: 38px;
|
|
410
|
+
padding-bottom: 16px;
|
|
411
|
+
margin-bottom: 16px;
|
|
412
|
+
}
|
|
341
413
|
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
}
|
|
414
|
+
&.matchid-modal-header-border {
|
|
415
|
+
border-bottom: 1px solid var(--matchid-modal-header-border-color, #E3E3E3);
|
|
416
|
+
}
|
|
345
417
|
|
|
346
|
-
.matchid-modal-header-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
418
|
+
.matchid-modal-header-back, .matchid-modal-header-close {
|
|
419
|
+
cursor: pointer;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.matchid-modal-header-content {
|
|
423
|
+
display: flex;
|
|
424
|
+
align-items: center;
|
|
425
|
+
gap: 12px;
|
|
426
|
+
|
|
427
|
+
.matchid-modal-header-title {
|
|
428
|
+
color: var(--matchid-modal-header-color, #000);
|
|
429
|
+
font-size: 18px;
|
|
430
|
+
font-weight: 600;
|
|
431
|
+
@media screen and (max-width: 768px) {
|
|
432
|
+
font-size: 16px;
|
|
433
|
+
font-weight: 500;
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
}
|
|
351
438
|
|
|
352
|
-
.matchid-modal-header-back, .matchid-modal-header-close {
|
|
353
|
-
cursor: pointer;
|
|
354
|
-
}
|
|
355
439
|
|
|
356
|
-
.matchid-modal-header-title {
|
|
357
|
-
color: var(--matchid-modal-header-color, #000);
|
|
358
|
-
font-size: 18px;
|
|
359
|
-
font-weight: 600;
|
|
360
440
|
}
|
|
361
441
|
|
|
442
|
+
|
|
362
443
|
.matchid-input-box {
|
|
363
444
|
width: 100%;
|
|
364
445
|
height: 72px;
|
|
@@ -370,79 +451,104 @@ body {
|
|
|
370
451
|
align-items: center;
|
|
371
452
|
justify-content: space-between;
|
|
372
453
|
background: var(--matchid-input-bg);
|
|
373
|
-
gap:24px;
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
}
|
|
454
|
+
gap: 24px;
|
|
455
|
+
@media screen and (max-width: 768px) {
|
|
456
|
+
height: 48px;
|
|
457
|
+
padding-left: 16px;
|
|
458
|
+
padding-right: 16px;
|
|
459
|
+
}
|
|
380
460
|
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
flex-shrink: 1;
|
|
461
|
+
&:active, &:focus, &:focus-within {
|
|
462
|
+
border-color: var(--matchid-input-focus-border-color);
|
|
463
|
+
background: var(--matchid-input-focus-bg);
|
|
464
|
+
}
|
|
386
465
|
|
|
387
|
-
|
|
466
|
+
&.matchid-input-has-content {
|
|
467
|
+
background: var(--matchid-input-focus-bg);
|
|
468
|
+
}
|
|
388
469
|
|
|
389
|
-
.matchid-input-
|
|
390
|
-
|
|
391
|
-
|
|
470
|
+
.matchid-input-field {
|
|
471
|
+
flex: 1;
|
|
472
|
+
height: 100%;
|
|
473
|
+
outline: 0;
|
|
474
|
+
color: var(--matchid-input-color);
|
|
475
|
+
font-size: 18px;
|
|
476
|
+
font-weight: 600;
|
|
477
|
+
background: none;
|
|
478
|
+
min-width: 0;
|
|
479
|
+
@media screen and (max-width: 768px) {
|
|
480
|
+
font-size: 16px;
|
|
481
|
+
font-weight: 500;
|
|
482
|
+
}
|
|
392
483
|
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
width: 20px;
|
|
398
|
-
flex-shrink: 1;
|
|
399
|
-
}
|
|
484
|
+
&::placeholder {
|
|
485
|
+
color: var(--matchid-input-placeholder-color);
|
|
486
|
+
font-weight: 300;
|
|
487
|
+
}
|
|
400
488
|
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
}
|
|
489
|
+
&:active, &:focus {
|
|
490
|
+
outline: 0;
|
|
491
|
+
}
|
|
492
|
+
}
|
|
404
493
|
|
|
405
|
-
.matchid-input-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
}
|
|
494
|
+
.matchid-input-eye-icon {
|
|
495
|
+
cursor: pointer;
|
|
496
|
+
display: flex;
|
|
497
|
+
align-items: center;
|
|
498
|
+
width: 20px;
|
|
499
|
+
flex-shrink: 1;
|
|
500
|
+
@media screen and (max-width: 768px) {
|
|
501
|
+
width: 16px;
|
|
502
|
+
}
|
|
503
|
+
}
|
|
415
504
|
|
|
416
|
-
.matchid-input-
|
|
417
|
-
|
|
418
|
-
|
|
505
|
+
.matchid-input-delete-icon {
|
|
506
|
+
opacity: 0;
|
|
507
|
+
cursor: pointer;
|
|
508
|
+
width: 20px;
|
|
509
|
+
flex-shrink: 1;
|
|
510
|
+
@media screen and (max-width: 768px) {
|
|
511
|
+
width: 16px;
|
|
512
|
+
}
|
|
513
|
+
}
|
|
419
514
|
|
|
420
|
-
|
|
421
|
-
|
|
515
|
+
&:focus-within {
|
|
516
|
+
.matchid-input-delete-icon {
|
|
517
|
+
opacity: 1;
|
|
518
|
+
}
|
|
519
|
+
}
|
|
422
520
|
}
|
|
423
521
|
|
|
424
522
|
.matchid-field-box {
|
|
425
523
|
display: flex;
|
|
426
524
|
flex-direction: column;
|
|
427
525
|
gap: 16px;
|
|
428
|
-
|
|
526
|
+
@media screen and (max-width: 768px) {
|
|
527
|
+
gap: 8px;
|
|
528
|
+
}
|
|
429
529
|
|
|
430
|
-
.matchid-field-label {
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
530
|
+
.matchid-field-label {
|
|
531
|
+
color: var(--matchid-field-color);
|
|
532
|
+
font-size: 18px;
|
|
533
|
+
font-weight: 600;
|
|
534
|
+
@media screen and (max-width: 768px) {
|
|
535
|
+
font-size: 14px;
|
|
536
|
+
font-weight: 500;
|
|
537
|
+
}
|
|
435
538
|
|
|
436
|
-
.matchid-field-required {
|
|
437
|
-
|
|
438
|
-
}
|
|
539
|
+
.matchid-field-required {
|
|
540
|
+
color: var(--matchid-field-required-color);
|
|
541
|
+
}
|
|
542
|
+
}
|
|
439
543
|
|
|
440
|
-
.matchid-field-error {
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
544
|
+
.matchid-field-error {
|
|
545
|
+
font-size: 14px;
|
|
546
|
+
font-weight: 600;
|
|
547
|
+
color: var(--matchid-field-error-color);
|
|
548
|
+
}
|
|
444
549
|
}
|
|
445
550
|
|
|
551
|
+
|
|
446
552
|
.matchid-btn {
|
|
447
553
|
display: flex;
|
|
448
554
|
justify-content: center;
|
|
@@ -504,14 +610,14 @@ body {
|
|
|
504
610
|
}
|
|
505
611
|
|
|
506
612
|
.matchid-btn-sm {
|
|
507
|
-
height:
|
|
613
|
+
height: 28px;
|
|
508
614
|
font-size: 14px;
|
|
509
|
-
padding: 0
|
|
615
|
+
padding: 0 16px;
|
|
510
616
|
}
|
|
511
617
|
|
|
512
618
|
.matchid-btn-df {
|
|
513
619
|
height: 40px;
|
|
514
|
-
font-size:
|
|
620
|
+
font-size: 18px;
|
|
515
621
|
padding: 0 16px;
|
|
516
622
|
}
|
|
517
623
|
|
|
@@ -529,57 +635,99 @@ body {
|
|
|
529
635
|
border-radius: 100px;
|
|
530
636
|
}
|
|
531
637
|
|
|
638
|
+
@media screen and (max-width: 768px) {
|
|
639
|
+
.matchid-btn-sm {
|
|
640
|
+
height: 28px;
|
|
641
|
+
font-size: 12px;
|
|
642
|
+
padding: 0 16px;
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
.matchid-btn-df {
|
|
646
|
+
height: 40px;
|
|
647
|
+
font-size: 16px;
|
|
648
|
+
padding: 0 16px;
|
|
649
|
+
gap: 8px
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
.matchid-btn-lg {
|
|
653
|
+
height: 48px;
|
|
654
|
+
font-size: 16px;
|
|
655
|
+
padding: 0 32px;
|
|
656
|
+
}
|
|
657
|
+
}
|
|
658
|
+
|
|
532
659
|
.matchid-email-verify-box, .matchid-password-box {
|
|
533
660
|
display: flex;
|
|
534
661
|
flex-direction: column;
|
|
535
662
|
gap: 64px;
|
|
536
|
-
|
|
663
|
+
@media screen and (max-width: 768px) {
|
|
664
|
+
gap:36px;
|
|
665
|
+
}
|
|
537
666
|
|
|
538
|
-
.matchid-email-verify-header, .matchid-password-header {
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
667
|
+
.matchid-email-verify-header, .matchid-password-header {
|
|
668
|
+
display: flex;
|
|
669
|
+
align-items: center;
|
|
670
|
+
gap: 16px;
|
|
671
|
+
height: 40px;
|
|
672
|
+
@media screen and (max-width: 768px) {
|
|
673
|
+
gap: 12px;
|
|
674
|
+
height: 32px;
|
|
675
|
+
}
|
|
544
676
|
|
|
545
|
-
.matchid-email-verify-header-icon, .matchid-password-header-icon {
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
677
|
+
.matchid-email-verify-header-icon, .matchid-password-header-icon {
|
|
678
|
+
width: 40px;
|
|
679
|
+
height: 40px;
|
|
680
|
+
display: flex;
|
|
681
|
+
justify-content: center;
|
|
682
|
+
align-items: center;
|
|
683
|
+
border-radius: 8px;
|
|
684
|
+
border: 1px solid var(--matchid-black);
|
|
685
|
+
@media screen and (max-width: 768px) {
|
|
686
|
+
width: 32px;
|
|
687
|
+
height: 32px;
|
|
688
|
+
}
|
|
689
|
+
}
|
|
553
690
|
|
|
554
691
|
|
|
555
|
-
|
|
692
|
+
.matchid-email-verify-header-content {
|
|
693
|
+
flex: 1;
|
|
694
|
+
display: flex;
|
|
695
|
+
height: 100%;
|
|
696
|
+
flex-direction: column;
|
|
697
|
+
justify-content: space-between;
|
|
556
698
|
|
|
557
|
-
.matchid-email-verify-header-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
699
|
+
.matchid-email-verify-header-value {
|
|
700
|
+
color: var(--matchid-email-verify-header-value-color);
|
|
701
|
+
font-size: 24px;
|
|
702
|
+
font-weight: 600;
|
|
703
|
+
line-height: 100%;
|
|
704
|
+
@media screen and (max-width: 768px) {
|
|
705
|
+
font-size: 16px;
|
|
706
|
+
font-weight: 500;
|
|
707
|
+
}
|
|
708
|
+
}
|
|
564
709
|
|
|
565
|
-
.matchid-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
710
|
+
.matchid-email-verify-header-tips {
|
|
711
|
+
color: var(--matchid-email-verify-header-value-tips);
|
|
712
|
+
font-size: 14px;
|
|
713
|
+
line-height: 120%; /* 16.8px */
|
|
714
|
+
@media screen and (max-width: 768px) {
|
|
715
|
+
font-size: 12px;
|
|
716
|
+
}
|
|
717
|
+
}
|
|
718
|
+
}
|
|
570
719
|
|
|
571
|
-
.matchid-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
720
|
+
.matchid-password-header-content {
|
|
721
|
+
font-size: 16px;
|
|
722
|
+
font-weight: 500;
|
|
723
|
+
color: var(--matchid-password-header-color);
|
|
724
|
+
@media screen and (max-width: 768px) {
|
|
725
|
+
font-size: 14px;
|
|
726
|
+
}
|
|
727
|
+
}
|
|
728
|
+
}
|
|
576
729
|
}
|
|
577
730
|
|
|
578
|
-
.matchid-email-verify-header-tips {
|
|
579
|
-
color: var(--matchid-email-verify-header-value-tips);
|
|
580
|
-
font-size: 14px;
|
|
581
|
-
line-height: 120%; /* 16.8px */
|
|
582
|
-
}
|
|
583
731
|
|
|
584
732
|
.matchid-unlogin-btn, .matchid-login-btn {
|
|
585
733
|
gap: 8px
|
|
@@ -609,7 +757,7 @@ body {
|
|
|
609
757
|
border-color: var(--matchid-login-btn-active-border-color);
|
|
610
758
|
}
|
|
611
759
|
|
|
612
|
-
.matchid-login-btn-box{
|
|
760
|
+
.matchid-login-btn-box {
|
|
613
761
|
position: relative;
|
|
614
762
|
}
|
|
615
763
|
|
|
@@ -618,37 +766,48 @@ body {
|
|
|
618
766
|
display: flex;
|
|
619
767
|
flex-direction: column;
|
|
620
768
|
gap: 16px;
|
|
621
|
-
|
|
769
|
+
@media screen and (max-width: 768px) {
|
|
770
|
+
gap: 4px;
|
|
771
|
+
}
|
|
622
772
|
|
|
623
|
-
.matchid-valid-status-item {
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
773
|
+
.matchid-valid-status-item {
|
|
774
|
+
display: flex;
|
|
775
|
+
font-size: 14px;
|
|
776
|
+
gap: 8px;
|
|
777
|
+
align-items: flex-start;
|
|
778
|
+
@media screen and (max-width: 768px) {
|
|
779
|
+
font-size: 12px;
|
|
780
|
+
line-height: normal;
|
|
781
|
+
}
|
|
629
782
|
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
}
|
|
783
|
+
span {
|
|
784
|
+
flex: 1;
|
|
785
|
+
}
|
|
633
786
|
|
|
634
|
-
|
|
635
|
-
color: var(--matchid-valid-success-color);
|
|
636
|
-
}
|
|
787
|
+
color: var();
|
|
637
788
|
|
|
638
|
-
|
|
639
|
-
|
|
789
|
+
&.matchid-valid-status-success {
|
|
790
|
+
color: var(--matchid-valid-success-color);
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
&.matchid-valid-status-error {
|
|
794
|
+
color: var(--matchid-valid-error-color);
|
|
795
|
+
}
|
|
796
|
+
}
|
|
640
797
|
}
|
|
641
798
|
|
|
799
|
+
|
|
642
800
|
.matchid-password-content {
|
|
643
801
|
display: flex;
|
|
644
802
|
flex-direction: column;
|
|
645
803
|
gap: 24px;
|
|
646
804
|
}
|
|
647
805
|
|
|
648
|
-
.matchid-popover-box{
|
|
806
|
+
.matchid-popover-box {
|
|
649
807
|
position: relative;
|
|
650
808
|
display: inline-block;
|
|
651
|
-
|
|
809
|
+
|
|
810
|
+
.matchid-popover-content {
|
|
652
811
|
position: absolute;
|
|
653
812
|
z-index: 100;
|
|
654
813
|
background: var(--matchid-popover-bg);
|
|
@@ -656,70 +815,80 @@ body {
|
|
|
656
815
|
border-radius: 12px;
|
|
657
816
|
padding: 16px 0;
|
|
658
817
|
display: none;
|
|
659
|
-
border:1px solid var(--matchid-popover-bg);
|
|
818
|
+
border: 1px solid var(--matchid-popover-bg);
|
|
660
819
|
}
|
|
661
|
-
|
|
662
|
-
|
|
820
|
+
|
|
821
|
+
.matchid-popover-content:hover {
|
|
822
|
+
border: 1px solid var(--matchid-highlight-orange);
|
|
663
823
|
}
|
|
664
|
-
|
|
824
|
+
|
|
825
|
+
&.matchid-popover-click-active {
|
|
665
826
|
.matchid-popover-content {
|
|
666
827
|
display: block;
|
|
667
828
|
}
|
|
668
829
|
}
|
|
669
|
-
|
|
830
|
+
|
|
831
|
+
&.matchid-popover-hover:hover {
|
|
670
832
|
.matchid-popover-content {
|
|
671
833
|
display: block;
|
|
672
834
|
}
|
|
673
835
|
}
|
|
674
|
-
|
|
836
|
+
|
|
837
|
+
&.matchid-popover-left {
|
|
675
838
|
.matchid-popover-content {
|
|
676
839
|
left: 0;
|
|
677
840
|
top: 100%;
|
|
678
841
|
}
|
|
679
842
|
}
|
|
680
|
-
|
|
843
|
+
|
|
844
|
+
&.matchid-popover-right {
|
|
681
845
|
.matchid-popover-content {
|
|
682
846
|
right: 0;
|
|
683
847
|
top: 100%;
|
|
684
848
|
}
|
|
685
849
|
}
|
|
686
|
-
|
|
850
|
+
|
|
851
|
+
&.matchid-popover-center {
|
|
687
852
|
.matchid-popover-content {
|
|
688
853
|
left: 50%;
|
|
689
|
-
top:100%;
|
|
854
|
+
top: 100%;
|
|
690
855
|
transform: translateX(-50%);
|
|
691
856
|
}
|
|
692
857
|
}
|
|
693
858
|
}
|
|
694
859
|
|
|
695
|
-
.matchid-user-popover-content{
|
|
696
|
-
padding:0 12px;
|
|
860
|
+
.matchid-user-popover-content {
|
|
861
|
+
padding: 0 12px;
|
|
697
862
|
display: flex;
|
|
698
|
-
width:280px;
|
|
863
|
+
width: 280px;
|
|
699
864
|
flex-direction: column;
|
|
700
|
-
gap:32px;
|
|
701
|
-
|
|
865
|
+
gap: 32px;
|
|
866
|
+
|
|
867
|
+
.matchid-user-popover-list {
|
|
702
868
|
display: flex;
|
|
703
869
|
flex-direction: column;
|
|
704
870
|
width: 100%;
|
|
705
|
-
gap:8px;
|
|
706
|
-
|
|
871
|
+
gap: 8px;
|
|
872
|
+
|
|
873
|
+
.matchid-user-popover-item {
|
|
707
874
|
display: flex;
|
|
708
875
|
justify-content: space-between;
|
|
709
876
|
align-items: center;
|
|
710
|
-
cursor:pointer;
|
|
711
|
-
gap:8px;
|
|
877
|
+
cursor: pointer;
|
|
878
|
+
gap: 8px;
|
|
712
879
|
height: 48px;
|
|
713
|
-
color:var(--matchid-user-popover-color);
|
|
714
|
-
--icon-color:var(--matchid-user-popover-color);
|
|
715
|
-
|
|
880
|
+
color: var(--matchid-user-popover-color);
|
|
881
|
+
--icon-color: var(--matchid-user-popover-color);
|
|
882
|
+
|
|
883
|
+
.matchid-user-popover-item-content {
|
|
716
884
|
display: flex;
|
|
717
|
-
gap:8px;
|
|
885
|
+
gap: 8px;
|
|
718
886
|
align-items: center;
|
|
719
887
|
}
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
888
|
+
|
|
889
|
+
&:hover {
|
|
890
|
+
color: var(--matchid-user-popover-hover-color);
|
|
891
|
+
--icon-color: var(--matchid-user-popover-hover-color);
|
|
723
892
|
|
|
724
893
|
}
|
|
725
894
|
|
|
@@ -727,7 +896,7 @@ body {
|
|
|
727
896
|
}
|
|
728
897
|
}
|
|
729
898
|
|
|
730
|
-
.matchid-user-popover-divider{
|
|
899
|
+
.matchid-user-popover-divider {
|
|
731
900
|
height: 1px;
|
|
732
901
|
width: 100%;
|
|
733
902
|
background: var(--matchid-line);
|
|
@@ -750,10 +919,11 @@ body {
|
|
|
750
919
|
padding: 24px;
|
|
751
920
|
|
|
752
921
|
.matchid-wallet-content {
|
|
753
|
-
img{
|
|
922
|
+
img {
|
|
754
923
|
width: 128px;
|
|
755
924
|
height: 128px;
|
|
756
925
|
}
|
|
926
|
+
|
|
757
927
|
display: flex;
|
|
758
928
|
flex-direction: column;
|
|
759
929
|
align-items: center;
|
|
@@ -767,6 +937,7 @@ body {
|
|
|
767
937
|
}
|
|
768
938
|
|
|
769
939
|
}
|
|
770
|
-
|
|
940
|
+
|
|
941
|
+
.matchid-email-verify-field {
|
|
771
942
|
padding-right: 0;
|
|
772
943
|
}
|