@kimafinance/kima-transaction-widget 1.0.0 → 1.0.2

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.
Files changed (41) hide show
  1. package/README.md +6 -6
  2. package/dist/assets/icons/Celo.d.ts +7 -0
  3. package/dist/assets/icons/Check.d.ts +2 -1
  4. package/dist/assets/icons/Copy.d.ts +8 -0
  5. package/dist/assets/icons/Fuse.d.ts +7 -0
  6. package/dist/assets/icons/GoodDollar.d.ts +7 -0
  7. package/dist/assets/icons/index.d.ts +4 -0
  8. package/dist/assets/loading/6-dots-scale.d.ts +3 -0
  9. package/dist/assets/loading/index.d.ts +1 -0
  10. package/dist/components/KimaTransactionWidget.d.ts +7 -3
  11. package/dist/components/TransferWidget.d.ts +6 -2
  12. package/dist/components/modals/HashPopup.d.ts +7 -0
  13. package/dist/components/modals/HelpPopup.d.ts +3 -0
  14. package/dist/components/modals/WalletConnectModal.d.ts +3 -0
  15. package/dist/components/modals/index.d.ts +3 -0
  16. package/dist/components/reusable/AddressInputWizard.d.ts +3 -0
  17. package/dist/components/reusable/ConfirmDetails.d.ts +3 -1
  18. package/dist/components/reusable/CopyButton.d.ts +6 -0
  19. package/dist/components/reusable/Dropdown.d.ts +2 -3
  20. package/dist/components/reusable/HelpPopup.d.ts +3 -0
  21. package/dist/components/reusable/NetworkDropdown.d.ts +5 -0
  22. package/dist/components/reusable/NetworkSelect.d.ts +2 -2
  23. package/dist/components/reusable/Progressbar.d.ts +2 -1
  24. package/dist/components/reusable/SecondaryButton.d.ts +2 -1
  25. package/dist/components/reusable/StepBox.d.ts +10 -0
  26. package/dist/components/reusable/Tooltip.d.ts +4 -1
  27. package/dist/components/reusable/index.d.ts +3 -1
  28. package/dist/hooks/useCurrencyOptions.d.ts +3 -0
  29. package/dist/hooks/useNetworkOptions.d.ts +3 -0
  30. package/dist/index.css +1041 -809
  31. package/dist/index.js +1600 -1116
  32. package/dist/index.js.map +1 -1
  33. package/dist/index.modern.js +1280 -832
  34. package/dist/index.modern.js.map +1 -1
  35. package/dist/interface.d.ts +18 -8
  36. package/dist/store/optionSlice.d.ts +14 -1
  37. package/dist/store/selectors.d.ts +6 -0
  38. package/dist/utils/config.d.ts +2 -4
  39. package/dist/utils/constants.d.ts +45 -17
  40. package/dist/utils/testId.d.ts +1 -0
  41. package/package.json +19 -4
package/dist/index.css CHANGED
@@ -1,809 +1,1041 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
2
- .kima-card {
3
- position: relative; }
4
- .kima-card .kima-card-header .topbar {
5
- display: flex;
6
- align-items: center;
7
- justify-content: space-between; }
8
- @media (max-width: 768px) {
9
- .kima-card .kima-card-header .topbar {
10
- flex-direction: column-reverse;
11
- align-items: flex-start; } }
12
- .kima-card .kima-card-header .topbar .title {
13
- display: flex;
14
- align-items: center;
15
- font-size: 1.2em; }
16
- .kima-card .kima-card-header .topbar .title h3 {
17
- margin: 0; }
18
- .kima-card .kima-card-header .topbar .title span {
19
- color: #5aa0db;
20
- font-weight: bold;
21
- margin: 0 0 0 1em; }
22
- @media (max-width: 768px) {
23
- .kima-card .kima-card-header .topbar .title {
24
- flex-direction: column;
25
- align-items: flex-start; }
26
- .kima-card .kima-card-header .topbar .title p {
27
- margin: 0; } }
28
- .kima-card .kima-card-header .topbar .control-buttons {
29
- display: flex;
30
- align-items: center; }
31
- @media (max-width: 768px) {
32
- .kima-card .kima-card-header .topbar .control-buttons {
33
- margin-left: auto; } }
34
- .kima-card .kima-card-header .topbar .control-buttons .icon-button {
35
- background: transparent;
36
- border: none;
37
- font-size: 1em;
38
- cursor: pointer;
39
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
40
- .kima-card .kima-card-header .topbar .control-buttons .icon-button:hover {
41
- opacity: 0.6; }
42
- .kima-card .kima-card-header .topbar .control-buttons .icon-button svg {
43
- width: 1em;
44
- height: 1em; }
45
- .kima-card .kima-card-header .topbar .control-buttons .icon-button:first-of-type svg {
46
- margin-top: 0.5em; }
47
- .kima-card .kima-card-header .topbar .control-buttons .maximize {
48
- color: #5aa0db;
49
- cursor: pointer; }
50
- .kima-card .kima-card-footer {
51
- display: flex;
52
- align-items: center;
53
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
54
- max-height: 3em;
55
- padding-top: 2em;
56
- opacity: 1;
57
- box-sizing: content-box; }
58
- .kima-card .kima-card-footer svg {
59
- width: 10em;
60
- height: 2.5em; }
61
- .kima-card .kima-card-footer p {
62
- font-size: 0.8em;
63
- margin: 0 0 0 1em; }
64
- .kima-card .kima-card-footer a,
65
- .kima-card .kima-card-footer .menu-button {
66
- margin-left: auto;
67
- color: #5aa0db;
68
- text-decoration: none;
69
- cursor: pointer; }
70
- .kima-card .kima-card-footer button {
71
- margin-left: 1em; }
72
- @media (max-width: 768px) {
73
- .kima-card .kima-card-footer p {
74
- display: none; } }
75
-
76
- .kima-card .kima-card-content .kima-progressbar {
77
- height: 1em;
78
- width: 100%;
79
- position: relative;
80
- border-radius: 1em;
81
- margin-bottom: 4em; }
82
- @media (max-width: 768px) {
83
- .kima-card .kima-card-content .kima-progressbar {
84
- font-size: 1.5em; } }
85
- .kima-card .kima-card-content .kima-progressbar .value {
86
- position: absolute;
87
- z-index: 10;
88
- height: 100%;
89
- width: 100%;
90
- border-radius: 1em;
91
- background: linear-gradient(90deg, #85d2dd 8.08%, #579dda 96.15%);
92
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
93
- transition-duration: 1000ms; }
94
- .kima-card .kima-card-content .kima-progressbar .step-indicators {
95
- position: relative;
96
- z-index: 20;
97
- display: flex;
98
- justify-content: space-between;
99
- margin: 0 -0.2em;
100
- padding-bottom: 4em; }
101
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step {
102
- width: 1.4em;
103
- height: 1.4em;
104
- margin-top: -0.2em;
105
- position: relative;
106
- cursor: pointer; }
107
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:before {
108
- content: '';
109
- border-radius: 100%;
110
- position: absolute;
111
- left: 0.3em;
112
- top: 0.3em;
113
- width: 0.8em;
114
- height: 0.8em;
115
- background: white;
116
- box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15); }
117
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:hover:before {
118
- width: 1em;
119
- height: 1em;
120
- left: 0;
121
- top: 0;
122
- background: #5aa0db;
123
- border: 0.2em solid white; }
124
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info {
125
- position: absolute;
126
- width: 10em;
127
- left: -4em;
128
- top: 2em;
129
- display: flex;
130
- justify-content: center;
131
- align-items: center;
132
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
133
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info:hover {
134
- color: #5aa0db; }
135
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
136
- text-align: center;
137
- margin-left: 0.5em; }
138
- @media (max-width: 768px) {
139
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info {
140
- width: 3em;
141
- left: -0.5em;
142
- flex-direction: column;
143
- position: relative;
144
- margin-left: -0.3em; }
145
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
146
- font-size: 0.66em;
147
- text-overflow: ellipsis;
148
- overflow: hidden;
149
- white-space: nowrap;
150
- margin-left: 0;
151
- margin-top: 1em;
152
- width: 100%; }
153
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info svg {
154
- position: absolute;
155
- top: 0; }
156
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info:hover {
157
- align-items: center; }
158
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info:hover span {
159
- overflow: visible !important;
160
- text-overflow: inherit !important;
161
- white-space: inherit !important;
162
- display: flex;
163
- justify-content: center; } }
164
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:first-of-type .step-info {
165
- left: 0;
166
- justify-content: flex-start; }
167
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info {
168
- left: unset;
169
- right: 0;
170
- justify-content: flex-end; }
171
- @media (max-width: 768px) {
172
- .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info {
173
- right: 1em; } }
174
-
175
- .kima-card .kima-card-content .kima-tooltip {
176
- padding-top: 2em;
177
- width: 100%;
178
- position: relative; }
179
- .kima-card .kima-card-content .kima-tooltip > div {
180
- position: relative;
181
- height: -moz-fit-content;
182
- height: fit-content;
183
- width: 50%;
184
- display: flex;
185
- justify-content: center;
186
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
187
- .kima-card .kima-card-content .kima-tooltip > div.position-first {
188
- left: -1em !important;
189
- justify-content: flex-start; }
190
- .kima-card .kima-card-content .kima-tooltip > div.position-first .content-wrapper:before {
191
- left: 1em; }
192
- .kima-card .kima-card-content .kima-tooltip > div.position-last {
193
- left: calc(50% + 1em) !important;
194
- justify-content: flex-end; }
195
- .kima-card .kima-card-content .kima-tooltip > div.position-last .content-wrapper:before {
196
- left: calc(100% - 3em) !important; }
197
- @media (max-width: 768px) {
198
- .kima-card .kima-card-content .kima-tooltip > div {
199
- width: 100%;
200
- left: 0 !important; }
201
- .kima-card .kima-card-content .kima-tooltip > div.position-last {
202
- left: 1em !important; } }
203
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper {
204
- width: 20em;
205
- border: 1px solid #66aae5;
206
- border-radius: 1em;
207
- padding: 1.5em;
208
- position: relative; }
209
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper:before {
210
- position: absolute;
211
- content: '';
212
- width: 2em;
213
- height: 1.5em;
214
- left: calc(50% - 1em);
215
- top: -1.5em;
216
- background: #66aae5;
217
- -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
218
- clip-path: polygon(50% 0, 100% 100%, 0 100%);
219
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
220
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item {
221
- position: relative; }
222
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item:not(:first-of-type) {
223
- margin-top: 0.8em; }
224
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p {
225
- margin-left: 1.5em; }
226
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item svg {
227
- position: absolute;
228
- margin-top: 0.3em; }
229
- @media (max-width: 768px) {
230
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper {
231
- width: 100%; }
232
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper:before {
233
- opacity: 0; }
234
- .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .arrow {
235
- position: absolute;
236
- position: absolute;
237
- content: '';
238
- width: 2em;
239
- height: 1.5em;
240
- top: -1.5em;
241
- background: #66aae5;
242
- -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
243
- clip-path: polygon(50% 0, 100% 100%, 0 100%);
244
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); } }
245
-
246
- .kima-card .kima-card-content .network-select p {
247
- font-size: 1.2em;
248
- font-weight: 500;
249
- text-align: center; }
250
-
251
- .kima-card .kima-card-content .network-select .network-container {
252
- display: flex;
253
- -moz-column-gap: 1em;
254
- column-gap: 1em;
255
- align-items: center;
256
- justify-content: center;
257
- margin-top: 2em; }
258
-
259
- .kima-card .kima-card-content .single-form {
260
- padding-left: 2em; }
261
- .kima-card .kima-card-content .single-form .form-item {
262
- display: flex;
263
- align-items: center; }
264
- .kima-card .kima-card-content .single-form .form-item:not(:first-of-type) {
265
- margin-top: 2em; }
266
- .kima-card .kima-card-content .single-form .form-item > span {
267
- font-size: 1.16em;
268
- width: 10em; }
269
- .kima-card .kima-card-content .single-form .form-item .network-item {
270
- display: flex;
271
- align-items: center;
272
- width: 9em;
273
- height: 3.5em;
274
- border-radius: 0.8em;
275
- padding: 0 0.8em;
276
- cursor: pointer;
277
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
278
- .kima-card .kima-card-content .single-form .form-item .network-item svg {
279
- width: 2em;
280
- height: 2em;
281
- border-radius: 100%; }
282
- .kima-card .kima-card-content .single-form .form-item .network-item p {
283
- width: 100%;
284
- text-align: center;
285
- font-weight: bold; }
286
- .kima-card .kima-card-content .single-form .form-item .network-item:not(:first-of-type) {
287
- margin-left: 0.5em; }
288
- .kima-card .kima-card-content .single-form .form-item .network-item.light {
289
- background: #e3e3e3; }
290
- .kima-card .kima-card-content .single-form .form-item .network-item.dark {
291
- background: #4f5156; }
292
- .kima-card .kima-card-content .single-form .form-item .network-item.active {
293
- background: #66aae5; }
294
- .kima-card .kima-card-content .single-form .form-item .network-item.active p {
295
- color: white; }
296
- .kima-card .kima-card-content .single-form .form-item .network-item:hover {
297
- opacity: 0.7; }
298
- .kima-card .kima-card-content .single-form .form-item input {
299
- border: 1px solid #979797;
300
- border-radius: 0.8em;
301
- height: 3em;
302
- background: transparent;
303
- color: white;
304
- outline: none;
305
- font: unset;
306
- width: 10em;
307
- padding: 0.3em 0.5em 0.3em 1em;
308
- box-sizing: content-box; }
309
- .kima-card .kima-card-content .single-form .form-item input.kima-address-input {
310
- width: 20em; }
311
- .kima-card .kima-card-content .single-form .form-item.light input {
312
- color: black; }
313
- .kima-card .kima-card-content .single-form .coin-dropdown {
314
- position: relative;
315
- border-radius: 1em;
316
- padding: 0.5em;
317
- padding-right: 3em;
318
- height: 2.8em;
319
- display: flex;
320
- align-items: center;
321
- margin-left: 0.5em;
322
- cursor: pointer;
323
- box-sizing: content-box; }
324
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-wrapper {
325
- display: flex;
326
- align-items: center;
327
- border-radius: 1em;
328
- font-size: 1em;
329
- font-weight: 500;
330
- padding: 0.2em;
331
- padding-right: 0.5em;
332
- background: white;
333
- color: black; }
334
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-wrapper svg {
335
- width: 1.5em;
336
- height: 1.5em;
337
- margin-right: 0.5em; }
338
- .kima-card .kima-card-content .single-form .coin-dropdown.dark .coin-wrapper {
339
- background: #979797;
340
- color: white; }
341
- .kima-card .kima-card-content .single-form .coin-dropdown:before {
342
- position: absolute;
343
- content: '';
344
- width: 0.8em;
345
- height: 0.8em;
346
- right: 1.1em;
347
- top: 1.7em;
348
- border-top: 2px solid;
349
- border-right: 2px solid;
350
- border-color: white;
351
- transform: rotate(-45deg);
352
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
353
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu {
354
- box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
355
- position: absolute;
356
- z-index: 100;
357
- max-height: 10em;
358
- width: 100%;
359
- top: 100%;
360
- left: 0;
361
- overflow: hidden;
362
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
363
- padding: 0.5em 0; }
364
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item {
365
- padding: 0em 1em;
366
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
367
- display: flex;
368
- align-items: center; }
369
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item svg {
370
- width: 2.5em;
371
- height: 2.5em; }
372
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item p {
373
- width: 100%;
374
- text-align: center;
375
- margin: 0; }
376
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item:hover {
377
- background: #5aa0db80; }
378
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.light {
379
- background: white; }
380
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.dark {
381
- background: #4f5156; }
382
- .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.collapsed {
383
- max-height: 0;
384
- opacity: 0; }
385
- .kima-card .kima-card-content .single-form .coin-dropdown.light {
386
- background: #e3e3e3; }
387
- .kima-card .kima-card-content .single-form .coin-dropdown.light:before {
388
- border-color: black; }
389
- .kima-card .kima-card-content .single-form .coin-dropdown.collapsed:before {
390
- transform: rotate(135deg);
391
- top: 1.2em; }
392
- .kima-card .kima-card-content .single-form .coin-dropdown.dark {
393
- background: #4f5156; }
394
-
395
- .kima-card .kima-card-content .wallet-button {
396
- font-size: 1.16em;
397
- display: flex;
398
- align-items: center; }
399
- .kima-card .kima-card-content .wallet-button button {
400
- width: 12em;
401
- height: 3.5em; }
402
- .kima-card .kima-card-content .wallet-button .provider-error {
403
- color: red;
404
- font-size: 0.8em;
405
- margin-left: 1em; }
406
- .kima-card .kima-card-content .wallet-button.error-below {
407
- flex-direction: column; }
408
- .kima-card .kima-card-content .wallet-button.error-below .provider-error {
409
- margin-left: 0;
410
- margin-top: 1em; }
411
-
412
- .kima-card .kima-card-content .connect-wallet-step {
413
- display: flex;
414
- flex-direction: column;
415
- align-items: center;
416
- justify-content: center; }
417
- .kima-card .kima-card-content .connect-wallet-step p {
418
- font-size: 1.2em;
419
- font-weight: 500;
420
- margin-bottom: 2em; }
421
-
422
- .kima-card .kima-card-content .coin-select p {
423
- font-size: 1.2em;
424
- font-weight: 500;
425
- text-align: center; }
426
-
427
- .kima-card .kima-card-content .coin-select .coin-list-container {
428
- display: flex;
429
- -moz-column-gap: 1em;
430
- column-gap: 1em;
431
- align-items: center;
432
- justify-content: center;
433
- margin-top: 2em; }
434
-
435
- .kima-card .kima-card-content .coin-select .amount-input {
436
- display: flex;
437
- align-items: center;
438
- justify-content: center;
439
- margin-top: 2em; }
440
- .kima-card .kima-card-content .coin-select .amount-input > span {
441
- margin-right: 1.5em;
442
- font-size: 1.2em; }
443
- .kima-card .kima-card-content .coin-select .amount-input .input-wrapper {
444
- position: relative; }
445
- .kima-card .kima-card-content .coin-select .amount-input .input-wrapper input {
446
- border: 1px solid #979797;
447
- border-radius: 0.8em;
448
- height: 3em;
449
- background: transparent;
450
- color: white;
451
- outline: none;
452
- font: unset;
453
- width: 12em;
454
- padding: 0.3em 0.5em 0.3em 1em;
455
- box-sizing: content-box; }
456
- .kima-card .kima-card-content .coin-select .amount-input .input-wrapper .coin-label {
457
- position: absolute;
458
- display: flex;
459
- align-items: center;
460
- padding: 0.3em 0.5em 0.3em 0.3em;
461
- border-radius: 1em;
462
- right: 0.8em;
463
- top: 0.8em; }
464
- .kima-card .kima-card-content .coin-select .amount-input .input-wrapper .coin-label svg {
465
- width: 1.5em;
466
- height: 1.5em; }
467
- .kima-card .kima-card-content .coin-select .amount-input .input-wrapper .coin-label span {
468
- margin-left: 0.5em; }
469
- .kima-card .kima-card-content .coin-select .amount-input.light input {
470
- color: black; }
471
- .kima-card .kima-card-content .coin-select .amount-input.light .coin-label {
472
- background: #e3e3e3; }
473
- .kima-card .kima-card-content .coin-select .amount-input.dark .coin-label {
474
- background: #4f5156; }
475
-
476
- .kima-card .kima-card-content .confirm-details {
477
- padding: 0 8em;
478
- font-size: 1.2em; }
479
- .kima-card .kima-card-content .confirm-details > p {
480
- text-align: center; }
481
- .kima-card .kima-card-content .confirm-details .detail-item {
482
- padding: 1em 2em;
483
- display: flex;
484
- align-items: center;
485
- border-top: 1px solid #e3e3e3; }
486
- .kima-card .kima-card-content .confirm-details .detail-item p {
487
- margin: 0; }
488
- .kima-card .kima-card-content .confirm-details .detail-item .label {
489
- font-weight: bold;
490
- width: 8em; }
491
- .kima-card .kima-card-content .confirm-details .detail-item .kima-card-network-label {
492
- display: flex;
493
- padding: 0.3em 0.5em 0.3em 0.5em;
494
- border-radius: 1em;
495
- margin-left: 1em; }
496
- .kima-card .kima-card-content .confirm-details .detail-item:last-of-type {
497
- border-bottom: 1px solid #e3e3e3; }
498
- .kima-card .kima-card-content .confirm-details.light .kima-card-network-label {
499
- background: #e3e3e3; }
500
- .kima-card .kima-card-content .confirm-details.dark .kima-card-network-label {
501
- background: #4f5156; }
502
-
503
- .kima-card .kima-card-content .kima-custom-checkbox {
504
- margin-left: 2em;
505
- display: flex;
506
- align-items: center; }
507
- .kima-card .kima-card-content .kima-custom-checkbox .icon-wrapper {
508
- border: 1px solid #ffffff;
509
- height: 1em;
510
- width: 1em;
511
- border-radius: 0.2em;
512
- display: flex;
513
- justify-content: center;
514
- align-items: center;
515
- cursor: pointer; }
516
- .kima-card .kima-card-content .kima-custom-checkbox .icon-wrapper.light {
517
- border-color: #4f5156; }
518
- .kima-card .kima-card-content .kima-custom-checkbox .icon-wrapper svg {
519
- margin-top: 0.2em;
520
- margin-left: 1px; }
521
- .kima-card .kima-card-content .kima-custom-checkbox > span {
522
- margin-left: 0.5em; }
523
-
524
- .kima-card .card-item {
525
- width: 10em;
526
- height: 9em;
527
- border-radius: 1em;
528
- display: flex;
529
- flex-direction: column;
530
- justify-content: center;
531
- align-items: center;
532
- cursor: pointer;
533
- text-decoration: none;
534
- color: inherit;
535
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
536
- .kima-card .card-item svg,
537
- .kima-card .card-item img {
538
- width: 3em;
539
- height: 3em;
540
- border-radius: 100%; }
541
- .kima-card .card-item span {
542
- font-weight: bold;
543
- margin-top: 1em;
544
- text-align: center; }
545
- .kima-card .card-item.light {
546
- background: #e3e3e3; }
547
- .kima-card .card-item.dark {
548
- background: #4f5156; }
549
- .kima-card .card-item.active {
550
- background: #66aae5; }
551
- .kima-card .card-item.active span {
552
- color: white; }
553
- .kima-card .card-item:hover {
554
- opacity: 0.7; }
555
-
556
- .kima-card .kima-card-network-label {
557
- display: flex;
558
- align-items: center;
559
- -moz-column-gap: 0.5em;
560
- column-gap: 0.5em;
561
- padding-top: 1em; }
562
- .kima-card .kima-card-network-label > svg {
563
- width: 1em;
564
- height: 1em; }
565
- .kima-card .kima-card-network-label .label {
566
- display: flex;
567
- border-radius: 1em;
568
- font-size: 1em;
569
- -moz-column-gap: 0.3em;
570
- column-gap: 0.3em;
571
- align-items: center;
572
- padding: 0.2em 0.4em; }
573
- .kima-card .kima-card-network-label .label .icon-wrapper {
574
- display: flex;
575
- justify-content: center;
576
- align-items: center;
577
- width: 1.2em;
578
- height: 1.2em; }
579
- .kima-card .kima-card-network-label .label .icon-wrapper svg {
580
- width: 100%;
581
- height: 100%; }
582
- .kima-card .kima-card-network-label .warning-container {
583
- margin-left: 1em;
584
- display: flex;
585
- align-items: center;
586
- -moz-column-gap: 0.5em;
587
- column-gap: 0.5em; }
588
-
589
- .kima-card .primary-button {
590
- background: #66aae5;
591
- border-radius: 0.8em;
592
- width: 10em;
593
- height: 3em;
594
- cursor: pointer;
595
- color: white;
596
- font-size: 1em;
597
- font-weight: bold;
598
- font-family: inherit;
599
- border: none;
600
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
601
- display: flex;
602
- align-items: center;
603
- justify-content: center; }
604
- .kima-card .primary-button:hover {
605
- opacity: 0.7; }
606
- .kima-card .primary-button .loading-indicator {
607
- margin-right: 0.5em; }
608
- .kima-card .primary-button .loading-indicator svg {
609
- width: 1.5em;
610
- height: 1.5em;
611
- margin-top: 0.3em; }
612
-
613
- .kima-card .secondary-button {
614
- border-radius: 0.8em;
615
- width: 10em;
616
- height: 3em;
617
- cursor: pointer;
618
- font-size: 1em;
619
- font-weight: bold;
620
- font-family: inherit;
621
- border: none;
622
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
623
- .kima-card .secondary-button.dark {
624
- color: white;
625
- background: #4f5156; }
626
- .kima-card .secondary-button.light {
627
- color: black;
628
- background: #e3e3e3; }
629
- .kima-card .secondary-button:hover {
630
- opacity: 0.7; }
631
-
632
- .kima-card .dropdown-menu {
633
- box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
634
- position: absolute;
635
- z-index: 100;
636
- max-height: 10em;
637
- overflow: hidden;
638
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
639
- padding: 0.5em 0; }
640
- .kima-card .dropdown-menu .menu-item {
641
- padding: 0.5em 1em;
642
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
643
- .kima-card .dropdown-menu .menu-item:hover {
644
- background: #5aa0db80; }
645
- .kima-card .dropdown-menu.light {
646
- background: white; }
647
- .kima-card .dropdown-menu.dark {
648
- background: #1b1e25; }
649
- .kima-card .dropdown-menu.closed {
650
- max-height: 0;
651
- opacity: 0;
652
- pointer-events: none; }
653
-
654
- .kima-card .modal {
655
- position: absolute;
656
- z-index: 100;
657
- width: calc(100% - 8em);
658
- height: 0;
659
- opacity: 0;
660
- padding: 2em;
661
- left: 2em;
662
- top: 2em;
663
- border: 1px solid #66aae5;
664
- box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
665
- border-radius: 1em;
666
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
667
- overflow: hidden; }
668
- .kima-card .modal.light {
669
- background: white;
670
- color: black; }
671
- .kima-card .modal.dark {
672
- background: #1b1e25;
673
- color: white; }
674
- .kima-card .modal.open {
675
- height: calc(100% - 8em);
676
- opacity: 1; }
677
- .kima-card .modal-content {
678
- width: 100%;
679
- height: calc(100% - 8em);
680
- display: flex;
681
- align-items: center;
682
- justify-content: center; }
683
- .kima-card .modal-content .wallet-select {
684
- width: 100%;
685
- position: relative; }
686
- .kima-card .modal-content .wallet-select .scroll-button {
687
- position: absolute;
688
- width: 100%;
689
- bottom: 8em; }
690
- .kima-card .modal-content .wallet-select .scroll-button svg {
691
- width: 2em;
692
- height: 4em;
693
- cursor: pointer;
694
- position: absolute; }
695
- .kima-card .modal-content .wallet-select .scroll-button svg:first-of-type {
696
- left: 4em; }
697
- .kima-card .modal-content .wallet-select .scroll-button svg:last-of-type {
698
- right: 4em;
699
- transform: rotate(180deg); }
700
- .kima-card .modal-content .wallet-select p {
701
- font-size: 1.2em;
702
- font-weight: 500;
703
- text-align: center; }
704
- .kima-card .modal-content .wallet-select .slide-area {
705
- width: 40em;
706
- padding: 2em;
707
- margin: 0 auto;
708
- overflow: hidden;
709
- overflow-x: scroll;
710
- -webkit-mask-image: linear-gradient(90deg, #00000020 0%, black 5%, black 95%, #00000020 100%);
711
- mask-image: linear-gradient(90deg, #00000020 0%, black 5%, black 95%, #00000020 100%);
712
- position: relative; }
713
- .kima-card .modal-content .wallet-select .slide-area .wallet-container {
714
- display: flex;
715
- width: -moz-max-content;
716
- width: max-content;
717
- -moz-column-gap: 1em;
718
- column-gap: 1em;
719
- align-items: center;
720
- justify-content: center;
721
- margin-top: 2em; }
722
-
723
- .kima-card {
724
- border-radius: 1em;
725
- width: 100%;
726
- padding: 2em;
727
- border: 1px solid #66aae5;
728
- box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
729
- font-family: 'Poppins', sans-serif;
730
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
731
- transition-delay: 0.2s;
732
- /* Firefox */ }
733
- .kima-card.light {
734
- background: white;
735
- color: black; }
736
- .kima-card.light .kima-card-header .kima-card-network-label .label {
737
- background: #e3e3e3; }
738
- .kima-card.light .kima-card-content .kima-progressbar {
739
- background: #e3e3e3; }
740
- .kima-card.light .kima-card-content .kima-tooltip .content-wrapper {
741
- background: white; }
742
- .kima-card.dark {
743
- background: #1b1e25;
744
- color: white; }
745
- .kima-card.dark .kima-card-header .kima-card-network-label .label {
746
- background: #4f5156; }
747
- .kima-card.dark .kima-card-content .kima-progressbar {
748
- background: #4f5156; }
749
- .kima-card.dark .kima-card-content .kima-tooltip .content-wrapper {
750
- background: #0c0f17; }
751
- .kima-card.font-large {
752
- font-size: 20px;
753
- max-width: 1200px; }
754
- .kima-card.font-medium {
755
- font-size: 16px;
756
- max-width: 1000px; }
757
- .kima-card.font-small {
758
- font-size: 12px;
759
- max-width: 800px; }
760
- @media (max-width: 768px) {
761
- .kima-card {
762
- max-width: 100vh !important;
763
- font-size: 14px !important;
764
- padding: 1.5em;
765
- border-radius: 0; } }
766
- @media (max-width: 500px) {
767
- .kima-card {
768
- padding: 1em; } }
769
- .kima-card-content {
770
- width: 100%;
771
- margin: 2em 0;
772
- opacity: 1;
773
- max-height: 40em;
774
- min-height: 25em;
775
- position: relative;
776
- z-index: 10;
777
- display: flex;
778
- flex-direction: column;
779
- justify-content: center;
780
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
781
- .kima-card.transaction-card .kima-card-content {
782
- display: block;
783
- min-height: 15em;
784
- margin: 2em 0 4em; }
785
- .kima-card.minimized {
786
- max-width: 30em; }
787
- .kima-card.minimized .kima-card-content {
788
- opacity: 0;
789
- max-height: 0;
790
- min-height: 0;
791
- margin: 0;
792
- pointer-events: none; }
793
- .kima-card.minimized .kima-card-footer {
794
- opacity: 0;
795
- max-height: 0;
796
- pointer-events: none; }
797
- .kima-card input::-webkit-outer-spin-button,
798
- .kima-card input::-webkit-inner-spin-button {
799
- -webkit-appearance: none;
800
- margin: 0; }
801
- .kima-card input[type='number'] {
802
- -moz-appearance: textfield; }
803
- .kima-card .hide-scrollbar {
804
- -ms-overflow-style: none;
805
- /* IE and Edge */
806
- scrollbar-width: none;
807
- /* Firefox */ }
808
- .kima-card .hide-scrollbar::-webkit-scrollbar {
809
- display: none; }
1
+ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
2
+ .kima-card {
3
+ position: relative; }
4
+ .kima-card .kima-card-header .topbar {
5
+ display: flex;
6
+ align-items: center;
7
+ justify-content: space-between; }
8
+ @media (max-width: 768px) {
9
+ .kima-card .kima-card-header .topbar {
10
+ flex-direction: column-reverse;
11
+ align-items: flex-start; } }
12
+ .kima-card .kima-card-header .topbar .title {
13
+ display: flex;
14
+ align-items: center;
15
+ font-size: 1.2em; }
16
+ .kima-card .kima-card-header .topbar .title h3 {
17
+ margin: 0; }
18
+ .kima-card .kima-card-header .topbar .title span {
19
+ color: #5aa0db;
20
+ font-weight: bold;
21
+ margin: 0 0 0 1em; }
22
+ @media (max-width: 768px) {
23
+ .kima-card .kima-card-header .topbar .title {
24
+ flex-direction: column;
25
+ align-items: flex-start; }
26
+ .kima-card .kima-card-header .topbar .title p {
27
+ margin: 0; } }
28
+ .kima-card .kima-card-header .topbar .control-buttons {
29
+ display: flex;
30
+ align-items: center; }
31
+ @media (max-width: 768px) {
32
+ .kima-card .kima-card-header .topbar .control-buttons {
33
+ margin-left: auto; } }
34
+ .kima-card .kima-card-header .topbar .control-buttons .icon-button {
35
+ background: transparent;
36
+ border: none;
37
+ font-size: 1em;
38
+ cursor: pointer;
39
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
40
+ .kima-card .kima-card-header .topbar .control-buttons .icon-button:hover {
41
+ opacity: 0.6; }
42
+ .kima-card .kima-card-header .topbar .control-buttons .icon-button svg {
43
+ width: 1em;
44
+ height: 1em; }
45
+ .kima-card .kima-card-header .topbar .control-buttons .icon-button:first-of-type svg {
46
+ margin-top: 0.5em; }
47
+ .kima-card .kima-card-header .topbar .control-buttons a, .kima-card .kima-card-header .topbar .control-buttons .menu-button {
48
+ margin-left: auto;
49
+ margin-right: 1em;
50
+ margin-top: 0.3em;
51
+ color: #5aa0db;
52
+ text-decoration: none;
53
+ cursor: pointer; }
54
+ .kima-card .kima-card-header .topbar .control-buttons .maximize {
55
+ color: #5aa0db;
56
+ cursor: pointer; }
57
+ .kima-card .kima-card-footer {
58
+ display: flex;
59
+ align-items: center;
60
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
61
+ max-height: 3em;
62
+ padding-top: 2em;
63
+ opacity: 1;
64
+ box-sizing: content-box; }
65
+ .kima-card .kima-card-footer svg {
66
+ width: 10em;
67
+ height: 2.5em; }
68
+ .kima-card .kima-card-footer p {
69
+ font-size: 0.8em;
70
+ margin: 0 0 0 1em; }
71
+ .kima-card .kima-card-footer button {
72
+ margin-left: 1em; }
73
+ @media (max-width: 768px) {
74
+ .kima-card .kima-card-footer p {
75
+ display: none; } }
76
+
77
+ .kima-card .kima-card-content .kima-progressbar {
78
+ height: 1em;
79
+ width: 100%;
80
+ position: relative;
81
+ border-radius: 1em;
82
+ margin-bottom: 4em; }
83
+ @media (max-width: 768px) {
84
+ .kima-card .kima-card-content .kima-progressbar {
85
+ font-size: 1.5em; } }
86
+ .kima-card .kima-card-content .kima-progressbar .value {
87
+ position: absolute;
88
+ z-index: 10;
89
+ height: 100%;
90
+ width: 100%;
91
+ border-radius: 1em;
92
+ background: linear-gradient(90deg, #85d2dd 8.08%, #579dda 96.15%);
93
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
94
+ transition-duration: 1000ms; }
95
+ .kima-card .kima-card-content .kima-progressbar .step-indicators {
96
+ position: relative;
97
+ z-index: 20;
98
+ display: flex;
99
+ justify-content: space-between;
100
+ margin: 0 -0.2em;
101
+ padding-bottom: 4em; }
102
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step {
103
+ width: 1.4em;
104
+ height: 1.4em;
105
+ margin-top: -0.2em;
106
+ position: relative;
107
+ cursor: pointer; }
108
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:before {
109
+ content: '';
110
+ border-radius: 100%;
111
+ position: absolute;
112
+ left: 0.3em;
113
+ top: 0.3em;
114
+ width: 0.8em;
115
+ height: 0.8em;
116
+ background: white;
117
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15); }
118
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active:before {
119
+ width: 1em;
120
+ height: 1em;
121
+ left: 0;
122
+ top: 0;
123
+ background: #5aa0db;
124
+ border: 0.2em solid white; }
125
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info {
126
+ position: absolute;
127
+ width: 10em;
128
+ left: -4em;
129
+ top: 2em;
130
+ display: flex;
131
+ justify-content: center;
132
+ align-items: center;
133
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
134
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info > svg {
135
+ width: 1em;
136
+ height: 1em; }
137
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
138
+ text-align: center;
139
+ margin-left: 0.5em; }
140
+ @media (max-width: 768px) {
141
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info {
142
+ width: 3em;
143
+ left: -0.5em;
144
+ flex-direction: column;
145
+ position: relative;
146
+ margin-left: -0.3em; }
147
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
148
+ font-size: 0.66em;
149
+ text-overflow: ellipsis;
150
+ overflow: hidden;
151
+ white-space: nowrap;
152
+ margin-left: 0;
153
+ margin-top: 1em;
154
+ width: 100%; }
155
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info svg {
156
+ position: absolute;
157
+ top: 0; }
158
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info:hover {
159
+ align-items: center; }
160
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info:hover span {
161
+ overflow: visible !important;
162
+ text-overflow: inherit !important;
163
+ white-space: inherit !important;
164
+ display: flex;
165
+ justify-content: center; } }
166
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:first-of-type .step-info {
167
+ left: 0;
168
+ justify-content: flex-start; }
169
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info {
170
+ left: unset;
171
+ right: 0;
172
+ justify-content: flex-end; }
173
+ @media (max-width: 768px) {
174
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info {
175
+ right: 1em; } }
176
+
177
+ .kima-card .kima-card-content .kima-tooltip {
178
+ padding-top: 2em;
179
+ width: 100%;
180
+ position: relative; }
181
+ .kima-card .kima-card-content .kima-tooltip > div {
182
+ position: relative;
183
+ height: -moz-fit-content;
184
+ height: fit-content;
185
+ width: 50%;
186
+ display: flex;
187
+ justify-content: center;
188
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
189
+ .kima-card .kima-card-content .kima-tooltip > div.position-first {
190
+ left: -1em !important;
191
+ justify-content: flex-start; }
192
+ .kima-card .kima-card-content .kima-tooltip > div.position-first .content-wrapper:before {
193
+ left: 1em; }
194
+ .kima-card .kima-card-content .kima-tooltip > div.position-last {
195
+ left: calc(50% + 1em) !important;
196
+ justify-content: flex-end; }
197
+ .kima-card .kima-card-content .kima-tooltip > div.position-last .content-wrapper:before {
198
+ left: calc(100% - 3em) !important; }
199
+ @media (max-width: 768px) {
200
+ .kima-card .kima-card-content .kima-tooltip > div {
201
+ width: 100%;
202
+ left: 0 !important; }
203
+ .kima-card .kima-card-content .kima-tooltip > div.position-last {
204
+ left: 1em !important; } }
205
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper {
206
+ width: 22em;
207
+ border: 1px solid #66aae5;
208
+ border-radius: 1em;
209
+ padding: 1.5em;
210
+ position: relative; }
211
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper:before {
212
+ position: absolute;
213
+ content: '';
214
+ width: 2em;
215
+ height: 1.5em;
216
+ left: calc(50% - 1em);
217
+ top: -1.5em;
218
+ background: #66aae5;
219
+ -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
220
+ clip-path: polygon(50% 0, 100% 100%, 0 100%);
221
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
222
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item {
223
+ position: relative; }
224
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item:not(:first-of-type) {
225
+ margin-top: 0.8em; }
226
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p {
227
+ margin-left: 1.5em; }
228
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p a {
229
+ margin-left: 0.5em; }
230
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn {
231
+ display: inline;
232
+ cursor: pointer;
233
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
234
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn:hover {
235
+ opacity: 0.7; }
236
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn svg {
237
+ width: 1em;
238
+ height: 1em;
239
+ margin-left: 0.5em; }
240
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item svg {
241
+ position: absolute;
242
+ margin-top: 0.3em;
243
+ width: 1em;
244
+ height: 1em; }
245
+ @media (max-width: 768px) {
246
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper {
247
+ width: 100%; }
248
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper:before {
249
+ opacity: 0; }
250
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .arrow {
251
+ position: absolute;
252
+ position: absolute;
253
+ content: '';
254
+ width: 2em;
255
+ height: 1.5em;
256
+ top: -1.5em;
257
+ background: #66aae5;
258
+ -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
259
+ clip-path: polygon(50% 0, 100% 100%, 0 100%);
260
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); } }
261
+
262
+ .kima-card .kima-card-content .network-select {
263
+ position: relative; }
264
+ .kima-card .kima-card-content .network-select p {
265
+ font-size: 1.2em;
266
+ font-weight: 500;
267
+ text-align: center; }
268
+ .kima-card .kima-card-content .network-select .network-container {
269
+ display: flex;
270
+ -moz-column-gap: 1em;
271
+ column-gap: 1em;
272
+ align-items: center;
273
+ justify-content: center;
274
+ margin-top: 2em;
275
+ width: -moz-max-content;
276
+ width: max-content;
277
+ margin: 0 auto; }
278
+
279
+ .kima-card .kima-card-content .single-form {
280
+ padding-left: 5em; }
281
+ .kima-card .kima-card-content .single-form .form-item {
282
+ display: flex;
283
+ align-items: center; }
284
+ .kima-card .kima-card-content .single-form .form-item:not(:first-of-type) {
285
+ margin-top: 2em; }
286
+ .kima-card .kima-card-content .single-form .form-item > span {
287
+ font-size: 1.16em;
288
+ width: 10em; }
289
+ .kima-card .kima-card-content .single-form .form-item .network-item {
290
+ display: flex;
291
+ align-items: center;
292
+ width: 9em;
293
+ height: 3.5em;
294
+ border-radius: 0.8em;
295
+ padding: 0 0.8em;
296
+ cursor: pointer;
297
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
298
+ .kima-card .kima-card-content .single-form .form-item .network-item svg {
299
+ width: 2em;
300
+ height: 2em;
301
+ border-radius: 100%; }
302
+ .kima-card .kima-card-content .single-form .form-item .network-item p {
303
+ width: 100%;
304
+ text-align: center;
305
+ font-weight: bold; }
306
+ .kima-card .kima-card-content .single-form .form-item .network-item:not(:first-of-type) {
307
+ margin-left: 0.5em; }
308
+ .kima-card .kima-card-content .single-form .form-item .network-item.light {
309
+ background: #e3e3e3; }
310
+ .kima-card .kima-card-content .single-form .form-item .network-item.dark {
311
+ background: #4f5156; }
312
+ .kima-card .kima-card-content .single-form .form-item .network-item.active {
313
+ background: #66aae5; }
314
+ .kima-card .kima-card-content .single-form .form-item .network-item.active p {
315
+ color: white; }
316
+ .kima-card .kima-card-content .single-form .form-item .network-item:hover {
317
+ opacity: 0.7; }
318
+ .kima-card .kima-card-content .single-form .form-item .amount-label {
319
+ display: flex;
320
+ align-items: center;
321
+ background-color: #e3e3e3;
322
+ padding: 1em;
323
+ border-radius: 1em; }
324
+ .kima-card .kima-card-content .single-form .form-item .amount-label.dark {
325
+ background-color: #4f5156; }
326
+ .kima-card .kima-card-content .single-form .form-item .amount-label.dark .coin-wrapper {
327
+ background: #979797;
328
+ color: white; }
329
+ .kima-card .kima-card-content .single-form .form-item .amount-label span {
330
+ font-size: 1.1em;
331
+ font-weight: 500; }
332
+ .kima-card .kima-card-content .single-form .form-item .amount-label .coin-wrapper {
333
+ display: flex;
334
+ align-items: center;
335
+ border-radius: 1em;
336
+ font-size: 1em;
337
+ font-weight: 500;
338
+ padding: 0.2em;
339
+ padding-right: 0.5em;
340
+ background: white;
341
+ color: black;
342
+ margin-left: 1em; }
343
+ .kima-card .kima-card-content .single-form .form-item .amount-label .coin-wrapper svg {
344
+ width: 1.5em;
345
+ height: 1.5em;
346
+ margin-right: 0.5em; }
347
+ .kima-card .kima-card-content .single-form .form-item input {
348
+ border: 1px solid #979797;
349
+ border-radius: 0.8em;
350
+ height: 3em;
351
+ background: transparent;
352
+ color: white;
353
+ outline: none;
354
+ font: unset;
355
+ width: 10em;
356
+ padding: 0.3em 0.5em 0.3em 1em;
357
+ box-sizing: content-box; }
358
+ .kima-card .kima-card-content .single-form .form-item input.kima-address-input {
359
+ width: 20em; }
360
+ .kima-card .kima-card-content .single-form .form-item.light input {
361
+ color: black; }
362
+ .kima-card .kima-card-content .single-form .coin-dropdown {
363
+ position: relative;
364
+ border-radius: 1em;
365
+ padding: 0.5em;
366
+ height: 2.8em;
367
+ display: flex;
368
+ align-items: center;
369
+ margin-left: 0.5em;
370
+ cursor: pointer;
371
+ box-sizing: content-box; }
372
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-wrapper {
373
+ display: flex;
374
+ align-items: center;
375
+ border-radius: 1em;
376
+ font-size: 1em;
377
+ font-weight: 500;
378
+ padding: 0.2em;
379
+ padding-right: 0.5em;
380
+ background: white;
381
+ color: black; }
382
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-wrapper svg {
383
+ width: 1.5em;
384
+ height: 1.5em;
385
+ margin-right: 0.5em; }
386
+ .kima-card .kima-card-content .single-form .coin-dropdown.dark .coin-wrapper {
387
+ background: #979797;
388
+ color: white; }
389
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu {
390
+ box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
391
+ position: absolute;
392
+ z-index: 100;
393
+ max-height: 10em;
394
+ width: 100%;
395
+ top: 100%;
396
+ left: 0;
397
+ overflow: hidden;
398
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
399
+ padding: 0.5em 0; }
400
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item {
401
+ padding: 0em 1em;
402
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
403
+ display: flex;
404
+ align-items: center; }
405
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item svg {
406
+ width: 2.5em;
407
+ height: 2.5em; }
408
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item p {
409
+ width: 100%;
410
+ text-align: center;
411
+ margin: 0; }
412
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item:hover {
413
+ background: #5aa0db80; }
414
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.light {
415
+ background: white; }
416
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.dark {
417
+ background: #4f5156; }
418
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.collapsed {
419
+ max-height: 0;
420
+ opacity: 0; }
421
+ .kima-card .kima-card-content .single-form .coin-dropdown.light {
422
+ background: #e3e3e3; }
423
+ .kima-card .kima-card-content .single-form .coin-dropdown.light:before {
424
+ border-color: black; }
425
+ .kima-card .kima-card-content .single-form .coin-dropdown.collapsed:before {
426
+ transform: rotate(135deg);
427
+ top: 1.2em; }
428
+ .kima-card .kima-card-content .single-form .coin-dropdown.dark {
429
+ background: #4f5156; }
430
+ .kima-card .kima-card-content .single-form .network-dropdown {
431
+ position: relative;
432
+ border-radius: 1em;
433
+ padding-left: 1em;
434
+ padding-right: 3em;
435
+ height: 4em;
436
+ display: flex;
437
+ align-items: center;
438
+ cursor: pointer;
439
+ box-sizing: content-box; }
440
+ .kima-card .kima-card-content .single-form .network-dropdown .network-wrapper {
441
+ display: flex;
442
+ align-items: center;
443
+ border-radius: 1em;
444
+ font-size: 1.2em;
445
+ font-weight: 500;
446
+ padding: 0.2em;
447
+ padding-right: 0.5em;
448
+ color: black; }
449
+ .kima-card .kima-card-content .single-form .network-dropdown .network-wrapper svg {
450
+ width: 1.8em;
451
+ height: 1.8em;
452
+ margin-right: 0.5em; }
453
+ .kima-card .kima-card-content .single-form .network-dropdown.dark .network-wrapper {
454
+ color: white; }
455
+ .kima-card .kima-card-content .single-form .network-dropdown:before {
456
+ position: absolute;
457
+ content: '';
458
+ width: 0.8em;
459
+ height: 0.8em;
460
+ right: 1.1em;
461
+ top: 1.7em;
462
+ border-top: 2px solid;
463
+ border-right: 2px solid;
464
+ border-color: white;
465
+ transform: rotate(-45deg);
466
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
467
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu {
468
+ box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
469
+ position: absolute;
470
+ z-index: 100;
471
+ max-height: 12em;
472
+ width: 100%;
473
+ top: 100%;
474
+ left: 0;
475
+ padding: 0.5em 0;
476
+ overflow-x: clip;
477
+ overflow-y: scroll;
478
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
479
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item {
480
+ padding: 0.5em 1em;
481
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
482
+ display: flex;
483
+ align-items: center; }
484
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item svg {
485
+ width: 2em;
486
+ height: 2em; }
487
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item p {
488
+ width: 100%;
489
+ text-align: center;
490
+ margin: 0;
491
+ font-size: 1.2em; }
492
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item:hover {
493
+ background: #5aa0db80; }
494
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu.light {
495
+ background: white; }
496
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu.dark {
497
+ background: #4f5156; }
498
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu.collapsed {
499
+ max-height: 0;
500
+ opacity: 0; }
501
+ .kima-card .kima-card-content .single-form .network-dropdown.light {
502
+ background: #e3e3e3; }
503
+ .kima-card .kima-card-content .single-form .network-dropdown.light:before {
504
+ border-color: black; }
505
+ .kima-card .kima-card-content .single-form .network-dropdown.collapsed:before {
506
+ transform: rotate(135deg);
507
+ top: 1.2em; }
508
+ .kima-card .kima-card-content .single-form .network-dropdown.dark {
509
+ background: #4f5156; }
510
+
511
+ .kima-card .kima-card-content .wallet-button {
512
+ font-size: 1.16em;
513
+ display: flex;
514
+ align-items: center; }
515
+ .kima-card .kima-card-content .wallet-button button {
516
+ width: 12em;
517
+ height: 3.5em; }
518
+ .kima-card .kima-card-content .wallet-button .provider-error {
519
+ color: red;
520
+ font-size: 0.8em;
521
+ margin-left: 1em; }
522
+ .kima-card .kima-card-content .wallet-button.error-below {
523
+ flex-direction: column; }
524
+ .kima-card .kima-card-content .wallet-button.error-below .provider-error {
525
+ margin-left: 0;
526
+ margin-top: 1em; }
527
+
528
+ .kima-card .kima-card-content .connect-wallet-step {
529
+ display: flex;
530
+ flex-direction: column;
531
+ align-items: center;
532
+ justify-content: center; }
533
+ .kima-card .kima-card-content .connect-wallet-step p {
534
+ font-size: 1.2em;
535
+ font-weight: 500;
536
+ margin-bottom: 2em; }
537
+
538
+ .kima-card .kima-card-content .coin-select p {
539
+ font-size: 1.2em;
540
+ font-weight: 500;
541
+ text-align: center; }
542
+
543
+ .kima-card .kima-card-content .coin-select .coin-list-container {
544
+ display: flex;
545
+ -moz-column-gap: 1em;
546
+ column-gap: 1em;
547
+ align-items: center;
548
+ justify-content: center;
549
+ margin-top: 2em; }
550
+
551
+ .kima-card .kima-card-content .coin-select .amount-input,
552
+ .kima-card .kima-card-content .coin-select .address-input {
553
+ display: flex;
554
+ align-items: center;
555
+ justify-content: center;
556
+ margin-top: 2em; }
557
+ .kima-card .kima-card-content .coin-select .amount-input > span,
558
+ .kima-card .kima-card-content .coin-select .address-input > span {
559
+ margin-right: 1.5em;
560
+ font-size: 1.2em; }
561
+ .kima-card .kima-card-content .coin-select .amount-input .input-wrapper,
562
+ .kima-card .kima-card-content .coin-select .address-input .input-wrapper {
563
+ position: relative; }
564
+ .kima-card .kima-card-content .coin-select .amount-input .input-wrapper input,
565
+ .kima-card .kima-card-content .coin-select .address-input .input-wrapper input {
566
+ border: 1px solid #979797;
567
+ border-radius: 0.8em;
568
+ height: 3em;
569
+ background: transparent;
570
+ color: white;
571
+ outline: none;
572
+ font: unset;
573
+ width: 12em;
574
+ padding: 0.3em 0.5em 0.3em 1em;
575
+ box-sizing: content-box; }
576
+ .kima-card .kima-card-content .coin-select .amount-input .input-wrapper .coin-label,
577
+ .kima-card .kima-card-content .coin-select .address-input .input-wrapper .coin-label {
578
+ position: absolute;
579
+ display: flex;
580
+ align-items: center;
581
+ padding: 0.3em 0.5em 0.3em 0.3em;
582
+ border-radius: 1em;
583
+ right: 0.8em;
584
+ top: 0.8em; }
585
+ .kima-card .kima-card-content .coin-select .amount-input .input-wrapper .coin-label svg,
586
+ .kima-card .kima-card-content .coin-select .address-input .input-wrapper .coin-label svg {
587
+ width: 1.5em;
588
+ height: 1.5em; }
589
+ .kima-card .kima-card-content .coin-select .amount-input .input-wrapper .coin-label span,
590
+ .kima-card .kima-card-content .coin-select .address-input .input-wrapper .coin-label span {
591
+ margin-left: 0.5em; }
592
+ .kima-card .kima-card-content .coin-select .amount-input > input,
593
+ .kima-card .kima-card-content .coin-select .address-input > input {
594
+ border: 1px solid #979797;
595
+ border-radius: 0.8em;
596
+ height: 3em;
597
+ background: transparent;
598
+ color: white;
599
+ outline: none;
600
+ font: unset;
601
+ width: 10em;
602
+ padding: 0.3em 0.5em 0.3em 1em;
603
+ box-sizing: content-box; }
604
+ .kima-card .kima-card-content .coin-select .amount-input > input.kima-address-input,
605
+ .kima-card .kima-card-content .coin-select .address-input > input.kima-address-input {
606
+ width: 20em; }
607
+ .kima-card .kima-card-content .coin-select .amount-input.light input,
608
+ .kima-card .kima-card-content .coin-select .address-input.light input {
609
+ color: black; }
610
+ .kima-card .kima-card-content .coin-select .amount-input.light .coin-label,
611
+ .kima-card .kima-card-content .coin-select .address-input.light .coin-label {
612
+ background: #e3e3e3; }
613
+ .kima-card .kima-card-content .coin-select .amount-input.dark .coin-label,
614
+ .kima-card .kima-card-content .coin-select .address-input.dark .coin-label {
615
+ background: #4f5156; }
616
+
617
+ .kima-card .kima-card-content .confirm-details {
618
+ padding: 0 8em;
619
+ font-size: 1.2em; }
620
+ .kima-card .kima-card-content .confirm-details > p {
621
+ text-align: center; }
622
+ .kima-card .kima-card-content .confirm-details .detail-item {
623
+ padding: 1em 2em;
624
+ display: flex;
625
+ align-items: center;
626
+ border-top: 1px solid #e3e3e3; }
627
+ .kima-card .kima-card-content .confirm-details .detail-item p {
628
+ margin: 0; }
629
+ .kima-card .kima-card-content .confirm-details .detail-item .label {
630
+ font-weight: bold;
631
+ width: 10em; }
632
+ .kima-card .kima-card-content .confirm-details .detail-item .kima-card-network-label {
633
+ display: flex;
634
+ padding: 0.3em 0.5em 0.3em 0.5em;
635
+ border-radius: 1em;
636
+ margin-left: 1em; }
637
+ .kima-card .kima-card-content .confirm-details .detail-item:last-of-type {
638
+ border-bottom: 1px solid #e3e3e3; }
639
+ .kima-card .kima-card-content .confirm-details.light .kima-card-network-label {
640
+ background: #e3e3e3; }
641
+ .kima-card .kima-card-content .confirm-details.dark .kima-card-network-label {
642
+ background: #4f5156; }
643
+
644
+ .kima-card .kima-card-content .kima-custom-checkbox {
645
+ margin-left: 2em;
646
+ display: flex;
647
+ align-items: center; }
648
+ .kima-card .kima-card-content .kima-custom-checkbox .icon-wrapper {
649
+ border: 1px solid #ffffff;
650
+ height: 1em;
651
+ width: 1em;
652
+ border-radius: 0.2em;
653
+ display: flex;
654
+ justify-content: center;
655
+ align-items: center;
656
+ cursor: pointer; }
657
+ .kima-card .kima-card-content .kima-custom-checkbox .icon-wrapper.light {
658
+ border-color: #4f5156; }
659
+ .kima-card .kima-card-content .kima-custom-checkbox .icon-wrapper svg {
660
+ margin-top: 0.2em;
661
+ margin-left: 1px; }
662
+ .kima-card .kima-card-content .kima-custom-checkbox > span {
663
+ margin-left: 0.5em; }
664
+
665
+ .kima-card .kima-card-content .kima-stepbox {
666
+ display: flex;
667
+ justify-content: center; }
668
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper {
669
+ display: flex;
670
+ flex-direction: column;
671
+ border: 1px solid #66aae5;
672
+ border-radius: 1em;
673
+ padding: 1.5em 2em; }
674
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item {
675
+ display: flex;
676
+ align-items: center;
677
+ margin: 0.3em 0; }
678
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item {
679
+ position: relative; }
680
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:first-of-type {
681
+ width: 11em; }
682
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:first-of-type p {
683
+ margin: 0 0 0 1.5em; }
684
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:first-of-type svg {
685
+ position: absolute;
686
+ margin-top: 0.3em;
687
+ width: 1em;
688
+ height: 1em; }
689
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p {
690
+ margin: 0; }
691
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p a {
692
+ margin-left: 0.5em; }
693
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p .copy-btn {
694
+ display: inline;
695
+ cursor: pointer;
696
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
697
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p .copy-btn:hover {
698
+ opacity: 0.7; }
699
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p .copy-btn svg {
700
+ width: 1em;
701
+ height: 1em;
702
+ margin-left: 0.5em; }
703
+
704
+ .kima-card .card-item {
705
+ width: 10em;
706
+ height: 9em;
707
+ border-radius: 1em;
708
+ display: flex;
709
+ flex-direction: column;
710
+ justify-content: center;
711
+ align-items: center;
712
+ cursor: pointer;
713
+ text-decoration: none;
714
+ color: inherit;
715
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
716
+ .kima-card .card-item svg,
717
+ .kima-card .card-item img {
718
+ width: 3em;
719
+ height: 3em;
720
+ border-radius: 100%; }
721
+ .kima-card .card-item span {
722
+ font-weight: bold;
723
+ margin-top: 1em;
724
+ text-align: center; }
725
+ .kima-card .card-item.light {
726
+ background: #e3e3e3; }
727
+ .kima-card .card-item.dark {
728
+ background: #4f5156; }
729
+ .kima-card .card-item.active {
730
+ background: #66aae5; }
731
+ .kima-card .card-item.active span {
732
+ color: white; }
733
+ .kima-card .card-item:hover {
734
+ opacity: 0.7; }
735
+
736
+ .kima-card .kima-card-network-label {
737
+ display: flex;
738
+ align-items: center;
739
+ -moz-column-gap: 0.5em;
740
+ column-gap: 0.5em;
741
+ padding-top: 1em; }
742
+ .kima-card .kima-card-network-label > svg {
743
+ width: 1em;
744
+ height: 1em; }
745
+ .kima-card .kima-card-network-label .label {
746
+ display: flex;
747
+ border-radius: 1em;
748
+ font-size: 1em;
749
+ -moz-column-gap: 0.3em;
750
+ column-gap: 0.3em;
751
+ align-items: center;
752
+ padding: 0.2em 0.4em; }
753
+ .kima-card .kima-card-network-label .label .icon-wrapper {
754
+ display: flex;
755
+ justify-content: center;
756
+ align-items: center;
757
+ width: 1.2em;
758
+ height: 1.2em; }
759
+ .kima-card .kima-card-network-label .label .icon-wrapper svg {
760
+ width: 100%;
761
+ height: 100%; }
762
+ .kima-card .kima-card-network-label .warning-container {
763
+ margin-left: 1em;
764
+ display: flex;
765
+ align-items: center;
766
+ -moz-column-gap: 0.5em;
767
+ column-gap: 0.5em; }
768
+
769
+ .kima-card .primary-button {
770
+ background: #66aae5;
771
+ border-radius: 0.8em;
772
+ width: 10em;
773
+ height: 3em;
774
+ cursor: pointer;
775
+ color: white;
776
+ font-size: 1em;
777
+ font-weight: bold;
778
+ font-family: inherit;
779
+ border: none;
780
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
781
+ display: flex;
782
+ align-items: center;
783
+ justify-content: center; }
784
+ .kima-card .primary-button:hover {
785
+ opacity: 0.7; }
786
+ .kima-card .primary-button .loading-indicator {
787
+ margin-right: 0.5em; }
788
+ .kima-card .primary-button .loading-indicator svg {
789
+ width: 1.5em;
790
+ height: 1.5em;
791
+ margin-top: 0.3em; }
792
+
793
+ .kima-card .secondary-button {
794
+ border-radius: 0.8em;
795
+ width: 10em;
796
+ height: 3em;
797
+ cursor: pointer;
798
+ font-size: 1em;
799
+ font-weight: bold;
800
+ font-family: inherit;
801
+ border: none;
802
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
803
+ .kima-card .secondary-button.dark {
804
+ color: white;
805
+ background: #4f5156; }
806
+ .kima-card .secondary-button.light {
807
+ color: black;
808
+ background: #e3e3e3; }
809
+ .kima-card .secondary-button:hover {
810
+ opacity: 0.7; }
811
+
812
+ .kima-card .dropdown-menu {
813
+ box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
814
+ position: absolute;
815
+ z-index: 100;
816
+ padding: 0.5em 0;
817
+ max-height: 10em;
818
+ width: -moz-max-content;
819
+ width: max-content;
820
+ overflow: hidden;
821
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
822
+ .kima-card .dropdown-menu .menu-item {
823
+ padding: 0.5em 1em;
824
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
825
+ .kima-card .dropdown-menu .menu-item:hover {
826
+ background: #5aa0db80; }
827
+ .kima-card .dropdown-menu.light {
828
+ background: white; }
829
+ .kima-card .dropdown-menu.dark {
830
+ background: #1b1e25; }
831
+ .kima-card .dropdown-menu.closed {
832
+ max-height: 0;
833
+ opacity: 0;
834
+ pointer-events: none; }
835
+
836
+ .kima-card .kima-modal {
837
+ position: absolute;
838
+ z-index: 100;
839
+ width: 100%;
840
+ height: 0;
841
+ opacity: 0;
842
+ left: 0;
843
+ top: 0;
844
+ overflow: hidden;
845
+ border-radius: 1em;
846
+ display: flex;
847
+ align-items: center;
848
+ justify-content: center;
849
+ pointer-events: none; }
850
+ .kima-card .kima-modal .modal-content-container {
851
+ position: relative;
852
+ width: calc(100% - 8em);
853
+ height: calc(100% - 8em);
854
+ padding: 2em;
855
+ border-radius: 1em;
856
+ border: 1px solid #66aae5;
857
+ box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
858
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
859
+ overflow: hidden;
860
+ box-sizing: content-box; }
861
+ .kima-card .kima-modal .modal-overlay {
862
+ cursor: pointer;
863
+ position: absolute;
864
+ top: 0;
865
+ left: 0;
866
+ width: 100%;
867
+ height: 100%;
868
+ background: #b3b3b354;
869
+ -webkit-backdrop-filter: blur(2px);
870
+ backdrop-filter: blur(2px); }
871
+ .kima-card .kima-modal.light .modal-content-container {
872
+ background: white;
873
+ color: black; }
874
+ .kima-card .kima-modal.dark .modal-content-container {
875
+ background: #1b1e25;
876
+ color: white; }
877
+ .kima-card .kima-modal.open {
878
+ pointer-events: auto;
879
+ height: 100%;
880
+ opacity: 1; }
881
+ .kima-card .kima-modal .modal-content {
882
+ width: 100%;
883
+ height: calc(100% - 10em);
884
+ display: flex;
885
+ align-items: center;
886
+ justify-content: center; }
887
+ .kima-card .kima-modal .modal-content .wallet-select {
888
+ width: 100%;
889
+ position: relative; }
890
+ .kima-card .kima-modal .modal-content .wallet-select p {
891
+ font-size: 1.2em;
892
+ font-weight: 500;
893
+ text-align: center; }
894
+ .kima-card .kima-modal .modal-content .wallet-select .slide-area .wallet-container {
895
+ display: flex;
896
+ width: -moz-max-content;
897
+ width: max-content;
898
+ -moz-column-gap: 1em;
899
+ column-gap: 1em;
900
+ align-items: center;
901
+ justify-content: center;
902
+ margin-top: 2em; }
903
+ .kima-card .kima-modal.help-popup .modal-content-container {
904
+ width: 30em;
905
+ height: 20em; }
906
+ .kima-card .kima-modal.help-popup .modal-content {
907
+ height: calc(100% - 4em); }
908
+ .kima-card .kima-modal.hash-popup .modal-content-container {
909
+ width: 20em;
910
+ height: 12em; }
911
+ .kima-card .kima-modal.hash-popup .modal-content {
912
+ height: calc(100% - 2em); }
913
+ .kima-card .kima-modal.hash-popup .modal-content .hash-container {
914
+ width: 100%;
915
+ padding: 0 2em; }
916
+ .kima-card .kima-modal.hash-popup .modal-content .hash-container .hash-item {
917
+ display: flex;
918
+ align-items: center;
919
+ -moz-column-gap: 1em;
920
+ column-gap: 1em; }
921
+ .kima-card .kima-modal.hash-popup .modal-content .hash-container .hash-item span {
922
+ width: 5em; }
923
+
924
+ .kima-card {
925
+ border-radius: 1em;
926
+ width: 100%;
927
+ padding: 2em;
928
+ border: 1px solid #66aae5;
929
+ box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
930
+ font-family: 'Poppins', sans-serif;
931
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
932
+ transition-delay: 0.2s;
933
+ /* Firefox */ }
934
+ .kima-card.light {
935
+ background: white;
936
+ color: black; }
937
+ .kima-card.light .kima-card-header .kima-card-network-label .label {
938
+ background: #e3e3e3; }
939
+ .kima-card.light .kima-card-content .kima-progressbar {
940
+ background: #e3e3e3; }
941
+ .kima-card.light .kima-card-content .kima-tooltip .content-wrapper {
942
+ background: white; }
943
+ .kima-card.dark {
944
+ background: #1b1e25;
945
+ color: white; }
946
+ .kima-card.dark .kima-card-header .kima-card-network-label .label {
947
+ background: #4f5156; }
948
+ .kima-card.dark .kima-card-content .kima-progressbar {
949
+ background: #4f5156; }
950
+ .kima-card.dark .kima-card-content .kima-tooltip .content-wrapper {
951
+ background: #0c0f17; }
952
+ .kima-card.font-large {
953
+ font-size: 18px;
954
+ max-width: 1100px; }
955
+ .kima-card.font-medium {
956
+ font-size: 14px;
957
+ max-width: 900px; }
958
+ .kima-card.font-small {
959
+ font-size: 10px;
960
+ max-width: 700px; }
961
+ @media (max-width: 768px) {
962
+ .kima-card {
963
+ max-width: 100vh !important;
964
+ font-size: 14px !important;
965
+ padding: 1.5em;
966
+ border-radius: 0; } }
967
+ @media (max-width: 500px) {
968
+ .kima-card {
969
+ padding: 1em; } }
970
+ .kima-card-content {
971
+ width: 100%;
972
+ margin: 2em 0;
973
+ opacity: 1;
974
+ max-height: 40em;
975
+ min-height: 25em;
976
+ position: relative;
977
+ z-index: 10;
978
+ display: flex;
979
+ flex-direction: column;
980
+ justify-content: center;
981
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
982
+ .kima-card.transaction-card .kima-card-content {
983
+ display: block;
984
+ min-height: 17em;
985
+ margin: 2em 0 2em; }
986
+ .kima-card.minimized {
987
+ max-width: 30em; }
988
+ .kima-card.minimized .kima-card-content {
989
+ opacity: 0;
990
+ max-height: 0;
991
+ min-height: 0;
992
+ margin: 0;
993
+ pointer-events: none; }
994
+ .kima-card.minimized .kima-card-footer {
995
+ opacity: 0;
996
+ max-height: 0;
997
+ pointer-events: none; }
998
+ .kima-card input::-webkit-outer-spin-button,
999
+ .kima-card input::-webkit-inner-spin-button {
1000
+ -webkit-appearance: none;
1001
+ margin: 0; }
1002
+ .kima-card input[type='number'] {
1003
+ -moz-appearance: textfield; }
1004
+ .kima-card .hide-scrollbar {
1005
+ -ms-overflow-style: none;
1006
+ /* IE and Edge */
1007
+ scrollbar-width: none;
1008
+ /* Firefox */ }
1009
+ .kima-card .hide-scrollbar::-webkit-scrollbar {
1010
+ display: none; }
1011
+ .kima-card .custom-scrollbar::-webkit-scrollbar {
1012
+ width: 6px; }
1013
+ .kima-card .custom-scrollbar::-webkit-scrollbar-track {
1014
+ background: white;
1015
+ border-radius: 3px; }
1016
+ .kima-card .custom-scrollbar::-webkit-scrollbar-thumb {
1017
+ background: #a19f9f;
1018
+ border-radius: 3px; }
1019
+ .kima-card .slide-area {
1020
+ width: 40em;
1021
+ padding: 2em;
1022
+ margin: 0 auto;
1023
+ overflow: hidden;
1024
+ overflow-x: scroll;
1025
+ -webkit-mask-image: linear-gradient(90deg, #00000020 0%, black 5%, black 95%, #00000020 100%);
1026
+ mask-image: linear-gradient(90deg, #00000020 0%, black 5%, black 95%, #00000020 100%);
1027
+ position: relative; }
1028
+ .kima-card .scroll-button {
1029
+ position: absolute;
1030
+ width: 100%;
1031
+ bottom: 8em; }
1032
+ .kima-card .scroll-button svg {
1033
+ width: 2em;
1034
+ height: 4em;
1035
+ cursor: pointer;
1036
+ position: absolute; }
1037
+ .kima-card .scroll-button svg:first-of-type {
1038
+ left: 4em; }
1039
+ .kima-card .scroll-button svg:last-of-type {
1040
+ right: 4em;
1041
+ transform: rotate(180deg); }