DemonGatanjieuandClaude Opus 5.5
4a109c4df8
A search box above the clips (ui_tts_clip_search.js) finds clips by part of their line or file name and lists the first 30 with their lines, to hear, use as the main voice or add as an emotion (the new row gets the clip and its line). The lines come once per dialog from Anomalous_TTS's GET /anomalous_tts/reference_lines (interface 14, by character name only); with an older node the request fails quietly and the search covers file names. Picking a clip now fills its line from the same lines, so the per-clip request is gone. Lines reach the page as text only (textContent). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
1415 lines
31 KiB
CSS
1415 lines
31 KiB
CSS
/**
|
|
* 11-audio-studio.css
|
|
* Dark Glassmorphism Studio / DAW Design for Audio & Voice Ecosystem
|
|
*/
|
|
|
|
/* Equalizer bar keyframes */
|
|
@keyframes eq-pulse-1 {
|
|
0%, 100% { height: 4px; }
|
|
50% { height: 12px; }
|
|
}
|
|
|
|
@keyframes eq-pulse-2 {
|
|
0%, 100% { height: 12px; }
|
|
50% { height: 5px; }
|
|
}
|
|
|
|
@keyframes eq-pulse-3 {
|
|
0%, 100% { height: 7px; }
|
|
50% { height: 14px; }
|
|
}
|
|
|
|
.anomalous-eq-bar-1 { animation: eq-pulse-1 0.65s ease-in-out infinite; }
|
|
.anomalous-eq-bar-2 { animation: eq-pulse-2 0.5s ease-in-out infinite; }
|
|
.anomalous-eq-bar-3 { animation: eq-pulse-3 0.8s ease-in-out infinite; }
|
|
|
|
/* Workspace Containers */
|
|
.anomalous-audio-studio-wrapper,
|
|
.anomalous-audio-gallery-wrapper {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Header & Toolbars */
|
|
.anomalous-audio-toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding-bottom: 14px;
|
|
border-bottom: 1px solid var(--amb-border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Characters | Voice-over: the Voices page's two views (ui_voice_tabs.js). */
|
|
.anomalous-voice-tabs {
|
|
display: inline-flex;
|
|
gap: 2px;
|
|
padding: 3px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 10px;
|
|
background: rgba(var(--amb-ink-rgb), 0.03);
|
|
}
|
|
|
|
.anomalous-voice-tab {
|
|
padding: 6px 18px;
|
|
border: none;
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-voice-tab:hover {
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-voice-tab[aria-selected="true"] {
|
|
background: color-mix(in srgb, var(--amb-link) 18%, transparent);
|
|
color: var(--amb-text-main);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-audio-title-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.anomalous-audio-icon-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
background: rgba(var(--amb-ink-rgb), 0.05);
|
|
border: 1px solid var(--amb-border);
|
|
color: var(--amb-text-soft);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.anomalous-audio-title-text {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--amb-text-main);
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.anomalous-audio-sub-text {
|
|
font-size: 12px;
|
|
color: var(--amb-text-dim);
|
|
}
|
|
|
|
.anomalous-audio-title-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.anomalous-audio-right-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.anomalous-audio-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--amb-lt-sunken, rgba(0, 0, 0, 0.25));
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 8px;
|
|
padding: 4px 10px;
|
|
color: var(--amb-text-dim);
|
|
}
|
|
|
|
.anomalous-audio-search input {
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: var(--amb-text-main);
|
|
font-size: 12px;
|
|
width: 140px;
|
|
}
|
|
|
|
.anomalous-audio-tool-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 12px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--amb-border);
|
|
background: rgba(var(--amb-ink-rgb), 0.05);
|
|
color: var(--amb-text-soft);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.anomalous-audio-tool-btn:hover:not(:disabled) {
|
|
background: rgba(var(--amb-ink-rgb), 0.1);
|
|
border-color: var(--amb-border-strong);
|
|
}
|
|
|
|
/* .is-accent: a card's way to the Voice-over page. */
|
|
.anomalous-audio-tool-btn.active,
|
|
.anomalous-audio-tool-btn.is-accent {
|
|
background: color-mix(in srgb, var(--amb-link) 15%, transparent);
|
|
color: var(--amb-link);
|
|
border-color: color-mix(in srgb, var(--amb-link) 30%, transparent);
|
|
}
|
|
|
|
.anomalous-audio-tool-btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: progress;
|
|
}
|
|
|
|
.anomalous-audio-status {
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
color: var(--amb-text-dim);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-audio-status.is-error {
|
|
color: var(--amb-danger);
|
|
}
|
|
|
|
.anomalous-audio-empty {
|
|
padding: 70px 20px;
|
|
text-align: center;
|
|
color: var(--amb-text-dim);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.anomalous-audio-empty-icon {
|
|
display: inline-flex;
|
|
margin-bottom: 12px;
|
|
opacity: 0.6;
|
|
transform: scale(2);
|
|
}
|
|
|
|
.anomalous-audio-empty-title {
|
|
color: var(--amb-text-soft);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.anomalous-audio-empty-desc {
|
|
font-size: 12px;
|
|
max-width: 420px;
|
|
margin: 0 auto;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Character Voice Cards */
|
|
.anomalous-voice-card-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.anomalous-character-voice-card {
|
|
background: var(--amb-lt-surface, rgba(18, 18, 23, 0.75));
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
backdrop-filter: blur(20px);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
|
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.anomalous-character-voice-card:hover {
|
|
border-color: color-mix(in srgb, var(--amb-link) 25%, transparent);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 15px color-mix(in srgb, var(--amb-link) 8%, transparent);
|
|
}
|
|
|
|
.anomalous-voice-slice-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
background: rgba(var(--amb-ink-rgb), 0.02);
|
|
border: 1px solid var(--amb-border);
|
|
transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.anomalous-voice-slice-row:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.06);
|
|
border-color: var(--amb-border-strong);
|
|
}
|
|
|
|
.anomalous-character-voice-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px 10px;
|
|
}
|
|
|
|
.anomalous-character-voice-title {
|
|
display: flex;
|
|
flex: 1 1 160px;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-character-voice-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
background: rgba(var(--amb-ink-rgb), 0.06);
|
|
border: 1px solid var(--amb-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--amb-text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.anomalous-character-voice-names {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-character-voice-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--amb-text-main);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.anomalous-character-voice-folder {
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
color: var(--amb-link);
|
|
}
|
|
|
|
.anomalous-character-voice-hint {
|
|
overflow: hidden;
|
|
font-size: 11px;
|
|
color: var(--amb-text-dim);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-character-voice-count {
|
|
font-size: 11px;
|
|
padding: 3px 8px;
|
|
border-radius: 12px;
|
|
background: rgba(var(--amb-ink-rgb), 0.05);
|
|
border: 1px solid var(--amb-border);
|
|
color: var(--amb-text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-character-voice-warning {
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
color: var(--amb-warn);
|
|
background: rgba(245, 158, 11, 0.08);
|
|
border: 1px solid rgba(245, 158, 11, 0.25);
|
|
border-radius: 6px;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.anomalous-character-voice-slices {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.anomalous-audio-eq-bars {
|
|
align-items: flex-end;
|
|
gap: 2px;
|
|
height: 14px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.anomalous-eq-bar {
|
|
width: 2px;
|
|
border-radius: 1px;
|
|
background: var(--amb-btn-primary-bg);
|
|
}
|
|
|
|
.anomalous-eq-bar-2 {
|
|
background: var(--amb-btn-primary-bg);
|
|
}
|
|
|
|
.anomalous-voice-emotion-tag {
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.anomalous-voice-slice-text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: 12px;
|
|
color: var(--amb-text-soft);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.anomalous-voice-copy-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--amb-border);
|
|
background: var(--amb-lt-sunken, rgba(0, 0, 0, 0.3));
|
|
color: var(--amb-text-muted);
|
|
font-size: 11px;
|
|
font-family: monospace;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
transition: color 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
|
|
.anomalous-voice-copy-btn.is-copied {
|
|
color: var(--amb-ok);
|
|
border-color: rgba(52, 211, 153, 0.4);
|
|
}
|
|
|
|
/* Play Buttons */
|
|
.anomalous-audio-play-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--amb-border-strong);
|
|
background: rgba(var(--amb-ink-rgb), 0.04);
|
|
color: var(--amb-text-soft);
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.anomalous-audio-play-btn:hover {
|
|
background: color-mix(in srgb, var(--amb-link) 15%, transparent);
|
|
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
|
|
color: var(--amb-link);
|
|
transform: scale(1.06);
|
|
}
|
|
|
|
.anomalous-audio-play-btn.is-playing {
|
|
background: color-mix(in srgb, var(--amb-link) 20%, transparent);
|
|
border-color: var(--amb-link);
|
|
color: var(--amb-link);
|
|
box-shadow: 0 0 10px color-mix(in srgb, var(--amb-link) 30%, transparent);
|
|
}
|
|
|
|
/* Audio Gallery Tracks */
|
|
.anomalous-audio-track-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 10px 14px;
|
|
border-radius: 10px;
|
|
background: var(--amb-lt-surface, rgba(22, 22, 28, 0.7));
|
|
border: 1px solid var(--amb-border);
|
|
backdrop-filter: blur(14px);
|
|
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.anomalous-audio-track-item:hover {
|
|
background: var(--amb-lt-card-hover, rgba(28, 28, 36, 0.85));
|
|
border-color: color-mix(in srgb, var(--amb-link) 30%, transparent);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.anomalous-track-progress-bar {
|
|
flex: 1;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background: rgba(var(--amb-ink-rgb), 0.08);
|
|
position: relative;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-audio-track-item.is-removing {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
.anomalous-track-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-track-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-track-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
flex: 0 1 360px;
|
|
}
|
|
|
|
.anomalous-track-speech {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding-left: 40px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-track-emotions {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.anomalous-track-emotions:empty {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-track-emotion {
|
|
font-size: 10px;
|
|
padding: 1px 7px;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--amb-link) 18%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--amb-link) 35%, transparent);
|
|
color: var(--amb-text-main);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.anomalous-track-emotion.is-main {
|
|
background: rgba(16, 185, 129, 0.12);
|
|
border-color: rgba(52, 211, 153, 0.35);
|
|
color: var(--amb-ok-soft);
|
|
}
|
|
|
|
.anomalous-track-speech-summary {
|
|
flex: 1;
|
|
min-width: 0;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
text-align: left;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
color: var(--amb-text-main);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-track-speech.is-expanded .anomalous-track-speech-summary {
|
|
color: var(--amb-text-muted);
|
|
}
|
|
|
|
.anomalous-track-speech-full {
|
|
flex-basis: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 8px 10px;
|
|
border-radius: 6px;
|
|
background: var(--amb-lt-sunken, rgba(0, 0, 0, 0.25));
|
|
border: 1px solid var(--amb-border);
|
|
}
|
|
|
|
/* Folded until the summary is clicked (display: flex above would show it anyway). */
|
|
.anomalous-track-speech-full[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-track-speech-line {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
color: var(--amb-text-soft);
|
|
}
|
|
|
|
.anomalous-audio-play-btn.is-done {
|
|
color: var(--amb-ok);
|
|
border-color: rgba(52, 211, 153, 0.5);
|
|
}
|
|
|
|
.anomalous-track-save {
|
|
padding: 4px 10px;
|
|
}
|
|
|
|
.anomalous-audio-track-item.is-saved {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.anomalous-track-previews {
|
|
border: 1px dashed rgba(251, 191, 36, 0.35);
|
|
border-radius: 10px;
|
|
padding: 8px 12px;
|
|
background: rgba(245, 158, 11, 0.04);
|
|
}
|
|
|
|
.anomalous-track-previews[open] {
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.anomalous-track-previews-summary {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
list-style-position: inside;
|
|
}
|
|
|
|
.anomalous-track-previews[open] > .anomalous-track-previews-summary {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.anomalous-track-previews-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--amb-warn);
|
|
}
|
|
|
|
.anomalous-track-previews-hint {
|
|
font-size: 11px;
|
|
color: var(--amb-text-muted);
|
|
}
|
|
|
|
.anomalous-track-list-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.anomalous-track-name {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--amb-text-main);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.anomalous-track-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
font-size: 11px;
|
|
color: var(--amb-text-dim);
|
|
}
|
|
|
|
.anomalous-track-folder {
|
|
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
|
|
color: var(--amb-link);
|
|
padding: 1px 5px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.anomalous-track-time {
|
|
font-size: 11px;
|
|
color: var(--amb-text-muted);
|
|
font-family: monospace;
|
|
min-width: 90px;
|
|
text-align: right;
|
|
}
|
|
|
|
.anomalous-track-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.anomalous-track-actions a.anomalous-audio-play-btn {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.anomalous-track-delete:hover {
|
|
color: var(--amb-danger);
|
|
border-color: rgba(248, 113, 113, 0.4);
|
|
background: rgba(248, 113, 113, 0.1);
|
|
}
|
|
|
|
.anomalous-track-count {
|
|
font-size: 11px;
|
|
color: var(--amb-text-muted);
|
|
background: rgba(var(--amb-ink-rgb), 0.05);
|
|
padding: 3px 8px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.anomalous-track-load-more {
|
|
align-self: center;
|
|
}
|
|
|
|
.anomalous-track-progress-fill {
|
|
height: 100%;
|
|
width: 0%;
|
|
background: linear-gradient(90deg, var(--amb-link), var(--amb-link));
|
|
border-radius: 2px;
|
|
transition: width 0.1s linear;
|
|
}
|
|
|
|
/* Audio Sidebar Nav */
|
|
.anomalous-audio-sidebar-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 14px 10px 14px;
|
|
border-bottom: 1px solid var(--amb-border);
|
|
}
|
|
|
|
.anomalous-audio-sidebar-title {
|
|
color: var(--amb-text-main);
|
|
margin: 0;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-audio-sidebar-title-icon {
|
|
display: inline-flex;
|
|
color: var(--amb-link);
|
|
}
|
|
|
|
.anomalous-audio-sidebar-refresh {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--amb-text-muted);
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.anomalous-audio-sidebar-refresh:hover {
|
|
color: var(--amb-text-main);
|
|
background: rgba(var(--amb-ink-rgb), 0.06);
|
|
}
|
|
|
|
.anomalous-audio-nav-list {
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.anomalous-audio-nav-section {
|
|
padding: 12px 14px 4px 14px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
color: var(--amb-text-dim);
|
|
}
|
|
|
|
.anomalous-audio-nav-section.is-error {
|
|
color: var(--amb-danger);
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.anomalous-audio-nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
width: calc(100% - 16px);
|
|
padding: 8px 12px;
|
|
margin: 2px 8px;
|
|
border: none;
|
|
border-left: 2px solid transparent;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
color: var(--amb-text-soft);
|
|
cursor: pointer;
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.anomalous-audio-nav-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.anomalous-audio-nav-icon {
|
|
display: inline-flex;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.anomalous-audio-nav-count {
|
|
font-size: 10px;
|
|
color: var(--amb-text-dim);
|
|
background: rgba(var(--amb-ink-rgb), 0.05);
|
|
padding: 1px 6px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.anomalous-audio-nav-item.active .anomalous-audio-nav-count {
|
|
color: var(--amb-link);
|
|
background: color-mix(in srgb, var(--amb-link) 20%, transparent);
|
|
}
|
|
|
|
.anomalous-audio-nav-item:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.04);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-audio-nav-item.active {
|
|
background: color-mix(in srgb, var(--amb-link) 14%, transparent);
|
|
color: var(--amb-link);
|
|
border-left-color: var(--amb-link);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Sidebar: search, language / folder groups, clips, settings entry */
|
|
.anomalous-audio-sidebar-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin: 8px 12px 0;
|
|
padding: 5px 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-dim);
|
|
}
|
|
|
|
.anomalous-audio-sidebar-search input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
color: var(--amb-text-main);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-audio-nav-text {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-audio-nav-bucket-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
width: calc(100% - 16px);
|
|
margin: 6px 8px 0;
|
|
padding: 4px 6px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font: inherit;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-audio-nav-bucket-head:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.04);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-audio-nav-bucket-count {
|
|
margin-left: auto;
|
|
color: var(--amb-text-dim);
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.anomalous-audio-nav-chevron {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
color: var(--amb-text-dim);
|
|
transition: transform 0.15s ease;
|
|
}
|
|
|
|
.anomalous-audio-nav-chevron.is-open {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.anomalous-audio-nav-bucket-head.is-collapsed .anomalous-audio-nav-chevron {
|
|
transform: none;
|
|
}
|
|
|
|
.anomalous-audio-nav-chevron[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-audio-nav-bucket .anomalous-audio-nav-item {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.anomalous-audio-nav-item > .anomalous-audio-nav-chevron {
|
|
margin: -4px -4px -4px -2px;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.anomalous-audio-nav-item > .anomalous-audio-nav-chevron:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.08);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-audio-nav-item .anomalous-audio-nav-label {
|
|
flex: 1;
|
|
}
|
|
|
|
.anomalous-audio-nav-problem {
|
|
flex-shrink: 0;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--amb-danger);
|
|
}
|
|
|
|
.anomalous-audio-nav-clips {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0 8px 4px 30px;
|
|
border-left: 1px solid var(--amb-border);
|
|
}
|
|
|
|
.anomalous-audio-nav-clip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
padding: 4px 8px;
|
|
border: none;
|
|
border-radius: 0 6px 6px 0;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font: inherit;
|
|
font-size: 11px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-audio-nav-clip:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.04);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-audio-nav-clip-play {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
color: var(--amb-link);
|
|
}
|
|
|
|
.anomalous-audio-nav-clip-tag {
|
|
flex-shrink: 0;
|
|
color: var(--amb-link);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-audio-nav-clip-text {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--amb-text-dim);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-audio-nav-empty {
|
|
padding: 10px 16px;
|
|
color: var(--amb-text-dim);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.anomalous-audio-nav-list.is-file-dragover {
|
|
outline: 2px dashed color-mix(in srgb, var(--amb-link) 60%, transparent);
|
|
outline-offset: -4px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.anomalous-audio-nav-character.is-file-target > .anomalous-audio-nav-item {
|
|
background: color-mix(in srgb, var(--amb-link) 20%, transparent);
|
|
box-shadow: inset 0 0 0 1px var(--amb-link);
|
|
}
|
|
|
|
.anomalous-audio-sidebar-settings {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 2px;
|
|
flex-shrink: 0;
|
|
margin: 0;
|
|
padding: 10px 16px;
|
|
border: none;
|
|
border-top: 1px solid var(--amb-border);
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-audio-sidebar-settings:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.04);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
/* Amber: pretrained files worth a look (dismissable); red: missing Python packages. */
|
|
.anomalous-audio-sidebar-settings-dot {
|
|
flex-shrink: 0;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: #f59e0b;
|
|
}
|
|
|
|
.anomalous-audio-sidebar-settings.is-blocked .anomalous-audio-sidebar-settings-dot {
|
|
background: var(--amb-danger);
|
|
}
|
|
|
|
.anomalous-audio-sidebar-settings-busy {
|
|
padding-left: 21px;
|
|
color: var(--amb-link);
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* Audio Voice Ingestion Modal */
|
|
.anomalous-voice-modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: var(--amb-lt-scrim, rgba(0, 0, 0, 0.75));
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
z-index: 999999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
animation: ambModalFadeIn 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes ambModalFadeIn {
|
|
from { opacity: 0; transform: scale(0.98); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
.anomalous-voice-modal {
|
|
background: var(--amb-bg-panel);
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
width: 520px;
|
|
max-width: 92vw;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px color-mix(in srgb, var(--amb-link) 15%, transparent);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-voice-modal-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--amb-border);
|
|
padding-bottom: 14px;
|
|
}
|
|
|
|
.anomalous-voice-modal-heading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.anomalous-voice-modal-title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.anomalous-voice-modal-subtitle {
|
|
font-size: 12px;
|
|
color: var(--amb-text-muted);
|
|
}
|
|
|
|
.anomalous-voice-modal-close {
|
|
background: none;
|
|
border: none;
|
|
color: var(--amb-text-muted);
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
padding: 4px 8px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.anomalous-voice-modal-close:hover {
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-voice-modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
border-top: 1px solid var(--amb-border);
|
|
padding-top: 14px;
|
|
}
|
|
|
|
.anomalous-voice-modal-cancel {
|
|
background: rgba(var(--amb-ink-rgb), 0.06);
|
|
border: 1px solid var(--amb-border);
|
|
color: var(--amb-text-soft);
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.anomalous-voice-modal-submit {
|
|
background: linear-gradient(135deg, var(--amb-link), var(--amb-link));
|
|
border: none;
|
|
color: var(--amb-lt-surface, #111827); /* --amb-link is a light tint in the dark themes */
|
|
font-weight: 600;
|
|
padding: 8px 20px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
box-shadow: 0 4px 12px color-mix(in srgb, var(--amb-link) 30%, transparent);
|
|
}
|
|
|
|
.anomalous-voice-modal-submit:disabled {
|
|
opacity: 0.6;
|
|
cursor: progress;
|
|
}
|
|
|
|
/* ---------- Drag handles: header = whole character, row = one clip ---------- */
|
|
.anomalous-voice-grip {
|
|
display: inline-flex;
|
|
flex: none;
|
|
color: var(--amb-text-dim);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.anomalous-character-voice-header.is-draggable {
|
|
margin: -6px -8px 0;
|
|
padding: 6px 8px;
|
|
border: 1px dashed transparent;
|
|
border-radius: 10px;
|
|
cursor: grab;
|
|
user-select: none;
|
|
transition: border-color 0.15s ease, background-color 0.15s ease;
|
|
}
|
|
|
|
.anomalous-character-voice-header.is-draggable:hover {
|
|
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
|
|
background: color-mix(in srgb, var(--amb-link) 6%, transparent);
|
|
}
|
|
|
|
.anomalous-character-voice-header.is-draggable:hover .anomalous-voice-grip {
|
|
color: var(--amb-text-soft);
|
|
}
|
|
|
|
.anomalous-character-voice-header.is-draggable:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* ---------- "Not installed" card ---------- */
|
|
.anomalous-audio-install-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
max-width: 560px;
|
|
margin: 28px auto;
|
|
padding: 18px 20px;
|
|
border-radius: 12px;
|
|
border: 1px dashed color-mix(in srgb, var(--amb-link) 40%, transparent);
|
|
background: color-mix(in srgb, var(--amb-link) 5%, transparent);
|
|
color: var(--amb-text-soft);
|
|
font-size: 12.5px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.anomalous-audio-install-title {
|
|
color: var(--amb-text-main);
|
|
font-size: 13.5px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.anomalous-audio-install-how {
|
|
color: var(--amb-text-muted);
|
|
}
|
|
|
|
.anomalous-audio-install-link {
|
|
align-self: flex-start;
|
|
color: var(--amb-link);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
/* ---------- GPT-SoVITS cards ---------- */
|
|
/* Wraps in a narrow card instead of pushing the page sideways. */
|
|
.anomalous-character-voice-actions {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 6px 8px;
|
|
min-width: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.anomalous-audio-tool-btn.is-compact {
|
|
padding: 3px 8px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* ---------- GPT-SoVITS emotion editor ---------- */
|
|
.anomalous-tts-editor {
|
|
width: 680px;
|
|
}
|
|
|
|
.anomalous-tts-status.is-error {
|
|
color: var(--amb-danger);
|
|
}
|
|
|
|
.anomalous-tts-editor-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-tts-section {
|
|
margin-top: 6px;
|
|
color: var(--amb-text-soft);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.anomalous-tts-rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.anomalous-tts-row {
|
|
display: grid;
|
|
grid-template-columns: 110px minmax(0, 1.4fr) auto minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.anomalous-tts-row.is-main {
|
|
grid-template-columns: 110px minmax(0, 1.4fr) auto minmax(0, 1fr);
|
|
}
|
|
|
|
.anomalous-tts-row-name {
|
|
color: var(--amb-link);
|
|
font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
}
|
|
|
|
.anomalous-tts-row input {
|
|
min-width: 0;
|
|
padding: 6px 8px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--amb-border);
|
|
background: var(--amb-lt-sunken, rgba(0, 0, 0, 0.25));
|
|
color: var(--amb-text-main);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-tts-remove,
|
|
.anomalous-tts-add {
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 6px;
|
|
background: rgba(var(--amb-ink-rgb), 0.04);
|
|
color: var(--amb-text-soft);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-tts-remove {
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
|
|
.anomalous-tts-add {
|
|
align-self: flex-start;
|
|
padding: 5px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-tts-hint {
|
|
color: var(--amb-text-dim);
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.anomalous-tts-hint[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* Clip search in Edit emotions (ui_tts_clip_search.js): box, then play, name and line, two uses */
|
|
.anomalous-tts-search {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.anomalous-tts-search-input {
|
|
padding: 7px 10px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--amb-border);
|
|
background: var(--amb-lt-sunken, rgba(0, 0, 0, 0.25));
|
|
color: var(--amb-text-main);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-tts-search-results {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
max-height: 240px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.anomalous-tts-search-row {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto auto;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 6px;
|
|
border-radius: 6px;
|
|
background: rgba(var(--amb-ink-rgb), 0.03);
|
|
}
|
|
|
|
.anomalous-tts-search-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-tts-search-name,
|
|
.anomalous-tts-search-line {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-tts-search-name {
|
|
color: var(--amb-text-main);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-tts-search-line {
|
|
color: var(--amb-text-dim);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.anomalous-tts-search-use {
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 6px;
|
|
background: rgba(var(--amb-ink-rgb), 0.04);
|
|
color: var(--amb-text-soft);
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-tts-search-use:hover {
|
|
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
|
|
color: var(--amb-link);
|
|
}
|
|
|
|
/* Pronunciation table (ui_tts_pronunciation.js): from → to, two listen buttons, remove */
|
|
.anomalous-tts-pronounce .anomalous-tts-row {
|
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto auto;
|
|
}
|
|
|
|
.anomalous-tts-arrow {
|
|
color: var(--amb-text-dim);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-tts-listen {
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 6px;
|
|
background: rgba(var(--amb-ink-rgb), 0.04);
|
|
color: var(--amb-text-soft);
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
padding: 4px 8px;
|
|
min-width: 40px;
|
|
}
|
|
|
|
.anomalous-tts-listen:hover,
|
|
.anomalous-tts-listen.is-busy {
|
|
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
|
|
color: var(--amb-link);
|
|
}
|
|
|
|
.anomalous-tts-pronounce-language {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: var(--amb-text-soft);
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.anomalous-tts-row,
|
|
.anomalous-tts-row.is-main,
|
|
.anomalous-tts-pronounce .anomalous-tts-row {
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
}
|