Use outlined appearance for locked room cards with blue border

This commit is contained in:
Ian Gulliver
2026-02-16 11:43:16 -08:00
parent 265fbb0682
commit fe6350f93e
2 changed files with 4 additions and 2 deletions

View File

@@ -70,7 +70,7 @@
#solver { margin-bottom: 0.75rem; }
#solver-results { margin-top: 0.5rem; }
.room-card { margin-bottom: 0.3rem; }
.room-locked { --border-width: 1px; --border-color: var(--wa-color-brand-50); }
.room-locked { --wa-color-surface-border: var(--wa-color-brand-50); }
.room-label { font-weight: bold; font-size: 0.8rem; margin-bottom: 0.2rem; }
.solver-score { font-size: 0.8rem; margin-top: 0.3rem; color: var(--wa-color-neutral-500); }
.divider { border: none; border-top: 1px solid #909090; margin: 0.75rem 0; }

View File

@@ -427,7 +427,9 @@ document.getElementById('solve-btn').addEventListener('click', async () => {
for (let i = 0; i < sol.rooms.length; i++) {
const key = sol.rooms[i].map(m => m.id).sort((a, b) => a - b).join(',');
const card = document.createElement('wa-card');
card.className = 'room-card' + (lockedRooms.has(key) ? ' room-locked' : '');
const locked = lockedRooms.has(key);
card.className = 'room-card' + (locked ? ' room-locked' : '');
if (locked) card.setAttribute('appearance', 'outlined');
const label = document.createElement('div');
label.className = 'room-label';
label.textContent = 'Room ' + (i + 1);