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:
1 parent
43e8125d3b
commit
a6728ec535
2 files changed
+24
-1
No files matched your search
+1
-1
@@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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; }
|
||||
Reference in new issue
Block a user