tim.mccarthy/pirats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Re-theme the app: token-based CSS and a full face lift

Browse Source 
CSS refactor: every color, font, radius, and shadow is now defined once
in theme.css; all other styles derive translucent variants with
color-mix(), so re-theming means editing one file. Removed the
duplicate core.css/style.css import chains, dead styles, and the
Bootstrap/Tailwind orphan classes that were silently unstyled
(the main reason the splash page looked broken).

New "Lantern & Brine" look: brass and parchment on a lantern-lit
ink-navy night, Pirata One wordmark with Alegreya SC/Sans body fonts
(self-hosted via fontsource — they were previously referenced but
never loaded), parchment-faced playing cards, and a rebuilt splash
page. Inline color styles in components were replaced with semantic
classes (prompt-box, notice-banner, status chips, etc.), the rulebook's
embedded palette was updated to match, and the leftover Vite favicon
and "frontend" page title were replaced.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
tim.mccarthy
2026-06-12 06:50:00 -07:00
co-authored by Claude Fable 5
parent ba6bf35579
commit 0744893e7b
36 changed files with 1441 additions and 1184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/css/scene-setup.css
+44 -46
View File
@@ -1,4 +1,4 @@
/* --- Scene Setup / Role Choose --- */
/* --- Scene setup / role choice --- */
.setup-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
@@ -22,62 +22,60 @@
.role-btn {
padding: 1.5rem;
font-size: 1.2rem;
background: rgba(255,255,255,0.03);
border: 2px solid rgba(255,255,255,0.1);
background: var(--well);
border: 2px solid var(--edge);
color: var(--text-muted);
}
.role-btn.pirat-btn:hover, .role-btn.pirat-btn.active {
border-color: var(--neon-emerald);
color: var(--text-primary);
background-color: rgba(0,255,135,0.06);
box-shadow: 0 0 15px rgba(0,255,135,0.15);
.role-btn.pirat-btn:hover:not(:disabled), .role-btn.pirat-btn.active {
border-color: var(--pirat);
color: var(--text);
background-color: color-mix(in srgb, var(--pirat) 8%, transparent);
}
.role-btn.deep-btn:hover, .role-btn.deep-btn.active {
border-color: var(--neon-cyan);
color: var(--text-primary);
background-color: rgba(0,242,254,0.06);
box-shadow: 0 0 15px rgba(0,242,254,0.15);
.role-btn.deep-btn:hover:not(:disabled), .role-btn.deep-btn.active {
border-color: var(--deep);
color: var(--text);
background-color: color-mix(in srgb, var(--deep) 8%, transparent);
}
.large-badge {
padding: 0.5rem 2rem;
font-size: 1.5rem;
border-radius: 8px;
.role-badge {
padding: 0.15rem 0.75rem;
border-radius: var(--radius-sm);
font-family: var(--font-heading);
margin-top: 0.5rem;
}
.role-badge.deep {
background: rgba(0, 242, 254, 0.15);
border: 2px solid var(--neon-cyan);
color: var(--neon-cyan);
box-shadow: 0 0 15px rgba(0,242,254,0.1);
}
.role-badge.pirat {
background: rgba(0, 255, 135, 0.15);
border: 2px solid var(--neon-emerald);
color: var(--neon-emerald);
box-shadow: 0 0 15px rgba(0,255,135,0.1);
}
.list-chips {
justify-content: flex-start;
}
.list-chips .player-chip {
padding: 0.4rem 1rem;
font-size: 0.9rem;
}
.deep-chip {
border-color: var(--neon-cyan);
background: rgba(0, 242, 254, 0.03);
.role-badge.deep {
background: color-mix(in srgb, var(--deep) 14%, transparent);
border: 1px solid var(--deep);
color: var(--deep);
}
.pirat-chip {
border-color: var(--neon-emerald);
background: rgba(0, 255, 135, 0.03);
.role-badge.pirat {
background: color-mix(in srgb, var(--pirat) 14%, transparent);
border: 1px solid var(--pirat);
color: var(--pirat);
}
.role-badge.unassigned {
background: var(--well);
border: 1px dashed var(--edge);
color: var(--text-muted);
}
.roster-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.roster-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
background: var(--well);
border-radius: var(--radius-sm);
padding: 0.6rem 0.9rem;
}