@eveshipfit/ui-ingame 1.12.0 → 1.13.0

package/dist/style.css

@@ -478,6 +478,18 @@
   position: absolute;
 }
 
+.T6VD6G_mutated {
+  background: var(--esf-mutated);
+  border-radius: var(--wheel-unit);
+  box-shadow: 0 0 calc(5 * var(--wheel-unit)) var(--esf-mutated);
+  height: calc(3 * var(--wheel-unit));
+  left: 50%;
+  top: calc(3 * var(--wheel-unit));
+  width: calc(16 * var(--wheel-unit));
+  position: absolute;
+  translate: -50%;
+}
+
 .T6VD6G_fill, .T6VD6G_frame {
   background: var(--colour);
   mask: var(--texture) center / 100% 100%;
@@ -1651,6 +1663,387 @@
   height: calc(16 * var(--info-unit));
   width: calc(16 * var(--info-unit));
 }
+.yNZdnG_card {
+  max-height: none;
+  width: calc(460 * var(--info-unit));
+  overflow: visible;
+}
+
+.yNZdnG_panel {
+  gap: calc(10 * var(--info-unit));
+  padding: calc(10 * var(--info-unit)) 0 calc(6 * var(--info-unit));
+  flex-direction: column;
+  display: flex;
+}
+
+.yNZdnG_toolbar {
+  gap: calc(6 * var(--info-unit));
+  display: flex;
+  position: relative;
+}
+
+.yNZdnG_picker {
+  flex: 1;
+  min-width: 0;
+}
+
+.yNZdnG_select {
+  background: var(--esf-input-bg);
+  border: 1px solid var(--esf-input-border);
+  color: var(--esf-text);
+  cursor: pointer;
+  font: inherit;
+  align-items: center;
+  gap: calc(8 * var(--info-unit));
+  height: 100%;
+  padding: calc(5 * var(--info-unit)) calc(8 * var(--info-unit));
+  width: 100%;
+  display: flex;
+}
+
+.yNZdnG_select:hover, .yNZdnG_select:focus-visible, .yNZdnG_select[aria-expanded="true"] {
+  border-color: var(--esf-text-muted);
+  outline: none;
+}
+
+.yNZdnG_selected {
+  text-align: left;
+  flex: 1;
+}
+
+.yNZdnG_caret {
+  color: var(--esf-text-muted);
+}
+
+.yNZdnG_roll {
+  flex: none;
+  display: flex;
+}
+
+.yNZdnG_more {
+  background: var(--esf-button);
+  border: 1px solid var(--esf-button-edge);
+  color: var(--esf-text-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: calc(10 * var(--info-unit));
+  padding: 0 calc(5 * var(--info-unit));
+  border-left: none;
+}
+
+.yNZdnG_more:hover, .yNZdnG_more:focus-visible {
+  background: var(--esf-button-active);
+  border-color: var(--esf-button-active-edge);
+  color: var(--esf-text);
+  outline: none;
+}
+
+.yNZdnG_dice {
+  background: var(--esf-button);
+  border: 1px solid var(--esf-button-edge);
+  color: var(--esf-text);
+  cursor: pointer;
+  width: calc(30 * var(--info-unit));
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.yNZdnG_dice:hover, .yNZdnG_dice:focus-visible {
+  background: var(--esf-button-active);
+  border-color: var(--esf-button-active-edge);
+  outline: none;
+}
+
+.yNZdnG_dice > svg {
+  height: calc(16 * var(--info-unit));
+  width: calc(16 * var(--info-unit));
+}
+
+.yNZdnG_menu {
+  background: var(--esf-menu-bg);
+  border: 1px solid var(--esf-border);
+  box-shadow: 0 calc(10 * var(--info-unit)) calc(30 * var(--info-unit)) #000c;
+  z-index: 1;
+  grid-template-columns: auto 1fr;
+  display: grid;
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  right: 0;
+}
+
+.yNZdnG_options {
+  border-right: 1px solid var(--esf-input-border);
+  padding: calc(4 * var(--info-unit)) 0;
+  outline: none;
+  margin: 0;
+  list-style: none;
+}
+
+.yNZdnG_option {
+  white-space: nowrap;
+  color: var(--esf-text);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  width: 100%;
+  padding: calc(5 * var(--info-unit)) calc(10 * var(--info-unit));
+  background: none;
+  border: none;
+  outline: none;
+  display: block;
+}
+
+.yNZdnG_option[data-active] {
+  background: var(--esf-menu-hover);
+}
+
+.yNZdnG_option[aria-checked="true"] {
+  box-shadow: inset calc(2 * var(--info-unit)) 0 var(--esf-button-active-edge);
+}
+
+.yNZdnG_option:focus-visible {
+  outline: 1px solid var(--esf-button-active-edge);
+  outline-offset: -1px;
+}
+
+.yNZdnG_chart {
+  font-size: calc(10 * var(--info-unit));
+  gap: calc(7 * var(--info-unit));
+  padding: calc(8 * var(--info-unit)) calc(10 * var(--info-unit)) calc(6 * var(--info-unit));
+  flex-direction: column;
+  display: flex;
+}
+
+.yNZdnG_chartTitle {
+  font-size: calc(11 * var(--info-unit));
+}
+
+.yNZdnG_chartRow {
+  gap: calc(2 * var(--info-unit));
+  display: grid;
+}
+
+.yNZdnG_chartName {
+  color: var(--esf-text-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.yNZdnG_chartBar {
+  background: var(--esf-input-bg);
+  height: calc(12 * var(--info-unit));
+  position: relative;
+}
+
+.yNZdnG_chartBehind {
+  background: #ffffff14;
+  position: absolute;
+  inset-block: 0;
+}
+
+.yNZdnG_chartRange {
+  --low: var(--esf-bad);
+  --high: var(--esf-good);
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--low) 60%, transparent),
+    var(--esf-resistance-bg) var(--neutral),
+    color-mix(in srgb, var(--high) 60%, transparent));
+  inset-block: calc(2 * var(--info-unit));
+  position: absolute;
+}
+
+.yNZdnG_chartRange:not([data-up-is-good]) {
+  --low: var(--esf-good);
+  --high: var(--esf-bad);
+}
+
+.yNZdnG_chartBase {
+  background: var(--esf-text);
+  opacity: .8;
+  width: 1px;
+  position: absolute;
+  inset-block: -1px;
+}
+
+.yNZdnG_chartRoll {
+  background: var(--esf-text);
+  border: 1px solid var(--esf-bg);
+  height: calc(10 * var(--info-unit));
+  margin-left: calc(-3 * var(--info-unit));
+  top: calc(1 * var(--info-unit));
+  width: calc(6 * var(--info-unit));
+  position: absolute;
+}
+
+.yNZdnG_chartAxis {
+  color: var(--esf-text-muted);
+  font-size: calc(9 * var(--info-unit));
+  justify-content: space-between;
+  display: flex;
+}
+
+.yNZdnG_stats {
+  font-size: calc(11 * var(--info-unit));
+  gap: calc(4 * var(--info-unit)) calc(8 * var(--info-unit));
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) calc(84 * var(--info-unit)) calc(44 * var(--info-unit));
+  display: grid;
+}
+
+.yNZdnG_stat {
+  align-items: center;
+  display: contents;
+}
+
+.yNZdnG_name {
+  align-items: center;
+  gap: calc(6 * var(--info-unit));
+  min-width: 0;
+  display: flex;
+}
+
+.yNZdnG_icon {
+  height: calc(16 * var(--info-unit));
+  width: calc(16 * var(--info-unit));
+  flex: none;
+}
+
+.yNZdnG_label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.yNZdnG_slider {
+  --worse: var(--esf-bad);
+  --better: var(--esf-good);
+  --low: var(--worse);
+  --high: var(--better);
+  align-self: center;
+  display: flex;
+  position: relative;
+}
+
+.yNZdnG_slider:not([data-high-is-good]) {
+  --low: var(--better);
+  --high: var(--worse);
+}
+
+.yNZdnG_slider:after {
+  background: var(--esf-text);
+  content: "";
+  height: calc(14 * var(--info-unit));
+  left: var(--base);
+  pointer-events: none;
+  width: 1px;
+  position: absolute;
+  top: 50%;
+  translate: 0 -50%;
+}
+
+.yNZdnG_slider > input {
+  appearance: none;
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--low) 60%, transparent),
+    var(--esf-resistance-bg) var(--base),
+    color-mix(in srgb, var(--high) 60%, transparent));
+  cursor: pointer;
+  height: calc(4 * var(--info-unit));
+  margin: calc(8 * var(--info-unit)) 0;
+  width: 100%;
+}
+
+.yNZdnG_slider > input::-webkit-slider-thumb {
+  appearance: none;
+  background: var(--esf-text);
+  border: 1px solid var(--esf-bg);
+  height: calc(14 * var(--info-unit));
+  width: calc(8 * var(--info-unit));
+}
+
+.yNZdnG_slider > input::-moz-range-thumb {
+  background: var(--esf-text);
+  border: 1px solid var(--esf-bg);
+  height: calc(14 * var(--info-unit));
+  width: calc(8 * var(--info-unit));
+  border-radius: 0;
+}
+
+.yNZdnG_slider > input:focus-visible {
+  outline: 1px solid var(--esf-button-active-edge);
+  outline-offset: calc(4 * var(--info-unit));
+}
+
+.yNZdnG_value {
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.yNZdnG_change {
+  color: var(--esf-text-muted);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.yNZdnG_change[data-change="better"] {
+  color: var(--esf-good);
+}
+
+.yNZdnG_change[data-change="worse"] {
+  color: var(--esf-bad);
+}
+
+.yNZdnG_button {
+  background: var(--esf-button);
+  border: 1px solid var(--esf-button-edge);
+  color: var(--esf-text);
+  cursor: pointer;
+  font: inherit;
+  padding: calc(4 * var(--info-unit)) calc(12 * var(--info-unit));
+}
+
+.yNZdnG_button:hover:not(:disabled), .yNZdnG_button:focus-visible {
+  background: var(--esf-button-active);
+  border-color: var(--esf-button-active-edge);
+}
+
+.yNZdnG_button:disabled {
+  cursor: default;
+  opacity: .5;
+}
+
+.yNZdnG_import {
+  gap: calc(8 * var(--info-unit));
+  flex-direction: column;
+  display: flex;
+}
+
+.yNZdnG_import > .yNZdnG_button {
+  align-self: flex-start;
+}
+
+.yNZdnG_field {
+  resize: vertical;
+  background: var(--esf-input-bg);
+  border: 1px solid var(--esf-input-border);
+  color: var(--esf-text);
+  font: inherit;
+  padding: calc(6 * var(--info-unit)) calc(8 * var(--info-unit));
+}
+
+.yNZdnG_field:focus {
+  border-color: var(--esf-text-muted);
+  outline: none;
+}
+
+.yNZdnG_error {
+  color: var(--esf-violation-error);
+  margin: 0;
+}
 .qMyuGa_bonuses {
   --unit: var(--tooltip-unit, 1px);
   color: var(--esf-text-muted);

package/dist/theme.css

@@ -62,6 +62,7 @@
   --esf-fighter-tube-hover: rgb(255 255 255 / 4%);
   --esf-fighter-full: #78bf42;
   --esf-fighter-empty: #070707;
+  --esf-mutated: #b06cff;
 
   /* EVE's UI scale; 1 is 100%. */
   --esf-scale: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eveshipfit/ui-ingame",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "EVE Online ship fitting UI that looks like the in-game one",
   "license": "MIT",
   "author": "EVEShipFit Team <info@eveship.fit>",
@@ -27,8 +27,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@eveshipfit/fitting": "2.5.1",
-    "@eveshipfit/react-hooks": "2.5.1"
+    "@eveshipfit/fitting": "2.6.0",
+    "@eveshipfit/react-hooks": "2.6.0"
   },
   "devDependencies": {
     "@babel/core": "^8.0.9",
@@ -44,7 +44,7 @@
     "storybook": "^10.6.5",
     "tsdown": "^0.23.3",
     "vite": "^8.3.5",
-    "@eveshipfit/sde-loader": "4.0.0"
+    "@eveshipfit/sde-loader": "4.1.0"
   },
   "peerDependencies": {
     "@eveshipfit/images": "^3.3561556.0",