feat(lan-client): port pure-black + violet + neon palette from AI Lab redesign
Apply the same 5-step visual redesign to the LAN client's MTG battlefield theme while preserving functional game colors (mana, felt table, player quadrants p1-p4). - Swap Google Fonts import from Cinzel+Inter to Barlow Condensed + Barlow - Pure black surfaces (#080808 / 0e / 11 / 16 / 1a) - Swap primary accent from blue #5b8dd9 to electric violet #8b5cf6 - Square industrial radii (2/4/6/8px) - Replace all hardcoded 'Cinzel' / 'Inter' with var(--font-display) / var(--font-body) - Pure black top bar with violet underglow shadow - Convert .top-bar-logo "Commander" title from gold to 4-layer violet neon sign with hover brightening - Sweep 42 hardcoded rgba(91,141,217,...) blue values downstream to rgba(139,92,246,...) violet across buttons, zone tabs, stack items, combat UI, etc. MTG functional colors (mana W/U/B/R/G, felt table, player quadrants) remain intact. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
rgriffithandClaude Opus 4.6 committed
1 parent
88c0d94d39
commit
681888adcd
1 file changed
+104
-81
+104
-81
@@ -3,14 +3,15 @@
|
||||
4-Quadrant Battlefield Layout
|
||||
============================================================ */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&display=swap');
|
||||
|
||||
/* ============================================================
|
||||
DESIGN TOKENS
|
||||
============================================================ */
|
||||
:root {
|
||||
--font-display: 'Cinzel', 'Georgia', serif;
|
||||
--font-body: 'Inter', system-ui, sans-serif;
|
||||
/* Typography — bold square fonts */
|
||||
--font-display: 'Barlow Condensed', 'Barlow', sans-serif;
|
||||
--font-body: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
|
||||
--text-xs: 0.72rem;
|
||||
--text-sm: 0.8rem;
|
||||
@@ -30,10 +31,11 @@
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
/* Radius — square everything up */
|
||||
--radius-sm: 2px;
|
||||
--radius-md: 4px;
|
||||
--radius-lg: 6px;
|
||||
--radius-xl: 8px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
@@ -72,24 +74,26 @@
|
||||
--bf-card-h: 84px;
|
||||
--zone-radius: 8px;
|
||||
|
||||
/* Game UI colors */
|
||||
--color-bg: #0d0d1a;
|
||||
--color-surface: #131325;
|
||||
--color-surface-2: #1a1a2e;
|
||||
--color-surface-3: #1f1f38;
|
||||
--color-surface-raised: #252545;
|
||||
--color-border: rgba(255,255,255,0.08);
|
||||
--color-border-strong: rgba(255,255,255,0.15);
|
||||
--color-divider: rgba(255,255,255,0.06);
|
||||
--color-text: #e8e8f0;
|
||||
--color-text-muted: #8888aa;
|
||||
--color-text-faint: #555578;
|
||||
--color-primary: #5b8dd9;
|
||||
--color-primary-hover: #7aaae8;
|
||||
--color-success: #2ecc71;
|
||||
--color-warning: #f39c12;
|
||||
--color-error: #e74c3c;
|
||||
--color-info: #3498db;
|
||||
/* Game UI colors — pure black surfaces, electric violet accent */
|
||||
--color-bg: #080808;
|
||||
--color-surface: #0e0e0e;
|
||||
--color-surface-2: #111111;
|
||||
--color-surface-3: #161616;
|
||||
--color-surface-raised: #1a1a1a;
|
||||
--color-border: rgba(255,255,255,0.06);
|
||||
--color-border-strong: rgba(255,255,255,0.12);
|
||||
--color-divider: rgba(255,255,255,0.04);
|
||||
--color-text: #f0f0f0;
|
||||
--color-text-muted: #888888;
|
||||
--color-text-faint: #555555;
|
||||
--color-primary: #8b5cf6;
|
||||
--color-primary-hover: #a78bfa;
|
||||
--color-primary-dim: rgba(139, 92, 246, 0.12);
|
||||
--color-primary-glow: rgba(139, 92, 246, 0.35);
|
||||
--color-success: #34d399;
|
||||
--color-warning: #f59e0b;
|
||||
--color-error: #f87171;
|
||||
--color-info: #8b5cf6;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
@@ -100,7 +104,7 @@
|
||||
html, body {
|
||||
width: 100%; height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: var(--font-body);
|
||||
background: var(--felt-dark);
|
||||
color: var(--color-text);
|
||||
}
|
||||
@@ -147,24 +151,43 @@ input { font-family: inherit; }
|
||||
top: 0; left: 0; right: 0;
|
||||
z-index: 60;
|
||||
height: 44px;
|
||||
background: rgba(10,10,20,0.92);
|
||||
border-bottom: 1px solid var(--felt-line-strong);
|
||||
background: rgba(8,8,8,0.92); /* pure black, not blue-tinted */
|
||||
border-bottom: 1px solid #222222;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
gap: 8px;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
box-shadow: 0 1px 0 rgba(139,92,246,0.08), 0 4px 24px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.top-bar-logo {
|
||||
font-family: var(--font-display);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--mtg-gold);
|
||||
letter-spacing: 0.1em;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
|
||||
/* Neon purple sign effect */
|
||||
color: #c084fc;
|
||||
text-shadow:
|
||||
0 0 6px #c084fc,
|
||||
0 0 14px #a855f7,
|
||||
0 0 30px #7c3aed,
|
||||
0 0 60px rgba(124, 58, 237, 0.4);
|
||||
transition: text-shadow 150ms var(--ease-out-expo);
|
||||
}
|
||||
|
||||
.top-bar-logo:hover {
|
||||
color: #d8b4fe;
|
||||
text-shadow:
|
||||
0 0 8px #d8b4fe,
|
||||
0 0 20px #c084fc,
|
||||
0 0 40px #a855f7,
|
||||
0 0 80px rgba(168, 85, 247, 0.5);
|
||||
}
|
||||
|
||||
.turn-counter-badge {
|
||||
@@ -293,7 +316,7 @@ input { font-family: inherit; }
|
||||
}
|
||||
|
||||
.btn-phase:hover {
|
||||
background: rgba(91,141,217,0.15);
|
||||
background: rgba(139,92,246,0.15);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
@@ -431,7 +454,7 @@ input { font-family: inherit; }
|
||||
}
|
||||
|
||||
.player-count-btn.active {
|
||||
background: rgba(91,141,217,0.2);
|
||||
background: rgba(139,92,246,0.2);
|
||||
border-color: var(--color-primary);
|
||||
color: #fff;
|
||||
border-width: 2px;
|
||||
@@ -501,7 +524,7 @@ input { font-family: inherit; }
|
||||
.btn-start {
|
||||
width: 100%;
|
||||
padding: 1rem 1.5rem;
|
||||
background: rgba(91,141,217,0.2);
|
||||
background: rgba(139,92,246,0.2);
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
color: var(--color-primary);
|
||||
@@ -514,8 +537,8 @@ input { font-family: inherit; }
|
||||
}
|
||||
|
||||
.btn-start:hover {
|
||||
background: rgba(91,141,217,0.3);
|
||||
box-shadow: 0 0 24px rgba(91,141,217,0.35);
|
||||
background: rgba(139,92,246,0.3);
|
||||
box-shadow: 0 0 24px rgba(139,92,246,0.35);
|
||||
}
|
||||
|
||||
/* Deck selection in setup */
|
||||
@@ -549,7 +572,7 @@ input { font-family: inherit; }
|
||||
}
|
||||
|
||||
.deck-select-btn.selected {
|
||||
background: rgba(91,141,217,0.15);
|
||||
background: rgba(139,92,246,0.15);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
@@ -642,7 +665,7 @@ input { font-family: inherit; }
|
||||
|
||||
/* Player labels */
|
||||
.player-label {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 10px;
|
||||
letter-spacing: 2px;
|
||||
@@ -743,7 +766,7 @@ input { font-family: inherit; }
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-family: 'Cinzel', serif;
|
||||
font-family: var(--font-display);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -760,7 +783,7 @@ input { font-family: inherit; }
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: var(--font-body);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@@ -843,7 +866,7 @@ input { font-family: inherit; }
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-family: 'Cinzel', serif;
|
||||
font-family: var(--font-display);
|
||||
font-size: 10px;
|
||||
letter-spacing: 4px;
|
||||
text-transform: uppercase;
|
||||
@@ -1015,7 +1038,7 @@ input { font-family: inherit; }
|
||||
white-space: nowrap;
|
||||
z-index: 50;
|
||||
pointer-events: none;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
text-transform: none;
|
||||
}
|
||||
@@ -1135,8 +1158,8 @@ input { font-family: inherit; }
|
||||
}
|
||||
|
||||
.battlefield-card.declared-blocker {
|
||||
border-color: rgba(91,141,217,0.8);
|
||||
box-shadow: 0 0 12px rgba(91,141,217,0.4);
|
||||
border-color: rgba(139,92,246,0.8);
|
||||
box-shadow: 0 0 12px rgba(139,92,246,0.4);
|
||||
}
|
||||
|
||||
/* Summoning sick overlay */
|
||||
@@ -1328,7 +1351,7 @@ body.stack-pick-mode .battlefield-card {
|
||||
|
||||
.search-input:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 2px rgba(91,141,217,0.15);
|
||||
box-shadow: 0 0 0 2px rgba(139,92,246,0.15);
|
||||
}
|
||||
|
||||
.search-input::placeholder { color: var(--color-text-faint); }
|
||||
@@ -1396,7 +1419,7 @@ body.stack-pick-mode .battlefield-card {
|
||||
position: absolute;
|
||||
top: 6px; right: 6px;
|
||||
width: 26px; height: 26px;
|
||||
background: rgba(91,141,217,0.85);
|
||||
background: rgba(139,92,246,0.85);
|
||||
border-radius: var(--radius-sm);
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
@@ -1462,7 +1485,7 @@ body.stack-pick-mode .battlefield-card {
|
||||
}
|
||||
|
||||
.context-menu-item:hover {
|
||||
background: rgba(91,141,217,0.12);
|
||||
background: rgba(139,92,246,0.12);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@@ -1844,7 +1867,7 @@ body.stack-pick-mode .battlefield-card {
|
||||
}
|
||||
|
||||
.zone-tab:hover { background: var(--color-surface-3); color: var(--color-text); }
|
||||
.zone-tab.active { background: rgba(91,141,217,0.15); color: var(--color-primary); }
|
||||
.zone-tab.active { background: rgba(139,92,246,0.15); color: var(--color-primary); }
|
||||
|
||||
.zone-modal-body {
|
||||
flex: 1;
|
||||
@@ -1953,7 +1976,7 @@ body.stack-pick-mode .battlefield-card {
|
||||
}
|
||||
|
||||
.btn-dice:hover {
|
||||
background: rgba(91,141,217,0.15);
|
||||
background: rgba(139,92,246,0.15);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
@@ -2098,7 +2121,7 @@ body.stack-pick-mode .battlefield-card {
|
||||
}
|
||||
|
||||
.counter-picker-btn:hover {
|
||||
background: rgba(91,141,217,0.15);
|
||||
background: rgba(139,92,246,0.15);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
@@ -2239,13 +2262,13 @@ body.stack-pick-mode .battlefield-card {
|
||||
transform: translateX(-50%);
|
||||
z-index: 45;
|
||||
background: rgba(10,10,20,0.95);
|
||||
border: 1px solid rgba(91,141,217,0.4);
|
||||
border: 1px solid rgba(139,92,246,0.4);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 8px 16px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
box-shadow: var(--shadow-md), 0 0 20px rgba(91,141,217,0.15);
|
||||
box-shadow: var(--shadow-md), 0 0 20px rgba(139,92,246,0.15);
|
||||
backdrop-filter: blur(8px);
|
||||
min-width: 280px;
|
||||
}
|
||||
@@ -2260,15 +2283,15 @@ body.stack-pick-mode .battlefield-card {
|
||||
|
||||
.btn-priority-pass {
|
||||
padding: 5px 14px;
|
||||
background: rgba(91,141,217,0.2);
|
||||
border: 1px solid rgba(91,141,217,0.4);
|
||||
background: rgba(139,92,246,0.2);
|
||||
border: 1px solid rgba(139,92,246,0.4);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-primary);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn-priority-pass:hover { background: rgba(91,141,217,0.35); }
|
||||
.btn-priority-pass:hover { background: rgba(139,92,246,0.35); }
|
||||
|
||||
/* ============================================================
|
||||
AI THOUGHT BUBBLE
|
||||
@@ -2470,11 +2493,11 @@ kbd {
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: rgba(91,141,217,0.2);
|
||||
background: rgba(139,92,246,0.2);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.btn-primary:hover { background: rgba(91,141,217,0.35); }
|
||||
.btn-primary:hover { background: rgba(139,92,246,0.35); }
|
||||
|
||||
.btn-danger {
|
||||
background: rgba(211,32,42,0.15);
|
||||
@@ -2523,7 +2546,7 @@ kbd {
|
||||
outline: none;
|
||||
width: 100%;
|
||||
resize: vertical;
|
||||
font-family: 'Inter', monospace;
|
||||
font-family: var(--font-body);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -2690,7 +2713,7 @@ kbd {
|
||||
position: absolute;
|
||||
z-index: 26;
|
||||
background: rgba(10,10,20,0.92);
|
||||
border: 1px solid rgba(91,141,217,0.3);
|
||||
border: 1px solid rgba(139,92,246,0.3);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 8px 12px;
|
||||
font-size: 11px;
|
||||
@@ -2702,8 +2725,8 @@ kbd {
|
||||
|
||||
.ai-badge {
|
||||
display: inline-block;
|
||||
background: rgba(91,141,217,0.2);
|
||||
border: 1px solid rgba(91,141,217,0.4);
|
||||
background: rgba(139,92,246,0.2);
|
||||
border: 1px solid rgba(139,92,246,0.4);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 1px 5px;
|
||||
font-size: 9px;
|
||||
@@ -2867,7 +2890,7 @@ kbd {
|
||||
}
|
||||
|
||||
.legal-action-btn:hover {
|
||||
background: rgba(91,141,217,0.15);
|
||||
background: rgba(139,92,246,0.15);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
@@ -2916,7 +2939,7 @@ kbd {
|
||||
|
||||
.precon-card:hover {
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(91,141,217,0.08);
|
||||
background: rgba(139,92,246,0.08);
|
||||
}
|
||||
|
||||
.precon-card-name {
|
||||
@@ -2949,7 +2972,7 @@ kbd {
|
||||
right: 10px;
|
||||
z-index: 500;
|
||||
background: var(--color-surface-2);
|
||||
border: 1px solid rgba(91,141,217,0.3);
|
||||
border: 1px solid rgba(139,92,246,0.3);
|
||||
border-radius: var(--radius-xl);
|
||||
width: 220px;
|
||||
max-height: 320px;
|
||||
@@ -2997,7 +3020,7 @@ kbd {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.stack-item.top-of-stack { border-color: rgba(91,141,217,0.5); background: rgba(91,141,217,0.08); }
|
||||
.stack-item.top-of-stack { border-color: rgba(139,92,246,0.5); background: rgba(139,92,246,0.08); }
|
||||
|
||||
/* ============================================================
|
||||
SETTINGS PANEL
|
||||
@@ -3069,7 +3092,7 @@ kbd {
|
||||
}
|
||||
|
||||
.toggle-switch.on {
|
||||
background: rgba(91,141,217,0.3);
|
||||
background: rgba(139,92,246,0.3);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
@@ -3135,8 +3158,8 @@ kbd {
|
||||
|
||||
.deck-select-ai-badge {
|
||||
font-size: 10px;
|
||||
background: rgba(91,141,217,0.2);
|
||||
color: rgba(91,141,217,0.9);
|
||||
background: rgba(139,92,246,0.2);
|
||||
color: rgba(139,92,246,0.9);
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
font-weight: 600;
|
||||
@@ -3175,8 +3198,8 @@ kbd {
|
||||
}
|
||||
.deck-tab:hover { background: rgba(255,255,255,0.05); }
|
||||
.deck-tab.active {
|
||||
background: rgba(91,141,217,0.15);
|
||||
border-color: rgba(91,141,217,0.3);
|
||||
background: rgba(139,92,246,0.15);
|
||||
border-color: rgba(139,92,246,0.3);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
@@ -3202,7 +3225,7 @@ kbd {
|
||||
outline: none;
|
||||
}
|
||||
.deck-filter-input:focus {
|
||||
border-color: rgba(91,141,217,0.4);
|
||||
border-color: rgba(139,92,246,0.4);
|
||||
}
|
||||
|
||||
.deck-precon-list {
|
||||
@@ -3246,8 +3269,8 @@ kbd {
|
||||
color: var(--color-text);
|
||||
}
|
||||
.deck-precon-item.selected {
|
||||
background: rgba(91,141,217,0.12);
|
||||
border-color: rgba(91,141,217,0.3);
|
||||
background: rgba(139,92,246,0.12);
|
||||
border-color: rgba(139,92,246,0.3);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
@@ -3269,7 +3292,7 @@ kbd {
|
||||
padding: 12px 8px;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: rgba(91,141,217,0.8);
|
||||
color: rgba(139,92,246,0.8);
|
||||
}
|
||||
|
||||
.deck-import-textarea {
|
||||
@@ -3300,8 +3323,8 @@ kbd {
|
||||
background: rgba(255,255,255,0.03);
|
||||
}
|
||||
.backend-status.connected {
|
||||
color: rgba(91,141,217,0.9);
|
||||
background: rgba(91,141,217,0.1);
|
||||
color: rgba(139,92,246,0.9);
|
||||
background: rgba(139,92,246,0.1);
|
||||
}
|
||||
.backend-status.connected-ml {
|
||||
color: rgba(39,174,96,0.9);
|
||||
@@ -3361,8 +3384,8 @@ kbd {
|
||||
|
||||
.epp-ai-badge {
|
||||
font-size: 9px;
|
||||
background: rgba(91,141,217,0.2);
|
||||
color: rgba(91,141,217,0.9);
|
||||
background: rgba(139,92,246,0.2);
|
||||
color: rgba(139,92,246,0.9);
|
||||
padding: 0 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user