@eveshipfit/ui-ingame 1.4.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/style.css CHANGED
@@ -562,11 +562,11 @@
562
562
  --colour: var(--esf-state-overload);
563
563
  }
564
564
 
565
- .T6VD6G_slot[data-state="offline"] > .T6VD6G_body {
565
+ .T6VD6G_slot[data-state="offline"] .T6VD6G_body {
566
566
  opacity: .3;
567
567
  }
568
568
 
569
- .T6VD6G_slot[data-state="unavailable"] > .T6VD6G_body {
569
+ .T6VD6G_slot[data-state="unavailable"] .T6VD6G_body {
570
570
  opacity: .1;
571
571
  }
572
572
 
@@ -600,6 +600,13 @@
600
600
  position: absolute;
601
601
  }
602
602
 
603
+ .T6VD6G_anchor {
604
+ height: calc(var(--slot-size) * var(--wheel-unit));
605
+ margin: calc(var(--slot-size) / -2 * var(--wheel-unit));
606
+ width: calc(var(--slot-size) * var(--wheel-unit));
607
+ position: absolute;
608
+ }
609
+
603
610
  .T6VD6G_action {
604
611
  height: calc(var(--action-size) * var(--wheel-unit));
605
612
  margin: calc(var(--action-size) / -2 * var(--wheel-unit));
@@ -657,6 +664,10 @@
657
664
  .pLDZ2W_gauge[data-over] {
658
665
  --colour: var(--esf-state-overload);
659
666
  }
667
+
668
+ .pLDZ2W_gauge[data-loading] {
669
+ opacity: 0;
670
+ }
660
671
  .zDAPCG_hull {
661
672
  opacity: .8;
662
673
  pointer-events: none;
@@ -825,6 +836,126 @@
825
836
  ._6LFjiq_cell[data-lit] {
826
837
  background: var(--lit);
827
838
  }
839
+ ._9_b9FW_modes {
840
+ pointer-events: none;
841
+ position: absolute;
842
+ inset: 0;
843
+ }
844
+
845
+ ._9_b9FW_place {
846
+ height: calc(32 * var(--wheel-unit));
847
+ margin: calc(-16 * var(--wheel-unit));
848
+ pointer-events: auto;
849
+ width: calc(32 * var(--wheel-unit));
850
+ position: absolute;
851
+ }
852
+
853
+ ._9_b9FW_mode {
854
+ cursor: pointer;
855
+ background: radial-gradient(circle closest-side, #1c1e20d9 90%, #0000);
856
+ border-radius: 50%;
857
+ width: 100%;
858
+ height: 100%;
859
+ display: block;
860
+ position: relative;
861
+ }
862
+
863
+ ._9_b9FW_mode > input {
864
+ appearance: none;
865
+ cursor: inherit;
866
+ border-radius: 50%;
867
+ outline: none;
868
+ margin: 0;
869
+ position: absolute;
870
+ inset: 0;
871
+ }
872
+
873
+ ._9_b9FW_mode:has(:disabled) {
874
+ cursor: default;
875
+ }
876
+
877
+ ._9_b9FW_mode:hover:not(:has(:disabled)) {
878
+ background: radial-gradient(circle closest-side, #ffffff1a 90%, #0000);
879
+ }
880
+
881
+ ._9_b9FW_mode:has(:checked) {
882
+ background: radial-gradient(circle closest-side,
883
+ color-mix(in srgb, var(--esf-button-active-edge) 55%, transparent) 70%,
884
+ transparent);
885
+ }
886
+
887
+ ._9_b9FW_mode:has(:checked) > img {
888
+ filter: drop-shadow(0 0 calc(2 * var(--wheel-unit)) var(--esf-button-active-edge));
889
+ }
890
+
891
+ ._9_b9FW_mode:has(:focus-visible) {
892
+ outline: calc(1 * var(--wheel-unit)) solid var(--esf-text);
893
+ }
894
+
895
+ ._9_b9FW_mode > img {
896
+ pointer-events: none;
897
+ width: 100%;
898
+ height: 100%;
899
+ display: block;
900
+ position: relative;
901
+ }
902
+ ._f5iUa_tooltip {
903
+ gap: 8px;
904
+ display: grid;
905
+ }
906
+
907
+ ._f5iUa_type, ._f5iUa_line, ._f5iUa_bonuses, ._f5iUa_bonus {
908
+ align-items: center;
909
+ gap: 8px;
910
+ display: flex;
911
+ }
912
+
913
+ ._f5iUa_type {
914
+ font-weight: 600;
915
+ }
916
+
917
+ ._f5iUa_block {
918
+ gap: 4px;
919
+ display: grid;
920
+ }
921
+
922
+ ._f5iUa_bonuses {
923
+ gap: 12px;
924
+ }
925
+
926
+ ._f5iUa_bonus {
927
+ gap: 4px;
928
+ }
929
+
930
+ ._f5iUa_iconless {
931
+ align-items: center;
932
+ min-height: 24px;
933
+ padding-left: 32px;
934
+ display: flex;
935
+ }
936
+
937
+ ._f5iUa_damages {
938
+ grid-auto-columns: 1fr;
939
+ grid-auto-flow: column;
940
+ padding-left: 27px;
941
+ display: grid;
942
+ }
943
+
944
+ ._f5iUa_damages ._f5iUa_bonus {
945
+ gap: 0;
946
+ }
947
+
948
+ ._f5iUa_status[data-tone="muted"] {
949
+ color: var(--esf-text-muted);
950
+ }
951
+
952
+ ._f5iUa_status[data-tone="active"] {
953
+ color: var(--esf-state-active);
954
+ }
955
+
956
+ ._f5iUa_status[data-tone="overload"] {
957
+ color: var(--esf-state-overload);
958
+ }
828
959
  .GK_wGG_centre {
829
960
  inset: calc(86 * var(--wheel-unit));
830
961
  border-radius: 50%;
@@ -1437,17 +1568,32 @@
1437
1568
  align-items: center;
1438
1569
  gap: calc(2 * var(--window-unit));
1439
1570
  left: calc(20 * var(--window-unit));
1440
- max-width: calc(200 * var(--window-unit));
1571
+ max-width: calc(150 * var(--window-unit));
1441
1572
  top: calc(40 * var(--window-unit));
1442
1573
  white-space: nowrap;
1443
1574
  display: flex;
1444
1575
  }
1445
1576
 
1446
1577
  .L9t91q_fitName {
1578
+ color: inherit;
1579
+ cursor: text;
1580
+ font: inherit;
1447
1581
  text-overflow: ellipsis;
1582
+ background: none;
1583
+ border: none;
1584
+ padding: 0;
1448
1585
  overflow: hidden;
1449
1586
  }
1450
1587
 
1588
+ .L9t91q_fitNameInput {
1589
+ background: var(--esf-input-bg);
1590
+ border: var(--window-unit) solid var(--esf-input-border);
1591
+ color: var(--esf-text);
1592
+ font: inherit;
1593
+ min-width: 0;
1594
+ padding: 0 calc(2 * var(--window-unit));
1595
+ }
1596
+
1451
1597
  .L9t91q_icon {
1452
1598
  cursor: default;
1453
1599
  background: none;
@@ -1966,6 +2112,124 @@
1966
2112
  top: 0;
1967
2113
  left: -1000px;
1968
2114
  }
2115
+
2116
+ .xFSZwa_actions {
2117
+ gap: calc(8 * var(--browser-unit));
2118
+ margin-top: calc(8 * var(--browser-unit));
2119
+ display: flex;
2120
+ }
2121
+
2122
+ .xFSZwa_action {
2123
+ background: var(--esf-button);
2124
+ border: var(--browser-unit) solid var(--esf-button-edge);
2125
+ color: var(--esf-text);
2126
+ cursor: pointer;
2127
+ font: inherit;
2128
+ height: calc(32 * var(--browser-unit));
2129
+ min-width: calc(80 * var(--browser-unit));
2130
+ padding: 0 calc(16 * var(--browser-unit));
2131
+ }
2132
+
2133
+ .xFSZwa_action:hover:not(:disabled), .xFSZwa_action:focus-visible {
2134
+ background: var(--esf-button-active);
2135
+ border-color: var(--esf-button-active-edge);
2136
+ }
2137
+
2138
+ .xFSZwa_action:disabled {
2139
+ color: var(--esf-text-muted);
2140
+ cursor: default;
2141
+ }
2142
+
2143
+ .xFSZwa_copyAnchor {
2144
+ anchor-name: --fit-copy;
2145
+ display: flex;
2146
+ }
2147
+
2148
+ .xFSZwa_copy {
2149
+ min-width: 0;
2150
+ width: calc(32 * var(--browser-unit));
2151
+ justify-content: center;
2152
+ align-items: center;
2153
+ padding: 0;
2154
+ display: flex;
2155
+ }
2156
+
2157
+ .xFSZwa_copy > img {
2158
+ height: calc(16 * var(--browser-unit));
2159
+ width: calc(16 * var(--browser-unit));
2160
+ }
2161
+
2162
+ .xFSZwa_menu {
2163
+ background: var(--esf-menu-bg);
2164
+ border: var(--browser-unit) solid var(--esf-input-border);
2165
+ color: var(--esf-text);
2166
+ font-family: var(--esf-font);
2167
+ font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
2168
+ margin: calc(4 * var(--browser-unit)) 0;
2169
+ padding: calc(6 * var(--browser-unit)) 0;
2170
+ position-anchor: --fit-copy;
2171
+ position-area: top span-right;
2172
+ position-try-fallbacks: flip-block;
2173
+ inset: auto;
2174
+ }
2175
+
2176
+ .xFSZwa_menu > button {
2177
+ color: inherit;
2178
+ cursor: pointer;
2179
+ font: inherit;
2180
+ padding: calc(5 * var(--browser-unit)) calc(16 * var(--browser-unit));
2181
+ text-align: left;
2182
+ background: none;
2183
+ border: none;
2184
+ width: 100%;
2185
+ display: block;
2186
+ }
2187
+
2188
+ .xFSZwa_menu > button:hover, .xFSZwa_menu > button:focus-visible {
2189
+ background: var(--esf-menu-hover);
2190
+ outline: none;
2191
+ }
2192
+
2193
+ .xFSZwa_form {
2194
+ flex-direction: column;
2195
+ gap: 8px;
2196
+ width: min(420px, 80vw);
2197
+ display: flex;
2198
+ }
2199
+
2200
+ .xFSZwa_form > label {
2201
+ color: var(--esf-text-muted);
2202
+ }
2203
+
2204
+ .xFSZwa_form > input, .xFSZwa_form > textarea {
2205
+ background: var(--esf-input-bg);
2206
+ border: 1px solid var(--esf-input-border);
2207
+ color: var(--esf-text);
2208
+ }
2209
+
2210
+ .xFSZwa_form > textarea {
2211
+ resize: vertical;
2212
+ font-family: ui-monospace, monospace;
2213
+ }
2214
+
2215
+ .xFSZwa_importError {
2216
+ color: var(--esf-bad);
2217
+ margin: 0;
2218
+ }
2219
+
2220
+ .xFSZwa_confirm {
2221
+ max-width: min(360px, 80vw);
2222
+ }
2223
+
2224
+ .xFSZwa_confirm > p {
2225
+ margin: 0 0 12px;
2226
+ }
2227
+
2228
+ .xFSZwa_dialogButtons {
2229
+ justify-content: flex-end;
2230
+ gap: 8px;
2231
+ display: flex;
2232
+ }
1969
2233
  .lebA7G_statistics {
1970
2234
  --statistics-unit: calc(1px * var(--esf-scale, 1));
1971
2235
  color: var(--esf-text);
@@ -2000,6 +2264,10 @@
2000
2264
  color: var(--esf-bad);
2001
2265
  }
2002
2266
 
2267
+ .lebA7G_limit[data-over] {
2268
+ color: var(--esf-violation-error);
2269
+ }
2270
+
2003
2271
  .lebA7G_lines {
2004
2272
  display: grid;
2005
2273
  }
package/dist/theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* Every colour and size the components use; override any of these to restyle. */
2
2
  :root {
3
- --esf-font: system-ui, -apple-system, "Segoe UI", sans-serif;
3
+ --esf-font: "Noto Sans Variable", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
4
4
  --esf-font-size: 13px;
5
5
 
6
6
  --esf-bg: #0b0d0f;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eveshipfit/ui-ingame",
3
- "version": "1.4.0",
3
+ "version": "1.5.0",
4
4
  "description": "EVE Online ship fitting UI that looks like the in-game one",
5
5
  "license": "MIT",
6
6
  "author": "EVEShipFit Team <info@eveship.fit>",
@@ -27,11 +27,11 @@
27
27
  "access": "public"
28
28
  },
29
29
  "dependencies": {
30
- "@eveshipfit/react-hooks": "2.0.0"
30
+ "@eveshipfit/react-hooks": "2.1.0"
31
31
  },
32
32
  "devDependencies": {
33
33
  "@babel/core": "^7.29.0",
34
- "@eveshipfit/images": "^1.3552227.2",
34
+ "@eveshipfit/images": "^2.3561556.0",
35
35
  "@rolldown/plugin-babel": "^0.2.4",
36
36
  "@storybook/react-vite": "^10.6.0",
37
37
  "@tsdown/css": "^0.23.0",
@@ -43,11 +43,11 @@
43
43
  "storybook": "^10.6.0",
44
44
  "tsdown": "^0.23.0",
45
45
  "vite": "^8.3.0",
46
- "@eveshipfit/fitting": "2.0.0",
47
- "@eveshipfit/sde-loader": "1.3.0"
46
+ "@eveshipfit/fitting": "2.1.0",
47
+ "@eveshipfit/sde-loader": "1.4.0"
48
48
  },
49
49
  "peerDependencies": {
50
- "@eveshipfit/images": "^1.3552227.2",
50
+ "@eveshipfit/images": "^2.3561556.0",
51
51
  "react": "^19.0.0",
52
52
  "react-dom": "^19.0.0"
53
53
  },