Align NovelDraw select styling with TTS

This commit is contained in:
henrryyes
2026-01-18 02:20:37 +08:00
parent 0bd3cc57c5
commit 9ebbecaf72

View File

@@ -290,44 +290,48 @@ const STYLES = `
} }
.nd-card { .nd-card {
background: rgba(255, 255, 255, 0.06); background: transparent;
border: 1px solid var(--nd-border-subtle); border: none;
border-radius: var(--nd-radius-md); border-radius: 0;
overflow: hidden; overflow: visible;
} }
.nd-row { display: flex; align-items: center; padding: 2px 0; } .nd-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.nd-label { .nd-label {
width: 36px; font-size: 11px;
padding-left: 10px;
font-size: 10px;
font-weight: 500;
color: var(--nd-text-muted); color: var(--nd-text-muted);
width: 32px;
flex-shrink: 0; flex-shrink: 0;
padding: 0;
} }
.nd-select { .nd-select {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
border: none; background: rgba(255, 255, 255, 0.06);
background: transparent; border: 1px solid var(--nd-border-subtle);
color: var(--nd-text-primary); color: var(--nd-text-primary);
font-size: 12px; font-size: 11px;
padding: 10px 8px; border-radius: 6px;
padding: 6px 8px;
margin: 0;
box-sizing: border-box;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
text-align-last: center; text-align-last: center;
transition: border-color 0.2s;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
} }
.nd-select:hover { color: #fff; } .nd-select:hover { border-color: rgba(255, 255, 255, 0.2); }
.nd-select:focus { border-color: rgba(255, 255, 255, 0.3); }
.nd-select option { background: #1a1a1e; color: #eee; text-align: left; } .nd-select option { background: #1a1a1e; color: #eee; text-align: left; }
.nd-select.size { font-family: "SF Mono", "Menlo", "Consolas", monospace; font-size: 11px; } .nd-select.size { font-family: "SF Mono", "Menlo", "Consolas", monospace; font-size: 10px; }
.nd-inner-sep { .nd-inner-sep { display: none; }
height: 1px;
background: linear-gradient(90deg, transparent 8px, var(--nd-border-subtle) 8px, var(--nd-border-subtle) calc(100% - 8px), transparent calc(100% - 8px));
}
.nd-controls { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .nd-controls { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
@@ -428,13 +432,22 @@ function buildSizeOptions() {
function fillSelectOptions(select, options, currentValue) { function fillSelectOptions(select, options, currentValue) {
if (!select) return; if (!select) return;
select.textContent = ''; select.textContent = '';
const currentStr = currentValue == null ? null : String(currentValue);
let selectedSet = false;
options.forEach((opt) => { options.forEach((opt) => {
const option = document.createElement('option'); const option = document.createElement('option');
option.value = opt.value; const valueStr = String(opt.value);
option.value = valueStr;
option.textContent = opt.label; option.textContent = opt.label;
if (opt.value === currentValue) option.selected = true; if (currentStr !== null && valueStr === currentStr) {
option.selected = true;
selectedSet = true;
}
select.appendChild(option); select.appendChild(option);
}); });
if (!selectedSet && options.length > 0) {
select.selectedIndex = 0;
}
} }
function createPanelElement(messageId) { function createPanelElement(messageId) {
@@ -790,7 +803,7 @@ function updateAllPresetSelects() {
const presets = settings.paramsPresets || []; const presets = settings.paramsPresets || [];
const currentId = settings.selectedParamsPresetId; const currentId = settings.selectedParamsPresetId;
const options = presets.map(p => ({ const options = presets.map(p => ({
value: p.id, value: p.id ?? '',
label: p.name || 'Unnamed', label: p.name || 'Unnamed',
})); }));
panelMap.forEach((data) => { panelMap.forEach((data) => {
@@ -826,7 +839,7 @@ function refreshPresetSelect(messageId) {
const presets = settings.paramsPresets || []; const presets = settings.paramsPresets || [];
const currentId = settings.selectedParamsPresetId; const currentId = settings.selectedParamsPresetId;
const options = presets.map(p => ({ const options = presets.map(p => ({
value: p.id, value: p.id ?? '',
label: p.name || 'Unnamed', label: p.name || 'Unnamed',
})); }));
fillSelectOptions(select, options, currentId); fillSelectOptions(select, options, currentId);