moon-inferno 0.4.3 → 0.4.9

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 +89 -9
  2. package/dist/styles.css +89 -9
  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
  }
@@ -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);
@@ -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 {
@@ -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,
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
  }
@@ -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);
@@ -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 {
@@ -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,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "moon-inferno",
3
- "version": "0.4.3",
3
+ "version": "0.4.9",
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.3",
33
- "@moon-inferno/icons": "0.4.3",
34
- "@moon-inferno/themes": "0.4.3",
35
- "@moon-inferno/react": "0.4.3"
32
+ "@moon-inferno/core": "0.4.9",
33
+ "@moon-inferno/icons": "0.4.9",
34
+ "@moon-inferno/themes": "0.4.9",
35
+ "@moon-inferno/react": "0.4.9"
36
36
  },
37
37
  "peerDependencies": {
38
38
  "react": ">=18.0.0",