Re-theme the app: token-based CSS and a full face lift
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:
@@ -1,4 +1,4 @@
|
||||
/* --- Scene Play Board Layout --- */
|
||||
/* --- Scene board layout --- */
|
||||
.scene-view-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
@@ -15,7 +15,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
|
||||
border-bottom: 1px solid var(--edge-accent);
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@@ -28,11 +28,49 @@
|
||||
|
||||
.deck-counter {
|
||||
font-size: 0.85rem;
|
||||
color: var(--gold);
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* --- Active Obstacle Item Display --- */
|
||||
/* Scene status banner (captain + roster) */
|
||||
.scene-status-banner {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: var(--well);
|
||||
border: 1px solid var(--edge);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.roster-chips {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.roster-chips .roster-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-heading);
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.roster-chips .player-chip {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 12px;
|
||||
margin: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
/* --- Obstacles --- */
|
||||
.obstacles-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -40,10 +78,10 @@
|
||||
}
|
||||
|
||||
.obstacle-item {
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--edge);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.25rem;
|
||||
background: rgba(7, 11, 18, 0.4);
|
||||
background: var(--well);
|
||||
display: grid;
|
||||
grid-template-columns: 0.8fr 2fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
@@ -51,6 +89,10 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.obstacle-item.in-challenge {
|
||||
box-shadow: 0 0 0 2px var(--danger);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.obstacle-item {
|
||||
grid-template-columns: 0.8fr 2fr 1.5fr;
|
||||
@@ -63,20 +105,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Color theme mappings for suits */
|
||||
.suit-c { border-left: 4px solid var(--black-suit); }
|
||||
.suit-s { border-left: 4px solid var(--black-suit); }
|
||||
.suit-h { border-left: 4px solid var(--red-suit); }
|
||||
.suit-d { border-left: 4px solid var(--red-suit); }
|
||||
/* Suit accent stripes */
|
||||
.suit-c, .suit-s { border-left: 4px solid var(--suit-black); }
|
||||
.suit-h, .suit-d { border-left: 4px solid var(--suit-red); }
|
||||
|
||||
.obstacle-meta {
|
||||
.obstacle-card-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.suit-badge {
|
||||
@@ -84,8 +120,8 @@
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.suit-c .suit-badge, .suit-s .suit-badge { color: var(--black-suit); }
|
||||
.suit-h .suit-badge, .suit-d .suit-badge { color: var(--red-suit); }
|
||||
.suit-c .suit-badge, .suit-s .suit-badge { color: var(--suit-black); }
|
||||
.suit-h .suit-badge, .suit-d .suit-badge { color: var(--suit-red); }
|
||||
|
||||
.card-code {
|
||||
font-size: 0.8rem;
|
||||
@@ -94,10 +130,14 @@
|
||||
}
|
||||
|
||||
.obstacle-details h4 {
|
||||
font-family: var(--font-heading);
|
||||
color: var(--text-primary);
|
||||
color: var(--text);
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.obstacle-details .in-challenge-tag {
|
||||
color: var(--danger);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.obstacle-details .desc {
|
||||
@@ -110,9 +150,9 @@
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(212, 175, 55, 0.04);
|
||||
border: 1px dashed var(--glass-border);
|
||||
border-radius: 6px;
|
||||
background: color-mix(in srgb, var(--accent) 5%, transparent);
|
||||
border: 1px dashed var(--edge-accent);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
@@ -121,14 +161,15 @@
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 255, 135, 0.04);
|
||||
border: 1px dashed rgba(0, 255, 135, 0.25);
|
||||
border-radius: 6px;
|
||||
background: color-mix(in srgb, var(--success) 5%, transparent);
|
||||
border: 1px dashed color-mix(in srgb, var(--success) 30%, transparent);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.obstacle-successes-display .val-number {
|
||||
color: var(--neon-emerald);
|
||||
color: var(--success);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.val-label {
|
||||
@@ -141,22 +182,16 @@
|
||||
font-size: 1.8rem;
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 900;
|
||||
color: var(--gold);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.played-column {
|
||||
grid-column: span 4;
|
||||
border-top: 1px solid rgba(255,255,255,0.05);
|
||||
grid-column: 1 / -1;
|
||||
border-top: 1px solid var(--edge-soft);
|
||||
padding-top: 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.played-column {
|
||||
grid-column: span 1;
|
||||
}
|
||||
}
|
||||
|
||||
.played-column h5 {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
@@ -170,82 +205,64 @@
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* --- Challenges Section --- */
|
||||
.challenges-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
.clear-obstacle-row {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* --- Challenges --- */
|
||||
.challenge-item {
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 8px;
|
||||
padding: 1.25rem;
|
||||
background: color-mix(in srgb, var(--danger) 5%, transparent);
|
||||
border: 1px solid var(--danger);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.challenge-item h4 {
|
||||
font-family: var(--font-heading);
|
||||
color: var(--neon-cyan);
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.25rem;
|
||||
color: var(--danger);
|
||||
font-size: 1.15rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.challenge-item .desc {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.applied-obstacles h5 {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.applied-obs-row {
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
.challenge-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.obs-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.obs-info .symbol {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.play-card-form {
|
||||
.challenge-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select-xsmall {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
width: 140px;
|
||||
background: var(--bg-dark);
|
||||
.tax-callout {
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px dashed var(--accent);
|
||||
border-radius: var(--radius-sm);
|
||||
background: color-mix(in srgb, var(--accent) 6%, transparent);
|
||||
}
|
||||
|
||||
/* --- Deep Control panel --- */
|
||||
.deep-text {
|
||||
color: var(--neon-cyan) !important;
|
||||
.tax-callout p {
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
/* --- Deep control panel --- */
|
||||
.deep-panel-card {
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
border-color: color-mix(in srgb, var(--deep) 40%, transparent);
|
||||
}
|
||||
|
||||
.deep-divider {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, rgba(0, 242, 254, 0), rgba(0, 242, 254, 0.4), rgba(0, 242, 254, 0));
|
||||
background: linear-gradient(to right, transparent, color-mix(in srgb, var(--deep) 40%, transparent), transparent);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
@@ -253,22 +270,28 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
background: var(--well);
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--glass-border);
|
||||
border: 1px solid var(--edge);
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
.objective-player-block {
|
||||
background: var(--well);
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.scene-upkeep-controls {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid var(--edge-soft);
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
/* --- Hand --- */
|
||||
.hand-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
Reference in New Issue
Block a user