DemonGatanjieuandClaude Opus 5.5
054cb91b9b
Pages made at different times used their own greys (slate here, neutral there) and accents (sky, violet, indigo), and most ignored the Abyssal Scarlet theme. About 1,850 literal colours in web/styles and in CSS and inline styles written from JS now use the --amb-* tokens by what they are for: surfaces, text (new --amb-text-soft and --amb-text-dim), borders (new --amb-border-strong), the primary button, and one accent (new --amb-link, tinted with color-mix). Both themes define the new tokens. Literal colours stay where the colour is the meaning: status, prompt roles, voice emotions, canvas node colours, shadows and overlays; theme override rules are untouched. The share-code dialogs move from inline styles to .anomalous-share-* classes. Stylesheet versions are bumped. Checked: text contrast on every rail page, Prompt Studio, Prompt Notes, Model Sources, settings, model detail and editor, share codes, in both themes; structure check and JS tests pass. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
1502 lines
33 KiB
CSS
1502 lines
33 KiB
CSS
/* GPT-SoVITS settings dialog, import workbench, server path picker and studio file drop.
|
|
Modal shell, fields, chips and buttons come from 11-audio-studio.css. */
|
|
|
|
/* ---------- Settings dialog (opened from the audio sidebar) ---------- */
|
|
.anomalous-voice-modal.anomalous-tts-setup-modal {
|
|
width: 760px;
|
|
}
|
|
|
|
.anomalous-tts-setup {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
margin-top: 12px;
|
|
color: var(--amb-text-soft);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-tts-reminder {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px 12px;
|
|
padding: 8px 10px;
|
|
border-radius: 8px;
|
|
background: rgba(245, 158, 11, 0.07);
|
|
}
|
|
|
|
.anomalous-tts-reminder-text {
|
|
flex: 1 1 260px;
|
|
min-width: 0;
|
|
color: var(--amb-text-main);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Empty GPT-SoVITS studio: the whole area takes dropped files. */
|
|
.anomalous-audio-empty.is-drop {
|
|
margin-top: 4px;
|
|
border: 1.5px dashed rgba(148, 163, 184, 0.25);
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.anomalous-audio-empty-action {
|
|
margin-top: 18px;
|
|
padding: 7px 18px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.anomalous-tts-setup-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.anomalous-tts-setup-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 26px;
|
|
}
|
|
|
|
.anomalous-tts-setup-row.is-package {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.anomalous-tts-setup-path {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--amb-text-main);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-tts-setup-meta {
|
|
flex-shrink: 0;
|
|
color: var(--amb-text-muted);
|
|
}
|
|
|
|
.anomalous-tts-setup-command {
|
|
flex: 1 1 320px;
|
|
min-width: 0;
|
|
padding: 4px 8px;
|
|
border-radius: 6px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
color: var(--amb-text-main);
|
|
font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.anomalous-tts-setup-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.anomalous-tts-setup-notice {
|
|
padding: 8px 10px;
|
|
border-radius: 8px;
|
|
background: rgba(248, 113, 113, 0.08);
|
|
color: #fca5a5;
|
|
}
|
|
|
|
.anomalous-tts-kind {
|
|
flex-shrink: 0;
|
|
padding: 1px 6px;
|
|
border-radius: 4px;
|
|
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
|
|
color: var(--amb-link);
|
|
font-size: 10.5px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-tts-state {
|
|
flex-shrink: 0;
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-tts-state.is-ok { color: #34d399; }
|
|
.anomalous-tts-state.is-busy { color: var(--amb-link); }
|
|
.anomalous-tts-state.is-missing { color: #f59e0b; }
|
|
.anomalous-tts-state.is-error { color: #f87171; cursor: help; }
|
|
|
|
.anomalous-tts-add:disabled,
|
|
.anomalous-tts-remove:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.anomalous-tts-link {
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
color: var(--amb-link);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ---------- Import window ----------
|
|
Empty: one drop area saying what to bring. With files: one card per character,
|
|
one unfolded at a time. Tones: ready green, needed amber, error red, busy blue. */
|
|
.anomalous-voice-modal.anomalous-tts-import {
|
|
position: relative;
|
|
width: 880px;
|
|
height: min(84vh, 800px);
|
|
max-width: 94vw;
|
|
overflow: hidden;
|
|
gap: 14px;
|
|
}
|
|
|
|
.anomalous-tts-import > .anomalous-voice-modal-header,
|
|
.anomalous-tts-import > .anomalous-tts-steps,
|
|
.anomalous-tts-import > .anomalous-voice-modal-footer {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Three steps, so a first-time user knows where they are. */
|
|
.anomalous-tts-steps {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.anomalous-tts-step {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
color: var(--amb-text-dim);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-tts-step:not(:last-child)::after {
|
|
content: "";
|
|
flex: 1;
|
|
height: 1px;
|
|
margin-left: 4px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.anomalous-tts-step-no {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 50%;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.anomalous-tts-step-label {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-tts-step.is-current {
|
|
color: var(--amb-text-main);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-tts-step.is-current .anomalous-tts-step-no {
|
|
border-color: transparent;
|
|
background: linear-gradient(135deg, var(--amb-link), var(--amb-link));
|
|
color: var(--amb-text-main);
|
|
box-shadow: 0 0 0 4px color-mix(in srgb, var(--amb-link) 18%, transparent);
|
|
}
|
|
|
|
.anomalous-tts-step.is-done {
|
|
color: var(--amb-text-muted);
|
|
}
|
|
|
|
.anomalous-tts-step.is-done .anomalous-tts-step-no {
|
|
border-color: rgba(52, 211, 153, 0.5);
|
|
color: #34d399;
|
|
}
|
|
|
|
.anomalous-tts-step.is-done::after {
|
|
background: rgba(52, 211, 153, 0.35);
|
|
}
|
|
|
|
.anomalous-tts-content {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
min-height: 0;
|
|
margin: 0 -6px;
|
|
padding: 0 6px 2px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* ---- the first question: what do you have? ---- */
|
|
.anomalous-tts-header-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.anomalous-tts-help {
|
|
width: 26px;
|
|
height: 26px;
|
|
padding: 0;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-tts-help:hover {
|
|
border-color: var(--amb-link);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-tts-choose {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
width: min(560px, 100%);
|
|
margin: auto;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.anomalous-tts-choose-title {
|
|
margin-bottom: 6px;
|
|
color: var(--amb-text-main);
|
|
font-size: 19px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
|
|
.anomalous-tts-mode {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 16px 18px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 14px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
|
|
}
|
|
|
|
.anomalous-tts-mode:hover:not(:disabled) {
|
|
border-color: color-mix(in srgb, var(--amb-link) 55%, transparent);
|
|
background: color-mix(in srgb, var(--amb-link) 10%, transparent);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.anomalous-tts-mode:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.anomalous-tts-mode-icon {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
|
|
color: var(--amb-link);
|
|
}
|
|
|
|
.anomalous-tts-mode-words {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-tts-mode-title {
|
|
font-size: 14.5px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.anomalous-tts-mode-desc {
|
|
color: var(--amb-text-muted);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.anomalous-tts-mode-go {
|
|
color: var(--amb-text-dim);
|
|
font-size: 22px;
|
|
}
|
|
|
|
.anomalous-tts-pick-character {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 12px 14px;
|
|
border: 1px dashed color-mix(in srgb, var(--amb-link) 35%, transparent);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.anomalous-tts-pick-character[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-tts-pick-character-title {
|
|
color: var(--amb-text-soft);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-tts-pick-character-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
max-height: 160px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.anomalous-tts-pick-character-item {
|
|
padding: 5px 12px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 999px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-tts-pick-character-item:hover {
|
|
border-color: var(--amb-link);
|
|
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
|
|
}
|
|
|
|
.anomalous-tts-toolbar-hint {
|
|
color: var(--amb-text-dim);
|
|
font-size: 11.5px;
|
|
}
|
|
|
|
.anomalous-tts-toolbar [hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* ---- empty: the drop area ---- */
|
|
.anomalous-tts-hero {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 14px;
|
|
padding: 32px 24px;
|
|
border: 2px dashed color-mix(in srgb, var(--amb-link) 35%, transparent);
|
|
border-radius: 18px;
|
|
background:
|
|
radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--amb-link) 12%, transparent), transparent 60%),
|
|
rgba(255, 255, 255, 0.015);
|
|
text-align: center;
|
|
transition: border-color 0.15s ease, background 0.15s ease;
|
|
}
|
|
|
|
.anomalous-tts-hero-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 72px;
|
|
height: 72px;
|
|
border-radius: 50%;
|
|
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
|
|
color: var(--amb-link);
|
|
}
|
|
|
|
.anomalous-tts-hero-title {
|
|
color: var(--amb-text-main);
|
|
font-size: 19px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.anomalous-tts-hero-needs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-tts-hero-need {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
padding: 5px 12px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 999px;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
color: var(--amb-text-dim);
|
|
font-size: 11.5px;
|
|
}
|
|
|
|
.anomalous-tts-hero-need b {
|
|
color: var(--amb-text-main);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-tts-hero-desc {
|
|
max-width: 540px;
|
|
color: var(--amb-text-muted);
|
|
font-size: 12.5px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.anomalous-tts-hero-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.anomalous-tts-hero-buttons .anomalous-voice-modal-submit {
|
|
padding: 10px 26px;
|
|
font-size: 13.5px;
|
|
}
|
|
|
|
.anomalous-tts-hero-local {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
color: var(--amb-text-dim);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-tts-hero-dot {
|
|
color: var(--amb-text-dim);
|
|
}
|
|
|
|
/* Suggested folder layout under the batch drop area. */
|
|
.anomalous-tts-layout {
|
|
width: 100%;
|
|
max-width: 540px;
|
|
color: var(--amb-text-muted);
|
|
font-size: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
.anomalous-tts-layout summary {
|
|
width: fit-content;
|
|
margin: 0 auto;
|
|
color: var(--amb-link);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-tts-layout-tree {
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
gap: 4px 18px;
|
|
margin-top: 10px;
|
|
padding: 10px 14px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 10px;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.anomalous-tts-layout-name {
|
|
color: var(--amb-text-main);
|
|
font-family: ui-monospace, Consolas, monospace;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-tts-layout-note {
|
|
color: var(--amb-text-dim);
|
|
}
|
|
|
|
.anomalous-tts-layout-foot {
|
|
margin: 8px 2px 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Dragging files over the window. */
|
|
.anomalous-tts-drop-cover {
|
|
position: absolute;
|
|
inset: 10px;
|
|
z-index: 5;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 2px dashed var(--amb-link);
|
|
border-radius: 14px;
|
|
background: rgba(20, 23, 34, 0.88);
|
|
color: var(--amb-text-main);
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.anomalous-tts-import.is-dragover .anomalous-tts-drop-cover {
|
|
display: flex;
|
|
}
|
|
|
|
/* ---- with files: toolbar and "add more" menu ---- */
|
|
.anomalous-tts-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-tts-toolbar-title {
|
|
margin-right: auto;
|
|
color: var(--amb-text-main);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.anomalous-tts-ghost {
|
|
padding: 6px 12px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: var(--amb-text-soft);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
|
|
.anomalous-tts-ghost:hover {
|
|
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
|
|
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-tts-ghost.is-large {
|
|
padding: 10px 22px;
|
|
font-size: 13.5px;
|
|
}
|
|
|
|
.anomalous-tts-menu-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.anomalous-tts-menu {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
right: 0;
|
|
z-index: 4;
|
|
display: none;
|
|
flex-direction: column;
|
|
min-width: 240px;
|
|
padding: 6px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 12px;
|
|
background: var(--amb-bg-card);
|
|
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
.anomalous-tts-menu.is-open {
|
|
display: flex;
|
|
}
|
|
|
|
.anomalous-tts-menu-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 8px 10px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: none;
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 12.5px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-tts-menu-item:hover {
|
|
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
|
|
}
|
|
|
|
.anomalous-tts-menu-hint {
|
|
color: var(--amb-text-dim);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.anomalous-tts-note {
|
|
color: var(--amb-text-muted);
|
|
font-size: 11.5px;
|
|
}
|
|
|
|
.anomalous-tts-note:empty {
|
|
display: none;
|
|
}
|
|
|
|
/* ---- character cards ---- */
|
|
.anomalous-tts-cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-tts-card {
|
|
flex-shrink: 0;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.025);
|
|
transition: border-color 0.15s ease, background 0.15s ease;
|
|
}
|
|
|
|
.anomalous-tts-card.is-open {
|
|
border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
|
|
background: color-mix(in srgb, var(--amb-link) 4%, transparent);
|
|
}
|
|
|
|
.anomalous-tts-card.is-drop-target {
|
|
border-color: var(--amb-link);
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--amb-link) 35%, transparent);
|
|
}
|
|
|
|
.anomalous-tts-card[data-tone="done"] {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.anomalous-tts-card-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
padding: 9px 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-tts-card.is-tray .anomalous-tts-card-head {
|
|
cursor: default;
|
|
}
|
|
|
|
.anomalous-tts-card-chevron {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
color: var(--amb-text-dim);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-tts-card-chevron::before {
|
|
content: "";
|
|
width: 7px;
|
|
height: 7px;
|
|
border-right: 2px solid currentColor;
|
|
border-bottom: 2px solid currentColor;
|
|
transform: rotate(-45deg);
|
|
transition: transform 0.15s ease;
|
|
}
|
|
|
|
.anomalous-tts-card.is-open .anomalous-tts-card-chevron::before {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.anomalous-tts-card-avatar {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--amb-link), var(--amb-link));
|
|
color: var(--amb-text-main);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.anomalous-tts-card.is-tray .anomalous-tts-card-avatar {
|
|
background: rgba(251, 191, 36, 0.2);
|
|
color: #fbbf24;
|
|
}
|
|
|
|
.anomalous-tts-card-title {
|
|
display: inline-flex;
|
|
flex: 1 1 auto;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--amb-text-main);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-tts-card-addto {
|
|
color: var(--amb-text-dim);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.anomalous-tts-card-name-input {
|
|
flex: 1 1 auto;
|
|
min-width: 60px;
|
|
padding: 4px 8px;
|
|
margin-left: -8px;
|
|
border: 1px solid transparent;
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.anomalous-tts-card-name-input:hover {
|
|
border-color: var(--amb-border);
|
|
}
|
|
|
|
.anomalous-tts-card-name-input:focus {
|
|
border-color: color-mix(in srgb, var(--amb-link) 60%, transparent);
|
|
background: rgba(0, 0, 0, 0.25);
|
|
outline: none;
|
|
}
|
|
|
|
.anomalous-tts-card-name-input::placeholder {
|
|
color: #fbbf24;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.anomalous-tts-card-pill {
|
|
flex-shrink: 0;
|
|
padding: 2px 9px;
|
|
border-radius: 999px;
|
|
background: rgba(148, 163, 184, 0.12);
|
|
color: var(--amb-text-muted);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-tts-card[data-tone="ready"] .anomalous-tts-card-pill { background: rgba(52, 211, 153, 0.14); color: #34d399; }
|
|
.anomalous-tts-card[data-tone="needed"] .anomalous-tts-card-pill { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }
|
|
.anomalous-tts-card[data-tone="error"] .anomalous-tts-card-pill { background: rgba(248, 113, 113, 0.14); color: #f87171; }
|
|
.anomalous-tts-card[data-tone="busy"] .anomalous-tts-card-pill { background: color-mix(in srgb, var(--amb-link) 14%, transparent); color: var(--amb-link); }
|
|
|
|
.anomalous-tts-card-meta {
|
|
flex-shrink: 0;
|
|
color: var(--amb-text-dim);
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-tts-card-remove,
|
|
.anomalous-tts-file-remove {
|
|
flex-shrink: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: none;
|
|
color: var(--amb-text-dim);
|
|
font-size: 15px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-tts-card-remove:hover,
|
|
.anomalous-tts-file-remove:hover {
|
|
background: rgba(248, 113, 113, 0.12);
|
|
color: #f87171;
|
|
}
|
|
|
|
.anomalous-tts-card-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 2px 14px 14px;
|
|
}
|
|
|
|
.anomalous-tts-card.is-tray {
|
|
border-style: dashed;
|
|
border-color: rgba(251, 191, 36, 0.4);
|
|
background: rgba(251, 191, 36, 0.035);
|
|
}
|
|
|
|
.anomalous-tts-pick {
|
|
padding: 6px 14px;
|
|
border: 1px solid color-mix(in srgb, var(--amb-link) 40%, transparent);
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--amb-link) 14%, transparent);
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-tts-pick:hover {
|
|
background: color-mix(in srgb, var(--amb-link) 26%, transparent);
|
|
}
|
|
|
|
.anomalous-tts-card-section {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 4px 10px;
|
|
}
|
|
|
|
.anomalous-tts-card-section-title {
|
|
color: var(--amb-text-soft);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.anomalous-tts-card-section-hint {
|
|
color: var(--amb-text-dim);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.anomalous-tts-card-files {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.anomalous-tts-card-more {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
/* ---- folded rows: files left out, and the unassigned files of one folder ---- */
|
|
.anomalous-tts-card-fold {
|
|
border: 1px dashed var(--amb-border);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.anomalous-tts-card-fold-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 7px 10px;
|
|
color: var(--amb-text-muted);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-tts-card-fold-label {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-tts-card-fold[open] > .anomalous-tts-card-files {
|
|
padding: 0 8px 8px;
|
|
}
|
|
|
|
/* ---- the checklist: done items ticked and quiet, the next one lit with its button ---- */
|
|
.anomalous-tts-check {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 6px;
|
|
border-radius: 10px;
|
|
background: rgba(0, 0, 0, 0.16);
|
|
}
|
|
|
|
.anomalous-tts-check-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
min-height: 36px;
|
|
padding: 5px 8px;
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
color: var(--amb-text-dim);
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.anomalous-tts-check-mark {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 50%;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.anomalous-tts-check-text {
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-tts-check-actions {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.anomalous-tts-check-item > .anomalous-tts-file {
|
|
flex: 1 1 auto;
|
|
justify-content: flex-end;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.anomalous-tts-check-item > .anomalous-tts-file .anomalous-tts-file-label {
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
.anomalous-tts-check-item.is-done {
|
|
color: var(--amb-text-muted);
|
|
}
|
|
|
|
.anomalous-tts-check-item.is-done .anomalous-tts-check-mark {
|
|
border-color: rgba(52, 211, 153, 0.5);
|
|
background: rgba(52, 211, 153, 0.12);
|
|
color: #34d399;
|
|
}
|
|
|
|
.anomalous-tts-check-item.is-next {
|
|
border-color: color-mix(in srgb, var(--amb-link) 50%, transparent);
|
|
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
|
|
color: var(--amb-text-main);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-tts-check-item.is-next .anomalous-tts-check-mark {
|
|
border-color: transparent;
|
|
background: linear-gradient(135deg, var(--amb-link), var(--amb-link));
|
|
color: var(--amb-text-main);
|
|
box-shadow: 0 0 0 4px color-mix(in srgb, var(--amb-link) 18%, transparent);
|
|
}
|
|
|
|
.anomalous-tts-card[data-tone="error"] .anomalous-tts-check-item.is-next {
|
|
border-color: rgba(248, 113, 113, 0.45);
|
|
background: rgba(248, 113, 113, 0.08);
|
|
}
|
|
|
|
.anomalous-tts-card-clips {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* ---- one file ---- */
|
|
.anomalous-tts-file {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-tts-file.is-audio {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 6px;
|
|
padding: 8px 10px;
|
|
border: 1px solid var(--amb-border);
|
|
border-left: 3px solid rgba(52, 211, 153, 0.7);
|
|
border-radius: 9px;
|
|
background: rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.anomalous-tts-card-files > .anomalous-tts-file:not(.is-audio) {
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 9px;
|
|
background: rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.anomalous-tts-file[data-tone="busy"] { border-left-color: var(--amb-link); }
|
|
.anomalous-tts-file[data-tone="skip"] { border-left-color: #64748b; opacity: 0.7; }
|
|
.anomalous-tts-file[data-tone="idle"] { border-left-color: #475569; }
|
|
|
|
.anomalous-tts-file[data-tone="error"] {
|
|
border-color: rgba(248, 113, 113, 0.4);
|
|
border-left-color: #f87171;
|
|
background: rgba(248, 113, 113, 0.05);
|
|
}
|
|
|
|
.anomalous-tts-file-top,
|
|
.anomalous-tts-file-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-tts-file-bottom {
|
|
padding-left: 34px;
|
|
}
|
|
|
|
.anomalous-tts-file [hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-tts-file-play {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
padding: 0 0 0 2px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: var(--amb-text-soft);
|
|
font-size: 9px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-tts-file-play:hover {
|
|
border-color: var(--amb-link);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
/* The clip being listened to: its button is "stop". */
|
|
.anomalous-tts-file.is-playing {
|
|
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
|
|
background: color-mix(in srgb, var(--amb-link) 8%, transparent);
|
|
}
|
|
|
|
.anomalous-tts-file.is-playing .anomalous-tts-file-play {
|
|
padding: 0;
|
|
border-color: var(--amb-link);
|
|
background: var(--amb-btn-primary-bg);
|
|
color: var(--amb-btn-primary-text);
|
|
}
|
|
|
|
.anomalous-tts-file-play.is-failed {
|
|
border-color: rgba(248, 113, 113, 0.6);
|
|
color: #f87171;
|
|
}
|
|
|
|
.anomalous-tts-file-label {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-tts-file-name {
|
|
overflow: hidden;
|
|
color: var(--amb-text-main);
|
|
font-size: 12.5px;
|
|
font-weight: 600;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-tts-file-meta {
|
|
flex-shrink: 0;
|
|
color: var(--amb-text-dim);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.anomalous-tts-file.is-out-of-range {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.anomalous-tts-file.is-out-of-range .anomalous-tts-file-meta {
|
|
color: #fbbf24;
|
|
}
|
|
|
|
.anomalous-tts-file-state {
|
|
flex-shrink: 1;
|
|
max-width: 180px;
|
|
overflow: hidden;
|
|
color: var(--amb-text-muted);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-tts-file-state:empty {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-tts-file[data-tone="busy"] .anomalous-tts-file-state { color: var(--amb-link); }
|
|
.anomalous-tts-file[data-tone="merge"] .anomalous-tts-file-state { color: #34d399; }
|
|
.anomalous-tts-file[data-tone="error"] .anomalous-tts-file-state { color: #f87171; }
|
|
|
|
.anomalous-tts-file-main {
|
|
flex-shrink: 0;
|
|
padding: 3px 10px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--amb-text-dim);
|
|
font: inherit;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-tts-file-main::before {
|
|
content: "☆ ";
|
|
}
|
|
|
|
.anomalous-tts-file-main:hover:not(:disabled) {
|
|
border-color: rgba(251, 191, 36, 0.5);
|
|
color: #fde68a;
|
|
}
|
|
|
|
.anomalous-tts-file-main.active {
|
|
border-color: rgba(251, 191, 36, 0.6);
|
|
background: rgba(251, 191, 36, 0.14);
|
|
color: #fbbf24;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.anomalous-tts-file-main.active::before {
|
|
content: "★ ";
|
|
}
|
|
|
|
.anomalous-tts-file-main:disabled {
|
|
opacity: 0.35;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.anomalous-tts-file input,
|
|
.anomalous-tts-file-move,
|
|
.anomalous-tts-card-language {
|
|
min-width: 0;
|
|
padding: 5px 8px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 7px;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-tts-file input:focus,
|
|
.anomalous-tts-card-language:focus {
|
|
border-color: color-mix(in srgb, var(--amb-link) 60%, transparent);
|
|
outline: none;
|
|
}
|
|
|
|
.anomalous-tts-file-emotion {
|
|
flex: 0 0 132px;
|
|
}
|
|
|
|
.anomalous-tts-file-emotion:disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.anomalous-tts-file-text {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
/* Where the line came from: amber = a guess from the file name, red dashes = none found. */
|
|
.anomalous-tts-file-text[data-source="filename"] {
|
|
border-color: rgba(251, 191, 36, 0.5);
|
|
}
|
|
|
|
.anomalous-tts-file-text[data-source="none"],
|
|
.anomalous-tts-file-text[data-source="missing"] {
|
|
border-style: dashed;
|
|
border-color: rgba(248, 113, 113, 0.45);
|
|
}
|
|
|
|
.anomalous-tts-file-text.dragover {
|
|
border-color: var(--amb-link);
|
|
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
|
|
}
|
|
|
|
.anomalous-tts-file-move {
|
|
flex: 0 1 auto;
|
|
max-width: 150px;
|
|
padding: 3px 6px;
|
|
border-color: transparent;
|
|
background: transparent;
|
|
color: var(--amb-text-dim);
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Where a file belongs stays quiet until the row is pointed at, except where it is the question. */
|
|
.anomalous-tts-file:hover .anomalous-tts-file-move,
|
|
.anomalous-tts-file-move:focus,
|
|
.anomalous-tts-card.is-tray .anomalous-tts-file-move {
|
|
border-color: var(--amb-border-strong);
|
|
background: rgba(0, 0, 0, 0.25);
|
|
color: var(--amb-text-soft);
|
|
}
|
|
|
|
.anomalous-tts-card.is-tray .anomalous-tts-file-move {
|
|
border-color: rgba(251, 191, 36, 0.5);
|
|
color: #fde68a;
|
|
}
|
|
|
|
/* Line files and language: the quieter things at the bottom of a card. */
|
|
.anomalous-tts-card-extras {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px 20px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid var(--amb-border);
|
|
}
|
|
|
|
.anomalous-tts-card-lines,
|
|
.anomalous-tts-card-lang {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 6px 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-tts-card-lines > .anomalous-tts-file {
|
|
padding: 2px 4px 2px 10px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 999px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.anomalous-tts-card-lines .anomalous-tts-file-meta,
|
|
.anomalous-tts-card-lines .anomalous-tts-file-move {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-tts-card-extra-label {
|
|
color: var(--amb-text-muted);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-tts-card-note {
|
|
color: var(--amb-text-muted);
|
|
font-size: 11.5px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.anomalous-tts-card-problems {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.anomalous-tts-card-problem {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
padding: 6px 10px;
|
|
border-radius: 8px;
|
|
background: rgba(245, 158, 11, 0.08);
|
|
color: #fbbf24;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-tts-card-problem[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-tts-card-problem.is-blocking {
|
|
background: rgba(248, 113, 113, 0.08);
|
|
color: #fca5a5;
|
|
}
|
|
|
|
/* ---- footer ---- */
|
|
.anomalous-tts-footer {
|
|
align-items: center;
|
|
}
|
|
|
|
.anomalous-tts-footer > button {
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Nothing to import yet: the drop area is the whole window. */
|
|
.anomalous-tts-import.is-empty .anomalous-tts-footer {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-tts-footer-info {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.anomalous-tts-footer-summary {
|
|
color: #fbbf24;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-tts-footer-summary[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-tts-footer-path {
|
|
overflow: hidden;
|
|
color: var(--amb-text-dim);
|
|
font-size: 11px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.anomalous-tts-step-label,
|
|
.anomalous-tts-card-meta,
|
|
.anomalous-tts-toolbar-hint {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-tts-check-item {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.anomalous-tts-file-top,
|
|
.anomalous-tts-file-bottom {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.anomalous-tts-file-bottom {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
/* ---------- Server path picker ---------- */
|
|
.anomalous-tts-picker {
|
|
width: 620px;
|
|
}
|
|
|
|
.anomalous-tts-picker-bar {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.anomalous-tts-picker-path {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 6px 8px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 6px;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
color: var(--amb-text-main);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-tts-picker-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 320px;
|
|
overflow-y: auto;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 8px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.anomalous-tts-picker-item {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 10px;
|
|
border: none;
|
|
border-bottom: 1px solid var(--amb-border);
|
|
background: none;
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-tts-picker-item:hover,
|
|
.anomalous-tts-picker-item:focus-visible {
|
|
background: color-mix(in srgb, var(--amb-link) 10%, transparent);
|
|
}
|
|
|
|
.anomalous-tts-picker-icon {
|
|
display: inline-flex;
|
|
color: #fbbf24;
|
|
}
|
|
|
|
.anomalous-tts-picker-name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-tts-picker-meta {
|
|
flex-shrink: 0;
|
|
color: var(--amb-text-dim);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.anomalous-tts-hint.is-error {
|
|
color: #f87171;
|
|
}
|
|
|
|
/* ---------- Dropping files on the studio ---------- */
|
|
.anomalous-audio-studio-wrapper.is-file-dragover {
|
|
position: relative;
|
|
outline: 2px dashed color-mix(in srgb, var(--amb-link) 60%, transparent);
|
|
outline-offset: -2px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.anomalous-audio-studio-wrapper.is-file-dragover::after {
|
|
content: attr(data-drop-hint);
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 50%;
|
|
z-index: 2;
|
|
padding: 6px 14px;
|
|
border-radius: 999px;
|
|
background: var(--amb-btn-primary-bg);
|
|
color: var(--amb-btn-primary-text);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
transform: translateX(-50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.anomalous-character-voice-card.is-just-added {
|
|
animation: ambTtsJustAdded 2.4s ease-out;
|
|
}
|
|
|
|
@keyframes ambTtsJustAdded {
|
|
0%, 40% { box-shadow: 0 0 0 2px #34d399; }
|
|
100% { box-shadow: 0 0 0 2px transparent; }
|
|
}
|
|
|
|
.anomalous-character-voice-card.is-file-target {
|
|
outline: 2px solid var(--amb-link);
|
|
outline-offset: 1px;
|
|
}
|