diff --git a/assets/css/display.css b/assets/css/display.css index 4dc8798..2f88620 100644 --- a/assets/css/display.css +++ b/assets/css/display.css @@ -718,6 +718,63 @@ cursor: pointer; } +.photos-section { + display: flex; + flex-direction: column; + gap: 10px; + margin-bottom: 4px; +} + +.photos-add { + align-self: flex-start; + color: var(--amber); + font-size: var(--type-sm); +} + +.photo-card { + display: grid; + grid-template-columns: 88px minmax(0, 1fr); + gap: 10px; + align-items: start; +} + +.photo-card .slot-thumb--slot { height: 88px; } +.photo-card .slot-thumb--empty { height: 88px; } + +.photo-card-body { + display: flex; + min-width: 0; + flex-direction: column; + gap: 6px; +} + +.photo-role-label { + display: flex; + flex-direction: column; + gap: 4px; +} + +.photo-role-select { + width: 100%; +} + +.slot-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; +} + +.slot-actions button, +.slot-token-btn { + color: var(--amber); + font-size: var(--type-sm); +} + +.slot-token-btn { + font-weight: 600; +} + .placeholder-still { color: var(--muted); font-size: var(--type-sm); diff --git a/components/studio2/AssetSlot.vue b/components/studio2/AssetSlot.vue index 146f028..1c551b9 100644 --- a/components/studio2/AssetSlot.vue +++ b/components/studio2/AssetSlot.vue @@ -1,24 +1,53 @@ diff --git a/components/studio2/Bench.vue b/components/studio2/Bench.vue index e0fd8b6..d504453 100644 --- a/components/studio2/Bench.vue +++ b/components/studio2/Bench.vue @@ -78,43 +78,49 @@