@eos3/connect 0.1.12 → 0.2.0

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/styles.css ADDED
@@ -0,0 +1,376 @@
1
+ :root {
2
+ --eos-connect-accent: #2f80ed;
3
+ --eos-connect-accent-strong: #1f6fd1;
4
+ --eos-connect-surface: #ffffff;
5
+ --eos-connect-surface-soft: #f5f7fb;
6
+ --eos-connect-border: #e5e7eb;
7
+ --eos-connect-text: #111827;
8
+ --eos-connect-muted: #6b7280;
9
+ --eos-connect-shadow: 0 18px 55px rgba(15, 23, 42, 0.18);
10
+ }
11
+
12
+ eos-connect-button,
13
+ eos-connect,
14
+ eos-connect-modal {
15
+ box-sizing: border-box;
16
+ color: var(--eos-connect-text);
17
+ font-family:
18
+ Inter,
19
+ ui-sans-serif,
20
+ system-ui,
21
+ -apple-system,
22
+ BlinkMacSystemFont,
23
+ "Segoe UI",
24
+ sans-serif;
25
+ font-size: 16px;
26
+ line-height: 1.4;
27
+ -webkit-text-size-adjust: 100%;
28
+ text-size-adjust: 100%;
29
+ }
30
+
31
+ eos-connect *,
32
+ eos-connect *::before,
33
+ eos-connect *::after,
34
+ eos-connect-button *,
35
+ eos-connect-button *::before,
36
+ eos-connect-button *::after,
37
+ eos-connect-modal *,
38
+ eos-connect-modal *::before,
39
+ eos-connect-modal *::after {
40
+ box-sizing: border-box;
41
+ }
42
+
43
+ eos-connect-button[hidden],
44
+ eos-connect[hidden],
45
+ eos-connect-modal[hidden] {
46
+ display: none !important;
47
+ }
48
+
49
+ eos-connect,
50
+ eos-connect-modal {
51
+ position: fixed;
52
+ inset: 0;
53
+ z-index: 2147483000;
54
+ display: grid;
55
+ align-items: end;
56
+ justify-items: center;
57
+ min-width: 0;
58
+ padding: 12px 12px max(12px, env(safe-area-inset-bottom));
59
+ overflow: hidden;
60
+ }
61
+
62
+ eos-connect-button {
63
+ display: inline-block;
64
+ }
65
+
66
+ .eos-connect-button {
67
+ appearance: none;
68
+ -webkit-appearance: none;
69
+ min-height: 44px;
70
+ border: 0;
71
+ border-radius: 8px;
72
+ background: var(--eos-connect-accent);
73
+ color: #ffffff;
74
+ cursor: pointer;
75
+ font-family: inherit;
76
+ font-size: 15px;
77
+ line-height: 1.2;
78
+ font-weight: 700;
79
+ padding: 0 18px;
80
+ transition:
81
+ background-color 160ms ease,
82
+ transform 120ms ease;
83
+ }
84
+
85
+ .eos-connect-button:hover {
86
+ background: var(--eos-connect-accent-strong);
87
+ }
88
+
89
+ .eos-connect-button:active {
90
+ transform: translateY(1px);
91
+ }
92
+
93
+ .eos-connect-button:focus-visible,
94
+ .eos-connect-sdk-primary:focus-visible {
95
+ outline: 3px solid rgba(47, 128, 237, 0.28);
96
+ outline-offset: 2px;
97
+ }
98
+
99
+ .eos-connect-sdk-backdrop {
100
+ appearance: none;
101
+ -webkit-appearance: none;
102
+ position: absolute;
103
+ inset: 0;
104
+ border: 0;
105
+ padding: 0;
106
+ background: rgba(15, 23, 42, 0.36);
107
+ cursor: pointer;
108
+ }
109
+
110
+ .eos-connect-sdk-sheet {
111
+ position: relative;
112
+ width: min(100%, 420px);
113
+ max-height: min(640px, calc(100dvh - 24px - env(safe-area-inset-bottom)));
114
+ box-sizing: border-box;
115
+ border: 1px solid var(--eos-connect-border);
116
+ border-radius: 8px;
117
+ background: var(--eos-connect-surface);
118
+ box-shadow: var(--eos-connect-shadow);
119
+ padding: 16px;
120
+ overflow: auto;
121
+ -webkit-overflow-scrolling: touch;
122
+ }
123
+
124
+ .eos-connect-sdk-sheet--quick {
125
+ width: min(100%, 454px) !important;
126
+ border: 0 !important;
127
+ border-radius: 28px !important;
128
+ padding: 50px 24px 34px !important;
129
+ overflow: visible !important;
130
+ }
131
+
132
+ .eos-connect-sdk-close {
133
+ appearance: none;
134
+ -webkit-appearance: none;
135
+ position: absolute;
136
+ top: 24px !important;
137
+ right: 24px !important;
138
+ display: grid;
139
+ width: 48px !important;
140
+ height: 48px !important;
141
+ place-items: center;
142
+ border: 0 !important;
143
+ border-radius: 999px !important;
144
+ background: var(--eos-connect-surface-soft) !important;
145
+ color: #6b7280 !important;
146
+ cursor: pointer;
147
+ font-family: inherit !important;
148
+ font-size: 34px !important;
149
+ line-height: 1 !important;
150
+ font-weight: 300 !important;
151
+ padding: 0 !important;
152
+ }
153
+
154
+ .eos-connect-sdk-summary {
155
+ margin-bottom: 16px;
156
+ }
157
+
158
+ .eos-connect-sdk-summary--quick {
159
+ margin: 122px 0 38px !important;
160
+ text-align: center !important;
161
+ }
162
+
163
+ .eos-connect-sdk-summary h2 {
164
+ margin: 0 0 6px;
165
+ font-size: 22px;
166
+ line-height: 1.2;
167
+ }
168
+
169
+ .eos-connect-sdk-summary--quick h2 {
170
+ margin: 0 0 14px !important;
171
+ font-size: 28px !important;
172
+ line-height: 1.18 !important;
173
+ font-weight: 800 !important;
174
+ }
175
+
176
+ .eos-connect-sdk-summary p {
177
+ margin: 0;
178
+ color: var(--eos-connect-muted);
179
+ font-size: 15px;
180
+ line-height: 1.45;
181
+ }
182
+
183
+ .eos-connect-sdk-summary--quick p {
184
+ margin: 0 !important;
185
+ font-size: 17px !important;
186
+ line-height: 1.55 !important;
187
+ }
188
+
189
+ .eos-connect-sdk-summary--quick strong {
190
+ color: var(--eos-connect-text) !important;
191
+ }
192
+
193
+ .eos-connect-sdk-primary {
194
+ appearance: none;
195
+ -webkit-appearance: none;
196
+ display: flex;
197
+ width: 100%;
198
+ min-height: 58px;
199
+ align-items: center;
200
+ justify-content: space-between;
201
+ gap: 12px;
202
+ border: 0;
203
+ border-radius: 8px;
204
+ background: var(--eos-connect-accent);
205
+ color: #ffffff;
206
+ cursor: pointer;
207
+ font-family: inherit;
208
+ font-size: 15px;
209
+ line-height: 1.25;
210
+ font-weight: 700;
211
+ padding: 0 16px;
212
+ text-align: left;
213
+ }
214
+
215
+ .eos-connect-sdk-primary--quick {
216
+ display: grid !important;
217
+ min-height: 66px !important;
218
+ grid-template-columns: 54px minmax(0, 1fr) 54px !important;
219
+ align-items: center !important;
220
+ border-radius: 14px !important;
221
+ padding: 0 14px !important;
222
+ box-shadow: 0 14px 34px rgba(47, 128, 237, 0.26) !important;
223
+ font-family: inherit !important;
224
+ font-size: 18px !important;
225
+ line-height: 1.2 !important;
226
+ text-align: center !important;
227
+ }
228
+
229
+ .eos-connect-sdk-primary--quick[aria-busy="true"],
230
+ .eos-connect-sdk-primary--quick[disabled] {
231
+ opacity: 1 !important;
232
+ }
233
+
234
+ .eos-connect-sdk-primary--success {
235
+ background: #10b981 !important;
236
+ box-shadow: 0 14px 34px rgba(16, 185, 129, 0.22) !important;
237
+ }
238
+
239
+ .eos-connect-sdk-key-icon,
240
+ .eos-connect-sdk-send-icon,
241
+ .eos-connect-sdk-spinner-icon,
242
+ .eos-connect-sdk-success-icon,
243
+ .eos-connect-sdk-empty-icon {
244
+ display: grid !important;
245
+ width: 40px !important;
246
+ height: 40px !important;
247
+ place-items: center !important;
248
+ }
249
+
250
+ .eos-connect-sdk-key-icon {
251
+ border-radius: 11px !important;
252
+ background: #ffffff !important;
253
+ color: var(--eos-connect-accent) !important;
254
+ }
255
+
256
+ .eos-connect-sdk-spinner-icon,
257
+ .eos-connect-sdk-success-icon,
258
+ .eos-connect-sdk-empty-icon {
259
+ border-radius: 11px !important;
260
+ background: rgba(255, 255, 255, 0.18) !important;
261
+ color: #ffffff !important;
262
+ }
263
+
264
+ .eos-connect-sdk-spinner {
265
+ display: block !important;
266
+ width: 24px !important;
267
+ height: 24px !important;
268
+ border: 3px solid rgba(255, 255, 255, 0.42) !important;
269
+ border-top-color: #ffffff !important;
270
+ border-radius: 999px !important;
271
+ animation: eos-connect-sdk-spin 760ms linear infinite !important;
272
+ }
273
+
274
+ .eos-connect-sdk-success-icon svg {
275
+ width: 26px !important;
276
+ height: 26px !important;
277
+ fill: none !important;
278
+ stroke: currentColor !important;
279
+ stroke-width: 2.4 !important;
280
+ stroke-linecap: round !important;
281
+ stroke-linejoin: round !important;
282
+ }
283
+
284
+ .eos-connect-sdk-send-icon {
285
+ justify-self: end !important;
286
+ color: rgba(255, 255, 255, 0.86) !important;
287
+ }
288
+
289
+ .eos-connect-sdk-key-icon svg,
290
+ .eos-connect-sdk-send-icon svg {
291
+ width: 24px;
292
+ height: 24px;
293
+ fill: none;
294
+ stroke: currentColor;
295
+ stroke-width: 2;
296
+ stroke-linecap: round;
297
+ stroke-linejoin: round;
298
+ }
299
+
300
+ @keyframes eos-connect-sdk-spin {
301
+ to {
302
+ transform: rotate(360deg);
303
+ }
304
+ }
305
+
306
+ .eos-connect-sdk-primary span {
307
+ min-width: 0;
308
+ overflow-wrap: anywhere;
309
+ }
310
+
311
+ .eos-connect-sdk-primary[aria-disabled="true"] {
312
+ cursor: not-allowed;
313
+ opacity: 0.58;
314
+ }
315
+
316
+ @media (max-width: 480px) {
317
+ eos-connect,
318
+ eos-connect-modal {
319
+ padding: 8px 8px max(8px, env(safe-area-inset-bottom));
320
+ }
321
+
322
+ .eos-connect-sdk-sheet {
323
+ width: 100%;
324
+ max-height: min(620px, calc(100dvh - 16px - env(safe-area-inset-bottom)));
325
+ border-radius: 8px 8px 0 0;
326
+ padding: 14px;
327
+ }
328
+
329
+ .eos-connect-sdk-sheet--quick {
330
+ border-radius: 28px 28px 0 0 !important;
331
+ padding: 46px 24px 34px !important;
332
+ }
333
+
334
+ .eos-connect-sdk-close {
335
+ top: 22px !important;
336
+ right: 24px !important;
337
+ width: 48px !important;
338
+ height: 48px !important;
339
+ }
340
+
341
+ .eos-connect-sdk-summary {
342
+ margin-bottom: 14px;
343
+ }
344
+
345
+ .eos-connect-sdk-summary--quick {
346
+ margin: 118px 0 36px !important;
347
+ }
348
+
349
+ .eos-connect-sdk-summary h2 {
350
+ font-size: 20px;
351
+ }
352
+
353
+ .eos-connect-sdk-summary--quick h2 {
354
+ font-size: 28px !important;
355
+ }
356
+
357
+ .eos-connect-sdk-summary p {
358
+ font-size: 14px;
359
+ }
360
+
361
+ .eos-connect-sdk-summary--quick p {
362
+ font-size: 17px !important;
363
+ }
364
+
365
+ .eos-connect-sdk-primary {
366
+ min-height: 52px;
367
+ padding: 0 14px;
368
+ }
369
+
370
+ .eos-connect-sdk-primary--quick {
371
+ min-height: 66px !important;
372
+ grid-template-columns: 54px minmax(0, 1fr) 54px !important;
373
+ font-size: 18px !important;
374
+ }
375
+
376
+ }