mARTin-B78/tts-voice-creator-clone-and-design-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: simplify compact list meta row and update gender badges

Browse Source
This commit is contained in:
mARTin-B78 2026-06-23 10:34:20 +02:00
parent 7a296e4273
commit 7e4c80d784
3 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/index.html
View File

@ -26,7 +26,7 @@
<!-- ── Core styles (local — no CDN dependency for first paint) ────────── --> <!-- ── Core styles (local — no CDN dependency for first paint) ────────── -->
<link rel="stylesheet" href="/static/vendor/mdi/materialdesignicons.min.css"> <link rel="stylesheet" href="/static/vendor/mdi/materialdesignicons.min.css">
<link rel="stylesheet" href="/static/style.css?v=1.8.0-9"> <link rel="stylesheet" href="/static/style.css?v=1.8.0-10">
<!-- ── Flag icons — non-blocking (loaded async, icons appear after JS) ── --> <!-- ── Flag icons — non-blocking (loaded async, icons appear after JS) ── -->

7
static/js/voice-library.js
View File

@ -1861,6 +1861,7 @@ function makeVoiceRow(v) {
const benchCls = benchmarkClass(v); const benchCls = benchmarkClass(v);
const genderMap = {F:'♀', M:'♂', N:'⚥', '':'?'}; const genderMap = {F:'♀', M:'♂', N:'⚥', '':'?'};
const genderMapLetter = {F:'F', M:'M', N:'D', '':'?'};
const genderLabel = {F:'Female', M:'Male', N:'Diverse', '':'—'}; const genderLabel = {F:'Female', M:'Male', N:'Diverse', '':'—'};
const genderClass = {F:'g-f', M:'g-m', N:'g-n', '':'g-n'}; const genderClass = {F:'g-f', M:'g-m', N:'g-n', '':'g-n'};
const gender = v.gender || ''; const gender = v.gender || '';
@ -1904,9 +1905,9 @@ function makeVoiceRow(v) {
? `<input type="text" class="vl-inline-edit vl-name-input" data-field="name" value="${escHtml(dispName)}" title="Display Name" placeholder="Name">` ? `<input type="text" class="vl-inline-edit vl-name-input" data-field="name" value="${escHtml(dispName)}" title="Display Name" placeholder="Name">`
: `<span class="vl-name" title="${escHtml(v.id)}">${escHtml(dispName)}</span>`} : `<span class="vl-name" title="${escHtml(v.id)}">${escHtml(dispName)}</span>`}
<div class="vl-meta"> <div class="vl-meta">
<span class="vl-lang-label" title="${escHtml(currentFlag || langCode)}">${flagEmoji} ${escHtml(langCode)}</span> <span class="vl-lang-label" title="${escHtml(currentFlag || langCode)}">${flagEmoji}</span>
${gender ? `<span class="vl-gender-label ${genderClass[gender]||'g-n'}" title="${genderLabel[gender]||''}">${genderMap[gender]||'?'} ${genderLabel[gender]||''}</span>` : ''} ${gender ? `<span class="vl-gender-letter ${genderClass[gender]||'g-n'}" title="${genderLabel[gender]||''}">${genderMapLetter[gender]||'?'}</span>` : ''}
${benchText !== '-' ? `<span class="vl-bench-chip ${benchCls}" title="${escHtml(benchTitle)}"><span class="mdi mdi-timer-outline"></span> ${escHtml(benchText)}</span>` : ''} ${benchText !== '-' ? `<span class="vl-bench-chip ${benchCls}" title="${escHtml(benchTitle)}"><span class="mdi mdi-timer-outline"></span> ${escHtml(benchText.split(' ')[0])}</span>` : ''}
<div class="vr-rating" style="font-size:13px;min-height:unset">${starsHtml}</div> <div class="vr-rating" style="font-size:13px;min-height:unset">${starsHtml}</div>
<span class="vl-type-label ${isClone ? 'vl-type-clone' : 'vl-type-design'}">${isClone ? 'Clone' : 'Design'}</span> <span class="vl-type-label ${isClone ? 'vl-type-clone' : 'vl-type-design'}">${isClone ? 'Clone' : 'Design'}</span>
</div> </div>

12
static/style.css
View File

@ -1364,10 +1364,14 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
/* Separator dot between type and gender */ /* Separator dot between type and gender */
.vl-type-label + .vl-gender-label::before { content: '·'; color: var(--border); margin-right: 6px; font-weight: 400; } .vl-type-label + .vl-gender-label::before { content: '·'; color: var(--border); margin-right: 6px; font-weight: 400; }
/* Gender label — no background, just colored symbol + text */ /* Gender label — no background, just colored symbol + text */
.vl-gender-label { font-size: 10px; font-weight: 600; } .vl-gender-letter {
.vl-gender-label.g-f { color: #e91e8c; } display: inline-flex; align-items: center; justify-content: center;
.vl-gender-label.g-m { color: #0ea5e9; } width: 16px; height: 16px; border-radius: 4px;
.vl-gender-label.g-n { color: #8b5cf6; } font-weight: 800; font-size: 11px;
}
.vl-gender-letter.g-f { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.vl-gender-letter.g-m { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.vl-gender-letter.g-n { background: rgba(156, 163, 175, 0.15); color: #9ca3af; }
.vl-flag { font-size: 14px; color: var(--subtext); } .vl-flag { font-size: 14px; color: var(--subtext); }
/* Benchmark speed chip — compact list row + inspector header */ /* Benchmark speed chip — compact list row + inspector header */