@atolis-hq/corum 0.1.0

package/web/style.css

@@ -0,0 +1,827 @@
+:root,
+[data-theme="light"] {
+  --paper: #ffffff;
+  --paper-2: #f7f7f8;
+  --paper-3: #eeeef1;
+  --ink: #141519;
+  --ink-2: #3a3c43;
+  --ink-3: #6c6f78;
+  --ink-4: #a8acb5;
+  --rule: #e4e6ea;
+  --rule-2: #cdd0d6;
+  --accent: #e8614a;
+  --accent-2: #fde6e0;
+  --accent-ink: #b3422e;
+  --ok: #3b9a66;
+  --warn: var(--accent);
+  --radius: 6px;
+  color-scheme: light;
+}
+
+body[data-theme="dark"] {
+  --paper: #15171c;
+  --paper-2: #1c1f25;
+  --paper-3: #262a33;
+  --ink: #f2f3f5;
+  --ink-2: #d4d6dc;
+  --ink-3: #9498a2;
+  --ink-4: #5f636d;
+  --rule: #2c2f38;
+  --rule-2: #3d414c;
+  --accent: #f27561;
+  --accent-2: #3a221c;
+  --accent-ink: #ffa796;
+  --ok: #5bbd85;
+  --warn: var(--accent);
+  color-scheme: dark;
+}
+
+* { box-sizing: border-box; }
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  background: var(--paper);
+  color: var(--ink);
+}
+
+body {
+  font-family: "Inter", system-ui, sans-serif;
+  font-size: 13px;
+  line-height: 1.45;
+  -webkit-font-smoothing: antialiased;
+}
+
+button {
+  font: inherit;
+}
+
+#root {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
+.label-xs {
+  color: var(--ink-3);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.label-sm {
+  color: var(--ink-3);
+  font-size: 11px;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 48px;
+  padding: 10px 16px;
+  background: var(--accent);
+  color: var(--paper);
+  flex-shrink: 0;
+}
+
+.topbar .brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #fff;
+  font-family: 'Space Grotesk', system-ui, sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.main {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.nav-rail {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 72px;
+  padding: 10px 8px;
+  background: var(--paper-2);
+  border-right: 1px solid var(--rule-2);
+  flex-shrink: 0;
+}
+
+.nav-rail-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  min-height: 54px;
+  padding: 6px 4px;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  color: var(--ink-3);
+  cursor: pointer;
+}
+
+.nav-rail-item span {
+  max-width: 58px;
+  overflow: hidden;
+  font-size: 10px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nav-rail-item:hover {
+  background: var(--paper);
+  color: var(--ink);
+}
+
+.nav-rail-item.active {
+  background: var(--accent);
+  color: var(--paper);
+}
+
+.nav-tree {
+  width: 280px;
+  min-width: 280px;
+  padding: 12px 10px 24px;
+  overflow: auto;
+  background: var(--paper);
+  border-right: 1px solid var(--rule);
+}
+
+.nav-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 6px;
+  color: var(--ink-4);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.nav-template-head {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 7px 6px 4px 16px;
+  color: var(--ink-3);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.nav-subtype-head {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 6px 2px 22px;
+  color: var(--ink-3);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.nav-node-item {
+  margin: 1px 0;
+  padding: 6px 8px 6px 30px;
+  overflow: hidden;
+  border-radius: 4px;
+  color: var(--ink-2);
+  cursor: pointer;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nav-node-item:hover {
+  background: var(--paper-2);
+}
+
+.nav-node-item.active {
+  background: var(--nav-node-active-bg, var(--ink));
+  color: var(--paper);
+}
+
+.nav-child-group {
+  margin: 1px 0 4px;
+}
+
+.nav-child-head {
+  padding: 4px 8px 2px 42px;
+  color: var(--ink-4);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.nav-node-child {
+  padding-left: 50px;
+}
+
+.content {
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+  padding: 24px 30px 60px;
+}
+
+.content h1 {
+  margin: 0 0 12px;
+  font-size: 32px;
+  line-height: 1.1;
+}
+
+.card {
+  margin-bottom: 14px;
+  overflow: hidden;
+  border: 1px solid var(--rule-2);
+  border-radius: 8px;
+  background: var(--paper);
+}
+
+.card-head {
+  padding: 10px 14px;
+  background: var(--paper-2);
+  border-bottom: 1px solid var(--rule);
+  color: var(--ink-3);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.card-body {
+  background: var(--paper);
+}
+
+.tag {
+  display: inline-block;
+  padding: 1px 7px;
+  border: 1px solid var(--rule-2);
+  border-radius: 3px;
+  background: var(--paper);
+  color: var(--ink-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.tag.state-draft { background: var(--paper-3); color: var(--ink-2); }
+.tag.state-proposed { background: var(--accent-2); border-color: var(--accent); color: var(--accent-ink); }
+.tag.state-agreed { background: color-mix(in oklch, var(--ok) 18%, var(--paper)); border-color: var(--ok); color: var(--ink); }
+.tag.state-implemented { background: var(--ink); border-color: var(--ink); color: var(--paper); }
+.tag.state-future { background: transparent; border-style: dashed; color: var(--ink-3); }
+.tag.state-removed { text-decoration: line-through; color: var(--ink-3); }
+.tag.stability-stable { background: transparent; }
+.tag.stability-unstable { border-style: dashed; color: var(--ink-3); }
+.tag.stability-deprecated { color: var(--ink-3); text-decoration: line-through; }
+
+.chip,
+.template-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 20px;
+  padding: 2px 8px;
+  border: 1px solid var(--rule-2);
+  border-radius: 999px;
+  background: var(--paper);
+  color: var(--ink-2);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.template-badge {
+  border-color: transparent;
+  color: #fff;
+}
+
+.prop-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.prop-table td {
+  vertical-align: top;
+  padding: 8px 14px;
+  border-bottom: 1px dashed var(--rule);
+  font-size: 12px;
+}
+
+.prop-table tr:last-child td {
+  border-bottom: none;
+}
+
+.prop-table td:first-child {
+  width: 220px;
+  color: var(--ink-3);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.prop-table pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.prop-row.nested {
+  background: color-mix(in oklch, var(--accent) 2%, var(--paper));
+}
+
+.prop-key-cell {
+  padding-left: 14px;
+}
+
+.prop-key-label {
+  display: block;
+  padding-left: calc(var(--prop-depth, 0) * 24px);
+}
+
+.node-ref-link {
+  cursor: pointer;
+  color: var(--accent);
+  text-decoration: underline;
+  font-size: inherit;
+}
+
+.prop-empty { color: var(--ink-4); }
+
+.schema-card .card-body {
+  padding: 0;
+}
+
+.schema-section {
+  border-bottom: 1px solid var(--rule-2);
+}
+
+.schema-section:last-child {
+  border-bottom: none;
+}
+
+.enum-card .card-body {
+  padding: 0;
+}
+
+.enum-section {
+  border-bottom: 1px solid var(--rule-2);
+}
+
+.enum-section:last-child {
+  border-bottom: none;
+}
+
+.enum-row {
+  display: grid;
+  grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.6fr) 100px;
+  gap: 12px;
+  align-items: center;
+  padding: 8px 14px;
+  border-bottom: 1px dashed var(--rule);
+  font-size: 12px;
+}
+
+.enum-row:last-child {
+  border-bottom: none;
+}
+
+.enum-row-head {
+  background: var(--paper-2);
+  font-weight: 600;
+}
+
+.enum-row .name {
+  color: var(--ink);
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 11.5px;
+  font-weight: 600;
+}
+
+.enum-row .description {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--ink-2);
+}
+
+.schema-section-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 14px;
+  background: var(--paper);
+}
+
+.schema-title {
+  margin-bottom: 2px;
+  color: var(--ink);
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.field-row {
+  display: grid;
+  grid-template-columns: 18px minmax(180px, 1.3fr) minmax(90px, 0.8fr) 96px 80px 100px minmax(160px, 1fr);
+  gap: 10px;
+  align-items: center;
+  padding: 8px 14px;
+  border-bottom: 1px dashed var(--rule);
+  font-size: 12px;
+}
+
+.field-row:last-child {
+  border-bottom: none;
+}
+
+.field-row-head {
+  background: var(--paper-2);
+  font-weight: 600;
+}
+
+.field-row.nested {
+  background: color-mix(in oklch, var(--accent) 3%, var(--paper));
+}
+
+.field-row .gutter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ink-4);
+}
+
+.field-row .name {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.field-row.nested .name {
+  padding-left: calc(var(--field-depth, 1) * 24px);
+}
+
+.field-row .type {
+  overflow-wrap: anywhere;
+  color: var(--ink-3);
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 11.5px;
+}
+
+.field-row .cardinality,
+.field-row .req {
+  color: var(--ink-3);
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 10.5px;
+}
+
+.field-row .state {
+  min-width: 0;
+}
+
+.field-row .lineage {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--ink-3);
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 11px;
+}
+
+.meta-strip {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(110px, 1fr));
+  margin-bottom: 16px;
+  border: 1px solid var(--rule-2);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.meta-cell {
+  min-width: 0;
+  padding: 10px 12px;
+  border-right: 1px solid var(--rule);
+  background: var(--paper-2);
+}
+
+.meta-cell:last-child {
+  border-right: none;
+}
+
+.empty-state {
+  padding: 14px;
+  border: 1px dashed var(--rule-2);
+  border-radius: 8px;
+  color: var(--ink-3);
+}
+
+@media (max-width: 780px) {
+  .main {
+    flex-direction: column;
+  }
+
+  .nav-rail {
+    flex-direction: row;
+    width: 100%;
+    min-height: 64px;
+    border-right: none;
+    border-bottom: 1px solid var(--rule-2);
+  }
+
+  .nav-rail-item {
+    flex: 1;
+  }
+
+  .nav-tree {
+    width: 100%;
+    max-height: 260px;
+    border-right: none;
+    border-bottom: 1px solid var(--rule);
+  }
+
+  .content {
+    padding: 20px 16px 40px;
+  }
+
+  .meta-strip {
+    grid-template-columns: 1fr;
+  }
+
+  .meta-cell {
+    border-right: none;
+    border-bottom: 1px solid var(--rule);
+  }
+
+  .meta-cell:last-child {
+    border-bottom: none;
+  }
+}
+
+.branch-bar {
+  height: 38px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 14px;
+  background: var(--paper-2);
+  border-bottom: 1px solid var(--rule);
+  flex-shrink: 0;
+  font-size: 11.5px;
+  position: relative;
+  overflow: visible;
+  z-index: 20;
+}
+
+.branch-bar-spacer {
+  flex: 1;
+}
+
+.branch-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: var(--font-mono, 'JetBrains Mono', monospace);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.branch-chip.viewing {
+  background: var(--ink);
+  color: var(--paper);
+  font-weight: 600;
+}
+
+.branch-failed-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 7px;
+  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
+  border-radius: 999px;
+  background: color-mix(in oklch, var(--accent) 12%, var(--paper));
+  color: var(--accent-ink);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.branch-chip.overlay {
+  background: color-mix(in oklch, var(--accent) 15%, var(--paper));
+  color: var(--accent);
+  border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
+}
+
+.branch-chip-select {
+  border: 1px dashed color-mix(in oklch, var(--accent) 45%, transparent);
+}
+
+.branch-chip.overlay:hover {
+  background: color-mix(in oklch, var(--accent) 22%, var(--paper));
+}
+
+.branch-chip.reload {
+  background: var(--paper);
+  color: var(--ink-2);
+  border: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
+  cursor: pointer;
+}
+
+.branch-chip.reload:hover {
+  background: color-mix(in oklch, var(--ink) 10%, var(--paper));
+}
+
+.branch-chip.more {
+  background: var(--paper-3);
+  color: var(--ink-3);
+  border: 1px solid var(--rule);
+}
+
+.branch-chip-remove {
+  opacity: 0.55;
+  font-size: 10px;
+  margin-left: 2px;
+  line-height: 1;
+}
+
+.branch-chip-remove:hover {
+  opacity: 1;
+}
+
+.branch-seg {
+  display: flex;
+  gap: 1px;
+  background: var(--rule);
+  border-radius: 5px;
+  overflow: hidden;
+  font-size: 10.5px;
+}
+
+.branch-seg-item {
+  padding: 3px 9px;
+  background: var(--paper);
+  color: var(--ink-2);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.branch-seg-item.active {
+  background: var(--accent);
+  color: #fff;
+  font-weight: 600;
+}
+
+.branch-label {
+  color: var(--ink-3);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+
+.branch-picker {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 100;
+  background: var(--paper);
+  border: 1px solid var(--rule-2);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  min-width: 320px;
+  overflow: hidden;
+}
+
+.branch-picker-item {
+  padding: 7px 12px;
+  cursor: pointer;
+  font-size: 11.5px;
+  font-family: var(--font-mono, 'JetBrains Mono', monospace);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.branch-picker-main {
+  overflow-wrap: anywhere;
+}
+
+.branch-picker-item:hover {
+  background: var(--paper-2);
+}
+
+.branch-picker-item.active {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.branch-picker-item-selectable {
+  justify-content: space-between;
+}
+
+.branch-picker-check {
+  flex-shrink: 0;
+  accent-color: var(--accent);
+}
+
+.branch-picker-item-disabled {
+  display: block;
+  cursor: not-allowed;
+  background: color-mix(in oklch, var(--accent) 5%, var(--paper));
+}
+
+.branch-picker-item-disabled:hover {
+  background: color-mix(in oklch, var(--accent) 5%, var(--paper));
+}
+
+.branch-picker-error {
+  margin-top: 2px;
+  color: var(--ink-3);
+  font-family: inherit;
+  font-size: 10px;
+  line-height: 1.35;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.signal-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: 4px;
+}
+
+.signal-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.signal-dot-0 { background: var(--accent); }
+.signal-dot-1 { background: #5c7aa8; }
+
+.field-row.overlay-ghost {
+  opacity: 0.7;
+  background: color-mix(in oklch, var(--ink) 6%, var(--paper));
+}
+
+.field-row.overlay-ghost .name {
+  font-style: italic;
+}
+
+.overlay-stripe-0 {
+  border-left: 3px solid var(--accent);
+  background: color-mix(in oklch, var(--ink) 8%, var(--paper));
+}
+
+.overlay-stripe-1 {
+  border-left: 3px solid #5c7aa8;
+  background: color-mix(in oklch, var(--ink) 8%, var(--paper));
+}
+
+.overlay-conflict {
+  border-left: 3px solid #c44;
+  background: color-mix(in oklch, #c44 5%, var(--paper));
+}
+
+.overlay-legend {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 12px;
+  background: var(--paper-2);
+  border-bottom: 1px dashed var(--rule);
+  flex-wrap: wrap;
+}
+
+.overlay-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 10.5px;
+  color: var(--ink-2);
+}
+
+.overlay-legend-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}