DemonGatanjieuandClaude Opus 5.5
f326018d8d
A line on top of the parameters: the set last put into this node and when, what changed since (with Put them back), and a "last put in" mark on its card and column. Remembered in this browser per workflow and node (the newest 100), forgotten when the receipt undoes it, and dropped from view once none of the values it changed is left. Without a record, the line says which saved set the values match or come closest to (at most 3 apart). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
551 lines
12 KiB
CSS
551 lines
12 KiB
CSS
/* The current-node panel (Node Assistant): one scrolling body of sections; prompts; the parameters
|
|
(saved sets as cards with their picture and source, or side by side). */
|
|
|
|
.anomalous-node-body {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.anomalous-node-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin: 14px 16px 0;
|
|
}
|
|
|
|
.anomalous-node-section-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-node-section-head h3 {
|
|
margin: 0;
|
|
color: #8b91a3;
|
|
font-size: 10px;
|
|
font-weight: 750;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.anomalous-node-section-btn {
|
|
padding: 4px 10px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--amb-text-soft);
|
|
font-size: 11.5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-node-section-btn:hover {
|
|
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-node-param-search {
|
|
padding: 7px 10px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 8px;
|
|
background: var(--amb-lt-sunken, rgba(0, 0, 0, 0.25));
|
|
color: var(--amb-text-main);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-node-param-tools {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Cards or side by side. */
|
|
.anomalous-node-param-views {
|
|
display: inline-flex;
|
|
padding: 2px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.anomalous-node-param-views[hidden] { display: none; }
|
|
|
|
.anomalous-node-param-view {
|
|
padding: 3px 10px;
|
|
border: none;
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-node-param-view:hover { color: var(--amb-text-main); }
|
|
|
|
.anomalous-node-param-view.is-on {
|
|
background: color-mix(in srgb, var(--amb-link) 18%, transparent);
|
|
color: var(--amb-text-main);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-node-param-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* On top: the set last put into this node and what changed since, or the set the values match. */
|
|
.anomalous-node-param-history {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 4px 8px;
|
|
padding: 9px 12px;
|
|
border: 1px solid color-mix(in srgb, var(--amb-link) 30%, var(--amb-border));
|
|
border-radius: 10px;
|
|
background: color-mix(in srgb, var(--amb-link) 7%, transparent);
|
|
color: var(--amb-text-muted);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.anomalous-node-param-history > .anomalous-node-param-icon {
|
|
width: 15px;
|
|
height: 15px;
|
|
color: var(--amb-link);
|
|
}
|
|
|
|
.anomalous-node-param-history-main { color: var(--amb-text-main); }
|
|
.anomalous-node-param-history-note.is-same { color: var(--amb-ok-text); }
|
|
.anomalous-node-param-history > .anomalous-node-param-link { margin-left: auto; }
|
|
|
|
/* The card (or column) of the set last put in. */
|
|
.anomalous-node-param-last {
|
|
flex-shrink: 0;
|
|
padding: 1px 7px;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--amb-link) 18%, transparent);
|
|
color: var(--amb-text-main);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-node-param-table .anomalous-node-param-last {
|
|
display: inline-block;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.anomalous-node-param {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 10px;
|
|
background: rgba(var(--amb-ink-rgb), 0.035);
|
|
}
|
|
|
|
/* The picture made with the values, and where they came from. */
|
|
.anomalous-node-param-top {
|
|
display: flex;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-node-param-thumb {
|
|
display: grid;
|
|
flex-shrink: 0;
|
|
place-items: center;
|
|
width: 52px;
|
|
height: 68px;
|
|
padding: 0;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 8px;
|
|
background: rgba(var(--amb-ink-rgb), 0.05);
|
|
color: var(--amb-text-dim);
|
|
overflow: hidden;
|
|
cursor: zoom-in;
|
|
}
|
|
|
|
.anomalous-node-param-thumb.is-empty { cursor: default; }
|
|
|
|
.anomalous-node-param-thumb > img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.anomalous-node-param-thumb > .anomalous-node-param-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.anomalous-node-param-main {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-node-param-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-node-param-name {
|
|
overflow: hidden;
|
|
color: var(--amb-text-main);
|
|
font-size: 13px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.anomalous-node-param-role {
|
|
flex-shrink: 0;
|
|
padding: 1px 7px;
|
|
border-radius: 999px;
|
|
background: rgba(var(--amb-ink-rgb), 0.06);
|
|
color: var(--amb-link);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.anomalous-node-param-role.is-positive { color: var(--amb-ok-text); }
|
|
.anomalous-node-param-role.is-negative { color: var(--amb-danger-text); }
|
|
|
|
.anomalous-node-param-icon {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
.anomalous-node-param-icon > svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.anomalous-node-param-from {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
color: var(--amb-text-muted);
|
|
font-size: 11.5px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.anomalous-node-param-from > .anomalous-node-param-icon { align-self: center; }
|
|
.anomalous-node-param-from-text { min-width: 0; overflow-wrap: anywhere; }
|
|
|
|
.anomalous-node-param-link {
|
|
flex-shrink: 0;
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
color: var(--amb-link);
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-node-param-link:hover {
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
/* The values: the name, then a picture of the change (two bars for numbers, old → new otherwise). */
|
|
.anomalous-node-param-rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.anomalous-node-param-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(56px, 112px) minmax(48px, 200px) auto;
|
|
justify-content: start;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
color: var(--amb-text-soft);
|
|
font-size: 11.5px;
|
|
}
|
|
|
|
.anomalous-node-param-row.is-kept,
|
|
.anomalous-node-param-row.is-same {
|
|
grid-template-columns: minmax(56px, 112px) minmax(0, 1fr);
|
|
justify-content: stretch;
|
|
color: var(--amb-text-dim);
|
|
}
|
|
|
|
.anomalous-node-param-label {
|
|
overflow: hidden;
|
|
color: var(--amb-text-muted);
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.anomalous-node-param-bars {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
min-width: 40px;
|
|
}
|
|
|
|
.anomalous-node-param-bar {
|
|
height: 5px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.anomalous-node-param-bar.is-now { background: rgba(var(--amb-ink-rgb), 0.22); }
|
|
.anomalous-node-param-bar.is-then { background: var(--amb-link); }
|
|
|
|
.anomalous-node-param-nums {
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-node-param-nums > .is-now { color: var(--amb-text-dim); }
|
|
|
|
.anomalous-node-param-nums > strong {
|
|
color: var(--amb-text-main);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-node-param-trend {
|
|
margin-left: 3px;
|
|
color: var(--amb-link);
|
|
}
|
|
|
|
.anomalous-node-param-swap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
grid-column: 2 / -1;
|
|
align-items: center;
|
|
gap: 5px;
|
|
min-width: 0;
|
|
color: var(--amb-text-dim);
|
|
}
|
|
|
|
.anomalous-node-param-pill {
|
|
max-width: 100%;
|
|
padding: 1px 8px;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.anomalous-node-param-pill.is-now {
|
|
background: rgba(var(--amb-ink-rgb), 0.06);
|
|
color: var(--amb-text-dim);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.anomalous-node-param-pill.is-then {
|
|
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-node-param-quiet {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* The one line on what stays, across the whole row. */
|
|
.anomalous-node-param-quiet:only-child {
|
|
grid-column: 1 / -1;
|
|
white-space: normal;
|
|
}
|
|
|
|
.anomalous-node-muted {
|
|
margin: 0;
|
|
color: #8b91a3;
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.anomalous-node-muted.is-error { color: var(--amb-danger-text); }
|
|
|
|
/* Show all, compare, delete, apply. */
|
|
.anomalous-node-param-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.anomalous-node-param-gap { flex: 1; }
|
|
|
|
.anomalous-node-param-more {
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
color: var(--amb-text-muted);
|
|
font-size: 11.5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-node-param-more:hover { color: var(--amb-text-main); }
|
|
|
|
.anomalous-node-param-secondary,
|
|
.anomalous-node-param-delete {
|
|
padding: 5px 10px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font-size: 11.5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-node-param-secondary:hover {
|
|
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-node-param-delete:hover {
|
|
border-color: rgba(239, 68, 68, 0.5);
|
|
color: var(--amb-danger-text);
|
|
}
|
|
|
|
.anomalous-node-param-apply {
|
|
padding: 5px 12px;
|
|
border: 1px solid color-mix(in srgb, var(--amb-link) 45%, transparent);
|
|
border-radius: 7px;
|
|
background: color-mix(in srgb, var(--amb-link) 14%, transparent);
|
|
color: var(--amb-text-main);
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-node-param-apply:disabled {
|
|
border-color: var(--amb-border);
|
|
background: transparent;
|
|
color: var(--amb-text-dim);
|
|
cursor: default;
|
|
}
|
|
|
|
/* Side by side: a column for now and for each set, the values a set would put in marked. */
|
|
.anomalous-node-param-table-wrap {
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 10px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.anomalous-node-param-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 11.5px;
|
|
}
|
|
|
|
.anomalous-node-param-table th,
|
|
.anomalous-node-param-table td {
|
|
max-width: 150px;
|
|
padding: 6px 10px;
|
|
border-bottom: 1px solid var(--amb-border);
|
|
overflow: hidden;
|
|
color: var(--amb-text-soft);
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.anomalous-node-param-table th {
|
|
vertical-align: bottom;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-node-param-table .is-now { color: var(--amb-text-muted); }
|
|
|
|
.anomalous-node-param-table td.is-change {
|
|
background: color-mix(in srgb, var(--amb-link) 13%, transparent);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-node-param-table td.is-same,
|
|
.anomalous-node-param-table td.is-none { color: var(--amb-text-dim); }
|
|
|
|
.anomalous-node-param-table td.is-seed,
|
|
.anomalous-node-param-table td.is-model,
|
|
.anomalous-node-param-table td.is-missing {
|
|
color: var(--amb-text-dim);
|
|
font-style: italic;
|
|
}
|
|
|
|
.anomalous-node-param-table-thumb {
|
|
display: block;
|
|
width: 44px;
|
|
height: 56px;
|
|
margin-bottom: 5px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: rgba(var(--amb-ink-rgb), 0.05);
|
|
overflow: hidden;
|
|
}
|
|
|
|
button.anomalous-node-param-table-thumb { cursor: zoom-in; }
|
|
|
|
.anomalous-node-param-table-thumb > img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.anomalous-node-param-table-name {
|
|
display: block;
|
|
max-width: 130px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.anomalous-node-param-table-foot td { border-bottom: none; }
|
|
|
|
/* A prompt box of the node, with its translation. */
|
|
.anomalous-node-prompt {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 10px;
|
|
background: rgba(var(--amb-ink-rgb), 0.035);
|
|
}
|
|
|
|
.anomalous-node-param-role.is-plain { color: var(--amb-text-soft); }
|
|
|
|
.anomalous-node-prompt-name {
|
|
color: var(--amb-text-dim);
|
|
font-size: 10.5px;
|
|
}
|
|
|
|
.anomalous-node-prompt-text {
|
|
display: -webkit-box;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: var(--amb-text-main);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
overflow-wrap: anywhere;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 4;
|
|
}
|
|
|
|
.anomalous-node-prompt-text.is-empty { color: var(--amb-text-dim); }
|
|
|