@taskon/widget-react 0.0.1-beta.5 → 0.0.1-beta.6
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 +13 -4
- package/dist/CommunityTaskList.css +9 -1
- package/dist/EligibilityInfo.css +46 -42
- package/dist/LeaderboardWidget.css +73 -71
- package/dist/PageBuilder.css +5 -0
- package/dist/Quest.css +18 -14
- package/dist/TaskOnProvider.css +2 -0
- package/dist/UserCenterWidget.css +6 -6
- package/dist/UserCenterWidget2.css +1626 -1601
- package/dist/{dynamic-import-helper.css → WidgetShell.css} +2 -2
- package/dist/chunks/{CommunityTaskList-CrMvOB8w.js → CommunityTaskList-Hde2OKHH.js} +360 -154
- package/dist/chunks/{EligibilityInfo-Beww12QX.js → EligibilityInfo-BV0Z2TgY.js} +533 -561
- package/dist/chunks/{LeaderboardWidget-DwuSpVl0.js → LeaderboardWidget-BNGRD5Bu.js} +270 -249
- package/dist/chunks/{PageBuilder-DsX6Tv0N.js → PageBuilder-C5DSHiW9.js} +5 -5
- package/dist/chunks/{Quest-CuD2LElS.js → Quest-DG9zfXJo.js} +72 -50
- package/dist/chunks/{TaskOnProvider-xUeP2Nro.js → TaskOnProvider-BhamHIyY.js} +34 -17
- package/dist/chunks/{ThemeProvider-Bt4UZ33y.js → ThemeProvider-mXLdLSkq.js} +81 -18
- package/dist/chunks/{UserCenterWidget-CvU6K4AC.js → UserCenterWidget-D5ttw4hO.js} +1328 -1337
- package/dist/chunks/{UserCenterWidget-CB0hnj-L.js → UserCenterWidget-jDO5zTN1.js} +298 -231
- package/dist/chunks/{dynamic-import-helper-WmIF58Sb.js → WidgetShell-D7yC894Y.js} +447 -457
- package/dist/chunks/communitytask-es-CBNnS4o2.js +521 -0
- package/dist/chunks/communitytask-ja-GRf9cbdx.js +521 -0
- package/dist/chunks/communitytask-ko-Bf24PQKI.js +521 -0
- package/dist/chunks/{communitytask-ru-DhySaZL8.js → communitytask-ru-CZm2CPoV.js} +211 -1
- package/dist/chunks/leaderboardwidget-es-vKjrjQaz.js +146 -0
- package/dist/chunks/leaderboardwidget-ja-Q6u0HxKG.js +146 -0
- package/dist/chunks/leaderboardwidget-ko-CG6SWgxf.js +146 -0
- package/dist/chunks/leaderboardwidget-ru-DCcHcJGz.js +146 -0
- package/dist/chunks/{quest-es-D-b5xcme.js → quest-es-Dyyy0zaw.js} +8 -93
- package/dist/chunks/{quest-ja-Dxd2vqBF.js → quest-ja-Depog33y.js} +8 -93
- package/dist/chunks/{quest-ko-CSmRWgK_.js → quest-ko-BMu3uRQJ.js} +8 -93
- package/dist/chunks/{quest-ru-CkEKv1_F.js → quest-ru-xne814Rw.js} +8 -93
- package/dist/chunks/usercenter-es-Dz3Wp2vV.js +512 -0
- package/dist/chunks/usercenter-ja-CKE4DJC6.js +512 -0
- package/dist/chunks/usercenter-ko-Dtpkn2qb.js +512 -0
- package/dist/chunks/usercenter-ru-DnBGee45.js +512 -0
- package/dist/community-task.d.ts +0 -390
- package/dist/community-task.js +2 -7
- package/dist/core.d.ts +29 -5
- package/dist/core.js +8 -9
- package/dist/index.d.ts +29 -701
- package/dist/index.js +18 -29
- package/dist/leaderboard.d.ts +0 -498
- package/dist/leaderboard.js +2 -16
- package/dist/page-builder.js +1 -1
- package/dist/quest.d.ts +0 -971
- package/dist/quest.js +2 -7
- package/dist/user-center.d.ts +0 -1610
- package/dist/user-center.js +2 -494
- package/package.json +2 -2
- package/dist/chunks/communitytask-es-1zawvXEX.js +0 -311
- package/dist/chunks/communitytask-ja-CmW6nP-L.js +0 -311
- package/dist/chunks/communitytask-ko-BD0hzQSi.js +0 -311
- package/dist/chunks/createLocaleLoader-BameiEhU.js +0 -65
- package/dist/chunks/leaderboardwidget-ja-Bj6gz6y1.js +0 -119
- package/dist/chunks/leaderboardwidget-ko-f1cLO9ic.js +0 -119
- package/dist/chunks/usercenter-ja-B2465c1O.js +0 -326
- package/dist/chunks/usercenter-ko-xAEYxqLg.js +0 -326
|
@@ -1,857 +1,954 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
3
|
-
*
|
|
4
|
-
*
|
|
2
|
+
* BindWalletDialog 组件样式
|
|
3
|
+
* 使用 taskon-bind-wallet-* 命名空间
|
|
4
|
+
* 与 taskon-website 保持一致
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
-
/*
|
|
7
|
+
/*
|
|
8
|
+
* Responsive base styles
|
|
9
|
+
*
|
|
10
|
+
* Keep mobile breakpoints and fallback patterns centralized here.
|
|
11
|
+
* Components should reuse these mixins instead of duplicating query logic.
|
|
12
|
+
*/
|
|
8
13
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
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
|
-
}
|
|
14
|
+
/*
|
|
15
|
+
* Desktop-up mixin:
|
|
16
|
+
* 1) Enable desktop enhancement in wider containers
|
|
17
|
+
* 2) Keep viewport media query as fallback
|
|
18
|
+
*/
|
|
23
19
|
|
|
24
|
-
|
|
25
|
-
border-color: var(--taskon-color-primary);
|
|
26
|
-
}
|
|
20
|
+
/* ==================== 容器 ==================== */
|
|
27
21
|
|
|
28
|
-
.taskon-
|
|
29
|
-
|
|
30
|
-
|
|
22
|
+
.taskon-bind-wallet-dialog {
|
|
23
|
+
position: relative;
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
31
26
|
}
|
|
32
27
|
|
|
33
|
-
|
|
34
|
-
|
|
28
|
+
/* ==================== 标题 ==================== */
|
|
29
|
+
|
|
30
|
+
.taskon-bind-wallet-dialog-title {
|
|
31
|
+
margin: 0;
|
|
32
|
+
font-size: 22px;
|
|
33
|
+
font-weight: 700;
|
|
34
|
+
line-height: 28px;
|
|
35
|
+
color: var(--taskon-color-text);
|
|
35
36
|
}
|
|
36
37
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
/* ==================== 链类型标签 ==================== */
|
|
39
|
+
|
|
40
|
+
.taskon-bind-wallet-dialog-chain-label {
|
|
41
|
+
margin-top: var(--taskon-spacing-md);
|
|
42
|
+
font-size: 16px;
|
|
43
|
+
font-weight: 500;
|
|
44
|
+
line-height: 20px;
|
|
45
|
+
color: var(--taskon-color-text);
|
|
40
46
|
}
|
|
41
47
|
|
|
42
|
-
/* ====================
|
|
48
|
+
/* ==================== 钱包网格 ==================== */
|
|
43
49
|
|
|
44
|
-
.taskon-
|
|
45
|
-
|
|
50
|
+
.taskon-bind-wallet-dialog-grid {
|
|
51
|
+
margin-top: var(--taskon-spacing-sm);
|
|
52
|
+
display: grid;
|
|
53
|
+
grid-template-columns: 1fr;
|
|
54
|
+
gap: var(--taskon-spacing-md);
|
|
46
55
|
}
|
|
47
56
|
|
|
48
|
-
/* ====================
|
|
57
|
+
/* ==================== 钱包项 ==================== */
|
|
49
58
|
|
|
50
|
-
.taskon-
|
|
59
|
+
.taskon-bind-wallet-item {
|
|
60
|
+
position: relative;
|
|
51
61
|
display: flex;
|
|
52
62
|
align-items: center;
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
63
|
+
justify-content: center;
|
|
64
|
+
height: 50px;
|
|
65
|
+
padding: 0 12px;
|
|
66
|
+
|
|
67
|
+
background: transparent;
|
|
56
68
|
border: 1px solid var(--taskon-color-border);
|
|
57
|
-
|
|
58
|
-
|
|
69
|
+
border-radius: 8px;
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
transition: all 0.2s ease;
|
|
59
72
|
}
|
|
60
73
|
|
|
61
|
-
.taskon-
|
|
62
|
-
|
|
74
|
+
.taskon-bind-wallet-item:hover,
|
|
75
|
+
.taskon-bind-wallet-item:focus {
|
|
76
|
+
background: var(--taskon-color-bg-surface-strong);
|
|
63
77
|
}
|
|
64
78
|
|
|
65
|
-
.taskon-
|
|
66
|
-
|
|
79
|
+
.taskon-bind-wallet-item:active {
|
|
80
|
+
transform: scale(0.98);
|
|
67
81
|
}
|
|
68
82
|
|
|
69
|
-
/*
|
|
83
|
+
/* 钱包图标 */
|
|
70
84
|
|
|
71
|
-
.taskon-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
85
|
+
.taskon-bind-wallet-item-icon {
|
|
86
|
+
display: flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
justify-content: center;
|
|
89
|
+
width: 24px;
|
|
90
|
+
height: 24px;
|
|
91
|
+
flex-shrink: 0;
|
|
76
92
|
}
|
|
77
93
|
|
|
78
|
-
.taskon-
|
|
79
|
-
|
|
94
|
+
.taskon-bind-wallet-item-icon svg {
|
|
95
|
+
width: 24px;
|
|
96
|
+
height: 24px;
|
|
80
97
|
}
|
|
81
98
|
|
|
82
|
-
/*
|
|
99
|
+
/* 钱包名称 */
|
|
83
100
|
|
|
84
|
-
.taskon-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
101
|
+
.taskon-bind-wallet-item-name {
|
|
102
|
+
margin-left: 10px;
|
|
103
|
+
font-size: 18px;
|
|
104
|
+
font-weight: 600;
|
|
105
|
+
line-height: 20px;
|
|
106
|
+
color: var(--taskon-color-text);
|
|
88
107
|
}
|
|
89
108
|
|
|
90
|
-
/*
|
|
109
|
+
/* 已安装标签 */
|
|
91
110
|
|
|
92
|
-
.taskon-
|
|
111
|
+
.taskon-bind-wallet-item-installed {
|
|
112
|
+
position: absolute;
|
|
113
|
+
right: 0;
|
|
114
|
+
bottom: 0;
|
|
93
115
|
padding: 4px 8px;
|
|
94
|
-
font-size:
|
|
95
|
-
|
|
96
|
-
color: var(--taskon-color-
|
|
97
|
-
background:
|
|
98
|
-
border:
|
|
99
|
-
|
|
100
|
-
cursor: pointer;
|
|
101
|
-
transition: all 0.2s;
|
|
116
|
+
font-size: 10px;
|
|
117
|
+
line-height: 14px;
|
|
118
|
+
color: var(--taskon-color-secondary);
|
|
119
|
+
background: var(--taskon-color-secondary-bg);
|
|
120
|
+
border-radius: 8px 0;
|
|
121
|
+
transform-origin: bottom right;
|
|
102
122
|
}
|
|
103
123
|
|
|
104
|
-
|
|
105
|
-
|
|
124
|
+
/* ==================== 连接中状态 ==================== */
|
|
125
|
+
|
|
126
|
+
.taskon-bind-wallet-item--connecting {
|
|
127
|
+
opacity: 0.7;
|
|
128
|
+
cursor: wait;
|
|
106
129
|
}
|
|
107
130
|
|
|
108
|
-
.taskon-
|
|
109
|
-
|
|
110
|
-
|
|
131
|
+
.taskon-bind-wallet-item--connecting:hover,
|
|
132
|
+
.taskon-bind-wallet-item--connecting:focus {
|
|
133
|
+
background: transparent;
|
|
111
134
|
}
|
|
112
135
|
|
|
113
|
-
/* ====================
|
|
136
|
+
/* ==================== 禁用状态 ==================== */
|
|
114
137
|
|
|
115
|
-
.taskon-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
color: var(--taskon-color-error);
|
|
119
|
-
line-height: 1.4;
|
|
138
|
+
.taskon-bind-wallet-item--disabled {
|
|
139
|
+
opacity: 0.5;
|
|
140
|
+
cursor: not-allowed;
|
|
120
141
|
}
|
|
121
|
-
/**
|
|
122
|
-
* ClaimNftDialog 样式
|
|
123
|
-
*/
|
|
124
142
|
|
|
125
|
-
.taskon-
|
|
126
|
-
|
|
143
|
+
.taskon-bind-wallet-item--disabled:hover,
|
|
144
|
+
.taskon-bind-wallet-item--disabled:focus {
|
|
145
|
+
background: transparent;
|
|
127
146
|
}
|
|
128
147
|
|
|
129
|
-
.taskon-
|
|
130
|
-
|
|
131
|
-
flex-direction: column;
|
|
132
|
-
align-items: center;
|
|
133
|
-
padding: 24px;
|
|
134
|
-
text-align: center;
|
|
135
|
-
color: var(--taskon-color-text);
|
|
148
|
+
.taskon-bind-wallet-item--disabled:active {
|
|
149
|
+
transform: none;
|
|
136
150
|
}
|
|
137
151
|
|
|
138
|
-
/*
|
|
139
|
-
|
|
140
|
-
.taskon-claim-dialog-nft {
|
|
141
|
-
margin-bottom: 20px;
|
|
142
|
-
}
|
|
152
|
+
/* 不可用标签 */
|
|
143
153
|
|
|
144
|
-
.taskon-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
154
|
+
.taskon-bind-wallet-item-unavailable {
|
|
155
|
+
position: absolute;
|
|
156
|
+
right: 0;
|
|
157
|
+
bottom: 0;
|
|
158
|
+
padding: 4px 8px;
|
|
159
|
+
font-size: 10px;
|
|
160
|
+
line-height: 14px;
|
|
161
|
+
color: var(--taskon-color-text-tertiary);
|
|
162
|
+
background: var(--taskon-color-bg-surface-subtle);
|
|
163
|
+
border-radius: 8px 0;
|
|
149
164
|
}
|
|
150
165
|
|
|
151
|
-
/*
|
|
166
|
+
/* 连接中 spinner */
|
|
152
167
|
|
|
153
|
-
.taskon-
|
|
154
|
-
|
|
155
|
-
|
|
168
|
+
.taskon-bind-wallet-item-connecting {
|
|
169
|
+
position: absolute;
|
|
170
|
+
right: 8px;
|
|
156
171
|
display: flex;
|
|
157
172
|
align-items: center;
|
|
158
173
|
justify-content: center;
|
|
159
174
|
}
|
|
160
175
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
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
|
+
.taskon-bind-wallet-spinner {
|
|
177
|
+
width: 16px;
|
|
178
|
+
height: 16px;
|
|
179
|
+
color: var(--taskon-color-primary);
|
|
180
|
+
animation: taskon-bind-wallet-spin 1s linear infinite;
|
|
176
181
|
}
|
|
177
182
|
|
|
178
|
-
@keyframes taskon-
|
|
183
|
+
@keyframes taskon-bind-wallet-spin {
|
|
184
|
+
from {
|
|
185
|
+
transform: rotate(0deg);
|
|
186
|
+
}
|
|
179
187
|
to {
|
|
180
188
|
transform: rotate(360deg);
|
|
181
189
|
}
|
|
182
190
|
}
|
|
183
191
|
|
|
184
|
-
/*
|
|
185
|
-
|
|
186
|
-
.taskon-claim-dialog-icon {
|
|
187
|
-
width: 48px;
|
|
188
|
-
height: 48px;
|
|
189
|
-
}
|
|
192
|
+
/* ==================== 提示文字 ==================== */
|
|
190
193
|
|
|
191
|
-
.taskon-
|
|
192
|
-
|
|
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;
|
|
194
|
+
.taskon-bind-wallet-dialog-tip {
|
|
195
|
+
margin: var(--taskon-spacing-md) 0 0;
|
|
219
196
|
font-size: 14px;
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
.taskon-claim-dialog-tx__label {
|
|
197
|
+
line-height: 1.5;
|
|
223
198
|
color: var(--taskon-color-text-tertiary);
|
|
199
|
+
text-align: center;
|
|
224
200
|
}
|
|
225
201
|
|
|
226
|
-
|
|
227
|
-
color: var(--taskon-color-link);
|
|
228
|
-
font-family: monospace;
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
/* 操作按钮 */
|
|
202
|
+
/* ==================== 连接中遮层 ==================== */
|
|
232
203
|
|
|
233
|
-
.taskon-
|
|
204
|
+
.taskon-bind-wallet-loading-overlay {
|
|
205
|
+
position: absolute;
|
|
206
|
+
/* 使用负值覆盖 Dialog body 的 padding */
|
|
207
|
+
inset: -20px;
|
|
234
208
|
display: flex;
|
|
235
|
-
|
|
236
|
-
|
|
209
|
+
flex-direction: column;
|
|
210
|
+
align-items: center;
|
|
237
211
|
justify-content: center;
|
|
212
|
+
background: var(--taskon-color-bg-mask);
|
|
213
|
+
backdrop-filter: blur(4px);
|
|
214
|
+
border-radius: 12px;
|
|
238
215
|
}
|
|
239
216
|
|
|
240
|
-
.taskon-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
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);
|
|
217
|
+
.taskon-bind-wallet-loading-spinner {
|
|
218
|
+
width: 40px;
|
|
219
|
+
height: 40px;
|
|
220
|
+
color: var(--taskon-color-text-secondary);
|
|
221
|
+
animation: taskon-bind-wallet-spin 1s linear infinite;
|
|
263
222
|
}
|
|
264
223
|
|
|
265
|
-
.taskon-
|
|
266
|
-
|
|
224
|
+
.taskon-bind-wallet-loading-text {
|
|
225
|
+
margin: 20px 0 0;
|
|
226
|
+
max-width: 60%;
|
|
227
|
+
font-size: 16px;
|
|
228
|
+
line-height: 20px;
|
|
229
|
+
color: var(--taskon-color-text-secondary);
|
|
230
|
+
text-align: center;
|
|
267
231
|
}
|
|
268
232
|
|
|
269
|
-
@
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
.taskon-claim-dialog-content {
|
|
275
|
-
padding: 16px;
|
|
233
|
+
@supports (container-type: inline-size) {
|
|
234
|
+
@container (min-width: 751px) {
|
|
235
|
+
.taskon-bind-wallet-dialog-chain-label {
|
|
236
|
+
margin-top: 20px;
|
|
276
237
|
}
|
|
277
238
|
|
|
278
|
-
.taskon-
|
|
279
|
-
margin-
|
|
239
|
+
.taskon-bind-wallet-dialog-grid {
|
|
240
|
+
margin-top: 10px;
|
|
241
|
+
grid-template-columns: 1fr 1fr;
|
|
242
|
+
gap: 18px;
|
|
280
243
|
}
|
|
281
244
|
|
|
282
|
-
.taskon-
|
|
283
|
-
|
|
284
|
-
height: 96px;
|
|
245
|
+
.taskon-bind-wallet-dialog-tip {
|
|
246
|
+
margin-top: 20px;
|
|
285
247
|
}
|
|
286
248
|
|
|
287
|
-
.taskon-
|
|
288
|
-
|
|
289
|
-
|
|
249
|
+
.taskon-bind-wallet-loading-overlay {
|
|
250
|
+
inset: -24px;
|
|
251
|
+
border-radius: 16px;
|
|
290
252
|
}
|
|
291
|
-
|
|
292
|
-
.taskon-claim-dialog-spinner,
|
|
293
|
-
.taskon-claim-dialog-icon {
|
|
294
|
-
width: 40px;
|
|
295
|
-
height: 40px;
|
|
253
|
+
}
|
|
296
254
|
}
|
|
297
255
|
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
256
|
+
@supports not (container-type: inline-size) {
|
|
257
|
+
@media (min-width: 751px) {
|
|
258
|
+
.taskon-bind-wallet-dialog-chain-label {
|
|
259
|
+
margin-top: 20px;
|
|
301
260
|
}
|
|
302
261
|
|
|
303
|
-
.taskon-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
gap:
|
|
307
|
-
margin-bottom: 16px;
|
|
262
|
+
.taskon-bind-wallet-dialog-grid {
|
|
263
|
+
margin-top: 10px;
|
|
264
|
+
grid-template-columns: 1fr 1fr;
|
|
265
|
+
gap: 18px;
|
|
308
266
|
}
|
|
309
267
|
|
|
310
|
-
.taskon-
|
|
311
|
-
|
|
312
|
-
max-width: 100%;
|
|
313
|
-
overflow-wrap: anywhere;
|
|
268
|
+
.taskon-bind-wallet-dialog-tip {
|
|
269
|
+
margin-top: 20px;
|
|
314
270
|
}
|
|
315
271
|
|
|
316
|
-
.taskon-
|
|
317
|
-
|
|
318
|
-
|
|
272
|
+
.taskon-bind-wallet-loading-overlay {
|
|
273
|
+
inset: -24px;
|
|
274
|
+
border-radius: 16px;
|
|
319
275
|
}
|
|
320
|
-
|
|
321
|
-
.taskon-claim-dialog-btn {
|
|
322
|
-
width: 100%;
|
|
323
|
-
padding: 9px 12px;
|
|
276
|
+
}
|
|
324
277
|
}
|
|
325
|
-
}
|
|
326
278
|
/**
|
|
327
|
-
*
|
|
279
|
+
* Input 通用组件样式
|
|
280
|
+
* @description 复刻 Vue 版本 BaseInputPro.vue 样式
|
|
281
|
+
* 使用 taskon-input 命名空间
|
|
328
282
|
*/
|
|
329
283
|
|
|
330
|
-
|
|
331
|
-
|
|
284
|
+
/* ==================== 输入框 ==================== */
|
|
285
|
+
|
|
286
|
+
.taskon-input {
|
|
287
|
+
width: 100%;
|
|
288
|
+
height: 40px;
|
|
289
|
+
padding: 0 12px;
|
|
290
|
+
border-radius: 6px;
|
|
291
|
+
border: 1px solid var(--taskon-color-border);
|
|
292
|
+
background: var(--taskon-color-bg-surface-subtle);
|
|
293
|
+
color: var(--taskon-color-text);
|
|
294
|
+
font-size: 14px;
|
|
295
|
+
line-height: 40px;
|
|
296
|
+
letter-spacing: 0.04em;
|
|
297
|
+
outline: none;
|
|
298
|
+
transition: border-color 0.2s;
|
|
332
299
|
}
|
|
333
300
|
|
|
334
|
-
.taskon-
|
|
335
|
-
|
|
336
|
-
flex-direction: column;
|
|
337
|
-
gap: 16px;
|
|
301
|
+
.taskon-input:focus {
|
|
302
|
+
border-color: var(--taskon-color-primary);
|
|
338
303
|
}
|
|
339
304
|
|
|
340
|
-
.taskon-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
line-height: 24px;
|
|
344
|
-
color: var(--taskon-color-text);
|
|
305
|
+
.taskon-input:disabled {
|
|
306
|
+
opacity: 0.6;
|
|
307
|
+
cursor: not-allowed;
|
|
345
308
|
}
|
|
346
309
|
|
|
347
|
-
.taskon-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
310
|
+
.taskon-input--error {
|
|
311
|
+
border-color: var(--taskon-color-error);
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.taskon-input::placeholder {
|
|
351
315
|
color: var(--taskon-color-text-tertiary);
|
|
316
|
+
font-weight: 400;
|
|
352
317
|
}
|
|
353
318
|
|
|
354
|
-
|
|
319
|
+
/* ==================== 包装器（用于 rightSlot 和 error） ==================== */
|
|
320
|
+
|
|
321
|
+
.taskon-input-wrapper {
|
|
322
|
+
width: 100%;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/* ==================== 容器（包含输入框和右侧插槽） ==================== */
|
|
326
|
+
|
|
327
|
+
.taskon-input-container {
|
|
355
328
|
display: flex;
|
|
356
|
-
flex-wrap: wrap;
|
|
357
329
|
align-items: center;
|
|
358
330
|
gap: 8px;
|
|
331
|
+
padding-right: 12px;
|
|
332
|
+
border-radius: 6px;
|
|
333
|
+
border: 1px solid var(--taskon-color-border);
|
|
334
|
+
background: var(--taskon-color-bg-surface-subtle);
|
|
335
|
+
transition: border-color 0.2s;
|
|
359
336
|
}
|
|
360
337
|
|
|
361
|
-
.taskon-
|
|
362
|
-
|
|
363
|
-
color: var(--taskon-color-text-tertiary);
|
|
338
|
+
.taskon-input-container:focus-within {
|
|
339
|
+
border-color: var(--taskon-color-primary);
|
|
364
340
|
}
|
|
365
341
|
|
|
366
|
-
.taskon-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
342
|
+
.taskon-input-container--error {
|
|
343
|
+
border-color: var(--taskon-color-error);
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
/* 容器内的输入框样式重置 */
|
|
347
|
+
|
|
348
|
+
.taskon-input--in-container {
|
|
349
|
+
flex: 1;
|
|
372
350
|
border: none;
|
|
373
|
-
|
|
351
|
+
background: transparent;
|
|
352
|
+
border-radius: 0;
|
|
374
353
|
}
|
|
375
354
|
|
|
376
|
-
.taskon-
|
|
377
|
-
|
|
355
|
+
.taskon-input--in-container:focus {
|
|
356
|
+
border-color: transparent;
|
|
378
357
|
}
|
|
379
358
|
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
359
|
+
/* ==================== 右侧插槽 ==================== */
|
|
360
|
+
|
|
361
|
+
.taskon-input-slot {
|
|
362
|
+
flex-shrink: 0;
|
|
384
363
|
display: flex;
|
|
385
|
-
|
|
386
|
-
gap: 10px;
|
|
364
|
+
align-items: center;
|
|
387
365
|
}
|
|
388
366
|
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
367
|
+
/* MAX 按钮样式（通用样式） */
|
|
368
|
+
|
|
369
|
+
.taskon-input-slot button {
|
|
370
|
+
padding: 4px 8px;
|
|
371
|
+
font-size: 12px;
|
|
372
|
+
font-weight: 600;
|
|
373
|
+
color: var(--taskon-color-primary);
|
|
374
|
+
background: transparent;
|
|
375
|
+
border: 1px solid var(--taskon-color-primary);
|
|
376
|
+
border-radius: 4px;
|
|
377
|
+
cursor: pointer;
|
|
378
|
+
transition: all 0.2s;
|
|
393
379
|
}
|
|
394
380
|
|
|
395
|
-
.taskon-
|
|
396
|
-
|
|
397
|
-
word-break: break-all;
|
|
381
|
+
.taskon-input-slot button:hover:not(:disabled) {
|
|
382
|
+
background: var(--taskon-color-primary-bg);
|
|
398
383
|
}
|
|
399
384
|
|
|
400
|
-
.taskon-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
gap: 12px;
|
|
404
|
-
margin-top: 8px;
|
|
385
|
+
.taskon-input-slot button:disabled {
|
|
386
|
+
opacity: 0.5;
|
|
387
|
+
cursor: not-allowed;
|
|
405
388
|
}
|
|
406
389
|
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
390
|
+
/* ==================== 错误信息 ==================== */
|
|
391
|
+
|
|
392
|
+
.taskon-input-error {
|
|
393
|
+
margin: 4px 0 0 0;
|
|
394
|
+
font-size: 12px;
|
|
395
|
+
color: var(--taskon-color-error);
|
|
396
|
+
line-height: 1.4;
|
|
397
|
+
overflow-wrap: anywhere;
|
|
398
|
+
word-break: break-word;
|
|
399
|
+
}
|
|
400
|
+
/**
|
|
401
|
+
* TipPopover 组件样式
|
|
402
|
+
* 设计原则：组件内部不包含 margin，需要间距由外部控制
|
|
403
|
+
*/
|
|
404
|
+
|
|
405
|
+
/*
|
|
406
|
+
* Responsive base styles
|
|
407
|
+
*
|
|
408
|
+
* Keep mobile breakpoints and fallback patterns centralized here.
|
|
409
|
+
* Components should reuse these mixins instead of duplicating query logic.
|
|
410
|
+
*/
|
|
411
|
+
|
|
412
|
+
/*
|
|
413
|
+
* Desktop-up mixin:
|
|
414
|
+
* 1) Enable desktop enhancement in wider containers
|
|
415
|
+
* 2) Keep viewport media query as fallback
|
|
416
|
+
*/
|
|
417
|
+
|
|
418
|
+
.taskon-tip-popover-trigger {
|
|
419
|
+
display: inline-flex;
|
|
420
|
+
align-items: center;
|
|
421
|
+
justify-content: center;
|
|
422
|
+
padding: 0;
|
|
410
423
|
border: none;
|
|
411
|
-
|
|
412
|
-
font-weight: 500;
|
|
424
|
+
background: transparent;
|
|
413
425
|
cursor: pointer;
|
|
414
|
-
|
|
426
|
+
color: var(--taskon-color-text-tertiary);
|
|
427
|
+
outline: none;
|
|
415
428
|
}
|
|
416
429
|
|
|
417
|
-
.taskon-
|
|
418
|
-
|
|
419
|
-
color: var(--taskon-color-text-
|
|
430
|
+
.taskon-tip-popover-trigger:hover,
|
|
431
|
+
.taskon-tip-popover-trigger:focus {
|
|
432
|
+
color: var(--taskon-color-text-tertiary);
|
|
433
|
+
background: transparent;
|
|
434
|
+
outline: none;
|
|
420
435
|
}
|
|
421
436
|
|
|
422
|
-
|
|
423
|
-
|
|
437
|
+
/* Custom children trigger - reset button styles */
|
|
438
|
+
|
|
439
|
+
.taskon-tip-popover-trigger--custom {
|
|
440
|
+
cursor: pointer;
|
|
424
441
|
}
|
|
425
442
|
|
|
426
|
-
.taskon-
|
|
427
|
-
|
|
443
|
+
.taskon-tip-popover-content {
|
|
444
|
+
max-width: 60vw;
|
|
445
|
+
padding: 12px 16px;
|
|
446
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
447
|
+
border: none;
|
|
448
|
+
outline: none;
|
|
449
|
+
background: var(--taskon-color-bg-floating);
|
|
428
450
|
color: var(--taskon-color-text);
|
|
429
|
-
|
|
451
|
+
font-size: 13px;
|
|
452
|
+
line-height: 1.5;
|
|
453
|
+
box-shadow: 0 4px 16px var(--taskon-color-bg-mask);
|
|
454
|
+
/* z-index 需要大于 Dialog (9999) 才能在弹窗中正常显示 */
|
|
455
|
+
z-index: 10000;
|
|
456
|
+
animation: taskon-tip-popover-fade-in 0.15s ease;
|
|
430
457
|
}
|
|
431
458
|
|
|
432
|
-
.taskon-
|
|
433
|
-
|
|
459
|
+
.taskon-tip-popover-content:focus {
|
|
460
|
+
outline: none;
|
|
434
461
|
}
|
|
435
462
|
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
}
|
|
463
|
+
.taskon-tip-popover-arrow {
|
|
464
|
+
fill: var(--taskon-color-bg-floating);
|
|
465
|
+
}
|
|
440
466
|
|
|
441
|
-
|
|
442
|
-
|
|
467
|
+
@keyframes taskon-tip-popover-fade-in {
|
|
468
|
+
from {
|
|
469
|
+
opacity: 0;
|
|
470
|
+
transform: scale(0.96);
|
|
443
471
|
}
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
line-height: 22px;
|
|
472
|
+
to {
|
|
473
|
+
opacity: 1;
|
|
474
|
+
transform: scale(1);
|
|
448
475
|
}
|
|
476
|
+
}
|
|
449
477
|
|
|
450
|
-
|
|
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
|
-
}
|
|
478
|
+
/* Desktop 增强 */
|
|
457
479
|
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
480
|
+
@supports (container-type: inline-size) {
|
|
481
|
+
@container (min-width: 751px) {
|
|
482
|
+
.taskon-tip-popover-content {
|
|
483
|
+
max-width: 266px;
|
|
461
484
|
}
|
|
462
|
-
|
|
463
|
-
.taskon-pending-dialog-actions {
|
|
464
|
-
align-items: stretch;
|
|
465
|
-
flex-direction: column;
|
|
466
|
-
gap: 8px;
|
|
485
|
+
}
|
|
467
486
|
}
|
|
468
487
|
|
|
469
|
-
|
|
470
|
-
width:
|
|
471
|
-
|
|
488
|
+
@supports not (container-type: inline-size) {
|
|
489
|
+
@media (min-width: 751px) {
|
|
490
|
+
.taskon-tip-popover-content {
|
|
491
|
+
max-width: 266px;
|
|
492
|
+
}
|
|
493
|
+
}
|
|
472
494
|
}
|
|
473
|
-
}
|
|
474
495
|
/**
|
|
475
|
-
*
|
|
476
|
-
*
|
|
477
|
-
*
|
|
496
|
+
* Select 组件样式
|
|
497
|
+
*
|
|
498
|
+
* 基于 Vue ProSelect 组件样式翻译
|
|
499
|
+
* 使用 taskon-select 命名空间避免样式冲突。
|
|
500
|
+
*
|
|
501
|
+
* 主题规范：
|
|
502
|
+
* - 不再定义组件私有主题变量
|
|
503
|
+
* - 统一使用 ThemeProvider 输出的通用 --taskon-* 变量
|
|
478
504
|
*/
|
|
479
|
-
|
|
480
505
|
/*
|
|
481
506
|
* Responsive base styles
|
|
482
507
|
*
|
|
483
508
|
* Keep mobile breakpoints and fallback patterns centralized here.
|
|
484
509
|
* Components should reuse these mixins instead of duplicating query logic.
|
|
485
510
|
*/
|
|
486
|
-
|
|
487
511
|
/*
|
|
488
512
|
* Desktop-up mixin:
|
|
489
513
|
* 1) Enable desktop enhancement in wider containers
|
|
490
514
|
* 2) Keep viewport media query as fallback
|
|
491
515
|
*/
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
.taskon-bind-wallet-dialog {
|
|
516
|
+
/* ========== 根容器 ========== */
|
|
517
|
+
.taskon-select {
|
|
496
518
|
position: relative;
|
|
497
|
-
display:
|
|
498
|
-
|
|
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
|
+
display: inline-block;
|
|
520
|
+
width: 100%;
|
|
519
521
|
}
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
margin-top: var(--taskon-spacing-sm);
|
|
525
|
-
display: grid;
|
|
526
|
-
grid-template-columns: 1fr;
|
|
527
|
-
gap: var(--taskon-spacing-md);
|
|
522
|
+
/* ========== 禁用状态 ========== */
|
|
523
|
+
.taskon-select--disabled {
|
|
524
|
+
opacity: 0.6;
|
|
525
|
+
cursor: not-allowed;
|
|
528
526
|
}
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
.taskon-bind-wallet-item {
|
|
533
|
-
position: relative;
|
|
527
|
+
/* ========== 触发器 ========== */
|
|
528
|
+
.taskon-select__trigger {
|
|
534
529
|
display: flex;
|
|
535
530
|
align-items: center;
|
|
536
|
-
|
|
537
|
-
|
|
531
|
+
height: 40px;
|
|
532
|
+
min-width: 120px;
|
|
538
533
|
padding: 0 12px;
|
|
539
|
-
|
|
540
|
-
|
|
534
|
+
background: var(--taskon-color-bg-surface-subtle);
|
|
535
|
+
color: var(--taskon-color-text);
|
|
536
|
+
font-size: 13px;
|
|
537
|
+
line-height: 20px;
|
|
541
538
|
border: 1px solid var(--taskon-color-border);
|
|
542
|
-
border-radius:
|
|
539
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
543
540
|
cursor: pointer;
|
|
544
|
-
transition:
|
|
541
|
+
transition:
|
|
542
|
+
background 0.2s,
|
|
543
|
+
border-color 0.2s;
|
|
544
|
+
outline: none;
|
|
545
|
+
user-select: none;
|
|
545
546
|
}
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
background: var(--taskon-color-bg-surface-strong);
|
|
547
|
+
.taskon-select__trigger:hover:not(.taskon-select__trigger--disabled) {
|
|
548
|
+
background: var(--taskon-color-bg-surface);
|
|
549
|
+
border-color: var(--taskon-color-border-secondary);
|
|
550
550
|
}
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
551
|
+
.taskon-select__trigger:focus:not(.taskon-select__trigger--disabled) {
|
|
552
|
+
background: var(--taskon-color-bg-surface);
|
|
553
|
+
border-color: var(--taskon-color-border-secondary);
|
|
554
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;
|
|
555
|
+
.taskon-select__trigger--open {
|
|
556
|
+
background: var(--taskon-color-bg-surface);
|
|
557
|
+
border-color: var(--taskon-color-border-secondary);
|
|
565
558
|
}
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
height: 24px;
|
|
559
|
+
.taskon-select__trigger--disabled {
|
|
560
|
+
cursor: not-allowed;
|
|
561
|
+
opacity: 0.6;
|
|
570
562
|
}
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
563
|
+
.taskon-select__trigger--error {
|
|
564
|
+
border-color: var(--taskon-color-error) !important;
|
|
565
|
+
}
|
|
566
|
+
/* 深色主题 */
|
|
567
|
+
.taskon-select__trigger--dark {
|
|
568
|
+
background: var(--taskon-color-bg-surface);
|
|
569
|
+
}
|
|
570
|
+
/* 浅色主题 */
|
|
571
|
+
.taskon-select__trigger--light {
|
|
572
|
+
background: var(--taskon-color-bg-surface);
|
|
579
573
|
color: var(--taskon-color-text);
|
|
574
|
+
border-color: var(--taskon-color-border);
|
|
580
575
|
}
|
|
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;
|
|
576
|
+
.taskon-select__trigger--light:hover:not(.taskon-select__trigger--disabled) {
|
|
577
|
+
background: var(--taskon-color-bg-surface-strong);
|
|
578
|
+
border-color: var(--taskon-color-border-secondary);
|
|
595
579
|
}
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
opacity: 0.7;
|
|
601
|
-
cursor: wait;
|
|
580
|
+
.taskon-select__trigger--light:focus:not(.taskon-select__trigger--disabled),
|
|
581
|
+
.taskon-select__trigger--light.taskon-select__trigger--open {
|
|
582
|
+
background: var(--taskon-color-bg-surface-strong);
|
|
583
|
+
border-color: var(--taskon-color-border-secondary);
|
|
602
584
|
}
|
|
603
|
-
|
|
604
|
-
.taskon-
|
|
605
|
-
.taskon-bind-wallet-item--connecting:focus {
|
|
585
|
+
/* 卡片主题 */
|
|
586
|
+
.taskon-select__trigger--card {
|
|
606
587
|
background: transparent;
|
|
588
|
+
border: none;
|
|
607
589
|
}
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
cursor: not-allowed;
|
|
590
|
+
.taskon-select__trigger--card:hover:not(.taskon-select__trigger--disabled),
|
|
591
|
+
.taskon-select__trigger--card:focus:not(.taskon-select__trigger--disabled),
|
|
592
|
+
.taskon-select__trigger--card.taskon-select__trigger--open {
|
|
593
|
+
background: var(--taskon-color-bg-surface-subtle);
|
|
594
|
+
border: none;
|
|
614
595
|
}
|
|
615
|
-
|
|
616
|
-
.taskon-
|
|
617
|
-
|
|
618
|
-
|
|
596
|
+
/* ========== 触发器图标 ========== */
|
|
597
|
+
.taskon-select__trigger-icon {
|
|
598
|
+
width: 16px;
|
|
599
|
+
height: 16px;
|
|
600
|
+
border-radius: 50%;
|
|
601
|
+
margin-right: 8px;
|
|
602
|
+
flex-shrink: 0;
|
|
619
603
|
}
|
|
620
|
-
|
|
621
|
-
.taskon-
|
|
622
|
-
|
|
604
|
+
/* ========== 触发器文本 ========== */
|
|
605
|
+
.taskon-select__trigger-text {
|
|
606
|
+
flex: 1;
|
|
607
|
+
overflow: hidden;
|
|
608
|
+
text-overflow: ellipsis;
|
|
609
|
+
white-space: nowrap;
|
|
610
|
+
text-align: left;
|
|
623
611
|
}
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
612
|
+
/* ========== 触发器占位符 ========== */
|
|
613
|
+
.taskon-select__trigger-placeholder {
|
|
614
|
+
flex: 1;
|
|
615
|
+
color: var(--taskon-color-text-secondary);
|
|
616
|
+
text-align: left;
|
|
617
|
+
}
|
|
618
|
+
/* ========== 展开图标 ========== */
|
|
619
|
+
.taskon-select__unfold-icon {
|
|
620
|
+
margin-left: 8px;
|
|
621
|
+
color: currentColor;
|
|
622
|
+
opacity: 0.6;
|
|
623
|
+
transition: transform 0.2s;
|
|
624
|
+
flex-shrink: 0;
|
|
625
|
+
}
|
|
626
|
+
.taskon-select__unfold-icon--rotated {
|
|
627
|
+
transform: rotate(180deg);
|
|
628
|
+
}
|
|
629
|
+
/* ========== 下拉菜单 ========== */
|
|
630
|
+
.taskon-select__menu {
|
|
628
631
|
position: absolute;
|
|
632
|
+
top: 100%;
|
|
633
|
+
left: 0;
|
|
629
634
|
right: 0;
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
border-radius: 8px 0;
|
|
635
|
+
margin-top: 4px;
|
|
636
|
+
background: var(--taskon-color-bg-floating);
|
|
637
|
+
border: 1px solid var(--taskon-color-border);
|
|
638
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
639
|
+
overflow: auto;
|
|
640
|
+
z-index: 9999;
|
|
637
641
|
}
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
642
|
+
/* 深色主题 */
|
|
643
|
+
.taskon-select__menu--dark {
|
|
644
|
+
background: var(--taskon-color-bg-floating);
|
|
645
|
+
}
|
|
646
|
+
/* 浅色主题 */
|
|
647
|
+
.taskon-select__menu--light {
|
|
648
|
+
background: var(--taskon-color-bg-floating);
|
|
649
|
+
border-color: var(--taskon-color-border);
|
|
650
|
+
}
|
|
651
|
+
/* ========== 选项 ========== */
|
|
652
|
+
.taskon-select__option {
|
|
644
653
|
display: flex;
|
|
645
654
|
align-items: center;
|
|
646
|
-
|
|
655
|
+
padding: 12px 16px;
|
|
656
|
+
color: var(--taskon-color-text);
|
|
657
|
+
cursor: pointer;
|
|
658
|
+
transition: background 0.15s;
|
|
647
659
|
}
|
|
648
|
-
|
|
649
|
-
|
|
660
|
+
.taskon-select__option:hover:not(.taskon-select__option--disabled) {
|
|
661
|
+
background: var(--taskon-color-bg-surface);
|
|
662
|
+
}
|
|
663
|
+
.taskon-select__option--active {
|
|
664
|
+
background: var(--taskon-color-bg-surface-subtle);
|
|
665
|
+
}
|
|
666
|
+
.taskon-select__option--disabled {
|
|
667
|
+
cursor: not-allowed;
|
|
668
|
+
opacity: 0.4;
|
|
669
|
+
}
|
|
670
|
+
.taskon-select__option--danger .taskon-select__option-label {
|
|
671
|
+
color: var(--taskon-color-error);
|
|
672
|
+
}
|
|
673
|
+
/* ========== 选项图标 ========== */
|
|
674
|
+
.taskon-select__option-icon {
|
|
650
675
|
width: 16px;
|
|
651
676
|
height: 16px;
|
|
652
|
-
|
|
653
|
-
|
|
677
|
+
border-radius: 50%;
|
|
678
|
+
margin-right: 8px;
|
|
679
|
+
flex-shrink: 0;
|
|
654
680
|
}
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
}
|
|
660
|
-
to {
|
|
661
|
-
transform: rotate(360deg);
|
|
662
|
-
}
|
|
681
|
+
/* ========== 选项内容 ========== */
|
|
682
|
+
.taskon-select__option-content {
|
|
683
|
+
flex: 1;
|
|
684
|
+
min-width: 0;
|
|
663
685
|
}
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
.taskon-bind-wallet-dialog-tip {
|
|
668
|
-
margin: var(--taskon-spacing-md) 0 0;
|
|
686
|
+
/* ========== 选项标签 ========== */
|
|
687
|
+
.taskon-select__option-label {
|
|
688
|
+
font-weight: 500;
|
|
669
689
|
font-size: 14px;
|
|
670
|
-
line-height:
|
|
671
|
-
|
|
672
|
-
|
|
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;
|
|
690
|
+
line-height: 20px;
|
|
691
|
+
overflow: hidden;
|
|
692
|
+
white-space: nowrap;
|
|
693
|
+
text-overflow: ellipsis;
|
|
688
694
|
}
|
|
689
|
-
|
|
690
|
-
.taskon-
|
|
691
|
-
|
|
692
|
-
height:
|
|
695
|
+
/* ========== 选项描述 ========== */
|
|
696
|
+
.taskon-select__option-desc {
|
|
697
|
+
font-size: 12px;
|
|
698
|
+
line-height: 16px;
|
|
693
699
|
color: var(--taskon-color-text-secondary);
|
|
694
|
-
|
|
700
|
+
margin-top: 2px;
|
|
695
701
|
}
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
+
.taskon-select__menu--light .taskon-select__option {
|
|
703
|
+
color: var(--taskon-color-text);
|
|
704
|
+
}
|
|
705
|
+
.taskon-select__menu--light .taskon-select__option:hover:not(.taskon-select__option--disabled) {
|
|
706
|
+
background: var(--taskon-color-bg-surface);
|
|
707
|
+
}
|
|
708
|
+
.taskon-select__menu--light .taskon-select__option--active {
|
|
709
|
+
background: var(--taskon-color-bg-surface-strong);
|
|
710
|
+
}
|
|
711
|
+
.taskon-select__menu--light .taskon-select__option-desc {
|
|
702
712
|
color: var(--taskon-color-text-secondary);
|
|
713
|
+
}
|
|
714
|
+
/* ========== 选中勾选图标 ========== */
|
|
715
|
+
.taskon-select__option-check {
|
|
716
|
+
margin-left: 8px;
|
|
717
|
+
color: var(--taskon-color-success);
|
|
718
|
+
flex-shrink: 0;
|
|
719
|
+
}
|
|
720
|
+
/* ========== 空状态 ========== */
|
|
721
|
+
.taskon-select__empty {
|
|
722
|
+
padding: 20px;
|
|
703
723
|
text-align: center;
|
|
724
|
+
color: var(--taskon-color-text-secondary);
|
|
725
|
+
font-size: 14px;
|
|
726
|
+
}
|
|
727
|
+
/* ========== 错误信息 ========== */
|
|
728
|
+
.taskon-select__error {
|
|
729
|
+
margin-top: 4px;
|
|
730
|
+
font-size: 12px;
|
|
731
|
+
color: var(--taskon-color-error);
|
|
732
|
+
overflow-wrap: anywhere;
|
|
733
|
+
word-break: break-word;
|
|
704
734
|
}
|
|
705
|
-
|
|
706
735
|
@supports (container-type: inline-size) {
|
|
707
736
|
@container (min-width: 751px) {
|
|
708
|
-
.taskon-
|
|
709
|
-
|
|
737
|
+
.taskon-select__trigger {
|
|
738
|
+
height: 44px;
|
|
739
|
+
font-size: var(--taskon-font-size);
|
|
710
740
|
}
|
|
711
741
|
|
|
712
|
-
.taskon-
|
|
713
|
-
|
|
714
|
-
grid-template-columns: 1fr 1fr;
|
|
715
|
-
gap: 18px;
|
|
742
|
+
.taskon-select__option {
|
|
743
|
+
padding: 15px 20px;
|
|
716
744
|
}
|
|
717
745
|
|
|
718
|
-
.taskon-
|
|
719
|
-
|
|
746
|
+
.taskon-select__trigger-icon {
|
|
747
|
+
width: 20px;
|
|
748
|
+
height: 20px;
|
|
749
|
+
margin-right: 10px;
|
|
720
750
|
}
|
|
721
751
|
|
|
722
|
-
.taskon-
|
|
723
|
-
|
|
724
|
-
|
|
752
|
+
.taskon-select__option-icon {
|
|
753
|
+
width: 20px;
|
|
754
|
+
height: 20px;
|
|
755
|
+
margin-right: 10px;
|
|
756
|
+
}
|
|
757
|
+
|
|
758
|
+
.taskon-select__unfold-icon {
|
|
759
|
+
margin-left: 10px;
|
|
725
760
|
}
|
|
726
761
|
}
|
|
727
762
|
}
|
|
728
|
-
|
|
729
763
|
@supports not (container-type: inline-size) {
|
|
730
764
|
@media (min-width: 751px) {
|
|
731
|
-
.taskon-
|
|
732
|
-
|
|
765
|
+
.taskon-select__trigger {
|
|
766
|
+
height: 44px;
|
|
767
|
+
font-size: var(--taskon-font-size);
|
|
733
768
|
}
|
|
734
769
|
|
|
735
|
-
.taskon-
|
|
736
|
-
|
|
737
|
-
grid-template-columns: 1fr 1fr;
|
|
738
|
-
gap: 18px;
|
|
770
|
+
.taskon-select__option {
|
|
771
|
+
padding: 15px 20px;
|
|
739
772
|
}
|
|
740
773
|
|
|
741
|
-
.taskon-
|
|
742
|
-
|
|
774
|
+
.taskon-select__trigger-icon {
|
|
775
|
+
width: 20px;
|
|
776
|
+
height: 20px;
|
|
777
|
+
margin-right: 10px;
|
|
743
778
|
}
|
|
744
779
|
|
|
745
|
-
.taskon-
|
|
746
|
-
|
|
747
|
-
|
|
780
|
+
.taskon-select__option-icon {
|
|
781
|
+
width: 20px;
|
|
782
|
+
height: 20px;
|
|
783
|
+
margin-right: 10px;
|
|
784
|
+
}
|
|
785
|
+
|
|
786
|
+
.taskon-select__unfold-icon {
|
|
787
|
+
margin-left: 10px;
|
|
748
788
|
}
|
|
749
789
|
}
|
|
750
790
|
}
|
|
751
791
|
/**
|
|
752
|
-
*
|
|
753
|
-
*
|
|
792
|
+
* WithdrawSelectOption 组件样式
|
|
793
|
+
*
|
|
794
|
+
* 基于 Vue WithdrawSelectOption 组件样式翻译
|
|
795
|
+
* 主题规范：仅使用通用 --taskon-* 变量，不定义局部主题变量
|
|
754
796
|
*/
|
|
755
|
-
|
|
756
797
|
/*
|
|
757
798
|
* Responsive base styles
|
|
758
799
|
*
|
|
759
800
|
* Keep mobile breakpoints and fallback patterns centralized here.
|
|
760
801
|
* Components should reuse these mixins instead of duplicating query logic.
|
|
761
802
|
*/
|
|
762
|
-
|
|
763
803
|
/*
|
|
764
804
|
* Desktop-up mixin:
|
|
765
805
|
* 1) Enable desktop enhancement in wider containers
|
|
766
806
|
* 2) Keep viewport media query as fallback
|
|
767
807
|
*/
|
|
768
|
-
|
|
769
|
-
|
|
808
|
+
.taskon-withdraw-option {
|
|
809
|
+
padding: 12px 4px 12px 16px;
|
|
810
|
+
cursor: pointer;
|
|
811
|
+
}
|
|
812
|
+
.taskon-withdraw-option:hover {
|
|
813
|
+
background: var(--taskon-color-bg-surface);
|
|
814
|
+
}
|
|
815
|
+
/* 禁用状态 */
|
|
816
|
+
.taskon-withdraw-option--disabled {
|
|
817
|
+
cursor: not-allowed;
|
|
818
|
+
opacity: 0.4;
|
|
819
|
+
}
|
|
820
|
+
/* ========== 主要内容 ========== */
|
|
821
|
+
.taskon-withdraw-option__content {
|
|
822
|
+
display: flex;
|
|
823
|
+
align-items: center;
|
|
824
|
+
}
|
|
825
|
+
/* 模糊状态（不可提现） */
|
|
826
|
+
.taskon-withdraw-option__content--blurred {
|
|
827
|
+
pointer-events: none;
|
|
828
|
+
opacity: 0.4;
|
|
829
|
+
}
|
|
830
|
+
/* ========== 链信息 ========== */
|
|
831
|
+
.taskon-withdraw-option__chain {
|
|
770
832
|
display: inline-flex;
|
|
771
833
|
align-items: center;
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
background: transparent;
|
|
776
|
-
cursor: pointer;
|
|
777
|
-
color: var(--taskon-color-text-tertiary);
|
|
778
|
-
outline: none;
|
|
834
|
+
gap: 8px;
|
|
835
|
+
width: 33.33%;
|
|
836
|
+
min-width: 0;
|
|
779
837
|
}
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
outline: none;
|
|
838
|
+
.taskon-withdraw-option__chain-icon {
|
|
839
|
+
width: 14px;
|
|
840
|
+
height: 14px;
|
|
841
|
+
border-radius: 50%;
|
|
842
|
+
flex-shrink: 0;
|
|
786
843
|
}
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
844
|
+
.taskon-withdraw-option__chain-label {
|
|
845
|
+
font-size: 13px;
|
|
846
|
+
color: var(--taskon-color-text-secondary);
|
|
847
|
+
overflow: hidden;
|
|
848
|
+
text-overflow: ellipsis;
|
|
849
|
+
white-space: nowrap;
|
|
792
850
|
}
|
|
793
|
-
|
|
794
|
-
.taskon-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
851
|
+
/* ========== Token 信息 ========== */
|
|
852
|
+
.taskon-withdraw-option__token {
|
|
853
|
+
display: flex;
|
|
854
|
+
align-items: center;
|
|
855
|
+
flex: 1;
|
|
856
|
+
min-width: 0;
|
|
857
|
+
}
|
|
858
|
+
.taskon-withdraw-option__token-icon {
|
|
859
|
+
width: 14px;
|
|
860
|
+
height: 14px;
|
|
861
|
+
border-radius: 50%;
|
|
862
|
+
margin-right: 6px;
|
|
863
|
+
flex-shrink: 0;
|
|
864
|
+
}
|
|
865
|
+
.taskon-withdraw-option__token-label {
|
|
866
|
+
font-weight: 500;
|
|
867
|
+
font-size: 13px;
|
|
868
|
+
line-height: 20px;
|
|
801
869
|
color: var(--taskon-color-text);
|
|
870
|
+
overflow: hidden;
|
|
871
|
+
white-space: nowrap;
|
|
872
|
+
text-overflow: ellipsis;
|
|
873
|
+
}
|
|
874
|
+
/* ========== 尾部信息（余额 + 选中状态） ========== */
|
|
875
|
+
.taskon-withdraw-option__trailing {
|
|
876
|
+
display: flex;
|
|
877
|
+
align-items: center;
|
|
878
|
+
justify-content: flex-end;
|
|
879
|
+
gap: 4px;
|
|
880
|
+
flex-shrink: 0;
|
|
881
|
+
}
|
|
882
|
+
.taskon-withdraw-option__balance {
|
|
802
883
|
font-size: 13px;
|
|
803
|
-
|
|
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;
|
|
884
|
+
color: var(--taskon-color-text-tertiary);
|
|
808
885
|
}
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
886
|
+
.taskon-withdraw-option__check {
|
|
887
|
+
width: 12px;
|
|
888
|
+
height: 8px;
|
|
889
|
+
color: var(--taskon-color-success);
|
|
890
|
+
visibility: hidden;
|
|
812
891
|
}
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
fill: var(--taskon-color-bg-floating);
|
|
892
|
+
.taskon-withdraw-option__check--visible {
|
|
893
|
+
visibility: visible;
|
|
816
894
|
}
|
|
895
|
+
/* ========== 警告提示 ========== */
|
|
896
|
+
.taskon-withdraw-option__warning {
|
|
897
|
+
margin-top: 4px;
|
|
898
|
+
font-size: 11px;
|
|
899
|
+
font-weight: 400;
|
|
900
|
+
color: var(--taskon-color-warning);
|
|
901
|
+
}
|
|
902
|
+
@supports (container-type: inline-size) {
|
|
903
|
+
@container (min-width: 751px) {
|
|
904
|
+
.taskon-withdraw-option {
|
|
905
|
+
padding: 15px 6px 15px 20px;
|
|
906
|
+
}
|
|
817
907
|
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
908
|
+
.taskon-withdraw-option__chain-icon,
|
|
909
|
+
.taskon-withdraw-option__token-icon {
|
|
910
|
+
width: 16px;
|
|
911
|
+
height: 16px;
|
|
822
912
|
}
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
913
|
+
|
|
914
|
+
.taskon-withdraw-option__chain-label,
|
|
915
|
+
.taskon-withdraw-option__token-label,
|
|
916
|
+
.taskon-withdraw-option__balance {
|
|
917
|
+
font-size: 14px;
|
|
826
918
|
}
|
|
827
|
-
}
|
|
828
|
-
|
|
829
|
-
/* Desktop 增强 */
|
|
830
919
|
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
.taskon-tip-popover-content {
|
|
834
|
-
max-width: 266px;
|
|
920
|
+
.taskon-withdraw-option__warning {
|
|
921
|
+
font-size: 12px;
|
|
835
922
|
}
|
|
836
923
|
}
|
|
837
924
|
}
|
|
838
|
-
|
|
839
925
|
@supports not (container-type: inline-size) {
|
|
840
926
|
@media (min-width: 751px) {
|
|
841
|
-
.taskon-
|
|
842
|
-
|
|
927
|
+
.taskon-withdraw-option {
|
|
928
|
+
padding: 15px 6px 15px 20px;
|
|
929
|
+
}
|
|
930
|
+
|
|
931
|
+
.taskon-withdraw-option__chain-icon,
|
|
932
|
+
.taskon-withdraw-option__token-icon {
|
|
933
|
+
width: 16px;
|
|
934
|
+
height: 16px;
|
|
935
|
+
}
|
|
936
|
+
|
|
937
|
+
.taskon-withdraw-option__chain-label,
|
|
938
|
+
.taskon-withdraw-option__token-label,
|
|
939
|
+
.taskon-withdraw-option__balance {
|
|
940
|
+
font-size: 14px;
|
|
941
|
+
}
|
|
942
|
+
|
|
943
|
+
.taskon-withdraw-option__warning {
|
|
944
|
+
font-size: 12px;
|
|
843
945
|
}
|
|
844
946
|
}
|
|
845
947
|
}
|
|
846
948
|
/**
|
|
847
|
-
*
|
|
848
|
-
*
|
|
849
|
-
* 基于 Vue ProSelect 组件样式翻译
|
|
850
|
-
* 使用 taskon-select 命名空间避免样式冲突。
|
|
949
|
+
* FormItem 组件样式
|
|
851
950
|
*
|
|
852
|
-
*
|
|
853
|
-
* - 不再定义组件私有主题变量
|
|
854
|
-
* - 统一使用 ThemeProvider 输出的通用 --taskon-* 变量
|
|
951
|
+
* 基于 Vue FormItem.vue 样式翻译
|
|
855
952
|
*/
|
|
856
953
|
/*
|
|
857
954
|
* Responsive base styles
|
|
@@ -865,283 +962,128 @@
|
|
|
865
962
|
* 2) Keep viewport media query as fallback
|
|
866
963
|
*/
|
|
867
964
|
/* ========== 根容器 ========== */
|
|
868
|
-
.taskon-
|
|
965
|
+
.taskon-form-item {
|
|
966
|
+
--form-item-space: 12px;
|
|
967
|
+
--form-item-label-space: 6px;
|
|
968
|
+
--form-item-font-size: 13px;
|
|
969
|
+
--form-item-line-height: 20px;
|
|
970
|
+
|
|
869
971
|
position: relative;
|
|
870
|
-
display: inline-block;
|
|
871
|
-
width: 100%;
|
|
872
972
|
}
|
|
873
|
-
/*
|
|
874
|
-
.taskon-
|
|
875
|
-
|
|
876
|
-
cursor: not-allowed;
|
|
973
|
+
/* 相邻 FormItem 之间的间距 */
|
|
974
|
+
.taskon-form-item + .taskon-form-item {
|
|
975
|
+
margin-top: var(--form-item-space);
|
|
877
976
|
}
|
|
878
|
-
/*
|
|
879
|
-
.taskon-
|
|
977
|
+
/* Dialog 模式下的间距 */
|
|
978
|
+
.taskon-form-item--dialog + .taskon-form-item--dialog {
|
|
979
|
+
margin-top: 16px;
|
|
980
|
+
}
|
|
981
|
+
/* ========== 标签行 ========== */
|
|
982
|
+
.taskon-form-item__row {
|
|
880
983
|
display: flex;
|
|
881
984
|
align-items: center;
|
|
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);
|
|
891
|
-
cursor: pointer;
|
|
892
|
-
transition:
|
|
893
|
-
background 0.2s,
|
|
894
|
-
border-color 0.2s;
|
|
895
|
-
outline: none;
|
|
896
|
-
user-select: none;
|
|
897
|
-
}
|
|
898
|
-
.taskon-select__trigger:hover:not(.taskon-select__trigger--disabled) {
|
|
899
|
-
background: var(--taskon-color-bg-surface);
|
|
900
|
-
border-color: var(--taskon-color-border-secondary);
|
|
901
|
-
}
|
|
902
|
-
.taskon-select__trigger:focus:not(.taskon-select__trigger--disabled) {
|
|
903
|
-
background: var(--taskon-color-bg-surface);
|
|
904
|
-
border-color: var(--taskon-color-border-secondary);
|
|
905
|
-
}
|
|
906
|
-
.taskon-select__trigger--open {
|
|
907
|
-
background: var(--taskon-color-bg-surface);
|
|
908
|
-
border-color: var(--taskon-color-border-secondary);
|
|
909
|
-
}
|
|
910
|
-
.taskon-select__trigger--disabled {
|
|
911
|
-
cursor: not-allowed;
|
|
912
|
-
opacity: 0.6;
|
|
913
|
-
}
|
|
914
|
-
.taskon-select__trigger--error {
|
|
915
|
-
border-color: var(--taskon-color-error) !important;
|
|
916
|
-
}
|
|
917
|
-
/* 深色主题 */
|
|
918
|
-
.taskon-select__trigger--dark {
|
|
919
|
-
background: var(--taskon-color-bg-surface);
|
|
920
|
-
}
|
|
921
|
-
/* 浅色主题 */
|
|
922
|
-
.taskon-select__trigger--light {
|
|
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);
|
|
935
|
-
}
|
|
936
|
-
/* 卡片主题 */
|
|
937
|
-
.taskon-select__trigger--card {
|
|
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;
|
|
946
|
-
}
|
|
947
|
-
/* ========== 触发器图标 ========== */
|
|
948
|
-
.taskon-select__trigger-icon {
|
|
949
|
-
width: 16px;
|
|
950
|
-
height: 16px;
|
|
951
|
-
border-radius: 50%;
|
|
952
|
-
margin-right: 8px;
|
|
953
|
-
flex-shrink: 0;
|
|
954
|
-
}
|
|
955
|
-
/* ========== 触发器文本 ========== */
|
|
956
|
-
.taskon-select__trigger-text {
|
|
957
|
-
flex: 1;
|
|
958
|
-
overflow: hidden;
|
|
959
|
-
text-overflow: ellipsis;
|
|
960
|
-
white-space: nowrap;
|
|
961
|
-
text-align: left;
|
|
962
|
-
}
|
|
963
|
-
/* ========== 触发器占位符 ========== */
|
|
964
|
-
.taskon-select__trigger-placeholder {
|
|
965
|
-
flex: 1;
|
|
966
|
-
color: var(--taskon-color-text-secondary);
|
|
967
|
-
text-align: left;
|
|
968
|
-
}
|
|
969
|
-
/* ========== 展开图标 ========== */
|
|
970
|
-
.taskon-select__unfold-icon {
|
|
971
|
-
margin-left: 8px;
|
|
972
|
-
color: currentColor;
|
|
973
|
-
opacity: 0.6;
|
|
974
|
-
transition: transform 0.2s;
|
|
975
|
-
flex-shrink: 0;
|
|
976
|
-
}
|
|
977
|
-
.taskon-select__unfold-icon--rotated {
|
|
978
|
-
transform: rotate(180deg);
|
|
979
|
-
}
|
|
980
|
-
/* ========== 下拉菜单 ========== */
|
|
981
|
-
.taskon-select__menu {
|
|
982
|
-
position: absolute;
|
|
983
|
-
top: 100%;
|
|
984
|
-
left: 0;
|
|
985
|
-
right: 0;
|
|
986
|
-
margin-top: 4px;
|
|
987
|
-
background: var(--taskon-color-bg-floating);
|
|
988
|
-
border: 1px solid var(--taskon-color-border);
|
|
989
|
-
border-radius: var(--taskon-border-radius-sm);
|
|
990
|
-
overflow: auto;
|
|
991
|
-
z-index: 9999;
|
|
992
985
|
}
|
|
993
|
-
/*
|
|
994
|
-
.taskon-
|
|
995
|
-
|
|
986
|
+
/* 有标签时的下边距 */
|
|
987
|
+
.taskon-form-item__row--has-label {
|
|
988
|
+
margin-bottom: var(--form-item-label-space);
|
|
996
989
|
}
|
|
997
|
-
/*
|
|
998
|
-
.taskon-
|
|
999
|
-
|
|
1000
|
-
border-color: var(--taskon-color-border);
|
|
990
|
+
/* 无下边距 */
|
|
991
|
+
.taskon-form-item__row--no-margin {
|
|
992
|
+
margin-bottom: 0;
|
|
1001
993
|
}
|
|
1002
|
-
/* ==========
|
|
1003
|
-
.taskon-
|
|
994
|
+
/* ========== 标签 ========== */
|
|
995
|
+
.taskon-form-item__label {
|
|
1004
996
|
display: flex;
|
|
1005
997
|
align-items: center;
|
|
1006
|
-
padding: 12px 16px;
|
|
1007
|
-
color: var(--taskon-color-text);
|
|
1008
|
-
cursor: pointer;
|
|
1009
|
-
transition: background 0.15s;
|
|
1010
|
-
}
|
|
1011
|
-
.taskon-select__option:hover:not(.taskon-select__option--disabled) {
|
|
1012
|
-
background: var(--taskon-color-bg-surface);
|
|
1013
|
-
}
|
|
1014
|
-
.taskon-select__option--active {
|
|
1015
|
-
background: var(--taskon-color-bg-surface-subtle);
|
|
1016
|
-
}
|
|
1017
|
-
.taskon-select__option--disabled {
|
|
1018
|
-
cursor: not-allowed;
|
|
1019
|
-
opacity: 0.4;
|
|
1020
|
-
}
|
|
1021
|
-
.taskon-select__option--danger .taskon-select__option-label {
|
|
1022
|
-
color: var(--taskon-color-error);
|
|
1023
|
-
}
|
|
1024
|
-
/* ========== 选项图标 ========== */
|
|
1025
|
-
.taskon-select__option-icon {
|
|
1026
|
-
width: 16px;
|
|
1027
|
-
height: 16px;
|
|
1028
|
-
border-radius: 50%;
|
|
1029
|
-
margin-right: 8px;
|
|
1030
|
-
flex-shrink: 0;
|
|
1031
|
-
}
|
|
1032
|
-
/* ========== 选项内容 ========== */
|
|
1033
|
-
.taskon-select__option-content {
|
|
1034
|
-
flex: 1;
|
|
1035
|
-
min-width: 0;
|
|
1036
|
-
}
|
|
1037
|
-
/* ========== 选项标签 ========== */
|
|
1038
|
-
.taskon-select__option-label {
|
|
1039
998
|
font-weight: 500;
|
|
1040
|
-
font-size:
|
|
1041
|
-
line-height:
|
|
1042
|
-
overflow: hidden;
|
|
1043
|
-
white-space: nowrap;
|
|
1044
|
-
text-overflow: ellipsis;
|
|
1045
|
-
}
|
|
1046
|
-
/* ========== 选项描述 ========== */
|
|
1047
|
-
.taskon-select__option-desc {
|
|
1048
|
-
font-size: 12px;
|
|
1049
|
-
line-height: 16px;
|
|
1050
|
-
color: var(--taskon-color-text-secondary);
|
|
1051
|
-
margin-top: 2px;
|
|
1052
|
-
}
|
|
1053
|
-
.taskon-select__menu--light .taskon-select__option {
|
|
999
|
+
font-size: var(--form-item-font-size);
|
|
1000
|
+
line-height: var(--form-item-line-height);
|
|
1054
1001
|
color: var(--taskon-color-text);
|
|
1002
|
+
white-space: nowrap;
|
|
1055
1003
|
}
|
|
1056
|
-
|
|
1057
|
-
|
|
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);
|
|
1004
|
+
/* ========== 可选标记 ========== */
|
|
1005
|
+
.taskon-form-item__optional {
|
|
1006
|
+
color: var(--taskon-color-text-disabled);
|
|
1064
1007
|
}
|
|
1065
|
-
/* ==========
|
|
1066
|
-
.taskon-
|
|
1008
|
+
/* ========== 提示图标 ========== */
|
|
1009
|
+
.taskon-form-item__tip {
|
|
1067
1010
|
margin-left: 8px;
|
|
1068
|
-
|
|
1069
|
-
|
|
1011
|
+
display: inline-flex;
|
|
1012
|
+
align-items: center;
|
|
1070
1013
|
}
|
|
1071
|
-
/* ==========
|
|
1072
|
-
.taskon-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1014
|
+
/* ========== 文档链接 ========== */
|
|
1015
|
+
.taskon-form-item__doc-link {
|
|
1016
|
+
margin-left: auto;
|
|
1017
|
+
display: flex;
|
|
1018
|
+
align-items: center;
|
|
1019
|
+
gap: 4px;
|
|
1076
1020
|
font-size: 14px;
|
|
1021
|
+
color: var(--taskon-color-link);
|
|
1022
|
+
text-decoration: none;
|
|
1023
|
+
cursor: pointer;
|
|
1024
|
+
}
|
|
1025
|
+
.taskon-form-item__doc-link:hover {
|
|
1026
|
+
text-decoration: underline;
|
|
1027
|
+
}
|
|
1028
|
+
.taskon-form-item__doc-icon {
|
|
1029
|
+
width: 8px;
|
|
1030
|
+
height: 9px;
|
|
1077
1031
|
}
|
|
1078
1032
|
/* ========== 错误信息 ========== */
|
|
1079
|
-
.taskon-
|
|
1033
|
+
.taskon-form-item__error {
|
|
1080
1034
|
margin-top: 4px;
|
|
1081
1035
|
font-size: 12px;
|
|
1036
|
+
line-height: 16px;
|
|
1082
1037
|
color: var(--taskon-color-error);
|
|
1038
|
+
white-space: pre-wrap;
|
|
1039
|
+
overflow-wrap: anywhere;
|
|
1040
|
+
word-break: break-word;
|
|
1041
|
+
}
|
|
1042
|
+
/* 警告样式（橙色） */
|
|
1043
|
+
.taskon-form-item__error--warn {
|
|
1044
|
+
color: var(--taskon-color-warning);
|
|
1083
1045
|
}
|
|
1084
1046
|
@supports (container-type: inline-size) {
|
|
1085
1047
|
@container (min-width: 751px) {
|
|
1086
|
-
.taskon-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
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;
|
|
1048
|
+
.taskon-form-item {
|
|
1049
|
+
--form-item-space: 16px;
|
|
1050
|
+
--form-item-label-space: 8px;
|
|
1051
|
+
--form-item-font-size: 14px;
|
|
1099
1052
|
}
|
|
1100
1053
|
|
|
1101
|
-
.taskon-
|
|
1102
|
-
|
|
1103
|
-
height: 20px;
|
|
1104
|
-
margin-right: 10px;
|
|
1054
|
+
.taskon-form-item--dialog + .taskon-form-item--dialog {
|
|
1055
|
+
margin-top: 20px;
|
|
1105
1056
|
}
|
|
1106
1057
|
|
|
1107
|
-
.taskon-
|
|
1108
|
-
margin-left:
|
|
1058
|
+
.taskon-form-item__tip {
|
|
1059
|
+
margin-left: 6px;
|
|
1109
1060
|
}
|
|
1110
1061
|
}
|
|
1111
1062
|
}
|
|
1112
1063
|
@supports not (container-type: inline-size) {
|
|
1113
1064
|
@media (min-width: 751px) {
|
|
1114
|
-
.taskon-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
.taskon-select__option {
|
|
1120
|
-
padding: 15px 20px;
|
|
1121
|
-
}
|
|
1122
|
-
|
|
1123
|
-
.taskon-select__trigger-icon {
|
|
1124
|
-
width: 20px;
|
|
1125
|
-
height: 20px;
|
|
1126
|
-
margin-right: 10px;
|
|
1065
|
+
.taskon-form-item {
|
|
1066
|
+
--form-item-space: 16px;
|
|
1067
|
+
--form-item-label-space: 8px;
|
|
1068
|
+
--form-item-font-size: 14px;
|
|
1127
1069
|
}
|
|
1128
1070
|
|
|
1129
|
-
.taskon-
|
|
1130
|
-
|
|
1131
|
-
height: 20px;
|
|
1132
|
-
margin-right: 10px;
|
|
1071
|
+
.taskon-form-item--dialog + .taskon-form-item--dialog {
|
|
1072
|
+
margin-top: 20px;
|
|
1133
1073
|
}
|
|
1134
1074
|
|
|
1135
|
-
.taskon-
|
|
1136
|
-
margin-left:
|
|
1075
|
+
.taskon-form-item__tip {
|
|
1076
|
+
margin-left: 6px;
|
|
1137
1077
|
}
|
|
1138
1078
|
}
|
|
1139
1079
|
}
|
|
1140
1080
|
/**
|
|
1141
|
-
*
|
|
1081
|
+
* Checkbox 复选框组件样式
|
|
1142
1082
|
*
|
|
1143
|
-
*
|
|
1144
|
-
*
|
|
1083
|
+
* 采用 BEM 命名规范
|
|
1084
|
+
* 前缀: taskon-checkbox
|
|
1085
|
+
*
|
|
1086
|
+
* 参考 Vue 版本 BaseCheckBox.vue 样式实现
|
|
1145
1087
|
*/
|
|
1146
1088
|
/*
|
|
1147
1089
|
* Responsive base styles
|
|
@@ -1154,150 +1096,139 @@
|
|
|
1154
1096
|
* 1) Enable desktop enhancement in wider containers
|
|
1155
1097
|
* 2) Keep viewport media query as fallback
|
|
1156
1098
|
*/
|
|
1157
|
-
|
|
1158
|
-
|
|
1099
|
+
/* ============================================================================
|
|
1100
|
+
根元素
|
|
1101
|
+
============================================================================ */
|
|
1102
|
+
.taskon-checkbox {
|
|
1103
|
+
display: inline-flex;
|
|
1104
|
+
align-items: center;
|
|
1105
|
+
justify-content: center;
|
|
1159
1106
|
cursor: pointer;
|
|
1107
|
+
user-select: none;
|
|
1108
|
+
outline: none;
|
|
1160
1109
|
}
|
|
1161
|
-
|
|
1162
|
-
|
|
1110
|
+
/* 悬停和聚焦效果 */
|
|
1111
|
+
.taskon-checkbox:not(.taskon-checkbox--disabled):hover,
|
|
1112
|
+
.taskon-checkbox:not(.taskon-checkbox--disabled):focus {
|
|
1113
|
+
opacity: 0.8;
|
|
1163
1114
|
}
|
|
1164
1115
|
/* 禁用状态 */
|
|
1165
|
-
.taskon-
|
|
1116
|
+
.taskon-checkbox--disabled {
|
|
1166
1117
|
cursor: not-allowed;
|
|
1167
1118
|
opacity: 0.4;
|
|
1168
1119
|
}
|
|
1169
|
-
/*
|
|
1170
|
-
.taskon-
|
|
1171
|
-
|
|
1172
|
-
align-items: center;
|
|
1173
|
-
}
|
|
1174
|
-
/* 模糊状态（不可提现） */
|
|
1175
|
-
.taskon-withdraw-option__content--blurred {
|
|
1176
|
-
pointer-events: none;
|
|
1120
|
+
/* 只读状态 */
|
|
1121
|
+
.taskon-checkbox--readonly {
|
|
1122
|
+
cursor: default;
|
|
1177
1123
|
opacity: 0.4;
|
|
1178
1124
|
}
|
|
1179
|
-
/*
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
width: 33.33%;
|
|
1185
|
-
min-width: 0;
|
|
1186
|
-
}
|
|
1187
|
-
.taskon-withdraw-option__chain-icon {
|
|
1188
|
-
width: 14px;
|
|
1189
|
-
height: 14px;
|
|
1190
|
-
border-radius: 50%;
|
|
1191
|
-
flex-shrink: 0;
|
|
1192
|
-
}
|
|
1193
|
-
.taskon-withdraw-option__chain-label {
|
|
1194
|
-
font-size: 13px;
|
|
1195
|
-
color: var(--taskon-color-text-secondary);
|
|
1196
|
-
overflow: hidden;
|
|
1197
|
-
text-overflow: ellipsis;
|
|
1198
|
-
white-space: nowrap;
|
|
1125
|
+
/* ============================================================================
|
|
1126
|
+
隐藏的原生 input
|
|
1127
|
+
============================================================================ */
|
|
1128
|
+
.taskon-checkbox__input {
|
|
1129
|
+
display: none;
|
|
1199
1130
|
}
|
|
1200
|
-
/*
|
|
1201
|
-
|
|
1131
|
+
/* ============================================================================
|
|
1132
|
+
自定义图标容器
|
|
1133
|
+
============================================================================ */
|
|
1134
|
+
.taskon-checkbox__icon {
|
|
1202
1135
|
display: flex;
|
|
1136
|
+
justify-content: center;
|
|
1203
1137
|
align-items: center;
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
height: 14px;
|
|
1210
|
-
border-radius: 50%;
|
|
1211
|
-
margin-right: 6px;
|
|
1138
|
+
width: 16px;
|
|
1139
|
+
height: 16px;
|
|
1140
|
+
border: 2px solid var(--taskon-color-border);
|
|
1141
|
+
border-radius: 3px;
|
|
1142
|
+
transition: all 0.2s ease;
|
|
1212
1143
|
flex-shrink: 0;
|
|
1213
1144
|
}
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
overflow: hidden;
|
|
1220
|
-
white-space: nowrap;
|
|
1221
|
-
text-overflow: ellipsis;
|
|
1145
|
+
/* 选中状态 - 默认绿色背景 */
|
|
1146
|
+
.taskon-checkbox__icon--active {
|
|
1147
|
+
border: 0 none;
|
|
1148
|
+
background-color: var(--taskon-color-secondary);
|
|
1149
|
+
border-radius: 4px;
|
|
1222
1150
|
}
|
|
1223
|
-
/*
|
|
1224
|
-
.taskon-
|
|
1225
|
-
display:
|
|
1226
|
-
align-items: center;
|
|
1227
|
-
justify-content: flex-end;
|
|
1228
|
-
gap: 4px;
|
|
1229
|
-
flex-shrink: 0;
|
|
1151
|
+
/* 选中状态显示勾选图标 */
|
|
1152
|
+
.taskon-checkbox__icon--active .taskon-checkbox__icon-checked {
|
|
1153
|
+
display: block;
|
|
1230
1154
|
}
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1155
|
+
/* light 类型选中状态 - 浅色背景 */
|
|
1156
|
+
.taskon-checkbox__icon--active.taskon-checkbox__icon--light {
|
|
1157
|
+
border: 1px solid var(--taskon-color-border);
|
|
1158
|
+
background-color: var(--taskon-color-bg-surface);
|
|
1234
1159
|
}
|
|
1235
|
-
|
|
1236
|
-
|
|
1160
|
+
/* 圆形样式 */
|
|
1161
|
+
.taskon-checkbox__icon--round {
|
|
1162
|
+
border-radius: 50%;
|
|
1163
|
+
}
|
|
1164
|
+
/* ============================================================================
|
|
1165
|
+
勾选图标 SVG
|
|
1166
|
+
============================================================================ */
|
|
1167
|
+
.taskon-checkbox__icon-checked {
|
|
1168
|
+
display: none;
|
|
1169
|
+
width: 10px;
|
|
1237
1170
|
height: 8px;
|
|
1238
|
-
color: var(--taskon-color-
|
|
1239
|
-
visibility: hidden;
|
|
1171
|
+
color: var(--taskon-color-text-on-primary);
|
|
1240
1172
|
}
|
|
1241
|
-
.taskon-
|
|
1242
|
-
|
|
1173
|
+
.taskon-checkbox__icon--active.taskon-checkbox__icon--light .taskon-checkbox__icon-checked {
|
|
1174
|
+
color: var(--taskon-color-text);
|
|
1243
1175
|
}
|
|
1244
|
-
/*
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
color: var(--taskon-color-
|
|
1176
|
+
/* ============================================================================
|
|
1177
|
+
标签文字
|
|
1178
|
+
============================================================================ */
|
|
1179
|
+
.taskon-checkbox__label {
|
|
1180
|
+
margin-left: 8px;
|
|
1181
|
+
color: var(--taskon-color-text-secondary);
|
|
1182
|
+
font-size: 14px;
|
|
1183
|
+
font-style: normal;
|
|
1184
|
+
font-weight: 500;
|
|
1185
|
+
line-height: 18px;
|
|
1250
1186
|
}
|
|
1251
1187
|
@supports (container-type: inline-size) {
|
|
1252
1188
|
@container (min-width: 751px) {
|
|
1253
|
-
.taskon-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
.taskon-withdraw-option__chain-icon,
|
|
1258
|
-
.taskon-withdraw-option__token-icon {
|
|
1259
|
-
width: 16px;
|
|
1260
|
-
height: 16px;
|
|
1189
|
+
.taskon-checkbox__icon {
|
|
1190
|
+
width: 20px;
|
|
1191
|
+
height: 20px;
|
|
1192
|
+
border-radius: 4px;
|
|
1261
1193
|
}
|
|
1262
1194
|
|
|
1263
|
-
.taskon-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
font-size: 14px;
|
|
1195
|
+
.taskon-checkbox__icon-checked {
|
|
1196
|
+
width: 12px;
|
|
1197
|
+
height: 10px;
|
|
1267
1198
|
}
|
|
1268
1199
|
|
|
1269
|
-
.taskon-
|
|
1270
|
-
font-size:
|
|
1200
|
+
.taskon-checkbox__label {
|
|
1201
|
+
font-size: 16px;
|
|
1202
|
+
line-height: 20px;
|
|
1271
1203
|
}
|
|
1272
1204
|
}
|
|
1273
1205
|
}
|
|
1274
1206
|
@supports not (container-type: inline-size) {
|
|
1275
1207
|
@media (min-width: 751px) {
|
|
1276
|
-
.taskon-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
.taskon-withdraw-option__chain-icon,
|
|
1281
|
-
.taskon-withdraw-option__token-icon {
|
|
1282
|
-
width: 16px;
|
|
1283
|
-
height: 16px;
|
|
1208
|
+
.taskon-checkbox__icon {
|
|
1209
|
+
width: 20px;
|
|
1210
|
+
height: 20px;
|
|
1211
|
+
border-radius: 4px;
|
|
1284
1212
|
}
|
|
1285
1213
|
|
|
1286
|
-
.taskon-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
font-size: 14px;
|
|
1214
|
+
.taskon-checkbox__icon-checked {
|
|
1215
|
+
width: 12px;
|
|
1216
|
+
height: 10px;
|
|
1290
1217
|
}
|
|
1291
1218
|
|
|
1292
|
-
.taskon-
|
|
1293
|
-
font-size:
|
|
1219
|
+
.taskon-checkbox__label {
|
|
1220
|
+
font-size: 16px;
|
|
1221
|
+
line-height: 20px;
|
|
1294
1222
|
}
|
|
1295
1223
|
}
|
|
1296
1224
|
}
|
|
1297
1225
|
/**
|
|
1298
|
-
*
|
|
1226
|
+
* Switch 开关组件样式
|
|
1299
1227
|
*
|
|
1300
|
-
*
|
|
1228
|
+
* 采用 BEM 命名规范
|
|
1229
|
+
* 前缀: taskon-switch
|
|
1230
|
+
*
|
|
1231
|
+
* 参考 Vue 版本 BaseSwitch.vue 样式实现
|
|
1301
1232
|
*/
|
|
1302
1233
|
/*
|
|
1303
1234
|
* Responsive base styles
|
|
@@ -1310,420 +1241,499 @@
|
|
|
1310
1241
|
* 1) Enable desktop enhancement in wider containers
|
|
1311
1242
|
* 2) Keep viewport media query as fallback
|
|
1312
1243
|
*/
|
|
1313
|
-
/*
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
--form-item-font-size: 13px;
|
|
1318
|
-
--form-item-line-height: 20px;
|
|
1319
|
-
|
|
1244
|
+
/* ============================================================================
|
|
1245
|
+
根元素
|
|
1246
|
+
============================================================================ */
|
|
1247
|
+
.taskon-switch {
|
|
1320
1248
|
position: relative;
|
|
1249
|
+
display: inline-flex;
|
|
1250
|
+
align-items: center;
|
|
1251
|
+
vertical-align: middle;
|
|
1252
|
+
font-weight: 500;
|
|
1253
|
+
font-size: 12px;
|
|
1254
|
+
line-height: 130%;
|
|
1255
|
+
color: var(--taskon-color-text-secondary);
|
|
1256
|
+
cursor: pointer;
|
|
1257
|
+
user-select: none;
|
|
1321
1258
|
}
|
|
1322
|
-
/*
|
|
1323
|
-
.taskon-
|
|
1324
|
-
|
|
1259
|
+
/* 禁用状态 */
|
|
1260
|
+
.taskon-switch--disabled {
|
|
1261
|
+
cursor: not-allowed;
|
|
1262
|
+
opacity: 0.5;
|
|
1325
1263
|
}
|
|
1326
|
-
/*
|
|
1327
|
-
|
|
1328
|
-
|
|
1264
|
+
/* ============================================================================
|
|
1265
|
+
标签文字
|
|
1266
|
+
============================================================================ */
|
|
1267
|
+
.taskon-switch__label {
|
|
1268
|
+
cursor: pointer;
|
|
1329
1269
|
}
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
display: flex;
|
|
1333
|
-
align-items: center;
|
|
1270
|
+
.taskon-switch__label--disabled {
|
|
1271
|
+
cursor: not-allowed;
|
|
1334
1272
|
}
|
|
1335
|
-
/*
|
|
1336
|
-
|
|
1337
|
-
|
|
1273
|
+
/* ============================================================================
|
|
1274
|
+
开关按钮
|
|
1275
|
+
============================================================================ */
|
|
1276
|
+
.taskon-switch__button {
|
|
1277
|
+
position: relative;
|
|
1278
|
+
width: 32px;
|
|
1279
|
+
height: 18px;
|
|
1280
|
+
line-height: 20px;
|
|
1281
|
+
background: var(--taskon-color-bg-surface-strong);
|
|
1282
|
+
border: 1px solid var(--taskon-color-border);
|
|
1283
|
+
border-radius: 100px;
|
|
1284
|
+
padding: 2px;
|
|
1285
|
+
margin-left: 10px;
|
|
1286
|
+
transition: all 0.3s ease;
|
|
1287
|
+
flex-shrink: 0;
|
|
1338
1288
|
}
|
|
1339
|
-
/*
|
|
1340
|
-
.taskon-
|
|
1341
|
-
|
|
1289
|
+
/* 开启状态 - 默认渐变背景 */
|
|
1290
|
+
.taskon-switch__button--active {
|
|
1291
|
+
background: linear-gradient(
|
|
1292
|
+
90deg,
|
|
1293
|
+
var(--taskon-color-primary) 0%,
|
|
1294
|
+
var(--taskon-color-secondary) 100%
|
|
1295
|
+
);
|
|
1296
|
+
border-color: transparent;
|
|
1342
1297
|
}
|
|
1343
|
-
/*
|
|
1344
|
-
.taskon-
|
|
1345
|
-
|
|
1346
|
-
align-items: center;
|
|
1347
|
-
font-weight: 500;
|
|
1348
|
-
font-size: var(--form-item-font-size);
|
|
1349
|
-
line-height: var(--form-item-line-height);
|
|
1350
|
-
color: var(--taskon-color-text);
|
|
1351
|
-
white-space: nowrap;
|
|
1298
|
+
/* 禁用状态 */
|
|
1299
|
+
.taskon-switch__button--disabled {
|
|
1300
|
+
cursor: not-allowed;
|
|
1352
1301
|
}
|
|
1353
|
-
/*
|
|
1354
|
-
|
|
1355
|
-
|
|
1302
|
+
/* ============================================================================
|
|
1303
|
+
滑块
|
|
1304
|
+
============================================================================ */
|
|
1305
|
+
.taskon-switch__slider {
|
|
1306
|
+
width: 12px;
|
|
1307
|
+
height: 12px;
|
|
1308
|
+
border-radius: 50%;
|
|
1309
|
+
background: var(--taskon-color-text);
|
|
1310
|
+
transition: margin-left 0.3s ease;
|
|
1356
1311
|
}
|
|
1357
|
-
/*
|
|
1358
|
-
.taskon-
|
|
1359
|
-
margin-left:
|
|
1360
|
-
|
|
1361
|
-
align-items: center;
|
|
1312
|
+
/* 开启状态的滑块位置 */
|
|
1313
|
+
.taskon-switch__button--active .taskon-switch__slider {
|
|
1314
|
+
margin-left: 14px;
|
|
1315
|
+
background: var(--taskon-color-text-on-primary);
|
|
1362
1316
|
}
|
|
1363
|
-
/*
|
|
1364
|
-
|
|
1365
|
-
|
|
1317
|
+
/* ============================================================================
|
|
1318
|
+
高亮样式 (highlight type)
|
|
1319
|
+
============================================================================ */
|
|
1320
|
+
.taskon-switch--highlight .taskon-switch__button {
|
|
1321
|
+
background: var(--taskon-color-bg-surface-subtle);
|
|
1322
|
+
}
|
|
1323
|
+
.taskon-switch--highlight .taskon-switch__button--active {
|
|
1324
|
+
background: var(--taskon-color-primary-bg);
|
|
1325
|
+
border: 1px solid var(--taskon-color-border-secondary);
|
|
1326
|
+
}
|
|
1327
|
+
.taskon-switch--highlight .taskon-switch__button--active .taskon-switch__slider {
|
|
1328
|
+
background: var(--taskon-color-primary);
|
|
1329
|
+
}
|
|
1330
|
+
@supports (container-type: inline-size) {
|
|
1331
|
+
@container (min-width: 751px) {
|
|
1332
|
+
.taskon-switch {
|
|
1333
|
+
font-weight: 400;
|
|
1334
|
+
font-size: 16px;
|
|
1335
|
+
line-height: 23px;
|
|
1336
|
+
}
|
|
1337
|
+
|
|
1338
|
+
.taskon-switch__button {
|
|
1339
|
+
width: 38px;
|
|
1340
|
+
height: 20px;
|
|
1341
|
+
padding: 2px 3px;
|
|
1342
|
+
margin-left: 15px;
|
|
1343
|
+
}
|
|
1344
|
+
|
|
1345
|
+
.taskon-switch__slider {
|
|
1346
|
+
width: 14px;
|
|
1347
|
+
height: 14px;
|
|
1348
|
+
}
|
|
1349
|
+
|
|
1350
|
+
.taskon-switch__button--active .taskon-switch__slider {
|
|
1351
|
+
margin-left: 18px;
|
|
1352
|
+
}
|
|
1353
|
+
}
|
|
1354
|
+
}
|
|
1355
|
+
@supports not (container-type: inline-size) {
|
|
1356
|
+
@media (min-width: 751px) {
|
|
1357
|
+
.taskon-switch {
|
|
1358
|
+
font-weight: 400;
|
|
1359
|
+
font-size: 16px;
|
|
1360
|
+
line-height: 23px;
|
|
1361
|
+
}
|
|
1362
|
+
|
|
1363
|
+
.taskon-switch__button {
|
|
1364
|
+
width: 38px;
|
|
1365
|
+
height: 20px;
|
|
1366
|
+
padding: 2px 3px;
|
|
1367
|
+
margin-left: 15px;
|
|
1368
|
+
}
|
|
1369
|
+
|
|
1370
|
+
.taskon-switch__slider {
|
|
1371
|
+
width: 14px;
|
|
1372
|
+
height: 14px;
|
|
1373
|
+
}
|
|
1374
|
+
|
|
1375
|
+
.taskon-switch__button--active .taskon-switch__slider {
|
|
1376
|
+
margin-left: 18px;
|
|
1377
|
+
}
|
|
1378
|
+
}
|
|
1379
|
+
}
|
|
1380
|
+
/**
|
|
1381
|
+
* ClaimNftDialog 样式
|
|
1382
|
+
*/
|
|
1383
|
+
|
|
1384
|
+
.taskon-claim-dialog {
|
|
1385
|
+
max-width: 400px;
|
|
1386
|
+
}
|
|
1387
|
+
|
|
1388
|
+
.taskon-claim-dialog-content {
|
|
1366
1389
|
display: flex;
|
|
1390
|
+
flex-direction: column;
|
|
1367
1391
|
align-items: center;
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
color: var(--taskon-color-
|
|
1371
|
-
text-decoration: none;
|
|
1372
|
-
cursor: pointer;
|
|
1373
|
-
}
|
|
1374
|
-
.taskon-form-item__doc-link:hover {
|
|
1375
|
-
text-decoration: underline;
|
|
1392
|
+
padding: 24px;
|
|
1393
|
+
text-align: center;
|
|
1394
|
+
color: var(--taskon-color-text);
|
|
1376
1395
|
}
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1396
|
+
|
|
1397
|
+
/* NFT 图片 */
|
|
1398
|
+
|
|
1399
|
+
.taskon-claim-dialog-nft {
|
|
1400
|
+
margin-bottom: 20px;
|
|
1380
1401
|
}
|
|
1381
|
-
|
|
1382
|
-
.taskon-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
white-space: pre-wrap;
|
|
1402
|
+
|
|
1403
|
+
.taskon-claim-dialog-nft__image {
|
|
1404
|
+
width: 120px;
|
|
1405
|
+
height: 120px;
|
|
1406
|
+
border-radius: 12px;
|
|
1407
|
+
object-fit: cover;
|
|
1388
1408
|
}
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1409
|
+
|
|
1410
|
+
/* 状态图标区域 */
|
|
1411
|
+
|
|
1412
|
+
.taskon-claim-dialog-status {
|
|
1413
|
+
margin-bottom: 16px;
|
|
1414
|
+
min-height: 48px;
|
|
1415
|
+
display: flex;
|
|
1416
|
+
align-items: center;
|
|
1417
|
+
justify-content: center;
|
|
1392
1418
|
}
|
|
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
|
-
}
|
|
1400
1419
|
|
|
1401
|
-
|
|
1402
|
-
margin-top: 20px;
|
|
1403
|
-
}
|
|
1420
|
+
/* 加载动画 */
|
|
1404
1421
|
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
@supports not (container-type: inline-size) {
|
|
1411
|
-
@media (min-width: 751px) {
|
|
1412
|
-
.taskon-form-item {
|
|
1413
|
-
--form-item-space: 16px;
|
|
1414
|
-
--form-item-label-space: 8px;
|
|
1415
|
-
--form-item-font-size: 14px;
|
|
1416
|
-
}
|
|
1422
|
+
.taskon-claim-dialog-spinner {
|
|
1423
|
+
width: 48px;
|
|
1424
|
+
height: 48px;
|
|
1425
|
+
position: relative;
|
|
1426
|
+
}
|
|
1417
1427
|
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1428
|
+
.taskon-claim-dialog-spinner__circle {
|
|
1429
|
+
width: 100%;
|
|
1430
|
+
height: 100%;
|
|
1431
|
+
border: 3px solid var(--taskon-color-border-secondary);
|
|
1432
|
+
border-top-color: var(--taskon-color-primary);
|
|
1433
|
+
border-radius: 50%;
|
|
1434
|
+
animation: taskon-claim-spin 0.8s linear infinite;
|
|
1435
|
+
}
|
|
1421
1436
|
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
}
|
|
1437
|
+
@keyframes taskon-claim-spin {
|
|
1438
|
+
to {
|
|
1439
|
+
transform: rotate(360deg);
|
|
1426
1440
|
}
|
|
1427
|
-
/**
|
|
1428
|
-
* Checkbox 复选框组件样式
|
|
1429
|
-
*
|
|
1430
|
-
* 采用 BEM 命名规范
|
|
1431
|
-
* 前缀: taskon-checkbox
|
|
1432
|
-
*
|
|
1433
|
-
* 参考 Vue 版本 BaseCheckBox.vue 样式实现
|
|
1434
|
-
*/
|
|
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
|
-
*/
|
|
1446
|
-
/* ============================================================================
|
|
1447
|
-
根元素
|
|
1448
|
-
============================================================================ */
|
|
1449
|
-
.taskon-checkbox {
|
|
1450
|
-
display: inline-flex;
|
|
1451
|
-
align-items: center;
|
|
1452
|
-
justify-content: center;
|
|
1453
|
-
cursor: pointer;
|
|
1454
|
-
user-select: none;
|
|
1455
|
-
outline: none;
|
|
1456
1441
|
}
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1442
|
+
|
|
1443
|
+
/* 状态图标 */
|
|
1444
|
+
|
|
1445
|
+
.taskon-claim-dialog-icon {
|
|
1446
|
+
width: 48px;
|
|
1447
|
+
height: 48px;
|
|
1461
1448
|
}
|
|
1462
|
-
|
|
1463
|
-
.taskon-
|
|
1464
|
-
|
|
1465
|
-
opacity: 0.4;
|
|
1449
|
+
|
|
1450
|
+
.taskon-claim-dialog-icon--success {
|
|
1451
|
+
color: var(--taskon-color-success);
|
|
1466
1452
|
}
|
|
1467
|
-
|
|
1468
|
-
.taskon-
|
|
1469
|
-
|
|
1470
|
-
opacity: 0.4;
|
|
1453
|
+
|
|
1454
|
+
.taskon-claim-dialog-icon--error {
|
|
1455
|
+
color: var(--taskon-color-error);
|
|
1471
1456
|
}
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
.taskon-
|
|
1476
|
-
|
|
1457
|
+
|
|
1458
|
+
/* 状态消息 */
|
|
1459
|
+
|
|
1460
|
+
.taskon-claim-dialog-message {
|
|
1461
|
+
font-size: var(--taskon-font-size-lg);
|
|
1462
|
+
font-weight: 500;
|
|
1463
|
+
color: var(--taskon-color-text);
|
|
1464
|
+
margin: 0 0 16px;
|
|
1465
|
+
line-height: 1.5;
|
|
1466
|
+
width: 100%;
|
|
1467
|
+
max-width: 100%;
|
|
1468
|
+
overflow-wrap: anywhere;
|
|
1469
|
+
word-break: break-word;
|
|
1477
1470
|
}
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
.taskon-
|
|
1471
|
+
|
|
1472
|
+
/* 交易 Hash */
|
|
1473
|
+
|
|
1474
|
+
.taskon-claim-dialog-tx {
|
|
1482
1475
|
display: flex;
|
|
1483
|
-
justify-content: center;
|
|
1484
1476
|
align-items: center;
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
border-radius:
|
|
1489
|
-
|
|
1490
|
-
|
|
1477
|
+
gap: 8px;
|
|
1478
|
+
padding: 8px 16px;
|
|
1479
|
+
background: var(--taskon-color-bg-surface-subtle);
|
|
1480
|
+
border-radius: 8px;
|
|
1481
|
+
margin-bottom: 20px;
|
|
1482
|
+
font-size: var(--taskon-font-size);
|
|
1491
1483
|
}
|
|
1492
|
-
|
|
1493
|
-
.taskon-
|
|
1494
|
-
|
|
1495
|
-
background-color: var(--taskon-color-secondary);
|
|
1496
|
-
border-radius: 4px;
|
|
1484
|
+
|
|
1485
|
+
.taskon-claim-dialog-tx__label {
|
|
1486
|
+
color: var(--taskon-color-text-tertiary);
|
|
1497
1487
|
}
|
|
1498
|
-
|
|
1499
|
-
.taskon-
|
|
1500
|
-
|
|
1488
|
+
|
|
1489
|
+
.taskon-claim-dialog-tx__hash {
|
|
1490
|
+
color: var(--taskon-color-link);
|
|
1491
|
+
font-family: monospace;
|
|
1501
1492
|
}
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1493
|
+
|
|
1494
|
+
/* 操作按钮 */
|
|
1495
|
+
|
|
1496
|
+
.taskon-claim-dialog-actions {
|
|
1497
|
+
display: flex;
|
|
1498
|
+
gap: 12px;
|
|
1499
|
+
width: 100%;
|
|
1500
|
+
justify-content: center;
|
|
1506
1501
|
}
|
|
1507
|
-
|
|
1508
|
-
.taskon-
|
|
1509
|
-
|
|
1502
|
+
|
|
1503
|
+
.taskon-claim-dialog-btn {
|
|
1504
|
+
padding: 10px 24px;
|
|
1505
|
+
border-radius: 8px;
|
|
1506
|
+
font-size: var(--taskon-font-size);
|
|
1507
|
+
font-weight: 500;
|
|
1508
|
+
cursor: pointer;
|
|
1509
|
+
transition: all 0.2s ease;
|
|
1510
|
+
border: none;
|
|
1510
1511
|
}
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
.taskon-checkbox__icon-checked {
|
|
1515
|
-
display: none;
|
|
1516
|
-
width: 10px;
|
|
1517
|
-
height: 8px;
|
|
1512
|
+
|
|
1513
|
+
.taskon-claim-dialog-btn--primary {
|
|
1514
|
+
background: var(--taskon-color-primary);
|
|
1518
1515
|
color: var(--taskon-color-text-on-primary);
|
|
1519
1516
|
}
|
|
1520
|
-
|
|
1517
|
+
|
|
1518
|
+
.taskon-claim-dialog-btn--primary:hover {
|
|
1519
|
+
filter: brightness(0.95);
|
|
1520
|
+
}
|
|
1521
|
+
|
|
1522
|
+
.taskon-claim-dialog-btn--secondary {
|
|
1523
|
+
background: transparent;
|
|
1521
1524
|
color: var(--taskon-color-text);
|
|
1525
|
+
border: 1px solid var(--taskon-color-border);
|
|
1522
1526
|
}
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
.taskon-checkbox__label {
|
|
1527
|
-
margin-left: 8px;
|
|
1528
|
-
color: var(--taskon-color-text-secondary);
|
|
1529
|
-
font-size: 14px;
|
|
1530
|
-
font-style: normal;
|
|
1531
|
-
font-weight: 500;
|
|
1532
|
-
line-height: 18px;
|
|
1527
|
+
|
|
1528
|
+
.taskon-claim-dialog-btn--secondary:hover {
|
|
1529
|
+
background: var(--taskon-color-bg-surface-strong);
|
|
1533
1530
|
}
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
.taskon-
|
|
1537
|
-
width:
|
|
1538
|
-
height: 20px;
|
|
1539
|
-
border-radius: 4px;
|
|
1531
|
+
|
|
1532
|
+
@media (max-width: 750px) {
|
|
1533
|
+
.taskon-claim-dialog {
|
|
1534
|
+
max-width: 100%;
|
|
1540
1535
|
}
|
|
1541
1536
|
|
|
1542
|
-
.taskon-
|
|
1543
|
-
|
|
1544
|
-
height: 10px;
|
|
1537
|
+
.taskon-claim-dialog-content {
|
|
1538
|
+
padding: 16px;
|
|
1545
1539
|
}
|
|
1546
1540
|
|
|
1547
|
-
.taskon-
|
|
1548
|
-
|
|
1549
|
-
line-height: 20px;
|
|
1541
|
+
.taskon-claim-dialog-nft {
|
|
1542
|
+
margin-bottom: 16px;
|
|
1550
1543
|
}
|
|
1551
|
-
|
|
1544
|
+
|
|
1545
|
+
.taskon-claim-dialog-nft__image {
|
|
1546
|
+
width: 96px;
|
|
1547
|
+
height: 96px;
|
|
1552
1548
|
}
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1549
|
+
|
|
1550
|
+
.taskon-claim-dialog-status {
|
|
1551
|
+
margin-bottom: 12px;
|
|
1552
|
+
min-height: 40px;
|
|
1553
|
+
}
|
|
1554
|
+
|
|
1555
|
+
.taskon-claim-dialog-spinner,
|
|
1556
|
+
.taskon-claim-dialog-icon {
|
|
1557
|
+
width: 40px;
|
|
1558
|
+
height: 40px;
|
|
1559
|
+
}
|
|
1560
|
+
|
|
1561
|
+
.taskon-claim-dialog-message {
|
|
1562
|
+
font-size: var(--taskon-font-size);
|
|
1563
|
+
margin-bottom: 12px;
|
|
1564
|
+
}
|
|
1565
|
+
|
|
1566
|
+
.taskon-claim-dialog-tx {
|
|
1567
|
+
align-items: flex-start;
|
|
1568
|
+
flex-direction: column;
|
|
1569
|
+
gap: 4px;
|
|
1570
|
+
margin-bottom: 16px;
|
|
1559
1571
|
}
|
|
1560
1572
|
|
|
1561
|
-
.taskon-
|
|
1562
|
-
|
|
1563
|
-
|
|
1573
|
+
.taskon-claim-dialog-tx__hash {
|
|
1574
|
+
display: block;
|
|
1575
|
+
max-width: 100%;
|
|
1576
|
+
overflow-wrap: anywhere;
|
|
1564
1577
|
}
|
|
1565
1578
|
|
|
1566
|
-
.taskon-
|
|
1567
|
-
|
|
1568
|
-
|
|
1579
|
+
.taskon-claim-dialog-actions {
|
|
1580
|
+
flex-direction: column;
|
|
1581
|
+
gap: 8px;
|
|
1569
1582
|
}
|
|
1570
|
-
|
|
1583
|
+
|
|
1584
|
+
.taskon-claim-dialog-btn {
|
|
1585
|
+
width: 100%;
|
|
1586
|
+
padding: 9px 12px;
|
|
1571
1587
|
}
|
|
1588
|
+
}
|
|
1572
1589
|
/**
|
|
1573
|
-
*
|
|
1574
|
-
*
|
|
1575
|
-
* 采用 BEM 命名规范
|
|
1576
|
-
* 前缀: taskon-switch
|
|
1577
|
-
*
|
|
1578
|
-
* 参考 Vue 版本 BaseSwitch.vue 样式实现
|
|
1579
|
-
*/
|
|
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
|
+
* PendingTxDialog 样式
|
|
1590
1591
|
*/
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1592
|
+
|
|
1593
|
+
.taskon-pending-dialog {
|
|
1594
|
+
max-width: 460px;
|
|
1595
|
+
}
|
|
1596
|
+
|
|
1597
|
+
.taskon-pending-dialog-content {
|
|
1598
|
+
display: flex;
|
|
1599
|
+
flex-direction: column;
|
|
1600
|
+
gap: 16px;
|
|
1601
|
+
}
|
|
1602
|
+
|
|
1603
|
+
.taskon-pending-dialog-title {
|
|
1604
|
+
margin: 0;
|
|
1605
|
+
font-size: var(--taskon-font-size-lg);
|
|
1606
|
+
line-height: 1.5;
|
|
1607
|
+
color: var(--taskon-color-text);
|
|
1608
|
+
}
|
|
1609
|
+
|
|
1610
|
+
.taskon-pending-dialog-desc {
|
|
1611
|
+
margin: 0;
|
|
1612
|
+
font-size: var(--taskon-font-size);
|
|
1613
|
+
line-height: 1.43;
|
|
1614
|
+
color: var(--taskon-color-text-tertiary);
|
|
1615
|
+
}
|
|
1616
|
+
|
|
1617
|
+
.taskon-pending-dialog-hash-wrap {
|
|
1618
|
+
display: flex;
|
|
1619
|
+
flex-wrap: wrap;
|
|
1597
1620
|
align-items: center;
|
|
1598
|
-
|
|
1599
|
-
font-weight: 500;
|
|
1600
|
-
font-size: 12px;
|
|
1601
|
-
line-height: 130%;
|
|
1602
|
-
color: var(--taskon-color-text-secondary);
|
|
1603
|
-
cursor: pointer;
|
|
1604
|
-
user-select: none;
|
|
1621
|
+
gap: 8px;
|
|
1605
1622
|
}
|
|
1606
|
-
|
|
1607
|
-
.taskon-
|
|
1608
|
-
|
|
1609
|
-
|
|
1623
|
+
|
|
1624
|
+
.taskon-pending-dialog-hash-label {
|
|
1625
|
+
font-size: var(--taskon-font-size);
|
|
1626
|
+
color: var(--taskon-color-text-tertiary);
|
|
1610
1627
|
}
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1628
|
+
|
|
1629
|
+
.taskon-pending-dialog-hash-link,
|
|
1630
|
+
.taskon-pending-dialog-hash-value {
|
|
1631
|
+
font-size: var(--taskon-font-size);
|
|
1632
|
+
color: var(--taskon-color-link);
|
|
1633
|
+
text-decoration: underline;
|
|
1634
|
+
background: none;
|
|
1635
|
+
border: none;
|
|
1636
|
+
padding: 0;
|
|
1637
|
+
}
|
|
1638
|
+
|
|
1639
|
+
.taskon-pending-dialog-hash-link {
|
|
1615
1640
|
cursor: pointer;
|
|
1616
1641
|
}
|
|
1617
|
-
|
|
1618
|
-
|
|
1642
|
+
|
|
1643
|
+
.taskon-pending-dialog-notice-list {
|
|
1644
|
+
margin: 0;
|
|
1645
|
+
padding-left: 18px;
|
|
1646
|
+
list-style: disc;
|
|
1647
|
+
display: flex;
|
|
1648
|
+
flex-direction: column;
|
|
1649
|
+
gap: 10px;
|
|
1619
1650
|
}
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
width: 32px;
|
|
1626
|
-
height: 18px;
|
|
1627
|
-
line-height: 20px;
|
|
1628
|
-
background: var(--taskon-color-bg-surface-strong);
|
|
1629
|
-
border: 1px solid var(--taskon-color-border);
|
|
1630
|
-
border-radius: 100px;
|
|
1631
|
-
padding: 2px;
|
|
1632
|
-
margin-left: 10px;
|
|
1633
|
-
transition: all 0.3s ease;
|
|
1634
|
-
flex-shrink: 0;
|
|
1651
|
+
|
|
1652
|
+
.taskon-pending-dialog-notice-item {
|
|
1653
|
+
font-size: var(--taskon-font-size-sm);
|
|
1654
|
+
line-height: 1.5;
|
|
1655
|
+
color: var(--taskon-color-link);
|
|
1635
1656
|
}
|
|
1636
|
-
|
|
1637
|
-
.taskon-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
var(--taskon-color-primary) 0%,
|
|
1641
|
-
var(--taskon-color-secondary) 100%
|
|
1642
|
-
);
|
|
1643
|
-
border-color: transparent;
|
|
1657
|
+
|
|
1658
|
+
.taskon-pending-dialog-receive-address {
|
|
1659
|
+
margin-top: 4px;
|
|
1660
|
+
word-break: break-all;
|
|
1644
1661
|
}
|
|
1645
|
-
|
|
1646
|
-
.taskon-
|
|
1647
|
-
|
|
1662
|
+
|
|
1663
|
+
.taskon-pending-dialog-actions {
|
|
1664
|
+
display: flex;
|
|
1665
|
+
justify-content: flex-end;
|
|
1666
|
+
gap: 12px;
|
|
1667
|
+
margin-top: 8px;
|
|
1648
1668
|
}
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
transition:
|
|
1669
|
+
|
|
1670
|
+
.taskon-pending-dialog-btn {
|
|
1671
|
+
padding: 10px 18px;
|
|
1672
|
+
border-radius: 8px;
|
|
1673
|
+
border: none;
|
|
1674
|
+
font-size: var(--taskon-font-size);
|
|
1675
|
+
font-weight: 500;
|
|
1676
|
+
cursor: pointer;
|
|
1677
|
+
transition: all 0.2s ease;
|
|
1658
1678
|
}
|
|
1659
|
-
|
|
1660
|
-
.taskon-
|
|
1661
|
-
|
|
1662
|
-
|
|
1679
|
+
|
|
1680
|
+
.taskon-pending-dialog-btn--primary {
|
|
1681
|
+
background: var(--taskon-color-primary);
|
|
1682
|
+
color: var(--taskon-color-text-on-primary);
|
|
1663
1683
|
}
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
.taskon-switch--highlight .taskon-switch__button {
|
|
1668
|
-
background: var(--taskon-color-bg-surface-subtle);
|
|
1684
|
+
|
|
1685
|
+
.taskon-pending-dialog-btn--primary:hover {
|
|
1686
|
+
opacity: 0.92;
|
|
1669
1687
|
}
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1688
|
+
|
|
1689
|
+
.taskon-pending-dialog-btn--secondary {
|
|
1690
|
+
background: transparent;
|
|
1691
|
+
color: var(--taskon-color-text);
|
|
1692
|
+
border: 1px solid var(--taskon-color-border);
|
|
1673
1693
|
}
|
|
1674
|
-
|
|
1675
|
-
|
|
1694
|
+
|
|
1695
|
+
.taskon-pending-dialog-btn--secondary:hover {
|
|
1696
|
+
background: var(--taskon-color-bg-surface-strong);
|
|
1676
1697
|
}
|
|
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
|
-
}
|
|
1684
1698
|
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
padding: 2px 3px;
|
|
1689
|
-
margin-left: 15px;
|
|
1699
|
+
@media (max-width: 750px) {
|
|
1700
|
+
.taskon-pending-dialog {
|
|
1701
|
+
max-width: 100%;
|
|
1690
1702
|
}
|
|
1691
1703
|
|
|
1692
|
-
.taskon-
|
|
1693
|
-
|
|
1694
|
-
height: 14px;
|
|
1704
|
+
.taskon-pending-dialog-content {
|
|
1705
|
+
gap: 12px;
|
|
1695
1706
|
}
|
|
1696
1707
|
|
|
1697
|
-
.taskon-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
}
|
|
1701
|
-
}
|
|
1702
|
-
@supports not (container-type: inline-size) {
|
|
1703
|
-
@media (min-width: 751px) {
|
|
1704
|
-
.taskon-switch {
|
|
1705
|
-
font-weight: 400;
|
|
1706
|
-
font-size: 16px;
|
|
1707
|
-
line-height: 23px;
|
|
1708
|
+
.taskon-pending-dialog-title {
|
|
1709
|
+
font-size: var(--taskon-font-size);
|
|
1710
|
+
line-height: 1.57;
|
|
1708
1711
|
}
|
|
1709
1712
|
|
|
1710
|
-
.taskon-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1713
|
+
.taskon-pending-dialog-desc,
|
|
1714
|
+
.taskon-pending-dialog-hash-label,
|
|
1715
|
+
.taskon-pending-dialog-hash-link,
|
|
1716
|
+
.taskon-pending-dialog-hash-value {
|
|
1717
|
+
font-size: var(--taskon-font-size-sm);
|
|
1718
|
+
line-height: 1.5;
|
|
1715
1719
|
}
|
|
1716
1720
|
|
|
1717
|
-
.taskon-
|
|
1718
|
-
|
|
1719
|
-
height:
|
|
1721
|
+
.taskon-pending-dialog-notice-item {
|
|
1722
|
+
font-size: var(--taskon-font-size-sm);
|
|
1723
|
+
line-height: 1.33;
|
|
1720
1724
|
}
|
|
1721
1725
|
|
|
1722
|
-
.taskon-
|
|
1723
|
-
|
|
1726
|
+
.taskon-pending-dialog-actions {
|
|
1727
|
+
align-items: stretch;
|
|
1728
|
+
flex-direction: column;
|
|
1729
|
+
gap: 8px;
|
|
1724
1730
|
}
|
|
1725
|
-
|
|
1731
|
+
|
|
1732
|
+
.taskon-pending-dialog-btn {
|
|
1733
|
+
width: 100%;
|
|
1734
|
+
padding: 9px 12px;
|
|
1726
1735
|
}
|
|
1736
|
+
}
|
|
1727
1737
|
/**
|
|
1728
1738
|
* Points 表格样式
|
|
1729
1739
|
*
|
|
@@ -1751,7 +1761,7 @@
|
|
|
1751
1761
|
}
|
|
1752
1762
|
|
|
1753
1763
|
.taskon-points-list__title {
|
|
1754
|
-
font-size:
|
|
1764
|
+
font-size: var(--taskon-font-size-lg);
|
|
1755
1765
|
font-weight: 600;
|
|
1756
1766
|
color: var(--taskon-color-text);
|
|
1757
1767
|
margin: 0;
|
|
@@ -1771,7 +1781,7 @@
|
|
|
1771
1781
|
}
|
|
1772
1782
|
|
|
1773
1783
|
.taskon-points-list__total-label {
|
|
1774
|
-
font-size:
|
|
1784
|
+
font-size: var(--taskon-font-size-sm);
|
|
1775
1785
|
color: var(--taskon-color-text-secondary);
|
|
1776
1786
|
}
|
|
1777
1787
|
|
|
@@ -1812,7 +1822,7 @@
|
|
|
1812
1822
|
}
|
|
1813
1823
|
|
|
1814
1824
|
.taskon-points-list__cell--amount {
|
|
1815
|
-
font-size:
|
|
1825
|
+
font-size: var(--taskon-font-size);
|
|
1816
1826
|
font-weight: 600;
|
|
1817
1827
|
white-space: nowrap;
|
|
1818
1828
|
}
|
|
@@ -1826,13 +1836,13 @@
|
|
|
1826
1836
|
}
|
|
1827
1837
|
|
|
1828
1838
|
.taskon-points-list__cell--time {
|
|
1829
|
-
font-size:
|
|
1839
|
+
font-size: var(--taskon-font-size-sm);
|
|
1830
1840
|
color: var(--taskon-color-text-secondary);
|
|
1831
1841
|
white-space: nowrap;
|
|
1832
1842
|
}
|
|
1833
1843
|
|
|
1834
1844
|
.taskon-points-list__primary {
|
|
1835
|
-
font-size:
|
|
1845
|
+
font-size: var(--taskon-font-size);
|
|
1836
1846
|
font-weight: 500;
|
|
1837
1847
|
color: var(--taskon-color-text);
|
|
1838
1848
|
white-space: nowrap;
|
|
@@ -1841,7 +1851,7 @@
|
|
|
1841
1851
|
}
|
|
1842
1852
|
|
|
1843
1853
|
.taskon-points-list__secondary {
|
|
1844
|
-
font-size:
|
|
1854
|
+
font-size: var(--taskon-font-size-sm);
|
|
1845
1855
|
color: var(--taskon-color-text-secondary);
|
|
1846
1856
|
white-space: nowrap;
|
|
1847
1857
|
overflow: hidden;
|
|
@@ -1859,13 +1869,13 @@
|
|
|
1859
1869
|
}
|
|
1860
1870
|
|
|
1861
1871
|
.taskon-points-list__name {
|
|
1862
|
-
font-size:
|
|
1872
|
+
font-size: var(--taskon-font-size);
|
|
1863
1873
|
font-weight: 500;
|
|
1864
1874
|
color: var(--taskon-color-text);
|
|
1865
1875
|
}
|
|
1866
1876
|
|
|
1867
1877
|
.taskon-points-list__time {
|
|
1868
|
-
font-size:
|
|
1878
|
+
font-size: var(--taskon-font-size-sm);
|
|
1869
1879
|
color: var(--taskon-color-text-secondary);
|
|
1870
1880
|
white-space: nowrap;
|
|
1871
1881
|
}
|
|
@@ -1885,7 +1895,7 @@
|
|
|
1885
1895
|
}
|
|
1886
1896
|
|
|
1887
1897
|
.taskon-points-list__amount-value {
|
|
1888
|
-
font-size:
|
|
1898
|
+
font-size: var(--taskon-font-size);
|
|
1889
1899
|
font-weight: 600;
|
|
1890
1900
|
white-space: nowrap;
|
|
1891
1901
|
}
|
|
@@ -1912,8 +1922,8 @@
|
|
|
1912
1922
|
}
|
|
1913
1923
|
|
|
1914
1924
|
.taskon-points-list__title {
|
|
1915
|
-
font-size:
|
|
1916
|
-
line-height:
|
|
1925
|
+
font-size: var(--taskon-font-size);
|
|
1926
|
+
line-height: 1.43;
|
|
1917
1927
|
}
|
|
1918
1928
|
|
|
1919
1929
|
.taskon-points-list__total {
|
|
@@ -1923,16 +1933,16 @@
|
|
|
1923
1933
|
}
|
|
1924
1934
|
|
|
1925
1935
|
.taskon-points-list__total-value {
|
|
1926
|
-
font-size:
|
|
1936
|
+
font-size: var(--taskon-font-size-lg);
|
|
1927
1937
|
}
|
|
1928
1938
|
|
|
1929
1939
|
.taskon-points-list__name,
|
|
1930
1940
|
.taskon-points-list__amount-value {
|
|
1931
|
-
font-size:
|
|
1941
|
+
font-size: var(--taskon-font-size-sm);
|
|
1932
1942
|
}
|
|
1933
1943
|
|
|
1934
1944
|
.taskon-points-list__time {
|
|
1935
|
-
font-size:
|
|
1945
|
+
font-size: var(--taskon-font-size-sm);
|
|
1936
1946
|
}
|
|
1937
1947
|
|
|
1938
1948
|
.taskon-points-list__amount-icon {
|
|
@@ -1986,7 +1996,7 @@
|
|
|
1986
1996
|
|
|
1987
1997
|
.taskon-reward-table__campaign-name {
|
|
1988
1998
|
color: var(--taskon-color-text);
|
|
1989
|
-
font-size:
|
|
1999
|
+
font-size: var(--taskon-font-size);
|
|
1990
2000
|
font-weight: 500;
|
|
1991
2001
|
line-height: 1.5;
|
|
1992
2002
|
word-break: break-word;
|
|
@@ -1996,7 +2006,7 @@
|
|
|
1996
2006
|
|
|
1997
2007
|
.taskon-reward-table__role-name {
|
|
1998
2008
|
color: var(--taskon-color-text);
|
|
1999
|
-
font-size:
|
|
2009
|
+
font-size: var(--taskon-font-size);
|
|
2000
2010
|
font-weight: 500;
|
|
2001
2011
|
line-height: 1.5;
|
|
2002
2012
|
}
|
|
@@ -2005,7 +2015,7 @@
|
|
|
2005
2015
|
|
|
2006
2016
|
.taskon-reward-table__time {
|
|
2007
2017
|
color: var(--taskon-color-text-secondary);
|
|
2008
|
-
font-size:
|
|
2018
|
+
font-size: var(--taskon-font-size-sm);
|
|
2009
2019
|
white-space: nowrap;
|
|
2010
2020
|
}
|
|
2011
2021
|
|
|
@@ -2013,7 +2023,7 @@
|
|
|
2013
2023
|
|
|
2014
2024
|
.taskon-reward-table__manual-drop {
|
|
2015
2025
|
color: var(--taskon-color-text-tertiary);
|
|
2016
|
-
font-size:
|
|
2026
|
+
font-size: var(--taskon-font-size-sm);
|
|
2017
2027
|
}
|
|
2018
2028
|
|
|
2019
2029
|
/* 链接样式 */
|
|
@@ -2023,7 +2033,7 @@
|
|
|
2023
2033
|
border: none;
|
|
2024
2034
|
padding: 0;
|
|
2025
2035
|
color: var(--taskon-color-primary);
|
|
2026
|
-
font-size:
|
|
2036
|
+
font-size: var(--taskon-font-size-sm);
|
|
2027
2037
|
cursor: pointer;
|
|
2028
2038
|
text-decoration: none;
|
|
2029
2039
|
}
|
|
@@ -2042,7 +2052,7 @@
|
|
|
2042
2052
|
padding: 0 12px;
|
|
2043
2053
|
background-color: var(--taskon-color-primary);
|
|
2044
2054
|
color: var(--taskon-color-text-on-primary);
|
|
2045
|
-
font-size:
|
|
2055
|
+
font-size: var(--taskon-font-size-sm);
|
|
2046
2056
|
font-weight: 500;
|
|
2047
2057
|
border: none;
|
|
2048
2058
|
border-radius: 4px;
|
|
@@ -2070,7 +2080,7 @@
|
|
|
2070
2080
|
}
|
|
2071
2081
|
|
|
2072
2082
|
.taskon-reward-table__points-amount {
|
|
2073
|
-
font-size:
|
|
2083
|
+
font-size: var(--taskon-font-size);
|
|
2074
2084
|
font-weight: 500;
|
|
2075
2085
|
}
|
|
2076
2086
|
|
|
@@ -2139,8 +2149,8 @@
|
|
|
2139
2149
|
/* Deposited 标签（TaskOn 托管发放） */
|
|
2140
2150
|
|
|
2141
2151
|
.taskon-token-history__deposited {
|
|
2142
|
-
font-size:
|
|
2143
|
-
line-height:
|
|
2152
|
+
font-size: var(--taskon-font-size-sm);
|
|
2153
|
+
line-height: 1.25;
|
|
2144
2154
|
background: linear-gradient(84deg, #e3bc4e 3%, #fffdb6 99.34%);
|
|
2145
2155
|
background-clip: text;
|
|
2146
2156
|
-webkit-background-clip: text;
|
|
@@ -2159,8 +2169,8 @@
|
|
|
2159
2169
|
|
|
2160
2170
|
.taskon-token-history__distributed-label {
|
|
2161
2171
|
color: var(--taskon-color-text-tertiary);
|
|
2162
|
-
font-size:
|
|
2163
|
-
line-height:
|
|
2172
|
+
font-size: var(--taskon-font-size-sm);
|
|
2173
|
+
line-height: 1.25;
|
|
2164
2174
|
}
|
|
2165
2175
|
|
|
2166
2176
|
/* 社区头像 */
|
|
@@ -2203,7 +2213,7 @@
|
|
|
2203
2213
|
}
|
|
2204
2214
|
|
|
2205
2215
|
.taskon-token-select__chain-label {
|
|
2206
|
-
font-size:
|
|
2216
|
+
font-size: var(--taskon-font-size);
|
|
2207
2217
|
font-weight: 500;
|
|
2208
2218
|
color: var(--taskon-color-text);
|
|
2209
2219
|
overflow: hidden;
|
|
@@ -2215,7 +2225,7 @@
|
|
|
2215
2225
|
/* ========== 余额显示 ========== */
|
|
2216
2226
|
|
|
2217
2227
|
.taskon-token-select__balance {
|
|
2218
|
-
font-size:
|
|
2228
|
+
font-size: var(--taskon-font-size);
|
|
2219
2229
|
color: var(--taskon-color-text-tertiary);
|
|
2220
2230
|
margin-left: auto;
|
|
2221
2231
|
flex-shrink: 0;
|
|
@@ -2230,12 +2240,12 @@
|
|
|
2230
2240
|
}
|
|
2231
2241
|
|
|
2232
2242
|
.taskon-token-select__chain-label {
|
|
2233
|
-
font-size:
|
|
2243
|
+
font-size: var(--taskon-font-size-sm);
|
|
2234
2244
|
max-width: 80px;
|
|
2235
2245
|
}
|
|
2236
2246
|
|
|
2237
2247
|
.taskon-token-select__balance {
|
|
2238
|
-
font-size:
|
|
2248
|
+
font-size: var(--taskon-font-size-sm);
|
|
2239
2249
|
}
|
|
2240
2250
|
}
|
|
2241
2251
|
/**
|
|
@@ -2252,7 +2262,7 @@
|
|
|
2252
2262
|
display: flex;
|
|
2253
2263
|
align-items: center;
|
|
2254
2264
|
gap: var(--taskon-spacing-sm);
|
|
2255
|
-
font-size:
|
|
2265
|
+
font-size: var(--taskon-font-size);
|
|
2256
2266
|
}
|
|
2257
2267
|
|
|
2258
2268
|
/* ========== 链信息 ========== */
|
|
@@ -2317,7 +2327,7 @@
|
|
|
2317
2327
|
width: 100%;
|
|
2318
2328
|
height: 40px;
|
|
2319
2329
|
padding: 10px 16px;
|
|
2320
|
-
font-size:
|
|
2330
|
+
font-size: var(--taskon-font-size-sm);
|
|
2321
2331
|
}
|
|
2322
2332
|
|
|
2323
2333
|
.taskon-receiver-address__chain-icon {
|
|
@@ -2360,16 +2370,16 @@
|
|
|
2360
2370
|
/* 表头样式 */
|
|
2361
2371
|
|
|
2362
2372
|
.taskon-batch-token-table__table .taskon-table__header {
|
|
2363
|
-
font-size:
|
|
2364
|
-
line-height:
|
|
2373
|
+
font-size: var(--taskon-font-size);
|
|
2374
|
+
line-height: 2.29;
|
|
2365
2375
|
padding: 0 10px;
|
|
2366
2376
|
}
|
|
2367
2377
|
|
|
2368
2378
|
/* 单元格样式 */
|
|
2369
2379
|
|
|
2370
2380
|
.taskon-batch-token-table__table .taskon-table__cell {
|
|
2371
|
-
font-size:
|
|
2372
|
-
line-height:
|
|
2381
|
+
font-size: var(--taskon-font-size);
|
|
2382
|
+
line-height: 1.43;
|
|
2373
2383
|
padding: 0 10px;
|
|
2374
2384
|
font-weight: 400;
|
|
2375
2385
|
}
|
|
@@ -2407,14 +2417,14 @@
|
|
|
2407
2417
|
.taskon-batch-token-table__input {
|
|
2408
2418
|
width: 96px;
|
|
2409
2419
|
height: 32px;
|
|
2410
|
-
font-size:
|
|
2420
|
+
font-size: var(--taskon-font-size);
|
|
2411
2421
|
text-align: center;
|
|
2412
2422
|
}
|
|
2413
2423
|
|
|
2414
2424
|
.taskon-batch-token-table__input .taskon-input {
|
|
2415
2425
|
height: 32px;
|
|
2416
2426
|
padding: 4px 8px;
|
|
2417
|
-
font-size:
|
|
2427
|
+
font-size: var(--taskon-font-size);
|
|
2418
2428
|
text-align: center;
|
|
2419
2429
|
}
|
|
2420
2430
|
|
|
@@ -2439,14 +2449,14 @@
|
|
|
2439
2449
|
}
|
|
2440
2450
|
|
|
2441
2451
|
.taskon-batch-token-table__table .taskon-table__header {
|
|
2442
|
-
font-size:
|
|
2443
|
-
line-height:
|
|
2452
|
+
font-size: var(--taskon-font-size-sm);
|
|
2453
|
+
line-height: 2;
|
|
2444
2454
|
padding: 0 4px;
|
|
2445
2455
|
}
|
|
2446
2456
|
|
|
2447
2457
|
.taskon-batch-token-table__table .taskon-table__cell {
|
|
2448
|
-
font-size:
|
|
2449
|
-
line-height:
|
|
2458
|
+
font-size: var(--taskon-font-size-sm);
|
|
2459
|
+
line-height: 1.33;
|
|
2450
2460
|
padding: 0 4px;
|
|
2451
2461
|
}
|
|
2452
2462
|
|
|
@@ -2463,7 +2473,7 @@
|
|
|
2463
2473
|
.taskon-batch-token-table__input .taskon-input {
|
|
2464
2474
|
height: 28px;
|
|
2465
2475
|
padding: 2px 4px;
|
|
2466
|
-
font-size:
|
|
2476
|
+
font-size: var(--taskon-font-size-sm);
|
|
2467
2477
|
}
|
|
2468
2478
|
|
|
2469
2479
|
.taskon-batch-token-table__pagination {
|
|
@@ -2487,7 +2497,7 @@
|
|
|
2487
2497
|
|
|
2488
2498
|
.taskon-withdraw-form-init__title {
|
|
2489
2499
|
margin: 0 0 20px 0;
|
|
2490
|
-
font-size:
|
|
2500
|
+
font-size: var(--taskon-font-size-xxl);
|
|
2491
2501
|
font-weight: 600;
|
|
2492
2502
|
color: var(--taskon-color-text);
|
|
2493
2503
|
line-height: 1.3;
|
|
@@ -2522,7 +2532,7 @@
|
|
|
2522
2532
|
|
|
2523
2533
|
@media (max-width: 750px) {
|
|
2524
2534
|
.taskon-withdraw-form-init__title {
|
|
2525
|
-
font-size:
|
|
2535
|
+
font-size: var(--taskon-font-size-xxl);
|
|
2526
2536
|
margin-bottom: 5.333vw;
|
|
2527
2537
|
}
|
|
2528
2538
|
|
|
@@ -2629,7 +2639,7 @@
|
|
|
2629
2639
|
}
|
|
2630
2640
|
|
|
2631
2641
|
.taskon-user-center-empty__message {
|
|
2632
|
-
font-size:
|
|
2642
|
+
font-size: var(--taskon-font-size);
|
|
2633
2643
|
color: var(--taskon-color-text-disabled);
|
|
2634
2644
|
margin: 0;
|
|
2635
2645
|
}
|
|
@@ -2661,7 +2671,7 @@
|
|
|
2661
2671
|
|
|
2662
2672
|
.taskon-user-center-loading__message {
|
|
2663
2673
|
margin-top: var(--taskon-spacing-md);
|
|
2664
|
-
font-size:
|
|
2674
|
+
font-size: var(--taskon-font-size);
|
|
2665
2675
|
color: var(--taskon-color-text-disabled);
|
|
2666
2676
|
}
|
|
2667
2677
|
|
|
@@ -2699,7 +2709,7 @@
|
|
|
2699
2709
|
}
|
|
2700
2710
|
|
|
2701
2711
|
.taskon-user-center-pagination__info {
|
|
2702
|
-
font-size:
|
|
2712
|
+
font-size: var(--taskon-font-size-lg);
|
|
2703
2713
|
font-weight: 400;
|
|
2704
2714
|
color: var(--taskon-color-text);
|
|
2705
2715
|
text-transform: capitalize;
|
|
@@ -2714,7 +2724,7 @@
|
|
|
2714
2724
|
}
|
|
2715
2725
|
|
|
2716
2726
|
.taskon-user-center-pagination__info {
|
|
2717
|
-
font-size:
|
|
2727
|
+
font-size: var(--taskon-font-size);
|
|
2718
2728
|
color: var(--taskon-color-text-secondary);
|
|
2719
2729
|
}
|
|
2720
2730
|
|
|
@@ -2729,15 +2739,17 @@
|
|
|
2729
2739
|
text-align: center;
|
|
2730
2740
|
}
|
|
2731
2741
|
|
|
2732
|
-
.taskon-user-center-error__message {
|
|
2733
|
-
font-size:
|
|
2734
|
-
color: var(--taskon-color-error);
|
|
2735
|
-
margin-bottom: var(--taskon-spacing-md);
|
|
2742
|
+
.taskon-user-center-error__message {
|
|
2743
|
+
font-size: var(--taskon-font-size);
|
|
2744
|
+
color: var(--taskon-color-error);
|
|
2745
|
+
margin-bottom: var(--taskon-spacing-md);
|
|
2746
|
+
overflow-wrap: anywhere;
|
|
2747
|
+
word-break: break-word;
|
|
2736
2748
|
}
|
|
2737
2749
|
|
|
2738
2750
|
.taskon-user-center-error__retry {
|
|
2739
2751
|
padding: var(--taskon-spacing-sm) var(--taskon-spacing-lg);
|
|
2740
|
-
font-size:
|
|
2752
|
+
font-size: var(--taskon-font-size);
|
|
2741
2753
|
color: var(--taskon-color-text-on-primary);
|
|
2742
2754
|
background-color: var(--taskon-color-primary);
|
|
2743
2755
|
border: none;
|
|
@@ -2770,19 +2782,19 @@
|
|
|
2770
2782
|
}
|
|
2771
2783
|
|
|
2772
2784
|
.taskon-activity-history__cell--time {
|
|
2773
|
-
font-size:
|
|
2785
|
+
font-size: var(--taskon-font-size-sm);
|
|
2774
2786
|
color: var(--taskon-color-text-disabled);
|
|
2775
2787
|
}
|
|
2776
2788
|
|
|
2777
2789
|
.taskon-activity-history__campaign-name {
|
|
2778
|
-
font-size:
|
|
2790
|
+
font-size: var(--taskon-font-size);
|
|
2779
2791
|
font-weight: 500;
|
|
2780
2792
|
color: var(--taskon-color-text);
|
|
2781
2793
|
word-break: break-word;
|
|
2782
2794
|
}
|
|
2783
2795
|
|
|
2784
2796
|
.taskon-activity-history__campaign-type {
|
|
2785
|
-
font-size:
|
|
2797
|
+
font-size: var(--taskon-font-size-sm);
|
|
2786
2798
|
color: var(--taskon-color-text-disabled);
|
|
2787
2799
|
padding: 2px 6px;
|
|
2788
2800
|
background-color: var(--taskon-color-bg-surface-subtle);
|
|
@@ -2797,7 +2809,7 @@
|
|
|
2797
2809
|
|
|
2798
2810
|
.taskon-activity-history__load-more-btn {
|
|
2799
2811
|
padding: var(--taskon-spacing-sm) var(--taskon-spacing-lg);
|
|
2800
|
-
font-size:
|
|
2812
|
+
font-size: var(--taskon-font-size);
|
|
2801
2813
|
color: var(--taskon-color-primary);
|
|
2802
2814
|
background: transparent;
|
|
2803
2815
|
border: 1px solid var(--taskon-color-primary);
|
|
@@ -2835,9 +2847,9 @@
|
|
|
2835
2847
|
/* "You have earned" 标题 */
|
|
2836
2848
|
|
|
2837
2849
|
.taskon-asset-carousel__title {
|
|
2838
|
-
font-size:
|
|
2850
|
+
font-size: var(--taskon-font-size-lg);
|
|
2839
2851
|
font-weight: 600;
|
|
2840
|
-
line-height:
|
|
2852
|
+
line-height: 1.5;
|
|
2841
2853
|
color: var(--taskon-color-text);
|
|
2842
2854
|
}
|
|
2843
2855
|
|
|
@@ -2915,7 +2927,7 @@
|
|
|
2915
2927
|
/* Whitelist "WL" 文字图标样式 - 基于 Figma 设计 */
|
|
2916
2928
|
|
|
2917
2929
|
.taskon-asset-card__icon-wl {
|
|
2918
|
-
font-size:
|
|
2930
|
+
font-size: var(--taskon-font-size-xl);
|
|
2919
2931
|
font-weight: 900;
|
|
2920
2932
|
letter-spacing: 0.6933px;
|
|
2921
2933
|
color: var(--taskon-color-bg-canvas);
|
|
@@ -2925,7 +2937,7 @@
|
|
|
2925
2937
|
/* NFT 文字图标样式 - 基于 Figma 设计 */
|
|
2926
2938
|
|
|
2927
2939
|
.taskon-asset-card__icon-nft {
|
|
2928
|
-
font-size:
|
|
2940
|
+
font-size: var(--taskon-font-size-sm);
|
|
2929
2941
|
font-weight: 700;
|
|
2930
2942
|
letter-spacing: 0.5px;
|
|
2931
2943
|
color: var(--taskon-color-text);
|
|
@@ -2945,9 +2957,9 @@
|
|
|
2945
2957
|
/* 标题（如 Token, NFT） */
|
|
2946
2958
|
|
|
2947
2959
|
.taskon-asset-card__title {
|
|
2948
|
-
font-size:
|
|
2960
|
+
font-size: var(--taskon-font-size);
|
|
2949
2961
|
font-weight: 500;
|
|
2950
|
-
line-height:
|
|
2962
|
+
line-height: 1.43;
|
|
2951
2963
|
color: var(--taskon-color-text-disabled);
|
|
2952
2964
|
}
|
|
2953
2965
|
|
|
@@ -2956,7 +2968,7 @@
|
|
|
2956
2968
|
.taskon-asset-card__value {
|
|
2957
2969
|
font-size: 20px;
|
|
2958
2970
|
font-weight: 600;
|
|
2959
|
-
line-height:
|
|
2971
|
+
line-height: 1.4;
|
|
2960
2972
|
color: var(--taskon-color-text);
|
|
2961
2973
|
}
|
|
2962
2974
|
|
|
@@ -2980,9 +2992,9 @@
|
|
|
2980
2992
|
}
|
|
2981
2993
|
|
|
2982
2994
|
.taskon-my-rewards__section-title {
|
|
2983
|
-
font-size:
|
|
2995
|
+
font-size: var(--taskon-font-size-lg);
|
|
2984
2996
|
font-weight: 600;
|
|
2985
|
-
line-height:
|
|
2997
|
+
line-height: 1.5;
|
|
2986
2998
|
color: var(--taskon-color-text);
|
|
2987
2999
|
}
|
|
2988
3000
|
|
|
@@ -3025,7 +3037,7 @@
|
|
|
3025
3037
|
|
|
3026
3038
|
.taskon-withdraw-pending__count {
|
|
3027
3039
|
padding: 4px 8px;
|
|
3028
|
-
font-size:
|
|
3040
|
+
font-size: var(--taskon-font-size);
|
|
3029
3041
|
line-height: 1;
|
|
3030
3042
|
text-align: right;
|
|
3031
3043
|
white-space: nowrap;
|
|
@@ -3036,7 +3048,7 @@
|
|
|
3036
3048
|
/* 提示文字 */
|
|
3037
3049
|
|
|
3038
3050
|
.taskon-withdraw-pending__text {
|
|
3039
|
-
font-size:
|
|
3051
|
+
font-size: var(--taskon-font-size-lg);
|
|
3040
3052
|
white-space: nowrap;
|
|
3041
3053
|
}
|
|
3042
3054
|
|
|
@@ -3086,7 +3098,7 @@
|
|
|
3086
3098
|
/* Token 符号 */
|
|
3087
3099
|
|
|
3088
3100
|
.taskon-token-assets__symbol {
|
|
3089
|
-
font-size:
|
|
3101
|
+
font-size: var(--taskon-font-size);
|
|
3090
3102
|
font-weight: 400;
|
|
3091
3103
|
line-height: normal;
|
|
3092
3104
|
color: var(--taskon-color-text);
|
|
@@ -3096,7 +3108,7 @@
|
|
|
3096
3108
|
/* 链名称 */
|
|
3097
3109
|
|
|
3098
3110
|
.taskon-token-assets__chain {
|
|
3099
|
-
font-size:
|
|
3111
|
+
font-size: var(--taskon-font-size);
|
|
3100
3112
|
font-weight: 400;
|
|
3101
3113
|
line-height: normal;
|
|
3102
3114
|
color: var(--taskon-color-text);
|
|
@@ -3106,7 +3118,7 @@
|
|
|
3106
3118
|
/* 余额 */
|
|
3107
3119
|
|
|
3108
3120
|
.taskon-token-assets__balance {
|
|
3109
|
-
font-size:
|
|
3121
|
+
font-size: var(--taskon-font-size);
|
|
3110
3122
|
font-weight: 400;
|
|
3111
3123
|
line-height: normal;
|
|
3112
3124
|
color: var(--taskon-color-text);
|
|
@@ -3124,7 +3136,7 @@
|
|
|
3124
3136
|
color: var(--taskon-color-text);
|
|
3125
3137
|
text-decoration: underline;
|
|
3126
3138
|
cursor: pointer;
|
|
3127
|
-
font-size:
|
|
3139
|
+
font-size: var(--taskon-font-size);
|
|
3128
3140
|
font-weight: 500;
|
|
3129
3141
|
}
|
|
3130
3142
|
|
|
@@ -3207,7 +3219,7 @@
|
|
|
3207
3219
|
}
|
|
3208
3220
|
|
|
3209
3221
|
.taskon-reward-detail__cell--time {
|
|
3210
|
-
font-size:
|
|
3222
|
+
font-size: var(--taskon-font-size-sm);
|
|
3211
3223
|
color: var(--taskon-color-text-secondary);
|
|
3212
3224
|
white-space: nowrap;
|
|
3213
3225
|
}
|
|
@@ -3231,7 +3243,7 @@
|
|
|
3231
3243
|
}
|
|
3232
3244
|
|
|
3233
3245
|
.taskon-reward-detail__primary {
|
|
3234
|
-
font-size:
|
|
3246
|
+
font-size: var(--taskon-font-size);
|
|
3235
3247
|
font-weight: 500;
|
|
3236
3248
|
color: var(--taskon-color-text);
|
|
3237
3249
|
white-space: nowrap;
|
|
@@ -3240,7 +3252,7 @@
|
|
|
3240
3252
|
}
|
|
3241
3253
|
|
|
3242
3254
|
.taskon-reward-detail__secondary {
|
|
3243
|
-
font-size:
|
|
3255
|
+
font-size: var(--taskon-font-size-sm);
|
|
3244
3256
|
color: var(--taskon-color-text-secondary);
|
|
3245
3257
|
white-space: nowrap;
|
|
3246
3258
|
overflow: hidden;
|
|
@@ -3249,7 +3261,7 @@
|
|
|
3249
3261
|
|
|
3250
3262
|
.taskon-reward-detail__claim-btn {
|
|
3251
3263
|
padding: var(--taskon-spacing-xs) var(--taskon-spacing-md);
|
|
3252
|
-
font-size:
|
|
3264
|
+
font-size: var(--taskon-font-size);
|
|
3253
3265
|
font-weight: 500;
|
|
3254
3266
|
color: var(--taskon-color-text-on-primary);
|
|
3255
3267
|
background-color: var(--taskon-color-primary);
|
|
@@ -3264,7 +3276,7 @@
|
|
|
3264
3276
|
}
|
|
3265
3277
|
|
|
3266
3278
|
.taskon-reward-detail__claimed {
|
|
3267
|
-
font-size:
|
|
3279
|
+
font-size: var(--taskon-font-size);
|
|
3268
3280
|
color: var(--taskon-color-success);
|
|
3269
3281
|
}
|
|
3270
3282
|
|
|
@@ -3313,7 +3325,7 @@
|
|
|
3313
3325
|
}
|
|
3314
3326
|
|
|
3315
3327
|
.taskon-withdraw-modal__title {
|
|
3316
|
-
font-size:
|
|
3328
|
+
font-size: var(--taskon-font-size-xl);
|
|
3317
3329
|
font-weight: 600;
|
|
3318
3330
|
color: var(--taskon-color-text);
|
|
3319
3331
|
margin: 0;
|
|
@@ -3360,14 +3372,14 @@
|
|
|
3360
3372
|
}
|
|
3361
3373
|
|
|
3362
3374
|
.taskon-withdraw-modal__message {
|
|
3363
|
-
font-size:
|
|
3375
|
+
font-size: var(--taskon-font-size);
|
|
3364
3376
|
color: var(--taskon-color-text);
|
|
3365
3377
|
text-align: center;
|
|
3366
3378
|
margin: 0;
|
|
3367
3379
|
}
|
|
3368
3380
|
|
|
3369
3381
|
.taskon-withdraw-modal__tx-hash {
|
|
3370
|
-
font-size:
|
|
3382
|
+
font-size: var(--taskon-font-size-sm);
|
|
3371
3383
|
color: var(--taskon-color-text-secondary);
|
|
3372
3384
|
text-align: center;
|
|
3373
3385
|
margin-top: var(--taskon-spacing-sm);
|
|
@@ -3409,29 +3421,42 @@
|
|
|
3409
3421
|
}
|
|
3410
3422
|
|
|
3411
3423
|
.taskon-withdraw-modal__token-symbol {
|
|
3412
|
-
font-size:
|
|
3424
|
+
font-size: var(--taskon-font-size);
|
|
3413
3425
|
font-weight: 500;
|
|
3414
3426
|
color: var(--taskon-color-text);
|
|
3415
3427
|
}
|
|
3416
3428
|
|
|
3417
3429
|
.taskon-withdraw-modal__token-chain {
|
|
3418
|
-
font-size:
|
|
3430
|
+
font-size: var(--taskon-font-size-sm);
|
|
3419
3431
|
color: var(--taskon-color-text-secondary);
|
|
3420
3432
|
}
|
|
3421
3433
|
|
|
3422
3434
|
.taskon-withdraw-modal__token-amount {
|
|
3423
|
-
font-size:
|
|
3435
|
+
font-size: var(--taskon-font-size-lg);
|
|
3424
3436
|
font-weight: 600;
|
|
3425
3437
|
color: var(--taskon-color-text);
|
|
3426
3438
|
}
|
|
3427
3439
|
|
|
3428
|
-
.taskon-withdraw-modal__error {
|
|
3429
|
-
margin-top: var(--taskon-spacing-md);
|
|
3430
|
-
padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
|
|
3431
|
-
font-size:
|
|
3432
|
-
color: var(--taskon-color-error);
|
|
3433
|
-
background-color: var(--taskon-color-error-bg);
|
|
3434
|
-
border-radius: var(--taskon-border-radius-sm);
|
|
3440
|
+
.taskon-withdraw-modal__error {
|
|
3441
|
+
margin-top: var(--taskon-spacing-md);
|
|
3442
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
|
|
3443
|
+
font-size: var(--taskon-font-size);
|
|
3444
|
+
color: var(--taskon-color-error);
|
|
3445
|
+
background-color: var(--taskon-color-error-bg);
|
|
3446
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
3447
|
+
overflow-wrap: anywhere;
|
|
3448
|
+
word-break: break-word;
|
|
3449
|
+
}
|
|
3450
|
+
|
|
3451
|
+
.taskon-withdraw-confirm__error {
|
|
3452
|
+
margin-top: var(--taskon-spacing-md);
|
|
3453
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
|
|
3454
|
+
font-size: var(--taskon-font-size);
|
|
3455
|
+
color: var(--taskon-color-error);
|
|
3456
|
+
background-color: var(--taskon-color-error-bg);
|
|
3457
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
3458
|
+
overflow-wrap: anywhere;
|
|
3459
|
+
word-break: break-word;
|
|
3435
3460
|
}
|
|
3436
3461
|
|
|
3437
3462
|
.taskon-withdraw-modal__footer {
|
|
@@ -3444,7 +3469,7 @@
|
|
|
3444
3469
|
.taskon-withdraw-modal__btn {
|
|
3445
3470
|
flex: 1;
|
|
3446
3471
|
padding: var(--taskon-spacing-sm) var(--taskon-spacing-lg);
|
|
3447
|
-
font-size:
|
|
3472
|
+
font-size: var(--taskon-font-size);
|
|
3448
3473
|
font-weight: 500;
|
|
3449
3474
|
border: none;
|
|
3450
3475
|
border-radius: var(--taskon-border-radius-sm);
|
|
@@ -3505,7 +3530,7 @@
|
|
|
3505
3530
|
}
|
|
3506
3531
|
|
|
3507
3532
|
.taskon-frozen-assets__title {
|
|
3508
|
-
font-size:
|
|
3533
|
+
font-size: var(--taskon-font-size-lg);
|
|
3509
3534
|
font-weight: 600;
|
|
3510
3535
|
color: var(--taskon-color-text);
|
|
3511
3536
|
margin: 0;
|
|
@@ -3555,29 +3580,29 @@
|
|
|
3555
3580
|
}
|
|
3556
3581
|
|
|
3557
3582
|
.taskon-frozen-assets__amount {
|
|
3558
|
-
font-size:
|
|
3583
|
+
font-size: var(--taskon-font-size-lg);
|
|
3559
3584
|
font-weight: 600;
|
|
3560
3585
|
color: var(--taskon-color-text);
|
|
3561
3586
|
}
|
|
3562
3587
|
|
|
3563
3588
|
.taskon-frozen-assets__type {
|
|
3564
|
-
font-size:
|
|
3589
|
+
font-size: var(--taskon-font-size-sm);
|
|
3565
3590
|
color: var(--taskon-color-text-secondary);
|
|
3566
3591
|
}
|
|
3567
3592
|
|
|
3568
3593
|
.taskon-frozen-assets__campaign {
|
|
3569
|
-
font-size:
|
|
3594
|
+
font-size: var(--taskon-font-size-sm);
|
|
3570
3595
|
color: var(--taskon-color-text-secondary);
|
|
3571
3596
|
}
|
|
3572
3597
|
|
|
3573
3598
|
.taskon-frozen-assets__time {
|
|
3574
|
-
font-size:
|
|
3599
|
+
font-size: var(--taskon-font-size-sm);
|
|
3575
3600
|
color: var(--taskon-color-text-secondary);
|
|
3576
3601
|
}
|
|
3577
3602
|
|
|
3578
3603
|
.taskon-frozen-assets__resend-btn {
|
|
3579
3604
|
padding: var(--taskon-spacing-xs) var(--taskon-spacing-md);
|
|
3580
|
-
font-size:
|
|
3605
|
+
font-size: var(--taskon-font-size);
|
|
3581
3606
|
color: var(--taskon-color-primary);
|
|
3582
3607
|
background: transparent;
|
|
3583
3608
|
border: 1px solid var(--taskon-color-primary);
|
|
@@ -3617,7 +3642,7 @@
|
|
|
3617
3642
|
justify-content: space-between;
|
|
3618
3643
|
align-items: center;
|
|
3619
3644
|
margin-top: var(--taskon-spacing-xs);
|
|
3620
|
-
font-size:
|
|
3645
|
+
font-size: var(--taskon-font-size-sm);
|
|
3621
3646
|
color: var(--taskon-color-text-secondary);
|
|
3622
3647
|
}
|
|
3623
3648
|
|
|
@@ -3662,7 +3687,7 @@
|
|
|
3662
3687
|
);
|
|
3663
3688
|
border-radius: 50%;
|
|
3664
3689
|
color: var(--taskon-color-text-on-primary);
|
|
3665
|
-
font-size:
|
|
3690
|
+
font-size: var(--taskon-font-size-xl);
|
|
3666
3691
|
font-weight: 700;
|
|
3667
3692
|
}
|
|
3668
3693
|
|
|
@@ -3673,7 +3698,7 @@
|
|
|
3673
3698
|
}
|
|
3674
3699
|
|
|
3675
3700
|
.taskon-xp-level-card__level-label {
|
|
3676
|
-
font-size:
|
|
3701
|
+
font-size: var(--taskon-font-size-sm);
|
|
3677
3702
|
color: var(--taskon-color-text-secondary);
|
|
3678
3703
|
}
|
|
3679
3704
|
|
|
@@ -3691,12 +3716,12 @@
|
|
|
3691
3716
|
}
|
|
3692
3717
|
|
|
3693
3718
|
.taskon-xp-level-card__xp-label {
|
|
3694
|
-
font-size:
|
|
3719
|
+
font-size: var(--taskon-font-size-sm);
|
|
3695
3720
|
color: var(--taskon-color-text-secondary);
|
|
3696
3721
|
}
|
|
3697
3722
|
|
|
3698
3723
|
.taskon-xp-level-card__xp-value {
|
|
3699
|
-
font-size:
|
|
3724
|
+
font-size: var(--taskon-font-size-xl);
|
|
3700
3725
|
font-weight: 600;
|
|
3701
3726
|
color: var(--taskon-color-text);
|
|
3702
3727
|
}
|
|
@@ -3710,12 +3735,12 @@
|
|
|
3710
3735
|
justify-content: space-between;
|
|
3711
3736
|
align-items: center;
|
|
3712
3737
|
margin-bottom: var(--taskon-spacing-xs);
|
|
3713
|
-
font-size:
|
|
3738
|
+
font-size: var(--taskon-font-size-sm);
|
|
3714
3739
|
color: var(--taskon-color-text-secondary);
|
|
3715
3740
|
}
|
|
3716
3741
|
|
|
3717
3742
|
.taskon-xp-level-card__history-title {
|
|
3718
|
-
font-size:
|
|
3743
|
+
font-size: var(--taskon-font-size-lg);
|
|
3719
3744
|
font-weight: 600;
|
|
3720
3745
|
color: var(--taskon-color-text);
|
|
3721
3746
|
margin-bottom: var(--taskon-spacing-md);
|
|
@@ -3745,7 +3770,7 @@
|
|
|
3745
3770
|
align-items: center;
|
|
3746
3771
|
padding: var(--taskon-spacing-xl);
|
|
3747
3772
|
color: var(--taskon-color-text-tertiary);
|
|
3748
|
-
font-size:
|
|
3773
|
+
font-size: var(--taskon-font-size);
|
|
3749
3774
|
}
|
|
3750
3775
|
|
|
3751
3776
|
/* ============================================================================
|
|
@@ -3764,9 +3789,9 @@
|
|
|
3764
3789
|
/* 标题: 24px 加粗白色 */
|
|
3765
3790
|
|
|
3766
3791
|
.taskon-identity-social-section__title {
|
|
3767
|
-
font-size:
|
|
3792
|
+
font-size: var(--taskon-font-size-xxxl);
|
|
3768
3793
|
font-weight: 600;
|
|
3769
|
-
line-height:
|
|
3794
|
+
line-height: 1.33;
|
|
3770
3795
|
color: var(--taskon-color-text);
|
|
3771
3796
|
margin: 0;
|
|
3772
3797
|
}
|
|
@@ -3813,7 +3838,7 @@
|
|
|
3813
3838
|
justify-content: center;
|
|
3814
3839
|
height: 24px;
|
|
3815
3840
|
padding: 0 10px;
|
|
3816
|
-
font-size:
|
|
3841
|
+
font-size: var(--taskon-font-size-sm);
|
|
3817
3842
|
font-weight: 500;
|
|
3818
3843
|
line-height: 1;
|
|
3819
3844
|
color: var(--taskon-color-text-tertiary);
|
|
@@ -3909,9 +3934,9 @@
|
|
|
3909
3934
|
/* 文字样式: 16px 加粗白色 */
|
|
3910
3935
|
|
|
3911
3936
|
.taskon-identity-social-item__name {
|
|
3912
|
-
font-size:
|
|
3937
|
+
font-size: var(--taskon-font-size-lg);
|
|
3913
3938
|
font-weight: 600;
|
|
3914
|
-
line-height:
|
|
3939
|
+
line-height: 1.5;
|
|
3915
3940
|
color: var(--taskon-color-text);
|
|
3916
3941
|
white-space: nowrap;
|
|
3917
3942
|
overflow: hidden;
|
|
@@ -3921,9 +3946,9 @@
|
|
|
3921
3946
|
/* 链接样式 */
|
|
3922
3947
|
|
|
3923
3948
|
.taskon-identity-social-item__link {
|
|
3924
|
-
font-size:
|
|
3949
|
+
font-size: var(--taskon-font-size-lg);
|
|
3925
3950
|
font-weight: 600;
|
|
3926
|
-
line-height:
|
|
3951
|
+
line-height: 1.5;
|
|
3927
3952
|
color: var(--taskon-color-text);
|
|
3928
3953
|
text-decoration: none;
|
|
3929
3954
|
white-space: nowrap;
|
|
@@ -3997,9 +4022,9 @@
|
|
|
3997
4022
|
/* 标题: 16px 加粗白色 */
|
|
3998
4023
|
|
|
3999
4024
|
.taskon-identity-email-section__title {
|
|
4000
|
-
font-size:
|
|
4025
|
+
font-size: var(--taskon-font-size-lg);
|
|
4001
4026
|
font-weight: 600;
|
|
4002
|
-
line-height:
|
|
4027
|
+
line-height: 1.5;
|
|
4003
4028
|
color: var(--taskon-color-text);
|
|
4004
4029
|
margin: 0;
|
|
4005
4030
|
}
|
|
@@ -4026,9 +4051,9 @@
|
|
|
4026
4051
|
/* 标题: 24px 加粗白色 */
|
|
4027
4052
|
|
|
4028
4053
|
.taskon-network-section__title {
|
|
4029
|
-
font-size:
|
|
4054
|
+
font-size: var(--taskon-font-size-xxxl);
|
|
4030
4055
|
font-weight: 600;
|
|
4031
|
-
line-height:
|
|
4056
|
+
line-height: 1.33;
|
|
4032
4057
|
color: var(--taskon-color-text);
|
|
4033
4058
|
margin: 0;
|
|
4034
4059
|
}
|
|
@@ -4077,9 +4102,9 @@
|
|
|
4077
4102
|
/* 链标签: 14px medium 白色 */
|
|
4078
4103
|
|
|
4079
4104
|
.taskon-network-card__label {
|
|
4080
|
-
font-size:
|
|
4105
|
+
font-size: var(--taskon-font-size);
|
|
4081
4106
|
font-weight: 500;
|
|
4082
|
-
line-height:
|
|
4107
|
+
line-height: 1.43;
|
|
4083
4108
|
color: var(--taskon-color-text);
|
|
4084
4109
|
}
|
|
4085
4110
|
|
|
@@ -4151,9 +4176,9 @@
|
|
|
4151
4176
|
}
|
|
4152
4177
|
|
|
4153
4178
|
.taskon-network-address-row__addr {
|
|
4154
|
-
font-size:
|
|
4179
|
+
font-size: var(--taskon-font-size);
|
|
4155
4180
|
font-weight: 500;
|
|
4156
|
-
line-height:
|
|
4181
|
+
line-height: 1.43;
|
|
4157
4182
|
color: var(--taskon-color-text);
|
|
4158
4183
|
}
|
|
4159
4184
|
|
|
@@ -4177,7 +4202,7 @@
|
|
|
4177
4202
|
}
|
|
4178
4203
|
|
|
4179
4204
|
.taskon-network-address-row__type {
|
|
4180
|
-
font-size:
|
|
4205
|
+
font-size: var(--taskon-font-size);
|
|
4181
4206
|
font-weight: 400;
|
|
4182
4207
|
line-height: normal;
|
|
4183
4208
|
text-transform: capitalize;
|
|
@@ -4224,9 +4249,9 @@
|
|
|
4224
4249
|
justify-content: center;
|
|
4225
4250
|
height: 20px;
|
|
4226
4251
|
padding: 0 var(--taskon-spacing-sm);
|
|
4227
|
-
font-size:
|
|
4252
|
+
font-size: var(--taskon-font-size-sm);
|
|
4228
4253
|
font-weight: 600;
|
|
4229
|
-
line-height:
|
|
4254
|
+
line-height: 1;
|
|
4230
4255
|
color: var(--taskon-color-text);
|
|
4231
4256
|
background-color: var(--taskon-color-border);
|
|
4232
4257
|
border: none;
|
|
@@ -4267,9 +4292,9 @@
|
|
|
4267
4292
|
}
|
|
4268
4293
|
|
|
4269
4294
|
.taskon-network-address-input__text {
|
|
4270
|
-
font-size:
|
|
4295
|
+
font-size: var(--taskon-font-size);
|
|
4271
4296
|
font-weight: 500;
|
|
4272
|
-
line-height:
|
|
4297
|
+
line-height: 1.43;
|
|
4273
4298
|
color: var(--taskon-color-text);
|
|
4274
4299
|
}
|
|
4275
4300
|
|
|
@@ -4281,9 +4306,9 @@
|
|
|
4281
4306
|
justify-content: center;
|
|
4282
4307
|
height: 34px;
|
|
4283
4308
|
padding: var(--taskon-spacing-sm) var(--taskon-spacing-sm);
|
|
4284
|
-
font-size:
|
|
4309
|
+
font-size: var(--taskon-font-size);
|
|
4285
4310
|
font-weight: 500;
|
|
4286
|
-
line-height:
|
|
4311
|
+
line-height: 1.43;
|
|
4287
4312
|
color: var(--taskon-color-text-on-primary);
|
|
4288
4313
|
background-color: var(--taskon-color-text);
|
|
4289
4314
|
border: none;
|
|
@@ -4308,7 +4333,7 @@
|
|
|
4308
4333
|
@media (max-width: 750px) {
|
|
4309
4334
|
.taskon-network-section__title {
|
|
4310
4335
|
font-size: 20px;
|
|
4311
|
-
line-height:
|
|
4336
|
+
line-height: 1.4;
|
|
4312
4337
|
}
|
|
4313
4338
|
|
|
4314
4339
|
.taskon-network-grid {
|
|
@@ -4341,7 +4366,7 @@
|
|
|
4341
4366
|
}
|
|
4342
4367
|
|
|
4343
4368
|
.taskon-network-address-row__type {
|
|
4344
|
-
font-size:
|
|
4369
|
+
font-size: var(--taskon-font-size-sm);
|
|
4345
4370
|
}
|
|
4346
4371
|
}
|
|
4347
4372
|
|
|
@@ -4358,7 +4383,7 @@
|
|
|
4358
4383
|
}
|
|
4359
4384
|
|
|
4360
4385
|
.taskon-identity-section__title {
|
|
4361
|
-
font-size:
|
|
4386
|
+
font-size: var(--taskon-font-size-lg);
|
|
4362
4387
|
font-weight: 600;
|
|
4363
4388
|
color: var(--taskon-color-text);
|
|
4364
4389
|
margin: 0;
|
|
@@ -4417,7 +4442,7 @@
|
|
|
4417
4442
|
}
|
|
4418
4443
|
|
|
4419
4444
|
.taskon-identity-item__name {
|
|
4420
|
-
font-size:
|
|
4445
|
+
font-size: var(--taskon-font-size);
|
|
4421
4446
|
font-weight: 500;
|
|
4422
4447
|
color: var(--taskon-color-text);
|
|
4423
4448
|
}
|
|
@@ -4426,7 +4451,7 @@
|
|
|
4426
4451
|
display: flex;
|
|
4427
4452
|
align-items: center;
|
|
4428
4453
|
gap: var(--taskon-spacing-xs);
|
|
4429
|
-
font-size:
|
|
4454
|
+
font-size: var(--taskon-font-size-sm);
|
|
4430
4455
|
color: var(--taskon-color-text-tertiary);
|
|
4431
4456
|
}
|
|
4432
4457
|
|
|
@@ -4441,14 +4466,14 @@
|
|
|
4441
4466
|
}
|
|
4442
4467
|
|
|
4443
4468
|
.taskon-identity-item__address {
|
|
4444
|
-
font-size:
|
|
4469
|
+
font-size: var(--taskon-font-size-sm);
|
|
4445
4470
|
}
|
|
4446
4471
|
|
|
4447
4472
|
.taskon-identity-item__badge {
|
|
4448
4473
|
display: inline-flex;
|
|
4449
4474
|
align-items: center;
|
|
4450
4475
|
padding: 2px 6px;
|
|
4451
|
-
font-size:
|
|
4476
|
+
font-size: var(--taskon-font-size-sm);
|
|
4452
4477
|
font-weight: 500;
|
|
4453
4478
|
color: var(--taskon-color-link);
|
|
4454
4479
|
background-color: var(--taskon-color-secondary-bg);
|
|
@@ -4466,7 +4491,7 @@
|
|
|
4466
4491
|
align-items: center;
|
|
4467
4492
|
justify-content: center;
|
|
4468
4493
|
padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
|
|
4469
|
-
font-size:
|
|
4494
|
+
font-size: var(--taskon-font-size-sm);
|
|
4470
4495
|
font-weight: 500;
|
|
4471
4496
|
border-radius: var(--taskon-border-radius);
|
|
4472
4497
|
border: none;
|
|
@@ -4535,17 +4560,17 @@
|
|
|
4535
4560
|
}
|
|
4536
4561
|
|
|
4537
4562
|
.taskon-confirm-unlink__title {
|
|
4538
|
-
font-size:
|
|
4563
|
+
font-size: var(--taskon-font-size-xl);
|
|
4539
4564
|
font-weight: 600;
|
|
4540
|
-
line-height:
|
|
4565
|
+
line-height: 1.33;
|
|
4541
4566
|
color: var(--taskon-color-text);
|
|
4542
4567
|
margin: 0;
|
|
4543
4568
|
}
|
|
4544
4569
|
|
|
4545
4570
|
.taskon-confirm-unlink__description {
|
|
4546
|
-
font-size:
|
|
4571
|
+
font-size: var(--taskon-font-size);
|
|
4547
4572
|
font-weight: 400;
|
|
4548
|
-
line-height:
|
|
4573
|
+
line-height: 1.43;
|
|
4549
4574
|
color: var(--taskon-color-text-tertiary);
|
|
4550
4575
|
margin: 0;
|
|
4551
4576
|
}
|
|
@@ -4563,7 +4588,7 @@
|
|
|
4563
4588
|
justify-content: center;
|
|
4564
4589
|
height: 40px;
|
|
4565
4590
|
padding: 0 var(--taskon-spacing-md);
|
|
4566
|
-
font-size:
|
|
4591
|
+
font-size: var(--taskon-font-size);
|
|
4567
4592
|
font-weight: 500;
|
|
4568
4593
|
border-radius: var(--taskon-border-radius);
|
|
4569
4594
|
border: none;
|
|
@@ -4607,11 +4632,11 @@
|
|
|
4607
4632
|
}
|
|
4608
4633
|
}
|
|
4609
4634
|
|
|
4610
|
-
@media (max-width: 750px) {
|
|
4611
|
-
/* 小屏幕：每行 1 个，全宽 */
|
|
4612
|
-
.taskon-identity-social-section__title {
|
|
4635
|
+
@media (max-width: 750px) {
|
|
4636
|
+
/* 小屏幕：每行 1 个，全宽 */
|
|
4637
|
+
.taskon-identity-social-section__title {
|
|
4613
4638
|
font-size: 20px;
|
|
4614
|
-
line-height:
|
|
4639
|
+
line-height: 1.4;
|
|
4615
4640
|
}
|
|
4616
4641
|
|
|
4617
4642
|
.taskon-identity-social-item {
|
|
@@ -4620,7 +4645,7 @@
|
|
|
4620
4645
|
}
|
|
4621
4646
|
|
|
4622
4647
|
.taskon-identity-section__title {
|
|
4623
|
-
font-size:
|
|
4648
|
+
font-size: var(--taskon-font-size);
|
|
4624
4649
|
}
|
|
4625
4650
|
|
|
4626
4651
|
.taskon-identity-item {
|
|
@@ -4631,204 +4656,204 @@
|
|
|
4631
4656
|
.taskon-identity-item__icon {
|
|
4632
4657
|
width: 32px;
|
|
4633
4658
|
height: 32px;
|
|
4634
|
-
font-size:
|
|
4659
|
+
font-size: var(--taskon-font-size-lg);
|
|
4635
4660
|
}
|
|
4636
4661
|
|
|
4637
4662
|
.taskon-identity-item__name {
|
|
4638
|
-
font-size:
|
|
4663
|
+
font-size: var(--taskon-font-size-sm);
|
|
4639
4664
|
}
|
|
4640
4665
|
|
|
4641
4666
|
.taskon-identity-item__value {
|
|
4642
|
-
font-size:
|
|
4667
|
+
font-size: var(--taskon-font-size-sm);
|
|
4643
4668
|
}
|
|
4644
4669
|
|
|
4645
|
-
.taskon-identity-btn {
|
|
4646
|
-
padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
|
|
4647
|
-
font-size:
|
|
4648
|
-
min-width: 60px;
|
|
4649
|
-
height: 28px;
|
|
4650
|
-
}
|
|
4670
|
+
.taskon-identity-btn {
|
|
4671
|
+
padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
|
|
4672
|
+
font-size: var(--taskon-font-size-sm);
|
|
4673
|
+
min-width: 60px;
|
|
4674
|
+
height: 28px;
|
|
4675
|
+
}
|
|
4651
4676
|
}
|
|
4652
4677
|
|
|
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:
|
|
4668
|
-
line-height:
|
|
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:
|
|
4692
|
-
line-height:
|
|
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:
|
|
4718
|
-
line-height:
|
|
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:
|
|
4729
|
-
white-space: normal;
|
|
4730
|
-
}
|
|
4731
|
-
|
|
4732
|
-
.taskon-withdraw-pending__count {
|
|
4733
|
-
font-size:
|
|
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:
|
|
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:
|
|
4752
|
-
}
|
|
4753
|
-
|
|
4754
|
-
.taskon-activity-history__campaign-name {
|
|
4755
|
-
font-size:
|
|
4756
|
-
line-height:
|
|
4757
|
-
}
|
|
4758
|
-
|
|
4759
|
-
.taskon-activity-history__campaign-type {
|
|
4760
|
-
font-size:
|
|
4761
|
-
line-height:
|
|
4762
|
-
}
|
|
4763
|
-
|
|
4764
|
-
.taskon-activity-history__cell--time {
|
|
4765
|
-
font-size:
|
|
4766
|
-
line-height:
|
|
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:
|
|
4783
|
-
line-height:
|
|
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:
|
|
4798
|
-
line-height:
|
|
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:
|
|
4825
|
-
}
|
|
4826
|
-
|
|
4827
|
-
.taskon-xp-level-card__level-value {
|
|
4828
|
-
font-size:
|
|
4829
|
-
}
|
|
4830
|
-
|
|
4831
|
-
.taskon-confirm-unlink__actions {
|
|
4832
|
-
flex-direction: column;
|
|
4833
|
-
}
|
|
4834
|
-
}
|
|
4678
|
+
@media (max-width: 750px) {
|
|
4679
|
+
.taskon-user-center {
|
|
4680
|
+
gap: var(--taskon-spacing-md);
|
|
4681
|
+
padding: var(--taskon-spacing-md);
|
|
4682
|
+
border-radius: var(--taskon-border-radius-sm);
|
|
4683
|
+
}
|
|
4684
|
+
|
|
4685
|
+
.taskon-user-center-content {
|
|
4686
|
+
min-height: 0;
|
|
4687
|
+
}
|
|
4688
|
+
|
|
4689
|
+
.taskon-user-center .taskon-table__header,
|
|
4690
|
+
.taskon-user-center .taskon-table__cell {
|
|
4691
|
+
padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm);
|
|
4692
|
+
font-size: var(--taskon-font-size-sm);
|
|
4693
|
+
line-height: 1.5;
|
|
4694
|
+
}
|
|
4695
|
+
|
|
4696
|
+
.taskon-user-center .taskon-table__row {
|
|
4697
|
+
height: 60px;
|
|
4698
|
+
}
|
|
4699
|
+
|
|
4700
|
+
.taskon-user-center-pagination {
|
|
4701
|
+
margin-top: var(--taskon-spacing-lg);
|
|
4702
|
+
}
|
|
4703
|
+
|
|
4704
|
+
.taskon-my-rewards {
|
|
4705
|
+
gap: var(--taskon-spacing-lg);
|
|
4706
|
+
}
|
|
4707
|
+
|
|
4708
|
+
.taskon-my-rewards__section {
|
|
4709
|
+
gap: var(--taskon-spacing-sm);
|
|
4710
|
+
}
|
|
4711
|
+
|
|
4712
|
+
.taskon-my-rewards__section-title,
|
|
4713
|
+
.taskon-asset-carousel__title,
|
|
4714
|
+
.taskon-frozen-assets__title,
|
|
4715
|
+
.taskon-xp-level-card__history-title {
|
|
4716
|
+
font-size: var(--taskon-font-size);
|
|
4717
|
+
line-height: 1.43;
|
|
4718
|
+
}
|
|
4719
|
+
|
|
4720
|
+
.taskon-asset-carousel {
|
|
4721
|
+
gap: var(--taskon-spacing-sm);
|
|
4722
|
+
margin-bottom: var(--taskon-spacing-lg);
|
|
4723
|
+
}
|
|
4724
|
+
|
|
4725
|
+
.taskon-asset-carousel__container {
|
|
4726
|
+
gap: var(--taskon-spacing-xs);
|
|
4727
|
+
}
|
|
4728
|
+
|
|
4729
|
+
.taskon-asset-card {
|
|
4730
|
+
min-width: calc(50% - 4px);
|
|
4731
|
+
gap: var(--taskon-spacing-sm);
|
|
4732
|
+
padding: var(--taskon-spacing-sm);
|
|
4733
|
+
}
|
|
4734
|
+
|
|
4735
|
+
.taskon-asset-card__icon,
|
|
4736
|
+
.taskon-asset-card__icon-img {
|
|
4737
|
+
width: 40px;
|
|
4738
|
+
height: 40px;
|
|
4739
|
+
}
|
|
4740
|
+
|
|
4741
|
+
.taskon-asset-card__value {
|
|
4742
|
+
font-size: var(--taskon-font-size-lg);
|
|
4743
|
+
line-height: 1.38;
|
|
4744
|
+
}
|
|
4745
|
+
|
|
4746
|
+
.taskon-withdraw-pending {
|
|
4747
|
+
align-items: flex-start;
|
|
4748
|
+
gap: var(--taskon-spacing-sm);
|
|
4749
|
+
padding: var(--taskon-spacing-sm) var(--taskon-spacing-md);
|
|
4750
|
+
}
|
|
4751
|
+
|
|
4752
|
+
.taskon-withdraw-pending__text {
|
|
4753
|
+
font-size: var(--taskon-font-size);
|
|
4754
|
+
white-space: normal;
|
|
4755
|
+
}
|
|
4756
|
+
|
|
4757
|
+
.taskon-withdraw-pending__count {
|
|
4758
|
+
font-size: var(--taskon-font-size-sm);
|
|
4759
|
+
}
|
|
4760
|
+
|
|
4761
|
+
.taskon-token-assets__symbol-cell,
|
|
4762
|
+
.taskon-token-assets__network-cell {
|
|
4763
|
+
gap: var(--taskon-spacing-xs);
|
|
4764
|
+
}
|
|
4765
|
+
|
|
4766
|
+
.taskon-token-assets__symbol,
|
|
4767
|
+
.taskon-token-assets__chain,
|
|
4768
|
+
.taskon-token-assets__balance,
|
|
4769
|
+
.taskon-token-assets__frozen-btn {
|
|
4770
|
+
font-size: var(--taskon-font-size-sm);
|
|
4771
|
+
}
|
|
4772
|
+
|
|
4773
|
+
.taskon-token-assets__withdraw-btn {
|
|
4774
|
+
height: 30px !important;
|
|
4775
|
+
padding: var(--taskon-spacing-xs) var(--taskon-spacing-sm) !important;
|
|
4776
|
+
font-size: var(--taskon-font-size-sm) !important;
|
|
4777
|
+
}
|
|
4778
|
+
|
|
4779
|
+
.taskon-activity-history__campaign-name {
|
|
4780
|
+
font-size: var(--taskon-font-size-sm);
|
|
4781
|
+
line-height: 1.5;
|
|
4782
|
+
}
|
|
4783
|
+
|
|
4784
|
+
.taskon-activity-history__campaign-type {
|
|
4785
|
+
font-size: var(--taskon-font-size-sm);
|
|
4786
|
+
line-height: 1.17;
|
|
4787
|
+
}
|
|
4788
|
+
|
|
4789
|
+
.taskon-activity-history__cell--time {
|
|
4790
|
+
font-size: var(--taskon-font-size-sm);
|
|
4791
|
+
line-height: 1.33;
|
|
4792
|
+
}
|
|
4793
|
+
|
|
4794
|
+
.taskon-reward-detail__row {
|
|
4795
|
+
align-items: flex-start;
|
|
4796
|
+
flex-wrap: wrap;
|
|
4797
|
+
gap: var(--taskon-spacing-sm);
|
|
4798
|
+
padding: var(--taskon-spacing-sm);
|
|
4799
|
+
}
|
|
4800
|
+
|
|
4801
|
+
.taskon-reward-detail__row--nft {
|
|
4802
|
+
padding: var(--taskon-spacing-sm);
|
|
4803
|
+
}
|
|
4804
|
+
|
|
4805
|
+
.taskon-reward-detail__cell--time {
|
|
4806
|
+
width: 100%;
|
|
4807
|
+
font-size: var(--taskon-font-size-sm);
|
|
4808
|
+
line-height: 1.33;
|
|
4809
|
+
white-space: normal;
|
|
4810
|
+
}
|
|
4811
|
+
|
|
4812
|
+
.taskon-reward-detail__cell--action {
|
|
4813
|
+
width: 100%;
|
|
4814
|
+
margin-left: 0;
|
|
4815
|
+
}
|
|
4816
|
+
|
|
4817
|
+
.taskon-reward-detail__claim-btn {
|
|
4818
|
+
width: 100%;
|
|
4819
|
+
}
|
|
4820
|
+
|
|
4821
|
+
.taskon-reward-detail__primary {
|
|
4822
|
+
font-size: var(--taskon-font-size-sm);
|
|
4823
|
+
line-height: 1.5;
|
|
4824
|
+
}
|
|
4825
|
+
|
|
4826
|
+
.taskon-frozen-assets__item {
|
|
4827
|
+
align-items: flex-start;
|
|
4828
|
+
flex-direction: column;
|
|
4829
|
+
gap: var(--taskon-spacing-sm);
|
|
4830
|
+
}
|
|
4831
|
+
|
|
4832
|
+
.taskon-frozen-assets__resend-btn {
|
|
4833
|
+
width: 100%;
|
|
4834
|
+
}
|
|
4835
|
+
|
|
4836
|
+
.taskon-xp-level-card__header {
|
|
4837
|
+
align-items: flex-start;
|
|
4838
|
+
flex-direction: column;
|
|
4839
|
+
gap: var(--taskon-spacing-sm);
|
|
4840
|
+
}
|
|
4841
|
+
|
|
4842
|
+
.taskon-xp-level-card__xp {
|
|
4843
|
+
align-items: flex-start;
|
|
4844
|
+
}
|
|
4845
|
+
|
|
4846
|
+
.taskon-xp-level-card__level-badge {
|
|
4847
|
+
width: 40px;
|
|
4848
|
+
height: 40px;
|
|
4849
|
+
font-size: var(--taskon-font-size-lg);
|
|
4850
|
+
}
|
|
4851
|
+
|
|
4852
|
+
.taskon-xp-level-card__level-value {
|
|
4853
|
+
font-size: var(--taskon-font-size-xl);
|
|
4854
|
+
}
|
|
4855
|
+
|
|
4856
|
+
.taskon-confirm-unlink__actions {
|
|
4857
|
+
flex-direction: column;
|
|
4858
|
+
}
|
|
4859
|
+
}
|