Align NovelDraw select styling with TTS
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user