@taskon/widget-react 0.0.1-beta.2 → 0.0.1-beta.4
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/README.md +56 -17
- package/dist/CommunityTaskList.css +1593 -1741
- package/dist/EligibilityInfo.css +1275 -582
- package/dist/LeaderboardWidget.css +355 -152
- package/dist/PageBuilder.css +0 -2
- package/dist/Quest.css +1140 -903
- package/dist/TaskOnProvider.css +50 -31
- package/dist/UserCenterWidget.css +108 -237
- package/dist/UserCenterWidget2.css +2016 -711
- package/dist/chunks/{CommunityTaskList-BlH1Wdd5.js → CommunityTaskList-C9Gv8KOF.js} +962 -827
- package/dist/chunks/{EligibilityInfo-C7GZ2G5u.js → EligibilityInfo-D-Fuy9GE.js} +1137 -449
- package/dist/chunks/{LeaderboardWidget-CmYfDeHV.js → LeaderboardWidget-BV2D2q1N.js} +15 -10
- package/dist/chunks/{PageBuilder-Bw0zSkFh.js → PageBuilder-DQoU4Mwf.js} +5 -5
- package/dist/chunks/{Quest-DKFZ-pPU.js → Quest-B5NyVr3o.js} +516 -325
- package/dist/chunks/{TaskOnProvider-BD6Vp2x8.js → TaskOnProvider-93UxARFo.js} +2 -207
- package/dist/chunks/{ThemeProvider-wnSXrNQb.js → ThemeProvider-CPI_roeh.js} +249 -57
- package/dist/chunks/{UserCenterWidget-Cw6h_5hT.js → UserCenterWidget-BRtigY_S.js} +206 -1002
- package/dist/chunks/UserCenterWidget-cADBSVg7.js +8358 -0
- package/dist/chunks/{WidgetShell-D_5OjvNZ.js → dynamic-import-helper-DwXlQC0S.js} +607 -40
- package/dist/chunks/useToast-CaRkylKe.js +304 -0
- package/dist/chunks/{usercenter-ja-uu-XfVF9.js → usercenter-ja-B2465c1O.js} +4 -10
- package/dist/chunks/{usercenter-ko-DYgUOVzd.js → usercenter-ko-xAEYxqLg.js} +4 -10
- package/dist/community-task.d.ts +34 -3
- package/dist/community-task.js +1 -1
- package/dist/core.d.ts +40 -3
- package/dist/core.js +9 -10
- package/dist/dynamic-import-helper.css +596 -289
- package/dist/index.d.ts +207 -10
- package/dist/index.js +21 -19
- package/dist/leaderboard.d.ts +8 -1
- package/dist/leaderboard.js +2 -2
- package/dist/page-builder.js +1 -1
- package/dist/quest.d.ts +8 -2
- package/dist/quest.js +1 -1
- package/dist/user-center.d.ts +20 -136
- package/dist/user-center.js +19 -236
- package/package.json +10 -2
- package/dist/TipPopover.css +0 -210
- package/dist/WidgetShell.css +0 -182
- package/dist/chunks/TipPopover-BrW8jo71.js +0 -2926
- package/dist/chunks/UserCenterWidget-BE329iS7.js +0 -3546
- package/dist/chunks/dynamic-import-helper-DxEFwm31.js +0 -537
- package/dist/chunks/useToast-B-wyO5zL.js +0 -93
- package/dist/chunks/useWidgetLocale-JDelxtt8.js +0 -74
|
@@ -1,59 +1,893 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Input 通用组件样式
|
|
3
|
+
* @description 复刻 Vue 版本 BaseInputPro.vue 样式
|
|
4
|
+
* 使用 taskon-input 命名空间
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* ==================== 输入框 ==================== */
|
|
8
|
+
|
|
9
|
+
.taskon-input {
|
|
10
|
+
width: 100%;
|
|
11
|
+
height: 40px;
|
|
12
|
+
padding: 0 12px;
|
|
13
|
+
border-radius: 6px;
|
|
14
|
+
border: 1px solid var(--taskon-color-border);
|
|
15
|
+
background: var(--taskon-color-bg-surface-subtle);
|
|
16
|
+
color: var(--taskon-color-text);
|
|
17
|
+
font-size: 14px;
|
|
18
|
+
line-height: 40px;
|
|
19
|
+
letter-spacing: 0.04em;
|
|
20
|
+
outline: none;
|
|
21
|
+
transition: border-color 0.2s;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.taskon-input:focus {
|
|
25
|
+
border-color: var(--taskon-color-primary);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.taskon-input:disabled {
|
|
29
|
+
opacity: 0.6;
|
|
30
|
+
cursor: not-allowed;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.taskon-input--error {
|
|
34
|
+
border-color: var(--taskon-color-error);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.taskon-input::placeholder {
|
|
38
|
+
color: var(--taskon-color-text-tertiary);
|
|
39
|
+
font-weight: 400;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* ==================== 包装器（用于 rightSlot 和 error） ==================== */
|
|
43
|
+
|
|
44
|
+
.taskon-input-wrapper {
|
|
45
|
+
width: 100%;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* ==================== 容器（包含输入框和右侧插槽） ==================== */
|
|
49
|
+
|
|
50
|
+
.taskon-input-container {
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
gap: 8px;
|
|
54
|
+
padding-right: 12px;
|
|
55
|
+
border-radius: 6px;
|
|
56
|
+
border: 1px solid var(--taskon-color-border);
|
|
57
|
+
background: var(--taskon-color-bg-surface-subtle);
|
|
58
|
+
transition: border-color 0.2s;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.taskon-input-container:focus-within {
|
|
62
|
+
border-color: var(--taskon-color-primary);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.taskon-input-container--error {
|
|
66
|
+
border-color: var(--taskon-color-error);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* 容器内的输入框样式重置 */
|
|
70
|
+
|
|
71
|
+
.taskon-input--in-container {
|
|
72
|
+
flex: 1;
|
|
73
|
+
border: none;
|
|
74
|
+
background: transparent;
|
|
75
|
+
border-radius: 0;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.taskon-input--in-container:focus {
|
|
79
|
+
border-color: transparent;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* ==================== 右侧插槽 ==================== */
|
|
83
|
+
|
|
84
|
+
.taskon-input-slot {
|
|
85
|
+
flex-shrink: 0;
|
|
86
|
+
display: flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* MAX 按钮样式（通用样式） */
|
|
91
|
+
|
|
92
|
+
.taskon-input-slot button {
|
|
93
|
+
padding: 4px 8px;
|
|
94
|
+
font-size: 12px;
|
|
95
|
+
font-weight: 600;
|
|
96
|
+
color: var(--taskon-color-primary);
|
|
97
|
+
background: transparent;
|
|
98
|
+
border: 1px solid var(--taskon-color-primary);
|
|
99
|
+
border-radius: 4px;
|
|
100
|
+
cursor: pointer;
|
|
101
|
+
transition: all 0.2s;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.taskon-input-slot button:hover:not(:disabled) {
|
|
105
|
+
background: var(--taskon-color-primary-bg);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.taskon-input-slot button:disabled {
|
|
109
|
+
opacity: 0.5;
|
|
110
|
+
cursor: not-allowed;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* ==================== 错误信息 ==================== */
|
|
114
|
+
|
|
115
|
+
.taskon-input-error {
|
|
116
|
+
margin: 4px 0 0 0;
|
|
117
|
+
font-size: 12px;
|
|
118
|
+
color: var(--taskon-color-error);
|
|
119
|
+
line-height: 1.4;
|
|
120
|
+
}
|
|
121
|
+
/**
|
|
122
|
+
* ClaimNftDialog 样式
|
|
123
|
+
*/
|
|
124
|
+
|
|
125
|
+
.taskon-claim-dialog {
|
|
126
|
+
max-width: 400px;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.taskon-claim-dialog-content {
|
|
130
|
+
display: flex;
|
|
131
|
+
flex-direction: column;
|
|
132
|
+
align-items: center;
|
|
133
|
+
padding: 24px;
|
|
134
|
+
text-align: center;
|
|
135
|
+
color: var(--taskon-color-text);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* NFT 图片 */
|
|
139
|
+
|
|
140
|
+
.taskon-claim-dialog-nft {
|
|
141
|
+
margin-bottom: 20px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.taskon-claim-dialog-nft__image {
|
|
145
|
+
width: 120px;
|
|
146
|
+
height: 120px;
|
|
147
|
+
border-radius: 12px;
|
|
148
|
+
object-fit: cover;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* 状态图标区域 */
|
|
152
|
+
|
|
153
|
+
.taskon-claim-dialog-status {
|
|
154
|
+
margin-bottom: 16px;
|
|
155
|
+
min-height: 48px;
|
|
156
|
+
display: flex;
|
|
157
|
+
align-items: center;
|
|
158
|
+
justify-content: center;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
/* 加载动画 */
|
|
162
|
+
|
|
163
|
+
.taskon-claim-dialog-spinner {
|
|
164
|
+
width: 48px;
|
|
165
|
+
height: 48px;
|
|
166
|
+
position: relative;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.taskon-claim-dialog-spinner__circle {
|
|
170
|
+
width: 100%;
|
|
171
|
+
height: 100%;
|
|
172
|
+
border: 3px solid var(--taskon-color-border-secondary);
|
|
173
|
+
border-top-color: var(--taskon-color-primary);
|
|
174
|
+
border-radius: 50%;
|
|
175
|
+
animation: taskon-claim-spin 0.8s linear infinite;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
@keyframes taskon-claim-spin {
|
|
179
|
+
to {
|
|
180
|
+
transform: rotate(360deg);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* 状态图标 */
|
|
185
|
+
|
|
186
|
+
.taskon-claim-dialog-icon {
|
|
187
|
+
width: 48px;
|
|
188
|
+
height: 48px;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.taskon-claim-dialog-icon--success {
|
|
192
|
+
color: var(--taskon-color-success);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.taskon-claim-dialog-icon--error {
|
|
196
|
+
color: var(--taskon-color-error);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/* 状态消息 */
|
|
200
|
+
|
|
201
|
+
.taskon-claim-dialog-message {
|
|
202
|
+
font-size: 16px;
|
|
203
|
+
font-weight: 500;
|
|
204
|
+
color: var(--taskon-color-text);
|
|
205
|
+
margin: 0 0 16px;
|
|
206
|
+
line-height: 1.5;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
/* 交易 Hash */
|
|
210
|
+
|
|
211
|
+
.taskon-claim-dialog-tx {
|
|
212
|
+
display: flex;
|
|
213
|
+
align-items: center;
|
|
214
|
+
gap: 8px;
|
|
215
|
+
padding: 8px 16px;
|
|
216
|
+
background: var(--taskon-color-bg-surface-subtle);
|
|
217
|
+
border-radius: 8px;
|
|
218
|
+
margin-bottom: 20px;
|
|
219
|
+
font-size: 14px;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.taskon-claim-dialog-tx__label {
|
|
223
|
+
color: var(--taskon-color-text-tertiary);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.taskon-claim-dialog-tx__hash {
|
|
227
|
+
color: var(--taskon-color-link);
|
|
228
|
+
font-family: monospace;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
/* 操作按钮 */
|
|
232
|
+
|
|
233
|
+
.taskon-claim-dialog-actions {
|
|
234
|
+
display: flex;
|
|
235
|
+
gap: 12px;
|
|
236
|
+
width: 100%;
|
|
237
|
+
justify-content: center;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.taskon-claim-dialog-btn {
|
|
241
|
+
padding: 10px 24px;
|
|
242
|
+
border-radius: 8px;
|
|
243
|
+
font-size: 14px;
|
|
244
|
+
font-weight: 500;
|
|
245
|
+
cursor: pointer;
|
|
246
|
+
transition: all 0.2s ease;
|
|
247
|
+
border: none;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.taskon-claim-dialog-btn--primary {
|
|
251
|
+
background: var(--taskon-color-primary);
|
|
252
|
+
color: var(--taskon-color-text-on-primary);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.taskon-claim-dialog-btn--primary:hover {
|
|
256
|
+
filter: brightness(0.95);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.taskon-claim-dialog-btn--secondary {
|
|
260
|
+
background: transparent;
|
|
261
|
+
color: var(--taskon-color-text);
|
|
262
|
+
border: 1px solid var(--taskon-color-border);
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.taskon-claim-dialog-btn--secondary:hover {
|
|
266
|
+
background: var(--taskon-color-bg-surface-strong);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
@media (max-width: 750px) {
|
|
270
|
+
.taskon-claim-dialog {
|
|
271
|
+
max-width: 100%;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.taskon-claim-dialog-content {
|
|
275
|
+
padding: 16px;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.taskon-claim-dialog-nft {
|
|
279
|
+
margin-bottom: 16px;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.taskon-claim-dialog-nft__image {
|
|
283
|
+
width: 96px;
|
|
284
|
+
height: 96px;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.taskon-claim-dialog-status {
|
|
288
|
+
margin-bottom: 12px;
|
|
289
|
+
min-height: 40px;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.taskon-claim-dialog-spinner,
|
|
293
|
+
.taskon-claim-dialog-icon {
|
|
294
|
+
width: 40px;
|
|
295
|
+
height: 40px;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.taskon-claim-dialog-message {
|
|
299
|
+
font-size: 14px;
|
|
300
|
+
margin-bottom: 12px;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.taskon-claim-dialog-tx {
|
|
304
|
+
align-items: flex-start;
|
|
305
|
+
flex-direction: column;
|
|
306
|
+
gap: 4px;
|
|
307
|
+
margin-bottom: 16px;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.taskon-claim-dialog-tx__hash {
|
|
311
|
+
display: block;
|
|
312
|
+
max-width: 100%;
|
|
313
|
+
overflow-wrap: anywhere;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.taskon-claim-dialog-actions {
|
|
317
|
+
flex-direction: column;
|
|
318
|
+
gap: 8px;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.taskon-claim-dialog-btn {
|
|
322
|
+
width: 100%;
|
|
323
|
+
padding: 9px 12px;
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
/**
|
|
327
|
+
* PendingTxDialog 样式
|
|
328
|
+
*/
|
|
329
|
+
|
|
330
|
+
.taskon-pending-dialog {
|
|
331
|
+
max-width: 460px;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.taskon-pending-dialog-content {
|
|
335
|
+
display: flex;
|
|
336
|
+
flex-direction: column;
|
|
337
|
+
gap: 16px;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.taskon-pending-dialog-title {
|
|
341
|
+
margin: 0;
|
|
342
|
+
font-size: 16px;
|
|
343
|
+
line-height: 24px;
|
|
344
|
+
color: var(--taskon-color-text);
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.taskon-pending-dialog-desc {
|
|
348
|
+
margin: 0;
|
|
349
|
+
font-size: 14px;
|
|
350
|
+
line-height: 20px;
|
|
351
|
+
color: var(--taskon-color-text-tertiary);
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.taskon-pending-dialog-hash-wrap {
|
|
355
|
+
display: flex;
|
|
356
|
+
flex-wrap: wrap;
|
|
357
|
+
align-items: center;
|
|
358
|
+
gap: 8px;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
.taskon-pending-dialog-hash-label {
|
|
362
|
+
font-size: 14px;
|
|
363
|
+
color: var(--taskon-color-text-tertiary);
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.taskon-pending-dialog-hash-link,
|
|
367
|
+
.taskon-pending-dialog-hash-value {
|
|
368
|
+
font-size: 14px;
|
|
369
|
+
color: var(--taskon-color-link);
|
|
370
|
+
text-decoration: underline;
|
|
371
|
+
background: none;
|
|
372
|
+
border: none;
|
|
373
|
+
padding: 0;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.taskon-pending-dialog-hash-link {
|
|
377
|
+
cursor: pointer;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.taskon-pending-dialog-notice-list {
|
|
381
|
+
margin: 0;
|
|
382
|
+
padding-left: 18px;
|
|
383
|
+
list-style: disc;
|
|
384
|
+
display: flex;
|
|
385
|
+
flex-direction: column;
|
|
386
|
+
gap: 10px;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.taskon-pending-dialog-notice-item {
|
|
390
|
+
font-size: 12px;
|
|
391
|
+
line-height: 18px;
|
|
392
|
+
color: var(--taskon-color-link);
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.taskon-pending-dialog-receive-address {
|
|
396
|
+
margin-top: 4px;
|
|
397
|
+
word-break: break-all;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.taskon-pending-dialog-actions {
|
|
401
|
+
display: flex;
|
|
402
|
+
justify-content: flex-end;
|
|
403
|
+
gap: 12px;
|
|
404
|
+
margin-top: 8px;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.taskon-pending-dialog-btn {
|
|
408
|
+
padding: 10px 18px;
|
|
409
|
+
border-radius: 8px;
|
|
410
|
+
border: none;
|
|
411
|
+
font-size: 14px;
|
|
412
|
+
font-weight: 500;
|
|
413
|
+
cursor: pointer;
|
|
414
|
+
transition: all 0.2s ease;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.taskon-pending-dialog-btn--primary {
|
|
418
|
+
background: var(--taskon-color-primary);
|
|
419
|
+
color: var(--taskon-color-text-on-primary);
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.taskon-pending-dialog-btn--primary:hover {
|
|
423
|
+
opacity: 0.92;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.taskon-pending-dialog-btn--secondary {
|
|
427
|
+
background: transparent;
|
|
428
|
+
color: var(--taskon-color-text);
|
|
429
|
+
border: 1px solid var(--taskon-color-border);
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
.taskon-pending-dialog-btn--secondary:hover {
|
|
433
|
+
background: var(--taskon-color-bg-surface-strong);
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
@media (max-width: 750px) {
|
|
437
|
+
.taskon-pending-dialog {
|
|
438
|
+
max-width: 100%;
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
.taskon-pending-dialog-content {
|
|
442
|
+
gap: 12px;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.taskon-pending-dialog-title {
|
|
446
|
+
font-size: 15px;
|
|
447
|
+
line-height: 22px;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.taskon-pending-dialog-desc,
|
|
451
|
+
.taskon-pending-dialog-hash-label,
|
|
452
|
+
.taskon-pending-dialog-hash-link,
|
|
453
|
+
.taskon-pending-dialog-hash-value {
|
|
454
|
+
font-size: 13px;
|
|
455
|
+
line-height: 18px;
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.taskon-pending-dialog-notice-item {
|
|
459
|
+
font-size: 11px;
|
|
460
|
+
line-height: 16px;
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
.taskon-pending-dialog-actions {
|
|
464
|
+
align-items: stretch;
|
|
465
|
+
flex-direction: column;
|
|
466
|
+
gap: 8px;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
.taskon-pending-dialog-btn {
|
|
470
|
+
width: 100%;
|
|
471
|
+
padding: 9px 12px;
|
|
472
|
+
}
|
|
473
|
+
}
|
|
474
|
+
/**
|
|
475
|
+
* BindWalletDialog 组件样式
|
|
476
|
+
* 使用 taskon-bind-wallet-* 命名空间
|
|
477
|
+
* 与 taskon-website 保持一致
|
|
478
|
+
*/
|
|
479
|
+
|
|
480
|
+
/*
|
|
481
|
+
* Responsive base styles
|
|
482
|
+
*
|
|
483
|
+
* Keep mobile breakpoints and fallback patterns centralized here.
|
|
484
|
+
* Components should reuse these mixins instead of duplicating query logic.
|
|
485
|
+
*/
|
|
486
|
+
|
|
487
|
+
/*
|
|
488
|
+
* Desktop-up mixin:
|
|
489
|
+
* 1) Enable desktop enhancement in wider containers
|
|
490
|
+
* 2) Keep viewport media query as fallback
|
|
491
|
+
*/
|
|
492
|
+
|
|
493
|
+
/* ==================== 容器 ==================== */
|
|
494
|
+
|
|
495
|
+
.taskon-bind-wallet-dialog {
|
|
496
|
+
position: relative;
|
|
497
|
+
display: flex;
|
|
498
|
+
flex-direction: column;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
/* ==================== 标题 ==================== */
|
|
502
|
+
|
|
503
|
+
.taskon-bind-wallet-dialog-title {
|
|
504
|
+
margin: 0;
|
|
505
|
+
font-size: 22px;
|
|
506
|
+
font-weight: 700;
|
|
507
|
+
line-height: 28px;
|
|
508
|
+
color: var(--taskon-color-text);
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
/* ==================== 链类型标签 ==================== */
|
|
512
|
+
|
|
513
|
+
.taskon-bind-wallet-dialog-chain-label {
|
|
514
|
+
margin-top: var(--taskon-spacing-md);
|
|
515
|
+
font-size: 16px;
|
|
516
|
+
font-weight: 500;
|
|
517
|
+
line-height: 20px;
|
|
518
|
+
color: var(--taskon-color-text);
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
/* ==================== 钱包网格 ==================== */
|
|
522
|
+
|
|
523
|
+
.taskon-bind-wallet-dialog-grid {
|
|
524
|
+
margin-top: var(--taskon-spacing-sm);
|
|
525
|
+
display: grid;
|
|
526
|
+
grid-template-columns: 1fr;
|
|
527
|
+
gap: var(--taskon-spacing-md);
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
/* ==================== 钱包项 ==================== */
|
|
531
|
+
|
|
532
|
+
.taskon-bind-wallet-item {
|
|
533
|
+
position: relative;
|
|
534
|
+
display: flex;
|
|
535
|
+
align-items: center;
|
|
536
|
+
justify-content: center;
|
|
537
|
+
height: 50px;
|
|
538
|
+
padding: 0 12px;
|
|
539
|
+
|
|
540
|
+
background: transparent;
|
|
541
|
+
border: 1px solid var(--taskon-color-border);
|
|
542
|
+
border-radius: 8px;
|
|
543
|
+
cursor: pointer;
|
|
544
|
+
transition: all 0.2s ease;
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
.taskon-bind-wallet-item:hover,
|
|
548
|
+
.taskon-bind-wallet-item:focus {
|
|
549
|
+
background: var(--taskon-color-bg-surface-strong);
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
.taskon-bind-wallet-item:active {
|
|
553
|
+
transform: scale(0.98);
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
/* 钱包图标 */
|
|
557
|
+
|
|
558
|
+
.taskon-bind-wallet-item-icon {
|
|
559
|
+
display: flex;
|
|
560
|
+
align-items: center;
|
|
561
|
+
justify-content: center;
|
|
562
|
+
width: 24px;
|
|
563
|
+
height: 24px;
|
|
564
|
+
flex-shrink: 0;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
.taskon-bind-wallet-item-icon svg {
|
|
568
|
+
width: 24px;
|
|
569
|
+
height: 24px;
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
/* 钱包名称 */
|
|
573
|
+
|
|
574
|
+
.taskon-bind-wallet-item-name {
|
|
575
|
+
margin-left: 10px;
|
|
576
|
+
font-size: 18px;
|
|
577
|
+
font-weight: 600;
|
|
578
|
+
line-height: 20px;
|
|
579
|
+
color: var(--taskon-color-text);
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
/* 已安装标签 */
|
|
583
|
+
|
|
584
|
+
.taskon-bind-wallet-item-installed {
|
|
585
|
+
position: absolute;
|
|
586
|
+
right: 0;
|
|
587
|
+
bottom: 0;
|
|
588
|
+
padding: 4px 8px;
|
|
589
|
+
font-size: 10px;
|
|
590
|
+
line-height: 14px;
|
|
591
|
+
color: var(--taskon-color-secondary);
|
|
592
|
+
background: var(--taskon-color-secondary-bg);
|
|
593
|
+
border-radius: 8px 0;
|
|
594
|
+
transform-origin: bottom right;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
/* ==================== 连接中状态 ==================== */
|
|
598
|
+
|
|
599
|
+
.taskon-bind-wallet-item--connecting {
|
|
600
|
+
opacity: 0.7;
|
|
601
|
+
cursor: wait;
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
.taskon-bind-wallet-item--connecting:hover,
|
|
605
|
+
.taskon-bind-wallet-item--connecting:focus {
|
|
606
|
+
background: transparent;
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
/* ==================== 禁用状态 ==================== */
|
|
610
|
+
|
|
611
|
+
.taskon-bind-wallet-item--disabled {
|
|
612
|
+
opacity: 0.5;
|
|
613
|
+
cursor: not-allowed;
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
.taskon-bind-wallet-item--disabled:hover,
|
|
617
|
+
.taskon-bind-wallet-item--disabled:focus {
|
|
618
|
+
background: transparent;
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
.taskon-bind-wallet-item--disabled:active {
|
|
622
|
+
transform: none;
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
/* 不可用标签 */
|
|
626
|
+
|
|
627
|
+
.taskon-bind-wallet-item-unavailable {
|
|
628
|
+
position: absolute;
|
|
629
|
+
right: 0;
|
|
630
|
+
bottom: 0;
|
|
631
|
+
padding: 4px 8px;
|
|
632
|
+
font-size: 10px;
|
|
633
|
+
line-height: 14px;
|
|
634
|
+
color: var(--taskon-color-text-tertiary);
|
|
635
|
+
background: var(--taskon-color-bg-surface-subtle);
|
|
636
|
+
border-radius: 8px 0;
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
/* 连接中 spinner */
|
|
640
|
+
|
|
641
|
+
.taskon-bind-wallet-item-connecting {
|
|
642
|
+
position: absolute;
|
|
643
|
+
right: 8px;
|
|
644
|
+
display: flex;
|
|
645
|
+
align-items: center;
|
|
646
|
+
justify-content: center;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
.taskon-bind-wallet-spinner {
|
|
650
|
+
width: 16px;
|
|
651
|
+
height: 16px;
|
|
652
|
+
color: var(--taskon-color-primary);
|
|
653
|
+
animation: taskon-bind-wallet-spin 1s linear infinite;
|
|
654
|
+
}
|
|
655
|
+
|
|
656
|
+
@keyframes taskon-bind-wallet-spin {
|
|
657
|
+
from {
|
|
658
|
+
transform: rotate(0deg);
|
|
659
|
+
}
|
|
660
|
+
to {
|
|
661
|
+
transform: rotate(360deg);
|
|
662
|
+
}
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
/* ==================== 提示文字 ==================== */
|
|
666
|
+
|
|
667
|
+
.taskon-bind-wallet-dialog-tip {
|
|
668
|
+
margin: var(--taskon-spacing-md) 0 0;
|
|
669
|
+
font-size: 14px;
|
|
670
|
+
line-height: 1.5;
|
|
671
|
+
color: var(--taskon-color-text-tertiary);
|
|
672
|
+
text-align: center;
|
|
673
|
+
}
|
|
674
|
+
|
|
675
|
+
/* ==================== 连接中遮层 ==================== */
|
|
676
|
+
|
|
677
|
+
.taskon-bind-wallet-loading-overlay {
|
|
678
|
+
position: absolute;
|
|
679
|
+
/* 使用负值覆盖 Dialog body 的 padding */
|
|
680
|
+
inset: -20px;
|
|
681
|
+
display: flex;
|
|
682
|
+
flex-direction: column;
|
|
683
|
+
align-items: center;
|
|
684
|
+
justify-content: center;
|
|
685
|
+
background: var(--taskon-color-bg-mask);
|
|
686
|
+
backdrop-filter: blur(4px);
|
|
687
|
+
border-radius: 12px;
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
.taskon-bind-wallet-loading-spinner {
|
|
691
|
+
width: 40px;
|
|
692
|
+
height: 40px;
|
|
693
|
+
color: var(--taskon-color-text-secondary);
|
|
694
|
+
animation: taskon-bind-wallet-spin 1s linear infinite;
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
.taskon-bind-wallet-loading-text {
|
|
698
|
+
margin: 20px 0 0;
|
|
699
|
+
max-width: 60%;
|
|
700
|
+
font-size: 16px;
|
|
701
|
+
line-height: 20px;
|
|
702
|
+
color: var(--taskon-color-text-secondary);
|
|
703
|
+
text-align: center;
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
@supports (container-type: inline-size) {
|
|
707
|
+
@container (min-width: 751px) {
|
|
708
|
+
.taskon-bind-wallet-dialog-chain-label {
|
|
709
|
+
margin-top: 20px;
|
|
710
|
+
}
|
|
711
|
+
|
|
712
|
+
.taskon-bind-wallet-dialog-grid {
|
|
713
|
+
margin-top: 10px;
|
|
714
|
+
grid-template-columns: 1fr 1fr;
|
|
715
|
+
gap: 18px;
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
.taskon-bind-wallet-dialog-tip {
|
|
719
|
+
margin-top: 20px;
|
|
720
|
+
}
|
|
721
|
+
|
|
722
|
+
.taskon-bind-wallet-loading-overlay {
|
|
723
|
+
inset: -24px;
|
|
724
|
+
border-radius: 16px;
|
|
725
|
+
}
|
|
726
|
+
}
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
@supports not (container-type: inline-size) {
|
|
730
|
+
@media (min-width: 751px) {
|
|
731
|
+
.taskon-bind-wallet-dialog-chain-label {
|
|
732
|
+
margin-top: 20px;
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.taskon-bind-wallet-dialog-grid {
|
|
736
|
+
margin-top: 10px;
|
|
737
|
+
grid-template-columns: 1fr 1fr;
|
|
738
|
+
gap: 18px;
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
.taskon-bind-wallet-dialog-tip {
|
|
742
|
+
margin-top: 20px;
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
.taskon-bind-wallet-loading-overlay {
|
|
746
|
+
inset: -24px;
|
|
747
|
+
border-radius: 16px;
|
|
748
|
+
}
|
|
749
|
+
}
|
|
750
|
+
}
|
|
751
|
+
/**
|
|
752
|
+
* TipPopover 组件样式
|
|
753
|
+
* 设计原则：组件内部不包含 margin，需要间距由外部控制
|
|
754
|
+
*/
|
|
755
|
+
|
|
756
|
+
/*
|
|
757
|
+
* Responsive base styles
|
|
758
|
+
*
|
|
759
|
+
* Keep mobile breakpoints and fallback patterns centralized here.
|
|
760
|
+
* Components should reuse these mixins instead of duplicating query logic.
|
|
761
|
+
*/
|
|
762
|
+
|
|
763
|
+
/*
|
|
764
|
+
* Desktop-up mixin:
|
|
765
|
+
* 1) Enable desktop enhancement in wider containers
|
|
766
|
+
* 2) Keep viewport media query as fallback
|
|
767
|
+
*/
|
|
768
|
+
|
|
769
|
+
.taskon-tip-popover-trigger {
|
|
770
|
+
display: inline-flex;
|
|
771
|
+
align-items: center;
|
|
772
|
+
justify-content: center;
|
|
773
|
+
padding: 0;
|
|
774
|
+
border: none;
|
|
775
|
+
background: transparent;
|
|
776
|
+
cursor: pointer;
|
|
777
|
+
color: var(--taskon-color-text-tertiary);
|
|
778
|
+
outline: none;
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
.taskon-tip-popover-trigger:hover,
|
|
782
|
+
.taskon-tip-popover-trigger:focus {
|
|
783
|
+
color: var(--taskon-color-text-tertiary);
|
|
784
|
+
background: transparent;
|
|
785
|
+
outline: none;
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
/* Custom children trigger - reset button styles */
|
|
789
|
+
|
|
790
|
+
.taskon-tip-popover-trigger--custom {
|
|
791
|
+
cursor: pointer;
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
.taskon-tip-popover-content {
|
|
795
|
+
max-width: 60vw;
|
|
796
|
+
padding: 12px 16px;
|
|
797
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
798
|
+
border: none;
|
|
799
|
+
outline: none;
|
|
800
|
+
background: var(--taskon-color-bg-floating);
|
|
801
|
+
color: var(--taskon-color-text);
|
|
802
|
+
font-size: 13px;
|
|
803
|
+
line-height: 1.5;
|
|
804
|
+
box-shadow: 0 4px 16px var(--taskon-color-bg-mask);
|
|
805
|
+
/* z-index 需要大于 Dialog (9999) 才能在弹窗中正常显示 */
|
|
806
|
+
z-index: 10000;
|
|
807
|
+
animation: taskon-tip-popover-fade-in 0.15s ease;
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
.taskon-tip-popover-content:focus {
|
|
811
|
+
outline: none;
|
|
812
|
+
}
|
|
813
|
+
|
|
814
|
+
.taskon-tip-popover-arrow {
|
|
815
|
+
fill: var(--taskon-color-bg-floating);
|
|
816
|
+
}
|
|
817
|
+
|
|
818
|
+
@keyframes taskon-tip-popover-fade-in {
|
|
819
|
+
from {
|
|
820
|
+
opacity: 0;
|
|
821
|
+
transform: scale(0.96);
|
|
822
|
+
}
|
|
823
|
+
to {
|
|
824
|
+
opacity: 1;
|
|
825
|
+
transform: scale(1);
|
|
826
|
+
}
|
|
827
|
+
}
|
|
828
|
+
|
|
829
|
+
/* Desktop 增强 */
|
|
830
|
+
|
|
831
|
+
@supports (container-type: inline-size) {
|
|
832
|
+
@container (min-width: 751px) {
|
|
833
|
+
.taskon-tip-popover-content {
|
|
834
|
+
max-width: 266px;
|
|
835
|
+
}
|
|
836
|
+
}
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
@supports not (container-type: inline-size) {
|
|
840
|
+
@media (min-width: 751px) {
|
|
841
|
+
.taskon-tip-popover-content {
|
|
842
|
+
max-width: 266px;
|
|
843
|
+
}
|
|
844
|
+
}
|
|
845
|
+
}
|
|
1
846
|
/**
|
|
2
847
|
* Select 组件样式
|
|
3
848
|
*
|
|
4
849
|
* 基于 Vue ProSelect 组件样式翻译
|
|
5
|
-
* 使用 taskon-select
|
|
850
|
+
* 使用 taskon-select 命名空间避免样式冲突。
|
|
851
|
+
*
|
|
852
|
+
* 主题规范：
|
|
853
|
+
* - 不再定义组件私有主题变量
|
|
854
|
+
* - 统一使用 ThemeProvider 输出的通用 --taskon-* 变量
|
|
855
|
+
*/
|
|
856
|
+
/*
|
|
857
|
+
* Responsive base styles
|
|
858
|
+
*
|
|
859
|
+
* Keep mobile breakpoints and fallback patterns centralized here.
|
|
860
|
+
* Components should reuse these mixins instead of duplicating query logic.
|
|
861
|
+
*/
|
|
862
|
+
/*
|
|
863
|
+
* Desktop-up mixin:
|
|
864
|
+
* 1) Enable desktop enhancement in wider containers
|
|
865
|
+
* 2) Keep viewport media query as fallback
|
|
6
866
|
*/
|
|
7
|
-
|
|
8
867
|
/* ========== 根容器 ========== */
|
|
9
868
|
.taskon-select {
|
|
10
|
-
--select-height: 44px;
|
|
11
|
-
--select-min-width: 120px;
|
|
12
|
-
--select-padding: 0 12px;
|
|
13
|
-
--select-background: rgba(255, 255, 255, 0.05);
|
|
14
|
-
--select-hover-background: rgba(255, 255, 255, 0.08);
|
|
15
|
-
--select-focus-background: rgba(255, 255, 255, 0.08);
|
|
16
|
-
--select-color: #fff;
|
|
17
|
-
--select-placeholder-color: rgba(255, 255, 255, 0.5);
|
|
18
|
-
--select-border: 1px solid rgba(255, 255, 255, 0.1);
|
|
19
|
-
--select-hover-border: 1px solid rgba(255, 255, 255, 0.2);
|
|
20
|
-
--select-focus-border: 1px solid rgba(255, 255, 255, 0.3);
|
|
21
|
-
--select-border-radius: 8px;
|
|
22
|
-
--select-font-size: 14px;
|
|
23
|
-
--select-line-height: 20px;
|
|
24
|
-
--select-z-index: 9999;
|
|
25
|
-
--select-menu-background: #343a3d;
|
|
26
|
-
--select-menu-border: 1px solid rgba(255, 255, 255, 0.1);
|
|
27
|
-
--select-menu-border-radius: 8px;
|
|
28
|
-
--select-option-padding: 15px 20px;
|
|
29
|
-
--select-option-hover-background: #424a4d;
|
|
30
|
-
--select-option-color: #fff;
|
|
31
|
-
--select-option-desc-color: rgba(255, 255, 255, 0.6);
|
|
32
|
-
|
|
33
869
|
position: relative;
|
|
34
870
|
display: inline-block;
|
|
35
871
|
width: 100%;
|
|
36
872
|
}
|
|
37
|
-
|
|
38
873
|
/* ========== 禁用状态 ========== */
|
|
39
874
|
.taskon-select--disabled {
|
|
40
875
|
opacity: 0.6;
|
|
41
876
|
cursor: not-allowed;
|
|
42
877
|
}
|
|
43
|
-
|
|
44
878
|
/* ========== 触发器 ========== */
|
|
45
879
|
.taskon-select__trigger {
|
|
46
880
|
display: flex;
|
|
47
881
|
align-items: center;
|
|
48
|
-
height:
|
|
49
|
-
min-width:
|
|
50
|
-
padding:
|
|
51
|
-
background: var(--
|
|
52
|
-
color: var(--
|
|
53
|
-
font-size:
|
|
54
|
-
line-height:
|
|
55
|
-
border: var(--
|
|
56
|
-
border-radius: var(--
|
|
882
|
+
height: 40px;
|
|
883
|
+
min-width: 120px;
|
|
884
|
+
padding: 0 12px;
|
|
885
|
+
background: var(--taskon-color-bg-surface-subtle);
|
|
886
|
+
color: var(--taskon-color-text);
|
|
887
|
+
font-size: 13px;
|
|
888
|
+
line-height: 20px;
|
|
889
|
+
border: 1px solid var(--taskon-color-border);
|
|
890
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
57
891
|
cursor: pointer;
|
|
58
892
|
transition:
|
|
59
893
|
background 0.2s,
|
|
@@ -61,68 +895,63 @@
|
|
|
61
895
|
outline: none;
|
|
62
896
|
user-select: none;
|
|
63
897
|
}
|
|
64
|
-
|
|
65
898
|
.taskon-select__trigger:hover:not(.taskon-select__trigger--disabled) {
|
|
66
|
-
background: var(--
|
|
67
|
-
border: var(--
|
|
899
|
+
background: var(--taskon-color-bg-surface);
|
|
900
|
+
border-color: var(--taskon-color-border-secondary);
|
|
68
901
|
}
|
|
69
|
-
|
|
70
902
|
.taskon-select__trigger:focus:not(.taskon-select__trigger--disabled) {
|
|
71
|
-
background: var(--
|
|
72
|
-
border: var(--
|
|
903
|
+
background: var(--taskon-color-bg-surface);
|
|
904
|
+
border-color: var(--taskon-color-border-secondary);
|
|
73
905
|
}
|
|
74
|
-
|
|
75
906
|
.taskon-select__trigger--open {
|
|
76
|
-
background: var(--
|
|
77
|
-
border: var(--
|
|
907
|
+
background: var(--taskon-color-bg-surface);
|
|
908
|
+
border-color: var(--taskon-color-border-secondary);
|
|
78
909
|
}
|
|
79
|
-
|
|
80
910
|
.taskon-select__trigger--disabled {
|
|
81
911
|
cursor: not-allowed;
|
|
82
912
|
opacity: 0.6;
|
|
83
913
|
}
|
|
84
|
-
|
|
85
914
|
.taskon-select__trigger--error {
|
|
86
|
-
border-color:
|
|
915
|
+
border-color: var(--taskon-color-error) !important;
|
|
87
916
|
}
|
|
88
|
-
|
|
89
917
|
/* 深色主题 */
|
|
90
918
|
.taskon-select__trigger--dark {
|
|
91
|
-
|
|
92
|
-
--select-hover-background: #343a3d;
|
|
93
|
-
--select-focus-background: #343a3d;
|
|
919
|
+
background: var(--taskon-color-bg-surface);
|
|
94
920
|
}
|
|
95
|
-
|
|
96
921
|
/* 浅色主题 */
|
|
97
922
|
.taskon-select__trigger--light {
|
|
98
|
-
|
|
99
|
-
--
|
|
100
|
-
--
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
--
|
|
104
|
-
--
|
|
105
|
-
|
|
923
|
+
background: var(--taskon-color-bg-surface);
|
|
924
|
+
color: var(--taskon-color-text);
|
|
925
|
+
border-color: var(--taskon-color-border);
|
|
926
|
+
}
|
|
927
|
+
.taskon-select__trigger--light:hover:not(.taskon-select__trigger--disabled) {
|
|
928
|
+
background: var(--taskon-color-bg-surface-strong);
|
|
929
|
+
border-color: var(--taskon-color-border-secondary);
|
|
930
|
+
}
|
|
931
|
+
.taskon-select__trigger--light:focus:not(.taskon-select__trigger--disabled),
|
|
932
|
+
.taskon-select__trigger--light.taskon-select__trigger--open {
|
|
933
|
+
background: var(--taskon-color-bg-surface-strong);
|
|
934
|
+
border-color: var(--taskon-color-border-secondary);
|
|
106
935
|
}
|
|
107
|
-
|
|
108
936
|
/* 卡片主题 */
|
|
109
937
|
.taskon-select__trigger--card {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
938
|
+
background: transparent;
|
|
939
|
+
border: none;
|
|
940
|
+
}
|
|
941
|
+
.taskon-select__trigger--card:hover:not(.taskon-select__trigger--disabled),
|
|
942
|
+
.taskon-select__trigger--card:focus:not(.taskon-select__trigger--disabled),
|
|
943
|
+
.taskon-select__trigger--card.taskon-select__trigger--open {
|
|
944
|
+
background: var(--taskon-color-bg-surface-subtle);
|
|
945
|
+
border: none;
|
|
115
946
|
}
|
|
116
|
-
|
|
117
947
|
/* ========== 触发器图标 ========== */
|
|
118
948
|
.taskon-select__trigger-icon {
|
|
119
|
-
width:
|
|
120
|
-
height:
|
|
949
|
+
width: 16px;
|
|
950
|
+
height: 16px;
|
|
121
951
|
border-radius: 50%;
|
|
122
|
-
margin-right:
|
|
952
|
+
margin-right: 8px;
|
|
123
953
|
flex-shrink: 0;
|
|
124
954
|
}
|
|
125
|
-
|
|
126
955
|
/* ========== 触发器文本 ========== */
|
|
127
956
|
.taskon-select__trigger-text {
|
|
128
957
|
flex: 1;
|
|
@@ -131,107 +960,80 @@
|
|
|
131
960
|
white-space: nowrap;
|
|
132
961
|
text-align: left;
|
|
133
962
|
}
|
|
134
|
-
|
|
135
963
|
/* ========== 触发器占位符 ========== */
|
|
136
964
|
.taskon-select__trigger-placeholder {
|
|
137
965
|
flex: 1;
|
|
138
|
-
color: var(--
|
|
966
|
+
color: var(--taskon-color-text-secondary);
|
|
139
967
|
text-align: left;
|
|
140
968
|
}
|
|
141
|
-
|
|
142
969
|
/* ========== 展开图标 ========== */
|
|
143
970
|
.taskon-select__unfold-icon {
|
|
144
|
-
margin-left:
|
|
145
|
-
color:
|
|
971
|
+
margin-left: 8px;
|
|
972
|
+
color: currentColor;
|
|
146
973
|
opacity: 0.6;
|
|
147
974
|
transition: transform 0.2s;
|
|
148
975
|
flex-shrink: 0;
|
|
149
976
|
}
|
|
150
|
-
|
|
151
977
|
.taskon-select__unfold-icon--rotated {
|
|
152
978
|
transform: rotate(180deg);
|
|
153
979
|
}
|
|
154
|
-
|
|
155
980
|
/* ========== 下拉菜单 ========== */
|
|
156
981
|
.taskon-select__menu {
|
|
157
|
-
/* Portal 模式下需要独立定义变量，因为不在 .taskon-select 内部 */
|
|
158
|
-
--select-menu-background: #343a3d;
|
|
159
|
-
--select-menu-border: 1px solid rgba(255, 255, 255, 0.1);
|
|
160
|
-
--select-menu-border-radius: 8px;
|
|
161
|
-
--select-option-padding: 15px 20px;
|
|
162
|
-
--select-option-hover-background: #424a4d;
|
|
163
|
-
--select-option-color: #fff;
|
|
164
|
-
--select-option-desc-color: rgba(255, 255, 255, 0.6);
|
|
165
|
-
|
|
166
982
|
position: absolute;
|
|
167
983
|
top: 100%;
|
|
168
984
|
left: 0;
|
|
169
985
|
right: 0;
|
|
170
986
|
margin-top: 4px;
|
|
171
|
-
background: var(--
|
|
172
|
-
border: var(--
|
|
173
|
-
border-radius: var(--
|
|
987
|
+
background: var(--taskon-color-bg-floating);
|
|
988
|
+
border: 1px solid var(--taskon-color-border);
|
|
989
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
174
990
|
overflow: auto;
|
|
175
991
|
z-index: 9999;
|
|
176
992
|
}
|
|
177
|
-
|
|
178
993
|
/* 深色主题 */
|
|
179
994
|
.taskon-select__menu--dark {
|
|
180
|
-
--
|
|
181
|
-
--select-option-hover-background: #3a4144;
|
|
995
|
+
background: var(--taskon-color-bg-floating);
|
|
182
996
|
}
|
|
183
|
-
|
|
184
997
|
/* 浅色主题 */
|
|
185
998
|
.taskon-select__menu--light {
|
|
186
|
-
--
|
|
187
|
-
--
|
|
188
|
-
--select-option-color: #333;
|
|
189
|
-
--select-option-hover-background: #f5f5f5;
|
|
190
|
-
--select-option-desc-color: #999;
|
|
999
|
+
background: var(--taskon-color-bg-floating);
|
|
1000
|
+
border-color: var(--taskon-color-border);
|
|
191
1001
|
}
|
|
192
|
-
|
|
193
1002
|
/* ========== 选项 ========== */
|
|
194
1003
|
.taskon-select__option {
|
|
195
1004
|
display: flex;
|
|
196
1005
|
align-items: center;
|
|
197
|
-
padding:
|
|
198
|
-
color: var(--
|
|
1006
|
+
padding: 12px 16px;
|
|
1007
|
+
color: var(--taskon-color-text);
|
|
199
1008
|
cursor: pointer;
|
|
200
1009
|
transition: background 0.15s;
|
|
201
1010
|
}
|
|
202
|
-
|
|
203
1011
|
.taskon-select__option:hover:not(.taskon-select__option--disabled) {
|
|
204
|
-
background: var(--
|
|
1012
|
+
background: var(--taskon-color-bg-surface);
|
|
205
1013
|
}
|
|
206
|
-
|
|
207
1014
|
.taskon-select__option--active {
|
|
208
|
-
background:
|
|
1015
|
+
background: var(--taskon-color-bg-surface-subtle);
|
|
209
1016
|
}
|
|
210
|
-
|
|
211
1017
|
.taskon-select__option--disabled {
|
|
212
1018
|
cursor: not-allowed;
|
|
213
1019
|
opacity: 0.4;
|
|
214
1020
|
}
|
|
215
|
-
|
|
216
1021
|
.taskon-select__option--danger .taskon-select__option-label {
|
|
217
|
-
color:
|
|
1022
|
+
color: var(--taskon-color-error);
|
|
218
1023
|
}
|
|
219
|
-
|
|
220
1024
|
/* ========== 选项图标 ========== */
|
|
221
1025
|
.taskon-select__option-icon {
|
|
222
|
-
width:
|
|
223
|
-
height:
|
|
1026
|
+
width: 16px;
|
|
1027
|
+
height: 16px;
|
|
224
1028
|
border-radius: 50%;
|
|
225
|
-
margin-right:
|
|
1029
|
+
margin-right: 8px;
|
|
226
1030
|
flex-shrink: 0;
|
|
227
1031
|
}
|
|
228
|
-
|
|
229
1032
|
/* ========== 选项内容 ========== */
|
|
230
1033
|
.taskon-select__option-content {
|
|
231
1034
|
flex: 1;
|
|
232
1035
|
min-width: 0;
|
|
233
1036
|
}
|
|
234
|
-
|
|
235
1037
|
/* ========== 选项标签 ========== */
|
|
236
1038
|
.taskon-select__option-label {
|
|
237
1039
|
font-weight: 500;
|
|
@@ -241,98 +1043,139 @@
|
|
|
241
1043
|
white-space: nowrap;
|
|
242
1044
|
text-overflow: ellipsis;
|
|
243
1045
|
}
|
|
244
|
-
|
|
245
1046
|
/* ========== 选项描述 ========== */
|
|
246
1047
|
.taskon-select__option-desc {
|
|
247
1048
|
font-size: 12px;
|
|
248
1049
|
line-height: 16px;
|
|
249
|
-
color: var(--
|
|
1050
|
+
color: var(--taskon-color-text-secondary);
|
|
250
1051
|
margin-top: 2px;
|
|
251
1052
|
}
|
|
252
|
-
|
|
1053
|
+
.taskon-select__menu--light .taskon-select__option {
|
|
1054
|
+
color: var(--taskon-color-text);
|
|
1055
|
+
}
|
|
1056
|
+
.taskon-select__menu--light .taskon-select__option:hover:not(.taskon-select__option--disabled) {
|
|
1057
|
+
background: var(--taskon-color-bg-surface);
|
|
1058
|
+
}
|
|
1059
|
+
.taskon-select__menu--light .taskon-select__option--active {
|
|
1060
|
+
background: var(--taskon-color-bg-surface-strong);
|
|
1061
|
+
}
|
|
1062
|
+
.taskon-select__menu--light .taskon-select__option-desc {
|
|
1063
|
+
color: var(--taskon-color-text-secondary);
|
|
1064
|
+
}
|
|
253
1065
|
/* ========== 选中勾选图标 ========== */
|
|
254
1066
|
.taskon-select__option-check {
|
|
255
1067
|
margin-left: 8px;
|
|
256
|
-
color:
|
|
1068
|
+
color: var(--taskon-color-success);
|
|
257
1069
|
flex-shrink: 0;
|
|
258
1070
|
}
|
|
259
|
-
|
|
260
1071
|
/* ========== 空状态 ========== */
|
|
261
1072
|
.taskon-select__empty {
|
|
262
1073
|
padding: 20px;
|
|
263
1074
|
text-align: center;
|
|
264
|
-
color:
|
|
1075
|
+
color: var(--taskon-color-text-secondary);
|
|
265
1076
|
font-size: 14px;
|
|
266
1077
|
}
|
|
267
|
-
|
|
268
1078
|
/* ========== 错误信息 ========== */
|
|
269
1079
|
.taskon-select__error {
|
|
270
1080
|
margin-top: 4px;
|
|
271
1081
|
font-size: 12px;
|
|
272
|
-
color:
|
|
1082
|
+
color: var(--taskon-color-error);
|
|
273
1083
|
}
|
|
1084
|
+
@supports (container-type: inline-size) {
|
|
1085
|
+
@container (min-width: 751px) {
|
|
1086
|
+
.taskon-select__trigger {
|
|
1087
|
+
height: 44px;
|
|
1088
|
+
font-size: var(--taskon-font-size);
|
|
1089
|
+
}
|
|
274
1090
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
1091
|
+
.taskon-select__option {
|
|
1092
|
+
padding: 15px 20px;
|
|
1093
|
+
}
|
|
1094
|
+
|
|
1095
|
+
.taskon-select__trigger-icon {
|
|
1096
|
+
width: 20px;
|
|
1097
|
+
height: 20px;
|
|
1098
|
+
margin-right: 10px;
|
|
1099
|
+
}
|
|
1100
|
+
|
|
1101
|
+
.taskon-select__option-icon {
|
|
1102
|
+
width: 20px;
|
|
1103
|
+
height: 20px;
|
|
1104
|
+
margin-right: 10px;
|
|
1105
|
+
}
|
|
1106
|
+
|
|
1107
|
+
.taskon-select__unfold-icon {
|
|
1108
|
+
margin-left: 10px;
|
|
1109
|
+
}
|
|
1110
|
+
}
|
|
1111
|
+
}
|
|
1112
|
+
@supports not (container-type: inline-size) {
|
|
1113
|
+
@media (min-width: 751px) {
|
|
1114
|
+
.taskon-select__trigger {
|
|
1115
|
+
height: 44px;
|
|
1116
|
+
font-size: var(--taskon-font-size);
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
.taskon-select__option {
|
|
1120
|
+
padding: 15px 20px;
|
|
281
1121
|
}
|
|
282
1122
|
|
|
283
1123
|
.taskon-select__trigger-icon {
|
|
284
|
-
width:
|
|
285
|
-
height:
|
|
286
|
-
margin-right:
|
|
1124
|
+
width: 20px;
|
|
1125
|
+
height: 20px;
|
|
1126
|
+
margin-right: 10px;
|
|
287
1127
|
}
|
|
288
1128
|
|
|
289
1129
|
.taskon-select__option-icon {
|
|
290
|
-
width:
|
|
291
|
-
height:
|
|
292
|
-
margin-right:
|
|
1130
|
+
width: 20px;
|
|
1131
|
+
height: 20px;
|
|
1132
|
+
margin-right: 10px;
|
|
293
1133
|
}
|
|
294
1134
|
|
|
295
1135
|
.taskon-select__unfold-icon {
|
|
296
|
-
margin-left:
|
|
1136
|
+
margin-left: 10px;
|
|
1137
|
+
}
|
|
1138
|
+
}
|
|
297
1139
|
}
|
|
298
|
-
}
|
|
299
1140
|
/**
|
|
300
1141
|
* WithdrawSelectOption 组件样式
|
|
301
1142
|
*
|
|
302
1143
|
* 基于 Vue WithdrawSelectOption 组件样式翻译
|
|
1144
|
+
* 主题规范：仅使用通用 --taskon-* 变量，不定义局部主题变量
|
|
1145
|
+
*/
|
|
1146
|
+
/*
|
|
1147
|
+
* Responsive base styles
|
|
1148
|
+
*
|
|
1149
|
+
* Keep mobile breakpoints and fallback patterns centralized here.
|
|
1150
|
+
* Components should reuse these mixins instead of duplicating query logic.
|
|
1151
|
+
*/
|
|
1152
|
+
/*
|
|
1153
|
+
* Desktop-up mixin:
|
|
1154
|
+
* 1) Enable desktop enhancement in wider containers
|
|
1155
|
+
* 2) Keep viewport media query as fallback
|
|
303
1156
|
*/
|
|
304
|
-
|
|
305
1157
|
.taskon-withdraw-option {
|
|
306
|
-
|
|
307
|
-
--option-hover-bg: #424a4d;
|
|
308
|
-
--option-color: #fff;
|
|
309
|
-
|
|
310
|
-
padding: 15px 6px 15px 20px;
|
|
1158
|
+
padding: 12px 4px 12px 16px;
|
|
311
1159
|
cursor: pointer;
|
|
312
1160
|
}
|
|
313
|
-
|
|
314
1161
|
.taskon-withdraw-option:hover {
|
|
315
|
-
background: var(--
|
|
1162
|
+
background: var(--taskon-color-bg-surface);
|
|
316
1163
|
}
|
|
317
|
-
|
|
318
1164
|
/* 禁用状态 */
|
|
319
1165
|
.taskon-withdraw-option--disabled {
|
|
320
1166
|
cursor: not-allowed;
|
|
321
1167
|
opacity: 0.4;
|
|
322
1168
|
}
|
|
323
|
-
|
|
324
1169
|
/* ========== 主要内容 ========== */
|
|
325
1170
|
.taskon-withdraw-option__content {
|
|
326
1171
|
display: flex;
|
|
327
1172
|
align-items: center;
|
|
328
1173
|
}
|
|
329
|
-
|
|
330
1174
|
/* 模糊状态（不可提现） */
|
|
331
1175
|
.taskon-withdraw-option__content--blurred {
|
|
332
1176
|
pointer-events: none;
|
|
333
1177
|
opacity: 0.4;
|
|
334
1178
|
}
|
|
335
|
-
|
|
336
1179
|
/* ========== 链信息 ========== */
|
|
337
1180
|
.taskon-withdraw-option__chain {
|
|
338
1181
|
display: inline-flex;
|
|
@@ -341,22 +1184,19 @@
|
|
|
341
1184
|
width: 33.33%;
|
|
342
1185
|
min-width: 0;
|
|
343
1186
|
}
|
|
344
|
-
|
|
345
1187
|
.taskon-withdraw-option__chain-icon {
|
|
346
|
-
width:
|
|
347
|
-
height:
|
|
1188
|
+
width: 14px;
|
|
1189
|
+
height: 14px;
|
|
348
1190
|
border-radius: 50%;
|
|
349
1191
|
flex-shrink: 0;
|
|
350
1192
|
}
|
|
351
|
-
|
|
352
1193
|
.taskon-withdraw-option__chain-label {
|
|
353
|
-
font-size:
|
|
354
|
-
color:
|
|
1194
|
+
font-size: 13px;
|
|
1195
|
+
color: var(--taskon-color-text-secondary);
|
|
355
1196
|
overflow: hidden;
|
|
356
1197
|
text-overflow: ellipsis;
|
|
357
1198
|
white-space: nowrap;
|
|
358
1199
|
}
|
|
359
|
-
|
|
360
1200
|
/* ========== Token 信息 ========== */
|
|
361
1201
|
.taskon-withdraw-option__token {
|
|
362
1202
|
display: flex;
|
|
@@ -364,25 +1204,22 @@
|
|
|
364
1204
|
flex: 1;
|
|
365
1205
|
min-width: 0;
|
|
366
1206
|
}
|
|
367
|
-
|
|
368
1207
|
.taskon-withdraw-option__token-icon {
|
|
369
|
-
width:
|
|
370
|
-
height:
|
|
1208
|
+
width: 14px;
|
|
1209
|
+
height: 14px;
|
|
371
1210
|
border-radius: 50%;
|
|
372
1211
|
margin-right: 6px;
|
|
373
1212
|
flex-shrink: 0;
|
|
374
1213
|
}
|
|
375
|
-
|
|
376
1214
|
.taskon-withdraw-option__token-label {
|
|
377
1215
|
font-weight: 500;
|
|
378
|
-
font-size:
|
|
1216
|
+
font-size: 13px;
|
|
379
1217
|
line-height: 20px;
|
|
380
|
-
color: var(--
|
|
1218
|
+
color: var(--taskon-color-text);
|
|
381
1219
|
overflow: hidden;
|
|
382
1220
|
white-space: nowrap;
|
|
383
1221
|
text-overflow: ellipsis;
|
|
384
1222
|
}
|
|
385
|
-
|
|
386
1223
|
/* ========== 尾部信息（余额 + 选中状态） ========== */
|
|
387
1224
|
.taskon-withdraw-option__trailing {
|
|
388
1225
|
display: flex;
|
|
@@ -391,95 +1228,118 @@
|
|
|
391
1228
|
gap: 4px;
|
|
392
1229
|
flex-shrink: 0;
|
|
393
1230
|
}
|
|
394
|
-
|
|
395
1231
|
.taskon-withdraw-option__balance {
|
|
396
|
-
font-size:
|
|
397
|
-
color:
|
|
1232
|
+
font-size: 13px;
|
|
1233
|
+
color: var(--taskon-color-text-tertiary);
|
|
398
1234
|
}
|
|
399
|
-
|
|
400
1235
|
.taskon-withdraw-option__check {
|
|
401
1236
|
width: 12px;
|
|
402
1237
|
height: 8px;
|
|
403
|
-
color:
|
|
1238
|
+
color: var(--taskon-color-success);
|
|
404
1239
|
visibility: hidden;
|
|
405
1240
|
}
|
|
406
|
-
|
|
407
1241
|
.taskon-withdraw-option__check--visible {
|
|
408
1242
|
visibility: visible;
|
|
409
1243
|
}
|
|
410
|
-
|
|
411
1244
|
/* ========== 警告提示 ========== */
|
|
412
1245
|
.taskon-withdraw-option__warning {
|
|
413
1246
|
margin-top: 4px;
|
|
414
|
-
font-size:
|
|
1247
|
+
font-size: 11px;
|
|
415
1248
|
font-weight: 400;
|
|
416
|
-
color: var(--
|
|
1249
|
+
color: var(--taskon-color-warning);
|
|
417
1250
|
}
|
|
1251
|
+
@supports (container-type: inline-size) {
|
|
1252
|
+
@container (min-width: 751px) {
|
|
1253
|
+
.taskon-withdraw-option {
|
|
1254
|
+
padding: 15px 6px 15px 20px;
|
|
1255
|
+
}
|
|
418
1256
|
|
|
419
|
-
|
|
420
|
-
|
|
1257
|
+
.taskon-withdraw-option__chain-icon,
|
|
1258
|
+
.taskon-withdraw-option__token-icon {
|
|
1259
|
+
width: 16px;
|
|
1260
|
+
height: 16px;
|
|
1261
|
+
}
|
|
1262
|
+
|
|
1263
|
+
.taskon-withdraw-option__chain-label,
|
|
1264
|
+
.taskon-withdraw-option__token-label,
|
|
1265
|
+
.taskon-withdraw-option__balance {
|
|
1266
|
+
font-size: 14px;
|
|
1267
|
+
}
|
|
1268
|
+
|
|
1269
|
+
.taskon-withdraw-option__warning {
|
|
1270
|
+
font-size: 12px;
|
|
1271
|
+
}
|
|
1272
|
+
}
|
|
1273
|
+
}
|
|
1274
|
+
@supports not (container-type: inline-size) {
|
|
1275
|
+
@media (min-width: 751px) {
|
|
421
1276
|
.taskon-withdraw-option {
|
|
422
|
-
padding:
|
|
1277
|
+
padding: 15px 6px 15px 20px;
|
|
423
1278
|
}
|
|
424
1279
|
|
|
425
1280
|
.taskon-withdraw-option__chain-icon,
|
|
426
1281
|
.taskon-withdraw-option__token-icon {
|
|
427
|
-
width:
|
|
428
|
-
height:
|
|
1282
|
+
width: 16px;
|
|
1283
|
+
height: 16px;
|
|
429
1284
|
}
|
|
430
1285
|
|
|
431
1286
|
.taskon-withdraw-option__chain-label,
|
|
432
1287
|
.taskon-withdraw-option__token-label,
|
|
433
1288
|
.taskon-withdraw-option__balance {
|
|
434
|
-
font-size:
|
|
1289
|
+
font-size: 14px;
|
|
435
1290
|
}
|
|
436
1291
|
|
|
437
1292
|
.taskon-withdraw-option__warning {
|
|
438
|
-
font-size:
|
|
1293
|
+
font-size: 12px;
|
|
1294
|
+
}
|
|
1295
|
+
}
|
|
439
1296
|
}
|
|
440
|
-
}
|
|
441
1297
|
/**
|
|
442
1298
|
* FormItem 组件样式
|
|
443
1299
|
*
|
|
444
1300
|
* 基于 Vue FormItem.vue 样式翻译
|
|
445
1301
|
*/
|
|
446
|
-
|
|
1302
|
+
/*
|
|
1303
|
+
* Responsive base styles
|
|
1304
|
+
*
|
|
1305
|
+
* Keep mobile breakpoints and fallback patterns centralized here.
|
|
1306
|
+
* Components should reuse these mixins instead of duplicating query logic.
|
|
1307
|
+
*/
|
|
1308
|
+
/*
|
|
1309
|
+
* Desktop-up mixin:
|
|
1310
|
+
* 1) Enable desktop enhancement in wider containers
|
|
1311
|
+
* 2) Keep viewport media query as fallback
|
|
1312
|
+
*/
|
|
447
1313
|
/* ========== 根容器 ========== */
|
|
448
1314
|
.taskon-form-item {
|
|
449
|
-
--form-item-space:
|
|
450
|
-
--form-item-label-space:
|
|
451
|
-
--form-item-font-size:
|
|
1315
|
+
--form-item-space: 12px;
|
|
1316
|
+
--form-item-label-space: 6px;
|
|
1317
|
+
--form-item-font-size: 13px;
|
|
452
1318
|
--form-item-line-height: 20px;
|
|
453
1319
|
|
|
454
1320
|
position: relative;
|
|
455
1321
|
}
|
|
456
|
-
|
|
457
1322
|
/* 相邻 FormItem 之间的间距 */
|
|
458
1323
|
.taskon-form-item + .taskon-form-item {
|
|
459
1324
|
margin-top: var(--form-item-space);
|
|
460
1325
|
}
|
|
461
|
-
|
|
462
1326
|
/* Dialog 模式下的间距 */
|
|
463
1327
|
.taskon-form-item--dialog + .taskon-form-item--dialog {
|
|
464
|
-
margin-top:
|
|
1328
|
+
margin-top: 16px;
|
|
465
1329
|
}
|
|
466
|
-
|
|
467
1330
|
/* ========== 标签行 ========== */
|
|
468
1331
|
.taskon-form-item__row {
|
|
469
1332
|
display: flex;
|
|
470
1333
|
align-items: center;
|
|
471
1334
|
}
|
|
472
|
-
|
|
473
1335
|
/* 有标签时的下边距 */
|
|
474
1336
|
.taskon-form-item__row--has-label {
|
|
475
1337
|
margin-bottom: var(--form-item-label-space);
|
|
476
1338
|
}
|
|
477
|
-
|
|
478
1339
|
/* 无下边距 */
|
|
479
1340
|
.taskon-form-item__row--no-margin {
|
|
480
1341
|
margin-bottom: 0;
|
|
481
1342
|
}
|
|
482
|
-
|
|
483
1343
|
/* ========== 标签 ========== */
|
|
484
1344
|
.taskon-form-item__label {
|
|
485
1345
|
display: flex;
|
|
@@ -487,22 +1347,19 @@
|
|
|
487
1347
|
font-weight: 500;
|
|
488
1348
|
font-size: var(--form-item-font-size);
|
|
489
1349
|
line-height: var(--form-item-line-height);
|
|
490
|
-
color:
|
|
1350
|
+
color: var(--taskon-color-text);
|
|
491
1351
|
white-space: nowrap;
|
|
492
1352
|
}
|
|
493
|
-
|
|
494
1353
|
/* ========== 可选标记 ========== */
|
|
495
1354
|
.taskon-form-item__optional {
|
|
496
|
-
color:
|
|
1355
|
+
color: var(--taskon-color-text-disabled);
|
|
497
1356
|
}
|
|
498
|
-
|
|
499
1357
|
/* ========== 提示图标 ========== */
|
|
500
1358
|
.taskon-form-item__tip {
|
|
501
|
-
margin-left:
|
|
1359
|
+
margin-left: 8px;
|
|
502
1360
|
display: inline-flex;
|
|
503
1361
|
align-items: center;
|
|
504
1362
|
}
|
|
505
|
-
|
|
506
1363
|
/* ========== 文档链接 ========== */
|
|
507
1364
|
.taskon-form-item__doc-link {
|
|
508
1365
|
margin-left: auto;
|
|
@@ -510,50 +1367,63 @@
|
|
|
510
1367
|
align-items: center;
|
|
511
1368
|
gap: 4px;
|
|
512
1369
|
font-size: 14px;
|
|
513
|
-
color: var(--color-link
|
|
1370
|
+
color: var(--taskon-color-link);
|
|
514
1371
|
text-decoration: none;
|
|
515
1372
|
cursor: pointer;
|
|
516
1373
|
}
|
|
517
|
-
|
|
518
1374
|
.taskon-form-item__doc-link:hover {
|
|
519
1375
|
text-decoration: underline;
|
|
520
1376
|
}
|
|
521
|
-
|
|
522
1377
|
.taskon-form-item__doc-icon {
|
|
523
1378
|
width: 8px;
|
|
524
1379
|
height: 9px;
|
|
525
1380
|
}
|
|
526
|
-
|
|
527
1381
|
/* ========== 错误信息 ========== */
|
|
528
1382
|
.taskon-form-item__error {
|
|
529
1383
|
margin-top: 4px;
|
|
530
1384
|
font-size: 12px;
|
|
531
1385
|
line-height: 16px;
|
|
532
|
-
color:
|
|
1386
|
+
color: var(--taskon-color-error);
|
|
533
1387
|
white-space: pre-wrap;
|
|
534
1388
|
}
|
|
535
|
-
|
|
536
1389
|
/* 警告样式（橙色） */
|
|
537
1390
|
.taskon-form-item__error--warn {
|
|
538
|
-
color:
|
|
1391
|
+
color: var(--taskon-color-warning);
|
|
539
1392
|
}
|
|
1393
|
+
@supports (container-type: inline-size) {
|
|
1394
|
+
@container (min-width: 751px) {
|
|
1395
|
+
.taskon-form-item {
|
|
1396
|
+
--form-item-space: 16px;
|
|
1397
|
+
--form-item-label-space: 8px;
|
|
1398
|
+
--form-item-font-size: 14px;
|
|
1399
|
+
}
|
|
540
1400
|
|
|
541
|
-
|
|
542
|
-
|
|
1401
|
+
.taskon-form-item--dialog + .taskon-form-item--dialog {
|
|
1402
|
+
margin-top: 20px;
|
|
1403
|
+
}
|
|
1404
|
+
|
|
1405
|
+
.taskon-form-item__tip {
|
|
1406
|
+
margin-left: 6px;
|
|
1407
|
+
}
|
|
1408
|
+
}
|
|
1409
|
+
}
|
|
1410
|
+
@supports not (container-type: inline-size) {
|
|
1411
|
+
@media (min-width: 751px) {
|
|
543
1412
|
.taskon-form-item {
|
|
544
|
-
--form-item-space:
|
|
545
|
-
--form-item-label-space:
|
|
546
|
-
--form-item-font-size:
|
|
1413
|
+
--form-item-space: 16px;
|
|
1414
|
+
--form-item-label-space: 8px;
|
|
1415
|
+
--form-item-font-size: 14px;
|
|
547
1416
|
}
|
|
548
1417
|
|
|
549
1418
|
.taskon-form-item--dialog + .taskon-form-item--dialog {
|
|
550
|
-
margin-top:
|
|
1419
|
+
margin-top: 20px;
|
|
551
1420
|
}
|
|
552
1421
|
|
|
553
1422
|
.taskon-form-item__tip {
|
|
554
|
-
margin-left:
|
|
1423
|
+
margin-left: 6px;
|
|
1424
|
+
}
|
|
1425
|
+
}
|
|
555
1426
|
}
|
|
556
|
-
}
|
|
557
1427
|
/**
|
|
558
1428
|
* Checkbox 复选框组件样式
|
|
559
1429
|
*
|
|
@@ -562,11 +1432,20 @@
|
|
|
562
1432
|
*
|
|
563
1433
|
* 参考 Vue 版本 BaseCheckBox.vue 样式实现
|
|
564
1434
|
*/
|
|
565
|
-
|
|
1435
|
+
/*
|
|
1436
|
+
* Responsive base styles
|
|
1437
|
+
*
|
|
1438
|
+
* Keep mobile breakpoints and fallback patterns centralized here.
|
|
1439
|
+
* Components should reuse these mixins instead of duplicating query logic.
|
|
1440
|
+
*/
|
|
1441
|
+
/*
|
|
1442
|
+
* Desktop-up mixin:
|
|
1443
|
+
* 1) Enable desktop enhancement in wider containers
|
|
1444
|
+
* 2) Keep viewport media query as fallback
|
|
1445
|
+
*/
|
|
566
1446
|
/* ============================================================================
|
|
567
1447
|
根元素
|
|
568
1448
|
============================================================================ */
|
|
569
|
-
|
|
570
1449
|
.taskon-checkbox {
|
|
571
1450
|
display: inline-flex;
|
|
572
1451
|
align-items: center;
|
|
@@ -575,116 +1454,121 @@
|
|
|
575
1454
|
user-select: none;
|
|
576
1455
|
outline: none;
|
|
577
1456
|
}
|
|
578
|
-
|
|
579
1457
|
/* 悬停和聚焦效果 */
|
|
580
1458
|
.taskon-checkbox:not(.taskon-checkbox--disabled):hover,
|
|
581
1459
|
.taskon-checkbox:not(.taskon-checkbox--disabled):focus {
|
|
582
1460
|
opacity: 0.8;
|
|
583
1461
|
}
|
|
584
|
-
|
|
585
1462
|
/* 禁用状态 */
|
|
586
1463
|
.taskon-checkbox--disabled {
|
|
587
1464
|
cursor: not-allowed;
|
|
588
1465
|
opacity: 0.4;
|
|
589
1466
|
}
|
|
590
|
-
|
|
591
1467
|
/* 只读状态 */
|
|
592
1468
|
.taskon-checkbox--readonly {
|
|
593
1469
|
cursor: default;
|
|
594
1470
|
opacity: 0.4;
|
|
595
1471
|
}
|
|
596
|
-
|
|
597
1472
|
/* ============================================================================
|
|
598
1473
|
隐藏的原生 input
|
|
599
1474
|
============================================================================ */
|
|
600
|
-
|
|
601
1475
|
.taskon-checkbox__input {
|
|
602
1476
|
display: none;
|
|
603
1477
|
}
|
|
604
|
-
|
|
605
1478
|
/* ============================================================================
|
|
606
1479
|
自定义图标容器
|
|
607
1480
|
============================================================================ */
|
|
608
|
-
|
|
609
1481
|
.taskon-checkbox__icon {
|
|
610
1482
|
display: flex;
|
|
611
1483
|
justify-content: center;
|
|
612
1484
|
align-items: center;
|
|
613
|
-
width:
|
|
614
|
-
height:
|
|
615
|
-
border: 2px solid var(--taskon-color-border
|
|
616
|
-
border-radius:
|
|
1485
|
+
width: 16px;
|
|
1486
|
+
height: 16px;
|
|
1487
|
+
border: 2px solid var(--taskon-color-border);
|
|
1488
|
+
border-radius: 3px;
|
|
617
1489
|
transition: all 0.2s ease;
|
|
618
1490
|
flex-shrink: 0;
|
|
619
1491
|
}
|
|
620
|
-
|
|
621
1492
|
/* 选中状态 - 默认绿色背景 */
|
|
622
1493
|
.taskon-checkbox__icon--active {
|
|
623
1494
|
border: 0 none;
|
|
624
|
-
background-color: var(--taskon-color-secondary
|
|
1495
|
+
background-color: var(--taskon-color-secondary);
|
|
625
1496
|
border-radius: 4px;
|
|
626
1497
|
}
|
|
627
|
-
|
|
628
1498
|
/* 选中状态显示勾选图标 */
|
|
629
1499
|
.taskon-checkbox__icon--active .taskon-checkbox__icon-checked {
|
|
630
1500
|
display: block;
|
|
631
1501
|
}
|
|
632
|
-
|
|
633
1502
|
/* light 类型选中状态 - 浅色背景 */
|
|
634
1503
|
.taskon-checkbox__icon--active.taskon-checkbox__icon--light {
|
|
635
|
-
|
|
1504
|
+
border: 1px solid var(--taskon-color-border);
|
|
1505
|
+
background-color: var(--taskon-color-bg-surface);
|
|
636
1506
|
}
|
|
637
|
-
|
|
638
1507
|
/* 圆形样式 */
|
|
639
1508
|
.taskon-checkbox__icon--round {
|
|
640
1509
|
border-radius: 50%;
|
|
641
1510
|
}
|
|
642
|
-
|
|
643
1511
|
/* ============================================================================
|
|
644
1512
|
勾选图标 SVG
|
|
645
1513
|
============================================================================ */
|
|
646
|
-
|
|
647
1514
|
.taskon-checkbox__icon-checked {
|
|
648
1515
|
display: none;
|
|
649
|
-
width:
|
|
650
|
-
height:
|
|
651
|
-
color: var(--taskon-color-text-
|
|
1516
|
+
width: 10px;
|
|
1517
|
+
height: 8px;
|
|
1518
|
+
color: var(--taskon-color-text-on-primary);
|
|
1519
|
+
}
|
|
1520
|
+
.taskon-checkbox__icon--active.taskon-checkbox__icon--light .taskon-checkbox__icon-checked {
|
|
1521
|
+
color: var(--taskon-color-text);
|
|
652
1522
|
}
|
|
653
|
-
|
|
654
1523
|
/* ============================================================================
|
|
655
1524
|
标签文字
|
|
656
1525
|
============================================================================ */
|
|
657
|
-
|
|
658
1526
|
.taskon-checkbox__label {
|
|
659
1527
|
margin-left: 8px;
|
|
660
|
-
color: var(--taskon-color-text-
|
|
661
|
-
font-size:
|
|
1528
|
+
color: var(--taskon-color-text-secondary);
|
|
1529
|
+
font-size: 14px;
|
|
662
1530
|
font-style: normal;
|
|
663
1531
|
font-weight: 500;
|
|
664
|
-
line-height:
|
|
1532
|
+
line-height: 18px;
|
|
665
1533
|
}
|
|
1534
|
+
@supports (container-type: inline-size) {
|
|
1535
|
+
@container (min-width: 751px) {
|
|
1536
|
+
.taskon-checkbox__icon {
|
|
1537
|
+
width: 20px;
|
|
1538
|
+
height: 20px;
|
|
1539
|
+
border-radius: 4px;
|
|
1540
|
+
}
|
|
666
1541
|
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
1542
|
+
.taskon-checkbox__icon-checked {
|
|
1543
|
+
width: 12px;
|
|
1544
|
+
height: 10px;
|
|
1545
|
+
}
|
|
670
1546
|
|
|
671
|
-
|
|
1547
|
+
.taskon-checkbox__label {
|
|
1548
|
+
font-size: 16px;
|
|
1549
|
+
line-height: 20px;
|
|
1550
|
+
}
|
|
1551
|
+
}
|
|
1552
|
+
}
|
|
1553
|
+
@supports not (container-type: inline-size) {
|
|
1554
|
+
@media (min-width: 751px) {
|
|
672
1555
|
.taskon-checkbox__icon {
|
|
673
|
-
width:
|
|
674
|
-
height:
|
|
675
|
-
border-radius:
|
|
1556
|
+
width: 20px;
|
|
1557
|
+
height: 20px;
|
|
1558
|
+
border-radius: 4px;
|
|
676
1559
|
}
|
|
677
1560
|
|
|
678
1561
|
.taskon-checkbox__icon-checked {
|
|
679
|
-
width:
|
|
680
|
-
height:
|
|
1562
|
+
width: 12px;
|
|
1563
|
+
height: 10px;
|
|
681
1564
|
}
|
|
682
1565
|
|
|
683
1566
|
.taskon-checkbox__label {
|
|
684
|
-
font-size:
|
|
685
|
-
line-height:
|
|
1567
|
+
font-size: 16px;
|
|
1568
|
+
line-height: 20px;
|
|
1569
|
+
}
|
|
1570
|
+
}
|
|
686
1571
|
}
|
|
687
|
-
}
|
|
688
1572
|
/**
|
|
689
1573
|
* Switch 开关组件样式
|
|
690
1574
|
*
|
|
@@ -693,132 +1577,153 @@
|
|
|
693
1577
|
*
|
|
694
1578
|
* 参考 Vue 版本 BaseSwitch.vue 样式实现
|
|
695
1579
|
*/
|
|
696
|
-
|
|
1580
|
+
/*
|
|
1581
|
+
* Responsive base styles
|
|
1582
|
+
*
|
|
1583
|
+
* Keep mobile breakpoints and fallback patterns centralized here.
|
|
1584
|
+
* Components should reuse these mixins instead of duplicating query logic.
|
|
1585
|
+
*/
|
|
1586
|
+
/*
|
|
1587
|
+
* Desktop-up mixin:
|
|
1588
|
+
* 1) Enable desktop enhancement in wider containers
|
|
1589
|
+
* 2) Keep viewport media query as fallback
|
|
1590
|
+
*/
|
|
697
1591
|
/* ============================================================================
|
|
698
1592
|
根元素
|
|
699
1593
|
============================================================================ */
|
|
700
|
-
|
|
701
1594
|
.taskon-switch {
|
|
702
1595
|
position: relative;
|
|
703
1596
|
display: inline-flex;
|
|
704
1597
|
align-items: center;
|
|
705
1598
|
vertical-align: middle;
|
|
706
|
-
font-
|
|
707
|
-
|
|
708
|
-
|
|
1599
|
+
font-weight: 500;
|
|
1600
|
+
font-size: 12px;
|
|
1601
|
+
line-height: 130%;
|
|
1602
|
+
color: var(--taskon-color-text-secondary);
|
|
709
1603
|
cursor: pointer;
|
|
710
1604
|
user-select: none;
|
|
711
1605
|
}
|
|
712
|
-
|
|
713
1606
|
/* 禁用状态 */
|
|
714
1607
|
.taskon-switch--disabled {
|
|
715
1608
|
cursor: not-allowed;
|
|
716
1609
|
opacity: 0.5;
|
|
717
1610
|
}
|
|
718
|
-
|
|
719
1611
|
/* ============================================================================
|
|
720
1612
|
标签文字
|
|
721
1613
|
============================================================================ */
|
|
722
|
-
|
|
723
1614
|
.taskon-switch__label {
|
|
724
1615
|
cursor: pointer;
|
|
725
1616
|
}
|
|
726
|
-
|
|
727
1617
|
.taskon-switch__label--disabled {
|
|
728
1618
|
cursor: not-allowed;
|
|
729
1619
|
}
|
|
730
|
-
|
|
731
1620
|
/* ============================================================================
|
|
732
1621
|
开关按钮
|
|
733
1622
|
============================================================================ */
|
|
734
|
-
|
|
735
1623
|
.taskon-switch__button {
|
|
736
1624
|
position: relative;
|
|
737
|
-
width:
|
|
738
|
-
height:
|
|
1625
|
+
width: 32px;
|
|
1626
|
+
height: 18px;
|
|
739
1627
|
line-height: 20px;
|
|
740
|
-
background:
|
|
741
|
-
border: 1px solid
|
|
1628
|
+
background: var(--taskon-color-bg-surface-strong);
|
|
1629
|
+
border: 1px solid var(--taskon-color-border);
|
|
742
1630
|
border-radius: 100px;
|
|
743
|
-
padding: 2px
|
|
744
|
-
margin-left:
|
|
1631
|
+
padding: 2px;
|
|
1632
|
+
margin-left: 10px;
|
|
745
1633
|
transition: all 0.3s ease;
|
|
746
1634
|
flex-shrink: 0;
|
|
747
1635
|
}
|
|
748
|
-
|
|
749
1636
|
/* 开启状态 - 默认渐变背景 */
|
|
750
1637
|
.taskon-switch__button--active {
|
|
751
|
-
background: linear-gradient(
|
|
1638
|
+
background: linear-gradient(
|
|
1639
|
+
90deg,
|
|
1640
|
+
var(--taskon-color-primary) 0%,
|
|
1641
|
+
var(--taskon-color-secondary) 100%
|
|
1642
|
+
);
|
|
752
1643
|
border-color: transparent;
|
|
753
1644
|
}
|
|
754
|
-
|
|
755
1645
|
/* 禁用状态 */
|
|
756
1646
|
.taskon-switch__button--disabled {
|
|
757
1647
|
cursor: not-allowed;
|
|
758
1648
|
}
|
|
759
|
-
|
|
760
1649
|
/* ============================================================================
|
|
761
1650
|
滑块
|
|
762
1651
|
============================================================================ */
|
|
763
|
-
|
|
764
1652
|
.taskon-switch__slider {
|
|
765
|
-
width:
|
|
766
|
-
height:
|
|
1653
|
+
width: 12px;
|
|
1654
|
+
height: 12px;
|
|
767
1655
|
border-radius: 50%;
|
|
768
|
-
background:
|
|
1656
|
+
background: var(--taskon-color-text);
|
|
769
1657
|
transition: margin-left 0.3s ease;
|
|
770
1658
|
}
|
|
771
|
-
|
|
772
1659
|
/* 开启状态的滑块位置 */
|
|
773
1660
|
.taskon-switch__button--active .taskon-switch__slider {
|
|
774
|
-
margin-left:
|
|
775
|
-
background:
|
|
1661
|
+
margin-left: 14px;
|
|
1662
|
+
background: var(--taskon-color-text-on-primary);
|
|
776
1663
|
}
|
|
777
|
-
|
|
778
1664
|
/* ============================================================================
|
|
779
1665
|
高亮样式 (highlight type)
|
|
780
1666
|
============================================================================ */
|
|
781
|
-
|
|
782
1667
|
.taskon-switch--highlight .taskon-switch__button {
|
|
783
|
-
background:
|
|
1668
|
+
background: var(--taskon-color-bg-surface-subtle);
|
|
784
1669
|
}
|
|
785
|
-
|
|
786
1670
|
.taskon-switch--highlight .taskon-switch__button--active {
|
|
787
|
-
background:
|
|
788
|
-
border: 1px solid
|
|
1671
|
+
background: var(--taskon-color-primary-bg);
|
|
1672
|
+
border: 1px solid var(--taskon-color-border-secondary);
|
|
789
1673
|
}
|
|
790
|
-
|
|
791
1674
|
.taskon-switch--highlight .taskon-switch__button--active .taskon-switch__slider {
|
|
792
|
-
background:
|
|
1675
|
+
background: var(--taskon-color-primary);
|
|
793
1676
|
}
|
|
1677
|
+
@supports (container-type: inline-size) {
|
|
1678
|
+
@container (min-width: 751px) {
|
|
1679
|
+
.taskon-switch {
|
|
1680
|
+
font-weight: 400;
|
|
1681
|
+
font-size: 16px;
|
|
1682
|
+
line-height: 23px;
|
|
1683
|
+
}
|
|
794
1684
|
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
1685
|
+
.taskon-switch__button {
|
|
1686
|
+
width: 38px;
|
|
1687
|
+
height: 20px;
|
|
1688
|
+
padding: 2px 3px;
|
|
1689
|
+
margin-left: 15px;
|
|
1690
|
+
}
|
|
798
1691
|
|
|
799
|
-
|
|
1692
|
+
.taskon-switch__slider {
|
|
1693
|
+
width: 14px;
|
|
1694
|
+
height: 14px;
|
|
1695
|
+
}
|
|
1696
|
+
|
|
1697
|
+
.taskon-switch__button--active .taskon-switch__slider {
|
|
1698
|
+
margin-left: 18px;
|
|
1699
|
+
}
|
|
1700
|
+
}
|
|
1701
|
+
}
|
|
1702
|
+
@supports not (container-type: inline-size) {
|
|
1703
|
+
@media (min-width: 751px) {
|
|
800
1704
|
.taskon-switch {
|
|
801
|
-
font-weight:
|
|
802
|
-
font-size:
|
|
803
|
-
line-height:
|
|
1705
|
+
font-weight: 400;
|
|
1706
|
+
font-size: 16px;
|
|
1707
|
+
line-height: 23px;
|
|
804
1708
|
}
|
|
805
1709
|
|
|
806
1710
|
.taskon-switch__button {
|
|
807
|
-
width:
|
|
808
|
-
height:
|
|
809
|
-
padding: 2px;
|
|
810
|
-
margin-left:
|
|
1711
|
+
width: 38px;
|
|
1712
|
+
height: 20px;
|
|
1713
|
+
padding: 2px 3px;
|
|
1714
|
+
margin-left: 15px;
|
|
811
1715
|
}
|
|
812
1716
|
|
|
813
1717
|
.taskon-switch__slider {
|
|
814
|
-
width:
|
|
815
|
-
height:
|
|
1718
|
+
width: 14px;
|
|
1719
|
+
height: 14px;
|
|
816
1720
|
}
|
|
817
1721
|
|
|
818
1722
|
.taskon-switch__button--active .taskon-switch__slider {
|
|
819
|
-
margin-left:
|
|
1723
|
+
margin-left: 18px;
|
|
1724
|
+
}
|
|
1725
|
+
}
|
|
820
1726
|
}
|
|
821
|
-
}
|
|
822
1727
|
/**
|
|
823
1728
|
* Points 表格样式
|
|
824
1729
|
*
|
|
@@ -826,6 +1731,7 @@
|
|
|
826
1731
|
*/
|
|
827
1732
|
|
|
828
1733
|
/* ========== Points List ========== */
|
|
1734
|
+
|
|
829
1735
|
.taskon-points-list {
|
|
830
1736
|
width: 100%;
|
|
831
1737
|
}
|
|
@@ -833,8 +1739,8 @@
|
|
|
833
1739
|
.taskon-points-list__header {
|
|
834
1740
|
display: flex;
|
|
835
1741
|
align-items: center;
|
|
836
|
-
gap: var(--taskon-spacing-sm
|
|
837
|
-
margin-bottom: var(--taskon-spacing-md
|
|
1742
|
+
gap: var(--taskon-spacing-sm);
|
|
1743
|
+
margin-bottom: var(--taskon-spacing-md);
|
|
838
1744
|
}
|
|
839
1745
|
|
|
840
1746
|
.taskon-points-list__icon {
|
|
@@ -847,40 +1753,40 @@
|
|
|
847
1753
|
.taskon-points-list__title {
|
|
848
1754
|
font-size: 16px;
|
|
849
1755
|
font-weight: 600;
|
|
850
|
-
color: var(--taskon-color-text
|
|
1756
|
+
color: var(--taskon-color-text);
|
|
851
1757
|
margin: 0;
|
|
852
1758
|
}
|
|
853
1759
|
|
|
854
1760
|
.taskon-points-list__total {
|
|
855
1761
|
display: flex;
|
|
856
1762
|
align-items: baseline;
|
|
857
|
-
gap: var(--taskon-spacing-xs
|
|
1763
|
+
gap: var(--taskon-spacing-xs);
|
|
858
1764
|
margin-left: auto;
|
|
859
1765
|
}
|
|
860
1766
|
|
|
861
1767
|
.taskon-points-list__total-value {
|
|
862
1768
|
font-size: 20px;
|
|
863
1769
|
font-weight: 700;
|
|
864
|
-
color: var(--taskon-color-text
|
|
1770
|
+
color: var(--taskon-color-text);
|
|
865
1771
|
}
|
|
866
1772
|
|
|
867
1773
|
.taskon-points-list__total-label {
|
|
868
1774
|
font-size: 12px;
|
|
869
|
-
color: var(--taskon-color-text-secondary
|
|
1775
|
+
color: var(--taskon-color-text-secondary);
|
|
870
1776
|
}
|
|
871
1777
|
|
|
872
1778
|
.taskon-points-list__table {
|
|
873
1779
|
width: 100%;
|
|
874
|
-
border: 1px solid var(--taskon-color-border
|
|
875
|
-
border-radius: var(--taskon-border-radius-sm
|
|
1780
|
+
border: 1px solid var(--taskon-color-border);
|
|
1781
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
876
1782
|
overflow: hidden;
|
|
877
1783
|
}
|
|
878
1784
|
|
|
879
1785
|
.taskon-points-list__row {
|
|
880
1786
|
display: flex;
|
|
881
1787
|
align-items: center;
|
|
882
|
-
padding: var(--taskon-spacing-sm
|
|
883
|
-
border-bottom: 1px solid var(--taskon-color-border
|
|
1788
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
|
|
1789
|
+
border-bottom: 1px solid var(--taskon-color-border);
|
|
884
1790
|
transition: background-color 0.2s ease;
|
|
885
1791
|
}
|
|
886
1792
|
|
|
@@ -889,7 +1795,7 @@
|
|
|
889
1795
|
}
|
|
890
1796
|
|
|
891
1797
|
.taskon-points-list__row:hover {
|
|
892
|
-
background-color: var(--taskon-color-bg-
|
|
1798
|
+
background-color: var(--taskon-color-bg-surface-strong);
|
|
893
1799
|
}
|
|
894
1800
|
|
|
895
1801
|
.taskon-points-list__cell {
|
|
@@ -912,23 +1818,23 @@
|
|
|
912
1818
|
}
|
|
913
1819
|
|
|
914
1820
|
.taskon-points-list__cell--amount.positive {
|
|
915
|
-
color: var(--taskon-color-success
|
|
1821
|
+
color: var(--taskon-color-success);
|
|
916
1822
|
}
|
|
917
1823
|
|
|
918
1824
|
.taskon-points-list__cell--amount.negative {
|
|
919
|
-
color: var(--taskon-color-error
|
|
1825
|
+
color: var(--taskon-color-error);
|
|
920
1826
|
}
|
|
921
1827
|
|
|
922
1828
|
.taskon-points-list__cell--time {
|
|
923
1829
|
font-size: 13px;
|
|
924
|
-
color: var(--taskon-color-text-secondary
|
|
1830
|
+
color: var(--taskon-color-text-secondary);
|
|
925
1831
|
white-space: nowrap;
|
|
926
1832
|
}
|
|
927
1833
|
|
|
928
1834
|
.taskon-points-list__primary {
|
|
929
1835
|
font-size: 14px;
|
|
930
1836
|
font-weight: 500;
|
|
931
|
-
color: var(--taskon-color-text
|
|
1837
|
+
color: var(--taskon-color-text);
|
|
932
1838
|
white-space: nowrap;
|
|
933
1839
|
overflow: hidden;
|
|
934
1840
|
text-overflow: ellipsis;
|
|
@@ -936,7 +1842,7 @@
|
|
|
936
1842
|
|
|
937
1843
|
.taskon-points-list__secondary {
|
|
938
1844
|
font-size: 12px;
|
|
939
|
-
color: var(--taskon-color-text-secondary
|
|
1845
|
+
color: var(--taskon-color-text-secondary);
|
|
940
1846
|
white-space: nowrap;
|
|
941
1847
|
overflow: hidden;
|
|
942
1848
|
text-overflow: ellipsis;
|
|
@@ -945,22 +1851,22 @@
|
|
|
945
1851
|
.taskon-points-list__loading-more {
|
|
946
1852
|
display: flex;
|
|
947
1853
|
justify-content: center;
|
|
948
|
-
padding: var(--taskon-spacing-md
|
|
1854
|
+
padding: var(--taskon-spacing-md);
|
|
949
1855
|
}
|
|
950
1856
|
|
|
951
1857
|
.taskon-points-list__table-wrap {
|
|
952
|
-
margin-top: var(--taskon-spacing-md
|
|
1858
|
+
margin-top: var(--taskon-spacing-md);
|
|
953
1859
|
}
|
|
954
1860
|
|
|
955
1861
|
.taskon-points-list__name {
|
|
956
1862
|
font-size: 14px;
|
|
957
1863
|
font-weight: 500;
|
|
958
|
-
color: var(--taskon-color-text
|
|
1864
|
+
color: var(--taskon-color-text);
|
|
959
1865
|
}
|
|
960
1866
|
|
|
961
1867
|
.taskon-points-list__time {
|
|
962
1868
|
font-size: 13px;
|
|
963
|
-
color: var(--taskon-color-text-secondary
|
|
1869
|
+
color: var(--taskon-color-text-secondary);
|
|
964
1870
|
white-space: nowrap;
|
|
965
1871
|
}
|
|
966
1872
|
|
|
@@ -985,11 +1891,88 @@
|
|
|
985
1891
|
}
|
|
986
1892
|
|
|
987
1893
|
.taskon-points-list__amount-value--positive {
|
|
988
|
-
color: var(--taskon-color-success
|
|
1894
|
+
color: var(--taskon-color-success);
|
|
989
1895
|
}
|
|
990
1896
|
|
|
991
1897
|
.taskon-points-list__amount-value--negative {
|
|
992
|
-
color: var(--taskon-color-error
|
|
1898
|
+
color: var(--taskon-color-error);
|
|
1899
|
+
}
|
|
1900
|
+
|
|
1901
|
+
@media (max-width: 750px) {
|
|
1902
|
+
.taskon-points-list__header {
|
|
1903
|
+
align-items: flex-start;
|
|
1904
|
+
flex-wrap: wrap;
|
|
1905
|
+
gap: var(--taskon-spacing-xs);
|
|
1906
|
+
margin-bottom: var(--taskon-spacing-sm);
|
|
1907
|
+
}
|
|
1908
|
+
|
|
1909
|
+
.taskon-points-list__icon {
|
|
1910
|
+
width: 28px;
|
|
1911
|
+
height: 28px;
|
|
1912
|
+
}
|
|
1913
|
+
|
|
1914
|
+
.taskon-points-list__title {
|
|
1915
|
+
font-size: 14px;
|
|
1916
|
+
line-height: 20px;
|
|
1917
|
+
}
|
|
1918
|
+
|
|
1919
|
+
.taskon-points-list__total {
|
|
1920
|
+
justify-content: flex-end;
|
|
1921
|
+
margin-left: 0;
|
|
1922
|
+
width: 100%;
|
|
1923
|
+
}
|
|
1924
|
+
|
|
1925
|
+
.taskon-points-list__total-value {
|
|
1926
|
+
font-size: 16px;
|
|
1927
|
+
}
|
|
1928
|
+
|
|
1929
|
+
.taskon-points-list__name,
|
|
1930
|
+
.taskon-points-list__amount-value {
|
|
1931
|
+
font-size: 13px;
|
|
1932
|
+
}
|
|
1933
|
+
|
|
1934
|
+
.taskon-points-list__time {
|
|
1935
|
+
font-size: 12px;
|
|
1936
|
+
}
|
|
1937
|
+
|
|
1938
|
+
.taskon-points-list__amount-icon {
|
|
1939
|
+
width: 16px;
|
|
1940
|
+
height: 16px;
|
|
1941
|
+
}
|
|
1942
|
+
}
|
|
1943
|
+
/**
|
|
1944
|
+
* AssetImage 组件样式
|
|
1945
|
+
*/
|
|
1946
|
+
|
|
1947
|
+
.taskon-asset-image {
|
|
1948
|
+
position: relative;
|
|
1949
|
+
flex-shrink: 0;
|
|
1950
|
+
}
|
|
1951
|
+
|
|
1952
|
+
.taskon-asset-image__main {
|
|
1953
|
+
display: block;
|
|
1954
|
+
width: 100%;
|
|
1955
|
+
height: 100%;
|
|
1956
|
+
border-radius: 4px;
|
|
1957
|
+
object-fit: cover;
|
|
1958
|
+
}
|
|
1959
|
+
|
|
1960
|
+
.taskon-asset-image__placeholder {
|
|
1961
|
+
width: 100%;
|
|
1962
|
+
height: 100%;
|
|
1963
|
+
border-radius: 4px;
|
|
1964
|
+
background-color: var(--taskon-color-bg-surface-subtle);
|
|
1965
|
+
}
|
|
1966
|
+
|
|
1967
|
+
.taskon-asset-image__chain {
|
|
1968
|
+
position: absolute;
|
|
1969
|
+
right: -4px;
|
|
1970
|
+
bottom: -4px;
|
|
1971
|
+
width: 18px;
|
|
1972
|
+
height: 18px;
|
|
1973
|
+
border-radius: 50%;
|
|
1974
|
+
background-color: var(--taskon-color-bg-surface);
|
|
1975
|
+
box-shadow: 0 1px 2px var(--taskon-color-border-secondary);
|
|
993
1976
|
}
|
|
994
1977
|
/**
|
|
995
1978
|
* RewardTables 通用样式
|
|
@@ -1000,8 +1983,9 @@
|
|
|
1000
1983
|
}
|
|
1001
1984
|
|
|
1002
1985
|
/* Campaign 名称 */
|
|
1986
|
+
|
|
1003
1987
|
.taskon-reward-table__campaign-name {
|
|
1004
|
-
color: var(--taskon-color-text
|
|
1988
|
+
color: var(--taskon-color-text);
|
|
1005
1989
|
font-size: 14px;
|
|
1006
1990
|
font-weight: 500;
|
|
1007
1991
|
line-height: 1.5;
|
|
@@ -1009,32 +1993,36 @@
|
|
|
1009
1993
|
}
|
|
1010
1994
|
|
|
1011
1995
|
/* Role 名称 */
|
|
1996
|
+
|
|
1012
1997
|
.taskon-reward-table__role-name {
|
|
1013
|
-
color: var(--taskon-color-text
|
|
1998
|
+
color: var(--taskon-color-text);
|
|
1014
1999
|
font-size: 14px;
|
|
1015
2000
|
font-weight: 500;
|
|
1016
2001
|
line-height: 1.5;
|
|
1017
2002
|
}
|
|
1018
2003
|
|
|
1019
2004
|
/* 时间 */
|
|
2005
|
+
|
|
1020
2006
|
.taskon-reward-table__time {
|
|
1021
|
-
color: var(--taskon-text-secondary
|
|
2007
|
+
color: var(--taskon-color-text-secondary);
|
|
1022
2008
|
font-size: 13px;
|
|
1023
2009
|
white-space: nowrap;
|
|
1024
2010
|
}
|
|
1025
2011
|
|
|
1026
2012
|
/* 手动发放状态 */
|
|
2013
|
+
|
|
1027
2014
|
.taskon-reward-table__manual-drop {
|
|
1028
|
-
color: var(--taskon-text-tertiary
|
|
2015
|
+
color: var(--taskon-color-text-tertiary);
|
|
1029
2016
|
font-size: 13px;
|
|
1030
2017
|
}
|
|
1031
2018
|
|
|
1032
2019
|
/* 链接样式 */
|
|
2020
|
+
|
|
1033
2021
|
.taskon-reward-table__link {
|
|
1034
2022
|
background: none;
|
|
1035
2023
|
border: none;
|
|
1036
2024
|
padding: 0;
|
|
1037
|
-
color: var(--taskon-primary
|
|
2025
|
+
color: var(--taskon-color-primary);
|
|
1038
2026
|
font-size: 13px;
|
|
1039
2027
|
cursor: pointer;
|
|
1040
2028
|
text-decoration: none;
|
|
@@ -1045,14 +2033,15 @@
|
|
|
1045
2033
|
}
|
|
1046
2034
|
|
|
1047
2035
|
/* Claim 按钮 */
|
|
2036
|
+
|
|
1048
2037
|
.taskon-reward-table__claim-btn {
|
|
1049
2038
|
display: inline-flex;
|
|
1050
2039
|
align-items: center;
|
|
1051
2040
|
justify-content: center;
|
|
1052
2041
|
height: 28px;
|
|
1053
2042
|
padding: 0 12px;
|
|
1054
|
-
background-color: var(--taskon-primary
|
|
1055
|
-
color:
|
|
2043
|
+
background-color: var(--taskon-color-primary);
|
|
2044
|
+
color: var(--taskon-color-text-on-primary);
|
|
1056
2045
|
font-size: 13px;
|
|
1057
2046
|
font-weight: 500;
|
|
1058
2047
|
border: none;
|
|
@@ -1062,10 +2051,11 @@
|
|
|
1062
2051
|
}
|
|
1063
2052
|
|
|
1064
2053
|
.taskon-reward-table__claim-btn:hover {
|
|
1065
|
-
background-color: var(--taskon-primary-hover
|
|
2054
|
+
background-color: var(--taskon-color-primary-hover);
|
|
1066
2055
|
}
|
|
1067
2056
|
|
|
1068
2057
|
/* Points 表格特殊样式 */
|
|
2058
|
+
|
|
1069
2059
|
.taskon-reward-table__points-name {
|
|
1070
2060
|
display: flex;
|
|
1071
2061
|
align-items: center;
|
|
@@ -1085,11 +2075,11 @@
|
|
|
1085
2075
|
}
|
|
1086
2076
|
|
|
1087
2077
|
.taskon-reward-table__points-amount--positive {
|
|
1088
|
-
color: var(--taskon-success
|
|
2078
|
+
color: var(--taskon-color-success);
|
|
1089
2079
|
}
|
|
1090
2080
|
|
|
1091
2081
|
.taskon-reward-table__points-amount--negative {
|
|
1092
|
-
color: var(--taskon-error
|
|
2082
|
+
color: var(--taskon-color-error);
|
|
1093
2083
|
}
|
|
1094
2084
|
/**
|
|
1095
2085
|
* TokenHistoryTable 表格样式
|
|
@@ -1100,6 +2090,7 @@
|
|
|
1100
2090
|
/* ========== Token History 表格样式 ========== */
|
|
1101
2091
|
|
|
1102
2092
|
/* Amount 列容器 */
|
|
2093
|
+
|
|
1103
2094
|
.taskon-token-history__amount {
|
|
1104
2095
|
display: flex;
|
|
1105
2096
|
flex-direction: column;
|
|
@@ -1108,6 +2099,7 @@
|
|
|
1108
2099
|
}
|
|
1109
2100
|
|
|
1110
2101
|
/* Token 信息行 */
|
|
2102
|
+
|
|
1111
2103
|
.taskon-token-history__token-info {
|
|
1112
2104
|
display: flex;
|
|
1113
2105
|
align-items: center;
|
|
@@ -1115,17 +2107,20 @@
|
|
|
1115
2107
|
}
|
|
1116
2108
|
|
|
1117
2109
|
/* Token 金额值 */
|
|
2110
|
+
|
|
1118
2111
|
.taskon-token-history__token-value {
|
|
1119
|
-
color: var(--taskon-success
|
|
2112
|
+
color: var(--taskon-color-success);
|
|
1120
2113
|
font-weight: 500;
|
|
1121
2114
|
}
|
|
1122
2115
|
|
|
1123
2116
|
/* Token 名称 */
|
|
2117
|
+
|
|
1124
2118
|
.taskon-token-history__token-name {
|
|
1125
|
-
color: var(--taskon-color-text
|
|
2119
|
+
color: var(--taskon-color-text);
|
|
1126
2120
|
}
|
|
1127
2121
|
|
|
1128
2122
|
/* 链图标 */
|
|
2123
|
+
|
|
1129
2124
|
.taskon-token-history__chain-icon {
|
|
1130
2125
|
width: 18px;
|
|
1131
2126
|
height: 18px;
|
|
@@ -1134,6 +2129,7 @@
|
|
|
1134
2129
|
}
|
|
1135
2130
|
|
|
1136
2131
|
/* 分发方信息 */
|
|
2132
|
+
|
|
1137
2133
|
.taskon-token-history__distribute {
|
|
1138
2134
|
display: flex;
|
|
1139
2135
|
align-items: center;
|
|
@@ -1141,6 +2137,7 @@
|
|
|
1141
2137
|
}
|
|
1142
2138
|
|
|
1143
2139
|
/* Deposited 标签（TaskOn 托管发放） */
|
|
2140
|
+
|
|
1144
2141
|
.taskon-token-history__deposited {
|
|
1145
2142
|
font-size: 12px;
|
|
1146
2143
|
line-height: 15px;
|
|
@@ -1151,6 +2148,7 @@
|
|
|
1151
2148
|
}
|
|
1152
2149
|
|
|
1153
2150
|
/* Distributed by 容器 */
|
|
2151
|
+
|
|
1154
2152
|
.taskon-token-history__distributed-by {
|
|
1155
2153
|
display: flex;
|
|
1156
2154
|
align-items: center;
|
|
@@ -1158,13 +2156,15 @@
|
|
|
1158
2156
|
}
|
|
1159
2157
|
|
|
1160
2158
|
/* Distributed by 标签 */
|
|
2159
|
+
|
|
1161
2160
|
.taskon-token-history__distributed-label {
|
|
1162
|
-
color: var(--taskon-text-tertiary
|
|
2161
|
+
color: var(--taskon-color-text-tertiary);
|
|
1163
2162
|
font-size: 12px;
|
|
1164
2163
|
line-height: 15px;
|
|
1165
2164
|
}
|
|
1166
2165
|
|
|
1167
2166
|
/* 社区头像 */
|
|
2167
|
+
|
|
1168
2168
|
.taskon-token-history__community-avatar {
|
|
1169
2169
|
width: 14px;
|
|
1170
2170
|
height: 14px;
|
|
@@ -1178,12 +2178,14 @@
|
|
|
1178
2178
|
*/
|
|
1179
2179
|
|
|
1180
2180
|
/* ========== 自定义触发器样式 ========== */
|
|
2181
|
+
|
|
1181
2182
|
.taskon-token-select__label .taskon-select__trigger-icon {
|
|
1182
2183
|
width: 16px;
|
|
1183
2184
|
height: 16px;
|
|
1184
2185
|
}
|
|
1185
2186
|
|
|
1186
2187
|
/* ========== 链信息 ========== */
|
|
2188
|
+
|
|
1187
2189
|
.taskon-token-select__chain-info {
|
|
1188
2190
|
display: inline-flex;
|
|
1189
2191
|
align-items: center;
|
|
@@ -1203,7 +2205,7 @@
|
|
|
1203
2205
|
.taskon-token-select__chain-label {
|
|
1204
2206
|
font-size: 14px;
|
|
1205
2207
|
font-weight: 500;
|
|
1206
|
-
color:
|
|
2208
|
+
color: var(--taskon-color-text);
|
|
1207
2209
|
overflow: hidden;
|
|
1208
2210
|
text-overflow: ellipsis;
|
|
1209
2211
|
white-space: nowrap;
|
|
@@ -1211,14 +2213,16 @@
|
|
|
1211
2213
|
}
|
|
1212
2214
|
|
|
1213
2215
|
/* ========== 余额显示 ========== */
|
|
2216
|
+
|
|
1214
2217
|
.taskon-token-select__balance {
|
|
1215
2218
|
font-size: 14px;
|
|
1216
|
-
color:
|
|
2219
|
+
color: var(--taskon-color-text-tertiary);
|
|
1217
2220
|
margin-left: auto;
|
|
1218
2221
|
flex-shrink: 0;
|
|
1219
2222
|
}
|
|
1220
2223
|
|
|
1221
2224
|
/* ========== 响应式 ========== */
|
|
2225
|
+
|
|
1222
2226
|
@media (max-width: 750px) {
|
|
1223
2227
|
.taskon-token-select__chain-icon {
|
|
1224
2228
|
width: 14px;
|
|
@@ -1243,28 +2247,31 @@
|
|
|
1243
2247
|
*/
|
|
1244
2248
|
|
|
1245
2249
|
/* ========== 根容器 ========== */
|
|
2250
|
+
|
|
1246
2251
|
.taskon-receiver-address {
|
|
1247
2252
|
display: flex;
|
|
1248
2253
|
align-items: center;
|
|
1249
|
-
gap:
|
|
2254
|
+
gap: var(--taskon-spacing-sm);
|
|
1250
2255
|
font-size: 14px;
|
|
1251
2256
|
}
|
|
1252
2257
|
|
|
1253
2258
|
/* ========== 链信息 ========== */
|
|
2259
|
+
|
|
1254
2260
|
.taskon-receiver-address__chain {
|
|
1255
2261
|
display: flex;
|
|
1256
2262
|
align-items: center;
|
|
1257
|
-
gap:
|
|
2263
|
+
gap: var(--taskon-spacing-sm);
|
|
1258
2264
|
flex: 1;
|
|
1259
2265
|
height: 46px;
|
|
1260
|
-
padding:
|
|
1261
|
-
background:
|
|
1262
|
-
border-radius:
|
|
2266
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
|
|
2267
|
+
background: var(--taskon-color-bg-inset);
|
|
2268
|
+
border-radius: var(--taskon-border-radius);
|
|
1263
2269
|
font-weight: 500;
|
|
1264
|
-
color:
|
|
2270
|
+
color: var(--taskon-color-text);
|
|
1265
2271
|
}
|
|
1266
2272
|
|
|
1267
2273
|
/* ========== 链图标 ========== */
|
|
2274
|
+
|
|
1268
2275
|
.taskon-receiver-address__chain-icon {
|
|
1269
2276
|
width: 20px;
|
|
1270
2277
|
height: 20px;
|
|
@@ -1273,6 +2280,7 @@
|
|
|
1273
2280
|
}
|
|
1274
2281
|
|
|
1275
2282
|
/* ========== 链名称 ========== */
|
|
2283
|
+
|
|
1276
2284
|
.taskon-receiver-address__chain-label {
|
|
1277
2285
|
overflow: hidden;
|
|
1278
2286
|
text-overflow: ellipsis;
|
|
@@ -1280,14 +2288,15 @@
|
|
|
1280
2288
|
}
|
|
1281
2289
|
|
|
1282
2290
|
/* ========== 地址 ========== */
|
|
2291
|
+
|
|
1283
2292
|
.taskon-receiver-address__address {
|
|
1284
2293
|
flex: 1;
|
|
1285
2294
|
height: 46px;
|
|
1286
|
-
padding:
|
|
1287
|
-
background:
|
|
1288
|
-
border-radius:
|
|
2295
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
|
|
2296
|
+
background: var(--taskon-color-bg-inset);
|
|
2297
|
+
border-radius: var(--taskon-border-radius);
|
|
1289
2298
|
font-weight: 500;
|
|
1290
|
-
color:
|
|
2299
|
+
color: var(--taskon-color-text);
|
|
1291
2300
|
display: flex;
|
|
1292
2301
|
align-items: center;
|
|
1293
2302
|
overflow: hidden;
|
|
@@ -1296,10 +2305,11 @@
|
|
|
1296
2305
|
}
|
|
1297
2306
|
|
|
1298
2307
|
/* ========== 响应式 ========== */
|
|
2308
|
+
|
|
1299
2309
|
@media (max-width: 750px) {
|
|
1300
2310
|
.taskon-receiver-address {
|
|
1301
2311
|
flex-direction: column;
|
|
1302
|
-
gap:
|
|
2312
|
+
gap: var(--taskon-spacing-sm);
|
|
1303
2313
|
}
|
|
1304
2314
|
|
|
1305
2315
|
.taskon-receiver-address__chain,
|
|
@@ -1342,11 +2352,13 @@
|
|
|
1342
2352
|
}
|
|
1343
2353
|
|
|
1344
2354
|
/* 表格紧凑模式下的行高调整 */
|
|
2355
|
+
|
|
1345
2356
|
.taskon-batch-token-table__table .taskon-table__row {
|
|
1346
2357
|
height: 55px;
|
|
1347
2358
|
}
|
|
1348
2359
|
|
|
1349
2360
|
/* 表头样式 */
|
|
2361
|
+
|
|
1350
2362
|
.taskon-batch-token-table__table .taskon-table__header {
|
|
1351
2363
|
font-size: 14px;
|
|
1352
2364
|
line-height: 32px;
|
|
@@ -1354,6 +2366,7 @@
|
|
|
1354
2366
|
}
|
|
1355
2367
|
|
|
1356
2368
|
/* 单元格样式 */
|
|
2369
|
+
|
|
1357
2370
|
.taskon-batch-token-table__table .taskon-table__cell {
|
|
1358
2371
|
font-size: 14px;
|
|
1359
2372
|
line-height: 20px;
|
|
@@ -1464,21 +2477,24 @@
|
|
|
1464
2477
|
*/
|
|
1465
2478
|
|
|
1466
2479
|
/* ========== 根容器 ========== */
|
|
2480
|
+
|
|
1467
2481
|
.taskon-withdraw-form-init {
|
|
1468
2482
|
display: flex;
|
|
1469
2483
|
flex-direction: column;
|
|
1470
2484
|
}
|
|
1471
2485
|
|
|
1472
2486
|
/* ========== 标题 ========== */
|
|
2487
|
+
|
|
1473
2488
|
.taskon-withdraw-form-init__title {
|
|
1474
2489
|
margin: 0 0 20px 0;
|
|
1475
2490
|
font-size: 22px;
|
|
1476
2491
|
font-weight: 600;
|
|
1477
|
-
color:
|
|
2492
|
+
color: var(--taskon-color-text);
|
|
1478
2493
|
line-height: 1.3;
|
|
1479
2494
|
}
|
|
1480
2495
|
|
|
1481
2496
|
/* ========== 表单内容 ========== */
|
|
2497
|
+
|
|
1482
2498
|
.taskon-withdraw-form-init__content {
|
|
1483
2499
|
display: flex;
|
|
1484
2500
|
flex-direction: column;
|
|
@@ -1486,12 +2502,14 @@
|
|
|
1486
2502
|
}
|
|
1487
2503
|
|
|
1488
2504
|
/* ========== 批量提现开关 ========== */
|
|
2505
|
+
|
|
1489
2506
|
.taskon-withdraw-form-init__switch-wrap {
|
|
1490
2507
|
display: flex;
|
|
1491
2508
|
align-items: center;
|
|
1492
2509
|
}
|
|
1493
2510
|
|
|
1494
2511
|
/* ========== 底部按钮 ========== */
|
|
2512
|
+
|
|
1495
2513
|
.taskon-withdraw-form-init__footer {
|
|
1496
2514
|
margin-top: 24px;
|
|
1497
2515
|
}
|
|
@@ -1501,6 +2519,7 @@
|
|
|
1501
2519
|
}
|
|
1502
2520
|
|
|
1503
2521
|
/* ========== 响应式 ========== */
|
|
2522
|
+
|
|
1504
2523
|
@media (max-width: 750px) {
|
|
1505
2524
|
.taskon-withdraw-form-init__title {
|
|
1506
2525
|
font-size: 5.867vw;
|
|
@@ -1524,103 +2543,112 @@
|
|
|
1524
2543
|
* https://www.figma.com/design/T64H4qwU5lDTTpT8lSMO5n/Taskon-2.0?node-id=4000-1693
|
|
1525
2544
|
*/
|
|
1526
2545
|
|
|
1527
|
-
/* ========== UserCenter 专用 CSS 变量 ========== */
|
|
1528
|
-
:root {
|
|
1529
|
-
/* UserCenter 暗色模式颜色系统 */
|
|
1530
|
-
--taskon-uc-color-bg-body: #0d0d0d;
|
|
1531
|
-
--taskon-uc-color-bg-card: linear-gradient(
|
|
1532
|
-
90deg,
|
|
1533
|
-
rgba(255, 255, 255, 0.1) 0%,
|
|
1534
|
-
rgba(255, 255, 255, 0.1) 100%
|
|
1535
|
-
), #0d0d0d;
|
|
1536
|
-
|
|
1537
|
-
/* 文字颜色层级 */
|
|
1538
|
-
--taskon-uc-color-text-lightest: #ffffff;
|
|
1539
|
-
--taskon-uc-color-text-light: rgba(255, 255, 255, 0.6);
|
|
1540
|
-
--taskon-uc-color-text-dark: rgba(255, 255, 255, 0.4);
|
|
1541
|
-
--taskon-uc-color-text-darkest: rgba(255, 255, 255, 0.1);
|
|
1542
|
-
--taskon-uc-color-text-invisible: rgba(255, 255, 255, 0.04);
|
|
1543
|
-
|
|
1544
|
-
/* 边框颜色 */
|
|
1545
|
-
--taskon-uc-color-border: rgba(255, 255, 255, 0.04);
|
|
1546
|
-
--taskon-uc-color-border-btn: rgba(255, 255, 255, 0.1);
|
|
1547
|
-
|
|
1548
|
-
/* 强调色 */
|
|
1549
|
-
--taskon-uc-color-link: #ffd465;
|
|
1550
|
-
|
|
1551
|
-
/* 间距系统 (基于 Figma) */
|
|
1552
|
-
--taskon-uc-spacing-xxs: 4px;
|
|
1553
|
-
--taskon-uc-spacing-xs: 8px;
|
|
1554
|
-
--taskon-uc-spacing-s: 12px;
|
|
1555
|
-
--taskon-uc-spacing-m: 16px;
|
|
1556
|
-
--taskon-uc-spacing-l: 20px;
|
|
1557
|
-
--taskon-uc-spacing-xl: 24px;
|
|
1558
|
-
--taskon-uc-spacing-xxl: 32px;
|
|
1559
|
-
--taskon-uc-spacing-3xl: 40px;
|
|
1560
|
-
|
|
1561
|
-
/* 圆角系统 */
|
|
1562
|
-
--taskon-uc-radius-s: 4px;
|
|
1563
|
-
--taskon-uc-radius-m: 6px;
|
|
1564
|
-
--taskon-uc-radius-l: 8px;
|
|
1565
|
-
}
|
|
1566
|
-
|
|
1567
2546
|
/* ========== 容器 ========== */
|
|
2547
|
+
|
|
1568
2548
|
.taskon-user-center {
|
|
1569
2549
|
display: flex;
|
|
1570
2550
|
flex-direction: column;
|
|
1571
|
-
gap: var(--taskon-
|
|
1572
|
-
color: var(--taskon-
|
|
1573
|
-
background-color: var(--taskon-
|
|
1574
|
-
border-radius: var(--taskon-border-radius
|
|
1575
|
-
padding: var(--taskon-spacing-lg
|
|
2551
|
+
gap: var(--taskon-spacing-lg);
|
|
2552
|
+
color: var(--taskon-color-text);
|
|
2553
|
+
background-color: var(--taskon-color-bg-canvas);
|
|
2554
|
+
border-radius: var(--taskon-border-radius);
|
|
2555
|
+
padding: var(--taskon-spacing-lg);
|
|
1576
2556
|
}
|
|
1577
2557
|
|
|
1578
2558
|
.taskon-user-center--error {
|
|
1579
|
-
border: 1px solid var(--taskon-color-error
|
|
2559
|
+
border: 1px solid var(--taskon-color-error);
|
|
1580
2560
|
}
|
|
1581
2561
|
|
|
1582
2562
|
/* 旧 Tab 栏样式已移除，使用通用 Tabs 组件 */
|
|
1583
2563
|
|
|
1584
2564
|
/* ========== 内容区域 ========== */
|
|
2565
|
+
|
|
1585
2566
|
.taskon-user-center-content {
|
|
1586
2567
|
min-height: 200px;
|
|
1587
2568
|
}
|
|
1588
2569
|
|
|
2570
|
+
/* ========== UserCenter 作用域下的共享 Table 主题覆盖 ========== */
|
|
2571
|
+
|
|
2572
|
+
.taskon-user-center .taskon-table__header {
|
|
2573
|
+
color: var(--taskon-color-text-secondary);
|
|
2574
|
+
background-color: var(--taskon-color-bg-surface-subtle);
|
|
2575
|
+
}
|
|
2576
|
+
|
|
2577
|
+
.taskon-user-center .taskon-table--bordered .taskon-table__row td {
|
|
2578
|
+
border-top: 1px solid var(--taskon-color-border-secondary);
|
|
2579
|
+
border-bottom: 1px solid var(--taskon-color-border-secondary);
|
|
2580
|
+
}
|
|
2581
|
+
|
|
2582
|
+
.taskon-user-center .taskon-table__row:hover {
|
|
2583
|
+
background-color: var(--taskon-color-bg-surface-strong);
|
|
2584
|
+
}
|
|
2585
|
+
|
|
2586
|
+
.taskon-user-center .taskon-table--striped .taskon-table__row:nth-child(even) {
|
|
2587
|
+
background-color: var(--taskon-color-bg-surface-subtle);
|
|
2588
|
+
}
|
|
2589
|
+
|
|
2590
|
+
.taskon-user-center .taskon-table__row--highlighted,
|
|
2591
|
+
.taskon-user-center .taskon-table__row--highlighted:hover {
|
|
2592
|
+
background-color: var(--taskon-color-primary-bg);
|
|
2593
|
+
}
|
|
2594
|
+
|
|
2595
|
+
.taskon-user-center .taskon-table__cell,
|
|
2596
|
+
.taskon-user-center .taskon-table__empty-title {
|
|
2597
|
+
color: var(--taskon-color-text);
|
|
2598
|
+
}
|
|
2599
|
+
|
|
2600
|
+
.taskon-user-center .taskon-table__loading,
|
|
2601
|
+
.taskon-user-center .taskon-table__empty,
|
|
2602
|
+
.taskon-user-center .taskon-table__empty-desc {
|
|
2603
|
+
color: var(--taskon-color-text-disabled);
|
|
2604
|
+
}
|
|
2605
|
+
|
|
2606
|
+
.taskon-user-center .taskon-table__loading-spinner {
|
|
2607
|
+
border: 2px solid var(--taskon-color-border);
|
|
2608
|
+
border-top-color: var(--taskon-color-primary);
|
|
2609
|
+
}
|
|
2610
|
+
|
|
2611
|
+
.taskon-user-center .taskon-table__loading-overlay {
|
|
2612
|
+
background-color: var(--taskon-color-bg-mask);
|
|
2613
|
+
}
|
|
2614
|
+
|
|
1589
2615
|
/* ========== 空状态 ========== */
|
|
2616
|
+
|
|
1590
2617
|
.taskon-user-center-empty {
|
|
1591
2618
|
display: flex;
|
|
1592
2619
|
flex-direction: column;
|
|
1593
2620
|
align-items: center;
|
|
1594
2621
|
justify-content: center;
|
|
1595
|
-
padding: var(--taskon-
|
|
2622
|
+
padding: var(--taskon-spacing-xl);
|
|
1596
2623
|
text-align: center;
|
|
1597
2624
|
}
|
|
1598
2625
|
|
|
1599
2626
|
.taskon-user-center-empty__icon {
|
|
1600
|
-
margin-bottom: var(--taskon-
|
|
1601
|
-
color: var(--taskon-
|
|
2627
|
+
margin-bottom: var(--taskon-spacing-md);
|
|
2628
|
+
color: var(--taskon-color-text-disabled);
|
|
1602
2629
|
}
|
|
1603
2630
|
|
|
1604
2631
|
.taskon-user-center-empty__message {
|
|
1605
2632
|
font-size: 14px;
|
|
1606
|
-
color: var(--taskon-
|
|
2633
|
+
color: var(--taskon-color-text-disabled);
|
|
1607
2634
|
margin: 0;
|
|
1608
2635
|
}
|
|
1609
2636
|
|
|
1610
2637
|
/* ========== 加载状态 ========== */
|
|
2638
|
+
|
|
1611
2639
|
.taskon-user-center-loading {
|
|
1612
2640
|
display: flex;
|
|
1613
2641
|
flex-direction: column;
|
|
1614
2642
|
align-items: center;
|
|
1615
2643
|
justify-content: center;
|
|
1616
|
-
padding: var(--taskon-
|
|
2644
|
+
padding: var(--taskon-spacing-xl);
|
|
1617
2645
|
}
|
|
1618
2646
|
|
|
1619
2647
|
.taskon-user-center-loading__spinner {
|
|
1620
2648
|
width: 32px;
|
|
1621
2649
|
height: 32px;
|
|
1622
|
-
border: 3px solid var(--taskon-
|
|
1623
|
-
border-top-color: var(--taskon-
|
|
2650
|
+
border: 3px solid var(--taskon-color-border);
|
|
2651
|
+
border-top-color: var(--taskon-color-text);
|
|
1624
2652
|
border-radius: 50%;
|
|
1625
2653
|
animation: taskon-spin 1s linear infinite;
|
|
1626
2654
|
}
|
|
@@ -1632,18 +2660,19 @@
|
|
|
1632
2660
|
}
|
|
1633
2661
|
|
|
1634
2662
|
.taskon-user-center-loading__message {
|
|
1635
|
-
margin-top: var(--taskon-
|
|
2663
|
+
margin-top: var(--taskon-spacing-md);
|
|
1636
2664
|
font-size: 14px;
|
|
1637
|
-
color: var(--taskon-
|
|
2665
|
+
color: var(--taskon-color-text-disabled);
|
|
1638
2666
|
}
|
|
1639
2667
|
|
|
1640
2668
|
/* ========== 分页器 (基于 Figma 设计) ========== */
|
|
2669
|
+
|
|
1641
2670
|
.taskon-user-center-pagination {
|
|
1642
2671
|
display: flex;
|
|
1643
2672
|
align-items: center;
|
|
1644
2673
|
justify-content: center;
|
|
1645
|
-
gap: var(--taskon-
|
|
1646
|
-
margin-top: var(--taskon-
|
|
2674
|
+
gap: var(--taskon-spacing-md);
|
|
2675
|
+
margin-top: var(--taskon-spacing-xl);
|
|
1647
2676
|
}
|
|
1648
2677
|
|
|
1649
2678
|
.taskon-user-center-pagination__arrow {
|
|
@@ -1655,7 +2684,7 @@
|
|
|
1655
2684
|
background: transparent;
|
|
1656
2685
|
border: none;
|
|
1657
2686
|
cursor: pointer;
|
|
1658
|
-
color: var(--taskon-
|
|
2687
|
+
color: var(--taskon-color-text);
|
|
1659
2688
|
transition: opacity 0.2s ease;
|
|
1660
2689
|
}
|
|
1661
2690
|
|
|
@@ -1672,60 +2701,63 @@
|
|
|
1672
2701
|
.taskon-user-center-pagination__info {
|
|
1673
2702
|
font-size: 16px;
|
|
1674
2703
|
font-weight: 400;
|
|
1675
|
-
color: var(--taskon-
|
|
2704
|
+
color: var(--taskon-color-text);
|
|
1676
2705
|
text-transform: capitalize;
|
|
1677
2706
|
}
|
|
1678
2707
|
|
|
1679
2708
|
.taskon-user-center-pagination__info-current {
|
|
1680
|
-
color: var(--taskon-
|
|
2709
|
+
color: var(--taskon-color-text);
|
|
1681
2710
|
}
|
|
1682
2711
|
|
|
1683
2712
|
.taskon-user-center-pagination__info-total {
|
|
1684
|
-
color: var(--taskon-
|
|
2713
|
+
color: var(--taskon-color-text-disabled);
|
|
1685
2714
|
}
|
|
1686
2715
|
|
|
1687
2716
|
.taskon-user-center-pagination__info {
|
|
1688
2717
|
font-size: 14px;
|
|
1689
|
-
color: var(--taskon-color-text-secondary
|
|
2718
|
+
color: var(--taskon-color-text-secondary);
|
|
1690
2719
|
}
|
|
1691
2720
|
|
|
1692
2721
|
/* ========== 错误状态 ========== */
|
|
2722
|
+
|
|
1693
2723
|
.taskon-user-center-error {
|
|
1694
2724
|
display: flex;
|
|
1695
2725
|
flex-direction: column;
|
|
1696
2726
|
align-items: center;
|
|
1697
2727
|
justify-content: center;
|
|
1698
|
-
padding: var(--taskon-spacing-xl
|
|
2728
|
+
padding: var(--taskon-spacing-xl);
|
|
1699
2729
|
text-align: center;
|
|
1700
2730
|
}
|
|
1701
2731
|
|
|
1702
2732
|
.taskon-user-center-error__message {
|
|
1703
2733
|
font-size: 14px;
|
|
1704
|
-
color: var(--taskon-color-error
|
|
1705
|
-
margin-bottom: var(--taskon-spacing-md
|
|
2734
|
+
color: var(--taskon-color-error);
|
|
2735
|
+
margin-bottom: var(--taskon-spacing-md);
|
|
1706
2736
|
}
|
|
1707
2737
|
|
|
1708
2738
|
.taskon-user-center-error__retry {
|
|
1709
|
-
padding: var(--taskon-spacing-sm
|
|
2739
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-lg);
|
|
1710
2740
|
font-size: 14px;
|
|
1711
|
-
color:
|
|
1712
|
-
background-color: var(--taskon-color-primary
|
|
2741
|
+
color: var(--taskon-color-text-on-primary);
|
|
2742
|
+
background-color: var(--taskon-color-primary);
|
|
1713
2743
|
border: none;
|
|
1714
|
-
border-radius: var(--taskon-border-radius-sm
|
|
2744
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
1715
2745
|
cursor: pointer;
|
|
1716
2746
|
transition: background-color 0.2s ease;
|
|
1717
2747
|
}
|
|
1718
2748
|
|
|
1719
2749
|
.taskon-user-center-error__retry:hover {
|
|
1720
|
-
background-color: var(--taskon-color-primary-
|
|
2750
|
+
background-color: var(--taskon-color-primary-active);
|
|
1721
2751
|
}
|
|
1722
2752
|
|
|
1723
2753
|
/* ========== Activity History ========== */
|
|
2754
|
+
|
|
1724
2755
|
.taskon-activity-history {
|
|
1725
2756
|
width: 100%;
|
|
1726
2757
|
}
|
|
1727
2758
|
|
|
1728
2759
|
/* 自定义单元格样式（配合公共 Table 组件使用） */
|
|
2760
|
+
|
|
1729
2761
|
.taskon-activity-history__name-cell {
|
|
1730
2762
|
display: flex;
|
|
1731
2763
|
flex-direction: column;
|
|
@@ -1739,44 +2771,44 @@
|
|
|
1739
2771
|
|
|
1740
2772
|
.taskon-activity-history__cell--time {
|
|
1741
2773
|
font-size: 13px;
|
|
1742
|
-
color: var(--taskon-color-text-
|
|
2774
|
+
color: var(--taskon-color-text-disabled);
|
|
1743
2775
|
}
|
|
1744
2776
|
|
|
1745
2777
|
.taskon-activity-history__campaign-name {
|
|
1746
2778
|
font-size: 14px;
|
|
1747
2779
|
font-weight: 500;
|
|
1748
|
-
color: var(--taskon-color-text
|
|
2780
|
+
color: var(--taskon-color-text);
|
|
1749
2781
|
word-break: break-word;
|
|
1750
2782
|
}
|
|
1751
2783
|
|
|
1752
2784
|
.taskon-activity-history__campaign-type {
|
|
1753
2785
|
font-size: 12px;
|
|
1754
|
-
color: var(--taskon-color-text-
|
|
2786
|
+
color: var(--taskon-color-text-disabled);
|
|
1755
2787
|
padding: 2px 6px;
|
|
1756
|
-
background-color: var(--taskon-color-bg-
|
|
2788
|
+
background-color: var(--taskon-color-bg-surface-subtle);
|
|
1757
2789
|
border-radius: 4px;
|
|
1758
2790
|
}
|
|
1759
2791
|
|
|
1760
2792
|
.taskon-activity-history__load-more {
|
|
1761
2793
|
display: flex;
|
|
1762
2794
|
justify-content: center;
|
|
1763
|
-
margin-top: var(--taskon-spacing-md
|
|
2795
|
+
margin-top: var(--taskon-spacing-md);
|
|
1764
2796
|
}
|
|
1765
2797
|
|
|
1766
2798
|
.taskon-activity-history__load-more-btn {
|
|
1767
|
-
padding: var(--taskon-spacing-sm
|
|
2799
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-lg);
|
|
1768
2800
|
font-size: 14px;
|
|
1769
|
-
color: var(--taskon-color-primary
|
|
2801
|
+
color: var(--taskon-color-primary);
|
|
1770
2802
|
background: transparent;
|
|
1771
|
-
border: 1px solid var(--taskon-color-primary
|
|
1772
|
-
border-radius: var(--taskon-border-radius-sm
|
|
2803
|
+
border: 1px solid var(--taskon-color-primary);
|
|
2804
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
1773
2805
|
cursor: pointer;
|
|
1774
2806
|
transition: all 0.2s ease;
|
|
1775
2807
|
}
|
|
1776
2808
|
|
|
1777
2809
|
.taskon-activity-history__load-more-btn:hover:not(:disabled) {
|
|
1778
|
-
background-color: var(--taskon-color-primary
|
|
1779
|
-
color:
|
|
2810
|
+
background-color: var(--taskon-color-primary);
|
|
2811
|
+
color: var(--taskon-color-text-on-primary);
|
|
1780
2812
|
}
|
|
1781
2813
|
|
|
1782
2814
|
.taskon-activity-history__load-more-btn:disabled {
|
|
@@ -1787,24 +2819,26 @@
|
|
|
1787
2819
|
.taskon-activity-history__loading-more {
|
|
1788
2820
|
display: flex;
|
|
1789
2821
|
justify-content: center;
|
|
1790
|
-
padding: var(--taskon-spacing-md
|
|
2822
|
+
padding: var(--taskon-spacing-md);
|
|
1791
2823
|
}
|
|
1792
2824
|
|
|
1793
2825
|
/* ========== Asset Carousel ========== */
|
|
2826
|
+
|
|
1794
2827
|
.taskon-asset-carousel {
|
|
1795
2828
|
position: relative;
|
|
1796
2829
|
display: flex;
|
|
1797
2830
|
flex-direction: column;
|
|
1798
|
-
gap: var(--taskon-
|
|
1799
|
-
margin-bottom: var(--taskon-
|
|
2831
|
+
gap: var(--taskon-spacing-md);
|
|
2832
|
+
margin-bottom: var(--taskon-spacing-xl);
|
|
1800
2833
|
}
|
|
1801
2834
|
|
|
1802
2835
|
/* "You have earned" 标题 */
|
|
2836
|
+
|
|
1803
2837
|
.taskon-asset-carousel__title {
|
|
1804
2838
|
font-size: 16px;
|
|
1805
2839
|
font-weight: 600;
|
|
1806
2840
|
line-height: 24px;
|
|
1807
|
-
color: var(--taskon-
|
|
2841
|
+
color: var(--taskon-color-text);
|
|
1808
2842
|
}
|
|
1809
2843
|
|
|
1810
2844
|
.taskon-asset-carousel--empty {
|
|
@@ -1814,7 +2848,7 @@
|
|
|
1814
2848
|
.taskon-asset-carousel__container {
|
|
1815
2849
|
display: flex;
|
|
1816
2850
|
flex-wrap: wrap;
|
|
1817
|
-
gap: var(--taskon-
|
|
2851
|
+
gap: var(--taskon-spacing-sm);
|
|
1818
2852
|
}
|
|
1819
2853
|
|
|
1820
2854
|
.taskon-asset-carousel__container::-webkit-scrollbar {
|
|
@@ -1822,38 +2856,37 @@
|
|
|
1822
2856
|
}
|
|
1823
2857
|
|
|
1824
2858
|
/* 隐藏滚动箭头（改用 wrap 布局不需要箭头） */
|
|
2859
|
+
|
|
1825
2860
|
.taskon-asset-carousel__arrow {
|
|
1826
2861
|
display: none;
|
|
1827
2862
|
}
|
|
1828
2863
|
|
|
1829
2864
|
/* ========== Asset Card (基于 Figma 暗色模式设计) ========== */
|
|
2865
|
+
|
|
1830
2866
|
.taskon-asset-card {
|
|
1831
2867
|
display: flex;
|
|
1832
2868
|
flex-direction: column;
|
|
1833
|
-
gap: var(--taskon-
|
|
2869
|
+
gap: var(--taskon-spacing-md);
|
|
1834
2870
|
flex: 1 0 0;
|
|
1835
2871
|
min-width: 120px;
|
|
1836
|
-
padding: var(--taskon-
|
|
1837
|
-
background:
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
rgba(255, 255, 255, 0.1) 100%
|
|
1841
|
-
), var(--taskon-uc-color-bg-body, #0d0d0d);
|
|
1842
|
-
border: 1px solid var(--taskon-uc-color-border, rgba(255, 255, 255, 0.04));
|
|
1843
|
-
border-radius: var(--taskon-uc-radius-l, 8px);
|
|
2872
|
+
padding: var(--taskon-spacing-md);
|
|
2873
|
+
background: var(--taskon-color-bg-surface-strong);
|
|
2874
|
+
border: 1px solid var(--taskon-color-border-secondary);
|
|
2875
|
+
border-radius: var(--taskon-border-radius);
|
|
1844
2876
|
cursor: pointer;
|
|
1845
2877
|
transition: all 0.2s ease;
|
|
1846
2878
|
}
|
|
1847
2879
|
|
|
1848
2880
|
.taskon-asset-card:hover {
|
|
1849
|
-
border-color: var(--taskon-
|
|
2881
|
+
border-color: var(--taskon-color-border);
|
|
1850
2882
|
}
|
|
1851
2883
|
|
|
1852
2884
|
.taskon-asset-card--selected {
|
|
1853
|
-
border-color: var(--taskon-
|
|
2885
|
+
border-color: var(--taskon-color-text-tertiary);
|
|
1854
2886
|
}
|
|
1855
2887
|
|
|
1856
2888
|
/* 图标容器 - 默认深色背景 */
|
|
2889
|
+
|
|
1857
2890
|
.taskon-asset-card__icon {
|
|
1858
2891
|
display: flex;
|
|
1859
2892
|
align-items: center;
|
|
@@ -1861,14 +2894,15 @@
|
|
|
1861
2894
|
width: 48px;
|
|
1862
2895
|
height: 48px;
|
|
1863
2896
|
border-radius: 50%;
|
|
1864
|
-
background-color:
|
|
1865
|
-
color: var(--taskon-
|
|
2897
|
+
background-color: var(--taskon-color-bg-surface-strong);
|
|
2898
|
+
color: var(--taskon-color-text);
|
|
1866
2899
|
flex-shrink: 0;
|
|
1867
2900
|
}
|
|
1868
2901
|
|
|
1869
2902
|
/* Whitelist 图标使用白色背景 */
|
|
2903
|
+
|
|
1870
2904
|
.taskon-asset-card__icon--light {
|
|
1871
|
-
background-color:
|
|
2905
|
+
background-color: var(--taskon-color-text);
|
|
1872
2906
|
}
|
|
1873
2907
|
|
|
1874
2908
|
.taskon-asset-card__icon-img {
|
|
@@ -1879,60 +2913,66 @@
|
|
|
1879
2913
|
}
|
|
1880
2914
|
|
|
1881
2915
|
/* Whitelist "WL" 文字图标样式 - 基于 Figma 设计 */
|
|
2916
|
+
|
|
1882
2917
|
.taskon-asset-card__icon-wl {
|
|
1883
2918
|
font-size: 17.333px;
|
|
1884
2919
|
font-weight: 900;
|
|
1885
2920
|
letter-spacing: 0.6933px;
|
|
1886
|
-
color: var(--taskon-
|
|
2921
|
+
color: var(--taskon-color-bg-canvas);
|
|
1887
2922
|
line-height: 1;
|
|
1888
2923
|
}
|
|
1889
2924
|
|
|
1890
2925
|
/* NFT 文字图标样式 - 基于 Figma 设计 */
|
|
2926
|
+
|
|
1891
2927
|
.taskon-asset-card__icon-nft {
|
|
1892
2928
|
font-size: 12px;
|
|
1893
2929
|
font-weight: 700;
|
|
1894
2930
|
letter-spacing: 0.5px;
|
|
1895
|
-
color: var(--taskon-
|
|
2931
|
+
color: var(--taskon-color-text);
|
|
1896
2932
|
line-height: 1;
|
|
1897
2933
|
}
|
|
1898
2934
|
|
|
1899
2935
|
/* 内容区域 */
|
|
2936
|
+
|
|
1900
2937
|
.taskon-asset-card__content {
|
|
1901
2938
|
display: flex;
|
|
1902
2939
|
flex-direction: column;
|
|
1903
|
-
gap: var(--taskon-
|
|
2940
|
+
gap: var(--taskon-spacing-xs);
|
|
1904
2941
|
align-items: flex-start;
|
|
1905
2942
|
text-align: left;
|
|
1906
2943
|
}
|
|
1907
2944
|
|
|
1908
2945
|
/* 标题（如 Token, NFT） */
|
|
2946
|
+
|
|
1909
2947
|
.taskon-asset-card__title {
|
|
1910
2948
|
font-size: 14px;
|
|
1911
2949
|
font-weight: 500;
|
|
1912
2950
|
line-height: 20px;
|
|
1913
|
-
color: var(--taskon-
|
|
2951
|
+
color: var(--taskon-color-text-disabled);
|
|
1914
2952
|
}
|
|
1915
2953
|
|
|
1916
2954
|
/* 数值（如 $17,545） */
|
|
2955
|
+
|
|
1917
2956
|
.taskon-asset-card__value {
|
|
1918
2957
|
font-size: 20px;
|
|
1919
2958
|
font-weight: 600;
|
|
1920
2959
|
line-height: 28px;
|
|
1921
|
-
color: var(--taskon-
|
|
2960
|
+
color: var(--taskon-color-text);
|
|
1922
2961
|
}
|
|
1923
2962
|
|
|
1924
2963
|
/* ========== My Rewards Content (基于 Figma 暗色模式设计) ========== */
|
|
2964
|
+
|
|
1925
2965
|
.taskon-my-rewards {
|
|
1926
2966
|
width: 100%;
|
|
1927
2967
|
display: flex;
|
|
1928
2968
|
flex-direction: column;
|
|
1929
|
-
gap: var(--taskon-
|
|
2969
|
+
gap: var(--taskon-spacing-xl);
|
|
1930
2970
|
}
|
|
1931
2971
|
|
|
1932
2972
|
.taskon-my-rewards__section {
|
|
1933
2973
|
display: flex;
|
|
1934
2974
|
flex-direction: column;
|
|
1935
|
-
gap: var(--taskon-
|
|
2975
|
+
gap: var(--taskon-spacing-md);
|
|
1936
2976
|
}
|
|
1937
2977
|
|
|
1938
2978
|
.taskon-my-rewards__section:last-child {
|
|
@@ -1943,10 +2983,11 @@
|
|
|
1943
2983
|
font-size: 16px;
|
|
1944
2984
|
font-weight: 600;
|
|
1945
2985
|
line-height: 24px;
|
|
1946
|
-
color: var(--taskon-
|
|
2986
|
+
color: var(--taskon-color-text);
|
|
1947
2987
|
}
|
|
1948
2988
|
|
|
1949
2989
|
/* ========== Token Asset List (使用通用 Table 组件) ========== */
|
|
2990
|
+
|
|
1950
2991
|
.taskon-token-assets {
|
|
1951
2992
|
width: 100%;
|
|
1952
2993
|
display: flex;
|
|
@@ -1954,23 +2995,24 @@
|
|
|
1954
2995
|
}
|
|
1955
2996
|
|
|
1956
2997
|
/* ========== WithdrawPending 组件（参考 Vue 版本 WithdrawPending.vue） ========== */
|
|
2998
|
+
|
|
1957
2999
|
.taskon-withdraw-pending {
|
|
1958
3000
|
display: flex;
|
|
1959
3001
|
align-items: center;
|
|
1960
3002
|
justify-content: space-between;
|
|
1961
3003
|
gap: 40px;
|
|
1962
3004
|
padding: 12px 24px;
|
|
1963
|
-
margin-bottom: var(--taskon-
|
|
1964
|
-
background-color:
|
|
1965
|
-
border-radius: var(--taskon-
|
|
3005
|
+
margin-bottom: var(--taskon-spacing-sm);
|
|
3006
|
+
background-color: var(--taskon-color-secondary-bg);
|
|
3007
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
1966
3008
|
font-weight: 500;
|
|
1967
|
-
color: var(--taskon-
|
|
3009
|
+
color: var(--taskon-color-text);
|
|
1968
3010
|
cursor: pointer;
|
|
1969
3011
|
transition: background-color 0.2s ease;
|
|
1970
3012
|
}
|
|
1971
3013
|
|
|
1972
3014
|
.taskon-withdraw-pending:hover {
|
|
1973
|
-
background-color:
|
|
3015
|
+
background-color: var(--taskon-color-bg-surface-strong);
|
|
1974
3016
|
}
|
|
1975
3017
|
|
|
1976
3018
|
.taskon-withdraw-pending__left {
|
|
@@ -1980,43 +3022,49 @@
|
|
|
1980
3022
|
}
|
|
1981
3023
|
|
|
1982
3024
|
/* 数字徽章 */
|
|
3025
|
+
|
|
1983
3026
|
.taskon-withdraw-pending__count {
|
|
1984
3027
|
padding: 4px 8px;
|
|
1985
3028
|
font-size: 14px;
|
|
1986
3029
|
line-height: 1;
|
|
1987
3030
|
text-align: right;
|
|
1988
3031
|
white-space: nowrap;
|
|
1989
|
-
background-color: var(--taskon-
|
|
1990
|
-
border-radius: var(--taskon-
|
|
3032
|
+
background-color: var(--taskon-color-bg-inset);
|
|
3033
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
1991
3034
|
}
|
|
1992
3035
|
|
|
1993
3036
|
/* 提示文字 */
|
|
3037
|
+
|
|
1994
3038
|
.taskon-withdraw-pending__text {
|
|
1995
3039
|
font-size: 16px;
|
|
1996
3040
|
white-space: nowrap;
|
|
1997
3041
|
}
|
|
1998
3042
|
|
|
1999
3043
|
/* 箭头图标 */
|
|
3044
|
+
|
|
2000
3045
|
.taskon-withdraw-pending__arrow {
|
|
2001
3046
|
flex-shrink: 0;
|
|
2002
|
-
color: var(--taskon-
|
|
3047
|
+
color: var(--taskon-color-text);
|
|
2003
3048
|
}
|
|
2004
3049
|
|
|
2005
3050
|
/* Token Symbol 单元格 */
|
|
3051
|
+
|
|
2006
3052
|
.taskon-token-assets__symbol-cell {
|
|
2007
3053
|
display: flex;
|
|
2008
3054
|
align-items: center;
|
|
2009
|
-
gap: var(--taskon-
|
|
3055
|
+
gap: var(--taskon-spacing-sm);
|
|
2010
3056
|
}
|
|
2011
3057
|
|
|
2012
3058
|
/* Network 单元格 */
|
|
3059
|
+
|
|
2013
3060
|
.taskon-token-assets__network-cell {
|
|
2014
3061
|
display: flex;
|
|
2015
3062
|
align-items: center;
|
|
2016
|
-
gap: var(--taskon-
|
|
3063
|
+
gap: var(--taskon-spacing-sm);
|
|
2017
3064
|
}
|
|
2018
3065
|
|
|
2019
3066
|
/* Token 图标 */
|
|
3067
|
+
|
|
2020
3068
|
.taskon-token-assets__token-icon {
|
|
2021
3069
|
width: 24px;
|
|
2022
3070
|
height: 24px;
|
|
@@ -2026,6 +3074,7 @@
|
|
|
2026
3074
|
}
|
|
2027
3075
|
|
|
2028
3076
|
/* 链图标 */
|
|
3077
|
+
|
|
2029
3078
|
.taskon-token-assets__chain-icon {
|
|
2030
3079
|
width: 24px;
|
|
2031
3080
|
height: 24px;
|
|
@@ -2035,47 +3084,69 @@
|
|
|
2035
3084
|
}
|
|
2036
3085
|
|
|
2037
3086
|
/* Token 符号 */
|
|
3087
|
+
|
|
2038
3088
|
.taskon-token-assets__symbol {
|
|
2039
3089
|
font-size: 14px;
|
|
2040
3090
|
font-weight: 400;
|
|
2041
3091
|
line-height: normal;
|
|
2042
|
-
color: var(--taskon-
|
|
3092
|
+
color: var(--taskon-color-text);
|
|
2043
3093
|
text-transform: capitalize;
|
|
2044
3094
|
}
|
|
2045
3095
|
|
|
2046
3096
|
/* 链名称 */
|
|
3097
|
+
|
|
2047
3098
|
.taskon-token-assets__chain {
|
|
2048
3099
|
font-size: 14px;
|
|
2049
3100
|
font-weight: 400;
|
|
2050
3101
|
line-height: normal;
|
|
2051
|
-
color: var(--taskon-
|
|
3102
|
+
color: var(--taskon-color-text);
|
|
2052
3103
|
text-transform: capitalize;
|
|
2053
3104
|
}
|
|
2054
3105
|
|
|
2055
3106
|
/* 余额 */
|
|
3107
|
+
|
|
2056
3108
|
.taskon-token-assets__balance {
|
|
2057
3109
|
font-size: 14px;
|
|
2058
3110
|
font-weight: 400;
|
|
2059
3111
|
line-height: normal;
|
|
2060
|
-
color: var(--taskon-
|
|
3112
|
+
color: var(--taskon-color-text);
|
|
2061
3113
|
text-overflow: ellipsis;
|
|
2062
3114
|
overflow: hidden;
|
|
2063
3115
|
white-space: nowrap;
|
|
2064
3116
|
}
|
|
2065
3117
|
|
|
3118
|
+
/* 冻结资产入口按钮 */
|
|
3119
|
+
|
|
3120
|
+
.taskon-token-assets__frozen-btn {
|
|
3121
|
+
padding: 0;
|
|
3122
|
+
border: none;
|
|
3123
|
+
background: transparent;
|
|
3124
|
+
color: var(--taskon-color-text);
|
|
3125
|
+
text-decoration: underline;
|
|
3126
|
+
cursor: pointer;
|
|
3127
|
+
font-size: 14px;
|
|
3128
|
+
font-weight: 500;
|
|
3129
|
+
}
|
|
3130
|
+
|
|
3131
|
+
.taskon-token-assets__frozen-btn:hover {
|
|
3132
|
+
color: var(--taskon-color-text-secondary);
|
|
3133
|
+
}
|
|
3134
|
+
|
|
2066
3135
|
/* 提现按钮（覆盖通用 Button 样式以匹配设计） */
|
|
3136
|
+
|
|
2067
3137
|
.taskon-token-assets__withdraw-btn {
|
|
2068
3138
|
min-width: auto;
|
|
2069
|
-
padding: var(--taskon-
|
|
3139
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-md) !important;
|
|
2070
3140
|
height: 34px !important;
|
|
2071
|
-
border-color: var(--taskon-
|
|
3141
|
+
border-color: var(--taskon-color-border) !important;
|
|
2072
3142
|
}
|
|
2073
3143
|
|
|
2074
3144
|
.taskon-token-assets__withdraw-btn:hover:not(:disabled) {
|
|
2075
|
-
border-color: var(--taskon-
|
|
3145
|
+
border-color: var(--taskon-color-text-tertiary) !important;
|
|
2076
3146
|
}
|
|
2077
3147
|
|
|
2078
3148
|
/* ========== Reward Detail List ========== */
|
|
3149
|
+
|
|
2079
3150
|
.taskon-reward-detail {
|
|
2080
3151
|
width: 100%;
|
|
2081
3152
|
}
|
|
@@ -2083,16 +3154,16 @@
|
|
|
2083
3154
|
.taskon-reward-detail__list {
|
|
2084
3155
|
display: flex;
|
|
2085
3156
|
flex-direction: column;
|
|
2086
|
-
border: 1px solid var(--taskon-color-border
|
|
2087
|
-
border-radius: var(--taskon-border-radius-sm
|
|
3157
|
+
border: 1px solid var(--taskon-color-border);
|
|
3158
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
2088
3159
|
overflow: hidden;
|
|
2089
3160
|
}
|
|
2090
3161
|
|
|
2091
3162
|
.taskon-reward-detail__row {
|
|
2092
3163
|
display: flex;
|
|
2093
3164
|
align-items: center;
|
|
2094
|
-
padding: var(--taskon-spacing-sm
|
|
2095
|
-
border-bottom: 1px solid var(--taskon-color-border
|
|
3165
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
|
|
3166
|
+
border-bottom: 1px solid var(--taskon-color-border);
|
|
2096
3167
|
transition: background-color 0.2s ease;
|
|
2097
3168
|
}
|
|
2098
3169
|
|
|
@@ -2101,7 +3172,7 @@
|
|
|
2101
3172
|
}
|
|
2102
3173
|
|
|
2103
3174
|
.taskon-reward-detail__row:hover {
|
|
2104
|
-
background-color: var(--taskon-color-bg-
|
|
3175
|
+
background-color: var(--taskon-color-bg-surface-strong);
|
|
2105
3176
|
}
|
|
2106
3177
|
|
|
2107
3178
|
.taskon-reward-detail__row[role="button"] {
|
|
@@ -2109,7 +3180,7 @@
|
|
|
2109
3180
|
}
|
|
2110
3181
|
|
|
2111
3182
|
.taskon-reward-detail__row--nft {
|
|
2112
|
-
padding: var(--taskon-spacing-md
|
|
3183
|
+
padding: var(--taskon-spacing-md);
|
|
2113
3184
|
}
|
|
2114
3185
|
|
|
2115
3186
|
.taskon-reward-detail__cell {
|
|
@@ -2119,12 +3190,12 @@
|
|
|
2119
3190
|
|
|
2120
3191
|
.taskon-reward-detail__cell--icon {
|
|
2121
3192
|
width: 32px;
|
|
2122
|
-
margin-right: var(--taskon-spacing-sm
|
|
3193
|
+
margin-right: var(--taskon-spacing-sm);
|
|
2123
3194
|
}
|
|
2124
3195
|
|
|
2125
3196
|
.taskon-reward-detail__cell--nft-image {
|
|
2126
3197
|
width: 60px;
|
|
2127
|
-
margin-right: var(--taskon-spacing-md
|
|
3198
|
+
margin-right: var(--taskon-spacing-md);
|
|
2128
3199
|
}
|
|
2129
3200
|
|
|
2130
3201
|
.taskon-reward-detail__cell--main {
|
|
@@ -2137,12 +3208,12 @@
|
|
|
2137
3208
|
|
|
2138
3209
|
.taskon-reward-detail__cell--time {
|
|
2139
3210
|
font-size: 13px;
|
|
2140
|
-
color: var(--taskon-color-text-secondary
|
|
3211
|
+
color: var(--taskon-color-text-secondary);
|
|
2141
3212
|
white-space: nowrap;
|
|
2142
3213
|
}
|
|
2143
3214
|
|
|
2144
3215
|
.taskon-reward-detail__cell--action {
|
|
2145
|
-
margin-left: var(--taskon-spacing-md
|
|
3216
|
+
margin-left: var(--taskon-spacing-md);
|
|
2146
3217
|
}
|
|
2147
3218
|
|
|
2148
3219
|
.taskon-reward-detail__token-icon {
|
|
@@ -2155,14 +3226,14 @@
|
|
|
2155
3226
|
.taskon-reward-detail__nft-image {
|
|
2156
3227
|
width: 60px;
|
|
2157
3228
|
height: 60px;
|
|
2158
|
-
border-radius: var(--taskon-border-radius-sm
|
|
3229
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
2159
3230
|
object-fit: cover;
|
|
2160
3231
|
}
|
|
2161
3232
|
|
|
2162
3233
|
.taskon-reward-detail__primary {
|
|
2163
3234
|
font-size: 14px;
|
|
2164
3235
|
font-weight: 500;
|
|
2165
|
-
color: var(--taskon-color-text
|
|
3236
|
+
color: var(--taskon-color-text);
|
|
2166
3237
|
white-space: nowrap;
|
|
2167
3238
|
overflow: hidden;
|
|
2168
3239
|
text-overflow: ellipsis;
|
|
@@ -2170,40 +3241,41 @@
|
|
|
2170
3241
|
|
|
2171
3242
|
.taskon-reward-detail__secondary {
|
|
2172
3243
|
font-size: 12px;
|
|
2173
|
-
color: var(--taskon-color-text-secondary
|
|
3244
|
+
color: var(--taskon-color-text-secondary);
|
|
2174
3245
|
white-space: nowrap;
|
|
2175
3246
|
overflow: hidden;
|
|
2176
3247
|
text-overflow: ellipsis;
|
|
2177
3248
|
}
|
|
2178
3249
|
|
|
2179
3250
|
.taskon-reward-detail__claim-btn {
|
|
2180
|
-
padding: var(--taskon-spacing-xs
|
|
3251
|
+
padding: var(--taskon-spacing-xs) var(--taskon-spacing-md);
|
|
2181
3252
|
font-size: 14px;
|
|
2182
3253
|
font-weight: 500;
|
|
2183
|
-
color:
|
|
2184
|
-
background-color: var(--taskon-color-primary
|
|
3254
|
+
color: var(--taskon-color-text-on-primary);
|
|
3255
|
+
background-color: var(--taskon-color-primary);
|
|
2185
3256
|
border: none;
|
|
2186
|
-
border-radius: var(--taskon-border-radius-sm
|
|
3257
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
2187
3258
|
cursor: pointer;
|
|
2188
3259
|
transition: background-color 0.2s ease;
|
|
2189
3260
|
}
|
|
2190
3261
|
|
|
2191
3262
|
.taskon-reward-detail__claim-btn:hover {
|
|
2192
|
-
background-color: var(--taskon-color-primary-
|
|
3263
|
+
background-color: var(--taskon-color-primary-active);
|
|
2193
3264
|
}
|
|
2194
3265
|
|
|
2195
3266
|
.taskon-reward-detail__claimed {
|
|
2196
3267
|
font-size: 14px;
|
|
2197
|
-
color: var(--taskon-color-success
|
|
3268
|
+
color: var(--taskon-color-success);
|
|
2198
3269
|
}
|
|
2199
3270
|
|
|
2200
3271
|
.taskon-reward-detail__loading-more {
|
|
2201
3272
|
display: flex;
|
|
2202
3273
|
justify-content: center;
|
|
2203
|
-
padding: var(--taskon-spacing-md
|
|
3274
|
+
padding: var(--taskon-spacing-md);
|
|
2204
3275
|
}
|
|
2205
3276
|
|
|
2206
3277
|
/* ========== Withdraw Modal ========== */
|
|
3278
|
+
|
|
2207
3279
|
.taskon-withdraw-modal {
|
|
2208
3280
|
position: fixed;
|
|
2209
3281
|
inset: 0;
|
|
@@ -2216,7 +3288,7 @@
|
|
|
2216
3288
|
.taskon-withdraw-modal__overlay {
|
|
2217
3289
|
position: absolute;
|
|
2218
3290
|
inset: 0;
|
|
2219
|
-
background-color:
|
|
3291
|
+
background-color: var(--taskon-color-bg-mask);
|
|
2220
3292
|
}
|
|
2221
3293
|
|
|
2222
3294
|
.taskon-withdraw-modal__content {
|
|
@@ -2224,9 +3296,9 @@
|
|
|
2224
3296
|
width: 90%;
|
|
2225
3297
|
max-width: 400px;
|
|
2226
3298
|
max-height: 90vh;
|
|
2227
|
-
background-color: var(--taskon-color-bg
|
|
2228
|
-
border-radius: var(--taskon-border-radius
|
|
2229
|
-
box-shadow: 0 20px 25px -5px
|
|
3299
|
+
background-color: var(--taskon-color-bg-surface);
|
|
3300
|
+
border-radius: var(--taskon-border-radius);
|
|
3301
|
+
box-shadow: 0 20px 25px -5px var(--taskon-color-bg-mask);
|
|
2230
3302
|
overflow: hidden;
|
|
2231
3303
|
display: flex;
|
|
2232
3304
|
flex-direction: column;
|
|
@@ -2236,14 +3308,14 @@
|
|
|
2236
3308
|
display: flex;
|
|
2237
3309
|
align-items: center;
|
|
2238
3310
|
justify-content: space-between;
|
|
2239
|
-
padding: var(--taskon-spacing-md
|
|
2240
|
-
border-bottom: 1px solid var(--taskon-color-border
|
|
3311
|
+
padding: var(--taskon-spacing-md) var(--taskon-spacing-lg);
|
|
3312
|
+
border-bottom: 1px solid var(--taskon-color-border);
|
|
2241
3313
|
}
|
|
2242
3314
|
|
|
2243
3315
|
.taskon-withdraw-modal__title {
|
|
2244
3316
|
font-size: 18px;
|
|
2245
3317
|
font-weight: 600;
|
|
2246
|
-
color: var(--taskon-color-text
|
|
3318
|
+
color: var(--taskon-color-text);
|
|
2247
3319
|
margin: 0;
|
|
2248
3320
|
}
|
|
2249
3321
|
|
|
@@ -2254,13 +3326,13 @@
|
|
|
2254
3326
|
padding: 4px;
|
|
2255
3327
|
background: none;
|
|
2256
3328
|
border: none;
|
|
2257
|
-
color: var(--taskon-color-text-secondary
|
|
3329
|
+
color: var(--taskon-color-text-secondary);
|
|
2258
3330
|
cursor: pointer;
|
|
2259
3331
|
transition: color 0.2s ease;
|
|
2260
3332
|
}
|
|
2261
3333
|
|
|
2262
3334
|
.taskon-withdraw-modal__close:hover:not(:disabled) {
|
|
2263
|
-
color: var(--taskon-color-text
|
|
3335
|
+
color: var(--taskon-color-text);
|
|
2264
3336
|
}
|
|
2265
3337
|
|
|
2266
3338
|
.taskon-withdraw-modal__close:disabled {
|
|
@@ -2269,58 +3341,58 @@
|
|
|
2269
3341
|
}
|
|
2270
3342
|
|
|
2271
3343
|
.taskon-withdraw-modal__body {
|
|
2272
|
-
padding: var(--taskon-spacing-lg
|
|
3344
|
+
padding: var(--taskon-spacing-lg);
|
|
2273
3345
|
overflow-y: auto;
|
|
2274
3346
|
}
|
|
2275
3347
|
|
|
2276
3348
|
.taskon-withdraw-modal__icon {
|
|
2277
3349
|
display: flex;
|
|
2278
3350
|
justify-content: center;
|
|
2279
|
-
margin-bottom: var(--taskon-spacing-md
|
|
3351
|
+
margin-bottom: var(--taskon-spacing-md);
|
|
2280
3352
|
}
|
|
2281
3353
|
|
|
2282
3354
|
.taskon-withdraw-modal__icon--success {
|
|
2283
|
-
color: var(--taskon-color-success
|
|
3355
|
+
color: var(--taskon-color-success);
|
|
2284
3356
|
}
|
|
2285
3357
|
|
|
2286
3358
|
.taskon-withdraw-modal__icon--warning {
|
|
2287
|
-
color: var(--taskon-color-warning
|
|
3359
|
+
color: var(--taskon-color-warning);
|
|
2288
3360
|
}
|
|
2289
3361
|
|
|
2290
3362
|
.taskon-withdraw-modal__message {
|
|
2291
3363
|
font-size: 14px;
|
|
2292
|
-
color: var(--taskon-color-text
|
|
3364
|
+
color: var(--taskon-color-text);
|
|
2293
3365
|
text-align: center;
|
|
2294
3366
|
margin: 0;
|
|
2295
3367
|
}
|
|
2296
3368
|
|
|
2297
3369
|
.taskon-withdraw-modal__tx-hash {
|
|
2298
3370
|
font-size: 12px;
|
|
2299
|
-
color: var(--taskon-color-text-secondary
|
|
3371
|
+
color: var(--taskon-color-text-secondary);
|
|
2300
3372
|
text-align: center;
|
|
2301
|
-
margin-top: var(--taskon-spacing-sm
|
|
3373
|
+
margin-top: var(--taskon-spacing-sm);
|
|
2302
3374
|
word-break: break-all;
|
|
2303
3375
|
}
|
|
2304
3376
|
|
|
2305
3377
|
.taskon-withdraw-modal__tokens {
|
|
2306
3378
|
display: flex;
|
|
2307
3379
|
flex-direction: column;
|
|
2308
|
-
gap: var(--taskon-spacing-sm
|
|
3380
|
+
gap: var(--taskon-spacing-sm);
|
|
2309
3381
|
}
|
|
2310
3382
|
|
|
2311
3383
|
.taskon-withdraw-modal__token-item {
|
|
2312
3384
|
display: flex;
|
|
2313
3385
|
align-items: center;
|
|
2314
3386
|
justify-content: space-between;
|
|
2315
|
-
padding: var(--taskon-spacing-sm
|
|
2316
|
-
background-color: var(--taskon-color-bg-
|
|
2317
|
-
border-radius: var(--taskon-border-radius-sm
|
|
3387
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
|
|
3388
|
+
background-color: var(--taskon-color-bg-surface-subtle);
|
|
3389
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
2318
3390
|
}
|
|
2319
3391
|
|
|
2320
3392
|
.taskon-withdraw-modal__token-info {
|
|
2321
3393
|
display: flex;
|
|
2322
3394
|
align-items: center;
|
|
2323
|
-
gap: var(--taskon-spacing-sm
|
|
3395
|
+
gap: var(--taskon-spacing-sm);
|
|
2324
3396
|
}
|
|
2325
3397
|
|
|
2326
3398
|
.taskon-withdraw-modal__token-icon {
|
|
@@ -2339,63 +3411,63 @@
|
|
|
2339
3411
|
.taskon-withdraw-modal__token-symbol {
|
|
2340
3412
|
font-size: 14px;
|
|
2341
3413
|
font-weight: 500;
|
|
2342
|
-
color: var(--taskon-color-text
|
|
3414
|
+
color: var(--taskon-color-text);
|
|
2343
3415
|
}
|
|
2344
3416
|
|
|
2345
3417
|
.taskon-withdraw-modal__token-chain {
|
|
2346
3418
|
font-size: 12px;
|
|
2347
|
-
color: var(--taskon-color-text-secondary
|
|
3419
|
+
color: var(--taskon-color-text-secondary);
|
|
2348
3420
|
}
|
|
2349
3421
|
|
|
2350
3422
|
.taskon-withdraw-modal__token-amount {
|
|
2351
3423
|
font-size: 16px;
|
|
2352
3424
|
font-weight: 600;
|
|
2353
|
-
color: var(--taskon-color-text
|
|
3425
|
+
color: var(--taskon-color-text);
|
|
2354
3426
|
}
|
|
2355
3427
|
|
|
2356
3428
|
.taskon-withdraw-modal__error {
|
|
2357
|
-
margin-top: var(--taskon-spacing-md
|
|
2358
|
-
padding: var(--taskon-spacing-sm
|
|
3429
|
+
margin-top: var(--taskon-spacing-md);
|
|
3430
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
|
|
2359
3431
|
font-size: 14px;
|
|
2360
|
-
color: var(--taskon-color-error
|
|
2361
|
-
background-color: var(--taskon-color-error-
|
|
2362
|
-
border-radius: var(--taskon-border-radius-sm
|
|
3432
|
+
color: var(--taskon-color-error);
|
|
3433
|
+
background-color: var(--taskon-color-error-bg);
|
|
3434
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
2363
3435
|
}
|
|
2364
3436
|
|
|
2365
3437
|
.taskon-withdraw-modal__footer {
|
|
2366
3438
|
display: flex;
|
|
2367
|
-
gap: var(--taskon-spacing-sm
|
|
2368
|
-
padding: var(--taskon-spacing-md
|
|
2369
|
-
border-top: 1px solid var(--taskon-color-border
|
|
3439
|
+
gap: var(--taskon-spacing-sm);
|
|
3440
|
+
padding: var(--taskon-spacing-md) var(--taskon-spacing-lg);
|
|
3441
|
+
border-top: 1px solid var(--taskon-color-border);
|
|
2370
3442
|
}
|
|
2371
3443
|
|
|
2372
3444
|
.taskon-withdraw-modal__btn {
|
|
2373
3445
|
flex: 1;
|
|
2374
|
-
padding: var(--taskon-spacing-sm
|
|
3446
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-lg);
|
|
2375
3447
|
font-size: 14px;
|
|
2376
3448
|
font-weight: 500;
|
|
2377
3449
|
border: none;
|
|
2378
|
-
border-radius: var(--taskon-border-radius-sm
|
|
3450
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
2379
3451
|
cursor: pointer;
|
|
2380
3452
|
transition: all 0.2s ease;
|
|
2381
3453
|
}
|
|
2382
3454
|
|
|
2383
3455
|
.taskon-withdraw-modal__btn--primary {
|
|
2384
|
-
color:
|
|
2385
|
-
background-color: var(--taskon-color-primary
|
|
3456
|
+
color: var(--taskon-color-text-on-primary);
|
|
3457
|
+
background-color: var(--taskon-color-primary);
|
|
2386
3458
|
}
|
|
2387
3459
|
|
|
2388
3460
|
.taskon-withdraw-modal__btn--primary:hover:not(:disabled) {
|
|
2389
|
-
background-color: var(--taskon-color-primary-
|
|
3461
|
+
background-color: var(--taskon-color-primary-active);
|
|
2390
3462
|
}
|
|
2391
3463
|
|
|
2392
3464
|
.taskon-withdraw-modal__btn--secondary {
|
|
2393
|
-
color: var(--taskon-color-text
|
|
2394
|
-
background-color: var(--taskon-color-bg-
|
|
3465
|
+
color: var(--taskon-color-text);
|
|
3466
|
+
background-color: var(--taskon-color-bg-surface-subtle);
|
|
2395
3467
|
}
|
|
2396
3468
|
|
|
2397
3469
|
.taskon-withdraw-modal__btn--secondary:hover:not(:disabled) {
|
|
2398
|
-
background-color: var(--taskon-color-bg-
|
|
3470
|
+
background-color: var(--taskon-color-bg-surface-strong);
|
|
2399
3471
|
}
|
|
2400
3472
|
|
|
2401
3473
|
.taskon-withdraw-modal__btn:disabled {
|
|
@@ -2407,19 +3479,20 @@
|
|
|
2407
3479
|
display: flex;
|
|
2408
3480
|
align-items: center;
|
|
2409
3481
|
justify-content: center;
|
|
2410
|
-
gap: var(--taskon-spacing-sm
|
|
3482
|
+
gap: var(--taskon-spacing-sm);
|
|
2411
3483
|
}
|
|
2412
3484
|
|
|
2413
3485
|
.taskon-withdraw-modal__spinner {
|
|
2414
3486
|
width: 16px;
|
|
2415
3487
|
height: 16px;
|
|
2416
|
-
border: 2px solid
|
|
2417
|
-
border-top-color:
|
|
3488
|
+
border: 2px solid var(--taskon-color-border);
|
|
3489
|
+
border-top-color: var(--taskon-color-text-on-primary);
|
|
2418
3490
|
border-radius: 50%;
|
|
2419
3491
|
animation: taskon-spin 1s linear infinite;
|
|
2420
3492
|
}
|
|
2421
3493
|
|
|
2422
3494
|
/* ========== Frozen Asset List ========== */
|
|
3495
|
+
|
|
2423
3496
|
.taskon-frozen-assets {
|
|
2424
3497
|
width: 100%;
|
|
2425
3498
|
}
|
|
@@ -2428,13 +3501,13 @@
|
|
|
2428
3501
|
display: flex;
|
|
2429
3502
|
align-items: center;
|
|
2430
3503
|
justify-content: space-between;
|
|
2431
|
-
margin-bottom: var(--taskon-spacing-md
|
|
3504
|
+
margin-bottom: var(--taskon-spacing-md);
|
|
2432
3505
|
}
|
|
2433
3506
|
|
|
2434
3507
|
.taskon-frozen-assets__title {
|
|
2435
3508
|
font-size: 16px;
|
|
2436
3509
|
font-weight: 600;
|
|
2437
|
-
color: var(--taskon-color-text
|
|
3510
|
+
color: var(--taskon-color-text);
|
|
2438
3511
|
margin: 0;
|
|
2439
3512
|
}
|
|
2440
3513
|
|
|
@@ -2445,28 +3518,28 @@
|
|
|
2445
3518
|
padding: 4px;
|
|
2446
3519
|
background: none;
|
|
2447
3520
|
border: none;
|
|
2448
|
-
color: var(--taskon-color-text-secondary
|
|
3521
|
+
color: var(--taskon-color-text-secondary);
|
|
2449
3522
|
cursor: pointer;
|
|
2450
3523
|
transition: color 0.2s ease;
|
|
2451
3524
|
}
|
|
2452
3525
|
|
|
2453
3526
|
.taskon-frozen-assets__close:hover {
|
|
2454
|
-
color: var(--taskon-color-text
|
|
3527
|
+
color: var(--taskon-color-text);
|
|
2455
3528
|
}
|
|
2456
3529
|
|
|
2457
3530
|
.taskon-frozen-assets__list {
|
|
2458
3531
|
display: flex;
|
|
2459
3532
|
flex-direction: column;
|
|
2460
|
-
gap: var(--taskon-spacing-sm
|
|
3533
|
+
gap: var(--taskon-spacing-sm);
|
|
2461
3534
|
}
|
|
2462
3535
|
|
|
2463
3536
|
.taskon-frozen-assets__item {
|
|
2464
3537
|
display: flex;
|
|
2465
3538
|
align-items: center;
|
|
2466
3539
|
justify-content: space-between;
|
|
2467
|
-
padding: var(--taskon-spacing-md
|
|
2468
|
-
background-color: var(--taskon-color-bg-
|
|
2469
|
-
border-radius: var(--taskon-border-radius
|
|
3540
|
+
padding: var(--taskon-spacing-md);
|
|
3541
|
+
background-color: var(--taskon-color-bg-surface-subtle);
|
|
3542
|
+
border-radius: var(--taskon-border-radius);
|
|
2470
3543
|
}
|
|
2471
3544
|
|
|
2472
3545
|
.taskon-frozen-assets__info {
|
|
@@ -2484,41 +3557,42 @@
|
|
|
2484
3557
|
.taskon-frozen-assets__amount {
|
|
2485
3558
|
font-size: 16px;
|
|
2486
3559
|
font-weight: 600;
|
|
2487
|
-
color: var(--taskon-color-text
|
|
3560
|
+
color: var(--taskon-color-text);
|
|
2488
3561
|
}
|
|
2489
3562
|
|
|
2490
3563
|
.taskon-frozen-assets__type {
|
|
2491
3564
|
font-size: 12px;
|
|
2492
|
-
color: var(--taskon-color-text-secondary
|
|
3565
|
+
color: var(--taskon-color-text-secondary);
|
|
2493
3566
|
}
|
|
2494
3567
|
|
|
2495
3568
|
.taskon-frozen-assets__campaign {
|
|
2496
3569
|
font-size: 12px;
|
|
2497
|
-
color: var(--taskon-color-text-secondary
|
|
3570
|
+
color: var(--taskon-color-text-secondary);
|
|
2498
3571
|
}
|
|
2499
3572
|
|
|
2500
3573
|
.taskon-frozen-assets__time {
|
|
2501
3574
|
font-size: 12px;
|
|
2502
|
-
color: var(--taskon-color-text-secondary
|
|
3575
|
+
color: var(--taskon-color-text-secondary);
|
|
2503
3576
|
}
|
|
2504
3577
|
|
|
2505
3578
|
.taskon-frozen-assets__resend-btn {
|
|
2506
|
-
padding: var(--taskon-spacing-xs
|
|
3579
|
+
padding: var(--taskon-spacing-xs) var(--taskon-spacing-md);
|
|
2507
3580
|
font-size: 14px;
|
|
2508
|
-
color: var(--taskon-color-primary
|
|
3581
|
+
color: var(--taskon-color-primary);
|
|
2509
3582
|
background: transparent;
|
|
2510
|
-
border: 1px solid var(--taskon-color-primary
|
|
2511
|
-
border-radius: var(--taskon-border-radius-sm
|
|
3583
|
+
border: 1px solid var(--taskon-color-primary);
|
|
3584
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
2512
3585
|
cursor: pointer;
|
|
2513
3586
|
transition: all 0.2s ease;
|
|
2514
3587
|
}
|
|
2515
3588
|
|
|
2516
3589
|
.taskon-frozen-assets__resend-btn:hover {
|
|
2517
|
-
background-color: var(--taskon-color-primary
|
|
2518
|
-
color:
|
|
3590
|
+
background-color: var(--taskon-color-primary);
|
|
3591
|
+
color: var(--taskon-color-text-on-primary);
|
|
2519
3592
|
}
|
|
2520
3593
|
|
|
2521
3594
|
/* ========== Progress Bar ========== */
|
|
3595
|
+
|
|
2522
3596
|
.taskon-progress-bar {
|
|
2523
3597
|
width: 100%;
|
|
2524
3598
|
}
|
|
@@ -2526,14 +3600,14 @@
|
|
|
2526
3600
|
.taskon-progress-bar__container {
|
|
2527
3601
|
width: 100%;
|
|
2528
3602
|
height: 8px;
|
|
2529
|
-
background-color: var(--taskon-color-bg-
|
|
3603
|
+
background-color: var(--taskon-color-bg-surface-subtle);
|
|
2530
3604
|
border-radius: 9999px;
|
|
2531
3605
|
overflow: hidden;
|
|
2532
3606
|
}
|
|
2533
3607
|
|
|
2534
3608
|
.taskon-progress-bar__fill {
|
|
2535
3609
|
height: 100%;
|
|
2536
|
-
background-color: var(--taskon-color-primary
|
|
3610
|
+
background-color: var(--taskon-color-primary);
|
|
2537
3611
|
border-radius: 9999px;
|
|
2538
3612
|
transition: width 0.3s ease;
|
|
2539
3613
|
}
|
|
@@ -2542,9 +3616,9 @@
|
|
|
2542
3616
|
display: flex;
|
|
2543
3617
|
justify-content: space-between;
|
|
2544
3618
|
align-items: center;
|
|
2545
|
-
margin-top: var(--taskon-spacing-xs
|
|
3619
|
+
margin-top: var(--taskon-spacing-xs);
|
|
2546
3620
|
font-size: 12px;
|
|
2547
|
-
color: var(--taskon-color-text-secondary
|
|
3621
|
+
color: var(--taskon-color-text-secondary);
|
|
2548
3622
|
}
|
|
2549
3623
|
|
|
2550
3624
|
.taskon-progress-bar__values {
|
|
@@ -2553,10 +3627,11 @@
|
|
|
2553
3627
|
|
|
2554
3628
|
.taskon-progress-bar__percent {
|
|
2555
3629
|
font-weight: 600;
|
|
2556
|
-
color: var(--taskon-color-primary
|
|
3630
|
+
color: var(--taskon-color-primary);
|
|
2557
3631
|
}
|
|
2558
3632
|
|
|
2559
3633
|
/* ========== XP Level Card ========== */
|
|
3634
|
+
|
|
2560
3635
|
.taskon-xp-level-card {
|
|
2561
3636
|
width: 100%;
|
|
2562
3637
|
}
|
|
@@ -2565,13 +3640,13 @@
|
|
|
2565
3640
|
display: flex;
|
|
2566
3641
|
align-items: center;
|
|
2567
3642
|
justify-content: space-between;
|
|
2568
|
-
margin-bottom: var(--taskon-spacing-md
|
|
3643
|
+
margin-bottom: var(--taskon-spacing-md);
|
|
2569
3644
|
}
|
|
2570
3645
|
|
|
2571
3646
|
.taskon-xp-level-card__level {
|
|
2572
3647
|
display: flex;
|
|
2573
3648
|
align-items: center;
|
|
2574
|
-
gap: var(--taskon-spacing-sm
|
|
3649
|
+
gap: var(--taskon-spacing-sm);
|
|
2575
3650
|
}
|
|
2576
3651
|
|
|
2577
3652
|
.taskon-xp-level-card__level-badge {
|
|
@@ -2580,9 +3655,13 @@
|
|
|
2580
3655
|
justify-content: center;
|
|
2581
3656
|
width: 48px;
|
|
2582
3657
|
height: 48px;
|
|
2583
|
-
background: linear-gradient(
|
|
3658
|
+
background: linear-gradient(
|
|
3659
|
+
135deg,
|
|
3660
|
+
var(--taskon-color-primary),
|
|
3661
|
+
var(--taskon-color-primary-hover)
|
|
3662
|
+
);
|
|
2584
3663
|
border-radius: 50%;
|
|
2585
|
-
color:
|
|
3664
|
+
color: var(--taskon-color-text-on-primary);
|
|
2586
3665
|
font-size: 18px;
|
|
2587
3666
|
font-weight: 700;
|
|
2588
3667
|
}
|
|
@@ -2595,13 +3674,13 @@
|
|
|
2595
3674
|
|
|
2596
3675
|
.taskon-xp-level-card__level-label {
|
|
2597
3676
|
font-size: 12px;
|
|
2598
|
-
color: var(--taskon-color-text-secondary
|
|
3677
|
+
color: var(--taskon-color-text-secondary);
|
|
2599
3678
|
}
|
|
2600
3679
|
|
|
2601
3680
|
.taskon-xp-level-card__level-value {
|
|
2602
3681
|
font-size: 20px;
|
|
2603
3682
|
font-weight: 700;
|
|
2604
|
-
color: var(--taskon-color-text
|
|
3683
|
+
color: var(--taskon-color-text);
|
|
2605
3684
|
}
|
|
2606
3685
|
|
|
2607
3686
|
.taskon-xp-level-card__xp {
|
|
@@ -2613,33 +3692,33 @@
|
|
|
2613
3692
|
|
|
2614
3693
|
.taskon-xp-level-card__xp-label {
|
|
2615
3694
|
font-size: 12px;
|
|
2616
|
-
color: var(--taskon-color-text-secondary
|
|
3695
|
+
color: var(--taskon-color-text-secondary);
|
|
2617
3696
|
}
|
|
2618
3697
|
|
|
2619
3698
|
.taskon-xp-level-card__xp-value {
|
|
2620
3699
|
font-size: 18px;
|
|
2621
3700
|
font-weight: 600;
|
|
2622
|
-
color: var(--taskon-color-text
|
|
3701
|
+
color: var(--taskon-color-text);
|
|
2623
3702
|
}
|
|
2624
3703
|
|
|
2625
3704
|
.taskon-xp-level-card__progress {
|
|
2626
|
-
margin-bottom: var(--taskon-spacing-lg
|
|
3705
|
+
margin-bottom: var(--taskon-spacing-lg);
|
|
2627
3706
|
}
|
|
2628
3707
|
|
|
2629
3708
|
.taskon-xp-level-card__progress-label {
|
|
2630
3709
|
display: flex;
|
|
2631
3710
|
justify-content: space-between;
|
|
2632
3711
|
align-items: center;
|
|
2633
|
-
margin-bottom: var(--taskon-spacing-xs
|
|
3712
|
+
margin-bottom: var(--taskon-spacing-xs);
|
|
2634
3713
|
font-size: 12px;
|
|
2635
|
-
color: var(--taskon-color-text-secondary
|
|
3714
|
+
color: var(--taskon-color-text-secondary);
|
|
2636
3715
|
}
|
|
2637
3716
|
|
|
2638
3717
|
.taskon-xp-level-card__history-title {
|
|
2639
3718
|
font-size: 16px;
|
|
2640
3719
|
font-weight: 600;
|
|
2641
|
-
color: var(--taskon-color-text
|
|
2642
|
-
margin-bottom: var(--taskon-spacing-md
|
|
3720
|
+
color: var(--taskon-color-text);
|
|
3721
|
+
margin-bottom: var(--taskon-spacing-md);
|
|
2643
3722
|
}
|
|
2644
3723
|
|
|
2645
3724
|
/* ============================================================================
|
|
@@ -2649,23 +3728,23 @@
|
|
|
2649
3728
|
.taskon-identity {
|
|
2650
3729
|
display: flex;
|
|
2651
3730
|
flex-direction: column;
|
|
2652
|
-
gap: var(--taskon-
|
|
3731
|
+
gap: var(--taskon-spacing-xl);
|
|
2653
3732
|
}
|
|
2654
3733
|
|
|
2655
3734
|
.taskon-identity-loading {
|
|
2656
3735
|
display: flex;
|
|
2657
3736
|
justify-content: center;
|
|
2658
3737
|
align-items: center;
|
|
2659
|
-
padding: var(--taskon-spacing-xl
|
|
2660
|
-
color: var(--taskon-
|
|
3738
|
+
padding: var(--taskon-spacing-xl);
|
|
3739
|
+
color: var(--taskon-color-text-tertiary);
|
|
2661
3740
|
}
|
|
2662
3741
|
|
|
2663
3742
|
.taskon-identity-empty {
|
|
2664
3743
|
display: flex;
|
|
2665
3744
|
justify-content: center;
|
|
2666
3745
|
align-items: center;
|
|
2667
|
-
padding: var(--taskon-spacing-xl
|
|
2668
|
-
color: var(--taskon-
|
|
3746
|
+
padding: var(--taskon-spacing-xl);
|
|
3747
|
+
color: var(--taskon-color-text-tertiary);
|
|
2669
3748
|
font-size: 14px;
|
|
2670
3749
|
}
|
|
2671
3750
|
|
|
@@ -2675,53 +3754,59 @@
|
|
|
2675
3754
|
============================================================================ */
|
|
2676
3755
|
|
|
2677
3756
|
/* 社交账号区域 */
|
|
3757
|
+
|
|
2678
3758
|
.taskon-identity-social-section {
|
|
2679
3759
|
display: flex;
|
|
2680
3760
|
flex-direction: column;
|
|
2681
|
-
gap: var(--taskon-
|
|
3761
|
+
gap: var(--taskon-spacing-md);
|
|
2682
3762
|
}
|
|
2683
3763
|
|
|
2684
3764
|
/* 标题: 24px 加粗白色 */
|
|
3765
|
+
|
|
2685
3766
|
.taskon-identity-social-section__title {
|
|
2686
3767
|
font-size: 24px;
|
|
2687
3768
|
font-weight: 600;
|
|
2688
3769
|
line-height: 32px;
|
|
2689
|
-
color: var(--taskon-
|
|
3770
|
+
color: var(--taskon-color-text);
|
|
2690
3771
|
margin: 0;
|
|
2691
3772
|
}
|
|
2692
3773
|
|
|
2693
3774
|
/* 网格布局: 每行最多 3 个，间距 20px */
|
|
3775
|
+
|
|
2694
3776
|
.taskon-identity-social-grid {
|
|
2695
3777
|
display: flex;
|
|
2696
3778
|
flex-wrap: wrap;
|
|
2697
|
-
gap: var(--taskon-
|
|
3779
|
+
gap: var(--taskon-spacing-md);
|
|
2698
3780
|
}
|
|
2699
3781
|
|
|
2700
3782
|
/* 社交账号卡片: 305px × 64px */
|
|
3783
|
+
|
|
2701
3784
|
.taskon-identity-social-item {
|
|
2702
3785
|
display: flex;
|
|
2703
3786
|
align-items: center;
|
|
2704
3787
|
justify-content: space-between;
|
|
2705
|
-
gap: var(--taskon-
|
|
3788
|
+
gap: var(--taskon-spacing-md);
|
|
2706
3789
|
width: 305px;
|
|
2707
3790
|
height: 64px;
|
|
2708
|
-
padding: var(--taskon-
|
|
2709
|
-
background-color: var(--taskon-
|
|
3791
|
+
padding: var(--taskon-spacing-md);
|
|
3792
|
+
background-color: var(--taskon-color-bg-surface-subtle);
|
|
2710
3793
|
border-radius: 10px;
|
|
2711
3794
|
box-sizing: border-box;
|
|
2712
3795
|
transition: background-color 0.2s ease;
|
|
2713
3796
|
}
|
|
2714
3797
|
|
|
2715
3798
|
.taskon-identity-social-item:hover {
|
|
2716
|
-
background-color:
|
|
3799
|
+
background-color: var(--taskon-color-bg-surface-strong);
|
|
2717
3800
|
}
|
|
2718
3801
|
|
|
2719
3802
|
/* 已绑定状态 - 可以添加不同的视觉反馈 */
|
|
3803
|
+
|
|
2720
3804
|
.taskon-identity-social-item--bound {
|
|
2721
|
-
background-color: var(--taskon-
|
|
3805
|
+
background-color: var(--taskon-color-bg-surface-subtle);
|
|
2722
3806
|
}
|
|
2723
3807
|
|
|
2724
3808
|
/* "Linked" 徽章：已绑定默认显示 */
|
|
3809
|
+
|
|
2725
3810
|
.taskon-identity-social-item__linked {
|
|
2726
3811
|
display: flex;
|
|
2727
3812
|
align-items: center;
|
|
@@ -2731,14 +3816,15 @@
|
|
|
2731
3816
|
font-size: 12px;
|
|
2732
3817
|
font-weight: 500;
|
|
2733
3818
|
line-height: 1;
|
|
2734
|
-
color: var(--taskon-
|
|
2735
|
-
background-color: var(--taskon-
|
|
3819
|
+
color: var(--taskon-color-text-tertiary);
|
|
3820
|
+
background-color: var(--taskon-color-border);
|
|
2736
3821
|
border-radius: 4px;
|
|
2737
3822
|
flex-shrink: 0;
|
|
2738
3823
|
white-space: nowrap;
|
|
2739
3824
|
}
|
|
2740
3825
|
|
|
2741
3826
|
/* 解绑关闭按钮（✕）：默认隐藏 */
|
|
3827
|
+
|
|
2742
3828
|
.taskon-identity-social-item__unlink-btn {
|
|
2743
3829
|
display: none;
|
|
2744
3830
|
align-items: center;
|
|
@@ -2746,17 +3832,17 @@
|
|
|
2746
3832
|
width: 34px;
|
|
2747
3833
|
height: 34px;
|
|
2748
3834
|
padding: 0;
|
|
2749
|
-
background-color:
|
|
3835
|
+
background-color: var(--taskon-color-error-bg);
|
|
2750
3836
|
border: none;
|
|
2751
|
-
border-radius: var(--taskon-
|
|
3837
|
+
border-radius: var(--taskon-border-radius);
|
|
2752
3838
|
cursor: pointer;
|
|
2753
3839
|
flex-shrink: 0;
|
|
2754
|
-
color:
|
|
3840
|
+
color: var(--taskon-color-error);
|
|
2755
3841
|
transition: all 0.2s ease;
|
|
2756
3842
|
}
|
|
2757
3843
|
|
|
2758
3844
|
.taskon-identity-social-item__unlink-btn:hover:not(:disabled) {
|
|
2759
|
-
background-color:
|
|
3845
|
+
background-color: var(--taskon-color-error-bg);
|
|
2760
3846
|
}
|
|
2761
3847
|
|
|
2762
3848
|
.taskon-identity-social-item__unlink-btn:disabled {
|
|
@@ -2765,33 +3851,40 @@
|
|
|
2765
3851
|
}
|
|
2766
3852
|
|
|
2767
3853
|
/* hover 时切换：隐藏 Linked 徽章，显示 ✕ 按钮 */
|
|
3854
|
+
|
|
2768
3855
|
.taskon-identity-social-item--bound:hover .taskon-identity-social-item__linked {
|
|
2769
3856
|
display: none;
|
|
2770
3857
|
}
|
|
2771
3858
|
|
|
2772
|
-
.taskon-identity-social-item--bound:hover
|
|
3859
|
+
.taskon-identity-social-item--bound:hover
|
|
3860
|
+
.taskon-identity-social-item__unlink-btn {
|
|
2773
3861
|
display: flex;
|
|
2774
3862
|
}
|
|
2775
3863
|
|
|
2776
3864
|
/* 禁用解绑时（unlink-disabled），hover 不切换 */
|
|
2777
|
-
|
|
3865
|
+
|
|
3866
|
+
.taskon-identity-social-item--unlink-disabled:hover
|
|
3867
|
+
.taskon-identity-social-item__linked {
|
|
2778
3868
|
display: flex;
|
|
2779
3869
|
}
|
|
2780
3870
|
|
|
2781
|
-
.taskon-identity-social-item--unlink-disabled:hover
|
|
3871
|
+
.taskon-identity-social-item--unlink-disabled:hover
|
|
3872
|
+
.taskon-identity-social-item__unlink-btn {
|
|
2782
3873
|
display: none;
|
|
2783
3874
|
}
|
|
2784
3875
|
|
|
2785
3876
|
/* 卡片左侧内容区域 */
|
|
3877
|
+
|
|
2786
3878
|
.taskon-identity-social-item__content {
|
|
2787
3879
|
display: flex;
|
|
2788
3880
|
align-items: center;
|
|
2789
|
-
gap: var(--taskon-
|
|
3881
|
+
gap: var(--taskon-spacing-sm);
|
|
2790
3882
|
flex: 1;
|
|
2791
3883
|
min-width: 0;
|
|
2792
3884
|
}
|
|
2793
3885
|
|
|
2794
3886
|
/* 图标容器: 24x24 */
|
|
3887
|
+
|
|
2795
3888
|
.taskon-identity-social-item__icon {
|
|
2796
3889
|
display: flex;
|
|
2797
3890
|
align-items: center;
|
|
@@ -2807,28 +3900,31 @@
|
|
|
2807
3900
|
}
|
|
2808
3901
|
|
|
2809
3902
|
/* 文字区域 */
|
|
3903
|
+
|
|
2810
3904
|
.taskon-identity-social-item__text {
|
|
2811
3905
|
flex: 1;
|
|
2812
3906
|
min-width: 0;
|
|
2813
3907
|
}
|
|
2814
3908
|
|
|
2815
3909
|
/* 文字样式: 16px 加粗白色 */
|
|
3910
|
+
|
|
2816
3911
|
.taskon-identity-social-item__name {
|
|
2817
3912
|
font-size: 16px;
|
|
2818
3913
|
font-weight: 600;
|
|
2819
3914
|
line-height: 24px;
|
|
2820
|
-
color: var(--taskon-
|
|
3915
|
+
color: var(--taskon-color-text);
|
|
2821
3916
|
white-space: nowrap;
|
|
2822
3917
|
overflow: hidden;
|
|
2823
3918
|
text-overflow: ellipsis;
|
|
2824
3919
|
}
|
|
2825
3920
|
|
|
2826
3921
|
/* 链接样式 */
|
|
3922
|
+
|
|
2827
3923
|
.taskon-identity-social-item__link {
|
|
2828
3924
|
font-size: 16px;
|
|
2829
3925
|
font-weight: 600;
|
|
2830
3926
|
line-height: 24px;
|
|
2831
|
-
color: var(--taskon-
|
|
3927
|
+
color: var(--taskon-color-text);
|
|
2832
3928
|
text-decoration: none;
|
|
2833
3929
|
white-space: nowrap;
|
|
2834
3930
|
overflow: hidden;
|
|
@@ -2838,28 +3934,29 @@
|
|
|
2838
3934
|
}
|
|
2839
3935
|
|
|
2840
3936
|
.taskon-identity-social-item__link:hover {
|
|
2841
|
-
color: var(--taskon-
|
|
3937
|
+
color: var(--taskon-color-link);
|
|
2842
3938
|
}
|
|
2843
3939
|
|
|
2844
3940
|
/* 箭头按钮: 34x34 白色背景 */
|
|
3941
|
+
|
|
2845
3942
|
.taskon-identity-social-btn {
|
|
2846
3943
|
display: flex;
|
|
2847
3944
|
align-items: center;
|
|
2848
3945
|
justify-content: center;
|
|
2849
3946
|
width: 34px;
|
|
2850
3947
|
height: 34px;
|
|
2851
|
-
padding: var(--taskon-
|
|
2852
|
-
background-color: var(--taskon-
|
|
3948
|
+
padding: var(--taskon-spacing-sm);
|
|
3949
|
+
background-color: var(--taskon-color-text);
|
|
2853
3950
|
border: none;
|
|
2854
|
-
border-radius: var(--taskon-
|
|
3951
|
+
border-radius: var(--taskon-border-radius);
|
|
2855
3952
|
cursor: pointer;
|
|
2856
3953
|
flex-shrink: 0;
|
|
2857
|
-
color:
|
|
3954
|
+
color: var(--taskon-color-text-on-primary);
|
|
2858
3955
|
transition: all 0.2s ease;
|
|
2859
3956
|
}
|
|
2860
3957
|
|
|
2861
3958
|
.taskon-identity-social-btn:hover:not(:disabled) {
|
|
2862
|
-
background-color:
|
|
3959
|
+
background-color: var(--taskon-color-bg-floating);
|
|
2863
3960
|
transform: translateX(2px);
|
|
2864
3961
|
}
|
|
2865
3962
|
|
|
@@ -2874,11 +3971,12 @@
|
|
|
2874
3971
|
}
|
|
2875
3972
|
|
|
2876
3973
|
/* 加载动画 */
|
|
3974
|
+
|
|
2877
3975
|
.taskon-identity-social-btn__spinner {
|
|
2878
3976
|
width: 14px;
|
|
2879
3977
|
height: 14px;
|
|
2880
|
-
border: 2px solid
|
|
2881
|
-
border-top-color:
|
|
3978
|
+
border: 2px solid var(--taskon-color-border);
|
|
3979
|
+
border-top-color: var(--taskon-color-text-on-primary);
|
|
2882
3980
|
border-radius: 50%;
|
|
2883
3981
|
animation: taskon-spin 1s linear infinite;
|
|
2884
3982
|
}
|
|
@@ -2889,22 +3987,25 @@
|
|
|
2889
3987
|
============================================================================ */
|
|
2890
3988
|
|
|
2891
3989
|
/* Email Address 区域 */
|
|
3990
|
+
|
|
2892
3991
|
.taskon-identity-email-section {
|
|
2893
3992
|
display: flex;
|
|
2894
3993
|
flex-direction: column;
|
|
2895
|
-
gap: var(--taskon-
|
|
3994
|
+
gap: var(--taskon-spacing-md);
|
|
2896
3995
|
}
|
|
2897
3996
|
|
|
2898
3997
|
/* 标题: 16px 加粗白色 */
|
|
3998
|
+
|
|
2899
3999
|
.taskon-identity-email-section__title {
|
|
2900
4000
|
font-size: 16px;
|
|
2901
4001
|
font-weight: 600;
|
|
2902
4002
|
line-height: 24px;
|
|
2903
|
-
color: var(--taskon-
|
|
4003
|
+
color: var(--taskon-color-text);
|
|
2904
4004
|
margin: 0;
|
|
2905
4005
|
}
|
|
2906
4006
|
|
|
2907
4007
|
/* Email 卡片容器 - 单个卡片 */
|
|
4008
|
+
|
|
2908
4009
|
.taskon-identity-email-card {
|
|
2909
4010
|
display: flex;
|
|
2910
4011
|
}
|
|
@@ -2915,69 +4016,78 @@
|
|
|
2915
4016
|
============================================================================ */
|
|
2916
4017
|
|
|
2917
4018
|
/* Network List 区域 */
|
|
4019
|
+
|
|
2918
4020
|
.taskon-network-section {
|
|
2919
4021
|
display: flex;
|
|
2920
4022
|
flex-direction: column;
|
|
2921
|
-
gap: var(--taskon-
|
|
4023
|
+
gap: var(--taskon-spacing-md);
|
|
2922
4024
|
}
|
|
2923
4025
|
|
|
2924
4026
|
/* 标题: 24px 加粗白色 */
|
|
4027
|
+
|
|
2925
4028
|
.taskon-network-section__title {
|
|
2926
4029
|
font-size: 24px;
|
|
2927
4030
|
font-weight: 600;
|
|
2928
4031
|
line-height: 32px;
|
|
2929
|
-
color: var(--taskon-
|
|
4032
|
+
color: var(--taskon-color-text);
|
|
2930
4033
|
margin: 0;
|
|
2931
4034
|
}
|
|
2932
4035
|
|
|
2933
4036
|
/* 网格布局: EVM 全宽，其他链每行 2 个 */
|
|
4037
|
+
|
|
2934
4038
|
.taskon-network-grid {
|
|
2935
4039
|
display: grid;
|
|
2936
4040
|
grid-template-columns: repeat(2, 1fr);
|
|
2937
|
-
gap: var(--taskon-
|
|
4041
|
+
gap: var(--taskon-spacing-md);
|
|
2938
4042
|
max-width: 630px;
|
|
2939
4043
|
}
|
|
2940
4044
|
|
|
2941
4045
|
/* Network Card 基础样式 */
|
|
4046
|
+
|
|
2942
4047
|
.taskon-network-card {
|
|
2943
4048
|
position: relative;
|
|
2944
4049
|
display: flex;
|
|
2945
4050
|
flex-direction: column;
|
|
2946
|
-
gap: var(--taskon-
|
|
2947
|
-
padding: var(--taskon-
|
|
2948
|
-
background-color: var(--taskon-
|
|
4051
|
+
gap: var(--taskon-spacing-md);
|
|
4052
|
+
padding: var(--taskon-spacing-md);
|
|
4053
|
+
background-color: var(--taskon-color-bg-surface-subtle);
|
|
2949
4054
|
border-radius: 12px;
|
|
2950
4055
|
box-sizing: border-box;
|
|
2951
4056
|
}
|
|
2952
4057
|
|
|
2953
4058
|
/* EVM 多地址卡片: 全宽 */
|
|
4059
|
+
|
|
2954
4060
|
.taskon-network-card--multi {
|
|
2955
4061
|
grid-column: 1 / -1;
|
|
2956
4062
|
}
|
|
2957
4063
|
|
|
2958
4064
|
/* 单链卡片 */
|
|
4065
|
+
|
|
2959
4066
|
.taskon-network-card--single {
|
|
2960
4067
|
min-height: 140px;
|
|
2961
4068
|
}
|
|
2962
4069
|
|
|
2963
4070
|
/* 卡片头部 */
|
|
4071
|
+
|
|
2964
4072
|
.taskon-network-card__header {
|
|
2965
4073
|
display: flex;
|
|
2966
4074
|
align-items: center;
|
|
2967
4075
|
}
|
|
2968
4076
|
|
|
2969
4077
|
/* 链标签: 14px medium 白色 */
|
|
4078
|
+
|
|
2970
4079
|
.taskon-network-card__label {
|
|
2971
4080
|
font-size: 14px;
|
|
2972
4081
|
font-weight: 500;
|
|
2973
4082
|
line-height: 20px;
|
|
2974
|
-
color: var(--taskon-
|
|
4083
|
+
color: var(--taskon-color-text);
|
|
2975
4084
|
}
|
|
2976
4085
|
|
|
2977
4086
|
/* 链图标容器 */
|
|
4087
|
+
|
|
2978
4088
|
.taskon-network-card__chain-icon {
|
|
2979
4089
|
display: flex;
|
|
2980
|
-
gap: var(--taskon-
|
|
4090
|
+
gap: var(--taskon-spacing-sm);
|
|
2981
4091
|
}
|
|
2982
4092
|
|
|
2983
4093
|
.taskon-network-card__chain-icon svg {
|
|
@@ -2987,10 +4097,11 @@
|
|
|
2987
4097
|
}
|
|
2988
4098
|
|
|
2989
4099
|
/* EVM 多链图标行 */
|
|
4100
|
+
|
|
2990
4101
|
.taskon-network-chain-icons {
|
|
2991
4102
|
display: flex;
|
|
2992
4103
|
flex-wrap: wrap;
|
|
2993
|
-
gap: var(--taskon-
|
|
4104
|
+
gap: var(--taskon-spacing-sm);
|
|
2994
4105
|
align-items: center;
|
|
2995
4106
|
}
|
|
2996
4107
|
|
|
@@ -3007,33 +4118,35 @@
|
|
|
3007
4118
|
justify-content: center;
|
|
3008
4119
|
width: 24px;
|
|
3009
4120
|
height: 24px;
|
|
3010
|
-
background-color:
|
|
4121
|
+
background-color: var(--taskon-color-bg-floating);
|
|
3011
4122
|
border-radius: 8px;
|
|
3012
4123
|
}
|
|
3013
4124
|
|
|
3014
4125
|
/* 地址列表容器 */
|
|
4126
|
+
|
|
3015
4127
|
.taskon-network-card__addresses {
|
|
3016
4128
|
display: flex;
|
|
3017
4129
|
flex-direction: column;
|
|
3018
|
-
gap: var(--taskon-
|
|
4130
|
+
gap: var(--taskon-spacing-sm);
|
|
3019
4131
|
}
|
|
3020
4132
|
|
|
3021
4133
|
/* 地址行 */
|
|
4134
|
+
|
|
3022
4135
|
.taskon-network-address-row {
|
|
3023
4136
|
display: flex;
|
|
3024
4137
|
align-items: center;
|
|
3025
|
-
gap: var(--taskon-
|
|
4138
|
+
gap: var(--taskon-spacing-md);
|
|
3026
4139
|
height: 40px;
|
|
3027
|
-
padding: 0 var(--taskon-
|
|
3028
|
-
background-color: var(--taskon-
|
|
3029
|
-
border-radius: var(--taskon-
|
|
4140
|
+
padding: 0 var(--taskon-spacing-md);
|
|
4141
|
+
background-color: var(--taskon-color-bg-surface-subtle);
|
|
4142
|
+
border-radius: var(--taskon-border-radius);
|
|
3030
4143
|
backdrop-filter: blur(10px);
|
|
3031
4144
|
}
|
|
3032
4145
|
|
|
3033
4146
|
.taskon-network-address-row__left {
|
|
3034
4147
|
display: flex;
|
|
3035
4148
|
align-items: center;
|
|
3036
|
-
gap: var(--taskon-
|
|
4149
|
+
gap: var(--taskon-spacing-sm);
|
|
3037
4150
|
flex: 1;
|
|
3038
4151
|
}
|
|
3039
4152
|
|
|
@@ -3041,24 +4154,24 @@
|
|
|
3041
4154
|
font-size: 14px;
|
|
3042
4155
|
font-weight: 500;
|
|
3043
4156
|
line-height: 20px;
|
|
3044
|
-
color: var(--taskon-
|
|
4157
|
+
color: var(--taskon-color-text);
|
|
3045
4158
|
}
|
|
3046
4159
|
|
|
3047
4160
|
.taskon-network-address-row__addr--secondary {
|
|
3048
|
-
color: var(--taskon-
|
|
4161
|
+
color: var(--taskon-color-text-tertiary);
|
|
3049
4162
|
}
|
|
3050
4163
|
|
|
3051
4164
|
.taskon-network-address-row__divider {
|
|
3052
4165
|
width: 1px;
|
|
3053
4166
|
height: 15px;
|
|
3054
|
-
background-color: var(--taskon-
|
|
4167
|
+
background-color: var(--taskon-color-text-tertiary);
|
|
3055
4168
|
opacity: 0.1;
|
|
3056
4169
|
}
|
|
3057
4170
|
|
|
3058
4171
|
.taskon-network-address-row__right {
|
|
3059
4172
|
display: flex;
|
|
3060
4173
|
align-items: center;
|
|
3061
|
-
gap: var(--taskon-
|
|
4174
|
+
gap: var(--taskon-spacing-sm);
|
|
3062
4175
|
min-width: 142px;
|
|
3063
4176
|
justify-content: flex-end;
|
|
3064
4177
|
}
|
|
@@ -3071,21 +4184,22 @@
|
|
|
3071
4184
|
}
|
|
3072
4185
|
|
|
3073
4186
|
.taskon-network-address-row__type--primary {
|
|
3074
|
-
color:
|
|
4187
|
+
color: var(--taskon-color-secondary);
|
|
3075
4188
|
}
|
|
3076
4189
|
|
|
3077
4190
|
.taskon-network-address-row__type--secondary {
|
|
3078
|
-
color:
|
|
4191
|
+
color: var(--taskon-color-primary);
|
|
3079
4192
|
}
|
|
3080
4193
|
|
|
3081
4194
|
.taskon-network-address-row__edit {
|
|
3082
4195
|
width: 14px;
|
|
3083
4196
|
height: 14px;
|
|
3084
|
-
color: var(--taskon-
|
|
4197
|
+
color: var(--taskon-color-text-tertiary);
|
|
3085
4198
|
cursor: pointer;
|
|
3086
4199
|
}
|
|
3087
4200
|
|
|
3088
4201
|
/* 复制按钮 */
|
|
4202
|
+
|
|
3089
4203
|
.taskon-network-copy-btn {
|
|
3090
4204
|
display: flex;
|
|
3091
4205
|
align-items: center;
|
|
@@ -3094,26 +4208,27 @@
|
|
|
3094
4208
|
background: none;
|
|
3095
4209
|
border: none;
|
|
3096
4210
|
cursor: pointer;
|
|
3097
|
-
color: var(--taskon-
|
|
4211
|
+
color: var(--taskon-color-text);
|
|
3098
4212
|
transition: color 0.2s ease;
|
|
3099
4213
|
}
|
|
3100
4214
|
|
|
3101
4215
|
.taskon-network-copy-btn:hover {
|
|
3102
|
-
color: var(--taskon-
|
|
4216
|
+
color: var(--taskon-color-link);
|
|
3103
4217
|
}
|
|
3104
4218
|
|
|
3105
4219
|
/* Unbind 徽章按钮 */
|
|
4220
|
+
|
|
3106
4221
|
.taskon-network-unbind-badge {
|
|
3107
4222
|
display: flex;
|
|
3108
4223
|
align-items: center;
|
|
3109
4224
|
justify-content: center;
|
|
3110
4225
|
height: 20px;
|
|
3111
|
-
padding: 0 var(--taskon-
|
|
4226
|
+
padding: 0 var(--taskon-spacing-sm);
|
|
3112
4227
|
font-size: 11px;
|
|
3113
4228
|
font-weight: 600;
|
|
3114
4229
|
line-height: 12px;
|
|
3115
|
-
color: var(--taskon-
|
|
3116
|
-
background-color: var(--taskon-
|
|
4230
|
+
color: var(--taskon-color-text);
|
|
4231
|
+
background-color: var(--taskon-color-border);
|
|
3117
4232
|
border: none;
|
|
3118
4233
|
border-radius: 4px;
|
|
3119
4234
|
cursor: pointer;
|
|
@@ -3122,7 +4237,7 @@
|
|
|
3122
4237
|
}
|
|
3123
4238
|
|
|
3124
4239
|
.taskon-network-unbind-badge:hover:not(:disabled) {
|
|
3125
|
-
background-color:
|
|
4240
|
+
background-color: var(--taskon-color-bg-surface-strong);
|
|
3126
4241
|
}
|
|
3127
4242
|
|
|
3128
4243
|
.taskon-network-unbind-badge:disabled {
|
|
@@ -3131,6 +4246,7 @@
|
|
|
3131
4246
|
}
|
|
3132
4247
|
|
|
3133
4248
|
/* 右上角的 Unbind 按钮（单链卡片） */
|
|
4249
|
+
|
|
3134
4250
|
.taskon-network-unbind-badge--corner {
|
|
3135
4251
|
position: absolute;
|
|
3136
4252
|
top: 8px;
|
|
@@ -3138,14 +4254,15 @@
|
|
|
3138
4254
|
}
|
|
3139
4255
|
|
|
3140
4256
|
/* 地址输入框样式（单链卡片） */
|
|
4257
|
+
|
|
3141
4258
|
.taskon-network-address-input {
|
|
3142
4259
|
display: flex;
|
|
3143
4260
|
align-items: center;
|
|
3144
4261
|
justify-content: space-between;
|
|
3145
4262
|
height: 34px;
|
|
3146
|
-
padding: 0 var(--taskon-
|
|
3147
|
-
background-color: var(--taskon-
|
|
3148
|
-
border-radius: var(--taskon-
|
|
4263
|
+
padding: 0 var(--taskon-spacing-md);
|
|
4264
|
+
background-color: var(--taskon-color-bg-surface-subtle);
|
|
4265
|
+
border-radius: var(--taskon-border-radius);
|
|
3149
4266
|
backdrop-filter: blur(10px);
|
|
3150
4267
|
}
|
|
3151
4268
|
|
|
@@ -3153,29 +4270,30 @@
|
|
|
3153
4270
|
font-size: 14px;
|
|
3154
4271
|
font-weight: 500;
|
|
3155
4272
|
line-height: 20px;
|
|
3156
|
-
color: var(--taskon-
|
|
4273
|
+
color: var(--taskon-color-text);
|
|
3157
4274
|
}
|
|
3158
4275
|
|
|
3159
4276
|
/* Connect Wallet 按钮 */
|
|
4277
|
+
|
|
3160
4278
|
.taskon-network-connect-btn {
|
|
3161
4279
|
display: flex;
|
|
3162
4280
|
align-items: center;
|
|
3163
4281
|
justify-content: center;
|
|
3164
4282
|
height: 34px;
|
|
3165
|
-
padding: var(--taskon-
|
|
4283
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-sm);
|
|
3166
4284
|
font-size: 14px;
|
|
3167
4285
|
font-weight: 500;
|
|
3168
4286
|
line-height: 20px;
|
|
3169
|
-
color:
|
|
3170
|
-
background-color: var(--taskon-
|
|
4287
|
+
color: var(--taskon-color-text-on-primary);
|
|
4288
|
+
background-color: var(--taskon-color-text);
|
|
3171
4289
|
border: none;
|
|
3172
|
-
border-radius: var(--taskon-
|
|
4290
|
+
border-radius: var(--taskon-border-radius);
|
|
3173
4291
|
cursor: pointer;
|
|
3174
4292
|
transition: all 0.2s ease;
|
|
3175
4293
|
}
|
|
3176
4294
|
|
|
3177
4295
|
.taskon-network-connect-btn:hover:not(:disabled) {
|
|
3178
|
-
background-color:
|
|
4296
|
+
background-color: var(--taskon-color-bg-floating);
|
|
3179
4297
|
}
|
|
3180
4298
|
|
|
3181
4299
|
.taskon-network-connect-btn:disabled {
|
|
@@ -3199,14 +4317,14 @@
|
|
|
3199
4317
|
}
|
|
3200
4318
|
|
|
3201
4319
|
.taskon-network-card {
|
|
3202
|
-
padding: var(--taskon-
|
|
4320
|
+
padding: var(--taskon-spacing-md);
|
|
3203
4321
|
}
|
|
3204
4322
|
|
|
3205
4323
|
.taskon-network-address-row {
|
|
3206
4324
|
flex-wrap: wrap;
|
|
3207
4325
|
height: auto;
|
|
3208
|
-
padding: var(--taskon-
|
|
3209
|
-
gap: var(--taskon-
|
|
4326
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-sm);
|
|
4327
|
+
gap: var(--taskon-spacing-sm);
|
|
3210
4328
|
}
|
|
3211
4329
|
|
|
3212
4330
|
.taskon-network-address-row__left {
|
|
@@ -3232,43 +4350,46 @@
|
|
|
3232
4350
|
============================================================================ */
|
|
3233
4351
|
|
|
3234
4352
|
/* Identity Section */
|
|
4353
|
+
|
|
3235
4354
|
.taskon-identity-section {
|
|
3236
4355
|
display: flex;
|
|
3237
4356
|
flex-direction: column;
|
|
3238
|
-
gap: var(--taskon-
|
|
4357
|
+
gap: var(--taskon-spacing-md);
|
|
3239
4358
|
}
|
|
3240
4359
|
|
|
3241
4360
|
.taskon-identity-section__title {
|
|
3242
4361
|
font-size: 16px;
|
|
3243
4362
|
font-weight: 600;
|
|
3244
|
-
color: var(--taskon-
|
|
4363
|
+
color: var(--taskon-color-text);
|
|
3245
4364
|
margin: 0;
|
|
3246
4365
|
}
|
|
3247
4366
|
|
|
3248
4367
|
/* Identity List */
|
|
4368
|
+
|
|
3249
4369
|
.taskon-identity-list {
|
|
3250
4370
|
display: flex;
|
|
3251
4371
|
flex-direction: column;
|
|
3252
|
-
gap: var(--taskon-
|
|
4372
|
+
gap: var(--taskon-spacing-sm);
|
|
3253
4373
|
}
|
|
3254
4374
|
|
|
3255
4375
|
/* Identity Item (用于钱包) */
|
|
4376
|
+
|
|
3256
4377
|
.taskon-identity-item {
|
|
3257
4378
|
display: flex;
|
|
3258
4379
|
align-items: center;
|
|
3259
|
-
gap: var(--taskon-
|
|
3260
|
-
padding: var(--taskon-
|
|
3261
|
-
background-color: var(--taskon-
|
|
3262
|
-
border-radius: var(--taskon-
|
|
4380
|
+
gap: var(--taskon-spacing-md);
|
|
4381
|
+
padding: var(--taskon-spacing-md);
|
|
4382
|
+
background-color: var(--taskon-color-bg-surface-subtle);
|
|
4383
|
+
border-radius: var(--taskon-border-radius);
|
|
3263
4384
|
transition: all 0.2s ease;
|
|
3264
4385
|
}
|
|
3265
4386
|
|
|
3266
4387
|
.taskon-identity-item:hover {
|
|
3267
|
-
background-color:
|
|
4388
|
+
background-color: var(--taskon-color-bg-surface-strong);
|
|
3268
4389
|
}
|
|
3269
4390
|
|
|
3270
4391
|
.taskon-identity-item--bound {
|
|
3271
|
-
background-color: var(--taskon-
|
|
4392
|
+
background-color: var(--taskon-color-bg-surface-subtle);
|
|
3272
4393
|
}
|
|
3273
4394
|
|
|
3274
4395
|
.taskon-identity-item__icon {
|
|
@@ -3278,13 +4399,13 @@
|
|
|
3278
4399
|
width: 40px;
|
|
3279
4400
|
height: 40px;
|
|
3280
4401
|
font-size: 20px;
|
|
3281
|
-
background-color:
|
|
3282
|
-
border-radius: var(--taskon-
|
|
4402
|
+
background-color: var(--taskon-color-bg-surface-strong);
|
|
4403
|
+
border-radius: var(--taskon-border-radius);
|
|
3283
4404
|
flex-shrink: 0;
|
|
3284
4405
|
}
|
|
3285
4406
|
|
|
3286
4407
|
.taskon-identity-item--bound .taskon-identity-item__icon {
|
|
3287
|
-
background-color:
|
|
4408
|
+
background-color: var(--taskon-color-bg-surface-strong);
|
|
3288
4409
|
}
|
|
3289
4410
|
|
|
3290
4411
|
.taskon-identity-item__info {
|
|
@@ -3298,19 +4419,19 @@
|
|
|
3298
4419
|
.taskon-identity-item__name {
|
|
3299
4420
|
font-size: 14px;
|
|
3300
4421
|
font-weight: 500;
|
|
3301
|
-
color: var(--taskon-
|
|
4422
|
+
color: var(--taskon-color-text);
|
|
3302
4423
|
}
|
|
3303
4424
|
|
|
3304
4425
|
.taskon-identity-item__value {
|
|
3305
4426
|
display: flex;
|
|
3306
4427
|
align-items: center;
|
|
3307
|
-
gap: var(--taskon-
|
|
4428
|
+
gap: var(--taskon-spacing-xs);
|
|
3308
4429
|
font-size: 13px;
|
|
3309
|
-
color: var(--taskon-
|
|
4430
|
+
color: var(--taskon-color-text-tertiary);
|
|
3310
4431
|
}
|
|
3311
4432
|
|
|
3312
4433
|
.taskon-identity-item__link {
|
|
3313
|
-
color: var(--taskon-
|
|
4434
|
+
color: var(--taskon-color-link);
|
|
3314
4435
|
text-decoration: none;
|
|
3315
4436
|
transition: color 0.2s ease;
|
|
3316
4437
|
}
|
|
@@ -3329,9 +4450,9 @@
|
|
|
3329
4450
|
padding: 2px 6px;
|
|
3330
4451
|
font-size: 11px;
|
|
3331
4452
|
font-weight: 500;
|
|
3332
|
-
color: var(--taskon-
|
|
3333
|
-
background-color:
|
|
3334
|
-
border-radius: var(--taskon-
|
|
4453
|
+
color: var(--taskon-color-link);
|
|
4454
|
+
background-color: var(--taskon-color-secondary-bg);
|
|
4455
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
3335
4456
|
}
|
|
3336
4457
|
|
|
3337
4458
|
.taskon-identity-item__action {
|
|
@@ -3339,14 +4460,15 @@
|
|
|
3339
4460
|
}
|
|
3340
4461
|
|
|
3341
4462
|
/* Identity Button */
|
|
4463
|
+
|
|
3342
4464
|
.taskon-identity-btn {
|
|
3343
4465
|
display: inline-flex;
|
|
3344
4466
|
align-items: center;
|
|
3345
4467
|
justify-content: center;
|
|
3346
|
-
padding: var(--taskon-
|
|
4468
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
|
|
3347
4469
|
font-size: 13px;
|
|
3348
4470
|
font-weight: 500;
|
|
3349
|
-
border-radius: var(--taskon-
|
|
4471
|
+
border-radius: var(--taskon-border-radius);
|
|
3350
4472
|
border: none;
|
|
3351
4473
|
cursor: pointer;
|
|
3352
4474
|
transition: all 0.2s ease;
|
|
@@ -3360,24 +4482,24 @@
|
|
|
3360
4482
|
}
|
|
3361
4483
|
|
|
3362
4484
|
.taskon-identity-btn--bind {
|
|
3363
|
-
background-color: var(--taskon-
|
|
3364
|
-
color:
|
|
4485
|
+
background-color: var(--taskon-color-text);
|
|
4486
|
+
color: var(--taskon-color-text-on-primary);
|
|
3365
4487
|
}
|
|
3366
4488
|
|
|
3367
4489
|
.taskon-identity-btn--bind:hover:not(:disabled) {
|
|
3368
|
-
background-color:
|
|
4490
|
+
background-color: var(--taskon-color-bg-floating);
|
|
3369
4491
|
}
|
|
3370
4492
|
|
|
3371
4493
|
.taskon-identity-btn--unbind {
|
|
3372
4494
|
background: transparent;
|
|
3373
|
-
color: var(--taskon-
|
|
3374
|
-
border: 1px solid var(--taskon-
|
|
4495
|
+
color: var(--taskon-color-text-tertiary);
|
|
4496
|
+
border: 1px solid var(--taskon-color-border);
|
|
3375
4497
|
}
|
|
3376
4498
|
|
|
3377
4499
|
.taskon-identity-btn--unbind:hover:not(:disabled) {
|
|
3378
|
-
color:
|
|
3379
|
-
border-color:
|
|
3380
|
-
background-color:
|
|
4500
|
+
color: var(--taskon-color-error);
|
|
4501
|
+
border-color: var(--taskon-color-error);
|
|
4502
|
+
background-color: var(--taskon-color-error-bg);
|
|
3381
4503
|
}
|
|
3382
4504
|
|
|
3383
4505
|
/* ============================================================================
|
|
@@ -3388,8 +4510,8 @@
|
|
|
3388
4510
|
display: flex;
|
|
3389
4511
|
flex-direction: column;
|
|
3390
4512
|
align-items: center;
|
|
3391
|
-
gap: var(--taskon-
|
|
3392
|
-
padding: var(--taskon-
|
|
4513
|
+
gap: var(--taskon-spacing-lg);
|
|
4514
|
+
padding: var(--taskon-spacing-lg) var(--taskon-spacing-md);
|
|
3393
4515
|
}
|
|
3394
4516
|
|
|
3395
4517
|
.taskon-confirm-unlink__icon {
|
|
@@ -3399,8 +4521,8 @@
|
|
|
3399
4521
|
width: 48px;
|
|
3400
4522
|
height: 48px;
|
|
3401
4523
|
border-radius: 50%;
|
|
3402
|
-
background-color:
|
|
3403
|
-
color:
|
|
4524
|
+
background-color: var(--taskon-color-error-bg);
|
|
4525
|
+
color: var(--taskon-color-error);
|
|
3404
4526
|
flex-shrink: 0;
|
|
3405
4527
|
}
|
|
3406
4528
|
|
|
@@ -3408,7 +4530,7 @@
|
|
|
3408
4530
|
display: flex;
|
|
3409
4531
|
flex-direction: column;
|
|
3410
4532
|
align-items: center;
|
|
3411
|
-
gap: var(--taskon-
|
|
4533
|
+
gap: var(--taskon-spacing-sm);
|
|
3412
4534
|
text-align: center;
|
|
3413
4535
|
}
|
|
3414
4536
|
|
|
@@ -3416,7 +4538,7 @@
|
|
|
3416
4538
|
font-size: 18px;
|
|
3417
4539
|
font-weight: 600;
|
|
3418
4540
|
line-height: 24px;
|
|
3419
|
-
color: var(--taskon-
|
|
4541
|
+
color: var(--taskon-color-text);
|
|
3420
4542
|
margin: 0;
|
|
3421
4543
|
}
|
|
3422
4544
|
|
|
@@ -3424,13 +4546,13 @@
|
|
|
3424
4546
|
font-size: 14px;
|
|
3425
4547
|
font-weight: 400;
|
|
3426
4548
|
line-height: 20px;
|
|
3427
|
-
color: var(--taskon-
|
|
4549
|
+
color: var(--taskon-color-text-tertiary);
|
|
3428
4550
|
margin: 0;
|
|
3429
4551
|
}
|
|
3430
4552
|
|
|
3431
4553
|
.taskon-confirm-unlink__actions {
|
|
3432
4554
|
display: flex;
|
|
3433
|
-
gap: var(--taskon-
|
|
4555
|
+
gap: var(--taskon-spacing-sm);
|
|
3434
4556
|
width: 100%;
|
|
3435
4557
|
}
|
|
3436
4558
|
|
|
@@ -3440,10 +4562,10 @@
|
|
|
3440
4562
|
align-items: center;
|
|
3441
4563
|
justify-content: center;
|
|
3442
4564
|
height: 40px;
|
|
3443
|
-
padding: 0 var(--taskon-
|
|
4565
|
+
padding: 0 var(--taskon-spacing-md);
|
|
3444
4566
|
font-size: 14px;
|
|
3445
4567
|
font-weight: 500;
|
|
3446
|
-
border-radius: var(--taskon-
|
|
4568
|
+
border-radius: var(--taskon-border-radius);
|
|
3447
4569
|
border: none;
|
|
3448
4570
|
cursor: pointer;
|
|
3449
4571
|
transition: all 0.2s ease;
|
|
@@ -3455,22 +4577,22 @@
|
|
|
3455
4577
|
}
|
|
3456
4578
|
|
|
3457
4579
|
.taskon-confirm-unlink__btn--cancel {
|
|
3458
|
-
color: var(--taskon-
|
|
3459
|
-
background-color: var(--taskon-
|
|
3460
|
-
border: 1px solid var(--taskon-
|
|
4580
|
+
color: var(--taskon-color-text);
|
|
4581
|
+
background-color: var(--taskon-color-border);
|
|
4582
|
+
border: 1px solid var(--taskon-color-border);
|
|
3461
4583
|
}
|
|
3462
4584
|
|
|
3463
4585
|
.taskon-confirm-unlink__btn--cancel:hover:not(:disabled) {
|
|
3464
|
-
background-color:
|
|
4586
|
+
background-color: var(--taskon-color-bg-surface-strong);
|
|
3465
4587
|
}
|
|
3466
4588
|
|
|
3467
4589
|
.taskon-confirm-unlink__btn--confirm {
|
|
3468
|
-
color:
|
|
3469
|
-
background-color:
|
|
4590
|
+
color: var(--taskon-color-text-on-primary);
|
|
4591
|
+
background-color: var(--taskon-color-error);
|
|
3470
4592
|
}
|
|
3471
4593
|
|
|
3472
4594
|
.taskon-confirm-unlink__btn--confirm:hover:not(:disabled) {
|
|
3473
|
-
background-color:
|
|
4595
|
+
background-color: var(--taskon-color-error);
|
|
3474
4596
|
}
|
|
3475
4597
|
|
|
3476
4598
|
/* ============================================================================
|
|
@@ -3480,14 +4602,14 @@
|
|
|
3480
4602
|
@media (max-width: 1000px) {
|
|
3481
4603
|
/* 中等屏幕：每行 2 个 */
|
|
3482
4604
|
.taskon-identity-social-item {
|
|
3483
|
-
width:
|
|
4605
|
+
width: 48%;
|
|
3484
4606
|
min-width: 280px;
|
|
3485
4607
|
}
|
|
3486
4608
|
}
|
|
3487
4609
|
|
|
3488
|
-
@media (max-width: 750px) {
|
|
3489
|
-
/* 小屏幕：每行 1 个，全宽 */
|
|
3490
|
-
.taskon-identity-social-section__title {
|
|
4610
|
+
@media (max-width: 750px) {
|
|
4611
|
+
/* 小屏幕：每行 1 个，全宽 */
|
|
4612
|
+
.taskon-identity-social-section__title {
|
|
3491
4613
|
font-size: 20px;
|
|
3492
4614
|
line-height: 28px;
|
|
3493
4615
|
}
|
|
@@ -3502,8 +4624,8 @@
|
|
|
3502
4624
|
}
|
|
3503
4625
|
|
|
3504
4626
|
.taskon-identity-item {
|
|
3505
|
-
padding: var(--taskon-
|
|
3506
|
-
gap: var(--taskon-
|
|
4627
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
|
|
4628
|
+
gap: var(--taskon-spacing-sm);
|
|
3507
4629
|
}
|
|
3508
4630
|
|
|
3509
4631
|
.taskon-identity-item__icon {
|
|
@@ -3520,10 +4642,193 @@
|
|
|
3520
4642
|
font-size: 12px;
|
|
3521
4643
|
}
|
|
3522
4644
|
|
|
3523
|
-
.taskon-identity-btn {
|
|
3524
|
-
padding: var(--taskon-
|
|
3525
|
-
font-size: 12px;
|
|
3526
|
-
min-width: 60px;
|
|
3527
|
-
height: 28px;
|
|
3528
|
-
}
|
|
4645
|
+
.taskon-identity-btn {
|
|
4646
|
+
padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
|
|
4647
|
+
font-size: 12px;
|
|
4648
|
+
min-width: 60px;
|
|
4649
|
+
height: 28px;
|
|
4650
|
+
}
|
|
3529
4651
|
}
|
|
4652
|
+
|
|
4653
|
+
@media (max-width: 750px) {
|
|
4654
|
+
.taskon-user-center {
|
|
4655
|
+
gap: var(--taskon-spacing-md);
|
|
4656
|
+
padding: var(--taskon-spacing-md);
|
|
4657
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
4658
|
+
}
|
|
4659
|
+
|
|
4660
|
+
.taskon-user-center-content {
|
|
4661
|
+
min-height: 0;
|
|
4662
|
+
}
|
|
4663
|
+
|
|
4664
|
+
.taskon-user-center .taskon-table__header,
|
|
4665
|
+
.taskon-user-center .taskon-table__cell {
|
|
4666
|
+
padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
|
|
4667
|
+
font-size: 13px;
|
|
4668
|
+
line-height: 18px;
|
|
4669
|
+
}
|
|
4670
|
+
|
|
4671
|
+
.taskon-user-center .taskon-table__row {
|
|
4672
|
+
height: 60px;
|
|
4673
|
+
}
|
|
4674
|
+
|
|
4675
|
+
.taskon-user-center-pagination {
|
|
4676
|
+
margin-top: var(--taskon-spacing-lg);
|
|
4677
|
+
}
|
|
4678
|
+
|
|
4679
|
+
.taskon-my-rewards {
|
|
4680
|
+
gap: var(--taskon-spacing-lg);
|
|
4681
|
+
}
|
|
4682
|
+
|
|
4683
|
+
.taskon-my-rewards__section {
|
|
4684
|
+
gap: var(--taskon-spacing-sm);
|
|
4685
|
+
}
|
|
4686
|
+
|
|
4687
|
+
.taskon-my-rewards__section-title,
|
|
4688
|
+
.taskon-asset-carousel__title,
|
|
4689
|
+
.taskon-frozen-assets__title,
|
|
4690
|
+
.taskon-xp-level-card__history-title {
|
|
4691
|
+
font-size: 14px;
|
|
4692
|
+
line-height: 20px;
|
|
4693
|
+
}
|
|
4694
|
+
|
|
4695
|
+
.taskon-asset-carousel {
|
|
4696
|
+
gap: var(--taskon-spacing-sm);
|
|
4697
|
+
margin-bottom: var(--taskon-spacing-lg);
|
|
4698
|
+
}
|
|
4699
|
+
|
|
4700
|
+
.taskon-asset-carousel__container {
|
|
4701
|
+
gap: var(--taskon-spacing-xs);
|
|
4702
|
+
}
|
|
4703
|
+
|
|
4704
|
+
.taskon-asset-card {
|
|
4705
|
+
min-width: calc(50% - 4px);
|
|
4706
|
+
gap: var(--taskon-spacing-sm);
|
|
4707
|
+
padding: var(--taskon-spacing-sm);
|
|
4708
|
+
}
|
|
4709
|
+
|
|
4710
|
+
.taskon-asset-card__icon,
|
|
4711
|
+
.taskon-asset-card__icon-img {
|
|
4712
|
+
width: 40px;
|
|
4713
|
+
height: 40px;
|
|
4714
|
+
}
|
|
4715
|
+
|
|
4716
|
+
.taskon-asset-card__value {
|
|
4717
|
+
font-size: 16px;
|
|
4718
|
+
line-height: 22px;
|
|
4719
|
+
}
|
|
4720
|
+
|
|
4721
|
+
.taskon-withdraw-pending {
|
|
4722
|
+
align-items: flex-start;
|
|
4723
|
+
gap: var(--taskon-spacing-sm);
|
|
4724
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
|
|
4725
|
+
}
|
|
4726
|
+
|
|
4727
|
+
.taskon-withdraw-pending__text {
|
|
4728
|
+
font-size: 14px;
|
|
4729
|
+
white-space: normal;
|
|
4730
|
+
}
|
|
4731
|
+
|
|
4732
|
+
.taskon-withdraw-pending__count {
|
|
4733
|
+
font-size: 12px;
|
|
4734
|
+
}
|
|
4735
|
+
|
|
4736
|
+
.taskon-token-assets__symbol-cell,
|
|
4737
|
+
.taskon-token-assets__network-cell {
|
|
4738
|
+
gap: var(--taskon-spacing-xs);
|
|
4739
|
+
}
|
|
4740
|
+
|
|
4741
|
+
.taskon-token-assets__symbol,
|
|
4742
|
+
.taskon-token-assets__chain,
|
|
4743
|
+
.taskon-token-assets__balance,
|
|
4744
|
+
.taskon-token-assets__frozen-btn {
|
|
4745
|
+
font-size: 12px;
|
|
4746
|
+
}
|
|
4747
|
+
|
|
4748
|
+
.taskon-token-assets__withdraw-btn {
|
|
4749
|
+
height: 30px !important;
|
|
4750
|
+
padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm) !important;
|
|
4751
|
+
font-size: 12px !important;
|
|
4752
|
+
}
|
|
4753
|
+
|
|
4754
|
+
.taskon-activity-history__campaign-name {
|
|
4755
|
+
font-size: 13px;
|
|
4756
|
+
line-height: 18px;
|
|
4757
|
+
}
|
|
4758
|
+
|
|
4759
|
+
.taskon-activity-history__campaign-type {
|
|
4760
|
+
font-size: 11px;
|
|
4761
|
+
line-height: 14px;
|
|
4762
|
+
}
|
|
4763
|
+
|
|
4764
|
+
.taskon-activity-history__cell--time {
|
|
4765
|
+
font-size: 12px;
|
|
4766
|
+
line-height: 16px;
|
|
4767
|
+
}
|
|
4768
|
+
|
|
4769
|
+
.taskon-reward-detail__row {
|
|
4770
|
+
align-items: flex-start;
|
|
4771
|
+
flex-wrap: wrap;
|
|
4772
|
+
gap: var(--taskon-spacing-sm);
|
|
4773
|
+
padding: var(--taskon-spacing-sm);
|
|
4774
|
+
}
|
|
4775
|
+
|
|
4776
|
+
.taskon-reward-detail__row--nft {
|
|
4777
|
+
padding: var(--taskon-spacing-sm);
|
|
4778
|
+
}
|
|
4779
|
+
|
|
4780
|
+
.taskon-reward-detail__cell--time {
|
|
4781
|
+
width: 100%;
|
|
4782
|
+
font-size: 12px;
|
|
4783
|
+
line-height: 16px;
|
|
4784
|
+
white-space: normal;
|
|
4785
|
+
}
|
|
4786
|
+
|
|
4787
|
+
.taskon-reward-detail__cell--action {
|
|
4788
|
+
width: 100%;
|
|
4789
|
+
margin-left: 0;
|
|
4790
|
+
}
|
|
4791
|
+
|
|
4792
|
+
.taskon-reward-detail__claim-btn {
|
|
4793
|
+
width: 100%;
|
|
4794
|
+
}
|
|
4795
|
+
|
|
4796
|
+
.taskon-reward-detail__primary {
|
|
4797
|
+
font-size: 13px;
|
|
4798
|
+
line-height: 18px;
|
|
4799
|
+
}
|
|
4800
|
+
|
|
4801
|
+
.taskon-frozen-assets__item {
|
|
4802
|
+
align-items: flex-start;
|
|
4803
|
+
flex-direction: column;
|
|
4804
|
+
gap: var(--taskon-spacing-sm);
|
|
4805
|
+
}
|
|
4806
|
+
|
|
4807
|
+
.taskon-frozen-assets__resend-btn {
|
|
4808
|
+
width: 100%;
|
|
4809
|
+
}
|
|
4810
|
+
|
|
4811
|
+
.taskon-xp-level-card__header {
|
|
4812
|
+
align-items: flex-start;
|
|
4813
|
+
flex-direction: column;
|
|
4814
|
+
gap: var(--taskon-spacing-sm);
|
|
4815
|
+
}
|
|
4816
|
+
|
|
4817
|
+
.taskon-xp-level-card__xp {
|
|
4818
|
+
align-items: flex-start;
|
|
4819
|
+
}
|
|
4820
|
+
|
|
4821
|
+
.taskon-xp-level-card__level-badge {
|
|
4822
|
+
width: 40px;
|
|
4823
|
+
height: 40px;
|
|
4824
|
+
font-size: 16px;
|
|
4825
|
+
}
|
|
4826
|
+
|
|
4827
|
+
.taskon-xp-level-card__level-value {
|
|
4828
|
+
font-size: 18px;
|
|
4829
|
+
}
|
|
4830
|
+
|
|
4831
|
+
.taskon-confirm-unlink__actions {
|
|
4832
|
+
flex-direction: column;
|
|
4833
|
+
}
|
|
4834
|
+
}
|