bittensor-cli 9.5.0__py3-none-any.whl → 9.5.1__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,1058 @@
1
+ /* ===================== Base Styles & Typography ===================== */
2
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Noto+Sans:wght@400;500;600&display=swap');
3
+
4
+ body {
5
+ font-family: 'Inter', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Arial Unicode MS', sans-serif;
6
+ margin: 0;
7
+ padding: 24px;
8
+ background: #000000;
9
+ color: #ffffff;
10
+ }
11
+
12
+ input, button, select {
13
+ font-family: inherit;
14
+ font-feature-settings: normal;
15
+ }
16
+
17
+ /* ===================== Main Page Header ===================== */
18
+ .header {
19
+ display: flex;
20
+ justify-content: space-between;
21
+ align-items: center;
22
+ padding: 16px 24px;
23
+ background: rgba(255, 255, 255, 0.05);
24
+ border-radius: 12px;
25
+ margin-bottom: 24px;
26
+ backdrop-filter: blur(10px);
27
+ }
28
+
29
+ .wallet-info {
30
+ display: flex;
31
+ flex-direction: column;
32
+ gap: 4px;
33
+ }
34
+
35
+ .wallet-name {
36
+ font-size: 1.1em;
37
+ font-weight: 500;
38
+ color: #FF9900;
39
+ }
40
+
41
+ .wallet-address-container {
42
+ position: relative;
43
+ cursor: pointer;
44
+ display: inline-flex;
45
+ align-items: center;
46
+ gap: 8px;
47
+ }
48
+
49
+ .wallet-address {
50
+ font-size: 0.9em;
51
+ color: rgba(255, 255, 255, 0.5);
52
+ font-family: monospace;
53
+ transition: color 0.2s ease;
54
+ }
55
+
56
+ .wallet-address-container:hover .wallet-address {
57
+ color: rgba(255, 255, 255, 0.8);
58
+ }
59
+
60
+ .copy-indicator {
61
+ background: rgba(255, 153, 0, 0.1);
62
+ color: rgba(255, 153, 0, 0.8);
63
+ padding: 2px 6px;
64
+ border-radius: 4px;
65
+ font-size: 0.7em;
66
+ transition: all 0.2s ease;
67
+ opacity: 0;
68
+ }
69
+
70
+ .wallet-address-container:hover .copy-indicator {
71
+ opacity: 1;
72
+ background: rgba(255, 153, 0, 0.2);
73
+ }
74
+
75
+ .wallet-address-container.copied .copy-indicator {
76
+ opacity: 1;
77
+ background: rgba(255, 153, 0, 0.3);
78
+ color: #FF9900;
79
+ }
80
+
81
+ .stake-metrics {
82
+ display: flex;
83
+ gap: 24px;
84
+ align-items: center;
85
+ }
86
+
87
+ .stake-metric {
88
+ display: flex;
89
+ flex-direction: column;
90
+ align-items: flex-end;
91
+ gap: 2px;
92
+ position: relative;
93
+ padding: 8px 16px;
94
+ border-radius: 8px;
95
+ transition: all 0.2s ease;
96
+ }
97
+
98
+ .stake-metric:hover {
99
+ background: rgba(255, 153, 0, 0.05);
100
+ }
101
+
102
+ .stake-metric .metric-label {
103
+ font-size: 0.8em;
104
+ color: rgba(255, 255, 255, 0.6);
105
+ text-transform: uppercase;
106
+ letter-spacing: 0.5px;
107
+ }
108
+
109
+ .stake-metric .metric-value {
110
+ font-size: 1.1em;
111
+ font-weight: 500;
112
+ color: #FF9900;
113
+ font-feature-settings: "tnum";
114
+ font-variant-numeric: tabular-nums;
115
+ }
116
+
117
+ .slippage-value {
118
+ display: flex;
119
+ align-items: center;
120
+ gap: 6px;
121
+ }
122
+
123
+ .slippage-detail {
124
+ font-size: 0.8em;
125
+ color: rgba(255, 255, 255, 0.5);
126
+ }
127
+
128
+ /* ===================== Main Page Filters ===================== */
129
+ .filters-section {
130
+ display: flex;
131
+ justify-content: space-between;
132
+ align-items: center;
133
+ margin: 24px 0;
134
+ gap: 16px;
135
+ }
136
+
137
+ .search-box input {
138
+ padding: 10px 16px;
139
+ border-radius: 8px;
140
+ border: 1px solid rgba(255, 255, 255, 0.1);
141
+ background: rgba(255, 255, 255, 0.03);
142
+ color: rgba(255, 255, 255, 0.7);
143
+ width: 240px;
144
+ font-size: 0.9em;
145
+ transition: all 0.2s ease;
146
+ }
147
+ .search-box input::placeholder {
148
+ color: rgba(255, 255, 255, 0.4);
149
+ }
150
+
151
+ .search-box input:focus {
152
+ outline: none;
153
+ border-color: rgba(255, 153, 0, 0.5);
154
+ background: rgba(255, 255, 255, 0.06);
155
+ color: rgba(255, 255, 255, 0.9);
156
+ }
157
+
158
+ .filter-toggles {
159
+ display: flex;
160
+ gap: 16px;
161
+ }
162
+
163
+ .filter-toggles label {
164
+ display: flex;
165
+ align-items: center;
166
+ gap: 8px;
167
+ color: rgba(255, 255, 255, 0.7);
168
+ font-size: 0.9em;
169
+ cursor: pointer;
170
+ user-select: none;
171
+ }
172
+
173
+ /* Checkbox styling for both main page and subnet page */
174
+ .filter-toggles input[type="checkbox"],
175
+ .toggle-label input[type="checkbox"] {
176
+ -webkit-appearance: none;
177
+ -moz-appearance: none;
178
+ appearance: none;
179
+ width: 18px;
180
+ height: 18px;
181
+ border: 2px solid rgba(255, 153, 0, 0.3);
182
+ border-radius: 4px;
183
+ background: rgba(0, 0, 0, 0.2);
184
+ cursor: pointer;
185
+ position: relative;
186
+ transition: all 0.2s ease;
187
+ }
188
+
189
+ .filter-toggles input[type="checkbox"]:hover,
190
+ .toggle-label input[type="checkbox"]:hover {
191
+ border-color: #FF9900;
192
+ }
193
+
194
+ .filter-toggles input[type="checkbox"]:checked,
195
+ .toggle-label input[type="checkbox"]:checked {
196
+ background: #FF9900;
197
+ border-color: #FF9900;
198
+ }
199
+
200
+ .filter-toggles input[type="checkbox"]:checked::after,
201
+ .toggle-label input[type="checkbox"]:checked::after {
202
+ content: '';
203
+ position: absolute;
204
+ left: 5px;
205
+ top: 2px;
206
+ width: 4px;
207
+ height: 8px;
208
+ border: solid #000;
209
+ border-width: 0 2px 2px 0;
210
+ transform: rotate(45deg);
211
+ }
212
+
213
+ .filter-toggles label:hover,
214
+ .toggle-label:hover {
215
+ color: rgba(255, 255, 255, 0.9);
216
+ }
217
+ .disabled-label {
218
+ opacity: 0.5;
219
+ cursor: not-allowed;
220
+ }
221
+ .add-stake-button {
222
+ padding: 10px 20px;
223
+ font-size: 0.8rem;
224
+ }
225
+ .export-csv-button {
226
+ padding: 10px 20px;
227
+ font-size: 0.8rem;
228
+ }
229
+ .button-group {
230
+ display: flex;
231
+ gap: 8px;
232
+ }
233
+
234
+ /* ===================== Main Page Subnet Table ===================== */
235
+ .subnets-table-container {
236
+ background: rgba(255, 255, 255, 0.02);
237
+ border-radius: 12px;
238
+ overflow: hidden;
239
+ }
240
+
241
+ .subnets-table {
242
+ width: 100%;
243
+ border-collapse: collapse;
244
+ font-size: 0.95em;
245
+ }
246
+
247
+ .subnets-table th {
248
+ background: rgba(255, 255, 255, 0.05);
249
+ font-weight: 500;
250
+ text-align: left;
251
+ padding: 16px;
252
+ color: rgba(255, 255, 255, 0.7);
253
+ }
254
+
255
+ .subnets-table td {
256
+ padding: 14px 16px;
257
+ border-top: 1px solid rgba(255, 255, 255, 0.05);
258
+ }
259
+
260
+ .subnet-row {
261
+ cursor: pointer;
262
+ transition: background-color 0.2s ease;
263
+ }
264
+
265
+ .subnet-row:hover {
266
+ background: rgba(255, 255, 255, 0.05);
267
+ }
268
+
269
+ .subnet-name {
270
+ color: #ffffff;
271
+ font-weight: 500;
272
+ font-size: 0.95em;
273
+ }
274
+
275
+ .price, .market-cap, .your-stake, .emission {
276
+ font-family: 'Inter', monospace;
277
+ font-size: 1.0em;
278
+ font-feature-settings: "tnum";
279
+ font-variant-numeric: tabular-nums;
280
+ letter-spacing: 0.01em;
281
+ white-space: nowrap;
282
+ }
283
+
284
+ .stake-status {
285
+ font-size: 0.85em;
286
+ padding: 4px 8px;
287
+ border-radius: 4px;
288
+ background: rgba(255, 255, 255, 0.05);
289
+ }
290
+
291
+ .stake-status.staked {
292
+ background: rgba(255, 153, 0, 0.1);
293
+ color: #FF9900;
294
+ }
295
+
296
+ .subnets-table th.sortable {
297
+ cursor: pointer;
298
+ position: relative;
299
+ padding-right: 20px;
300
+ }
301
+
302
+ .subnets-table th.sortable:hover {
303
+ color: #FF9900;
304
+ }
305
+
306
+ .subnets-table th[data-sort] {
307
+ color: #FF9900;
308
+ }
309
+
310
+ /* ===================== Subnet Tiles View ===================== */
311
+ .subnet-tiles-container {
312
+ display: flex;
313
+ flex-wrap: wrap;
314
+ justify-content: center;
315
+ gap: 1rem;
316
+ padding: 1rem;
317
+ }
318
+
319
+ .subnet-tile {
320
+ width: clamp(75px, 6vw, 600px);
321
+ height: clamp(75px, 6vw, 600px);
322
+ display: flex;
323
+ flex-direction: column;
324
+ align-items: center;
325
+ justify-content: center;
326
+ background: rgba(255, 255, 255, 0.05);
327
+ border-radius: 8px;
328
+ position: relative;
329
+ cursor: pointer;
330
+ transition: all 0.2s ease;
331
+ overflow: hidden;
332
+ font-size: clamp(0.6rem, 1vw, 1.4rem);
333
+ }
334
+
335
+ .tile-netuid {
336
+ position: absolute;
337
+ top: 0.4em;
338
+ left: 0.4em;
339
+ font-size: 0.7em;
340
+ color: rgba(255, 255, 255, 0.6);
341
+ }
342
+
343
+ .tile-symbol {
344
+ font-size: 1.6em;
345
+ margin-bottom: 0.4em;
346
+ color: #FF9900;
347
+ }
348
+
349
+ .tile-name {
350
+ display: block;
351
+ width: 100%;
352
+ white-space: nowrap;
353
+ overflow: hidden;
354
+ text-overflow: ellipsis;
355
+ font-size: 1em;
356
+ text-align: center;
357
+ color: rgba(255, 255, 255, 0.9);
358
+ margin: 0 0.4em;
359
+ }
360
+
361
+ .tile-market-cap {
362
+ font-size: 0.9em;
363
+ color: rgba(255, 255, 255, 0.5);
364
+ margin-top: 2px;
365
+ }
366
+
367
+ .subnet-tile:hover {
368
+ transform: translateY(-2px);
369
+ box-shadow:
370
+ 0 0 12px rgba(255, 153, 0, 0.6),
371
+ 0 0 24px rgba(255, 153, 0, 0.3);
372
+ background: rgba(255, 255, 255, 0.08);
373
+ }
374
+
375
+ .subnet-tile.staked {
376
+ border: 1px solid rgba(255, 153, 0, 0.3);
377
+ }
378
+
379
+ .subnet-tile.staked::before {
380
+ content: '';
381
+ position: absolute;
382
+ top: 0.4em;
383
+ right: 0.4em;
384
+ width: 0.5em;
385
+ height: 0.5em;
386
+ border-radius: 50%;
387
+ background: #FF9900;
388
+ }
389
+
390
+ /* ===================== Subnet Detail Page Header ===================== */
391
+ .subnet-header {
392
+ padding: 16px;
393
+ border-radius: 12px;
394
+ margin-bottom: 0px;
395
+ }
396
+
397
+ .subnet-header h2 {
398
+ margin: 0;
399
+ font-size: 1.3em;
400
+ }
401
+
402
+ .subnet-price {
403
+ font-size: 1.3em;
404
+ color: #FF9900;
405
+ }
406
+
407
+ .subnet-title-row {
408
+ display: grid;
409
+ grid-template-columns: 300px 1fr 300px;
410
+ align-items: start;
411
+ margin: 0;
412
+ position: relative;
413
+ min-height: 60px;
414
+ }
415
+
416
+ .title-price {
417
+ grid-column: 1;
418
+ padding-top: 0;
419
+ margin-top: -10px;
420
+ }
421
+
422
+ .header-row {
423
+ display: flex;
424
+ justify-content: space-between;
425
+ align-items: center;
426
+ width: 100%;
427
+ margin-bottom: 16px;
428
+ }
429
+
430
+ .toggle-group {
431
+ display: flex;
432
+ flex-direction: column;
433
+ gap: 8px;
434
+ align-items: flex-end;
435
+ }
436
+
437
+ .toggle-label {
438
+ display: flex;
439
+ align-items: center;
440
+ gap: 8px;
441
+ color: rgba(255, 255, 255, 0.7);
442
+ font-size: 0.9em;
443
+ cursor: pointer;
444
+ user-select: none;
445
+ }
446
+
447
+ .back-button {
448
+ background: rgba(255, 255, 255, 0.05);
449
+ border: 1px solid rgba(255, 255, 255, 0.1);
450
+ color: rgba(255, 255, 255, 0.8);
451
+ padding: 8px 16px;
452
+ border-radius: 8px;
453
+ cursor: pointer;
454
+ font-size: 0.9em;
455
+ transition: all 0.2s ease;
456
+ margin-bottom: 16px;
457
+ }
458
+
459
+ .back-button:hover {
460
+ background: rgba(255, 255, 255, 0.1);
461
+ border-color: rgba(255, 255, 255, 0.2);
462
+ }
463
+
464
+ /* ===================== Network Visualization ===================== */
465
+ .network-visualization-container {
466
+ position: absolute;
467
+ left: 50%;
468
+ transform: translateX(-50%);
469
+ top: -50px;
470
+ width: 700px;
471
+ height: 80px;
472
+ z-index: 1;
473
+ }
474
+
475
+ .network-visualization {
476
+ width: 700px;
477
+ height: 80px;
478
+ position: relative;
479
+ }
480
+
481
+ #network-canvas {
482
+ background: transparent;
483
+ position: relative;
484
+ z-index: 1;
485
+ }
486
+
487
+ /* Gradient behind visualization */
488
+ .network-visualization::after {
489
+ content: '';
490
+ position: absolute;
491
+ top: 0;
492
+ left: 0;
493
+ right: 0;
494
+ height: 100%;
495
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 100%);
496
+ z-index: 0;
497
+ pointer-events: none;
498
+ }
499
+
500
+ /* ===================== Subnet Detail Metrics ===================== */
501
+ .network-metrics {
502
+ display: grid;
503
+ grid-template-columns: repeat(5, 1fr);
504
+ gap: 12px;
505
+ margin: 0;
506
+ margin-top: 16px;
507
+ }
508
+
509
+ /* Base card styles - applied to both network and metric cards */
510
+ .network-card, .metric-card {
511
+ background: rgba(255, 255, 255, 0.05);
512
+ border-radius: 8px;
513
+ padding: 12px 16px;
514
+ min-height: 50px;
515
+ display: flex;
516
+ flex-direction: column;
517
+ justify-content: center;
518
+ gap: 4px;
519
+ }
520
+
521
+ /* Separate styling for moving price value */
522
+ #network-moving-price {
523
+ color: #FF9900;
524
+ }
525
+
526
+ .metrics-section {
527
+ margin-top: 0px;
528
+ margin-bottom: 16px;
529
+ }
530
+
531
+ .metrics-group {
532
+ display: grid;
533
+ grid-template-columns: repeat(5, 1fr);
534
+ gap: 12px;
535
+ margin: 0;
536
+ margin-top: 2px;
537
+ }
538
+
539
+ .market-metrics .metric-card {
540
+ background: rgba(255, 255, 255, 0.05);
541
+ min-height: 70px;
542
+ }
543
+
544
+ .metric-label {
545
+ font-size: 0.85em;
546
+ color: rgba(255, 255, 255, 0.7);
547
+ margin: 0;
548
+ }
549
+
550
+ .metric-value {
551
+ font-size: 1.2em;
552
+ line-height: 1.3;
553
+ margin: 0;
554
+ }
555
+
556
+ /* Add status colors */
557
+ .registration-status {
558
+ color: #2ECC71;
559
+ }
560
+
561
+ .registration-status.closed {
562
+ color: #ff4444; /* Red color for closed status */
563
+ }
564
+
565
+ .cr-status {
566
+ color: #2ECC71;
567
+ }
568
+
569
+ .cr-status.disabled {
570
+ color: #ff4444; /* Red color for disabled status */
571
+ }
572
+
573
+ /* ===================== Stakes Table ===================== */
574
+ .stakes-container {
575
+ margin-top: 24px;
576
+ padding: 0 24px;
577
+ }
578
+
579
+ .stakes-header {
580
+ display: flex;
581
+ justify-content: space-between;
582
+ align-items: center;
583
+ margin-bottom: 16px;
584
+ }
585
+
586
+ .stakes-header h3 {
587
+ font-size: 1.2em;
588
+ color: #ffffff;
589
+ margin: 0;
590
+ }
591
+
592
+ .stakes-table-container {
593
+ background: rgba(255, 255, 255, 0.02);
594
+ border-radius: 12px;
595
+ overflow: hidden;
596
+ margin-bottom: 24px;
597
+ width: 100%;
598
+ }
599
+
600
+ .stakes-table {
601
+ width: 100%;
602
+ border-collapse: collapse;
603
+ }
604
+
605
+ .stakes-table th {
606
+ background: rgba(255, 255, 255, 0.05);
607
+ padding: 16px;
608
+ text-align: left;
609
+ font-weight: 500;
610
+ color: rgba(255, 255, 255, 0.7);
611
+ }
612
+
613
+ .stakes-table td {
614
+ padding: 16px;
615
+ border-top: 1px solid rgba(255, 255, 255, 0.05);
616
+ }
617
+
618
+ .stakes-table tr {
619
+ transition: background-color 0.2s ease;
620
+ }
621
+
622
+ .stakes-table tr:nth-child(even) {
623
+ background: rgba(255, 255, 255, 0.02);
624
+ }
625
+
626
+ .stakes-table tr:hover {
627
+ background: transparent;
628
+ }
629
+
630
+ .no-stakes-row td {
631
+ text-align: center;
632
+ padding: 32px;
633
+ color: rgba(255, 255, 255, 0.5);
634
+ }
635
+
636
+ /* Table styles consistency */
637
+ .stakes-table th, .network-table th {
638
+ background: rgba(255, 255, 255, 0.05);
639
+ padding: 16px;
640
+ text-align: left;
641
+ font-weight: 500;
642
+ color: rgba(255, 255, 255, 0.7);
643
+ transition: color 0.2s ease;
644
+ }
645
+
646
+ /* Sortable columns */
647
+ .stakes-table th.sortable, .network-table th.sortable {
648
+ cursor: pointer;
649
+ }
650
+
651
+ /* Active sort column - only change color */
652
+ .stakes-table th.sortable[data-sort], .network-table th.sortable[data-sort] {
653
+ color: #FF9900;
654
+ }
655
+
656
+ /* Hover effects - only change color */
657
+ .stakes-table th.sortable:hover, .network-table th.sortable:hover {
658
+ color: #FF9900;
659
+ }
660
+
661
+ /* Remove hover background from table rows */
662
+ .stakes-table tr:hover {
663
+ background: transparent;
664
+ }
665
+
666
+ /* ===================== Network Table ===================== */
667
+ .network-table-container {
668
+ margin-top: 60px;
669
+ position: relative;
670
+ z-index: 2;
671
+ background: rgba(0, 0, 0, 0.8);
672
+ }
673
+
674
+ .network-table {
675
+ width: 100%;
676
+ border-collapse: collapse;
677
+ table-layout: fixed;
678
+ }
679
+
680
+ .network-table th {
681
+ background: rgba(255, 255, 255, 0.05);
682
+ padding: 16px;
683
+ text-align: left;
684
+ font-weight: 500;
685
+ color: rgba(255, 255, 255, 0.7);
686
+ }
687
+
688
+ .network-table td {
689
+ padding: 16px;
690
+ border-top: 1px solid rgba(255, 255, 255, 0.05);
691
+ }
692
+
693
+ .network-table tr {
694
+ cursor: pointer;
695
+ transition: background-color 0.2s ease;
696
+ }
697
+
698
+ .network-table tr:hover {
699
+ background-color: rgba(255, 255, 255, 0.05);
700
+ }
701
+
702
+ .network-table tr:nth-child(even) {
703
+ background-color: rgba(255, 255, 255, 0.02);
704
+ }
705
+
706
+ .network-table tr:nth-child(even):hover {
707
+ background-color: rgba(255, 255, 255, 0.05);
708
+ }
709
+
710
+ .network-search-container {
711
+ display: flex;
712
+ align-items: center;
713
+ margin-bottom: 16px;
714
+ padding: 0 16px;
715
+ }
716
+
717
+ .network-search {
718
+ width: 100%;
719
+ padding: 12px 16px;
720
+ border: 1px solid rgba(255, 153, 0, 0.2);
721
+ border-radius: 8px;
722
+ background: rgba(0, 0, 0, 0.2);
723
+ color: #ffffff;
724
+ font-size: 0.95em;
725
+ transition: all 0.2s ease;
726
+ }
727
+
728
+ .network-search:focus {
729
+ outline: none;
730
+ border-color: rgba(255, 153, 0, 0.5);
731
+ background: rgba(0, 0, 0, 0.3);
732
+ caret-color: #FF9900;
733
+ }
734
+
735
+ .network-search::placeholder {
736
+ color: rgba(255, 255, 255, 0.3);
737
+ }
738
+
739
+ /* ===================== Cell Styles & Formatting ===================== */
740
+ .hotkey-cell {
741
+ max-width: 200px;
742
+ position: relative;
743
+ }
744
+
745
+ .hotkey-container {
746
+ position: relative;
747
+ display: inline-block;
748
+ max-width: 100%;
749
+ }
750
+
751
+ .hotkey-identity, .truncated-address {
752
+ color: rgba(255, 255, 255, 0.8);
753
+ display: inline-block;
754
+ max-width: 100%;
755
+ overflow: hidden;
756
+ text-overflow: ellipsis;
757
+ }
758
+
759
+ .copy-button {
760
+ position: absolute;
761
+ top: -20px; /* Position above the text */
762
+ right: 0;
763
+ background: rgba(255, 153, 0, 0.1);
764
+ color: rgba(255, 255, 255, 0.6);
765
+ padding: 2px 6px;
766
+ border-radius: 4px;
767
+ font-size: 0.7em;
768
+ cursor: pointer;
769
+ opacity: 0;
770
+ transition: all 0.2s ease;
771
+ transform: translateY(5px);
772
+ }
773
+
774
+ .hotkey-container:hover .copy-button {
775
+ opacity: 1;
776
+ transform: translateY(0);
777
+ }
778
+
779
+ .copy-button:hover {
780
+ background: rgba(255, 153, 0, 0.2);
781
+ color: #FF9900;
782
+ }
783
+
784
+ .address-cell {
785
+ max-width: 150px;
786
+ position: relative;
787
+ white-space: nowrap;
788
+ overflow: hidden;
789
+ text-overflow: ellipsis;
790
+ }
791
+
792
+ .address-container {
793
+ display: flex;
794
+ align-items: center;
795
+ cursor: pointer;
796
+ position: relative;
797
+ }
798
+
799
+ .address-container:hover::after {
800
+ content: 'Click to copy';
801
+ position: absolute;
802
+ right: 0;
803
+ top: 50%;
804
+ transform: translateY(-50%);
805
+ background: rgba(255, 153, 0, 0.1);
806
+ color: #FF9900;
807
+ padding: 2px 6px;
808
+ border-radius: 4px;
809
+ font-size: 0.8em;
810
+ opacity: 0.8;
811
+ }
812
+
813
+ .truncated-address {
814
+ font-family: monospace;
815
+ color: rgba(255, 255, 255, 0.8);
816
+ overflow: hidden;
817
+ text-overflow: ellipsis;
818
+ }
819
+
820
+ .truncated-address:hover {
821
+ color: #FF9900;
822
+ }
823
+
824
+ .registered-yes {
825
+ color: #FF9900;
826
+ font-weight: 500;
827
+ display: flex;
828
+ align-items: center;
829
+ gap: 4px;
830
+ }
831
+
832
+ .registered-no {
833
+ color: #ff4444;
834
+ font-weight: 500;
835
+ display: flex;
836
+ align-items: center;
837
+ gap: 4px;
838
+ }
839
+
840
+ .manage-button {
841
+ background: rgba(255, 153, 0, 0.1);
842
+ border: 1px solid rgba(255, 153, 0, 0.2);
843
+ color: #FF9900;
844
+ padding: 6px 12px;
845
+ border-radius: 6px;
846
+ cursor: pointer;
847
+ transition: all 0.2s ease;
848
+ }
849
+
850
+ .manage-button:hover {
851
+ background: rgba(255, 153, 0, 0.2);
852
+ transform: translateY(-1px);
853
+ }
854
+
855
+ .hotkey-identity {
856
+ display: inline-block;
857
+ max-width: 100%;
858
+ overflow: hidden;
859
+ text-overflow: ellipsis;
860
+ color: #FF9900;
861
+ }
862
+
863
+ .identity-cell {
864
+ max-width: 700px;
865
+ font-size: 0.90em;
866
+ letter-spacing: -0.2px;
867
+ color: #FF9900;
868
+ }
869
+
870
+ .per-day {
871
+ font-size: 0.75em;
872
+ opacity: 0.7;
873
+ margin-left: 4px;
874
+ }
875
+
876
+ /* ===================== Neuron Detail Panel ===================== */
877
+ #neuron-detail-container {
878
+ background: rgba(255, 255, 255, 0.02);
879
+ border-radius: 12px;
880
+ padding: 16px;
881
+ margin-top: 16px;
882
+ }
883
+
884
+ .neuron-detail-header {
885
+ display: flex;
886
+ align-items: center;
887
+ gap: 16px;
888
+ margin-bottom: 16px;
889
+ }
890
+
891
+ .neuron-detail-content {
892
+ display: flex;
893
+ flex-direction: column;
894
+ gap: 16px;
895
+ }
896
+
897
+ .neuron-info-top {
898
+ display: flex;
899
+ flex-direction: column;
900
+ gap: 8px;
901
+ }
902
+
903
+ .neuron-keys {
904
+ display: flex;
905
+ flex-direction: column;
906
+ gap: 4px;
907
+ font-size: 0.9em;
908
+ color: rgba(255, 255, 255, 0.6);
909
+ font-size: 1em;
910
+ color: rgba(255, 255, 255, 0.7);
911
+ }
912
+
913
+ .neuron-cards-container {
914
+ display: flex;
915
+ flex-direction: column;
916
+ gap: 12px;
917
+ }
918
+
919
+ .neuron-metrics-row {
920
+ display: grid;
921
+ grid-template-columns: repeat(6, 1fr);
922
+ gap: 12px;
923
+ margin: 0;
924
+ }
925
+
926
+ .neuron-metrics-row.last-row {
927
+ grid-template-columns: repeat(3, 1fr);
928
+ }
929
+
930
+ /* IP Info styling */
931
+ #neuron-ipinfo {
932
+ font-size: 0.85em;
933
+ line-height: 1.4;
934
+ white-space: nowrap;
935
+ }
936
+
937
+ #neuron-ipinfo .no-connection {
938
+ color: #ff4444;
939
+ font-weight: 500;
940
+ }
941
+
942
+ /* Adjust metric card for IP info to accommodate multiple lines */
943
+ .neuron-cards-container .metric-card:has(#neuron-ipinfo) {
944
+ min-height: 85px;
945
+ }
946
+
947
+ /* ===================== Subnet Page Color Overrides ===================== */
948
+ /* Subnet page specific style */
949
+ .subnet-page .metric-card-title,
950
+ .subnet-page .network-card-title {
951
+ color: rgba(255, 255, 255, 0.7);
952
+ }
953
+
954
+ .subnet-page .metric-card .metric-value,
955
+ .subnet-page .metric-value {
956
+ color: white;
957
+ }
958
+
959
+ /* Green values */
960
+ .subnet-page .validator-true,
961
+ .subnet-page .active-yes,
962
+ .subnet-page .registration-open,
963
+ .subnet-page .cr-enabled,
964
+ .subnet-page .ip-info {
965
+ color: #FF9900;
966
+ }
967
+
968
+ /* Red values */
969
+ .subnet-page .validator-false,
970
+ .subnet-page .active-no,
971
+ .subnet-page .registration-closed,
972
+ .subnet-page .cr-disabled,
973
+ .subnet-page .ip-na {
974
+ color: #ff4444;
975
+ }
976
+
977
+ /* Keep symbols green in subnet page */
978
+ .subnet-page .symbol {
979
+ color: #FF9900;
980
+ }
981
+
982
+ /* ===================== Responsive Styles ===================== */
983
+ @media (max-width: 1200px) {
984
+ .stakes-table {
985
+ display: block;
986
+ overflow-x: auto;
987
+ }
988
+
989
+ .network-metrics {
990
+ grid-template-columns: repeat(3, 1fr);
991
+ }
992
+ }
993
+
994
+ @media (min-width: 1201px) {
995
+ .network-metrics {
996
+ grid-template-columns: repeat(5, 1fr);
997
+ }
998
+ }
999
+ /* ===== Splash Screen ===== */
1000
+ #splash-screen {
1001
+ position: fixed;
1002
+ top: 0;
1003
+ left: 0;
1004
+ width: 100vw;
1005
+ height: 100vh;
1006
+ background: #000000;
1007
+ display: flex;
1008
+ align-items: center;
1009
+ justify-content: center;
1010
+ z-index: 999999;
1011
+ opacity: 1;
1012
+ transition: opacity 1s ease;
1013
+ }
1014
+
1015
+ #splash-screen.fade-out {
1016
+ opacity: 0;
1017
+ }
1018
+
1019
+ .splash-content {
1020
+ text-align: center;
1021
+ color: #FF9900;
1022
+ opacity: 0;
1023
+ animation: fadeIn 1.2s ease forwards;
1024
+ }
1025
+ @keyframes fadeIn {
1026
+ 0% {
1027
+ opacity: 0;
1028
+ transform: scale(0.97);
1029
+ }
1030
+ 100% {
1031
+ opacity: 1;
1032
+ transform: scale(1);
1033
+ }
1034
+ }
1035
+
1036
+ /* Title & text styling */
1037
+ .title-row {
1038
+ display: flex;
1039
+ align-items: baseline;
1040
+ gap: 1rem;
1041
+ }
1042
+
1043
+ .splash-title {
1044
+ font-size: 2.4rem;
1045
+ margin: 0;
1046
+ padding: 0;
1047
+ font-weight: 600;
1048
+ color: #FF9900;
1049
+ }
1050
+
1051
+ .beta-text {
1052
+ font-size: 0.9rem;
1053
+ color: #FF9900;
1054
+ background: rgba(255, 153, 0, 0.1);
1055
+ padding: 2px 6px;
1056
+ border-radius: 4px;
1057
+ font-weight: 500;
1058
+ }