feat: ability to remove modules from a fit (via hover on module) (#42)

src/ShipFit/ShipFit.module.css

@@ -60,11 +60,11 @@
 
 .ringTopItem > div, .ringTopItem > svg {
     --reverse-rotation: calc(-1 * var(--rotation));
+
     left: 50%;
     pointer-events: all;
     position: absolute;
     top: 3.5%;
-    transform: rotate(var(--reverse-rotation));
 }
 
 .radialMenu {
@@ -74,18 +74,23 @@
     width: 2.5%;
 }
 
-.slot {
-    height: 9.5%;
+.slotOuter {
+    height: 18%;
     margin-left: -2.5%;
+    position: absolute;
+    width: 7%;
+}
+
+.slot {
+    height: 50%;
     position: relative;
     user-select: none;
-    width: 7%;
+    width: 100%;
 }
 
 .slot > svg {
     height: 100%;
     position: absolute;
-    transform: rotate(var(--rotation));
     width: 100%;
     z-index: 4;
 }
@@ -93,14 +98,15 @@
 .slotImage {
     height: 100%;
     position: absolute;
-    margin-top: 8%;
-    margin-left: -10%;
+    transform: rotate(var(--reverse-rotation));
     width: 100%;
     z-index: 5;
 }
 
 .slotImage > img {
     border-top-left-radius: 50%;
+    margin-left: -10%;
+    margin-top: 5%;
     width: 120%;
 }
 
@@ -116,9 +122,31 @@
     fill: #fd2d2d;
     stroke: #fd2d2d;
 }
-.slot[data-state="Offline"] {
+.slot[data-state="Offline"] > svg, .slot[data-state="Offline"] > .slotImage {
     opacity: 0.3;
 }
-.slot[data-state="Unavailable"] {
+.slot[data-state="Unavailable"] > svg, .slot[data-state="Unavailable"] > .slotImage {
     opacity: 0.1;
 }
+
+.slotOuter .slotOptions {
+    display: none;
+}
+.slotOuter[data-hasitem=true]:hover .slotOptions {
+    display: block;
+}
+
+.slotOptions {
+    position: absolute;
+    text-align: center;
+    top: 50%;
+    width: 100%;
+}
+.slotOptions > svg {
+    cursor: pointer;
+    display: block;
+    filter: drop-shadow(0px 2px 1px #222222);
+    margin: 6px auto;
+    transform: rotate(var(--reverse-rotation));
+    stroke: #ffffff;
+}