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

Switch to Svelte

Browse Source
This commit is contained in:
Tim McCarthy
2026-06-11 14:39:41 -07:00
parent 29860061c4
commit 58a7e4d4f1
74 changed files with 7144 additions and 2379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
frontend/src/assets/css/scene-play.css Normal file
View File

@@ -0,0 +1,277 @@
/* --- Scene Play Board Layout --- */
.scene-view-layout {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 2rem;
}
@media (max-width: 1100px) {
.scene-view-layout {
grid-template-columns: 1fr;
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
.card-header h3 {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.deck-counter {
font-size: 0.85rem;
color: var(--gold);
font-weight: 700;
}
/* --- Active Obstacle Item Display --- */
.obstacles-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.obstacle-item {
border: 1px solid var(--glass-border);
border-radius: 10px;
padding: 1.25rem;
background: rgba(7, 11, 18, 0.4);
display: grid;
grid-template-columns: 0.8fr 2fr 1fr 1fr;
gap: 1rem;
position: relative;
overflow: hidden;
}
@media (max-width: 768px) {
.obstacle-item {
grid-template-columns: 0.8fr 2fr 1.5fr;
}
}
@media (max-width: 600px) {
.obstacle-item {
grid-template-columns: 1fr;
}
}
/* 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); }
.obstacle-meta {
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 {
font-weight: 900;
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); }
.card-code {
font-size: 0.8rem;
color: var(--text-muted);
font-family: var(--font-heading);
}
.obstacle-details h4 {
font-family: var(--font-heading);
color: var(--text-primary);
margin-bottom: 0.25rem;
font-size: 1.1rem;
}
.obstacle-details .desc {
font-size: 0.85rem;
color: var(--text-muted);
}
.obstacle-value-display {
display: flex;
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;
padding: 0.5rem;
}
.obstacle-successes-display {
display: flex;
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;
padding: 0.5rem;
}
.obstacle-successes-display .val-number {
color: var(--neon-emerald);
}
.val-label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
}
.val-number {
font-size: 1.8rem;
font-family: var(--font-heading);
font-weight: 900;
color: var(--gold);
}
.played-column {
grid-column: span 4;
border-top: 1px solid rgba(255,255,255,0.05);
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);
margin-bottom: 0.5rem;
}
.column-cards-flex {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
/* --- Challenges Section --- */
.challenges-container {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.challenge-item {
background: rgba(255,255,255,0.02);
border: 1px solid var(--glass-border);
border-radius: 8px;
padding: 1.25rem;
text-align: left;
}
.challenge-item h4 {
font-family: var(--font-heading);
color: var(--neon-cyan);
font-size: 1.2rem;
margin-bottom: 0.25rem;
}
.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;
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 {
display: flex;
gap: 0.5rem;
align-items: center;
}
.select-xsmall {
padding: 0.25rem 0.5rem;
font-size: 0.8rem;
width: 140px;
background: var(--bg-dark);
}
/* --- Deep Control panel --- */
.deep-text {
color: var(--neon-cyan) !important;
}
.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));
margin: 2rem 0;
}
.obstacles-checkboxes {
display: flex;
flex-direction: column;
gap: 0.5rem;
background: rgba(0,0,0,0.2);
padding: 1rem;
border-radius: 8px;
max-height: 150px;
overflow-y: auto;
border: 1px solid var(--glass-border);
}
.checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.95rem;
}
.hand-flex {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: flex-start;
}