virtual sample : fix dynamic and static views

src/components/project/virtual-sample/DynamicView.vue

@@ -119,3 +119,90 @@ function rotateX(direction) {
   }
 }
 </script>
+<style scoped>
+.track-container {
+  --w: 100%;
+  --h: calc(100% - 74px);
+  --x-steps: 14;
+  --y-steps: 5;
+  width: var(--w);
+  height: var(--h);
+  position: relative;
+  margin: var(--space-16) auto;
+  border-radius: var(--rounded-lg);
+}
+
+.track-container figure {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.track-container img {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: inherit;
+  height: inherit;
+  object-fit: contain;
+}
+.track-container fieldset {
+  --p: 0rem;
+  margin: 0;
+  padding: 0;
+  width: var(--w);
+  height: var(--h);
+  border: none;
+}
+.track-container button,
+.track-container input {
+  position: absolute;
+}
+
+/* Buttons */
+.track-container .btn--icon {
+  --icon-size: var(--space-24);
+  --icon-color: var(--color-grey-700);
+  width: var(--space-48);
+  height: var(--space-48);
+  max-height: var(--space-48);
+  background: transparent;
+  padding: var(--space-12);
+}
+.track-container .btn--icon:hover {
+  background: var(--color-black-10);
+}
+#y-up {
+  top: var(--p);
+}
+#y-up::before {
+  transform: rotate(90deg);
+}
+#y-down {
+  bottom: var(--p);
+}
+#y-down::before {
+  transform: rotate(-90deg);
+}
+#y-up,
+#y-down {
+  text-align: center;
+  left: 50%;
+  transform: translateX(-50%);
+}
+#x-down {
+  left: var(--p);
+}
+#x-up {
+  right: var(--p);
+}
+#x-up::before {
+  transform: rotate(180deg);
+}
+#x-down,
+#x-up {
+  top: 50%;
+  transform: translateY(-50%);
+}
+</style>