DemonGatanjieuandClaude Opus 5.5
96736560af
Current node lists the selected node's prompt boxes (prompt_boxes.js, so each is marked positive or negative by its wiring). Chinese text gets "translate to English", written back only if the box still holds the same text when the translation arrives (one undo); English text can show its Chinese meaning without writing. The standalone Prompt Translator (ui_prompt_translator.js, 838 lines, its four fallback ways of guessing a text box, its styles and its toolbox entry) is removed, with Prompt Studio's appendPromptToStudio that only it used. Prompt Studio keeps its own translate buttons. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
209 lines
4.3 KiB
CSS
209 lines
4.3 KiB
CSS
/* The current-node panel (Node Assistant): one scrolling body of sections; prompts; the parameters list. */
|
|
|
|
.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 rgba(255, 255, 255, 0.14);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: #d1d5db;
|
|
font-size: 11.5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-node-section-btn:hover {
|
|
border-color: rgba(165, 180, 252, 0.45);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.anomalous-node-param-search {
|
|
padding: 7px 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
color: #e5e7eb;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-node-param-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-node-param {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 10px 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, 0.035);
|
|
}
|
|
|
|
.anomalous-node-param-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-node-param-name {
|
|
overflow: hidden;
|
|
color: #f3f4f6;
|
|
font-size: 12.5px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.anomalous-node-param-role {
|
|
flex-shrink: 0;
|
|
padding: 1px 7px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: #c4b5fd;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.anomalous-node-param-role.is-positive { color: #86efac; }
|
|
.anomalous-node-param-role.is-negative { color: #fca5a5; }
|
|
|
|
.anomalous-node-param-sources {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.anomalous-node-param-sources span {
|
|
padding: 1px 7px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 999px;
|
|
color: #9ca3af;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.anomalous-node-param-changes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
color: #d1d5db;
|
|
font-size: 11.5px;
|
|
}
|
|
|
|
.anomalous-node-param-changes li {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.anomalous-node-param-changes li.is-more,
|
|
.anomalous-node-param-kept,
|
|
.anomalous-node-muted {
|
|
margin: 0;
|
|
color: #8b91a3;
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.anomalous-node-muted.is-error { color: #fca5a5; }
|
|
|
|
.anomalous-node-param-apply {
|
|
align-self: flex-end;
|
|
padding: 5px 12px;
|
|
border: 1px solid rgba(165, 180, 252, 0.45);
|
|
border-radius: 7px;
|
|
background: rgba(165, 180, 252, 0.14);
|
|
color: #e5e7eb;
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-node-param-apply:disabled {
|
|
border-color: rgba(255, 255, 255, 0.08);
|
|
background: transparent;
|
|
color: #6b7280;
|
|
cursor: default;
|
|
}
|
|
|
|
/* 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 rgba(255, 255, 255, 0.08);
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, 0.035);
|
|
}
|
|
|
|
.anomalous-node-param-role.is-plain { color: #d1d5db; }
|
|
|
|
.anomalous-node-prompt-name {
|
|
color: #6b7280;
|
|
font-size: 10.5px;
|
|
}
|
|
|
|
.anomalous-node-prompt-text,
|
|
.anomalous-node-prompt-note {
|
|
display: -webkit-box;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: #e5e7eb;
|
|
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: #6b7280; }
|
|
|
|
.anomalous-node-prompt-note {
|
|
padding: 6px 8px;
|
|
border-radius: 6px;
|
|
background: rgba(165, 180, 252, 0.08);
|
|
color: #c7d2fe;
|
|
-webkit-line-clamp: 8;
|
|
}
|
|
|
|
.anomalous-node-prompt-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
}
|