joseph/mythic-oracle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace NPC alive_status/disposition dropdowns with color-coded status buttons

Browse Source 
Card and modal both use clickable button rows instead of a select and
free-text input, so changing alive_status or disposition no longer
requires the full edit form. The Status section is moved to the top
of both views for quicker access, and disposition buttons (plus the
collapsed card's badge) are color-coded per value, reusing the same
CSS classes in both places.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
claudecode
2026-07-01 19:51:30 -04:00
parent e61328aa4e
commit ea8bd6dc64
2 changed files with 277 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/styles.css
+74
View File
@@ -1516,6 +1516,80 @@ h1, h2, h3, h4, h5, h6 {
white-space: pre-wrap;
}
.npc-status-buttons,
.npc-disposition-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 2px;
}
.npc-status-btn,
.npc-disposition-btn {
padding: 6px 14px;
border: 1px solid var(--border);
border-radius: 3px;
background: var(--bg);
color: var(--text-secondary);
font-family: var(--font-heading);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: border-color var(--transition-speed) ease, color var(--transition-speed) ease, background var(--transition-speed) ease;
}
.npc-status-btn:hover,
.npc-disposition-btn:hover {
color: var(--text-primary);
border-color: var(--accent-hover);
}
.npc-status-btn.active,
.npc-disposition-btn.active {
border-color: var(--accent);
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
/* Disposition color coding — button active state, and the collapsed
card badge (reuses the same rules). May be revised in Phase 11. */
.npc-disposition-btn-unknown.active,
.npc-disposition-badge.npc-disposition-btn-unknown {
border-color: var(--text-muted);
color: var(--text-muted);
background: color-mix(in srgb, var(--text-muted) 12%, transparent);
}
.npc-disposition-btn-hostile.active,
.npc-disposition-badge.npc-disposition-btn-hostile {
border-color: var(--danger);
color: var(--danger);
background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.npc-disposition-btn-indifferent.active,
.npc-disposition-badge.npc-disposition-btn-indifferent {
border-color: var(--info);
color: var(--info);
background: color-mix(in srgb, var(--info) 12%, transparent);
}
.npc-disposition-btn-neutral.active,
.npc-disposition-badge.npc-disposition-btn-neutral {
border-color: var(--accent);
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.npc-disposition-btn-friendly.active,
.npc-disposition-badge.npc-disposition-btn-friendly {
border-color: var(--success);
color: var(--success);
background: color-mix(in srgb, var(--success) 12%, transparent);
}
.npc-card-actions {
display: flex;
gap: 10px;