working on cutscenes

cutsceneEditor/src/components/Controls/Controls.module.css

@@ -0,0 +1,94 @@
+.controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: #1e1e1e;
+  border-top: 1px solid #333;
+  border-bottom: 1px solid #333;
+  flex-shrink: 0;
+}
+
+.btn {
+  background: #2d2d2d;
+  border: 1px solid #404040;
+  color: #ccc;
+  border-radius: 4px;
+  padding: 4px 10px;
+  font-size: 13px;
+  transition: background 0.1s;
+  min-width: 32px;
+  flex-shrink: 0;
+}
+
+.btn:hover:not(:disabled) { background: #3a3a3a; color: #fff; }
+.btn:disabled { opacity: 0.35; cursor: default; }
+
+.active {
+  color: #5ba3e0;
+  border-color: #4a7aaa;
+}
+
+/* ── Scrubber ───────────────────────────────────────────────── */
+.scrubber {
+  flex: 1;
+  min-width: 0;
+  height: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+  border: none;
+  padding: 0;
+  /* filled portion via CSS variable set inline */
+  background: linear-gradient(
+    to right,
+    #5b9bd5 0%,
+    #5b9bd5 var(--progress, 0%),
+    #3a3a3a var(--progress, 0%),
+    #3a3a3a 100%
+  );
+}
+
+.scrubber:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.scrubber::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #5b9bd5;
+  cursor: pointer;
+  border: 2px solid #1e1e1e;
+  transition: transform 0.1s;
+}
+.scrubber:not(:disabled)::-webkit-slider-thumb:hover {
+  transform: scale(1.3);
+}
+
+.scrubber::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #5b9bd5;
+  cursor: pointer;
+  border: 2px solid #1e1e1e;
+}
+
+.scrubber::-moz-range-track {
+  height: 4px;
+  border-radius: 2px;
+  background: #3a3a3a;
+}
+
+.time {
+  flex-shrink: 0;
+  font-size: 11px;
+  color: #888;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}