From 0157e2f09a406f3427d218f462677c3e04adccea Mon Sep 17 00:00:00 2001 From: Timon Date: Mon, 26 Oct 2026 18:41:53 +0000 Subject: [PATCH 1/3] Draw Inspector header and layer button outlines as borders --- .../src/components/widgets/NodeSection.svelte | 38 +++++++++++++------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/widgets/NodeSection.svelte b/frontend/src/components/widgets/NodeSection.svelte index dcfb746a198..214fce8f516 100644 --- a/frontend/src/components/widgets/NodeSection.svelte +++ b/frontend/src/components/widgets/NodeSection.svelte @@ -285,10 +285,19 @@ // As wide as its contents, unlike the Inspector's buttons that share their row, and flush within an outline like the sections' .text-button { + position: relative; flex-basis: auto; padding-left: calc(var(--wire-center) - 16px / 2); --button-background-color: none; - box-shadow: inset 0 0 0 1px var(--section-outline); + + &::after { + content: ""; + position: absolute; + inset: 0; + border: 1px solid var(--section-outline); + border-radius: 2px; + pointer-events: none; + } &:hover:not(.disabled) { --button-background-color: var(--color-5-dullgray); @@ -359,24 +368,31 @@ } .header { + position: relative; text-align: left; align-items: center; display: flex; flex: 0 0 24px; padding: 0; border: 0; - border-radius: 4px; background: none; + // The section's outline, continuing up around the header without changing its size - box-shadow: inset 0 0 0 1px var(--section-outline); + &::after { + content: ""; + position: absolute; + inset: 0; + border: 1px solid var(--section-outline); + border-radius: 4px; + pointer-events: none; + } &.expanded { - border-radius: 4px 4px 0 0; // Open at the bottom, where the body's sides carry on - box-shadow: - inset 1px 0 0 var(--section-outline), - inset -1px 0 0 var(--section-outline), - inset 0 1px 0 var(--section-outline); + &::after { + border-bottom: none; + border-radius: 4px 4px 0 0; + } .expand-arrow::after { transform: rotate(90deg); @@ -459,18 +475,16 @@ > .body { padding: 0 7px; - padding-top: 1px; - margin-top: -1px; background: var(--color-3-darkgray); border: 1px solid var(--section-outline); // No line between it and the header, which shares its outline - border-top-color: transparent; + border-top: none; border-radius: 0 0 4px 4px; overflow: hidden; > .widget-span.row { &:first-child { - margin-top: calc(4px - 1px); + margin-top: 4px; } &:last-child { From 25dad0c4dca9c80cf15b53dc85e0d2dfa1bfce0e Mon Sep 17 00:00:00 2001 From: Timon Date: Mon, 26 Oct 2026 23:48:06 +0000 Subject: [PATCH 2/3] Draw single Inspector wires as one line --- .../src/components/widgets/NodeSection.svelte | 46 ++++++++++++------- 1 file changed, 29 insertions(+), 17 deletions(-) diff --git a/frontend/src/components/widgets/NodeSection.svelte b/frontend/src/components/widgets/NodeSection.svelte index 214fce8f516..f27b47f3e54 100644 --- a/frontend/src/components/widgets/NodeSection.svelte +++ b/frontend/src/components/widgets/NodeSection.svelte @@ -183,6 +183,7 @@ &.chain-wire { --chain-wire-corner-radius: 4px; --chain-wire-width: 2px; + --chain-wire-line: 2px; --chain-section-indent: 8px; // Within the body's border, the wire's centerline rises in line with the indented chain sections' icons --chain-wire-x: calc(var(--chain-section-indent) + var(--wire-center) - 1px); @@ -190,6 +191,7 @@ // Like in the graph, a list's wire is a 1px line, 2px gap, and 1px line &.chain-wire-list { --chain-wire-width: 4px; + --chain-wire-line: 1px; } // The body continues down into the frame around the chain's sections, the first right beneath its rows @@ -225,16 +227,16 @@ } } - // Outer and inner 1px lines, which touch as one solid line unless the wire is a list, rising from the body's bottom and turning at the connector's middle to end at its left - > .body::before, - > .body::after { + // One line, or a list's outer and inner lines, rising from the body's bottom and turning at the connector's middle to end at its left + > .body::after, + &.chain-wire-list > .body::before { content: ""; position: absolute; box-sizing: border-box; right: anchor(--chain-input left); bottom: 0; - border-left: 1px solid var(--chain-wire-color); - border-top: 1px solid var(--chain-wire-color); + border-left: var(--chain-wire-line) solid var(--chain-wire-color); + border-top: var(--chain-wire-line) solid var(--chain-wire-color); pointer-events: none; } @@ -245,7 +247,7 @@ } // Inset to stay concentric with the outer line around the corner - > .body::before { + &.chain-wire-list > .body::before { left: calc(var(--chain-wire-x) + var(--chain-wire-width) / 2 - 1px); top: calc(anchor(--chain-input center) + var(--chain-wire-width) / 2 - 1px); border-top-left-radius: max(0px, var(--chain-wire-corner-radius) - var(--chain-wire-width) + 1px); @@ -255,13 +257,19 @@ // A section in such a chain, with a wire rising across the gap to the section above, in line with the containing section's wire &.output-wire { --output-wire-width: 2px; + --output-wire-line: 2px; position: relative; + // Two 1px lines, like the layer section's wire &.output-wire-list { --output-wire-width: 4px; + --output-wire-line: 1px; + + &::before { + border-right: var(--output-wire-line) solid var(--output-wire-color); + } } - // Two 1px lines, like the layer section's wire &::before { content: ""; position: absolute; @@ -270,8 +278,7 @@ top: calc(-1 * var(--section-gap)); width: var(--output-wire-width); height: var(--section-gap); - border-left: 1px solid var(--output-wire-color); - border-right: 1px solid var(--output-wire-color); + border-left: var(--output-wire-line) solid var(--output-wire-color); pointer-events: none; } } @@ -309,24 +316,26 @@ // Layers taking the wire rising from the section below into their content, indented so it turns in from the left at the middle of their buttons &.content-wire { --content-wire-width: 2px; + --content-wire-line: 2px; --content-wire-indent: 20px; position: relative; padding-left: var(--content-wire-indent); &.content-wire-list { --content-wire-width: 4px; + --content-wire-line: 1px; } - // Outer and inner 1px lines, rising from the bottom and turning toward the buttons, like the wire into a shown chain's input - &::before, - &::after { + // One line, or a list's outer and inner lines, rising from the bottom and turning toward the buttons, like the wire into a shown chain's input + &::after, + &.content-wire-list::before { content: ""; position: absolute; box-sizing: border-box; right: calc(100% - var(--content-wire-indent)); bottom: 0; - border-left: 1px solid var(--content-wire-color); - border-top: 1px solid var(--content-wire-color); + border-left: var(--content-wire-line) solid var(--content-wire-color); + border-top: var(--content-wire-line) solid var(--content-wire-color); pointer-events: none; } @@ -336,7 +345,7 @@ border-top-left-radius: 4px; } - &::before { + &.content-wire-list::before { left: calc(var(--wire-center) + var(--content-wire-width) / 2 - 1px); top: calc(50% + var(--content-wire-width) / 2 - 1px); border-top-left-radius: max(0px, 4px - var(--content-wire-width) + 1px); @@ -351,11 +360,14 @@ width: var(--content-wire-width); top: calc(-1 * var(--section-gap)); bottom: 0; - border-left: 1px solid var(--content-wire-color); - border-right: 1px solid var(--content-wire-color); + border-left: var(--content-wire-line) solid var(--content-wire-color); pointer-events: none; } + &.content-wire-list .content-wire-continuation { + border-right: var(--content-wire-line) solid var(--content-wire-color); + } + &::after { background: var(--color-3-darkgray); z-index: 1; From 92cd88953410c319e3a0ec72cf26af176e55fbb7 Mon Sep 17 00:00:00 2001 From: Timon Date: Mon, 26 Oct 2026 23:48:06 +0000 Subject: [PATCH 3/3] Draw each Inspector section's outline as one border --- .../src/components/widgets/NodeSection.svelte | 61 +++++++------------ 1 file changed, 22 insertions(+), 39 deletions(-) diff --git a/frontend/src/components/widgets/NodeSection.svelte b/frontend/src/components/widgets/NodeSection.svelte index f27b47f3e54..b316d1ef321 100644 --- a/frontend/src/components/widgets/NodeSection.svelte +++ b/frontend/src/components/widgets/NodeSection.svelte @@ -157,7 +157,9 @@ // Between neighboring sections, which the wires joining them cross --section-gap: 8px; flex: 0 0 auto; + position: relative; margin: 0 4px; + border-radius: 4px; + .node-section { margin-top: var(--section-gap); @@ -179,13 +181,24 @@ } } + // The outline, as a border (which snaps to device pixels) over the 1px edge the contents leave clear + &:not(.node-reference)::before, + &.node-reference .text-button::after { + content: ""; + position: absolute; + inset: 0; + border: 1px solid var(--section-outline); + border-radius: inherit; + pointer-events: none; + } + // A section showing the chain feeding one of its inputs, which it frames below its rows, with a wire rising from them through its body into that input &.chain-wire { --chain-wire-corner-radius: 4px; --chain-wire-width: 2px; --chain-wire-line: 2px; --chain-section-indent: 8px; - // Within the body's border, the wire's centerline rises in line with the indented chain sections' icons + // Within the body, inset by the outline, the wire's centerline rises in line with the indented chain sections' icons --chain-wire-x: calc(var(--chain-section-indent) + var(--wire-center) - 1px); // Like in the graph, a list's wire is a 1px line, 2px gap, and 1px line @@ -197,7 +210,7 @@ // The body continues down into the frame around the chain's sections, the first right beneath its rows > .body { position: relative; - border-bottom: none; + margin-bottom: 0; border-radius: 0; anchor-scope: --chain-input; @@ -209,20 +222,19 @@ // The chain's sections, indented on the left and sharing the right edge, with the wire to the body crossing the gap atop the first > .chain-sections { + margin: 0 1px 1px; padding: 0 0 calc(var(--chain-section-indent) - 1px) calc(var(--chain-section-indent) - 1px); background: var(--color-3-darkgray); - border: 1px solid var(--section-outline); - border-top: none; border-radius: 0 0 4px 4px; - // Over the frame's right border, so the shared edge is one line + // Over the outline's right edge, so the shared edge is one line > .node-section { margin-left: 0; margin-right: -1px; } // With no gap above the first to cross, the body's wire meets it directly - > .node-section:first-child::before { + > .node-section:first-child::after { display: none; } } @@ -258,19 +270,18 @@ &.output-wire { --output-wire-width: 2px; --output-wire-line: 2px; - position: relative; // Two 1px lines, like the layer section's wire &.output-wire-list { --output-wire-width: 4px; --output-wire-line: 1px; - &::before { + &::after { border-right: var(--output-wire-line) solid var(--output-wire-color); } } - &::before { + &::after { content: ""; position: absolute; box-sizing: border-box; @@ -297,15 +308,6 @@ padding-left: calc(var(--wire-center) - 16px / 2); --button-background-color: none; - &::after { - content: ""; - position: absolute; - inset: 0; - border: 1px solid var(--section-outline); - border-radius: 2px; - pointer-events: none; - } - &:hover:not(.disabled) { --button-background-color: var(--color-5-dullgray); --section-outline: var(--color-4-dimgray); @@ -318,7 +320,6 @@ --content-wire-width: 2px; --content-wire-line: 2px; --content-wire-indent: 20px; - position: relative; padding-left: var(--content-wire-indent); &.content-wire-list { @@ -380,7 +381,6 @@ } .header { - position: relative; text-align: left; align-items: center; display: flex; @@ -389,23 +389,7 @@ border: 0; background: none; - // The section's outline, continuing up around the header without changing its size - &::after { - content: ""; - position: absolute; - inset: 0; - border: 1px solid var(--section-outline); - border-radius: 4px; - pointer-events: none; - } - &.expanded { - // Open at the bottom, where the body's sides carry on - &::after { - border-bottom: none; - border-radius: 4px 4px 0 0; - } - .expand-arrow::after { transform: rotate(90deg); } @@ -486,11 +470,10 @@ } > .body { + // Clear of the outline, which its background would otherwise cover + margin: 0 1px 1px; padding: 0 7px; background: var(--color-3-darkgray); - border: 1px solid var(--section-outline); - // No line between it and the header, which shares its outline - border-top: none; border-radius: 0 0 4px 4px; overflow: hidden;