@meteraprotocol/minute-markets-sdk 0.1.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/src/styles.css ADDED
@@ -0,0 +1,520 @@
1
+ .mm-sdk {
2
+ box-sizing: border-box;
3
+ width: 100%;
4
+ max-width: var(--mm-max-width);
5
+ border: 1px solid var(--mm-border);
6
+ border-radius: var(--mm-radius);
7
+ background: var(--mm-bg);
8
+ color: var(--mm-text);
9
+ font-family: var(--mm-font);
10
+ padding: calc(var(--mm-density-gap) + 8px);
11
+ }
12
+
13
+ .mm-sdk *,
14
+ .mm-sdk *::before,
15
+ .mm-sdk *::after {
16
+ box-sizing: border-box;
17
+ }
18
+
19
+ .mm-sdk__header,
20
+ .mm-sdk__footer,
21
+ .mm-sdk__metrics,
22
+ .mm-sdk__actions,
23
+ .mm-sdk__wallet {
24
+ display: flex;
25
+ gap: 10px;
26
+ }
27
+
28
+ .mm-sdk__header,
29
+ .mm-sdk__footer {
30
+ align-items: center;
31
+ justify-content: space-between;
32
+ }
33
+
34
+ .mm-sdk__round-stack {
35
+ display: grid;
36
+ justify-items: end;
37
+ gap: 6px;
38
+ }
39
+
40
+ .mm-sdk h2,
41
+ .mm-sdk p {
42
+ margin: 0;
43
+ }
44
+
45
+ .mm-sdk h2 {
46
+ margin-top: 4px;
47
+ font-size: 24px;
48
+ }
49
+
50
+ .mm-sdk__eyebrow,
51
+ .mm-sdk__round,
52
+ .mm-sdk__price span,
53
+ .mm-sdk__metric span,
54
+ .mm-sdk__price small {
55
+ color: var(--mm-muted);
56
+ font-size: 11px;
57
+ letter-spacing: 0.08em;
58
+ text-transform: uppercase;
59
+ }
60
+
61
+ .mm-sdk__round {
62
+ border: 1px solid var(--mm-border);
63
+ border-radius: 999px;
64
+ padding: 8px 10px;
65
+ }
66
+
67
+ .mm-sdk__countdown {
68
+ color: var(--mm-primary);
69
+ font-size: 13px;
70
+ font-weight: 800;
71
+ letter-spacing: 0.08em;
72
+ }
73
+
74
+ .mm-sdk__countdown--hot {
75
+ color: var(--mm-down);
76
+ }
77
+
78
+ .mm-sdk__syncing {
79
+ color: var(--mm-muted);
80
+ font-size: 10px;
81
+ }
82
+
83
+ .mm-sdk__price {
84
+ display: grid;
85
+ gap: 8px;
86
+ margin-top: calc(var(--mm-density-gap) + 6px);
87
+ border: 1px solid var(--mm-border);
88
+ border-radius: var(--mm-radius);
89
+ background: var(--mm-surface);
90
+ padding: 16px;
91
+ }
92
+
93
+ .mm-sdk__asset-line {
94
+ display: inline-flex;
95
+ align-items: center;
96
+ gap: 8px;
97
+ }
98
+
99
+ .mm-sdk__asset-icon {
100
+ display: inline-flex;
101
+ height: 24px;
102
+ min-width: 24px;
103
+ align-items: center;
104
+ justify-content: center;
105
+ border-radius: 999px;
106
+ background: var(--mm-asset-image), var(--mm-primary);
107
+ background-position: center;
108
+ background-size: cover;
109
+ color: var(--mm-bg);
110
+ font-size: 8px;
111
+ font-weight: 900;
112
+ letter-spacing: -0.02em;
113
+ }
114
+
115
+ .mm-sdk__price strong {
116
+ color: var(--mm-primary);
117
+ font-size: 34px;
118
+ }
119
+
120
+ .mm-sdk__metrics,
121
+ .mm-sdk__actions {
122
+ margin-top: var(--mm-density-gap);
123
+ }
124
+
125
+ .mm-sdk__metric {
126
+ display: grid;
127
+ flex: 1;
128
+ gap: 8px;
129
+ border: 1px solid var(--mm-border);
130
+ border-radius: var(--mm-radius);
131
+ background: var(--mm-surface);
132
+ padding: 12px;
133
+ }
134
+
135
+ .mm-sdk__button,
136
+ .mm-sdk__wallet-button {
137
+ border: 1px solid var(--mm-border);
138
+ border-radius: var(--mm-radius);
139
+ color: var(--mm-text);
140
+ cursor: pointer;
141
+ font: inherit;
142
+ font-weight: 700;
143
+ min-height: var(--mm-control-height);
144
+ padding: 12px;
145
+ }
146
+
147
+ .mm-sdk__button {
148
+ flex: 1;
149
+ }
150
+
151
+ .mm-sdk__button:disabled {
152
+ cursor: not-allowed;
153
+ opacity: 0.52;
154
+ }
155
+
156
+ .mm-sdk__button--selected {
157
+ box-shadow: 0 0 0 3px var(--mm-primary);
158
+ }
159
+
160
+ .mm-sdk__button--up {
161
+ background: var(--mm-up);
162
+ }
163
+
164
+ .mm-sdk__button--down {
165
+ background: var(--mm-down);
166
+ }
167
+
168
+ .mm-sdk__notice {
169
+ margin-top: 12px !important;
170
+ color: var(--mm-muted);
171
+ font-size: 13px;
172
+ line-height: 1.5;
173
+ }
174
+
175
+ .mm-sdk__notice--error {
176
+ color: var(--mm-down);
177
+ }
178
+
179
+ .mm-sdk__trade {
180
+ display: grid;
181
+ gap: 9px;
182
+ margin-top: 14px;
183
+ border: 1px solid var(--mm-border);
184
+ border-radius: var(--mm-radius);
185
+ background: var(--mm-surface);
186
+ padding: 13px;
187
+ }
188
+
189
+ .mm-sdk__trade-head {
190
+ display: flex;
191
+ align-items: center;
192
+ justify-content: space-between;
193
+ gap: 12px;
194
+ }
195
+
196
+ .mm-sdk__trade-head strong {
197
+ display: inline-flex;
198
+ align-items: center;
199
+ gap: 7px;
200
+ }
201
+
202
+ .mm-sdk__trade label,
203
+ .mm-sdk__history-label {
204
+ color: var(--mm-muted);
205
+ font-size: 11px;
206
+ letter-spacing: 0.08em;
207
+ text-transform: uppercase;
208
+ }
209
+
210
+ .mm-sdk__ada-mark {
211
+ display: inline-flex;
212
+ height: 24px;
213
+ min-width: 24px;
214
+ align-items: center;
215
+ justify-content: center;
216
+ border-radius: 999px;
217
+ background: var(--mm-primary);
218
+ color: var(--mm-bg);
219
+ font-size: 14px;
220
+ font-weight: 900;
221
+ }
222
+
223
+ .mm-sdk__slider-wrap {
224
+ display: grid;
225
+ gap: 6px;
226
+ }
227
+
228
+ .mm-sdk__slider-wrap input[type="range"] {
229
+ width: 100%;
230
+ accent-color: var(--mm-primary);
231
+ cursor: pointer;
232
+ }
233
+
234
+ .mm-sdk__slider-labels {
235
+ display: flex;
236
+ justify-content: space-between;
237
+ color: var(--mm-muted);
238
+ font-size: 11px;
239
+ }
240
+
241
+ .mm-sdk__stake-row {
242
+ display: flex;
243
+ align-items: center;
244
+ gap: 8px;
245
+ }
246
+
247
+ .mm-sdk__stake-row input {
248
+ min-width: 0;
249
+ flex: 1;
250
+ border: 1px solid var(--mm-border);
251
+ border-radius: 10px;
252
+ background: var(--mm-bg);
253
+ color: var(--mm-text);
254
+ font: inherit;
255
+ padding: 10px;
256
+ }
257
+
258
+ .mm-sdk__place {
259
+ border: 1px solid var(--mm-border);
260
+ border-radius: 10px;
261
+ cursor: pointer;
262
+ font: inherit;
263
+ min-height: var(--mm-control-height);
264
+ padding: 9px 11px;
265
+ }
266
+
267
+ .mm-sdk__place {
268
+ background: var(--mm-primary);
269
+ color: var(--mm-bg);
270
+ font-weight: 800;
271
+ }
272
+
273
+ .mm-sdk__place:disabled {
274
+ cursor: not-allowed;
275
+ opacity: 0.52;
276
+ }
277
+
278
+ .mm-sdk__tx-hash {
279
+ display: block;
280
+ margin-top: 4px;
281
+ overflow: hidden;
282
+ text-overflow: ellipsis;
283
+ white-space: nowrap;
284
+ }
285
+
286
+ .mm-sdk__wallet {
287
+ flex-wrap: wrap;
288
+ margin-top: 16px;
289
+ color: var(--mm-muted);
290
+ font-size: 13px;
291
+ }
292
+
293
+ .mm-sdk__orders {
294
+ display: grid;
295
+ gap: 10px;
296
+ margin-top: 14px;
297
+ border: 1px solid var(--mm-border);
298
+ border-radius: var(--mm-radius);
299
+ background: var(--mm-surface);
300
+ padding: 13px;
301
+ }
302
+
303
+ .mm-sdk__orders-head {
304
+ display: flex;
305
+ align-items: center;
306
+ justify-content: space-between;
307
+ gap: 12px;
308
+ }
309
+
310
+ .mm-sdk__orders-head div {
311
+ display: grid;
312
+ gap: 3px;
313
+ }
314
+
315
+ .mm-sdk__orders-head span {
316
+ color: var(--mm-muted);
317
+ font-size: 11px;
318
+ letter-spacing: 0.08em;
319
+ text-transform: uppercase;
320
+ }
321
+
322
+ .mm-sdk__orders-head button {
323
+ border: 1px solid var(--mm-border);
324
+ border-radius: 999px;
325
+ background: var(--mm-bg);
326
+ color: var(--mm-muted);
327
+ cursor: pointer;
328
+ font: inherit;
329
+ font-size: 12px;
330
+ padding: 7px 10px;
331
+ }
332
+
333
+ .mm-sdk__orders-panel {
334
+ display: grid;
335
+ gap: 10px;
336
+ border-top: 1px solid var(--mm-border);
337
+ padding-top: 10px;
338
+ }
339
+
340
+ .mm-sdk__orders-panel > button {
341
+ justify-self: start;
342
+ border: 1px solid var(--mm-border);
343
+ border-radius: 999px;
344
+ background: var(--mm-bg);
345
+ color: var(--mm-muted);
346
+ cursor: pointer;
347
+ font: inherit;
348
+ font-size: 12px;
349
+ padding: 7px 10px;
350
+ }
351
+
352
+ .mm-sdk__orders-head button:disabled,
353
+ .mm-sdk__orders-panel > button:disabled {
354
+ cursor: not-allowed;
355
+ opacity: 0.56;
356
+ }
357
+
358
+ .mm-sdk__order-list {
359
+ display: grid;
360
+ gap: 8px;
361
+ margin: 0;
362
+ padding: 0;
363
+ }
364
+
365
+ .mm-sdk__order {
366
+ display: flex;
367
+ align-items: center;
368
+ justify-content: space-between;
369
+ gap: 12px;
370
+ border: 1px solid var(--mm-border);
371
+ border-radius: 12px;
372
+ background: var(--mm-bg);
373
+ list-style: none;
374
+ padding: 10px;
375
+ }
376
+
377
+ .mm-sdk__order div {
378
+ display: grid;
379
+ gap: 3px;
380
+ }
381
+
382
+ .mm-sdk__order span,
383
+ .mm-sdk__order small {
384
+ color: var(--mm-muted);
385
+ font-size: 12px;
386
+ }
387
+
388
+ .mm-sdk__order-meta {
389
+ justify-items: end;
390
+ }
391
+
392
+ .mm-sdk__status {
393
+ border-radius: 999px;
394
+ padding: 3px 7px;
395
+ text-transform: lowercase;
396
+ }
397
+
398
+ .mm-sdk__status--submitted,
399
+ .mm-sdk__status--drafted {
400
+ background: color-mix(in srgb, var(--mm-primary) 18%, transparent);
401
+ color: var(--mm-primary) !important;
402
+ }
403
+
404
+ .mm-sdk__status--confirmed {
405
+ background: color-mix(in srgb, var(--mm-up) 18%, transparent);
406
+ color: var(--mm-up) !important;
407
+ }
408
+
409
+ .mm-sdk__status--failed,
410
+ .mm-sdk__status--expired {
411
+ background: color-mix(in srgb, var(--mm-down) 18%, transparent);
412
+ color: var(--mm-down) !important;
413
+ }
414
+
415
+ .mm-sdk__wallet-button {
416
+ background: var(--mm-surface);
417
+ }
418
+
419
+ .mm-sdk__wallet-connected {
420
+ display: flex;
421
+ align-items: center;
422
+ gap: 7px;
423
+ border: 1px solid var(--mm-border);
424
+ border-radius: 999px;
425
+ background: var(--mm-surface);
426
+ padding: 5px 6px 5px 11px;
427
+ }
428
+
429
+ .mm-sdk__disconnect {
430
+ position: relative;
431
+ display: inline-flex;
432
+ height: 28px;
433
+ width: 28px;
434
+ align-items: center;
435
+ justify-content: center;
436
+ border: 1px solid var(--mm-border);
437
+ border-radius: 999px;
438
+ background: transparent;
439
+ color: var(--mm-muted);
440
+ cursor: pointer;
441
+ }
442
+
443
+ .mm-sdk__disconnect:hover {
444
+ color: var(--mm-down);
445
+ }
446
+
447
+ .mm-sdk__disconnect svg {
448
+ height: 15px;
449
+ width: 15px;
450
+ fill: none;
451
+ stroke: currentColor;
452
+ stroke-linecap: round;
453
+ stroke-linejoin: round;
454
+ stroke-width: 2;
455
+ }
456
+
457
+ .mm-sdk__disconnect::after {
458
+ position: absolute;
459
+ right: 0;
460
+ bottom: calc(100% + 8px);
461
+ width: max-content;
462
+ max-width: 180px;
463
+ border: 1px solid var(--mm-border);
464
+ border-radius: 8px;
465
+ background: var(--mm-surface);
466
+ color: var(--mm-text);
467
+ content: attr(data-tooltip);
468
+ font-size: 11px;
469
+ opacity: 0;
470
+ padding: 6px 8px;
471
+ pointer-events: none;
472
+ transform: translateY(4px);
473
+ transition: opacity 120ms ease, transform 120ms ease;
474
+ }
475
+
476
+ .mm-sdk__disconnect:hover::after,
477
+ .mm-sdk__disconnect:focus-visible::after {
478
+ opacity: 1;
479
+ transform: translateY(0);
480
+ }
481
+
482
+ .mm-sdk__footer {
483
+ margin-top: 18px;
484
+ border-top: 1px solid var(--mm-border);
485
+ padding-top: 14px;
486
+ font-size: 12px;
487
+ }
488
+
489
+ .mm-sdk__footer a {
490
+ color: var(--mm-accent);
491
+ font-weight: 700;
492
+ text-decoration: none;
493
+ }
494
+
495
+ .mm-sdk__attribution {
496
+ display: inline-flex;
497
+ align-items: center;
498
+ gap: 7px;
499
+ }
500
+
501
+ .mm-sdk__brand-mark {
502
+ display: inline-flex;
503
+ height: 22px;
504
+ width: 22px;
505
+ align-items: center;
506
+ justify-content: center;
507
+ border-radius: 7px;
508
+ background: var(--mm-logo-image), var(--mm-primary);
509
+ background-position: center;
510
+ background-size: cover;
511
+ color: var(--mm-bg);
512
+ font-size: 8px;
513
+ font-weight: 800;
514
+ letter-spacing: -0.04em;
515
+ }
516
+
517
+ .mm-sdk--compact {
518
+ max-width: 420px;
519
+ padding: 16px;
520
+ }