完善 gmoccapy XYZAB 参考功能

web-rtcp-5axis-sim-plan/app/src/styles/gmoccapy.css

@@ -49,6 +49,45 @@ button:active {
   transform: translateY(1px);
 }
 
+button[data-icon-name] {
+  display: grid;
+  grid-template-rows: minmax(18px, 1fr) auto;
+  place-items: center;
+  gap: 2px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+button[data-icon-name] img,
+.gmoccapy-icon-fallback {
+  display: block;
+  width: min(26px, 78%);
+  height: min(26px, 78%);
+  object-fit: contain;
+  pointer-events: none;
+}
+
+button[data-icon-name] span {
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  font-size: inherit;
+  line-height: 1;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gmoccapy-icon-fallback {
+  display: grid;
+  place-items: center;
+  border: 1px solid #938d84;
+  background: #f5f2ea;
+  color: #38332e;
+  font-size: 9px;
+  font-weight: 700;
+}
+
 .profile-select-label {
   display: grid;
   gap: 1px;
@@ -282,6 +321,11 @@ button:active {
   font-weight: 700;
 }
 
+.preview-toolbar button[data-icon-name] img {
+  width: min(24px, 80%);
+  height: min(24px, 80%);
+}
+
 .dro-panel {
   grid-area: dro;
   display: grid;
@@ -601,6 +645,11 @@ button:active {
   line-height: 1.1;
 }
 
+.sidebar-button[data-icon-name] img {
+  width: min(34px, 82%);
+  height: min(34px, 82%);
+}
+
 .sidebar-button.estop {
   color: #c30000;
 }
@@ -809,6 +858,27 @@ button:active {
   border: 1px solid #898989;
 }
 
+.spindle-direction {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 3px;
+  min-width: 0;
+}
+
+.spindle-direction button,
+.cooling button {
+  min-width: 0;
+  min-height: 38px;
+  padding: 2px;
+  font-size: 10px;
+}
+
+.spindle-direction button[data-active="true"],
+.cooling button[data-active="true"] {
+  border-color: #278b37;
+  background: #39ef37;
+}
+
 .spindle-range i {
   display: block;
   height: 100%;
@@ -834,6 +904,11 @@ button:active {
   white-space: normal;
 }
 
+.bottom-controls button[data-icon-name] img {
+  width: min(24px, 82%);
+  height: min(24px, 82%);
+}
+
 .program-file-input {
   display: none;
 }
@@ -1065,4 +1140,18 @@ button:active {
     min-height: 18px;
     padding: 1px 2px;
   }
+
+  button[data-icon-name] {
+    grid-template-rows: 1fr;
+  }
+
+  button[data-icon-name] img,
+  .gmoccapy-icon-fallback {
+    width: 12px;
+    height: 12px;
+  }
+
+  button[data-icon-name] span {
+    display: none;
+  }
 }