Repertoire as an aligned two-column checkbox list

The Auto VJ pill style (hidden checkbox, ragged flex wrap) didn't fit
the long clip names: #glb-anims now lays out as a two-column grid with
visible aligned checkboxes, ellipsis on overflow and green accent.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
lucianoandClaude Fable 5 committed 2026-07-31 11:20:42 +02:00
1 parent 43e8125d3b
commit a6728ec535
2 files changed
+24 -1

No files matched your search

+1 -1
View File
@@ -178,7 +178,7 @@ function renderGlbClips(names) {
send({ type: 'glbAnims', names: glbClipSel });
});
l.appendChild(c);
l.appendChild(document.createTextNode(' ' + n));
l.appendChild(document.createTextNode(n));
box.appendChild(l);
});
}
+23
View File
@@ -827,3 +827,26 @@ kbd {
.av-fam { font-size: 11px; padding: 4px 8px; border: 1px solid #444; border-radius: 8px; cursor: pointer; opacity: .75; }
.av-fam.on { border-color: #4caf50; background: rgba(76,175,80,.15); opacity: 1; }
.av-fam input { display: none; }
/* Dance repertoire: a proper aligned two-column checkbox list (the Auto VJ
pill style hides the checkbox and wraps raggedly with long clip names) */
#glb-anims { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
#glb-anims .av-fam {
display: flex;
align-items: center;
gap: 7px;
padding: 5px 8px;
font-size: 11.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#glb-anims .av-fam input {
display: inline-block;
width: 13px;
height: 13px;
margin: 0;
flex: 0 0 auto;
accent-color: #4caf50;
}
#glb-anims .hint-mini { grid-column: 1 / -1; }