Layer stacking

ui/src/styles.css

@@ -0,0 +1,325 @@
+:root {
+  color-scheme: dark;
+  font-family: "Segoe UI", sans-serif;
+  background: #111318;
+  color: #edf1f7;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  background: #111318;
+}
+
+button,
+input,
+select,
+pre {
+  font: inherit;
+}
+
+label,
+h2,
+h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+input[type="range"] {
+  width: 100%;
+}
+
+input[type="number"],
+select,
+button {
+  width: 100%;
+  min-height: 36px;
+  border-radius: 6px;
+  border: 1px solid #38445b;
+  background: #0f131a;
+  color: inherit;
+  padding: 8px 10px;
+}
+
+button {
+  cursor: pointer;
+  background: #22314a;
+}
+
+button:disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+  color: #c9d5ea;
+}
+
+.layout {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+  display: grid;
+  gap: 20px;
+}
+
+.toolbar,
+.status-grid,
+.parameter-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.toolbar {
+  justify-content: end;
+}
+
+.panel {
+  background: #181c24;
+  border: 1px solid #2a3140;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.panel--full {
+  grid-column: 1 / -1;
+}
+
+.panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.panel__header button {
+  width: auto;
+  min-width: 160px;
+}
+
+.status-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.kv {
+  display: grid;
+  grid-template-columns: 160px 1fr;
+  gap: 8px 12px;
+  margin: 0;
+}
+
+.kv dt {
+  color: #94a4c2;
+}
+
+.kv dd {
+  margin: 0;
+}
+
+.layer-stack {
+  display: grid;
+  gap: 12px;
+}
+
+.layer-card {
+  display: grid;
+  gap: 14px;
+  padding: 14px;
+  border: 1px solid #2a3140;
+  border-radius: 8px;
+  background: #131720;
+  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
+}
+
+.layer-card:hover {
+  border-color: #42516b;
+}
+
+.layer-card--expanded {
+  border-color: #5d81c3;
+  background: #151d2a;
+  box-shadow: inset 0 0 0 1px rgba(93, 129, 195, 0.25);
+}
+
+.layer-card--dragging {
+  opacity: 0.55;
+}
+
+.layer-card--drop-target {
+  border-color: #8db0ee;
+  box-shadow: 0 0 0 2px rgba(141, 176, 238, 0.2);
+}
+
+.layer-card__header,
+.layer-card__meta,
+.layer-card__actions,
+.layer-card__subheader {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.layer-card__header,
+.layer-card__subheader {
+  justify-content: space-between;
+}
+
+.layer-card__meta,
+.layer-card__actions {
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.icon-button {
+  width: 36px;
+  min-width: 36px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.layer-card__index {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  background: #22314a;
+  color: #c9d5ea;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.layer-card__title {
+  width: auto;
+  min-width: 0;
+  flex: 1 1 auto;
+  text-align: left;
+  background: #1e2a3f;
+}
+
+.layer-card__title--static {
+  cursor: default;
+}
+
+.layer-card__drag-handle {
+  color: #94a4c2;
+  cursor: grab;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+}
+
+.layer-card__actions {
+  justify-content: flex-end;
+}
+
+.layer-card__actions button {
+  width: auto;
+  min-width: 72px;
+}
+
+.layer-card__body {
+  display: grid;
+  gap: 14px;
+}
+
+.layer-card--add {
+  border-style: dashed;
+}
+
+.layer-card__field {
+  display: grid;
+  gap: 8px;
+}
+
+.layer-card__subheader button {
+  width: auto;
+  min-width: 96px;
+}
+
+.parameter-grid {
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.parameter {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid #2a3140;
+  border-radius: 8px;
+  background: #131720;
+}
+
+.parameter__value {
+  color: #94a4c2;
+  font-size: 12px;
+}
+
+.parameter__value--pending {
+  color: #d3b26a;
+}
+
+.parameter__pair {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 36px;
+}
+
+.toggle--compact {
+  min-height: auto;
+}
+
+.toggle--field {
+  justify-content: flex-start;
+}
+
+.muted {
+  margin: 0;
+  color: #94a4c2;
+}
+
+@media (max-width: 900px) {
+  .toolbar,
+  .status-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .layer-card__header,
+  .layer-card__subheader {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .layer-card__actions,
+  .layer-card__actions button,
+  .layer-card__field select {
+    width: 100%;
+  }
+}