DemonGatanjieuandClaude Opus 5.5
a083cfdc54
The drawer grows to 1000px. From 760px wide the line cards take the full height and the generation settings, generate bar, result and canvas buttons sit in a 320px column beside them. When narrow (docked browser) the drawer covers the studio column and keeps generating below the cards; only the cards scroll in either layout. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
559 lines
11 KiB
CSS
559 lines
11 KiB
CSS
/* Script Director: drawer inside the Audio Studio panel */
|
|
.anomalous-script-director-panel {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
bottom: 12px;
|
|
width: min(1000px, calc(100% - 24px));
|
|
background: var(--amb-bg-panel, #1e1e24);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
z-index: 5;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.anomalous-script-director-panel[hidden],
|
|
.anomalous-script-director-panel [hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* Docked browser: the studio column is narrow, so the drawer covers all of it. */
|
|
#anomalous-container.anomalous-docked .anomalous-script-director-panel {
|
|
top: 8px;
|
|
right: 8px;
|
|
bottom: 8px;
|
|
width: calc(100% - 16px);
|
|
}
|
|
|
|
.anomalous-sd-body,
|
|
.anomalous-sd-main {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Narrow: settings and the generate bar under the cards, never taking over the drawer. */
|
|
.anomalous-sd-side {
|
|
flex-shrink: 0;
|
|
max-height: 55%;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 8px 16px 10px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
background: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Wide: cards take the full height, the generate side is a column beside them. */
|
|
.anomalous-script-director-panel.is-wide .anomalous-sd-body {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.anomalous-script-director-panel.is-wide .anomalous-sd-side {
|
|
width: 320px;
|
|
max-height: none;
|
|
padding: 12px 14px;
|
|
border-top: none;
|
|
border-left: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.anomalous-sd-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.anomalous-sd-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.anomalous-sd-subtitle {
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.anomalous-sd-close-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: #94a3b8;
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-sd-close-btn:hover {
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
/* Character */
|
|
.anomalous-sd-character-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 16px 4px;
|
|
}
|
|
|
|
.anomalous-sd-step {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #cbd5e1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.anomalous-sd-character-select {
|
|
flex: 1;
|
|
min-width: 0;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 6px;
|
|
color: #f1f5f9;
|
|
font-size: 13px;
|
|
padding: 5px 8px;
|
|
}
|
|
|
|
.anomalous-sd-character-hint {
|
|
padding: 0 16px 10px;
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
color: #64748b;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.anomalous-sd-character-hint.is-warning {
|
|
color: #fbbf24;
|
|
}
|
|
|
|
/* Script input */
|
|
.anomalous-sd-input-area {
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.anomalous-sd-textarea {
|
|
width: 100%;
|
|
flex: 1;
|
|
min-height: 160px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 6px;
|
|
padding: 10px;
|
|
color: #cbd5e1;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
resize: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-sd-input-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-sd-btn {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
color: #e2e8f0;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
transition: background 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
.anomalous-sd-btn:hover:not(:disabled) {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.anomalous-sd-btn:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.anomalous-sd-btn.primary {
|
|
background: rgba(56, 189, 248, 0.1);
|
|
color: #38bdf8;
|
|
border-color: rgba(56, 189, 248, 0.25);
|
|
}
|
|
|
|
.anomalous-sd-btn.primary:hover:not(:disabled) {
|
|
background: rgba(56, 189, 248, 0.2);
|
|
}
|
|
|
|
.anomalous-sd-btn.accent {
|
|
background: rgba(99, 102, 241, 0.18);
|
|
color: #a5b4fc;
|
|
border-color: rgba(99, 102, 241, 0.35);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-sd-btn.accent:hover:not(:disabled) {
|
|
background: rgba(99, 102, 241, 0.3);
|
|
}
|
|
|
|
.anomalous-sd-btn.is-success {
|
|
background: rgba(16, 185, 129, 0.2);
|
|
border-color: rgba(16, 185, 129, 0.45);
|
|
color: #6ee7b7;
|
|
}
|
|
|
|
/* Lines */
|
|
.anomalous-sd-lines-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 16px 0;
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.anomalous-sd-link-btn {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
color: #38bdf8;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-sd-link-btn:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.anomalous-sd-scroll {
|
|
flex: 1;
|
|
min-height: 120px;
|
|
overflow-y: auto;
|
|
padding: 10px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-sd-lines-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-sd-line-card {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 8px;
|
|
padding: 8px 10px 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.anomalous-sd-line-card:focus-within {
|
|
border-color: rgba(56, 189, 248, 0.35);
|
|
}
|
|
|
|
.anomalous-sd-line-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.anomalous-sd-line-no {
|
|
flex: 1;
|
|
font-size: 11px;
|
|
font-family: monospace;
|
|
color: #64748b;
|
|
}
|
|
|
|
.anomalous-sd-icon-btn {
|
|
width: 22px;
|
|
height: 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: #94a3b8;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-sd-icon-btn:hover,
|
|
.anomalous-sd-icon-btn.is-playing {
|
|
color: #38bdf8;
|
|
border-color: rgba(56, 189, 248, 0.4);
|
|
}
|
|
|
|
.anomalous-sd-icon-btn.is-danger:hover {
|
|
color: #f87171;
|
|
border-color: rgba(248, 113, 113, 0.4);
|
|
}
|
|
|
|
.anomalous-sd-line-text {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
field-sizing: content;
|
|
min-height: 1.6em;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
padding: 2px 4px;
|
|
color: #e2e8f0;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
resize: none;
|
|
}
|
|
|
|
.anomalous-sd-line-text:hover,
|
|
.anomalous-sd-line-text:focus {
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
background: rgba(0, 0, 0, 0.2);
|
|
outline: none;
|
|
}
|
|
|
|
.anomalous-sd-emotion-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
}
|
|
|
|
.anomalous-sd-emotion-chip {
|
|
padding: 2px 9px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: #94a3b8;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.anomalous-sd-emotion-chip:hover {
|
|
color: #e2e8f0;
|
|
border-color: rgba(129, 140, 248, 0.4);
|
|
}
|
|
|
|
.anomalous-sd-emotion-chip.active {
|
|
background: rgba(99, 102, 241, 0.3);
|
|
border-color: #818cf8;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-sd-emotion-chip.is-main.active {
|
|
background: rgba(16, 185, 129, 0.22);
|
|
border-color: rgba(52, 211, 153, 0.7);
|
|
}
|
|
|
|
/* Bundle */
|
|
.anomalous-sd-footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-sd-package-summary {
|
|
font-size: 12px;
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.anomalous-sd-package-summary.is-error {
|
|
color: #fbbf24;
|
|
}
|
|
|
|
.anomalous-sd-package-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Generating happens in the run section; the canvas buttons stay a small row. */
|
|
.anomalous-sd-package-actions .anomalous-sd-btn {
|
|
padding: 3px 8px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.anomalous-sd-drag-handle {
|
|
flex: 1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
padding: 3px 8px;
|
|
border-radius: 6px;
|
|
border: 1px dashed rgba(129, 140, 248, 0.5);
|
|
background: rgba(99, 102, 241, 0.08);
|
|
color: #a5b4fc;
|
|
font-size: 11px;
|
|
cursor: grab;
|
|
user-select: none;
|
|
}
|
|
|
|
.anomalous-sd-drag-handle:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.anomalous-sd-drag-handle.is-disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.anomalous-sd-emotion-chip.is-missing {
|
|
border-style: dashed;
|
|
border-color: rgba(251, 191, 36, 0.7);
|
|
color: #fbbf24;
|
|
background: rgba(245, 158, 11, 0.1);
|
|
}
|
|
|
|
.anomalous-sd-split-mode {
|
|
margin-right: auto;
|
|
min-width: 0;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 6px;
|
|
color: #cbd5e1;
|
|
font-size: 12px;
|
|
padding: 5px 6px;
|
|
}
|
|
|
|
.anomalous-sd-add-line {
|
|
align-self: stretch;
|
|
padding: 7px;
|
|
border-radius: 8px;
|
|
border: 1px dashed rgba(255, 255, 255, 0.15);
|
|
background: transparent;
|
|
color: #94a3b8;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-sd-add-line:hover {
|
|
color: #e2e8f0;
|
|
border-color: rgba(56, 189, 248, 0.45);
|
|
}
|
|
|
|
/* Generate here (GPT-SoVITS): ui_script_run.js */
|
|
.anomalous-sd-run {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.anomalous-sd-run-hint {
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.anomalous-sd-run-hint.is-warning {
|
|
color: #fbbf24;
|
|
}
|
|
|
|
.anomalous-sd-run-settings {
|
|
flex-shrink: 0;
|
|
padding: 6px 10px;
|
|
border-radius: 8px;
|
|
background: rgba(99, 102, 241, 0.06);
|
|
border: 1px solid rgba(99, 102, 241, 0.18);
|
|
}
|
|
|
|
.anomalous-sd-run-settings summary {
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.anomalous-sd-run-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-sd-run-select,
|
|
.anomalous-sd-run-number {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
color: #e2e8f0;
|
|
border-radius: 6px;
|
|
padding: 4px 6px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-sd-run-number {
|
|
width: 64px;
|
|
}
|
|
|
|
.anomalous-sd-run-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 6px 12px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.anomalous-sd-run-param {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
color: #cbd5e1;
|
|
font-family: ui-monospace, monospace;
|
|
}
|
|
|
|
.anomalous-sd-run-note {
|
|
margin: 6px 0 4px;
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.anomalous-sd-run-status,
|
|
.anomalous-sd-run-saved {
|
|
font-size: 12px;
|
|
color: #cbd5e1;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.anomalous-sd-run-saved {
|
|
color: #94a3b8;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.anomalous-sd-run-warnings {
|
|
max-height: 60px;
|
|
overflow-y: auto;
|
|
font-size: 11px;
|
|
color: #fbbf24;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.anomalous-sd-run-player {
|
|
width: 100%;
|
|
height: 32px;
|
|
}
|
|
|
|
.anomalous-sd-take-no {
|
|
margin-left: 2px;
|
|
font-size: 10px;
|
|
color: #a5b4fc;
|
|
}
|