fix(liste): couleur appliquée sur tout le tab (pas juste un point)
Deploy HouseHub / deploy (push) Successful in 2s

- Tab actif coloré : background + border = couleur choisie, texte blanc
- Tab inactif coloré : border + texte = couleur choisie
- Suppression du .liste-tab-dot inutilisé

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
perco
2026-05-19 22:08:42 +02:00
co-authored by Claude Sonnet 4.6
parent 7b294f300a
commit 6bbee271e3
2 changed files with 15 additions and 13 deletions
+1 -8
View File
@@ -435,15 +435,8 @@
}
.liste-color-swatch-none.active { outline-color: var(--primary, #4361ee); }
/* ── Tab dot + type emoji ──────────────────────────────────────────────────── */
/* ── Tab type emoji ────────────────────────────────────────────────────────── */
.liste-tab-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
display: inline-block;
}
.liste-tab-type { font-size: .85rem; line-height: 1; }
/* ── Category section headers ──────────────────────────────────────────────── */
+14 -5
View File
@@ -253,22 +253,31 @@ function renderTabs() {
container.innerHTML = '';
state.lists.forEach(list => {
const isActive = list.id === state.currentListId;
const tab = document.createElement('div');
tab.className = 'liste-tab' + (list.id === state.currentListId ? ' active' : '');
tab.className = 'liste-tab' + (isActive ? ' active' : '');
tab.dataset.id = list.id;
const dot = list.color ? `<span class="liste-tab-dot" style="background:${esc(list.color)}"></span>` : '';
// Apply custom color to entire tab
if (list.color) {
if (isActive) {
tab.style.cssText = `background:${list.color};border-color:${list.color};color:#fff`;
} else {
tab.style.cssText = `border-color:${list.color};color:${list.color}`;
}
}
const emoji = typeEmoji(list.list_type);
const prefix = emoji ? `<span class="liste-tab-type">${emoji}</span>` : '';
if (list.id === state.currentListId) {
if (isActive) {
tab.innerHTML = `
${dot}${prefix}
${prefix}
<span class="liste-tab-name">${esc(list.name)}</span>
<button class="liste-tab-btn liste-tab-edit" title="Modifier" data-id="${list.id}">✏</button>
`;
} else {
tab.innerHTML = `${dot}${prefix}<span class="liste-tab-name">${esc(list.name)}</span>`;
tab.innerHTML = `${prefix}<span class="liste-tab-name">${esc(list.name)}</span>`;
tab.addEventListener('click', () => switchList(list.id));
}
container.appendChild(tab);