iwa 0.0.1a3__py3-none-any.whl → 0.0.1a4__py3-none-any.whl

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.
@@ -0,0 +1,1443 @@
1
+ :root {
2
+ --bg-color: #0c0e14;
3
+ --card-bg: rgba(255, 255, 255, 0.05);
4
+ --glass-border: rgba(255, 255, 255, 0.1);
5
+ --primary-color: #5865f2;
6
+ --primary-hover: #4752c4;
7
+ --accent-color: #00d2ff;
8
+ --text-color: #f1f3f5;
9
+ --text-muted: #adb5bd;
10
+ --success: #2ecc71;
11
+ --error: #e74c3c;
12
+ --warning: #f1c40f;
13
+ --sidebar-width: 260px;
14
+ --header-height: 70px;
15
+ --font-main: "Outfit", sans-serif;
16
+ --font-mono: "JetBrains Mono", monospace;
17
+ }
18
+
19
+ * {
20
+ box-sizing: border-box;
21
+ margin: 0;
22
+ padding: 0;
23
+ }
24
+
25
+ body {
26
+ font-family: var(--font-main);
27
+ background-color: var(--bg-color);
28
+ color: var(--text-color);
29
+ overflow-x: hidden;
30
+ min-height: 100vh;
31
+ }
32
+
33
+ /* Background Animations */
34
+ .background-blobs {
35
+ position: fixed;
36
+ top: 0;
37
+ left: 0;
38
+ width: 100%;
39
+ height: 100%;
40
+ z-index: -1;
41
+ filter: blur(80px);
42
+ opacity: 0.4;
43
+ }
44
+
45
+ .blob {
46
+ position: absolute;
47
+ border-radius: 50%;
48
+ }
49
+
50
+ .blob-1 {
51
+ width: 500px;
52
+ height: 500px;
53
+ background: var(--primary-color);
54
+ top: -100px;
55
+ right: -100px;
56
+ }
57
+
58
+ .blob-2 {
59
+ width: 400px;
60
+ height: 400px;
61
+ background: var(--accent-color);
62
+ bottom: -100px;
63
+ left: -100px;
64
+ }
65
+
66
+ .blob-3 {
67
+ width: 300px;
68
+ height: 300px;
69
+ background: #9b59b6;
70
+ top: 40%;
71
+ left: 30%;
72
+ }
73
+
74
+ /* Layout */
75
+ .app-container {
76
+ max-width: 1800px;
77
+ margin: 0 auto;
78
+ padding: 0 2rem;
79
+ display: flex;
80
+ flex-direction: column;
81
+ min-height: 100vh;
82
+ }
83
+
84
+ header {
85
+ height: var(--header-height);
86
+ display: flex;
87
+ align-items: center;
88
+ justify-content: space-between;
89
+ border-bottom: 1px solid var(--glass-border);
90
+ margin-bottom: 1rem;
91
+ }
92
+
93
+ .logo {
94
+ display: flex;
95
+ align-items: center;
96
+ gap: 0.8rem;
97
+ }
98
+
99
+ .logo h1 {
100
+ font-size: 1.5rem;
101
+ font-weight: 600;
102
+ letter-spacing: 1px;
103
+ }
104
+
105
+ .logo span {
106
+ color: var(--accent-color);
107
+ font-weight: 300;
108
+ }
109
+
110
+ .chain-selector {
111
+ display: flex;
112
+ align-items: center;
113
+ gap: 1rem;
114
+ }
115
+
116
+ select {
117
+ background: rgba(0, 0, 0, 0.3);
118
+ border: 1px solid var(--glass-border);
119
+ color: var(--text-color);
120
+ padding: 0.6rem 1rem;
121
+ border-radius: 8px;
122
+ font-family: inherit;
123
+ cursor: pointer;
124
+ outline: none;
125
+ appearance: none;
126
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
127
+ background-repeat: no-repeat;
128
+ background-position: right 1rem center;
129
+ background-size: 1rem;
130
+ padding-right: 2.5rem;
131
+ }
132
+
133
+ select:focus {
134
+ border-color: var(--accent-color);
135
+ }
136
+
137
+ select option {
138
+ background-color: #1a1d26;
139
+ color: white;
140
+ }
141
+
142
+ /* Fix for white dropdown on some systems */
143
+ #tx-token option[value="native"] {
144
+ background-color: var(--primary-color);
145
+ color: white;
146
+ }
147
+
148
+ .status-indicator {
149
+ display: flex;
150
+ align-items: center;
151
+ gap: 0.5rem;
152
+ font-size: 0.9rem;
153
+ color: var(--success);
154
+ }
155
+
156
+ .pulse {
157
+ width: 8px;
158
+ height: 8px;
159
+ background-color: var(--success);
160
+ border-radius: 50%;
161
+ box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
162
+ animation: pulse 2s infinite;
163
+ }
164
+
165
+ @keyframes pulse {
166
+ 0% {
167
+ box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
168
+ }
169
+
170
+ 70% {
171
+ box-shadow: 0 0 0 10px rgba(46, 204, 113, 0);
172
+ }
173
+
174
+ 100% {
175
+ box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
176
+ }
177
+ }
178
+
179
+ /* Tabs */
180
+ .tabs {
181
+ display: flex;
182
+ gap: 1rem;
183
+ margin-bottom: 2rem;
184
+ }
185
+
186
+ .tab-btn {
187
+ background: transparent;
188
+ border: none;
189
+ color: var(--text-muted);
190
+ padding: 0.8rem 1.5rem;
191
+ font-size: 1.1rem;
192
+ font-family: inherit;
193
+ cursor: pointer;
194
+ border-radius: 12px;
195
+ transition: all 0.3s ease;
196
+ }
197
+
198
+ .tab-btn:hover {
199
+ background: var(--card-bg);
200
+ color: var(--text-color);
201
+ }
202
+
203
+ .tab-btn.active {
204
+ background: var(--card-bg);
205
+ color: var(--accent-color);
206
+ box-shadow: inset 0 0 10px rgba(0, 210, 255, 0.1);
207
+ border: 1px solid rgba(0, 210, 255, 0.2);
208
+ }
209
+
210
+ .tab-pane {
211
+ display: none;
212
+ animation: fadeIn 0.4s ease;
213
+ }
214
+
215
+ .tab-pane.active {
216
+ display: block;
217
+ }
218
+
219
+ @keyframes fadeIn {
220
+ from {
221
+ opacity: 0;
222
+ transform: translateY(10px);
223
+ }
224
+
225
+ to {
226
+ opacity: 1;
227
+ transform: translateY(0);
228
+ }
229
+ }
230
+
231
+ /* Sections */
232
+ .section-header {
233
+ display: flex;
234
+ justify-content: space-between;
235
+ align-items: center;
236
+ margin-bottom: 1.5rem;
237
+ }
238
+
239
+ .section-header h2 {
240
+ font-size: 1.8rem;
241
+ font-weight: 600;
242
+ }
243
+
244
+ .glass {
245
+ background: var(--card-bg);
246
+ backdrop-filter: blur(12px);
247
+ border: 1px solid var(--glass-border);
248
+ border-radius: 16px;
249
+ padding: 1.5rem;
250
+ }
251
+
252
+ /* Tables */
253
+ .table-container {
254
+ overflow-x: auto;
255
+ }
256
+
257
+ table {
258
+ width: 100%;
259
+ border-collapse: collapse;
260
+ font-family: var(--font-mono);
261
+ }
262
+
263
+ th {
264
+ text-align: left;
265
+ padding: 1rem;
266
+ color: var(--text-muted);
267
+ font-weight: 500;
268
+ border-bottom: 1px solid var(--glass-border);
269
+ }
270
+
271
+ td {
272
+ padding: 1rem;
273
+ border-bottom: 1px solid rgba(255, 255, 255, 0.03);
274
+ }
275
+
276
+ tr:last-child td {
277
+ border-bottom: none;
278
+ }
279
+
280
+ .val {
281
+ text-align: right;
282
+ }
283
+
284
+ .tag-badge {
285
+ color: var(--success);
286
+ font-weight: 500;
287
+ }
288
+
289
+ .address-cell {
290
+ opacity: 0.7;
291
+ cursor: pointer;
292
+ }
293
+
294
+ .address-cell:hover {
295
+ opacity: 1;
296
+ color: var(--accent-color);
297
+ }
298
+
299
+ /* Form */
300
+ .tx-form {
301
+ margin-top: 2rem;
302
+ }
303
+
304
+ .form-grid {
305
+ display: grid;
306
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
307
+ gap: 1.5rem;
308
+ margin-bottom: 1.5rem;
309
+ }
310
+
311
+ .form-grid-5 {
312
+ grid-template-columns: repeat(5, 1fr);
313
+ margin-bottom: 0;
314
+ }
315
+
316
+ @media (max-width: 900px) {
317
+ .form-grid-5 {
318
+ grid-template-columns: repeat(2, 1fr);
319
+ }
320
+ }
321
+
322
+ .form-group-btn {
323
+ display: flex;
324
+ flex-direction: column;
325
+ justify-content: flex-end;
326
+ }
327
+
328
+ .form-group {
329
+ display: flex;
330
+ flex-direction: column;
331
+ gap: 0.5rem;
332
+ }
333
+
334
+ .form-group label {
335
+ font-size: 0.9rem;
336
+ color: var(--text-muted);
337
+ }
338
+
339
+ input {
340
+ background: rgba(0, 0, 0, 0.2);
341
+ border: 1px solid var(--glass-border);
342
+ color: var(--text-color);
343
+ padding: 0.7rem 1rem;
344
+ border-radius: 8px;
345
+ outline: none;
346
+ }
347
+
348
+ input:focus {
349
+ border-color: var(--accent-color);
350
+ }
351
+
352
+ .btn-send {
353
+ width: 100%;
354
+ background: linear-gradient(
355
+ 135deg,
356
+ var(--primary-color),
357
+ var(--accent-color)
358
+ );
359
+ border: none;
360
+ color: white;
361
+ padding: 0.7rem 1rem;
362
+ border-radius: 8px;
363
+ font-weight: 600;
364
+ font-size: 0.9rem;
365
+ cursor: pointer;
366
+ transition:
367
+ transform 0.2s,
368
+ box-shadow 0.2s;
369
+ }
370
+
371
+ .btn-send:hover {
372
+ transform: scale(1.02);
373
+ box-shadow: 0 4px 15px rgba(0, 210, 255, 0.3);
374
+ }
375
+
376
+ .btn-primary {
377
+ background: var(--primary-color);
378
+ border: none;
379
+ color: white;
380
+ padding: 0.6rem 1.2rem;
381
+ border-radius: 8px;
382
+ cursor: pointer;
383
+ font-weight: 500;
384
+ }
385
+
386
+ .btn-primary:disabled {
387
+ background: #555;
388
+ color: #999;
389
+ cursor: not-allowed;
390
+ opacity: 0.6;
391
+ }
392
+
393
+ .btn-warning {
394
+ background: #f39c12;
395
+ border: none;
396
+ color: white;
397
+ padding: 0.6rem 1.2rem;
398
+ border-radius: 8px;
399
+ cursor: pointer;
400
+ font-weight: 500;
401
+ }
402
+
403
+ .btn-icon {
404
+ background: transparent;
405
+ border: 1px solid var(--glass-border);
406
+ color: white;
407
+ padding: 0.5rem;
408
+ border-radius: 8px;
409
+ cursor: pointer;
410
+ display: flex;
411
+ align-items: center;
412
+ justify-content: center;
413
+ transition: all 0.2s;
414
+ }
415
+
416
+ .btn-icon:hover {
417
+ background: var(--card-bg);
418
+ }
419
+
420
+ .btn-icon svg {
421
+ stroke: var(--text-muted);
422
+ }
423
+
424
+ .btn-icon:hover svg {
425
+ stroke: white;
426
+ }
427
+
428
+ /* RPC Cards */
429
+ .rpc-grid {
430
+ display: grid;
431
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
432
+ gap: 1.5rem;
433
+ }
434
+
435
+ .rpc-card {
436
+ padding: 1.5rem;
437
+ display: flex;
438
+ flex-direction: column;
439
+ gap: 0.8rem;
440
+ }
441
+
442
+ .rpc-card h3 {
443
+ text-transform: capitalize;
444
+ }
445
+
446
+ .rpc-meta {
447
+ display: flex;
448
+ justify-content: space-between;
449
+ font-family: var(--font-mono);
450
+ font-size: 0.9rem;
451
+ }
452
+
453
+ /* Footer */
454
+ footer {
455
+ margin-top: auto;
456
+ padding: 1rem 0;
457
+ display: flex;
458
+ justify-content: space-between;
459
+ font-size: 0.8rem;
460
+ color: var(--text-muted);
461
+ border-top: 1px solid var(--glass-border);
462
+ }
463
+
464
+ /* Utilities */
465
+ .mt-2 {
466
+ margin-top: 1rem;
467
+ }
468
+
469
+ /* Toast */
470
+ .toast-container {
471
+ position: fixed;
472
+ bottom: 2rem;
473
+ right: 2rem;
474
+ display: flex;
475
+ flex-direction: column;
476
+ gap: 0.5rem;
477
+ z-index: 1000;
478
+ }
479
+
480
+ .toast {
481
+ background: rgba(0, 0, 0, 0.8);
482
+ backdrop-filter: blur(5px);
483
+ border-left: 4px solid var(--accent-color);
484
+ padding: 1rem 1.5rem;
485
+ border-radius: 4px;
486
+ animation: slideIn 0.3s ease;
487
+ }
488
+
489
+ @keyframes slideIn {
490
+ from {
491
+ transform: translateX(100%);
492
+ opacity: 0;
493
+ }
494
+
495
+ to {
496
+ transform: translateX(0);
497
+ opacity: 1;
498
+ }
499
+ }
500
+
501
+ /* Loading Spinner */
502
+ .loading-spinner {
503
+ display: inline-block;
504
+ width: 20px;
505
+ height: 20px;
506
+ border: 3px solid rgba(255, 255, 255, 0.3);
507
+ border-radius: 50%;
508
+ border-top-color: var(--accent-color);
509
+ animation: spin 1s linear infinite;
510
+ vertical-align: middle;
511
+ margin-right: 0.8rem;
512
+ }
513
+
514
+ @keyframes spin {
515
+ to {
516
+ transform: rotate(360deg);
517
+ }
518
+ }
519
+
520
+ /* Modal */
521
+ .modal {
522
+ display: none;
523
+ position: fixed;
524
+ top: 0;
525
+ left: 0;
526
+ width: 100%;
527
+ height: 100%;
528
+ background: rgba(0, 0, 0, 0.8);
529
+ backdrop-filter: blur(8px);
530
+ z-index: 2000;
531
+ justify-content: center;
532
+ align-items: center;
533
+ animation: fadeIn 0.3s ease;
534
+ }
535
+
536
+ .modal.active {
537
+ display: flex;
538
+ }
539
+
540
+ .modal-content {
541
+ width: 100%;
542
+ max-width: 500px;
543
+ padding: 2.5rem;
544
+ }
545
+
546
+ .modal-content h2 {
547
+ margin-bottom: 2rem;
548
+ color: var(--accent-color);
549
+ }
550
+
551
+ .modal-actions {
552
+ display: flex;
553
+ justify-content: flex-end;
554
+ gap: 1rem;
555
+ }
556
+
557
+ .btn-secondary {
558
+ background: transparent;
559
+ border: 1px solid var(--glass-border);
560
+ color: var(--text-muted);
561
+ padding: 0.6rem 1.2rem;
562
+ border-radius: 8px;
563
+ cursor: pointer;
564
+ font-weight: 500;
565
+ }
566
+
567
+ .btn-secondary:hover {
568
+ color: white;
569
+ border-color: white;
570
+ }
571
+
572
+ .btn-warning {
573
+ background: linear-gradient(135deg, #f39c12, #e67e22);
574
+ border: none;
575
+ color: white;
576
+ padding: 0.6rem 1.2rem;
577
+ border-radius: 8px;
578
+ cursor: pointer;
579
+ font-weight: 500;
580
+ }
581
+
582
+ .btn-warning:hover {
583
+ background: linear-gradient(135deg, #e67e22, #d35400);
584
+ }
585
+
586
+ .btn-warning.btn-sm {
587
+ padding: 0.4rem 0.8rem;
588
+ font-size: 0.85rem;
589
+ }
590
+
591
+ .btn-danger {
592
+ background: linear-gradient(135deg, #e74c3c, #c0392b);
593
+ border: none;
594
+ color: white;
595
+ padding: 0.6rem 1.2rem;
596
+ border-radius: 8px;
597
+ cursor: pointer;
598
+ font-weight: 500;
599
+ }
600
+
601
+ .btn-danger:hover {
602
+ background: linear-gradient(135deg, #c0392b, #a93226);
603
+ }
604
+
605
+ .btn-danger.btn-sm {
606
+ padding: 0.4rem 0.8rem;
607
+ font-size: 0.85rem;
608
+ }
609
+
610
+ textarea {
611
+ background: rgba(0, 0, 0, 0.2);
612
+ border: 1px solid var(--glass-border);
613
+ color: var(--text-color);
614
+ padding: 0.7rem 1rem;
615
+ border-radius: 8px;
616
+ outline: none;
617
+ resize: vertical;
618
+ min-height: 80px;
619
+ font-family: var(--font-mono);
620
+ }
621
+
622
+ textarea:focus {
623
+ border-color: var(--accent-color);
624
+ }
625
+
626
+ .checkbox-grid {
627
+ display: grid;
628
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
629
+ gap: 1rem;
630
+ background: rgba(255, 255, 255, 0.05);
631
+ padding: 1rem;
632
+ border-radius: 8px;
633
+ }
634
+
635
+ .checkbox-item {
636
+ display: flex;
637
+ align-items: center;
638
+ gap: 0.5rem;
639
+ font-size: 0.9rem;
640
+ }
641
+
642
+ .checkbox-item input {
643
+ cursor: pointer;
644
+ }
645
+
646
+ .mb-1 {
647
+ margin-bottom: 1rem;
648
+ }
649
+
650
+ .mb-3 {
651
+ margin-bottom: 3rem;
652
+ }
653
+
654
+ /* Token Selector Row */
655
+ .token-selector-row {
656
+ display: flex;
657
+ align-items: center;
658
+ gap: 1rem;
659
+ flex-wrap: wrap;
660
+ }
661
+
662
+ .token-selector-row .label {
663
+ font-size: 0.9rem;
664
+ color: var(--text-muted);
665
+ }
666
+
667
+ .token-toggles {
668
+ display: flex;
669
+ gap: 0.5rem;
670
+ flex-wrap: wrap;
671
+ }
672
+
673
+ .token-toggle {
674
+ display: flex;
675
+ align-items: center;
676
+ gap: 0.3rem;
677
+ padding: 0.4rem 0.8rem;
678
+ background: var(--card-bg);
679
+ border: 1px solid var(--glass-border);
680
+ border-radius: 6px;
681
+ font-size: 0.85rem;
682
+ cursor: pointer;
683
+ transition: all 0.2s;
684
+ }
685
+
686
+ .token-toggle:hover {
687
+ border-color: var(--accent-color);
688
+ }
689
+
690
+ .token-toggle input {
691
+ margin: 0;
692
+ cursor: pointer;
693
+ }
694
+
695
+ .token-toggle.active {
696
+ background: rgba(0, 210, 255, 0.1);
697
+ border-color: var(--accent-color);
698
+ }
699
+
700
+ /* Account Actions */
701
+ .account-actions {
702
+ display: flex;
703
+ gap: 1rem;
704
+ justify-content: center;
705
+ margin-bottom: 2rem;
706
+ }
707
+
708
+ /* Inline spinner for table cells */
709
+ .cell-spinner {
710
+ display: inline-block;
711
+ width: 14px;
712
+ height: 14px;
713
+ border: 2px solid rgba(255, 255, 255, 0.3);
714
+ border-radius: 50%;
715
+ border-top-color: var(--accent-color);
716
+ animation: spin 0.8s linear infinite;
717
+ }
718
+
719
+ /* ===== CowSwap Styles ===== */
720
+ .swap-wrapper {
721
+ display: flex;
722
+ flex-direction: column;
723
+ align-items: center;
724
+ gap: 1.5rem;
725
+ justify-content: center;
726
+ padding: 2rem 0;
727
+ }
728
+
729
+ .swap-wrapper .table-container {
730
+ width: 100%;
731
+ max-width: 1200px;
732
+ }
733
+
734
+ #cowswap-master-table th:not(:first-child) {
735
+ text-align: right;
736
+ }
737
+
738
+ #cowswap-master-table {
739
+ table-layout: fixed;
740
+ width: 100%;
741
+ }
742
+
743
+ .swap-cards-grid {
744
+ display: grid;
745
+ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
746
+ gap: 1.5rem;
747
+ width: 100%;
748
+ max-width: 1200px;
749
+ }
750
+
751
+ @media (max-width: 900px) {
752
+ .swap-cards-grid {
753
+ grid-template-columns: 1fr;
754
+ }
755
+ }
756
+
757
+ .wrap-balance-info {
758
+ background: rgba(255, 255, 255, 0.03);
759
+ border: 1px solid var(--glass-border);
760
+ border-radius: 8px;
761
+ padding: 0.75rem 1rem;
762
+ margin-bottom: 1rem;
763
+ }
764
+
765
+ .wrap-balance-info .balance-row {
766
+ display: flex;
767
+ justify-content: space-between;
768
+ font-size: 0.9rem;
769
+ padding: 0.25rem 0;
770
+ }
771
+
772
+ .wrap-balance-info .balance-row .label {
773
+ color: var(--text-muted);
774
+ }
775
+
776
+ .wrap-balance-info .balance-row .value {
777
+ font-family: var(--font-mono);
778
+ color: var(--accent-color);
779
+ }
780
+
781
+ .swap-container {
782
+ padding: 2rem;
783
+ width: 100%;
784
+ max-width: 580px;
785
+ }
786
+
787
+ .swap-container h3 {
788
+ margin: 0 0 1.5rem 0;
789
+ font-size: 1.3rem;
790
+ text-align: center;
791
+ }
792
+
793
+ .swap-mode-toggle {
794
+ display: flex;
795
+ justify-content: center;
796
+ gap: 2rem;
797
+ margin-bottom: 1.5rem;
798
+ padding-bottom: 1rem;
799
+ border-bottom: 1px solid var(--glass-border);
800
+ }
801
+
802
+ .radio-item {
803
+ display: flex;
804
+ align-items: center;
805
+ gap: 0.5rem;
806
+ cursor: pointer;
807
+ font-size: 0.95rem;
808
+ }
809
+
810
+ .radio-item input[type="radio"] {
811
+ appearance: none;
812
+ width: 20px;
813
+ height: 20px;
814
+ border: 2px solid var(--glass-border);
815
+ border-radius: 50%;
816
+ background: transparent;
817
+ cursor: pointer;
818
+ position: relative;
819
+ flex-shrink: 0;
820
+ }
821
+
822
+ .radio-item input[type="radio"]:checked {
823
+ border-color: var(--accent-color);
824
+ }
825
+
826
+ .radio-item input[type="radio"]:checked::after {
827
+ content: "";
828
+ position: absolute;
829
+ top: 50%;
830
+ left: 50%;
831
+ transform: translate(-50%, -50%);
832
+ width: 10px;
833
+ height: 10px;
834
+ background: var(--accent-color);
835
+ border-radius: 50%;
836
+ }
837
+
838
+ .swap-cards {
839
+ display: flex;
840
+ align-items: center;
841
+ gap: 1rem;
842
+ margin-bottom: 1.5rem;
843
+ }
844
+
845
+ .swap-card {
846
+ flex: 1;
847
+ background: rgba(255, 255, 255, 0.05);
848
+ border: 1px solid var(--glass-border);
849
+ border-radius: 12px;
850
+ padding: 1rem;
851
+ }
852
+
853
+ .swap-card.active {
854
+ border-color: var(--accent-color);
855
+ box-shadow: 0 0 10px rgba(0, 200, 150, 0.2);
856
+ }
857
+
858
+ .swap-card-header {
859
+ font-size: 0.8rem;
860
+ text-transform: uppercase;
861
+ letter-spacing: 1px;
862
+ opacity: 0.6;
863
+ margin-bottom: 0.75rem;
864
+ }
865
+
866
+ .swap-card select {
867
+ width: 100%;
868
+ margin-bottom: 0.75rem;
869
+ }
870
+
871
+ .swap-card-amount {
872
+ display: flex;
873
+ gap: 0.5rem;
874
+ }
875
+
876
+ .swap-card-amount input {
877
+ flex: 1;
878
+ min-width: 0;
879
+ width: 100%;
880
+ }
881
+
882
+ .swap-card-amount input[readonly] {
883
+ opacity: 0.7;
884
+ cursor: default;
885
+ background: rgba(255, 255, 255, 0.02);
886
+ }
887
+
888
+ /* Hide number input spinners */
889
+ .no-spinners::-webkit-outer-spin-button,
890
+ .no-spinners::-webkit-inner-spin-button {
891
+ -webkit-appearance: none;
892
+ margin: 0;
893
+ }
894
+
895
+ .no-spinners {
896
+ -moz-appearance: textfield;
897
+ }
898
+
899
+ .swap-arrow {
900
+ display: flex;
901
+ align-items: center;
902
+ justify-content: center;
903
+ color: var(--accent-color);
904
+ flex-shrink: 0;
905
+ }
906
+
907
+ @media (max-width: 600px) {
908
+ .swap-cards {
909
+ flex-direction: column;
910
+ }
911
+
912
+ .swap-arrow {
913
+ transform: rotate(90deg);
914
+ }
915
+ }
916
+
917
+ .input-with-btn {
918
+ display: flex;
919
+ gap: 0.5rem;
920
+ }
921
+
922
+ .input-with-btn input {
923
+ flex: 1;
924
+ min-width: 0;
925
+ }
926
+
927
+ .btn-max {
928
+ background: var(--accent-color);
929
+ border: none;
930
+ color: white;
931
+ padding: 0 0.75rem;
932
+ border-radius: 6px;
933
+ font-weight: 600;
934
+ font-size: 0.8rem;
935
+ cursor: pointer;
936
+ transition: background 0.2s;
937
+ white-space: nowrap;
938
+ }
939
+
940
+ .btn-max:hover {
941
+ background: #00c8a0;
942
+ }
943
+
944
+ .btn-max:disabled {
945
+ opacity: 0.6;
946
+ cursor: wait;
947
+ }
948
+
949
+ .btn-spinner {
950
+ display: inline-block;
951
+ width: 12px;
952
+ height: 12px;
953
+ border: 2px solid rgba(255, 255, 255, 0.3);
954
+ border-radius: 50%;
955
+ border-top-color: white;
956
+ animation: spin 0.8s linear infinite;
957
+ }
958
+
959
+ .btn-swap {
960
+ width: 100%;
961
+ background: linear-gradient(135deg, #ff6b35, #f7931e);
962
+ border: none;
963
+ color: white;
964
+ padding: 0.9rem;
965
+ border-radius: 10px;
966
+ font-weight: 600;
967
+ font-size: 1rem;
968
+ cursor: pointer;
969
+ transition:
970
+ transform 0.2s,
971
+ box-shadow 0.2s;
972
+ margin-top: 0.5rem;
973
+ }
974
+
975
+ .btn-swap:hover {
976
+ transform: scale(1.02);
977
+ box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4);
978
+ }
979
+
980
+ .btn-swap:disabled {
981
+ opacity: 0.6;
982
+ cursor: not-allowed;
983
+ transform: none;
984
+ }
985
+
986
+ /* ===== Olas Services Styles ===== */
987
+ .olas-services-grid {
988
+ display: grid;
989
+ grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
990
+ gap: 1.5rem;
991
+ }
992
+
993
+ .empty-state {
994
+ text-align: center;
995
+ padding: 3rem;
996
+ color: var(--text-muted);
997
+ grid-column: 1 / -1;
998
+ display: flex;
999
+ flex-direction: column;
1000
+ align-items: center;
1001
+ justify-content: center;
1002
+ }
1003
+
1004
+ .service-card {
1005
+ padding: 1.5rem;
1006
+ }
1007
+
1008
+ .service-header {
1009
+ display: flex;
1010
+ justify-content: space-between;
1011
+ align-items: center;
1012
+ margin-bottom: 1.2rem;
1013
+ padding-bottom: 1rem;
1014
+ border-bottom: 1px solid var(--glass-border);
1015
+ }
1016
+
1017
+ .service-header h3 {
1018
+ font-size: 1.2rem;
1019
+ font-weight: 600;
1020
+ margin: 0;
1021
+ }
1022
+
1023
+ .service-id {
1024
+ color: var(--text-muted);
1025
+ font-weight: 400;
1026
+ font-size: 0.9rem;
1027
+ }
1028
+
1029
+ .chain-badge {
1030
+ background: rgba(0, 210, 255, 0.15);
1031
+ color: var(--accent-color);
1032
+ padding: 0.3rem 0.8rem;
1033
+ border-radius: 20px;
1034
+ font-size: 0.8rem;
1035
+ font-weight: 500;
1036
+ text-transform: uppercase;
1037
+ }
1038
+
1039
+ .service-accounts-table {
1040
+ width: 100%;
1041
+ margin-bottom: 1.2rem;
1042
+ font-family: var(--font-mono);
1043
+ font-size: 0.85rem;
1044
+ }
1045
+
1046
+ .service-accounts-table th {
1047
+ padding: 0.6rem 0.8rem;
1048
+ font-size: 0.75rem;
1049
+ text-transform: uppercase;
1050
+ letter-spacing: 0.5px;
1051
+ }
1052
+
1053
+ .service-accounts-table td {
1054
+ padding: 0.6rem 0.8rem;
1055
+ }
1056
+
1057
+ .staking-info {
1058
+ background: rgba(255, 255, 255, 0.03);
1059
+ border-radius: 8px;
1060
+ padding: 1rem;
1061
+ margin-bottom: 1.2rem;
1062
+ }
1063
+
1064
+ .staking-row {
1065
+ display: flex;
1066
+ justify-content: space-between;
1067
+ padding: 0.4rem 0;
1068
+ font-size: 0.9rem;
1069
+ }
1070
+
1071
+ .staking-row:not(:last-child) {
1072
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
1073
+ }
1074
+
1075
+ .staking-row .label {
1076
+ color: var(--text-muted);
1077
+ }
1078
+
1079
+ .staking-row .value {
1080
+ font-weight: 500;
1081
+ }
1082
+
1083
+ .staking-row .value.staked,
1084
+ .staking-row .value.deployed {
1085
+ color: var(--success);
1086
+ }
1087
+
1088
+ .staking-row .value.not-staked {
1089
+ color: var(--text-muted);
1090
+ }
1091
+
1092
+ .staking-row .value.rewards {
1093
+ color: var(--accent-color);
1094
+ }
1095
+
1096
+ .staking-row .value.passed {
1097
+ color: var(--success);
1098
+ }
1099
+
1100
+ .staking-row .value.failed {
1101
+ color: var(--warning);
1102
+ }
1103
+
1104
+ .staking-row .value.countdown {
1105
+ color: var(--accent-color);
1106
+ }
1107
+
1108
+ .service-actions {
1109
+ display: flex;
1110
+ gap: 0.5rem;
1111
+ flex-wrap: wrap;
1112
+ justify-content: flex-end;
1113
+ }
1114
+
1115
+ .btn-checkpoint:disabled,
1116
+ .btn-danger:disabled,
1117
+ .btn-primary:disabled {
1118
+ background: #4a4a4a !important;
1119
+ color: #999999 !important;
1120
+ opacity: 0.6;
1121
+ cursor: not-allowed;
1122
+ box-shadow: none !important;
1123
+ transform: none !important;
1124
+ border: 1px solid rgba(255, 255, 255, 0.1);
1125
+ }
1126
+
1127
+ .btn-sm {
1128
+ padding: 0.4rem 0.6rem;
1129
+ font-size: 0.85rem;
1130
+ }
1131
+
1132
+ .btn-primary.btn-sm:hover {
1133
+ transform: scale(1.02);
1134
+ box-shadow: 0 2px 10px rgba(88, 101, 242, 0.3);
1135
+ }
1136
+
1137
+ .btn-warning.btn-sm:hover {
1138
+ transform: scale(1.02);
1139
+ box-shadow: 0 2px 10px rgba(243, 156, 18, 0.3);
1140
+ }
1141
+
1142
+ .btn-secondary.btn-sm {
1143
+ background: transparent;
1144
+ border: 1px solid var(--glass-border);
1145
+ color: var(--text-muted);
1146
+ }
1147
+
1148
+ .btn-secondary.btn-sm:hover {
1149
+ color: white;
1150
+ border-color: var(--text-color);
1151
+ }
1152
+
1153
+ @media (max-width: 500px) {
1154
+ .olas-services-grid {
1155
+ grid-template-columns: 1fr;
1156
+ }
1157
+
1158
+ .service-actions {
1159
+ flex-direction: column;
1160
+ }
1161
+
1162
+ .service-actions button {
1163
+ width: 100%;
1164
+ }
1165
+ }
1166
+
1167
+ /* Liveness Progress Bar */
1168
+ .liveness-progress {
1169
+ position: relative;
1170
+ flex: 1;
1171
+ height: 22px;
1172
+ background: rgba(255, 255, 255, 0.1);
1173
+ border-radius: 12px;
1174
+ overflow: hidden;
1175
+ margin-left: 0.5rem;
1176
+ }
1177
+
1178
+ .liveness-progress .progress-bar {
1179
+ height: 100%;
1180
+ width: var(--width, 0%);
1181
+ transition: width 0.3s ease;
1182
+ border-radius: 12px;
1183
+ }
1184
+
1185
+ .liveness-progress .progress-bar.progress-success {
1186
+ background: linear-gradient(90deg, var(--success), #27ae60);
1187
+ }
1188
+
1189
+ .liveness-progress .progress-bar.progress-warning {
1190
+ background: linear-gradient(90deg, var(--warning), #e67e22);
1191
+ }
1192
+
1193
+ .liveness-progress .progress-text {
1194
+ position: absolute;
1195
+ top: 50%;
1196
+ left: 50%;
1197
+ transform: translate(-50%, -50%);
1198
+ font-size: 0.75rem;
1199
+ font-weight: 600;
1200
+ color: white;
1201
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
1202
+ }
1203
+
1204
+ /* Olas Actions */
1205
+ .olas-actions {
1206
+ display: flex;
1207
+ gap: 1rem;
1208
+ justify-content: center;
1209
+ }
1210
+
1211
+ .explorer-link {
1212
+ color: #ffffff !important;
1213
+ text-decoration: none;
1214
+ transition: color 0.2s;
1215
+ border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
1216
+ }
1217
+
1218
+ .explorer-link:hover {
1219
+ color: var(--accent-color) !important;
1220
+ border-bottom: 1px solid var(--accent-color) !important;
1221
+ text-decoration: none !important;
1222
+ }
1223
+
1224
+ /* Base Utility Classes */
1225
+ .text-center {
1226
+ text-align: center !important;
1227
+ }
1228
+
1229
+ .text-right {
1230
+ text-align: right !important;
1231
+ }
1232
+
1233
+ .text-success {
1234
+ color: var(--success) !important;
1235
+ }
1236
+
1237
+ .text-warning {
1238
+ color: var(--warning) !important;
1239
+ }
1240
+
1241
+ .text-error {
1242
+ color: var(--error) !important;
1243
+ }
1244
+
1245
+ .text-muted {
1246
+ color: var(--text-muted) !important;
1247
+ }
1248
+
1249
+ .opacity-30 {
1250
+ opacity: 0.3 !important;
1251
+ }
1252
+
1253
+ .opacity-60 {
1254
+ opacity: 0.6 !important;
1255
+ }
1256
+
1257
+ .hidden {
1258
+ display: none !important;
1259
+ }
1260
+
1261
+ .w-100 {
1262
+ width: 100% !important;
1263
+ }
1264
+
1265
+ .mb-1 {
1266
+ margin-bottom: 1rem !important;
1267
+ }
1268
+
1269
+ .mb-2 {
1270
+ margin-bottom: 1.5rem !important;
1271
+ }
1272
+
1273
+ .mb-3 {
1274
+ margin-bottom: 3rem !important;
1275
+ }
1276
+
1277
+ /* Modal Widths */
1278
+ .modal-sm {
1279
+ max-width: 380px !important;
1280
+ }
1281
+
1282
+ .modal-md {
1283
+ max-width: 400px !important;
1284
+ }
1285
+
1286
+ .modal-lg {
1287
+ max-width: 450px !important;
1288
+ }
1289
+
1290
+ /* Olas Summary Header */
1291
+ .olas-summary-header {
1292
+ margin: 0 auto 1rem auto;
1293
+ padding: 0.8rem 1.5rem;
1294
+ background: rgba(255, 255, 255, 0.03);
1295
+ border-radius: 8px;
1296
+ border: 1px solid rgba(255, 255, 255, 0.08);
1297
+ max-width: 700px;
1298
+ }
1299
+
1300
+ .olas-summary-grid {
1301
+ display: grid;
1302
+ grid-template-columns: repeat(4, 1fr);
1303
+ gap: 1rem;
1304
+ text-align: center;
1305
+ }
1306
+
1307
+ .olas-summary-item-label {
1308
+ font-size: 0.75rem;
1309
+ color: var(--text-muted);
1310
+ text-transform: uppercase;
1311
+ letter-spacing: 0.5px;
1312
+ margin-bottom: 0.3rem;
1313
+ }
1314
+
1315
+ .olas-summary-item-value {
1316
+ font-size: 1.3rem;
1317
+ font-weight: 600;
1318
+ }
1319
+
1320
+ .olas-summary-item-value.accent {
1321
+ color: var(--accent-color);
1322
+ }
1323
+
1324
+ .olas-summary-item-value.success {
1325
+ color: var(--success);
1326
+ }
1327
+
1328
+ /* Progress Bars */
1329
+ .progress-bar-container {
1330
+ position: relative;
1331
+ flex: 1;
1332
+ height: 22px;
1333
+ background: rgba(255, 255, 255, 0.1);
1334
+ border-radius: 12px;
1335
+ overflow: hidden;
1336
+ }
1337
+
1338
+ /* Utils for JS generated content */
1339
+ .flex-center-gap {
1340
+ display: flex;
1341
+ align-items: center;
1342
+ gap: 0.5rem;
1343
+ }
1344
+
1345
+ .btn-icon-sm {
1346
+ padding: 0.3rem !important;
1347
+ }
1348
+
1349
+ .grayscale {
1350
+ filter: grayscale(100%);
1351
+ }
1352
+
1353
+ .not-allowed {
1354
+ cursor: not-allowed;
1355
+ }
1356
+
1357
+ .spinner-sm {
1358
+ width: 14px !important;
1359
+ height: 14px !important;
1360
+ border-width: 2px !important;
1361
+ margin-right: 0.5rem !important;
1362
+ }
1363
+
1364
+ /* Recent Orders Table */
1365
+ .recent-orders-section {
1366
+ width: 100%;
1367
+ max-width: 1200px;
1368
+ }
1369
+
1370
+ .recent-orders-section h3 {
1371
+ font-size: 1.1rem;
1372
+ margin-bottom: 1rem;
1373
+ color: var(--text-muted);
1374
+ }
1375
+
1376
+ #recent-orders-table {
1377
+ width: 100%;
1378
+ }
1379
+
1380
+ .order-status {
1381
+ display: inline-flex;
1382
+ align-items: center;
1383
+ gap: 0.5rem;
1384
+ padding: 0.25rem 0.6rem;
1385
+ border-radius: 4px;
1386
+ font-size: 0.8rem;
1387
+ font-weight: 500;
1388
+ text-transform: capitalize;
1389
+ }
1390
+
1391
+ .order-status.fulfilled {
1392
+ background: rgba(46, 204, 113, 0.2);
1393
+ color: var(--success);
1394
+ }
1395
+
1396
+ .order-status.open {
1397
+ background: rgba(0, 210, 255, 0.2);
1398
+ color: var(--accent-color);
1399
+ }
1400
+
1401
+ .order-status.expired,
1402
+ .order-status.cancelled {
1403
+ background: rgba(231, 76, 60, 0.2);
1404
+ color: var(--error);
1405
+ }
1406
+
1407
+ .order-progress {
1408
+ display: flex;
1409
+ flex-direction: column;
1410
+ gap: 0.25rem;
1411
+ }
1412
+
1413
+ .progress-bar-container {
1414
+ width: 100px;
1415
+ height: 6px;
1416
+ background: rgba(255, 255, 255, 0.1);
1417
+ border-radius: 3px;
1418
+ overflow: hidden;
1419
+ }
1420
+
1421
+ .progress-bar {
1422
+ height: 100%;
1423
+ background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
1424
+ border-radius: 3px;
1425
+ transition: width 1s linear;
1426
+ }
1427
+
1428
+ .progress-time {
1429
+ font-size: 0.75rem;
1430
+ color: var(--text-muted);
1431
+ }
1432
+
1433
+ /* Order Links */
1434
+ .order-link {
1435
+ color: var(--text-muted);
1436
+ text-decoration: none;
1437
+ transition: color 0.2s;
1438
+ }
1439
+
1440
+ .order-link:hover {
1441
+ color: var(--accent-color);
1442
+ text-decoration: underline;
1443
+ }