variablized colors in the .css, tweaked them. Re-arranged buttons.
This commit is contained in:
parent
252f885b5a
commit
e11a4a091c
|
|
@ -1,11 +1,57 @@
|
|||
/* Modern, clean, and accessible UI styles for Chatterbox TTS */
|
||||
/* CSS Custom Properties - Color Palette */
|
||||
:root {
|
||||
/* Primary Colors */
|
||||
--primary-blue: #163b65;
|
||||
--primary-blue-dark: #357ab8;
|
||||
--primary-blue-darker: #205081;
|
||||
|
||||
/* Background Colors */
|
||||
--bg-body: #f7f9fa;
|
||||
--bg-white: #fff;
|
||||
--bg-light: #f3f5f7;
|
||||
--bg-lighter: #f9fafb;
|
||||
--bg-blue-light: #f3f7fa;
|
||||
--bg-blue-lighter: #eaf1fa;
|
||||
--bg-gray-light: #f7f7f7;
|
||||
|
||||
/* Text Colors */
|
||||
--text-primary: #222;
|
||||
--text-secondary: #2b2b2b;
|
||||
--text-tertiary: #333;
|
||||
--text-white: #fff;
|
||||
--text-blue: #153f6f;
|
||||
--text-blue-dark: #357ab8;
|
||||
--text-blue-darker: #205081;
|
||||
|
||||
/* Border Colors */
|
||||
--border-light: #1b0404;
|
||||
--border-medium: #cfd8dc;
|
||||
--border-blue: #b5c6df;
|
||||
--border-gray: #e3e3e3;
|
||||
|
||||
/* Status Colors */
|
||||
--error-bg: #e74c3c;
|
||||
--error-bg-dark: #c0392b;
|
||||
--warning-bg: #f9e79f;
|
||||
--warning-text: #b7950b;
|
||||
--warning-border: #f7ca18;
|
||||
|
||||
/* Header/Footer */
|
||||
--header-bg: #222e3a;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-light: rgba(44,62,80,0.04);
|
||||
--shadow-medium: rgba(44,62,80,0.06);
|
||||
--shadow-strong: rgba(44,62,80,0.07);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f7f9fa;
|
||||
color: #222;
|
||||
background-color: var(--bg-body);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -15,11 +61,11 @@ body {
|
|||
}
|
||||
|
||||
header {
|
||||
background: #222e3a;
|
||||
color: #fff;
|
||||
background: var(--header-bg);
|
||||
color: var(--text-white);
|
||||
padding: 1.5rem 0 1rem 0;
|
||||
text-align: center;
|
||||
border-bottom: 3px solid #4a90e2;
|
||||
border-bottom: 3px solid var(--primary-blue);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -49,7 +95,6 @@ main {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
#results-display.panel {
|
||||
flex: 1 1 100%;
|
||||
min-width: 0;
|
||||
|
|
@ -60,7 +105,7 @@ main {
|
|||
#dialog-items-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: #fff;
|
||||
background: var(--bg-white);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
font-size: 1rem;
|
||||
|
|
@ -70,23 +115,22 @@ main {
|
|||
|
||||
#dialog-items-table th, #dialog-items-table td {
|
||||
padding: 7px 10px;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--border-light);
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
font-weight: 400;
|
||||
font-weight: 300;
|
||||
font-size: 0.97rem;
|
||||
color: #2b2b2b;
|
||||
color: var(--text-secondary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
/* Widen the Text/Duration column */
|
||||
#dialog-items-table th:nth-child(3), #dialog-items-table td:nth-child(3) {
|
||||
min-width: 240px;
|
||||
width: 40%;
|
||||
font-weight: 400;
|
||||
min-width: 320px;
|
||||
width: 50%;
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -108,7 +152,6 @@ main {
|
|||
padding-right: 0;
|
||||
}
|
||||
|
||||
|
||||
#dialog-items-table th:first-child, #dialog-items-table td.type-icon-cell {
|
||||
width: 44px;
|
||||
min-width: 36px;
|
||||
|
|
@ -131,14 +174,16 @@ main {
|
|||
}
|
||||
|
||||
#dialog-items-table th {
|
||||
background: #f3f7fa;
|
||||
color: #4a90e2;
|
||||
background: var(--bg-light);
|
||||
color: var(--primary-blue);
|
||||
font-weight: 600;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
#dialog-items-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#dialog-items-table td.actions {
|
||||
text-align: center;
|
||||
min-width: 110px;
|
||||
|
|
@ -149,23 +194,26 @@ main {
|
|||
details#generation-log-details {
|
||||
margin-bottom: 0;
|
||||
border-radius: 4px;
|
||||
background: #f3f5f7;
|
||||
box-shadow: 0 1px 3px rgba(44,62,80,0.04);
|
||||
background: var(--bg-light);
|
||||
box-shadow: 0 1px 3px var(--shadow-light);
|
||||
padding: 0 0 0 0;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
|
||||
details#generation-log-details[open] {
|
||||
box-shadow: 0 2px 8px rgba(44,62,80,0.07);
|
||||
background: #f9fafb;
|
||||
box-shadow: 0 2px 8px var(--shadow-strong);
|
||||
background: var(--bg-lighter);
|
||||
}
|
||||
|
||||
details#generation-log-details summary {
|
||||
font-size: 1rem;
|
||||
color: #357ab8;
|
||||
color: var(--text-blue);
|
||||
padding: 10px 0 6px 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
details#generation-log-details summary:focus {
|
||||
outline: 2px solid #4a90e2;
|
||||
outline: 2px solid var(--primary-blue);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -192,9 +240,9 @@ details#generation-log-details summary:focus {
|
|||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
background: var(--bg-white);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(44,62,80,0.07);
|
||||
box-shadow: 0 2px 8px var(--shadow-medium);
|
||||
padding: 18px 20px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
|
@ -214,19 +262,19 @@ h2 {
|
|||
font-size: 1.5rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
color: #4a90e2;
|
||||
color: var(--primary-blue);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.x-remove-btn {
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
background: var(--error-bg);
|
||||
color: var(--text-white);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
|
|
@ -239,15 +287,16 @@ h3 {
|
|||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
margin: 0 3px;
|
||||
box-shadow: 0 1px 2px rgba(44,62,80,0.06);
|
||||
box-shadow: 0 1px 2px var(--shadow-light);
|
||||
outline: none;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.x-remove-btn:hover, .x-remove-btn:focus {
|
||||
background: #c0392b;
|
||||
color: #fff;
|
||||
outline: 2px solid #e74c3c;
|
||||
background: var(--error-bg-dark);
|
||||
color: var(--text-white);
|
||||
outline: 2px solid var(--error-bg);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
|
|
@ -263,9 +312,9 @@ label {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input[type='text'], input[type='file'] {
|
||||
input[type='text'], input[type='file'], textarea {
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #cfd8dc;
|
||||
border: 1px solid var(--border-medium);
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
|
|
@ -273,14 +322,21 @@ input[type='text'], input[type='file'] {
|
|||
}
|
||||
|
||||
input[type='file'] {
|
||||
background: #f7f7f7;
|
||||
background: var(--bg-gray-light);
|
||||
font-size: 0.97rem;
|
||||
}
|
||||
|
||||
.dialog-edit-textarea {
|
||||
min-height: 60px;
|
||||
resize: vertical;
|
||||
font-family: inherit;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 9px 18px;
|
||||
background: #4a90e2;
|
||||
color: #fff;
|
||||
background: var(--primary-blue);
|
||||
color: var(--text-white);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
|
|
@ -291,9 +347,9 @@ button {
|
|||
}
|
||||
|
||||
.generate-line-btn, .play-line-btn {
|
||||
background: #f3f7fa;
|
||||
color: #357ab8;
|
||||
border: 1.5px solid #b5c6df;
|
||||
background: var(--bg-blue-light);
|
||||
color: var(--text-blue);
|
||||
border: 1.5px solid var(--border-blue);
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
|
@ -303,26 +359,29 @@ button {
|
|||
justify-content: center;
|
||||
margin: 0 3px;
|
||||
padding: 0;
|
||||
box-shadow: 0 1px 2px rgba(44,62,80,0.06);
|
||||
box-shadow: 0 1px 2px var(--shadow-light);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.generate-line-btn:disabled, .play-line-btn:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.generate-line-btn.loading {
|
||||
background: #f9e79f;
|
||||
color: #b7950b;
|
||||
border-color: #f7ca18;
|
||||
background: var(--warning-bg);
|
||||
color: var(--warning-text);
|
||||
border-color: var(--warning-border);
|
||||
}
|
||||
|
||||
.generate-line-btn:hover, .play-line-btn:hover {
|
||||
background: #eaf1fa;
|
||||
color: #205081;
|
||||
border-color: #357ab8;
|
||||
background: var(--bg-blue-lighter);
|
||||
color: var(--text-blue-darker);
|
||||
border-color: var(--text-blue);
|
||||
}
|
||||
|
||||
button:hover, button:focus {
|
||||
background: #357ab8;
|
||||
background: var(--primary-blue-dark);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -338,7 +397,7 @@ button:hover, button:focus {
|
|||
|
||||
#speaker-list li {
|
||||
padding: 7px 0;
|
||||
border-bottom: 1px solid #e3e3e3;
|
||||
border-bottom: 1px solid var(--border-gray);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -349,7 +408,7 @@ button:hover, button:focus {
|
|||
}
|
||||
|
||||
pre {
|
||||
background: #f3f5f7;
|
||||
background: var(--bg-light);
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.98rem;
|
||||
|
|
@ -367,8 +426,8 @@ audio {
|
|||
#zip-archive-link {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
color: #fff;
|
||||
background: #4a90e2;
|
||||
color: var(--text-white);
|
||||
background: var(--primary-blue);
|
||||
padding: 7px 16px;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
|
|
@ -377,17 +436,17 @@ audio {
|
|||
}
|
||||
|
||||
#zip-archive-link:hover, #zip-archive-link:focus {
|
||||
background: #357ab8;
|
||||
background: var(--primary-blue-dark);
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
background: #222e3a;
|
||||
color: #fff;
|
||||
background: var(--header-bg);
|
||||
color: var(--text-white);
|
||||
margin-top: 40px;
|
||||
font-size: 1rem;
|
||||
border-top: 3px solid #4a90e2;
|
||||
border-top: 3px solid var(--primary-blue);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
|
@ -422,9 +481,9 @@ footer {
|
|||
}
|
||||
|
||||
.move-up-btn, .move-down-btn {
|
||||
background: #f3f7fa;
|
||||
color: #357ab8;
|
||||
border: 1.5px solid #b5c6df;
|
||||
background: var(--bg-blue-light);
|
||||
color: var(--text-blue);
|
||||
border: 1.5px solid var(--border-blue);
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
|
@ -434,7 +493,7 @@ footer {
|
|||
justify-content: center;
|
||||
margin: 0 3px;
|
||||
padding: 0;
|
||||
box-shadow: 0 1px 2px rgba(44,62,80,0.06);
|
||||
box-shadow: 0 1px 2px var(--shadow-light);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
|
|
@ -446,12 +505,12 @@ footer {
|
|||
}
|
||||
|
||||
.move-up-btn:hover:not(:disabled), .move-down-btn:hover:not(:disabled) {
|
||||
background: #eaf1fa;
|
||||
color: #205081;
|
||||
border-color: #357ab8;
|
||||
background: var(--bg-blue-lighter);
|
||||
color: var(--text-blue-darker);
|
||||
border-color: var(--text-blue);
|
||||
}
|
||||
|
||||
.move-up-btn:focus, .move-down-btn:focus {
|
||||
outline: 2px solid #4a90e2;
|
||||
outline: 2px solid var(--primary-blue);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
<div class="dialog-controls form-row">
|
||||
<button id="add-speech-line-btn">Add Speech Line</button>
|
||||
<button id="add-silence-line-btn">Add Silence Line</button>
|
||||
<button id="generate-dialog-btn">Generate Dialog</button>
|
||||
</div>
|
||||
<div class="dialog-controls form-row">
|
||||
<label for="output-base-name">Output Base Name:</label>
|
||||
|
|
@ -48,7 +49,6 @@
|
|||
<input type="file" id="load-script-input" accept=".jsonl" style="display: none;">
|
||||
<button id="load-script-btn">Load Script</button>
|
||||
</div>
|
||||
<button id="generate-dialog-btn">Generate Dialog</button>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Results below -->
|
||||
|
|
|
|||
|
|
@ -201,13 +201,17 @@ async function initializeDialogEditor() {
|
|||
// Double-click to edit
|
||||
textTd.ondblclick = () => {
|
||||
textTd.innerHTML = '';
|
||||
const input = document.createElement('input');
|
||||
input.className = 'dialog-edit-input';
|
||||
let input;
|
||||
if (item.type === 'speech') {
|
||||
input.type = 'text';
|
||||
// Use textarea for speech text to enable multi-line editing
|
||||
input = document.createElement('textarea');
|
||||
input.className = 'dialog-edit-textarea';
|
||||
input.value = item.text;
|
||||
input.size = Math.max(16, item.text.length);
|
||||
input.rows = Math.max(2, Math.ceil(item.text.length / 50)); // Auto-size based on content
|
||||
} else {
|
||||
// Use number input for duration
|
||||
input = document.createElement('input');
|
||||
input.className = 'dialog-edit-input';
|
||||
input.type = 'number';
|
||||
input.value = item.duration;
|
||||
input.min = 0.1;
|
||||
|
|
@ -215,10 +219,14 @@ async function initializeDialogEditor() {
|
|||
}
|
||||
input.onblur = saveEdit;
|
||||
input.onkeydown = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
if (e.key === 'Enter' && item.type === 'silence') {
|
||||
// Only auto-save on Enter for duration inputs
|
||||
input.blur();
|
||||
} else if (e.key === 'Escape') {
|
||||
renderDialogItems();
|
||||
} else if (e.key === 'Enter' && e.ctrlKey && item.type === 'speech') {
|
||||
// Ctrl+Enter to save for speech text
|
||||
input.blur();
|
||||
}
|
||||
};
|
||||
textTd.appendChild(input);
|
||||
|
|
|
|||
|
|
@ -13,3 +13,6 @@ fb84ce1c-f32d-4df9-9673-2c64e9603133:
|
|||
90fcd672-ba84-441a-ac6c-0449a59653bd:
|
||||
name: dummy_speaker
|
||||
sample_path: speaker_samples/90fcd672-ba84-441a-ac6c-0449a59653bd.wav
|
||||
a6387c23-4ca4-42b5-8aaf-5699dbabbdf0:
|
||||
name: Mike
|
||||
sample_path: speaker_samples/a6387c23-4ca4-42b5-8aaf-5699dbabbdf0.wav
|
||||
|
|
|
|||
Loading…
Reference in New Issue