working on cutscenes

cutsceneEditor/src/components/RightPanel/RightPanel.module.css

@@ -0,0 +1,208 @@
+.panel {
+  width: 260px;
+  min-width: 240px;
+  background: #252525;
+  border-left: 1px solid #333;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.tabs {
+  display: flex;
+  border-bottom: 1px solid #333;
+  flex-shrink: 0;
+}
+
+.tab {
+  flex: 1;
+  padding: 8px 6px;
+  background: none;
+  border: none;
+  color: #777;
+  font-size: 11px;
+  border-bottom: 2px solid transparent;
+  transition: color 0.1s;
+}
+.tab:hover { color: #bbb; }
+.tabActive {
+  color: #5b9bd5;
+  border-bottom-color: #5b9bd5;
+}
+
+.scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding-bottom: 20px;
+}
+
+/* ── Sections ──────────────────────────────────────────────────── */
+.section {
+  padding: 10px;
+  border-bottom: 1px solid #2e2e2e;
+}
+
+.sectionTitle {
+  font-size: 11px;
+  font-weight: 600;
+  color: #888;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 8px;
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.addBtn {
+  background: #2a4a6e;
+  border: 1px solid #3a6090;
+  color: #a8d0f0;
+  border-radius: 3px;
+  padding: 2px 8px;
+  font-size: 11px;
+}
+.addBtn:hover { background: #2e5480; }
+
+/* ── Fields ────────────────────────────────────────────────────── */
+.field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 5px;
+  gap: 6px;
+}
+
+.field label {
+  flex-shrink: 0;
+  width: 100px;
+  text-align: right;
+}
+
+.field input[type="text"],
+.field input[type="number"],
+.field select,
+.field textarea {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+}
+
+.field textarea {
+  resize: vertical;
+  min-height: 40px;
+}
+
+.field input[type="checkbox"] {
+  width: auto;
+  margin: 0;
+}
+
+.row2 {
+  display: flex;
+  gap: 6px;
+}
+
+.row2 .field {
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.row2 .field label {
+  width: auto;
+  text-align: left;
+  margin-bottom: 2px;
+}
+
+/* ── Pose groups ───────────────────────────────────────────────── */
+.poseGroup {
+  margin-top: 8px;
+  background: #1e1e1e;
+  border-radius: 4px;
+  padding: 6px 8px;
+}
+
+.poseTitle {
+  font-size: 10px;
+  font-weight: 600;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 5px;
+}
+
+.poseRow {
+  display: flex;
+  gap: 6px;
+}
+
+.poseRow .field {
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: 0;
+}
+
+.poseRow .field label {
+  width: auto;
+  text-align: left;
+  margin-bottom: 2px;
+}
+
+/* ── Subtitle line cards ───────────────────────────────────────── */
+.lineCard {
+  background: #1e1e1e;
+  border: 1px solid #2e2e2e;
+  border-radius: 4px;
+  padding: 8px;
+  margin-bottom: 6px;
+}
+
+.lineHeader {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+
+.lineIndex {
+  font-size: 10px;
+  color: #666;
+  flex: 1;
+}
+
+.iconBtn {
+  background: none;
+  border: 1px solid #3a3a3a;
+  color: #888;
+  border-radius: 3px;
+  padding: 1px 5px;
+  font-size: 11px;
+}
+.iconBtn:hover:not(:disabled) { background: #333; color: #ccc; }
+.iconBtn:disabled { opacity: 0.3; cursor: default; }
+
+.iconBtnDanger {
+  composes: iconBtn;
+  color: #a05050;
+  border-color: #5a2a2a;
+}
+.iconBtnDanger:hover { background: #3a2020; color: #e06c6c; }
+
+.emptyLines {
+  color: #555;
+  font-size: 11px;
+  padding: 4px 0;
+}
+
+.empty {
+  padding: 20px;
+  color: #555;
+  font-size: 11px;
+  text-align: center;
+}