X/LittleWhiteBox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align NovelDraw select styling with TTS

Browse Source
This commit is contained in:
henrryyes
2026-01-18 02:20:37 +08:00
parent 0bd3cc57c5
commit 9ebbecaf72
1 changed files with 36 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
modules/novel-draw/floating-panel.js
View File

@@ -290,44 +290,48 @@ const STYLES = `
}
.nd-card {
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--nd-border-subtle);
border-radius: var(--nd-radius-md);
overflow: hidden;
background: transparent;
border: none;
border-radius: 0;
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 {
width: 36px;
padding-left: 10px;
font-size: 10px;
font-weight: 500;
font-size: 11px;
color: var(--nd-text-muted);
width: 32px;
flex-shrink: 0;
padding: 0;
}
.nd-select {
flex: 1;
min-width: 0;
border: none;
background: transparent;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--nd-border-subtle);
color: var(--nd-text-primary);
font-size: 12px;
padding: 10px 8px;
font-size: 11px;
border-radius: 6px;
padding: 6px 8px;
margin: 0;
box-sizing: border-box;
outline: none;
cursor: pointer;
text-align: 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.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 {
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-inner-sep { display: none; }
.nd-controls { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
@@ -428,13 +432,22 @@ function buildSizeOptions() {
function fillSelectOptions(select, options, currentValue) {
if (!select) return;
select.textContent = '';
const currentStr = currentValue == null ? null : String(currentValue);
let selectedSet = false;
options.forEach((opt) => {
const option = document.createElement('option');
option.value = opt.value;
const valueStr = String(opt.value);
option.value = valueStr;
option.textContent = opt.label;
if (opt.value === currentValue) option.selected = true;
if (currentStr !== null && valueStr === currentStr) {
option.selected = true;
selectedSet = true;
}
select.appendChild(option);
});
if (!selectedSet && options.length > 0) {
select.selectedIndex = 0;
}
}
function createPanelElement(messageId) {
@@ -790,7 +803,7 @@ function updateAllPresetSelects() {
const presets = settings.paramsPresets || [];
const currentId = settings.selectedParamsPresetId;
const options = presets.map(p => ({
value: p.id,
value: p.id ?? '',
label: p.name || 'Unnamed',
}));
panelMap.forEach((data) => {
@@ -826,7 +839,7 @@ function refreshPresetSelect(messageId) {
const presets = settings.paramsPresets || [];
const currentId = settings.selectedParamsPresetId;
const options = presets.map(p => ({
value: p.id,
value: p.id ?? '',
label: p.name || 'Unnamed',
}));
fillSelectOptions(select, options, currentId);