moon-inferno 0.4.2 → 0.4.8

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.
Files changed (3) hide show
  1. package/dist/index.css +158 -78
  2. package/dist/styles.css +158 -78
  3. package/package.json +5 -5
package/dist/index.css CHANGED
@@ -134,11 +134,20 @@
134
134
  border: 1px solid var(--mi-color-border, #332D40);
135
135
  border-radius: var(--mi-radius-md, 6px);
136
136
  color: var(--mi-color-text, #F1F5F9);
137
- overflow: hidden;
137
+ position: relative;
138
+ overflow: visible;
138
139
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
139
140
  width: 100%;
140
141
  max-width: 100%;
141
142
  }
143
+ .mi-card__header:first-child {
144
+ border-top-left-radius: var(--mi-radius-md, 6px);
145
+ border-top-right-radius: var(--mi-radius-md, 6px);
146
+ }
147
+ .mi-card__footer:last-child {
148
+ border-bottom-left-radius: var(--mi-radius-md, 6px);
149
+ border-bottom-right-radius: var(--mi-radius-md, 6px);
150
+ }
142
151
  .mi-card--interactive {
143
152
  cursor: pointer;
144
153
  }
@@ -397,7 +406,7 @@
397
406
  }
398
407
  .mi-tab:hover:not(.mi-tab--selected):not(:disabled) {
399
408
  color: var(--mi-color-text, #F1F5F9);
400
- background-color: rgba(255, 77, 0, 0.08);
409
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.08));
401
410
  }
402
411
  .mi-tab:disabled {
403
412
  opacity: 0.45;
@@ -408,7 +417,7 @@
408
417
  outline-offset: 2px;
409
418
  }
410
419
  .mi-tabs--inferno .mi-tab-list {
411
- background: rgba(18, 16, 25, 0.95);
420
+ background: var(--mi-color-surface, rgba(18, 16, 25, 0.95));
412
421
  backdrop-filter: blur(16px);
413
422
  -webkit-backdrop-filter: blur(16px);
414
423
  border: 1px solid var(--mi-color-border, rgba(255, 255, 255, 0.12));
@@ -417,9 +426,9 @@
417
426
  }
418
427
  .mi-tabs--inferno .mi-tab--selected {
419
428
  color: var(--mi-color-primary, #FF4D00);
420
- background: rgba(255, 77, 0, 0.14);
429
+ background: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.14));
421
430
  border-color: var(--mi-color-border-accent, #FF4D00);
422
- box-shadow: 0 0 16px rgba(255, 77, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
431
+ box-shadow: var(--mi-shadow-glow, 0 0 16px rgba(255, 77, 0, 0.25));
423
432
  }
424
433
  .mi-tabs--inferno .mi-tab--selected::after {
425
434
  content: "";
@@ -429,10 +438,10 @@
429
438
  right: 0.5rem;
430
439
  height: 2px;
431
440
  background: var(--mi-color-primary, #FF4D00);
432
- box-shadow: 0 0 10px var(--mi-color-primary, #FF4D00);
441
+ box-shadow: var(--mi-shadow-glow);
433
442
  }
434
443
  .mi-tabs--pills .mi-tab-list {
435
- background: rgba(10, 9, 14, 0.8);
444
+ background: var(--mi-color-bg-subtle, rgba(10, 9, 14, 0.8));
436
445
  border: 1px solid var(--mi-color-border, rgba(255, 255, 255, 0.12));
437
446
  border-radius: 10px;
438
447
  padding: 4px;
@@ -441,16 +450,16 @@
441
450
  border-radius: 7px;
442
451
  }
443
452
  .mi-tabs--pills .mi-tab--selected {
444
- color: #000;
453
+ color: var(--mi-color-primary-text, #000);
445
454
  background-color: var(--mi-color-primary, #FF4D00);
446
455
  font-weight: 700;
447
- box-shadow: 0 4px 14px rgba(255, 77, 0, 0.4);
456
+ box-shadow: var(--mi-shadow-glow);
448
457
  }
449
458
  .mi-tabs--pills .mi-tab--selected .mi-tab__icon {
450
- color: #000;
459
+ color: var(--mi-color-primary-text, #000);
451
460
  }
452
461
  .mi-tabs--pixel .mi-tab-list {
453
- background-color: #0D0F14;
462
+ background-color: var(--mi-color-bg-subtle, #0D0F14);
454
463
  border: 2px solid var(--mi-color-primary, #FF4D00);
455
464
  border-radius: 0;
456
465
  padding: 4px;
@@ -461,7 +470,7 @@
461
470
  font-family: var(--mi-font-mono, monospace);
462
471
  }
463
472
  .mi-tabs--pixel .mi-tab--selected {
464
- color: #FFF;
473
+ color: var(--mi-color-primary-text, #000);
465
474
  background-color: var(--mi-color-primary, #FF4D00);
466
475
  border: 2px solid #000;
467
476
  box-shadow: 3px 3px 0 #000;
@@ -848,19 +857,19 @@
848
857
  box-sizing: border-box;
849
858
  }
850
859
  .mi-badge--inferno {
851
- background-color: rgba(255, 77, 0, 0.15);
852
- color: #FF8533;
853
- border: 1px solid #FF661A;
860
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.15));
861
+ color: var(--mi-color-primary, #FF8533);
862
+ border: 1px solid var(--mi-color-border-accent, #FF661A);
854
863
  }
855
864
  .mi-badge--pixel {
856
865
  background-color: var(--mi-color-bg-subtle, #14121A);
857
- color: #FF8533;
866
+ color: var(--mi-color-primary, #FF8533);
858
867
  border: none;
859
868
  box-shadow:
860
- 0 -2px 0 0 #FF8533,
861
- 0 2px 0 0 #FF8533,
862
- -2px 0 0 0 #FF8533,
863
- 2px 0 0 0 #FF8533;
869
+ 0 -2px 0 0 var(--mi-color-primary, #FF8533),
870
+ 0 2px 0 0 var(--mi-color-primary, #FF8533),
871
+ -2px 0 0 0 var(--mi-color-primary, #FF8533),
872
+ 2px 0 0 0 var(--mi-color-primary, #FF8533);
864
873
  margin: 2px;
865
874
  }
866
875
  .mi-badge--success {
@@ -1367,7 +1376,8 @@
1367
1376
  background-color: var(--mi-color-surface, #1E1B26);
1368
1377
  border: 1px solid var(--mi-color-border, #332D40);
1369
1378
  border-radius: var(--mi-radius-base, 4px);
1370
- overflow: hidden;
1379
+ position: relative;
1380
+ overflow: visible;
1371
1381
  transition: border-color 0.15s ease;
1372
1382
  }
1373
1383
  .mi-accordion-item--open {
@@ -2387,6 +2397,9 @@
2387
2397
  position: relative;
2388
2398
  display: inline-block;
2389
2399
  }
2400
+ .mi-dropdown--open {
2401
+ z-index: 99999;
2402
+ }
2390
2403
  .mi-dropdown__trigger {
2391
2404
  cursor: pointer;
2392
2405
  display: inline-flex;
@@ -2404,7 +2417,7 @@
2404
2417
  .mi-dropdown__menu {
2405
2418
  position: absolute;
2406
2419
  top: calc(100% + 6px);
2407
- z-index: 1050;
2420
+ z-index: 99999;
2408
2421
  min-width: 190px;
2409
2422
  padding: 0.4rem;
2410
2423
  background-color: var(--mi-color-bg-subtle, #14121A);
@@ -2705,7 +2718,7 @@
2705
2718
  text-align: left;
2706
2719
  }
2707
2720
  .mi-table-header {
2708
- background-color: rgba(255, 77, 0, 0.1);
2721
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.1));
2709
2722
  border-bottom: 2px solid var(--mi-color-border-accent, #FF4D00);
2710
2723
  }
2711
2724
  .mi-table-head {
@@ -2724,7 +2737,7 @@
2724
2737
  transition: background-color 0.15s ease;
2725
2738
  }
2726
2739
  .mi-table--hoverable .mi-table-row:hover {
2727
- background-color: rgba(255, 77, 0, 0.15);
2740
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.15));
2728
2741
  }
2729
2742
  .mi-table--striped .mi-table-row:nth-child(even) {
2730
2743
  background-color: rgba(255, 255, 255, 0.02);
@@ -3685,9 +3698,9 @@
3685
3698
  }
3686
3699
  .mi-visualizer__tab--active {
3687
3700
  background-color: var(--mi-color-primary, #FF4D00);
3688
- color: #050406 !important;
3701
+ color: var(--mi-color-primary-text, #050406) !important;
3689
3702
  font-weight: 700;
3690
- box-shadow: 0 0 8px rgba(255, 77, 0, 0.4);
3703
+ box-shadow: var(--mi-shadow-glow);
3691
3704
  }
3692
3705
  .mi-visualizer__actions {
3693
3706
  display: flex;
@@ -3730,7 +3743,7 @@
3730
3743
  color: var(--mi-color-text, #F1F5F9);
3731
3744
  }
3732
3745
  .mi-visualizer__btn-pill--active {
3733
- background-color: rgba(255, 77, 0, 0.2);
3746
+ background-color: var(--mi-color-bg-subtle, #14121A);
3734
3747
  color: var(--mi-color-primary, #FF4D00) !important;
3735
3748
  font-weight: 700;
3736
3749
  }
@@ -3764,9 +3777,9 @@
3764
3777
  display: inline-flex;
3765
3778
  align-items: center;
3766
3779
  gap: 0.35rem;
3767
- background-color: rgba(255, 77, 0, 0.15);
3780
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.15));
3768
3781
  border: 1px solid var(--mi-color-primary, #FF4D00);
3769
- color: #FF8533;
3782
+ color: var(--mi-color-primary, #FF8533);
3770
3783
  font-family: inherit;
3771
3784
  font-size: 0.75rem;
3772
3785
  font-weight: 700;
@@ -3778,8 +3791,8 @@
3778
3791
  }
3779
3792
  .mi-visualizer__btn-action:hover {
3780
3793
  background-color: var(--mi-color-primary, #FF4D00);
3781
- color: #050406;
3782
- box-shadow: 0 0 10px rgba(255, 77, 0, 0.4);
3794
+ color: var(--mi-color-primary-text, #050406);
3795
+ box-shadow: var(--mi-shadow-glow);
3783
3796
  }
3784
3797
  .mi-visualizer__body {
3785
3798
  display: flex;
@@ -3795,12 +3808,6 @@
3795
3808
  height: 100%;
3796
3809
  width: 100%;
3797
3810
  }
3798
- @media (max-width: 860px) {
3799
- .mi-visualizer__body--split {
3800
- grid-template-columns: 100%;
3801
- grid-template-rows: 1fr 1fr;
3802
- }
3803
- }
3804
3811
  .mi-visualizer__body--preview .mi-visualizer__pane--preview,
3805
3812
  .mi-visualizer__body--html .mi-visualizer__pane--full,
3806
3813
  .mi-visualizer__body--css .mi-visualizer__pane--full {
@@ -3810,7 +3817,7 @@
3810
3817
  .mi-visualizer__pane {
3811
3818
  display: flex;
3812
3819
  flex-direction: column;
3813
- background-color: #0A090D;
3820
+ background-color: var(--mi-color-bg, #0A090D);
3814
3821
  border-right: 1px solid var(--mi-color-border, #332D40);
3815
3822
  position: relative;
3816
3823
  overflow: hidden;
@@ -3856,9 +3863,9 @@
3856
3863
  color: var(--mi-color-text, #F1F5F9);
3857
3864
  }
3858
3865
  .mi-visualizer__pane-tab--active {
3859
- background-color: rgba(255, 77, 0, 0.15);
3866
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.15));
3860
3867
  border-color: var(--mi-color-primary, #FF4D00);
3861
- color: #FF8533 !important;
3868
+ color: var(--mi-color-primary, #FF8533) !important;
3862
3869
  }
3863
3870
  .mi-visualizer__pane-badge {
3864
3871
  display: inline-flex;
@@ -3877,8 +3884,8 @@
3877
3884
  width: 100%;
3878
3885
  height: 100%;
3879
3886
  padding: 1rem;
3880
- background-color: #050406;
3881
- color: #00FF66;
3887
+ background-color: var(--mi-color-bg, #050406);
3888
+ color: var(--mi-color-text, #00FF66);
3882
3889
  font-family: var(--mi-font-mono, "JetBrains Mono", monospace);
3883
3890
  font-size: 0.85rem;
3884
3891
  line-height: 1.55;
@@ -3890,7 +3897,7 @@
3890
3897
  box-sizing: border-box;
3891
3898
  }
3892
3899
  .mi-visualizer__textarea:focus {
3893
- background-color: #08070A;
3900
+ background-color: var(--mi-color-bg-subtle, #08070A);
3894
3901
  }
3895
3902
  .mi-visualizer__canvas-container {
3896
3903
  flex: 1;
@@ -3953,6 +3960,79 @@
3953
3960
  border-radius: 0;
3954
3961
  box-shadow: 2px 2px 0 #000;
3955
3962
  }
3963
+ @media (max-width: 768px) {
3964
+ .mi-visualizer__toolbar {
3965
+ padding: 0.5rem 0.75rem;
3966
+ gap: 0.5rem;
3967
+ }
3968
+ .mi-visualizer__actions {
3969
+ gap: 0.35rem;
3970
+ }
3971
+ .mi-visualizer__body--split {
3972
+ grid-template-columns: 100%;
3973
+ grid-template-rows: minmax(220px, 1fr) minmax(240px, 1.2fr);
3974
+ }
3975
+ }
3976
+ @media (max-width: 640px) {
3977
+ .mi-visualizer {
3978
+ border-width: 1px;
3979
+ border-radius: var(--mi-radius-sm, 4px);
3980
+ min-height: 480px;
3981
+ }
3982
+ .mi-visualizer__toolbar {
3983
+ padding: 0.45rem 0.5rem;
3984
+ gap: 0.4rem;
3985
+ }
3986
+ .mi-visualizer__brand {
3987
+ gap: 0.35rem;
3988
+ }
3989
+ .mi-visualizer__title {
3990
+ font-size: 0.75rem;
3991
+ letter-spacing: 0.02em;
3992
+ }
3993
+ .mi-visualizer__tabs {
3994
+ padding: 2px;
3995
+ gap: 2px;
3996
+ }
3997
+ .mi-visualizer__tab {
3998
+ padding: 0.25rem 0.45rem;
3999
+ font-size: 0.7rem;
4000
+ }
4001
+ .mi-visualizer__actions {
4002
+ width: 100%;
4003
+ justify-content: space-between;
4004
+ gap: 0.3rem;
4005
+ flex-wrap: wrap;
4006
+ }
4007
+ .mi-visualizer__btn-group--viewport {
4008
+ display: none !important;
4009
+ }
4010
+ .mi-visualizer__select {
4011
+ font-size: 0.7rem;
4012
+ padding: 0.25rem 0.35rem;
4013
+ max-width: 130px;
4014
+ }
4015
+ .mi-visualizer__btn-pill {
4016
+ padding: 0.2rem 0.4rem;
4017
+ font-size: 0.68rem;
4018
+ }
4019
+ .mi-visualizer__btn-action,
4020
+ .mi-visualizer__btn-icon {
4021
+ font-size: 0.7rem;
4022
+ padding: 0.25rem 0.45rem;
4023
+ }
4024
+ .mi-visualizer__textarea {
4025
+ font-size: 0.78rem;
4026
+ padding: 0.65rem;
4027
+ }
4028
+ .mi-visualizer__canvas-container {
4029
+ padding: 0.25rem;
4030
+ }
4031
+ .mi-visualizer__pane-header {
4032
+ padding: 0.35rem 0.6rem;
4033
+ min-height: 32px;
4034
+ }
4035
+ }
3956
4036
 
3957
4037
  /* ../themes/src/moon-inferno.css */
3958
4038
  :root,
@@ -4485,10 +4565,10 @@ textarea {
4485
4565
  justify-content: center;
4486
4566
  z-index: 1000;
4487
4567
  box-sizing: border-box;
4488
- background-color: var(--moon-bg-surface, rgba(13, 11, 18, 0.92));
4568
+ background-color: var(--mi-color-surface, rgba(13, 11, 18, 0.92));
4489
4569
  backdrop-filter: blur(16px);
4490
4570
  -webkit-backdrop-filter: blur(16px);
4491
- transition: all var(--moon-transition-speed, 0.2s) ease;
4571
+ transition: all 0.2s ease;
4492
4572
  }
4493
4573
  .moon-navbar--sticky {
4494
4574
  position: sticky;
@@ -4498,40 +4578,40 @@ textarea {
4498
4578
  width: 100%;
4499
4579
  max-width: 1280px;
4500
4580
  min-height: 64px;
4501
- padding: 0.5rem var(--moon-space-md, 1rem);
4581
+ padding: 0.5rem 1rem;
4502
4582
  display: flex;
4503
4583
  align-items: center;
4504
4584
  justify-content: space-between;
4505
- gap: var(--moon-space-md, 1rem);
4585
+ gap: 1rem;
4506
4586
  box-sizing: border-box;
4507
4587
  }
4508
4588
  .moon-navbar--inferno {
4509
- border-bottom: 1px solid var(--moon-color-border-accent, rgba(255, 77, 0, 0.45));
4510
- box-shadow: 0 4px 20px rgba(255, 77, 0, 0.15);
4589
+ border-bottom: 1px solid var(--mi-color-border-accent, rgba(255, 77, 0, 0.45));
4590
+ box-shadow: var(--mi-shadow-glow, 0 4px 20px rgba(255, 77, 0, 0.15));
4511
4591
  }
4512
4592
  .moon-navbar--pixel {
4513
- border-bottom: 3px solid var(--moon-color-border, #ff4444);
4514
- background-color: var(--moon-bg-surface, #0d0f14);
4593
+ border-bottom: 3px solid var(--mi-color-primary, #ff4444);
4594
+ background-color: var(--mi-color-surface, #0d0f14);
4515
4595
  box-shadow: 0 4px 0 #000;
4516
4596
  }
4517
4597
  .moon-navbar--ghost {
4518
- border-bottom: 1px solid var(--moon-color-border-subtle, rgba(255, 255, 255, 0.1));
4598
+ border-bottom: 1px solid var(--mi-color-border, rgba(255, 255, 255, 0.1));
4519
4599
  background-color: transparent;
4520
4600
  }
4521
4601
  .moon-navbar__brand {
4522
4602
  display: flex;
4523
4603
  align-items: center;
4524
- gap: var(--moon-space-sm, 0.5rem);
4604
+ gap: 0.5rem;
4525
4605
  font-weight: 700;
4526
- color: var(--moon-color-text, #ffffff);
4606
+ color: var(--mi-color-text, #ffffff);
4527
4607
  text-decoration: none;
4528
- font-family: var(--moon-font-mono, monospace);
4608
+ font-family: var(--mi-font-mono, monospace);
4529
4609
  flex-shrink: 0;
4530
4610
  }
4531
4611
  .moon-navbar__content {
4532
4612
  display: flex;
4533
4613
  align-items: center;
4534
- gap: var(--moon-space-lg, 1.25rem);
4614
+ gap: 1.25rem;
4535
4615
  list-style: none;
4536
4616
  margin: 0;
4537
4617
  padding: 0;
@@ -4550,15 +4630,15 @@ textarea {
4550
4630
  display: flex;
4551
4631
  align-items: center;
4552
4632
  position: relative;
4553
- font-family: var(--moon-font-mono, monospace);
4633
+ font-family: var(--mi-font-mono, monospace);
4554
4634
  font-size: 0.9rem;
4555
- color: var(--moon-color-text-muted, #a0a5b5);
4635
+ color: var(--mi-color-text-muted, #a0a5b5);
4556
4636
  transition: color 0.2s ease;
4557
4637
  cursor: pointer;
4558
4638
  }
4559
4639
  .moon-navbar__item:hover,
4560
4640
  .moon-navbar__item--active {
4561
- color: var(--moon-color-primary, #ff4444);
4641
+ color: var(--mi-color-primary, #FF4D00);
4562
4642
  }
4563
4643
  .moon-navbar__item--active::after {
4564
4644
  content: "";
@@ -4567,27 +4647,27 @@ textarea {
4567
4647
  left: 0;
4568
4648
  right: 0;
4569
4649
  height: 2px;
4570
- background-color: var(--moon-color-primary, #ff4444);
4571
- box-shadow: 0 0 8px var(--moon-color-primary, #ff4444);
4650
+ background-color: var(--mi-color-primary, #FF4D00);
4651
+ box-shadow: var(--mi-shadow-glow);
4572
4652
  }
4573
4653
  .moon-navbar__toggle {
4574
4654
  display: none;
4575
4655
  align-items: center;
4576
4656
  justify-content: center;
4577
- background: rgba(255, 77, 0, 0.08);
4578
- border: 1.5px solid var(--moon-color-border-accent, rgba(255, 77, 0, 0.45));
4657
+ background: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.08));
4658
+ border: 1.5px solid var(--mi-color-border-accent, rgba(255, 77, 0, 0.45));
4579
4659
  padding: 0.45rem 0.6rem;
4580
4660
  border-radius: 8px;
4581
4661
  cursor: pointer;
4582
4662
  outline: none;
4583
4663
  transition: all 0.15s ease;
4584
- color: var(--moon-color-primary, #FF4D00);
4664
+ color: var(--mi-color-primary, #FF4D00);
4585
4665
  }
4586
4666
  .moon-navbar__toggle:focus-visible,
4587
4667
  .moon-navbar__toggle:hover {
4588
- background: var(--moon-color-primary, #FF4D00);
4589
- color: #000;
4590
- box-shadow: 0 0 14px rgba(255, 77, 0, 0.45);
4668
+ background: var(--mi-color-primary, #FF4D00);
4669
+ color: var(--mi-color-primary-text, #000);
4670
+ box-shadow: var(--mi-shadow-glow);
4591
4671
  }
4592
4672
  .moon-navbar__toggle-icon {
4593
4673
  display: flex;
@@ -4602,12 +4682,12 @@ textarea {
4602
4682
  top: calc(100% + 8px);
4603
4683
  left: 0;
4604
4684
  right: 0;
4605
- background: rgba(13, 11, 18, 0.96);
4685
+ background: var(--mi-color-surface, rgba(13, 11, 18, 0.96));
4606
4686
  backdrop-filter: blur(20px);
4607
4687
  -webkit-backdrop-filter: blur(20px);
4608
- border: 1.5px solid var(--moon-color-border-accent, rgba(255, 77, 0, 0.45));
4688
+ border: 1.5px solid var(--mi-color-border-accent, rgba(255, 77, 0, 0.45));
4609
4689
  border-radius: 12px;
4610
- box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 77, 0, 0.2);
4690
+ box-shadow: var(--mi-shadow-glow, 0 16px 40px rgba(0, 0, 0, 0.8));
4611
4691
  z-index: 1001;
4612
4692
  padding: 1.25rem;
4613
4693
  animation: moonNavbarSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
@@ -4616,7 +4696,7 @@ textarea {
4616
4696
  .moon-navbar__menu-content {
4617
4697
  display: flex;
4618
4698
  flex-direction: column;
4619
- gap: var(--moon-space-md, 0.85rem);
4699
+ gap: 0.85rem;
4620
4700
  width: 100%;
4621
4701
  }
4622
4702
  .moon-navbar__menu .moon-navbar__item {
@@ -4815,11 +4895,11 @@ textarea {
4815
4895
  /* src/HoloCard/HoloCard.css */
4816
4896
  .moon-holocard {
4817
4897
  position: relative;
4818
- border-radius: var(--moon-radius-md, 12px);
4819
- padding: var(--moon-space-lg, 1.5rem);
4820
- background: var(--moon-bg-surface, rgba(13, 15, 20, 0.9));
4821
- border: 1px solid var(--moon-color-border, rgba(255, 68, 68, 0.4));
4822
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
4898
+ border-radius: var(--mi-radius-md, 12px);
4899
+ padding: 1.5rem;
4900
+ background: var(--mi-color-surface, rgba(13, 15, 20, 0.9));
4901
+ border: 1px solid var(--mi-color-border-accent, rgba(255, 68, 68, 0.4));
4902
+ box-shadow: var(--mi-shadow-glow, 0 10px 30px rgba(0, 0, 0, 0.5));
4823
4903
  transition: transform 0.15s ease-out, box-shadow 0.2s ease;
4824
4904
  transform-style: preserve-3d;
4825
4905
  overflow: hidden;
@@ -4842,8 +4922,8 @@ textarea {
4842
4922
  mix-blend-mode: overlay;
4843
4923
  }
4844
4924
  .moon-holocard--inferno {
4845
- border-color: rgba(255, 68, 68, 0.5);
4846
- box-shadow: 0 10px 30px rgba(255, 68, 68, 0.2);
4925
+ border-color: var(--mi-color-border-accent, rgba(255, 68, 68, 0.5));
4926
+ box-shadow: var(--mi-shadow-glow, 0 10px 30px rgba(255, 68, 68, 0.2));
4847
4927
  }
4848
4928
  .moon-holocard--cyber {
4849
4929
  border-color: rgba(0, 240, 255, 0.6);
package/dist/styles.css CHANGED
@@ -134,11 +134,20 @@
134
134
  border: 1px solid var(--mi-color-border, #332D40);
135
135
  border-radius: var(--mi-radius-md, 6px);
136
136
  color: var(--mi-color-text, #F1F5F9);
137
- overflow: hidden;
137
+ position: relative;
138
+ overflow: visible;
138
139
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
139
140
  width: 100%;
140
141
  max-width: 100%;
141
142
  }
143
+ .mi-card__header:first-child {
144
+ border-top-left-radius: var(--mi-radius-md, 6px);
145
+ border-top-right-radius: var(--mi-radius-md, 6px);
146
+ }
147
+ .mi-card__footer:last-child {
148
+ border-bottom-left-radius: var(--mi-radius-md, 6px);
149
+ border-bottom-right-radius: var(--mi-radius-md, 6px);
150
+ }
142
151
  .mi-card--interactive {
143
152
  cursor: pointer;
144
153
  }
@@ -397,7 +406,7 @@
397
406
  }
398
407
  .mi-tab:hover:not(.mi-tab--selected):not(:disabled) {
399
408
  color: var(--mi-color-text, #F1F5F9);
400
- background-color: rgba(255, 77, 0, 0.08);
409
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.08));
401
410
  }
402
411
  .mi-tab:disabled {
403
412
  opacity: 0.45;
@@ -408,7 +417,7 @@
408
417
  outline-offset: 2px;
409
418
  }
410
419
  .mi-tabs--inferno .mi-tab-list {
411
- background: rgba(18, 16, 25, 0.95);
420
+ background: var(--mi-color-surface, rgba(18, 16, 25, 0.95));
412
421
  backdrop-filter: blur(16px);
413
422
  -webkit-backdrop-filter: blur(16px);
414
423
  border: 1px solid var(--mi-color-border, rgba(255, 255, 255, 0.12));
@@ -417,9 +426,9 @@
417
426
  }
418
427
  .mi-tabs--inferno .mi-tab--selected {
419
428
  color: var(--mi-color-primary, #FF4D00);
420
- background: rgba(255, 77, 0, 0.14);
429
+ background: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.14));
421
430
  border-color: var(--mi-color-border-accent, #FF4D00);
422
- box-shadow: 0 0 16px rgba(255, 77, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
431
+ box-shadow: var(--mi-shadow-glow, 0 0 16px rgba(255, 77, 0, 0.25));
423
432
  }
424
433
  .mi-tabs--inferno .mi-tab--selected::after {
425
434
  content: "";
@@ -429,10 +438,10 @@
429
438
  right: 0.5rem;
430
439
  height: 2px;
431
440
  background: var(--mi-color-primary, #FF4D00);
432
- box-shadow: 0 0 10px var(--mi-color-primary, #FF4D00);
441
+ box-shadow: var(--mi-shadow-glow);
433
442
  }
434
443
  .mi-tabs--pills .mi-tab-list {
435
- background: rgba(10, 9, 14, 0.8);
444
+ background: var(--mi-color-bg-subtle, rgba(10, 9, 14, 0.8));
436
445
  border: 1px solid var(--mi-color-border, rgba(255, 255, 255, 0.12));
437
446
  border-radius: 10px;
438
447
  padding: 4px;
@@ -441,16 +450,16 @@
441
450
  border-radius: 7px;
442
451
  }
443
452
  .mi-tabs--pills .mi-tab--selected {
444
- color: #000;
453
+ color: var(--mi-color-primary-text, #000);
445
454
  background-color: var(--mi-color-primary, #FF4D00);
446
455
  font-weight: 700;
447
- box-shadow: 0 4px 14px rgba(255, 77, 0, 0.4);
456
+ box-shadow: var(--mi-shadow-glow);
448
457
  }
449
458
  .mi-tabs--pills .mi-tab--selected .mi-tab__icon {
450
- color: #000;
459
+ color: var(--mi-color-primary-text, #000);
451
460
  }
452
461
  .mi-tabs--pixel .mi-tab-list {
453
- background-color: #0D0F14;
462
+ background-color: var(--mi-color-bg-subtle, #0D0F14);
454
463
  border: 2px solid var(--mi-color-primary, #FF4D00);
455
464
  border-radius: 0;
456
465
  padding: 4px;
@@ -461,7 +470,7 @@
461
470
  font-family: var(--mi-font-mono, monospace);
462
471
  }
463
472
  .mi-tabs--pixel .mi-tab--selected {
464
- color: #FFF;
473
+ color: var(--mi-color-primary-text, #000);
465
474
  background-color: var(--mi-color-primary, #FF4D00);
466
475
  border: 2px solid #000;
467
476
  box-shadow: 3px 3px 0 #000;
@@ -848,19 +857,19 @@
848
857
  box-sizing: border-box;
849
858
  }
850
859
  .mi-badge--inferno {
851
- background-color: rgba(255, 77, 0, 0.15);
852
- color: #FF8533;
853
- border: 1px solid #FF661A;
860
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.15));
861
+ color: var(--mi-color-primary, #FF8533);
862
+ border: 1px solid var(--mi-color-border-accent, #FF661A);
854
863
  }
855
864
  .mi-badge--pixel {
856
865
  background-color: var(--mi-color-bg-subtle, #14121A);
857
- color: #FF8533;
866
+ color: var(--mi-color-primary, #FF8533);
858
867
  border: none;
859
868
  box-shadow:
860
- 0 -2px 0 0 #FF8533,
861
- 0 2px 0 0 #FF8533,
862
- -2px 0 0 0 #FF8533,
863
- 2px 0 0 0 #FF8533;
869
+ 0 -2px 0 0 var(--mi-color-primary, #FF8533),
870
+ 0 2px 0 0 var(--mi-color-primary, #FF8533),
871
+ -2px 0 0 0 var(--mi-color-primary, #FF8533),
872
+ 2px 0 0 0 var(--mi-color-primary, #FF8533);
864
873
  margin: 2px;
865
874
  }
866
875
  .mi-badge--success {
@@ -1367,7 +1376,8 @@
1367
1376
  background-color: var(--mi-color-surface, #1E1B26);
1368
1377
  border: 1px solid var(--mi-color-border, #332D40);
1369
1378
  border-radius: var(--mi-radius-base, 4px);
1370
- overflow: hidden;
1379
+ position: relative;
1380
+ overflow: visible;
1371
1381
  transition: border-color 0.15s ease;
1372
1382
  }
1373
1383
  .mi-accordion-item--open {
@@ -2387,6 +2397,9 @@
2387
2397
  position: relative;
2388
2398
  display: inline-block;
2389
2399
  }
2400
+ .mi-dropdown--open {
2401
+ z-index: 99999;
2402
+ }
2390
2403
  .mi-dropdown__trigger {
2391
2404
  cursor: pointer;
2392
2405
  display: inline-flex;
@@ -2404,7 +2417,7 @@
2404
2417
  .mi-dropdown__menu {
2405
2418
  position: absolute;
2406
2419
  top: calc(100% + 6px);
2407
- z-index: 1050;
2420
+ z-index: 99999;
2408
2421
  min-width: 190px;
2409
2422
  padding: 0.4rem;
2410
2423
  background-color: var(--mi-color-bg-subtle, #14121A);
@@ -2705,7 +2718,7 @@
2705
2718
  text-align: left;
2706
2719
  }
2707
2720
  .mi-table-header {
2708
- background-color: rgba(255, 77, 0, 0.1);
2721
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.1));
2709
2722
  border-bottom: 2px solid var(--mi-color-border-accent, #FF4D00);
2710
2723
  }
2711
2724
  .mi-table-head {
@@ -2724,7 +2737,7 @@
2724
2737
  transition: background-color 0.15s ease;
2725
2738
  }
2726
2739
  .mi-table--hoverable .mi-table-row:hover {
2727
- background-color: rgba(255, 77, 0, 0.15);
2740
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.15));
2728
2741
  }
2729
2742
  .mi-table--striped .mi-table-row:nth-child(even) {
2730
2743
  background-color: rgba(255, 255, 255, 0.02);
@@ -3685,9 +3698,9 @@
3685
3698
  }
3686
3699
  .mi-visualizer__tab--active {
3687
3700
  background-color: var(--mi-color-primary, #FF4D00);
3688
- color: #050406 !important;
3701
+ color: var(--mi-color-primary-text, #050406) !important;
3689
3702
  font-weight: 700;
3690
- box-shadow: 0 0 8px rgba(255, 77, 0, 0.4);
3703
+ box-shadow: var(--mi-shadow-glow);
3691
3704
  }
3692
3705
  .mi-visualizer__actions {
3693
3706
  display: flex;
@@ -3730,7 +3743,7 @@
3730
3743
  color: var(--mi-color-text, #F1F5F9);
3731
3744
  }
3732
3745
  .mi-visualizer__btn-pill--active {
3733
- background-color: rgba(255, 77, 0, 0.2);
3746
+ background-color: var(--mi-color-bg-subtle, #14121A);
3734
3747
  color: var(--mi-color-primary, #FF4D00) !important;
3735
3748
  font-weight: 700;
3736
3749
  }
@@ -3764,9 +3777,9 @@
3764
3777
  display: inline-flex;
3765
3778
  align-items: center;
3766
3779
  gap: 0.35rem;
3767
- background-color: rgba(255, 77, 0, 0.15);
3780
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.15));
3768
3781
  border: 1px solid var(--mi-color-primary, #FF4D00);
3769
- color: #FF8533;
3782
+ color: var(--mi-color-primary, #FF8533);
3770
3783
  font-family: inherit;
3771
3784
  font-size: 0.75rem;
3772
3785
  font-weight: 700;
@@ -3778,8 +3791,8 @@
3778
3791
  }
3779
3792
  .mi-visualizer__btn-action:hover {
3780
3793
  background-color: var(--mi-color-primary, #FF4D00);
3781
- color: #050406;
3782
- box-shadow: 0 0 10px rgba(255, 77, 0, 0.4);
3794
+ color: var(--mi-color-primary-text, #050406);
3795
+ box-shadow: var(--mi-shadow-glow);
3783
3796
  }
3784
3797
  .mi-visualizer__body {
3785
3798
  display: flex;
@@ -3795,12 +3808,6 @@
3795
3808
  height: 100%;
3796
3809
  width: 100%;
3797
3810
  }
3798
- @media (max-width: 860px) {
3799
- .mi-visualizer__body--split {
3800
- grid-template-columns: 100%;
3801
- grid-template-rows: 1fr 1fr;
3802
- }
3803
- }
3804
3811
  .mi-visualizer__body--preview .mi-visualizer__pane--preview,
3805
3812
  .mi-visualizer__body--html .mi-visualizer__pane--full,
3806
3813
  .mi-visualizer__body--css .mi-visualizer__pane--full {
@@ -3810,7 +3817,7 @@
3810
3817
  .mi-visualizer__pane {
3811
3818
  display: flex;
3812
3819
  flex-direction: column;
3813
- background-color: #0A090D;
3820
+ background-color: var(--mi-color-bg, #0A090D);
3814
3821
  border-right: 1px solid var(--mi-color-border, #332D40);
3815
3822
  position: relative;
3816
3823
  overflow: hidden;
@@ -3856,9 +3863,9 @@
3856
3863
  color: var(--mi-color-text, #F1F5F9);
3857
3864
  }
3858
3865
  .mi-visualizer__pane-tab--active {
3859
- background-color: rgba(255, 77, 0, 0.15);
3866
+ background-color: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.15));
3860
3867
  border-color: var(--mi-color-primary, #FF4D00);
3861
- color: #FF8533 !important;
3868
+ color: var(--mi-color-primary, #FF8533) !important;
3862
3869
  }
3863
3870
  .mi-visualizer__pane-badge {
3864
3871
  display: inline-flex;
@@ -3877,8 +3884,8 @@
3877
3884
  width: 100%;
3878
3885
  height: 100%;
3879
3886
  padding: 1rem;
3880
- background-color: #050406;
3881
- color: #00FF66;
3887
+ background-color: var(--mi-color-bg, #050406);
3888
+ color: var(--mi-color-text, #00FF66);
3882
3889
  font-family: var(--mi-font-mono, "JetBrains Mono", monospace);
3883
3890
  font-size: 0.85rem;
3884
3891
  line-height: 1.55;
@@ -3890,7 +3897,7 @@
3890
3897
  box-sizing: border-box;
3891
3898
  }
3892
3899
  .mi-visualizer__textarea:focus {
3893
- background-color: #08070A;
3900
+ background-color: var(--mi-color-bg-subtle, #08070A);
3894
3901
  }
3895
3902
  .mi-visualizer__canvas-container {
3896
3903
  flex: 1;
@@ -3953,6 +3960,79 @@
3953
3960
  border-radius: 0;
3954
3961
  box-shadow: 2px 2px 0 #000;
3955
3962
  }
3963
+ @media (max-width: 768px) {
3964
+ .mi-visualizer__toolbar {
3965
+ padding: 0.5rem 0.75rem;
3966
+ gap: 0.5rem;
3967
+ }
3968
+ .mi-visualizer__actions {
3969
+ gap: 0.35rem;
3970
+ }
3971
+ .mi-visualizer__body--split {
3972
+ grid-template-columns: 100%;
3973
+ grid-template-rows: minmax(220px, 1fr) minmax(240px, 1.2fr);
3974
+ }
3975
+ }
3976
+ @media (max-width: 640px) {
3977
+ .mi-visualizer {
3978
+ border-width: 1px;
3979
+ border-radius: var(--mi-radius-sm, 4px);
3980
+ min-height: 480px;
3981
+ }
3982
+ .mi-visualizer__toolbar {
3983
+ padding: 0.45rem 0.5rem;
3984
+ gap: 0.4rem;
3985
+ }
3986
+ .mi-visualizer__brand {
3987
+ gap: 0.35rem;
3988
+ }
3989
+ .mi-visualizer__title {
3990
+ font-size: 0.75rem;
3991
+ letter-spacing: 0.02em;
3992
+ }
3993
+ .mi-visualizer__tabs {
3994
+ padding: 2px;
3995
+ gap: 2px;
3996
+ }
3997
+ .mi-visualizer__tab {
3998
+ padding: 0.25rem 0.45rem;
3999
+ font-size: 0.7rem;
4000
+ }
4001
+ .mi-visualizer__actions {
4002
+ width: 100%;
4003
+ justify-content: space-between;
4004
+ gap: 0.3rem;
4005
+ flex-wrap: wrap;
4006
+ }
4007
+ .mi-visualizer__btn-group--viewport {
4008
+ display: none !important;
4009
+ }
4010
+ .mi-visualizer__select {
4011
+ font-size: 0.7rem;
4012
+ padding: 0.25rem 0.35rem;
4013
+ max-width: 130px;
4014
+ }
4015
+ .mi-visualizer__btn-pill {
4016
+ padding: 0.2rem 0.4rem;
4017
+ font-size: 0.68rem;
4018
+ }
4019
+ .mi-visualizer__btn-action,
4020
+ .mi-visualizer__btn-icon {
4021
+ font-size: 0.7rem;
4022
+ padding: 0.25rem 0.45rem;
4023
+ }
4024
+ .mi-visualizer__textarea {
4025
+ font-size: 0.78rem;
4026
+ padding: 0.65rem;
4027
+ }
4028
+ .mi-visualizer__canvas-container {
4029
+ padding: 0.25rem;
4030
+ }
4031
+ .mi-visualizer__pane-header {
4032
+ padding: 0.35rem 0.6rem;
4033
+ min-height: 32px;
4034
+ }
4035
+ }
3956
4036
 
3957
4037
  /* ../themes/src/moon-inferno.css */
3958
4038
  :root,
@@ -4485,10 +4565,10 @@ textarea {
4485
4565
  justify-content: center;
4486
4566
  z-index: 1000;
4487
4567
  box-sizing: border-box;
4488
- background-color: var(--moon-bg-surface, rgba(13, 11, 18, 0.92));
4568
+ background-color: var(--mi-color-surface, rgba(13, 11, 18, 0.92));
4489
4569
  backdrop-filter: blur(16px);
4490
4570
  -webkit-backdrop-filter: blur(16px);
4491
- transition: all var(--moon-transition-speed, 0.2s) ease;
4571
+ transition: all 0.2s ease;
4492
4572
  }
4493
4573
  .moon-navbar--sticky {
4494
4574
  position: sticky;
@@ -4498,40 +4578,40 @@ textarea {
4498
4578
  width: 100%;
4499
4579
  max-width: 1280px;
4500
4580
  min-height: 64px;
4501
- padding: 0.5rem var(--moon-space-md, 1rem);
4581
+ padding: 0.5rem 1rem;
4502
4582
  display: flex;
4503
4583
  align-items: center;
4504
4584
  justify-content: space-between;
4505
- gap: var(--moon-space-md, 1rem);
4585
+ gap: 1rem;
4506
4586
  box-sizing: border-box;
4507
4587
  }
4508
4588
  .moon-navbar--inferno {
4509
- border-bottom: 1px solid var(--moon-color-border-accent, rgba(255, 77, 0, 0.45));
4510
- box-shadow: 0 4px 20px rgba(255, 77, 0, 0.15);
4589
+ border-bottom: 1px solid var(--mi-color-border-accent, rgba(255, 77, 0, 0.45));
4590
+ box-shadow: var(--mi-shadow-glow, 0 4px 20px rgba(255, 77, 0, 0.15));
4511
4591
  }
4512
4592
  .moon-navbar--pixel {
4513
- border-bottom: 3px solid var(--moon-color-border, #ff4444);
4514
- background-color: var(--moon-bg-surface, #0d0f14);
4593
+ border-bottom: 3px solid var(--mi-color-primary, #ff4444);
4594
+ background-color: var(--mi-color-surface, #0d0f14);
4515
4595
  box-shadow: 0 4px 0 #000;
4516
4596
  }
4517
4597
  .moon-navbar--ghost {
4518
- border-bottom: 1px solid var(--moon-color-border-subtle, rgba(255, 255, 255, 0.1));
4598
+ border-bottom: 1px solid var(--mi-color-border, rgba(255, 255, 255, 0.1));
4519
4599
  background-color: transparent;
4520
4600
  }
4521
4601
  .moon-navbar__brand {
4522
4602
  display: flex;
4523
4603
  align-items: center;
4524
- gap: var(--moon-space-sm, 0.5rem);
4604
+ gap: 0.5rem;
4525
4605
  font-weight: 700;
4526
- color: var(--moon-color-text, #ffffff);
4606
+ color: var(--mi-color-text, #ffffff);
4527
4607
  text-decoration: none;
4528
- font-family: var(--moon-font-mono, monospace);
4608
+ font-family: var(--mi-font-mono, monospace);
4529
4609
  flex-shrink: 0;
4530
4610
  }
4531
4611
  .moon-navbar__content {
4532
4612
  display: flex;
4533
4613
  align-items: center;
4534
- gap: var(--moon-space-lg, 1.25rem);
4614
+ gap: 1.25rem;
4535
4615
  list-style: none;
4536
4616
  margin: 0;
4537
4617
  padding: 0;
@@ -4550,15 +4630,15 @@ textarea {
4550
4630
  display: flex;
4551
4631
  align-items: center;
4552
4632
  position: relative;
4553
- font-family: var(--moon-font-mono, monospace);
4633
+ font-family: var(--mi-font-mono, monospace);
4554
4634
  font-size: 0.9rem;
4555
- color: var(--moon-color-text-muted, #a0a5b5);
4635
+ color: var(--mi-color-text-muted, #a0a5b5);
4556
4636
  transition: color 0.2s ease;
4557
4637
  cursor: pointer;
4558
4638
  }
4559
4639
  .moon-navbar__item:hover,
4560
4640
  .moon-navbar__item--active {
4561
- color: var(--moon-color-primary, #ff4444);
4641
+ color: var(--mi-color-primary, #FF4D00);
4562
4642
  }
4563
4643
  .moon-navbar__item--active::after {
4564
4644
  content: "";
@@ -4567,27 +4647,27 @@ textarea {
4567
4647
  left: 0;
4568
4648
  right: 0;
4569
4649
  height: 2px;
4570
- background-color: var(--moon-color-primary, #ff4444);
4571
- box-shadow: 0 0 8px var(--moon-color-primary, #ff4444);
4650
+ background-color: var(--mi-color-primary, #FF4D00);
4651
+ box-shadow: var(--mi-shadow-glow);
4572
4652
  }
4573
4653
  .moon-navbar__toggle {
4574
4654
  display: none;
4575
4655
  align-items: center;
4576
4656
  justify-content: center;
4577
- background: rgba(255, 77, 0, 0.08);
4578
- border: 1.5px solid var(--moon-color-border-accent, rgba(255, 77, 0, 0.45));
4657
+ background: var(--mi-color-bg-subtle, rgba(255, 77, 0, 0.08));
4658
+ border: 1.5px solid var(--mi-color-border-accent, rgba(255, 77, 0, 0.45));
4579
4659
  padding: 0.45rem 0.6rem;
4580
4660
  border-radius: 8px;
4581
4661
  cursor: pointer;
4582
4662
  outline: none;
4583
4663
  transition: all 0.15s ease;
4584
- color: var(--moon-color-primary, #FF4D00);
4664
+ color: var(--mi-color-primary, #FF4D00);
4585
4665
  }
4586
4666
  .moon-navbar__toggle:focus-visible,
4587
4667
  .moon-navbar__toggle:hover {
4588
- background: var(--moon-color-primary, #FF4D00);
4589
- color: #000;
4590
- box-shadow: 0 0 14px rgba(255, 77, 0, 0.45);
4668
+ background: var(--mi-color-primary, #FF4D00);
4669
+ color: var(--mi-color-primary-text, #000);
4670
+ box-shadow: var(--mi-shadow-glow);
4591
4671
  }
4592
4672
  .moon-navbar__toggle-icon {
4593
4673
  display: flex;
@@ -4602,12 +4682,12 @@ textarea {
4602
4682
  top: calc(100% + 8px);
4603
4683
  left: 0;
4604
4684
  right: 0;
4605
- background: rgba(13, 11, 18, 0.96);
4685
+ background: var(--mi-color-surface, rgba(13, 11, 18, 0.96));
4606
4686
  backdrop-filter: blur(20px);
4607
4687
  -webkit-backdrop-filter: blur(20px);
4608
- border: 1.5px solid var(--moon-color-border-accent, rgba(255, 77, 0, 0.45));
4688
+ border: 1.5px solid var(--mi-color-border-accent, rgba(255, 77, 0, 0.45));
4609
4689
  border-radius: 12px;
4610
- box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 77, 0, 0.2);
4690
+ box-shadow: var(--mi-shadow-glow, 0 16px 40px rgba(0, 0, 0, 0.8));
4611
4691
  z-index: 1001;
4612
4692
  padding: 1.25rem;
4613
4693
  animation: moonNavbarSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
@@ -4616,7 +4696,7 @@ textarea {
4616
4696
  .moon-navbar__menu-content {
4617
4697
  display: flex;
4618
4698
  flex-direction: column;
4619
- gap: var(--moon-space-md, 0.85rem);
4699
+ gap: 0.85rem;
4620
4700
  width: 100%;
4621
4701
  }
4622
4702
  .moon-navbar__menu .moon-navbar__item {
@@ -4815,11 +4895,11 @@ textarea {
4815
4895
  /* src/HoloCard/HoloCard.css */
4816
4896
  .moon-holocard {
4817
4897
  position: relative;
4818
- border-radius: var(--moon-radius-md, 12px);
4819
- padding: var(--moon-space-lg, 1.5rem);
4820
- background: var(--moon-bg-surface, rgba(13, 15, 20, 0.9));
4821
- border: 1px solid var(--moon-color-border, rgba(255, 68, 68, 0.4));
4822
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
4898
+ border-radius: var(--mi-radius-md, 12px);
4899
+ padding: 1.5rem;
4900
+ background: var(--mi-color-surface, rgba(13, 15, 20, 0.9));
4901
+ border: 1px solid var(--mi-color-border-accent, rgba(255, 68, 68, 0.4));
4902
+ box-shadow: var(--mi-shadow-glow, 0 10px 30px rgba(0, 0, 0, 0.5));
4823
4903
  transition: transform 0.15s ease-out, box-shadow 0.2s ease;
4824
4904
  transform-style: preserve-3d;
4825
4905
  overflow: hidden;
@@ -4842,8 +4922,8 @@ textarea {
4842
4922
  mix-blend-mode: overlay;
4843
4923
  }
4844
4924
  .moon-holocard--inferno {
4845
- border-color: rgba(255, 68, 68, 0.5);
4846
- box-shadow: 0 10px 30px rgba(255, 68, 68, 0.2);
4925
+ border-color: var(--mi-color-border-accent, rgba(255, 68, 68, 0.5));
4926
+ box-shadow: var(--mi-shadow-glow, 0 10px 30px rgba(255, 68, 68, 0.2));
4847
4927
  }
4848
4928
  .moon-holocard--cyber {
4849
4929
  border-color: rgba(0, 240, 255, 0.6);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "moon-inferno",
3
- "version": "0.4.2",
3
+ "version": "0.4.8",
4
4
  "description": "All-in-one bundle for Moon-Inferno: Expressive, accessibility-first React UI framework for retro, Y2K, CRT, cyberpunk, gaming, and Web3 applications.",
5
5
  "license": "MIT",
6
6
  "author": "Biagio Scaglia",
@@ -29,10 +29,10 @@
29
29
  "LICENSE"
30
30
  ],
31
31
  "dependencies": {
32
- "@moon-inferno/core": "0.4.2",
33
- "@moon-inferno/icons": "0.4.2",
34
- "@moon-inferno/react": "0.4.2",
35
- "@moon-inferno/themes": "0.4.2"
32
+ "@moon-inferno/icons": "0.4.8",
33
+ "@moon-inferno/react": "0.4.8",
34
+ "@moon-inferno/core": "0.4.8",
35
+ "@moon-inferno/themes": "0.4.8"
36
36
  },
37
37
  "peerDependencies": {
38
38
  "react": ">=18.0.0",