@takodotid/circuit 0.19.0 → 0.20.0

package/src/studio/public/style.css

@@ -0,0 +1,693 @@
+/* Circuit Studio's look, the documentation site's own: Inter for text, Newsreader for headings, terracotta for the brand, and VitePress's neutrals. Colors are tokens, redefined for a dark screen; then the page, the tables and the graph. */
+:root {
+    --bg: #f6f6f7;
+    --surface: #ffffff;
+    --line: #e2e2e3;
+    --text: #3c3c43;
+    --muted: #67676c;
+    --edge: #929295;
+    --accent: #a8432b;
+    --accent-strong: #b4492f;
+    --on-accent: #ffffff;
+    --error: #b8272c;
+    --error-strong: #b8272c;
+    --warning: #915930;
+    --warning-strong: #9f6a00;
+    --ok: #18794e;
+    --segment: rgba(180, 73, 47, 0.08);
+    --font: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
+    --mono: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: #161618;
+        --surface: #1b1b1f;
+        --line: #2e2e32;
+        --text: #dfdfd6;
+        --muted: #98989f;
+        --edge: #6a6a71;
+        --accent: #e8866b;
+        --accent-strong: #b4492f;
+        --error: #f66f81;
+        --error-strong: #b62a3c;
+        --warning: #f9b44e;
+        --warning-strong: #a46a0a;
+        --ok: #3dd68c;
+        --segment: rgba(232, 134, 107, 0.12);
+    }
+}
+* {
+    box-sizing: border-box;
+}
+html,
+body {
+    margin: 0;
+    height: 100%;
+    background: var(--bg);
+    color: var(--text);
+    font: 14px/1.45 var(--font);
+}
+body {
+    display: flex;
+    flex-direction: column;
+}
+button {
+    font: inherit;
+    color: inherit;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 4px 10px;
+    cursor: pointer;
+}
+button:hover {
+    border-color: var(--accent);
+}
+button[aria-pressed="true"] {
+    background: var(--accent-strong);
+    border-color: var(--accent-strong);
+    color: var(--on-accent);
+}
+header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 16px;
+    padding: 10px 16px;
+    background: var(--surface);
+    border-bottom: 1px solid var(--line);
+}
+/* The wordmark is Circuit's own; Studio is set apart from it, as the part of Circuit this is. */
+header .brand {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+}
+header .wordmark {
+    font-family: var(--serif);
+    font-size: 22px;
+    font-weight: 400;
+    letter-spacing: -0.01em;
+}
+header .product {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--accent);
+    padding-left: 8px;
+    border-left: 1px solid var(--line);
+}
+code {
+    font-family: var(--mono);
+    font-size: 0.92em;
+}
+nav,
+.actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+.count {
+    opacity: 0.7;
+    margin-left: 4px;
+    font-size: 12px;
+}
+header input[type="search"] {
+    font: inherit;
+    color: inherit;
+    background: var(--bg);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 4px 10px;
+    width: 220px;
+    max-width: 100%;
+}
+header input[type="search"]:focus {
+    outline: 2px solid var(--accent);
+    outline-offset: -1px;
+}
+a {
+    color: var(--accent);
+    cursor: pointer;
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+.muted {
+    color: var(--muted);
+}
+header .summary {
+    color: var(--muted);
+    font-size: 13px;
+}
+header .live {
+    margin-left: auto;
+    color: var(--muted);
+    font-size: 12px;
+}
+header .live::before {
+    content: "";
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--warning);
+    margin-right: 6px;
+}
+header .live.on::before {
+    background: var(--ok);
+}
+.banner {
+    margin: 0;
+    padding: 10px 16px;
+    background: var(--error-strong);
+    color: var(--on-accent);
+    white-space: pre-wrap;
+    font: 12px/1.4 var(--mono);
+    max-height: 30vh;
+    overflow: auto;
+}
+main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+.view {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+.view[hidden] {
+    display: none;
+}
+.toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 16px;
+    padding: 8px 16px;
+    background: var(--surface);
+    border-bottom: 1px solid var(--line);
+}
+.stage {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+}
+.tables {
+    flex: 1;
+    overflow: auto;
+    padding: 16px 24px 48px;
+}
+.tables h2 {
+    font-family: var(--serif);
+    font-size: 30px;
+    font-weight: 400;
+    letter-spacing: -0.01em;
+    line-height: 1.25;
+    margin: 4px 0 8px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+.tables h3 {
+    font-size: 14px;
+    margin: 24px 0 8px;
+}
+.tables h4 {
+    font-size: 13px;
+    margin: 16px 0 6px;
+    font-family: var(--mono);
+    font-weight: 600;
+}
+.tables p {
+    margin: 4px 0 8px;
+}
+.tables .crumbs {
+    margin: 0;
+    font-size: 13px;
+}
+.tables .tabs {
+    margin: 14px 0 6px;
+}
+.tables .findings {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.tables .findings li {
+    padding: 3px 0;
+}
+table.data {
+    border-collapse: separate;
+    border-spacing: 0;
+    width: 100%;
+    font-size: 13px;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: 8px;
+}
+table.data th,
+table.data td {
+    text-align: left;
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--line);
+    vertical-align: top;
+    overflow-wrap: break-word;
+}
+table.data tr:last-child > td,
+table.data tr:last-child > th {
+    border-bottom: 0;
+}
+table.data thead th {
+    color: var(--muted);
+    font-weight: 600;
+    font-size: 12px;
+    white-space: nowrap;
+}
+table.data th[title] {
+    cursor: help;
+    text-decoration: underline dotted;
+    text-underline-offset: 3px;
+}
+table.data tr.muted td {
+    color: var(--muted);
+}
+table.settings {
+    width: auto;
+    min-width: min(560px, 100%);
+}
+table.settings > tbody > tr > th {
+    width: 1%;
+    white-space: nowrap;
+    color: var(--muted);
+    font-weight: 500;
+}
+table.data table.data {
+    margin: 0;
+}
+pre.code {
+    margin: 0;
+    font: 12px/1.5 var(--mono);
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: 8px;
+    padding: 12px;
+    overflow: auto;
+    white-space: pre;
+}
+svg.canvas {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+}
+svg.canvas.panning {
+    cursor: grabbing;
+}
+aside {
+    width: 340px;
+    overflow: auto;
+    padding: 14px 16px;
+    background: var(--surface);
+    border-left: 1px solid var(--line);
+}
+aside h2 {
+    font-family: var(--serif);
+    font-size: 21px;
+    font-weight: 400;
+    margin: 0 0 4px;
+    overflow-wrap: anywhere;
+}
+aside h3 {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--muted);
+    margin: 18px 0 6px;
+}
+aside ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+aside li {
+    padding: 3px 0;
+    overflow-wrap: anywhere;
+}
+aside .kind {
+    color: var(--muted);
+    font-size: 12px;
+}
+aside pre {
+    margin: 0;
+    font: 12px/1.45 var(--mono);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    background: var(--bg);
+    padding: 8px;
+    border-radius: 6px;
+}
+.badge {
+    display: inline-block;
+    font-size: 11px;
+    font-weight: 600;
+    padding: 0 6px;
+    border-radius: 4px;
+    margin-right: 6px;
+    color: var(--on-accent);
+    font-family: var(--font);
+}
+.badge.error {
+    background: var(--error-strong);
+}
+.badge.warning {
+    background: var(--warning-strong);
+}
+.chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+.chips button {
+    padding: 2px 8px;
+    font-size: 12px;
+}
+.legend li {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.legend svg {
+    flex: none;
+}
+.edge path {
+    fill: none;
+    stroke: var(--edge);
+    stroke-width: 1.6;
+}
+.edge.one-sided path:not(.hit) {
+    stroke: var(--warning);
+    stroke-dasharray: 6 4;
+}
+.edge text {
+    font-size: 11px;
+    fill: var(--muted);
+    paint-order: stroke;
+    stroke: var(--bg);
+    stroke-width: 4px;
+    stroke-linejoin: round;
+}
+.edge .hit {
+    stroke: transparent;
+    stroke-width: 12;
+    cursor: pointer;
+}
+.edge.selected path:not(.hit),
+.edge.lit path:not(.hit) {
+    stroke: var(--accent);
+    stroke-width: 2.6;
+}
+.edge.selected text,
+.edge.lit text {
+    fill: var(--text);
+}
+.node {
+    cursor: pointer;
+}
+.node rect {
+    fill: var(--surface);
+    stroke: var(--line);
+    stroke-width: 1.5;
+}
+.node.segment rect {
+    fill: var(--segment);
+}
+.node.outside rect {
+    stroke-dasharray: 5 3;
+}
+.node.error rect {
+    stroke: var(--error);
+    stroke-width: 3;
+}
+.node.warning rect {
+    stroke: var(--warning);
+    stroke-width: 3;
+}
+.node.selected rect {
+    stroke: var(--accent);
+    stroke-width: 3;
+}
+.node text {
+    fill: var(--text);
+    font-size: 12px;
+    text-anchor: middle;
+    dominant-baseline: central;
+    pointer-events: none;
+}
+.node text.name {
+    font-weight: 600;
+    font-size: 13px;
+}
+.node text.sub {
+    fill: var(--muted);
+    font-size: 11px;
+}
+.node.segment text,
+.node.outside text {
+    font-family: var(--mono);
+    font-size: 11px;
+}
+.dim {
+    opacity: 0.18;
+}
+svg.far .edge text {
+    display: none;
+}
+@media (max-width: 760px) {
+    .stage {
+        flex-direction: column;
+    }
+    aside {
+        width: auto;
+        height: 40%;
+        border-left: 0;
+        border-top: 1px solid var(--line);
+    }
+    .tables {
+        padding: 12px 16px 40px;
+    }
+    header input[type="search"] {
+        width: 100%;
+    }
+}
+
+/* A table that can be saved, with its action above it. */
+.table-actions {
+    margin: 0 0 6px;
+    font-size: 13px;
+    text-align: right;
+}
+
+/* The row a port's square points to. */
+tr.flash td {
+    background: var(--segment);
+    transition: background 0.4s;
+}
+
+/* A device's front panel: a square per port, by speed. */
+.faceplate {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px 24px;
+    padding: 12px;
+    margin: 8px 0;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: 8px;
+}
+.faceplate .speed {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.faceplate .speed-name {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--muted);
+    min-width: 36px;
+}
+.faceplate .ports {
+    display: grid;
+    grid-template-rows: repeat(2, auto);
+    grid-auto-flow: column;
+    gap: 4px;
+}
+.port {
+    position: relative;
+    display: inline-block;
+    width: 28px;
+    height: 24px;
+    padding: 0;
+    font: 500 11px var(--font);
+    border-radius: 4px;
+    border: 1px solid var(--line);
+    background: var(--surface);
+    color: var(--text);
+}
+.port.shut {
+    border-style: dashed;
+    color: var(--muted);
+    background: var(--bg);
+}
+.port.access {
+    background: var(--segment);
+    border-color: var(--accent);
+}
+.port.trunk {
+    background: var(--accent-strong);
+    border-color: var(--accent-strong);
+    color: var(--on-accent);
+}
+.port.routed {
+    border: 2px solid var(--text);
+}
+.port.lag {
+    border: 2px solid var(--accent);
+}
+.port.linked::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--ok);
+}
+.faceplate-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 16px;
+    list-style: none;
+    padding: 0;
+    margin: 0 0 12px;
+    font-size: 12px;
+    color: var(--muted);
+}
+.faceplate-legend li {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.faceplate-legend .port {
+    width: 18px;
+    height: 14px;
+}
+
+/* A line diff: removed lines, added lines, and runs of the same folded away. */
+pre.diff .removed,
+p .removed {
+    color: var(--error);
+}
+pre.diff .added,
+p .added {
+    color: var(--ok);
+}
+pre.diff .fold {
+    display: block;
+    color: var(--muted);
+    font-style: italic;
+    margin: 4px 0;
+}
+
+/* The tools' forms: a field per line on a narrow screen, several side by side on a wide one. */
+.tool-form {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 12px 16px;
+    margin: 12px 0 16px;
+    padding: 14px;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: 8px;
+}
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 13px;
+    color: var(--muted);
+}
+.field input[type="text"],
+.field select {
+    font: inherit;
+    color: var(--text);
+    background: var(--bg);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 5px 8px;
+    min-width: 150px;
+}
+.field small {
+    font-size: 11px;
+}
+.flags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 12px;
+    color: var(--text);
+}
+.flag {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+button.primary {
+    background: var(--accent-strong);
+    border-color: var(--accent-strong);
+    color: var(--on-accent);
+}
+.verdict {
+    font-weight: 600;
+}
+.verdict.accept {
+    color: var(--ok);
+}
+.verdict.drop,
+.verdict.reject {
+    color: var(--error);
+}
+.verdict.unknown {
+    color: var(--warning);
+}
+
+/* A comparison on the graph: what is new, and what is gone. */
+.edge.added path:not(.hit) {
+    stroke: var(--ok);
+    stroke-width: 2.6;
+}
+.edge.gone path:not(.hit) {
+    stroke: var(--error);
+    stroke-dasharray: 6 4;
+}
+.added {
+    color: var(--ok);
+}
+.removed {
+    color: var(--error);
+}
+details.change {
+    margin: 6px 0;
+}
+details.change summary {
+    cursor: pointer;
+    font-weight: 600;
+    padding: 4px 0;
+}