@eveshipfit/ui-ingame 1.9.0 → 1.10.0

package/dist/style.css

@@ -1,11 +1,12 @@
 .kwi1cG_dialog {
+  --dialog-unit: calc(1px * var(--esf-scale, 1));
   background: var(--esf-surface);
-  border: 1px solid var(--esf-border);
+  border: var(--dialog-unit) solid var(--esf-border);
   border-radius: var(--esf-radius);
   color: var(--esf-text);
   font-family: var(--esf-font);
-  font-size: var(--esf-font-size);
-  max-width: min(640px, 90vw);
+  font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
+  max-width: min(calc(640 * var(--dialog-unit)), 90vw);
   padding: 0;
 }
 
@@ -15,9 +16,9 @@
 
 .kwi1cG_header {
   background: var(--esf-surface-raised);
-  border-bottom: 1px solid var(--esf-border);
+  border-bottom: var(--dialog-unit) solid var(--esf-border);
+  padding: calc(6 * var(--dialog-unit)) calc(10 * var(--dialog-unit));
   align-items: center;
-  padding: 6px 10px;
   display: flex;
 }
 
@@ -42,7 +43,7 @@
 }
 
 .kwi1cG_content {
-  padding: 10px;
+  padding: calc(10 * var(--dialog-unit));
 }
 .cmKEiW_anchor {
   display: contents;
@@ -53,13 +54,15 @@
 }
 
 .cmKEiW_tooltip {
-  --notch-size: 10px;
-  --notch-reach: calc(var(--notch-size) * .71 + 1px);
+  --tooltip-unit: calc(1px * var(--esf-scale, 1));
+  --notch-size: calc(10 * var(--tooltip-unit));
+  --notch-reach: calc(var(--notch-size) * .71 + var(--tooltip-unit));
   anchor-name: var(--tooltip-box);
   color: var(--esf-text);
   font-family: var(--esf-font);
-  font-size: var(--esf-font-size);
+  font-size: calc(var(--esf-font-size) * var(--esf-scale, 1));
   margin: var(--notch-reach) 0;
+  max-width: calc(320 * var(--tooltip-unit));
   opacity: .9;
   pointer-events: none;
   position-anchor: var(--tooltip-anchor);
@@ -67,7 +70,6 @@
   position-try-fallbacks: flip-block;
   background: none;
   border: none;
-  max-width: 320px;
   padding: 0;
   inset: auto;
   overflow: visible;
@@ -75,7 +77,7 @@
 
 .cmKEiW_notch, .cmKEiW_label {
   background: var(--esf-bg);
-  border: 1px solid var(--esf-border);
+  border: var(--tooltip-unit) solid var(--esf-border);
 }
 
 .cmKEiW_notch, .cmKEiW_label:after {
@@ -97,7 +99,7 @@
 }
 
 .cmKEiW_label {
-  padding: 8px 14px;
+  padding: calc(8 * var(--tooltip-unit)) calc(14 * var(--tooltip-unit));
   display: block;
   position: relative;
 }
@@ -105,19 +107,19 @@
 .cmKEiW_label:after {
   background: var(--esf-bg);
   content: "";
-  height: 1px;
-  top: clamp(anchor(var(--tooltip-box) top), var(--edge), anchor(var(--tooltip-box) bottom) - 1px);
-  width: calc(var(--notch-size) * 1.41 - 2px);
+  height: var(--tooltip-unit);
+  top: clamp(anchor(var(--tooltip-box) top), var(--edge), anchor(var(--tooltip-box) bottom) - var(--tooltip-unit));
+  width: calc(var(--notch-size) * 1.41 - 2 * var(--tooltip-unit));
   translate: -50%;
 }
 
 .cmKEiW_text {
-  gap: 8px;
+  gap: calc(8 * var(--tooltip-unit));
   display: grid;
 }
 
 .cmKEiW_text + .cmKEiW_text {
-  margin-top: 12px;
+  margin-top: calc(12 * var(--tooltip-unit));
 }
 
 .cmKEiW_title {
@@ -189,7 +191,7 @@
   padding-left: calc(21 * var(--tree-unit));
 }
 
-.ZoSRha_tree > li > .ZoSRha_head, .ZoSRha_tree > .ZoSRha_head {
+.ZoSRha_tree > li > .ZoSRha_head {
   background: var(--esf-tree-header);
 }
 
@@ -637,7 +639,7 @@
   inset: 0;
 }
 
-._-v7zG_icon, ._-v7zG_dot {
+._-v7zG_dot {
   height: calc(16 * var(--wheel-unit));
   pointer-events: none;
   width: calc(16 * var(--wheel-unit));
@@ -645,11 +647,24 @@
   transform: translate(-50%, -50%);
 }
 
+._-v7zG_icon {
+  height: calc(16 * var(--wheel-unit));
+  margin: calc(-8 * var(--wheel-unit));
+  width: calc(16 * var(--wheel-unit));
+  position: absolute;
+}
+
 ._-v7zG_icon > img {
   width: 100%;
   height: 100%;
   display: block;
 }
+
+._-v7zG_title {
+  gap: calc(24px * var(--esf-scale, 1));
+  justify-content: space-between;
+  display: flex;
+}
 .pLDZ2W_gauge {
   --colour: var(--esf-cpu);
   background: var(--colour);
@@ -968,6 +983,25 @@
   display: block;
   position: relative;
 }
+._1EVyAG_notice {
+  height: var(--wheel-texture-size);
+  left: calc(50% - var(--wheel-texture-size) / 2);
+  pointer-events: none;
+  top: calc(50% - var(--wheel-texture-size) / 2);
+  width: var(--wheel-texture-size);
+  position: absolute;
+  overflow: visible;
+}
+
+._1EVyAG_text {
+  fill: #d9d9d9;
+  font-family: var(--esf-font);
+  letter-spacing: .1em;
+  paint-order: stroke;
+  stroke: #0009;
+  stroke-width: 3px;
+  font-size: 13px;
+}
 .BVBbxW_track {
   fill: none;
   pointer-events: none;
@@ -1062,7 +1096,7 @@
 }
 
 .BVBbxW_slot:has(.BVBbxW_press:hover) .BVBbxW_frame, .BVBbxW_slot:has(.BVBbxW_press:focus-visible) .BVBbxW_frame {
-  stroke: var(--esf-text-muted);
+  fill: #1a2a2d;
 }
 
 .BVBbxW_number {
@@ -1091,21 +1125,28 @@
   opacity: 1;
 }
 
+.BVBbxW_slot > .BVBbxW_actions[inert] {
+  opacity: 0;
+}
+
 .BVBbxW_slot:hover :is(.BVBbxW_action, .BVBbxW_bridge), .BVBbxW_slot:has(:focus-visible) :is(.BVBbxW_action, .BVBbxW_bridge) {
   pointer-events: auto;
 }
 
 .BVBbxW_action {
+  box-shadow: 0 0 0 calc(2 * var(--wheel-unit)) #0d1213;
   height: calc(var(--action-size) * var(--wheel-unit));
   left: calc(50% + var(--x) * var(--wheel-unit));
   margin: calc(var(--action-size) / -2 * var(--wheel-unit));
   top: calc(50% + var(--y) * var(--wheel-unit));
   width: calc(var(--action-size) * var(--wheel-unit));
+  background: #0d1213;
+  border-radius: 50%;
   position: absolute;
 }
 
 .BVBbxW_bridge {
-  height: calc((var(--tray-start) + var(--tray-length) - var(--slot-size) / 2) * var(--wheel-unit));
+  height: calc((var(--actions-start) + var(--actions-length) - var(--slot-size) / 2) * var(--wheel-unit));
   left: calc(50% - var(--slot-size) / 2 * var(--wheel-unit));
   transform: rotate(var(--angle)) translateY(calc(var(--slot-size) / 2 * var(--wheel-unit)));
   transform-origin: 50% 0;
@@ -1113,28 +1154,15 @@
   position: absolute;
   top: 50%;
 }
-
-.BVBbxW_tray {
-  border-radius: calc(var(--tray-width) / 2 * var(--wheel-unit));
-  box-sizing: border-box;
-  height: calc(var(--tray-length) * var(--wheel-unit));
-  left: calc(50% - var(--tray-width) / 2 * var(--wheel-unit));
-  transform: rotate(var(--angle)) translateY(calc(var(--tray-start) * var(--wheel-unit)));
-  transform-origin: 50% 0;
-  width: calc(var(--tray-width) * var(--wheel-unit));
-  background: #0d1213f2;
-  border: 1px solid #3d5960;
-  position: absolute;
-  top: 50%;
-}
 ._f5iUa_tooltip {
-  gap: 8px;
+  --module-tooltip-unit: calc(1px * var(--esf-scale, 1));
+  gap: calc(8 * var(--module-tooltip-unit));
   display: grid;
 }
 
 ._f5iUa_type, ._f5iUa_line, ._f5iUa_bonuses, ._f5iUa_bonus {
   align-items: center;
-  gap: 8px;
+  gap: calc(8 * var(--module-tooltip-unit));
   display: flex;
 }
 
@@ -1143,35 +1171,41 @@
 }
 
 ._f5iUa_block {
-  gap: 4px;
+  gap: calc(4 * var(--module-tooltip-unit));
   display: grid;
 }
 
 ._f5iUa_bonuses {
-  gap: 12px;
+  gap: calc(12 * var(--module-tooltip-unit));
 }
 
 ._f5iUa_bonus {
-  gap: 4px;
+  gap: calc(4 * var(--module-tooltip-unit));
 }
 
-._f5iUa_noIcon {
+._f5iUa_icon, ._f5iUa_noIcon {
+  height: calc(24 * var(--module-tooltip-unit));
+  width: calc(24 * var(--module-tooltip-unit));
   flex: none;
-  width: 24px;
-  height: 24px;
+}
+
+._f5iUa_icon > span {
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
 ._f5iUa_iconless {
+  min-height: calc(24 * var(--module-tooltip-unit));
+  padding-left: calc(32 * var(--module-tooltip-unit));
   align-items: center;
-  min-height: 24px;
-  padding-left: 32px;
   display: flex;
 }
 
 ._f5iUa_values {
+  padding-left: calc(27 * var(--module-tooltip-unit));
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
-  padding-left: 27px;
   display: grid;
 }
 
@@ -1198,11 +1232,11 @@
 
 ._f5iUa_info {
   background: var(--esf-button-active-edge);
-  height: 16px;
+  height: calc(16 * var(--module-tooltip-unit));
+  margin: calc(4 * var(--module-tooltip-unit));
   mask: var(--texture) center / 100% 100%;
+  width: calc(16 * var(--module-tooltip-unit));
   flex: none;
-  width: 16px;
-  margin: 4px;
 }
 .GK_wGG_centre {
   inset: calc(86 * var(--wheel-unit));
@@ -1266,15 +1300,15 @@
   outline: var(--service-unit) solid var(--esf-text);
 }
 
-.R9jwpW_slot[data-state="empty"] > .R9jwpW_body:before {
+.R9jwpW_slot[data-state="empty"] .R9jwpW_body:before {
   opacity: .4;
 }
 
-.R9jwpW_slot[data-state="offline"] > .R9jwpW_body {
+.R9jwpW_slot[data-state="offline"] .R9jwpW_body {
   opacity: .3;
 }
 
-.R9jwpW_slot[data-state="unavailable"] > .R9jwpW_body {
+.R9jwpW_slot[data-state="unavailable"] .R9jwpW_body {
   opacity: .1;
 }
 
@@ -2176,7 +2210,7 @@
 
 .L9t91q_alertLine {
   align-items: center;
-  gap: 8px;
+  gap: calc(8 * var(--window-unit));
   display: flex;
 }
 
@@ -2360,8 +2394,12 @@
 
 .L9t91q_statistics {
   left: calc(700 * var(--window-unit) + var(--browser-width));
-  width: calc(280 * var(--window-unit));
   transition: left .2s;
+  right: 0;
+}
+
+.L9t91q_statistics > .L9t91q_slide {
+  width: calc(280 * var(--window-unit));
 }
 
 .L9t91q_slide {
@@ -2674,6 +2712,10 @@
   width: calc(16 * var(--browser-unit));
 }
 
+.xFSZwa_copy:disabled > img {
+  opacity: .4;
+}
+
 .xFSZwa_menu {
   background: var(--esf-menu-bg);
   border: var(--browser-unit) solid var(--esf-input-border);
@@ -2706,9 +2748,9 @@
 }
 
 .xFSZwa_form {
+  gap: calc(8 * var(--browser-unit));
+  width: min(calc(420 * var(--browser-unit)), 80vw);
   flex-direction: column;
-  gap: 8px;
-  width: min(420px, 80vw);
   display: flex;
 }
 
@@ -2718,8 +2760,9 @@
 
 .xFSZwa_form > input, .xFSZwa_form > textarea {
   background: var(--esf-input-bg);
-  border: 1px solid var(--esf-input-border);
+  border: var(--browser-unit) solid var(--esf-input-border);
   color: var(--esf-text);
+  font: inherit;
 }
 
 .xFSZwa_form > textarea {
@@ -2733,16 +2776,16 @@
 }
 
 .xFSZwa_confirm {
-  max-width: min(360px, 80vw);
+  max-width: min(calc(360 * var(--browser-unit)), 80vw);
 }
 
 .xFSZwa_confirm > p {
-  margin: 0 0 12px;
+  margin: 0 0 calc(12 * var(--browser-unit));
 }
 
 .xFSZwa_dialogButtons {
+  gap: calc(8 * var(--browser-unit));
   justify-content: flex-end;
-  gap: 8px;
   display: flex;
 }
 
@@ -3069,9 +3112,9 @@
 }
 
 .lebA7G_profileForm {
+  gap: calc(8 * var(--damage-profile-unit));
+  width: min(calc(300 * var(--damage-profile-unit)), 80vw);
   flex-direction: column;
-  gap: 8px;
-  width: min(300px, 80vw);
   display: flex;
 }
 
@@ -3081,7 +3124,7 @@
 
 .lebA7G_profileForm input {
   background: var(--esf-input-bg);
-  border: 1px solid var(--esf-input-border);
+  border: var(--damage-profile-unit) solid var(--esf-input-border);
   color: var(--esf-text);
   font: inherit;
 }
@@ -3092,22 +3135,22 @@
 }
 
 .lebA7G_amounts {
-  --share-unit: 1px;
+  --share-unit: var(--damage-profile-unit);
+  gap: calc(4 * var(--damage-profile-unit)) calc(8 * var(--damage-profile-unit));
+  margin-top: calc(4 * var(--damage-profile-unit));
   grid-template-columns: repeat(4, 1fr);
-  gap: 4px 8px;
-  margin-top: 4px;
   display: grid;
 }
 
 .lebA7G_amount {
   align-items: center;
-  gap: 2px;
+  gap: calc(2 * var(--damage-profile-unit));
   display: flex;
 }
 
 .lebA7G_amount > img {
-  width: 22px;
-  height: 22px;
+  height: calc(22 * var(--damage-profile-unit));
+  width: calc(22 * var(--damage-profile-unit));
 }
 
 .lebA7G_amount > input {
@@ -3116,21 +3159,21 @@
 }
 
 .lebA7G_dialogButtons {
+  gap: calc(8 * var(--damage-profile-unit));
+  margin-top: calc(4 * var(--damage-profile-unit));
   justify-content: flex-end;
-  gap: 8px;
-  margin-top: 4px;
   display: flex;
 }
 
 .lebA7G_action {
   background: var(--esf-button);
-  border: 1px solid var(--esf-button-edge);
+  border: var(--damage-profile-unit) solid var(--esf-button-edge);
   color: var(--esf-text);
   cursor: pointer;
   font: inherit;
-  min-width: 80px;
-  height: 32px;
-  padding: 0 16px;
+  height: calc(32 * var(--damage-profile-unit));
+  min-width: calc(80 * var(--damage-profile-unit));
+  padding: 0 calc(16 * var(--damage-profile-unit));
 }
 
 .lebA7G_action:hover:not(:disabled), .lebA7G_action:focus-visible {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eveshipfit/ui-ingame",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "EVE Online ship fitting UI that looks like the in-game one",
   "license": "MIT",
   "author": "EVEShipFit Team <info@eveship.fit>",
@@ -27,7 +27,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@eveshipfit/react-hooks": "2.3.1"
+    "@eveshipfit/react-hooks": "2.4.0",
+    "@eveshipfit/fitting": "2.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
@@ -43,7 +44,6 @@
     "storybook": "^10.6.0",
     "tsdown": "^0.23.0",
     "vite": "^8.3.0",
-    "@eveshipfit/fitting": "2.4.0",
     "@eveshipfit/sde-loader": "3.0.0"
   },
   "peerDependencies": {