@kimafinance/kima-transaction-widget 1.1.6 → 1.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -1,710 +1,878 @@
1
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
2
  .kima-card {
3
- position: relative; }
3
+ position: relative;
4
+ }
5
+ .kima-card .kima-card-header .topbar {
6
+ display: flex;
7
+ align-items: center;
8
+ justify-content: space-between;
9
+ }
10
+ @media (max-width: 768px) {
4
11
  .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; } }
12
+ flex-direction: column-reverse;
13
+ align-items: flex-start;
14
+ }
15
+ }
16
+ .kima-card .kima-card-header .topbar .title {
17
+ display: flex;
18
+ align-items: center;
19
+ font-size: 1.2em;
20
+ }
21
+ .kima-card .kima-card-header .topbar .title h3 {
22
+ margin: 0;
23
+ }
24
+ .kima-card .kima-card-header .topbar .title span {
25
+ color: #5aa0db;
26
+ font-weight: bold;
27
+ margin: 0 0 0 1em;
28
+ }
29
+ @media (max-width: 768px) {
30
+ .kima-card .kima-card-header .topbar .title {
31
+ flex-direction: column;
32
+ align-items: flex-start;
33
+ }
34
+ .kima-card .kima-card-header .topbar .title p {
35
+ margin: 0;
36
+ }
37
+ }
38
+ .kima-card .kima-card-header .topbar .control-buttons {
39
+ display: flex;
40
+ align-items: center;
41
+ }
42
+ @media (max-width: 768px) {
43
+ .kima-card .kima-card-header .topbar .control-buttons {
44
+ margin-left: auto;
45
+ }
46
+ }
47
+ .kima-card .kima-card-header .topbar .control-buttons .icon-button {
48
+ background: transparent;
49
+ border: none;
50
+ font-size: 1em;
51
+ cursor: pointer;
52
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
53
+ }
54
+ .kima-card .kima-card-header .topbar .control-buttons .icon-button:hover {
55
+ opacity: 0.6;
56
+ }
57
+ .kima-card .kima-card-header .topbar .control-buttons .icon-button svg {
58
+ width: 1em;
59
+ height: 1em;
60
+ }
61
+ .kima-card .kima-card-header .topbar .control-buttons .icon-button:first-of-type svg {
62
+ margin-top: 0.5em;
63
+ }
64
+ .kima-card .kima-card-header .topbar .control-buttons a, .kima-card .kima-card-header .topbar .control-buttons .menu-button {
65
+ margin-left: auto;
66
+ margin-right: 1em;
67
+ margin-top: 0.3em;
68
+ color: #5aa0db;
69
+ text-decoration: none;
70
+ cursor: pointer;
71
+ }
72
+ .kima-card .kima-card-header .topbar .control-buttons .maximize {
73
+ color: #5aa0db;
74
+ cursor: pointer;
75
+ }
76
+ .kima-card .kima-card-footer {
77
+ display: flex;
78
+ align-items: center;
79
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
80
+ max-height: 3em;
81
+ padding-top: 2em;
82
+ opacity: 1;
83
+ box-sizing: content-box;
84
+ }
85
+ .kima-card .kima-card-footer svg {
86
+ width: 10em;
87
+ height: 2.5em;
88
+ }
89
+ .kima-card .kima-card-footer p {
90
+ font-size: 0.8em;
91
+ margin: 0 0 0 1em;
92
+ }
93
+ .kima-card .kima-card-footer button {
94
+ margin-left: 1em;
95
+ }
96
+ @media (max-width: 768px) {
97
+ .kima-card .kima-card-footer p {
98
+ display: none;
99
+ }
100
+ }
76
101
 
77
102
  .kima-card .kima-card-content .kima-progressbar {
78
103
  height: 1em;
79
104
  width: 100%;
80
105
  position: relative;
81
106
  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 {
107
+ margin-bottom: 4em;
108
+ }
109
+ @media (max-width: 768px) {
110
+ .kima-card .kima-card-content .kima-progressbar {
111
+ font-size: 1.5em;
112
+ }
113
+ }
114
+ .kima-card .kima-card-content .kima-progressbar .value {
115
+ position: absolute;
116
+ z-index: 10;
117
+ height: 100%;
118
+ width: 100%;
119
+ border-radius: 1em;
120
+ background: linear-gradient(90deg, #85d2dd 8.08%, #579dda 96.15%);
121
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
122
+ transition-duration: 1000ms;
123
+ }
124
+ .kima-card .kima-card-content .kima-progressbar .step-indicators {
125
+ position: relative;
126
+ z-index: 20;
127
+ display: flex;
128
+ justify-content: space-between;
129
+ margin: 0 -0.2em;
130
+ padding-bottom: 4em;
131
+ }
132
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step {
133
+ width: 1.4em;
134
+ height: 1.4em;
135
+ margin-top: -0.2em;
136
+ position: relative;
137
+ cursor: pointer;
138
+ }
139
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:before {
140
+ content: "";
141
+ border-radius: 100%;
142
+ position: absolute;
143
+ left: 0.3em;
144
+ top: 0.3em;
145
+ width: 0.8em;
146
+ height: 0.8em;
147
+ background: white;
148
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
149
+ }
150
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step.active:before {
151
+ width: 1em;
152
+ height: 1em;
153
+ left: 0;
154
+ top: 0;
155
+ background: #5aa0db;
156
+ border: 0.2em solid white;
157
+ }
158
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info {
159
+ position: absolute;
160
+ width: 10em;
161
+ left: -4em;
162
+ top: 2em;
163
+ display: flex;
164
+ justify-content: center;
165
+ align-items: center;
166
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
167
+ }
168
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info > svg {
169
+ width: 1em;
170
+ height: 1em;
171
+ }
172
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
173
+ text-align: center;
174
+ margin-left: 0.5em;
175
+ }
176
+ @media (max-width: 768px) {
177
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info {
178
+ width: 3em;
179
+ left: -0.5em;
180
+ flex-direction: column;
96
181
  position: relative;
97
- z-index: 20;
182
+ margin-left: -0.3em;
183
+ }
184
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info span {
185
+ font-size: 0.66em;
186
+ text-overflow: ellipsis;
187
+ overflow: hidden;
188
+ white-space: nowrap;
189
+ margin-left: 0;
190
+ margin-top: 1em;
191
+ width: 100%;
192
+ }
193
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info svg {
194
+ position: absolute;
195
+ top: 0;
196
+ }
197
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info:hover {
198
+ align-items: center;
199
+ }
200
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step .step-info:hover span {
201
+ overflow: visible !important;
202
+ text-overflow: inherit !important;
203
+ white-space: inherit !important;
98
204
  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
-
205
+ justify-content: center;
206
+ }
207
+ }
208
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:first-of-type .step-info {
209
+ left: 0;
210
+ justify-content: flex-start;
211
+ }
212
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info {
213
+ left: unset;
214
+ right: 0;
215
+ justify-content: flex-end;
216
+ }
217
+ @media (max-width: 768px) {
218
+ .kima-card .kima-card-content .kima-progressbar .step-indicators .step:last-of-type .step-info {
219
+ right: 1em;
220
+ }
221
+ }
177
222
  .kima-card .kima-card-content .kima-tooltip {
178
223
  padding-top: 2em;
179
224
  width: 100%;
180
- position: relative; }
225
+ position: relative;
226
+ }
227
+ .kima-card .kima-card-content .kima-tooltip > div {
228
+ position: relative;
229
+ height: -moz-fit-content;
230
+ height: fit-content;
231
+ width: 50%;
232
+ display: flex;
233
+ justify-content: center;
234
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
235
+ }
236
+ .kima-card .kima-card-content .kima-tooltip > div.position-first {
237
+ left: -1em !important;
238
+ justify-content: flex-start;
239
+ }
240
+ .kima-card .kima-card-content .kima-tooltip > div.position-first .content-wrapper:before {
241
+ left: 1em;
242
+ }
243
+ .kima-card .kima-card-content .kima-tooltip > div.position-last {
244
+ left: calc(50% + 1em) !important;
245
+ justify-content: flex-end;
246
+ }
247
+ .kima-card .kima-card-content .kima-tooltip > div.position-last .content-wrapper:before {
248
+ left: calc(100% - 3em) !important;
249
+ }
250
+ @media (max-width: 768px) {
181
251
  .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
-
252
+ width: 100%;
253
+ left: 0 !important;
254
+ }
255
+ .kima-card .kima-card-content .kima-tooltip > div.position-last {
256
+ left: 1em !important;
257
+ }
258
+ }
259
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper {
260
+ width: 22em;
261
+ border: 1px solid #66aae5;
262
+ border-radius: 1em;
263
+ padding: 1.5em;
264
+ position: relative;
265
+ }
266
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper:before {
267
+ position: absolute;
268
+ content: "";
269
+ width: 2em;
270
+ height: 1.5em;
271
+ left: calc(50% - 1em);
272
+ top: -1.5em;
273
+ background: #66aae5;
274
+ -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
275
+ clip-path: polygon(50% 0, 100% 100%, 0 100%);
276
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
277
+ }
278
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item {
279
+ position: relative;
280
+ }
281
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item:not(:first-of-type) {
282
+ margin-top: 0.8em;
283
+ }
284
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p {
285
+ margin-left: 1.5em;
286
+ }
287
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p a {
288
+ margin-left: 0.5em;
289
+ }
290
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn {
291
+ display: inline;
292
+ cursor: pointer;
293
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
294
+ }
295
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn:hover {
296
+ opacity: 0.7;
297
+ }
298
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item p .copy-btn svg {
299
+ width: 1em;
300
+ height: 1em;
301
+ margin-left: 0.5em;
302
+ }
303
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .info-item svg {
304
+ position: absolute;
305
+ margin-top: 0.3em;
306
+ width: 1em;
307
+ height: 1em;
308
+ }
309
+ @media (max-width: 768px) {
310
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper {
311
+ width: 100%;
312
+ }
313
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper:before {
314
+ opacity: 0;
315
+ }
316
+ .kima-card .kima-card-content .kima-tooltip > div .content-wrapper .arrow {
317
+ position: absolute;
318
+ position: absolute;
319
+ content: "";
320
+ width: 2em;
321
+ height: 1.5em;
322
+ top: -1.5em;
323
+ background: #66aae5;
324
+ -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
325
+ clip-path: polygon(50% 0, 100% 100%, 0 100%);
326
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
327
+ }
328
+ }
262
329
  .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
-
330
+ position: relative;
331
+ }
332
+ .kima-card .kima-card-content .network-select p {
333
+ font-size: 1.2em;
334
+ font-weight: 500;
335
+ text-align: center;
336
+ }
337
+ .kima-card .kima-card-content .network-select .network-container {
338
+ display: flex;
339
+ -moz-column-gap: 1em;
340
+ column-gap: 1em;
341
+ align-items: center;
342
+ justify-content: center;
343
+ margin-top: 2em;
344
+ width: -moz-max-content;
345
+ width: max-content;
346
+ margin: 0 auto;
347
+ }
279
348
  .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
-
349
+ padding-left: 5em;
350
+ }
351
+ .kima-card .kima-card-content .single-form .form-item {
352
+ display: flex;
353
+ align-items: center;
354
+ }
355
+ .kima-card .kima-card-content .single-form .form-item:not(:first-of-type) {
356
+ margin-top: 2em;
357
+ }
358
+ .kima-card .kima-card-content .single-form .form-item > span {
359
+ font-size: 1.16em;
360
+ width: 10em;
361
+ }
362
+ .kima-card .kima-card-content .single-form .form-item .network-item {
363
+ display: flex;
364
+ align-items: center;
365
+ width: 9em;
366
+ height: 3.5em;
367
+ border-radius: 0.8em;
368
+ padding: 0 0.8em;
369
+ cursor: pointer;
370
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
371
+ }
372
+ .kima-card .kima-card-content .single-form .form-item .network-item svg {
373
+ width: 2em;
374
+ height: 2em;
375
+ border-radius: 100%;
376
+ }
377
+ .kima-card .kima-card-content .single-form .form-item .network-item p {
378
+ width: 100%;
379
+ text-align: center;
380
+ font-weight: bold;
381
+ }
382
+ .kima-card .kima-card-content .single-form .form-item .network-item:not(:first-of-type) {
383
+ margin-left: 0.5em;
384
+ }
385
+ .kima-card .kima-card-content .single-form .form-item .network-item.light {
386
+ background: #e3e3e3;
387
+ }
388
+ .kima-card .kima-card-content .single-form .form-item .network-item.dark {
389
+ background: #4f5156;
390
+ }
391
+ .kima-card .kima-card-content .single-form .form-item .network-item.active {
392
+ background: #66aae5;
393
+ }
394
+ .kima-card .kima-card-content .single-form .form-item .network-item.active p {
395
+ color: white;
396
+ }
397
+ .kima-card .kima-card-content .single-form .form-item .network-item:hover {
398
+ opacity: 0.7;
399
+ }
400
+ .kima-card .kima-card-content .single-form .form-item .amount-label {
401
+ display: flex;
402
+ align-items: center;
403
+ background-color: #e3e3e3;
404
+ padding: 1em;
405
+ border-radius: 1em;
406
+ }
407
+ .kima-card .kima-card-content .single-form .form-item .amount-label.dark {
408
+ background-color: #4f5156;
409
+ }
410
+ .kima-card .kima-card-content .single-form .form-item .amount-label.dark .coin-wrapper {
411
+ background: #979797;
412
+ color: white;
413
+ }
414
+ .kima-card .kima-card-content .single-form .form-item .amount-label span {
415
+ font-size: 1.1em;
416
+ font-weight: 500;
417
+ }
418
+ .kima-card .kima-card-content .single-form .form-item .amount-label .coin-wrapper {
419
+ display: flex;
420
+ align-items: center;
421
+ border-radius: 1em;
422
+ font-size: 1em;
423
+ font-weight: 500;
424
+ padding: 0.2em;
425
+ padding-right: 0.5em;
426
+ background: white;
427
+ color: black;
428
+ margin-left: 1em;
429
+ }
430
+ .kima-card .kima-card-content .single-form .form-item .amount-label .coin-wrapper svg {
431
+ width: 1.5em;
432
+ height: 1.5em;
433
+ margin-right: 0.5em;
434
+ }
435
+ .kima-card .kima-card-content .single-form .form-item input {
436
+ border: 1px solid #979797;
437
+ border-radius: 0.8em;
438
+ height: 3em;
439
+ background: transparent;
440
+ color: white;
441
+ outline: none;
442
+ font: unset;
443
+ width: 10em;
444
+ padding: 0.3em 0.5em 0.3em 1em;
445
+ box-sizing: content-box;
446
+ }
447
+ .kima-card .kima-card-content .single-form .form-item input.kima-address-input {
448
+ width: 20em;
449
+ }
450
+ .kima-card .kima-card-content .single-form .form-item.light input {
451
+ color: black;
452
+ }
453
+ .kima-card .kima-card-content .single-form .form-item .error {
454
+ color: red;
455
+ font-size: 0.8em;
456
+ margin-left: 1em;
457
+ }
458
+ .kima-card .kima-card-content .single-form .coin-dropdown {
459
+ position: relative;
460
+ border-radius: 1em;
461
+ padding: 0.5em;
462
+ height: 2.8em;
463
+ display: flex;
464
+ align-items: center;
465
+ margin-left: 0.5em;
466
+ cursor: pointer;
467
+ box-sizing: content-box;
468
+ }
469
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-wrapper {
470
+ display: flex;
471
+ align-items: center;
472
+ border-radius: 1em;
473
+ font-size: 1em;
474
+ font-weight: 500;
475
+ padding: 0.2em;
476
+ padding-right: 0.5em;
477
+ background: white;
478
+ color: black;
479
+ }
480
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-wrapper svg {
481
+ width: 1.5em;
482
+ height: 1.5em;
483
+ margin-right: 0.5em;
484
+ }
485
+ .kima-card .kima-card-content .single-form .coin-dropdown.dark .coin-wrapper {
486
+ background: #979797;
487
+ color: white;
488
+ }
489
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu {
490
+ box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
491
+ position: absolute;
492
+ z-index: 100;
493
+ max-height: 10em;
494
+ width: 100%;
495
+ top: 100%;
496
+ left: 0;
497
+ overflow: hidden;
498
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
499
+ padding: 0.5em 0;
500
+ }
501
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item {
502
+ padding: 0em 1em;
503
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
504
+ display: flex;
505
+ align-items: center;
506
+ }
507
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item svg {
508
+ width: 2.5em;
509
+ height: 2.5em;
510
+ }
511
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item p {
512
+ width: 100%;
513
+ text-align: center;
514
+ margin: 0;
515
+ }
516
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu .coin-item:hover {
517
+ background: rgba(90, 160, 219, 0.5019607843);
518
+ }
519
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.light {
520
+ background: white;
521
+ }
522
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.dark {
523
+ background: #4f5156;
524
+ }
525
+ .kima-card .kima-card-content .single-form .coin-dropdown .coin-menu.collapsed {
526
+ max-height: 0;
527
+ opacity: 0;
528
+ }
529
+ .kima-card .kima-card-content .single-form .coin-dropdown.light {
530
+ background: #e3e3e3;
531
+ }
532
+ .kima-card .kima-card-content .single-form .coin-dropdown.light:before {
533
+ border-color: black;
534
+ }
535
+ .kima-card .kima-card-content .single-form .coin-dropdown.collapsed:before {
536
+ transform: rotate(135deg);
537
+ top: 1.2em;
538
+ }
539
+ .kima-card .kima-card-content .single-form .coin-dropdown.dark {
540
+ background: #4f5156;
541
+ }
542
+ .kima-card .kima-card-content .single-form .network-dropdown {
543
+ position: relative;
544
+ border-radius: 1em;
545
+ padding-left: 1em;
546
+ padding-right: 3em;
547
+ height: 4em;
548
+ display: flex;
549
+ align-items: center;
550
+ cursor: pointer;
551
+ box-sizing: content-box;
552
+ }
553
+ .kima-card .kima-card-content .single-form .network-dropdown .network-wrapper {
554
+ display: flex;
555
+ align-items: center;
556
+ border-radius: 1em;
557
+ font-size: 1.2em;
558
+ font-weight: 500;
559
+ padding: 0.2em;
560
+ padding-right: 0.5em;
561
+ color: black;
562
+ }
563
+ .kima-card .kima-card-content .single-form .network-dropdown .network-wrapper svg {
564
+ width: 1.8em;
565
+ height: 1.8em;
566
+ margin-right: 0.5em;
567
+ }
568
+ .kima-card .kima-card-content .single-form .network-dropdown.dark .network-wrapper {
569
+ color: white;
570
+ }
571
+ .kima-card .kima-card-content .single-form .network-dropdown:before {
572
+ position: absolute;
573
+ content: "";
574
+ width: 0.8em;
575
+ height: 0.8em;
576
+ right: 1.1em;
577
+ top: 1.7em;
578
+ border-top: 2px solid;
579
+ border-right: 2px solid;
580
+ border-color: white;
581
+ transform: rotate(-45deg);
582
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
583
+ }
584
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu {
585
+ box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
586
+ position: absolute;
587
+ z-index: 100;
588
+ max-height: 12em;
589
+ width: 100%;
590
+ top: 100%;
591
+ left: 0;
592
+ padding: 0.5em 0;
593
+ overflow-x: clip;
594
+ overflow-y: scroll;
595
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
596
+ }
597
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item {
598
+ padding: 0.5em 1em;
599
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
600
+ display: flex;
601
+ align-items: center;
602
+ }
603
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item svg {
604
+ width: 2em;
605
+ height: 2em;
606
+ }
607
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item p {
608
+ width: 100%;
609
+ text-align: center;
610
+ margin: 0;
611
+ font-size: 1.2em;
612
+ }
613
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu-item:hover {
614
+ background: rgba(90, 160, 219, 0.5019607843);
615
+ }
616
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu.light {
617
+ background: white;
618
+ }
619
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu.dark {
620
+ background: #4f5156;
621
+ }
622
+ .kima-card .kima-card-content .single-form .network-dropdown .network-menu.collapsed {
623
+ max-height: 0;
624
+ opacity: 0;
625
+ }
626
+ .kima-card .kima-card-content .single-form .network-dropdown.light {
627
+ background: #e3e3e3;
628
+ }
629
+ .kima-card .kima-card-content .single-form .network-dropdown.light:before {
630
+ border-color: black;
631
+ }
632
+ .kima-card .kima-card-content .single-form .network-dropdown.collapsed:before {
633
+ transform: rotate(135deg);
634
+ top: 1.2em;
635
+ }
636
+ .kima-card .kima-card-content .single-form .network-dropdown.dark {
637
+ background: #4f5156;
638
+ }
511
639
  .kima-card .kima-card-content .wallet-button {
512
640
  font-size: 1.16em;
513
641
  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
-
642
+ align-items: center;
643
+ }
644
+ .kima-card .kima-card-content .wallet-button button {
645
+ width: 12em;
646
+ height: 3.5em;
647
+ }
648
+ .kima-card .kima-card-content .wallet-button .provider-error {
649
+ color: red;
650
+ font-size: 0.8em;
651
+ margin-left: 1em;
652
+ }
653
+ .kima-card .kima-card-content .wallet-button.error-below {
654
+ flex-direction: column;
655
+ }
656
+ .kima-card .kima-card-content .wallet-button.error-below .provider-error {
657
+ margin-left: 0;
658
+ margin-top: 1em;
659
+ }
528
660
  .kima-card .kima-card-content .connect-wallet-step {
529
661
  display: flex;
530
662
  flex-direction: column;
531
663
  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
-
664
+ justify-content: center;
665
+ }
666
+ .kima-card .kima-card-content .connect-wallet-step p {
667
+ font-size: 1.2em;
668
+ font-weight: 500;
669
+ margin-bottom: 2em;
670
+ }
538
671
  .kima-card .kima-card-content .coin-select p {
539
672
  font-size: 1.2em;
540
673
  font-weight: 500;
541
- text-align: center; }
542
-
674
+ text-align: center;
675
+ }
543
676
  .kima-card .kima-card-content .coin-select .coin-list-container {
544
677
  display: flex;
545
678
  -moz-column-gap: 1em;
546
679
  column-gap: 1em;
547
680
  align-items: center;
548
681
  justify-content: center;
549
- margin-top: 2em; }
550
-
682
+ margin-top: 2em;
683
+ }
551
684
  .kima-card .kima-card-content .coin-select .amount-input,
552
685
  .kima-card .kima-card-content .coin-select .address-input {
553
686
  display: flex;
554
687
  align-items: center;
555
688
  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
-
689
+ margin-top: 2em;
690
+ }
691
+ .kima-card .kima-card-content .coin-select .amount-input > span,
692
+ .kima-card .kima-card-content .coin-select .address-input > span {
693
+ margin-right: 1.5em;
694
+ font-size: 1.2em;
695
+ }
696
+ .kima-card .kima-card-content .coin-select .amount-input .input-wrapper,
697
+ .kima-card .kima-card-content .coin-select .address-input .input-wrapper {
698
+ position: relative;
699
+ }
700
+ .kima-card .kima-card-content .coin-select .amount-input .input-wrapper input,
701
+ .kima-card .kima-card-content .coin-select .address-input .input-wrapper input {
702
+ border: 1px solid #979797;
703
+ border-radius: 0.8em;
704
+ height: 3em;
705
+ background: transparent;
706
+ color: white;
707
+ outline: none;
708
+ font: unset;
709
+ width: 12em;
710
+ padding: 0.3em 0.5em 0.3em 1em;
711
+ box-sizing: content-box;
712
+ }
713
+ .kima-card .kima-card-content .coin-select .amount-input .input-wrapper .coin-label,
714
+ .kima-card .kima-card-content .coin-select .address-input .input-wrapper .coin-label {
715
+ position: absolute;
716
+ display: flex;
717
+ align-items: center;
718
+ padding: 0.3em 0.5em 0.3em 0.3em;
719
+ border-radius: 1em;
720
+ right: 0.8em;
721
+ top: 0.8em;
722
+ }
723
+ .kima-card .kima-card-content .coin-select .amount-input .input-wrapper .coin-label svg,
724
+ .kima-card .kima-card-content .coin-select .address-input .input-wrapper .coin-label svg {
725
+ width: 1.5em;
726
+ height: 1.5em;
727
+ }
728
+ .kima-card .kima-card-content .coin-select .amount-input .input-wrapper .coin-label span,
729
+ .kima-card .kima-card-content .coin-select .address-input .input-wrapper .coin-label span {
730
+ margin-left: 0.5em;
731
+ }
732
+ .kima-card .kima-card-content .coin-select .amount-input > input,
733
+ .kima-card .kima-card-content .coin-select .address-input > input {
734
+ border: 1px solid #979797;
735
+ border-radius: 0.8em;
736
+ height: 3em;
737
+ background: transparent;
738
+ color: white;
739
+ outline: none;
740
+ font: unset;
741
+ width: 10em;
742
+ padding: 0.3em 0.5em 0.3em 1em;
743
+ box-sizing: content-box;
744
+ }
745
+ .kima-card .kima-card-content .coin-select .amount-input > input.kima-address-input,
746
+ .kima-card .kima-card-content .coin-select .address-input > input.kima-address-input {
747
+ width: 20em;
748
+ }
749
+ .kima-card .kima-card-content .coin-select .amount-input.light input,
750
+ .kima-card .kima-card-content .coin-select .address-input.light input {
751
+ color: black;
752
+ }
753
+ .kima-card .kima-card-content .coin-select .amount-input.light .coin-label,
754
+ .kima-card .kima-card-content .coin-select .address-input.light .coin-label {
755
+ background: #e3e3e3;
756
+ }
757
+ .kima-card .kima-card-content .coin-select .amount-input.dark .coin-label,
758
+ .kima-card .kima-card-content .coin-select .address-input.dark .coin-label {
759
+ background: #4f5156;
760
+ }
617
761
  .kima-card .kima-card-content .confirm-details {
618
762
  padding: 0 8em;
619
- font-size: 1.2em; }
620
- .kima-card .kima-card-content .confirm-details > p {
621
- text-align: center;
622
- font-weight: bold;
623
- font-size: 1.3em; }
624
- .kima-card .kima-card-content .confirm-details .detail-item {
625
- padding: 1em 2em;
626
- display: flex;
627
- align-items: center;
628
- border-top: 1px solid #e3e3e3; }
629
- .kima-card .kima-card-content .confirm-details .detail-item p {
630
- margin: 0; }
631
- .kima-card .kima-card-content .confirm-details .detail-item .label {
632
- font-weight: bold;
633
- width: 10em; }
634
- .kima-card .kima-card-content .confirm-details .detail-item .kima-card-network-label {
635
- display: flex;
636
- padding: 0.3em 0.5em 0.3em 0.5em;
637
- border-radius: 1em;
638
- margin-left: 1em; }
639
- .kima-card .kima-card-content .confirm-details .detail-item:last-of-type {
640
- border-bottom: 1px solid #e3e3e3; }
641
- .kima-card .kima-card-content .confirm-details.light .kima-card-network-label {
642
- background: #e3e3e3; }
643
- .kima-card .kima-card-content .confirm-details.dark .kima-card-network-label {
644
- background: #4f5156; }
645
-
763
+ font-size: 1.2em;
764
+ }
765
+ .kima-card .kima-card-content .confirm-details > p {
766
+ text-align: center;
767
+ font-weight: bold;
768
+ font-size: 1.3em;
769
+ }
770
+ .kima-card .kima-card-content .confirm-details .detail-item {
771
+ padding: 1em 2em;
772
+ display: flex;
773
+ align-items: center;
774
+ border-top: 1px solid #e3e3e3;
775
+ }
776
+ .kima-card .kima-card-content .confirm-details .detail-item p {
777
+ margin: 0;
778
+ }
779
+ .kima-card .kima-card-content .confirm-details .detail-item .label {
780
+ font-weight: bold;
781
+ width: 10em;
782
+ }
783
+ .kima-card .kima-card-content .confirm-details .detail-item .kima-card-network-label {
784
+ display: flex;
785
+ padding: 0.3em 0.5em 0.3em 0.5em;
786
+ border-radius: 1em;
787
+ margin-left: 1em;
788
+ }
789
+ .kima-card .kima-card-content .confirm-details .detail-item:last-of-type {
790
+ border-bottom: 1px solid #e3e3e3;
791
+ }
792
+ .kima-card .kima-card-content .confirm-details.light .kima-card-network-label {
793
+ background: #e3e3e3;
794
+ }
795
+ .kima-card .kima-card-content .confirm-details.dark .kima-card-network-label {
796
+ background: #4f5156;
797
+ }
646
798
  .kima-card .kima-card-content .kima-custom-checkbox {
647
799
  margin-left: 2em;
648
800
  display: flex;
649
- align-items: center; }
650
- .kima-card .kima-card-content .kima-custom-checkbox .icon-wrapper {
651
- border: 1px solid #ffffff;
652
- height: 1em;
653
- width: 1em;
654
- border-radius: 0.2em;
655
- display: flex;
656
- justify-content: center;
657
- align-items: center;
658
- cursor: pointer; }
659
- .kima-card .kima-card-content .kima-custom-checkbox .icon-wrapper.light {
660
- border-color: #4f5156; }
661
- .kima-card .kima-card-content .kima-custom-checkbox .icon-wrapper svg {
662
- margin-top: 0.2em;
663
- margin-left: 1px; }
664
- .kima-card .kima-card-content .kima-custom-checkbox > span {
665
- margin-left: 0.5em; }
666
-
801
+ align-items: center;
802
+ }
803
+ .kima-card .kima-card-content .kima-custom-checkbox .icon-wrapper {
804
+ border: 1px solid #ffffff;
805
+ height: 1em;
806
+ width: 1em;
807
+ border-radius: 0.2em;
808
+ display: flex;
809
+ justify-content: center;
810
+ align-items: center;
811
+ cursor: pointer;
812
+ }
813
+ .kima-card .kima-card-content .kima-custom-checkbox .icon-wrapper.light {
814
+ border-color: #4f5156;
815
+ }
816
+ .kima-card .kima-card-content .kima-custom-checkbox .icon-wrapper svg {
817
+ margin-top: 0.2em;
818
+ margin-left: 1px;
819
+ }
820
+ .kima-card .kima-card-content .kima-custom-checkbox > span {
821
+ margin-left: 0.5em;
822
+ }
667
823
  .kima-card .kima-card-content .kima-stepbox {
668
824
  display: flex;
669
- justify-content: center; }
670
- .kima-card .kima-card-content .kima-stepbox .content-wrapper {
671
- display: flex;
672
- flex-direction: column;
673
- border: 1px solid #66aae5;
674
- border-radius: 1em;
675
- padding: 1.5em 2em; }
676
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item {
677
- display: flex;
678
- align-items: center;
679
- margin: 0.3em 0; }
680
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item {
681
- position: relative; }
682
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item a {
683
- text-decoration: underline; }
684
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:first-of-type {
685
- width: 11em; }
686
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:first-of-type p {
687
- margin: 0 0 0 1.5em; }
688
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:first-of-type svg {
689
- position: absolute;
690
- margin-top: 0.3em;
691
- width: 1em;
692
- height: 1em; }
693
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p {
694
- margin: 0; }
695
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p a {
696
- margin-left: 0.5em; }
697
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p .copy-btn {
698
- display: inline;
699
- cursor: pointer;
700
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
701
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p .copy-btn:hover {
702
- opacity: 0.7; }
703
- .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p .copy-btn svg {
704
- width: 1em;
705
- height: 1em;
706
- margin-left: 0.5em; }
707
-
825
+ justify-content: center;
826
+ }
827
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper {
828
+ display: flex;
829
+ flex-direction: column;
830
+ border: 1px solid #66aae5;
831
+ border-radius: 1em;
832
+ padding: 1.5em 2em;
833
+ }
834
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item {
835
+ display: flex;
836
+ align-items: center;
837
+ margin: 0.3em 0;
838
+ }
839
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item {
840
+ position: relative;
841
+ }
842
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item a {
843
+ text-decoration: underline;
844
+ }
845
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:first-of-type {
846
+ width: 11em;
847
+ }
848
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:first-of-type p {
849
+ margin: 0 0 0 1.5em;
850
+ }
851
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:first-of-type svg {
852
+ position: absolute;
853
+ margin-top: 0.3em;
854
+ width: 1em;
855
+ height: 1em;
856
+ }
857
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p {
858
+ margin: 0;
859
+ }
860
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p a {
861
+ margin-left: 0.5em;
862
+ }
863
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p .copy-btn {
864
+ display: inline;
865
+ cursor: pointer;
866
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
867
+ }
868
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p .copy-btn:hover {
869
+ opacity: 0.7;
870
+ }
871
+ .kima-card .kima-card-content .kima-stepbox .content-wrapper .step-item .info-item:not(:first-of-type) p .copy-btn svg {
872
+ width: 1em;
873
+ height: 1em;
874
+ margin-left: 0.5em;
875
+ }
708
876
  .kima-card .card-item {
709
877
  width: 10em;
710
878
  height: 9em;
@@ -716,60 +884,72 @@
716
884
  cursor: pointer;
717
885
  text-decoration: none;
718
886
  color: inherit;
719
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
720
- .kima-card .card-item svg,
721
- .kima-card .card-item img {
722
- width: 3em;
723
- height: 3em;
724
- border-radius: 100%; }
725
- .kima-card .card-item span {
726
- font-weight: bold;
727
- margin-top: 1em;
728
- text-align: center; }
729
- .kima-card .card-item.light {
730
- background: #e3e3e3; }
731
- .kima-card .card-item.dark {
732
- background: #4f5156; }
733
- .kima-card .card-item.active {
734
- background: #66aae5; }
735
- .kima-card .card-item.active span {
736
- color: white; }
737
- .kima-card .card-item:hover {
738
- opacity: 0.7; }
739
-
887
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
888
+ }
889
+ .kima-card .card-item svg,
890
+ .kima-card .card-item img {
891
+ width: 3em;
892
+ height: 3em;
893
+ border-radius: 100%;
894
+ }
895
+ .kima-card .card-item span {
896
+ font-weight: bold;
897
+ margin-top: 1em;
898
+ text-align: center;
899
+ }
900
+ .kima-card .card-item.light {
901
+ background: #e3e3e3;
902
+ }
903
+ .kima-card .card-item.dark {
904
+ background: #4f5156;
905
+ }
906
+ .kima-card .card-item.active {
907
+ background: #66aae5;
908
+ }
909
+ .kima-card .card-item.active span {
910
+ color: white;
911
+ }
912
+ .kima-card .card-item:hover {
913
+ opacity: 0.7;
914
+ }
740
915
  .kima-card .kima-card-network-label {
741
916
  display: flex;
742
917
  align-items: center;
743
918
  -moz-column-gap: 0.5em;
744
919
  column-gap: 0.5em;
745
- padding-top: 1em; }
746
- .kima-card .kima-card-network-label > svg {
747
- width: 1em;
748
- height: 1em; }
749
- .kima-card .kima-card-network-label .label {
750
- display: flex;
751
- border-radius: 1em;
752
- font-size: 1em;
753
- -moz-column-gap: 0.3em;
754
- column-gap: 0.3em;
755
- align-items: center;
756
- padding: 0.2em 0.4em; }
757
- .kima-card .kima-card-network-label .label .icon-wrapper {
758
- display: flex;
759
- justify-content: center;
760
- align-items: center;
761
- width: 1.2em;
762
- height: 1.2em; }
763
- .kima-card .kima-card-network-label .label .icon-wrapper svg {
764
- width: 100%;
765
- height: 100%; }
766
- .kima-card .kima-card-network-label .warning-container {
767
- margin-left: 1em;
768
- display: flex;
769
- align-items: center;
770
- -moz-column-gap: 0.5em;
771
- column-gap: 0.5em; }
772
-
920
+ padding-top: 1em;
921
+ }
922
+ .kima-card .kima-card-network-label > svg {
923
+ width: 1em;
924
+ height: 1em;
925
+ }
926
+ .kima-card .kima-card-network-label .label {
927
+ display: flex;
928
+ border-radius: 1em;
929
+ font-size: 1em;
930
+ -moz-column-gap: 0.3em;
931
+ column-gap: 0.3em;
932
+ align-items: center;
933
+ padding: 0.2em 0.4em;
934
+ }
935
+ .kima-card .kima-card-network-label .label .icon-wrapper {
936
+ display: flex;
937
+ justify-content: center;
938
+ align-items: center;
939
+ width: 1.2em;
940
+ height: 1.2em;
941
+ }
942
+ .kima-card .kima-card-network-label .label .icon-wrapper svg {
943
+ width: 100%;
944
+ height: 100%;
945
+ }
946
+ .kima-card .kima-card-network-label .warning-container {
947
+ margin-left: 1em;
948
+ display: flex;
949
+ align-items: center;
950
+ -moz-column-gap: 0.5em;
951
+ column-gap: 0.5em;
952
+ }
773
953
  .kima-card .primary-button {
774
954
  background: #66aae5;
775
955
  border-radius: 0.8em;
@@ -784,16 +964,19 @@
784
964
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
785
965
  display: flex;
786
966
  align-items: center;
787
- justify-content: center; }
788
- .kima-card .primary-button:hover {
789
- opacity: 0.7; }
790
- .kima-card .primary-button .loading-indicator {
791
- margin-right: 0.5em; }
792
- .kima-card .primary-button .loading-indicator svg {
793
- width: 1.5em;
794
- height: 1.5em;
795
- margin-top: 0.3em; }
796
-
967
+ justify-content: center;
968
+ }
969
+ .kima-card .primary-button:hover {
970
+ opacity: 0.7;
971
+ }
972
+ .kima-card .primary-button .loading-indicator {
973
+ margin-right: 0.5em;
974
+ }
975
+ .kima-card .primary-button .loading-indicator svg {
976
+ width: 1.5em;
977
+ height: 1.5em;
978
+ margin-top: 0.3em;
979
+ }
797
980
  .kima-card .secondary-button {
798
981
  border-radius: 0.8em;
799
982
  width: 10em;
@@ -803,16 +986,19 @@
803
986
  font-weight: bold;
804
987
  font-family: inherit;
805
988
  border: none;
806
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
807
- .kima-card .secondary-button.dark {
808
- color: white;
809
- background: #4f5156; }
810
- .kima-card .secondary-button.light {
811
- color: black;
812
- background: #e3e3e3; }
813
- .kima-card .secondary-button:hover {
814
- opacity: 0.7; }
815
-
989
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
990
+ }
991
+ .kima-card .secondary-button.dark {
992
+ color: white;
993
+ background: #4f5156;
994
+ }
995
+ .kima-card .secondary-button.light {
996
+ color: black;
997
+ background: #e3e3e3;
998
+ }
999
+ .kima-card .secondary-button:hover {
1000
+ opacity: 0.7;
1001
+ }
816
1002
  .kima-card .dropdown-menu {
817
1003
  box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
818
1004
  position: absolute;
@@ -822,20 +1008,26 @@
822
1008
  width: -moz-max-content;
823
1009
  width: max-content;
824
1010
  overflow: hidden;
825
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
826
- .kima-card .dropdown-menu .menu-item {
827
- padding: 0.5em 1em;
828
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
829
- .kima-card .dropdown-menu .menu-item:hover {
830
- background: #5aa0db80; }
831
- .kima-card .dropdown-menu.light {
832
- background: white; }
833
- .kima-card .dropdown-menu.dark {
834
- background: #1b1e25; }
835
- .kima-card .dropdown-menu.closed {
836
- max-height: 0;
837
- opacity: 0;
838
- pointer-events: none; }
1011
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
1012
+ }
1013
+ .kima-card .dropdown-menu .menu-item {
1014
+ padding: 0.5em 1em;
1015
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
1016
+ }
1017
+ .kima-card .dropdown-menu .menu-item:hover {
1018
+ background: rgba(90, 160, 219, 0.5019607843);
1019
+ }
1020
+ .kima-card .dropdown-menu.light {
1021
+ background: white;
1022
+ }
1023
+ .kima-card .dropdown-menu.dark {
1024
+ background: #1b1e25;
1025
+ }
1026
+ .kima-card .dropdown-menu.closed {
1027
+ max-height: 0;
1028
+ opacity: 0;
1029
+ pointer-events: none;
1030
+ }
839
1031
 
840
1032
  .kima-card .kima-modal {
841
1033
  position: absolute;
@@ -850,80 +1042,97 @@
850
1042
  display: flex;
851
1043
  align-items: center;
852
1044
  justify-content: center;
853
- pointer-events: none; }
854
- .kima-card .kima-modal .modal-content-container {
855
- position: relative;
856
- width: calc(100% - 8em);
857
- height: calc(100% - 8em);
858
- padding: 2em;
859
- border-radius: 1em;
860
- border: 1px solid #66aae5;
861
- box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
862
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
863
- overflow: hidden;
864
- box-sizing: content-box; }
865
- .kima-card .kima-modal .modal-overlay {
866
- cursor: pointer;
867
- position: absolute;
868
- top: 0;
869
- left: 0;
870
- width: 100%;
871
- height: 100%;
872
- background: #b3b3b354;
873
- -webkit-backdrop-filter: blur(2px);
874
- backdrop-filter: blur(2px); }
875
- .kima-card .kima-modal.light .modal-content-container {
876
- background: white;
877
- color: black; }
878
- .kima-card .kima-modal.dark .modal-content-container {
879
- background: #1b1e25;
880
- color: white; }
881
- .kima-card .kima-modal.open {
882
- pointer-events: auto;
883
- height: 100%;
884
- opacity: 1; }
885
- .kima-card .kima-modal .modal-content {
886
- width: 100%;
887
- height: calc(100% - 10em);
888
- display: flex;
889
- align-items: center;
890
- justify-content: center; }
891
- .kima-card .kima-modal .modal-content .wallet-select {
892
- width: 100%;
893
- position: relative; }
894
- .kima-card .kima-modal .modal-content .wallet-select p {
895
- font-size: 1.2em;
896
- font-weight: 500;
897
- text-align: center; }
898
- .kima-card .kima-modal .modal-content .wallet-select .slide-area .wallet-container {
899
- display: flex;
900
- width: -moz-max-content;
901
- width: max-content;
902
- -moz-column-gap: 1em;
903
- column-gap: 1em;
904
- align-items: center;
905
- justify-content: center;
906
- margin-top: 2em; }
907
- .kima-card .kima-modal.help-popup .modal-content-container {
908
- width: 30em;
909
- height: 20em; }
910
- .kima-card .kima-modal.help-popup .modal-content {
911
- height: calc(100% - 4em); }
912
- .kima-card .kima-modal.hash-popup .modal-content-container {
913
- width: 20em;
914
- height: 12em; }
915
- .kima-card .kima-modal.hash-popup .modal-content {
916
- height: calc(100% - 2em); }
917
- .kima-card .kima-modal.hash-popup .modal-content .hash-container {
918
- width: 100%;
919
- padding: 0 2em; }
920
- .kima-card .kima-modal.hash-popup .modal-content .hash-container .hash-item {
921
- display: flex;
922
- align-items: center;
923
- -moz-column-gap: 1em;
924
- column-gap: 1em; }
925
- .kima-card .kima-modal.hash-popup .modal-content .hash-container .hash-item span {
926
- width: 5em; }
1045
+ pointer-events: none;
1046
+ }
1047
+ .kima-card .kima-modal .modal-content-container {
1048
+ position: relative;
1049
+ width: calc(100% - 8em);
1050
+ height: calc(100% - 8em);
1051
+ padding: 2em;
1052
+ border-radius: 1em;
1053
+ border: 1px solid #66aae5;
1054
+ box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
1055
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
1056
+ overflow: hidden;
1057
+ box-sizing: content-box;
1058
+ }
1059
+ .kima-card .kima-modal .modal-overlay {
1060
+ cursor: pointer;
1061
+ position: absolute;
1062
+ top: 0;
1063
+ left: 0;
1064
+ width: 100%;
1065
+ height: 100%;
1066
+ background: rgba(179, 179, 179, 0.3294117647);
1067
+ -webkit-backdrop-filter: blur(2px);
1068
+ backdrop-filter: blur(2px);
1069
+ }
1070
+ .kima-card .kima-modal.light .modal-content-container {
1071
+ background: white;
1072
+ color: black;
1073
+ }
1074
+ .kima-card .kima-modal.dark .modal-content-container {
1075
+ background: #1b1e25;
1076
+ color: white;
1077
+ }
1078
+ .kima-card .kima-modal.open {
1079
+ pointer-events: auto;
1080
+ height: 100%;
1081
+ opacity: 1;
1082
+ }
1083
+ .kima-card .kima-modal .modal-content {
1084
+ width: 100%;
1085
+ height: calc(100% - 10em);
1086
+ display: flex;
1087
+ align-items: center;
1088
+ justify-content: center;
1089
+ }
1090
+ .kima-card .kima-modal .modal-content .wallet-select {
1091
+ width: 100%;
1092
+ position: relative;
1093
+ }
1094
+ .kima-card .kima-modal .modal-content .wallet-select p {
1095
+ font-size: 1.2em;
1096
+ font-weight: 500;
1097
+ text-align: center;
1098
+ }
1099
+ .kima-card .kima-modal .modal-content .wallet-select .slide-area .wallet-container {
1100
+ display: flex;
1101
+ width: -moz-max-content;
1102
+ width: max-content;
1103
+ -moz-column-gap: 1em;
1104
+ column-gap: 1em;
1105
+ align-items: center;
1106
+ justify-content: center;
1107
+ margin-top: 2em;
1108
+ }
1109
+ .kima-card .kima-modal.help-popup .modal-content-container {
1110
+ width: 30em;
1111
+ height: 20em;
1112
+ }
1113
+ .kima-card .kima-modal.help-popup .modal-content {
1114
+ height: calc(100% - 4em);
1115
+ }
1116
+ .kima-card .kima-modal.hash-popup .modal-content-container {
1117
+ width: 20em;
1118
+ height: 12em;
1119
+ }
1120
+ .kima-card .kima-modal.hash-popup .modal-content {
1121
+ height: calc(100% - 2em);
1122
+ }
1123
+ .kima-card .kima-modal.hash-popup .modal-content .hash-container {
1124
+ width: 100%;
1125
+ padding: 0 2em;
1126
+ }
1127
+ .kima-card .kima-modal.hash-popup .modal-content .hash-container .hash-item {
1128
+ display: flex;
1129
+ align-items: center;
1130
+ -moz-column-gap: 1em;
1131
+ column-gap: 1em;
1132
+ }
1133
+ .kima-card .kima-modal.hash-popup .modal-content .hash-container .hash-item span {
1134
+ width: 5em;
1135
+ }
927
1136
 
928
1137
  .kima-card {
929
1138
  border-radius: 1em;
@@ -931,115 +1140,146 @@
931
1140
  padding: 2em;
932
1141
  border: 1px solid #66aae5;
933
1142
  box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
934
- font-family: 'Poppins', sans-serif;
1143
+ font-family: "Poppins", sans-serif;
935
1144
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
936
1145
  transition-delay: 0.2s;
937
- /* Firefox */ }
938
- .kima-card.light {
939
- background: white;
940
- color: black; }
941
- .kima-card.light .kima-card-header .kima-card-network-label .label {
942
- background: #e3e3e3; }
943
- .kima-card.light .kima-card-content .kima-progressbar {
944
- background: #e3e3e3; }
945
- .kima-card.light .kima-card-content .kima-tooltip .content-wrapper {
946
- background: white; }
947
- .kima-card.dark {
948
- background: #1b1e25;
949
- color: white; }
950
- .kima-card.dark .kima-card-header .kima-card-network-label .label {
951
- background: #4f5156; }
952
- .kima-card.dark .kima-card-content .kima-progressbar {
953
- background: #4f5156; }
954
- .kima-card.dark .kima-card-content .kima-tooltip .content-wrapper {
955
- background: #0c0f17; }
956
- .kima-card.font-large {
957
- font-size: 18px;
958
- max-width: 1100px; }
959
- .kima-card.font-medium {
960
- font-size: 14px;
961
- max-width: 900px; }
962
- .kima-card.font-small {
963
- font-size: 10px;
964
- max-width: 700px; }
965
- @media (max-width: 768px) {
966
- .kima-card {
967
- max-width: 100vh !important;
968
- font-size: 14px !important;
969
- padding: 1.5em;
970
- border-radius: 0; } }
971
- @media (max-width: 500px) {
972
- .kima-card {
973
- padding: 1em; } }
974
- .kima-card-content {
975
- width: 100%;
976
- margin: 2em 0;
977
- opacity: 1;
978
- max-height: 40em;
979
- min-height: 25em;
980
- position: relative;
981
- z-index: 10;
982
- display: flex;
983
- flex-direction: column;
984
- justify-content: center;
985
- transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
986
- .kima-card.transaction-card .kima-card-content {
987
- display: block;
988
- min-height: 17em;
989
- margin: 2em 0 2em; }
990
- .kima-card.minimized {
991
- max-width: 30em; }
992
- .kima-card.minimized .kima-card-content {
993
- opacity: 0;
994
- max-height: 0;
995
- min-height: 0;
996
- margin: 0;
997
- pointer-events: none; }
998
- .kima-card.minimized .kima-card-footer {
999
- opacity: 0;
1000
- max-height: 0;
1001
- pointer-events: none; }
1002
- .kima-card input::-webkit-outer-spin-button,
1003
- .kima-card input::-webkit-inner-spin-button {
1004
- -webkit-appearance: none;
1005
- margin: 0; }
1006
- .kima-card input[type='number'] {
1007
- -moz-appearance: textfield; }
1008
- .kima-card .hide-scrollbar {
1009
- -ms-overflow-style: none;
1010
- /* IE and Edge */
1011
- scrollbar-width: none;
1012
- /* Firefox */ }
1013
- .kima-card .hide-scrollbar::-webkit-scrollbar {
1014
- display: none; }
1015
- .kima-card .custom-scrollbar::-webkit-scrollbar {
1016
- width: 6px; }
1017
- .kima-card .custom-scrollbar::-webkit-scrollbar-track {
1018
- background: white;
1019
- border-radius: 3px; }
1020
- .kima-card .custom-scrollbar::-webkit-scrollbar-thumb {
1021
- background: #a19f9f;
1022
- border-radius: 3px; }
1023
- .kima-card .slide-area {
1024
- width: 40em;
1025
- padding: 2em;
1026
- margin: 0 auto;
1027
- overflow: hidden;
1028
- overflow-x: scroll;
1029
- -webkit-mask-image: linear-gradient(90deg, #00000020 0%, black 5%, black 95%, #00000020 100%);
1030
- mask-image: linear-gradient(90deg, #00000020 0%, black 5%, black 95%, #00000020 100%);
1031
- position: relative; }
1032
- .kima-card .scroll-button {
1033
- position: absolute;
1034
- width: 100%;
1035
- bottom: 8em; }
1036
- .kima-card .scroll-button svg {
1037
- width: 2em;
1038
- height: 4em;
1039
- cursor: pointer;
1040
- position: absolute; }
1041
- .kima-card .scroll-button svg:first-of-type {
1042
- left: 4em; }
1043
- .kima-card .scroll-button svg:last-of-type {
1044
- right: 4em;
1045
- transform: rotate(180deg); }
1146
+ /* Firefox */
1147
+ }
1148
+ .kima-card.light {
1149
+ background: white;
1150
+ color: black;
1151
+ }
1152
+ .kima-card.light .kima-card-header .kima-card-network-label .label {
1153
+ background: #e3e3e3;
1154
+ }
1155
+ .kima-card.light .kima-card-content .kima-progressbar {
1156
+ background: #e3e3e3;
1157
+ }
1158
+ .kima-card.light .kima-card-content .kima-tooltip .content-wrapper {
1159
+ background: white;
1160
+ }
1161
+ .kima-card.dark {
1162
+ background: #1b1e25;
1163
+ color: white;
1164
+ }
1165
+ .kima-card.dark .kima-card-header .kima-card-network-label .label {
1166
+ background: #4f5156;
1167
+ }
1168
+ .kima-card.dark .kima-card-content .kima-progressbar {
1169
+ background: #4f5156;
1170
+ }
1171
+ .kima-card.dark .kima-card-content .kima-tooltip .content-wrapper {
1172
+ background: #0c0f17;
1173
+ }
1174
+ .kima-card.font-large {
1175
+ font-size: 18px;
1176
+ max-width: 1100px;
1177
+ }
1178
+ .kima-card.font-medium {
1179
+ font-size: 14px;
1180
+ max-width: 900px;
1181
+ }
1182
+ .kima-card.font-small {
1183
+ font-size: 10px;
1184
+ max-width: 700px;
1185
+ }
1186
+ @media (max-width: 768px) {
1187
+ .kima-card {
1188
+ max-width: 100vh !important;
1189
+ font-size: 14px !important;
1190
+ padding: 1.5em;
1191
+ border-radius: 0;
1192
+ }
1193
+ }
1194
+ @media (max-width: 500px) {
1195
+ .kima-card {
1196
+ padding: 1em;
1197
+ }
1198
+ }
1199
+ .kima-card-content {
1200
+ width: 100%;
1201
+ margin: 2em 0;
1202
+ opacity: 1;
1203
+ max-height: 40em;
1204
+ min-height: 25em;
1205
+ position: relative;
1206
+ z-index: 10;
1207
+ display: flex;
1208
+ flex-direction: column;
1209
+ justify-content: center;
1210
+ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
1211
+ }
1212
+ .kima-card.transaction-card .kima-card-content {
1213
+ display: block;
1214
+ min-height: 17em;
1215
+ margin: 2em 0 2em;
1216
+ }
1217
+ .kima-card.minimized {
1218
+ max-width: 30em;
1219
+ }
1220
+ .kima-card.minimized .kima-card-content {
1221
+ opacity: 0;
1222
+ max-height: 0;
1223
+ min-height: 0;
1224
+ margin: 0;
1225
+ pointer-events: none;
1226
+ }
1227
+ .kima-card.minimized .kima-card-footer {
1228
+ opacity: 0;
1229
+ max-height: 0;
1230
+ pointer-events: none;
1231
+ }
1232
+ .kima-card input::-webkit-outer-spin-button,
1233
+ .kima-card input::-webkit-inner-spin-button {
1234
+ -webkit-appearance: none;
1235
+ margin: 0;
1236
+ }
1237
+ .kima-card input[type=number] {
1238
+ -moz-appearance: textfield;
1239
+ }
1240
+ .kima-card .hide-scrollbar {
1241
+ -ms-overflow-style: none; /* IE and Edge */
1242
+ scrollbar-width: none; /* Firefox */
1243
+ }
1244
+ .kima-card .hide-scrollbar::-webkit-scrollbar {
1245
+ display: none;
1246
+ }
1247
+ .kima-card .custom-scrollbar::-webkit-scrollbar {
1248
+ width: 6px;
1249
+ }
1250
+ .kima-card .custom-scrollbar::-webkit-scrollbar-track {
1251
+ background: white;
1252
+ border-radius: 3px;
1253
+ }
1254
+ .kima-card .custom-scrollbar::-webkit-scrollbar-thumb {
1255
+ background: #a19f9f;
1256
+ border-radius: 3px;
1257
+ }
1258
+ .kima-card .slide-area {
1259
+ width: 40em;
1260
+ padding: 2em;
1261
+ margin: 0 auto;
1262
+ overflow: hidden;
1263
+ overflow-x: scroll;
1264
+ -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1254901961) 0%, black 5%, black 95%, rgba(0, 0, 0, 0.1254901961) 100%);
1265
+ mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1254901961) 0%, black 5%, black 95%, rgba(0, 0, 0, 0.1254901961) 100%);
1266
+ position: relative;
1267
+ }
1268
+ .kima-card .scroll-button {
1269
+ position: absolute;
1270
+ width: 100%;
1271
+ bottom: 8em;
1272
+ }
1273
+ .kima-card .scroll-button svg {
1274
+ width: 2em;
1275
+ height: 4em;
1276
+ cursor: pointer;
1277
+ position: absolute;
1278
+ }
1279
+ .kima-card .scroll-button svg:first-of-type {
1280
+ left: 4em;
1281
+ }
1282
+ .kima-card .scroll-button svg:last-of-type {
1283
+ right: 4em;
1284
+ transform: rotate(180deg);
1285
+ }