Cleanup
This commit is contained in:
@@ -141,7 +141,7 @@
|
||||
<div class="card-shimmer"></div>
|
||||
<img src="@card.ImagePath" alt="@card.Name" loading="lazy"
|
||||
onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22280%22><rect fill=%22%23222244%22 width=%22200%22 height=%22280%22/><text fill=%22%23686888%22 font-size=%2214%22 x=%22100%22 y=%22140%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22>No Image</text></svg>'"/>
|
||||
|
||||
|
||||
@if (card.Cost.HasValue)
|
||||
{
|
||||
<div class="card-cost-badge" title="Cost">@card.Cost</div>
|
||||
@@ -156,7 +156,8 @@
|
||||
|
||||
@if (card.IsImmortalized)
|
||||
{
|
||||
<div class="card-immortalize-badge" title="@(card.IsImmortalized ? "Immortalized" : "Immortalizes")">
|
||||
<div class="card-immortalize-badge"
|
||||
title="@(card.IsImmortalized ? "Immortalized" : "Immortalizes")">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</div>
|
||||
}
|
||||
@@ -169,7 +170,7 @@
|
||||
{
|
||||
<div class="card-description">@card.Description</div>
|
||||
}
|
||||
|
||||
|
||||
@if (card.IsImmortalized && !string.IsNullOrEmpty(card.ImmortalizeFrom))
|
||||
{
|
||||
<div class="card-immortalize-info">
|
||||
@@ -246,7 +247,7 @@
|
||||
private string categoryFilter = "";
|
||||
private string immortalFilter = "";
|
||||
private bool agentLink = true;
|
||||
private HashSet<string> syndicateFilter = [];
|
||||
private readonly HashSet<string> syndicateFilter = [];
|
||||
private string costFilter = "";
|
||||
private string sortBy = "Cost";
|
||||
private bool sortDescending;
|
||||
|
||||
@@ -221,16 +221,39 @@
|
||||
background: var(--bg-elevated);
|
||||
border-color: var(--border);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Syndicate Colors */
|
||||
.syndicate-btn.active.singularity { border-color: #ffffff; color: #ffffff; }
|
||||
.syndicate-btn.active.phasetide { border-color: #2196f3; color: #2196f3; }
|
||||
.syndicate-btn.active.silence { border-color: #9c27b0; color: #9c27b0; }
|
||||
.syndicate-btn.active.lifeblood { border-color: #4caf50; color: #4caf50; }
|
||||
.syndicate-btn.active.sungrace { border-color: #ff9800; color: #ff9800; }
|
||||
.syndicate-btn.active.splintergleam { border-color: #f44336; color: #f44336; }
|
||||
.syndicate-btn.active.singularity {
|
||||
border-color: #ffffff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.syndicate-btn.active.phasetide {
|
||||
border-color: #2196f3;
|
||||
color: #2196f3;
|
||||
}
|
||||
|
||||
.syndicate-btn.active.silence {
|
||||
border-color: #9c27b0;
|
||||
color: #9c27b0;
|
||||
}
|
||||
|
||||
.syndicate-btn.active.lifeblood {
|
||||
border-color: #4caf50;
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.syndicate-btn.active.sungrace {
|
||||
border-color: #ff9800;
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
.syndicate-btn.active.splintergleam {
|
||||
border-color: #f44336;
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.syn-icon {
|
||||
width: 12px;
|
||||
@@ -522,7 +545,7 @@
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
@@ -544,7 +567,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 2.5rem 0.5rem 0.5rem;
|
||||
background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
@@ -560,7 +583,7 @@
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.card-immortalize-info {
|
||||
@@ -589,7 +612,7 @@
|
||||
gap: 0.25rem;
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.9);
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.card-stats-row .stat.attack {
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
@page "/syndicate-pairings"
|
||||
@using Model
|
||||
@using Chrono.Components
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<HeadContent>
|
||||
<meta name="description" content="Explore all syndicate pairings in Chrono CCG."/>
|
||||
@@ -40,9 +38,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SyndicatePairDialog Doc="selectedDoc" OnClose="ClosePairing" OnNavigate="HandleNavigate" />
|
||||
<CardDialog Card="selectedCard" OnClose="CloseCard" OnNavigate="HandleNavigate" />
|
||||
<GenericDocDialog Doc="selectedGenericDoc" OnClose="CloseGenericDoc" />
|
||||
<SyndicatePairDialog Doc="selectedDoc" OnClose="ClosePairing" OnNavigate="HandleNavigate"/>
|
||||
<CardDialog Card="selectedCard" OnClose="CloseCard" OnNavigate="HandleNavigate"/>
|
||||
<GenericDocDialog Doc="selectedGenericDoc" OnClose="CloseGenericDoc"/>
|
||||
|
||||
@code {
|
||||
private List<DocData> pairings = [];
|
||||
@@ -91,6 +89,7 @@
|
||||
{
|
||||
selectedGenericDoc = new DocData { Title = card.Name, Content = card.Description ?? "", Category = card.Category };
|
||||
}
|
||||
|
||||
StateHasChanged();
|
||||
return;
|
||||
}
|
||||
@@ -102,4 +101,5 @@
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -95,123 +95,150 @@
|
||||
}
|
||||
|
||||
/* Syndicate Colors */
|
||||
.singularity { color: #ffffff; }
|
||||
.phasetide { color: #2196f3; }
|
||||
.silence { color: #9c27b0; }
|
||||
.lifeblood { color: #4caf50; }
|
||||
.sungrace { color: #ff9800; }
|
||||
.splintergleam { color: #f44336; }
|
||||
.singularity {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.phasetide {
|
||||
color: #2196f3;
|
||||
}
|
||||
|
||||
.silence {
|
||||
color: #9c27b0;
|
||||
}
|
||||
|
||||
.lifeblood {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.sungrace {
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
.splintergleam {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.pairings-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
.syndicates-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Dialog ── */
|
||||
.pairing-dialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 92vw;
|
||||
max-width: 600px;
|
||||
max-height: 85vh;
|
||||
background: #1a1a1a; /* Explicit dark background */
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
||||
z-index: 1050;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
animation: dialog-enter 0.25s ease-out;
|
||||
}
|
||||
/* ── Dialog ── */
|
||||
.pairing-dialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 92vw;
|
||||
max-width: 600px;
|
||||
max-height: 85vh;
|
||||
background: #1a1a1a; /* Explicit dark background */
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
||||
z-index: 1050;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
animation: dialog-enter 0.25s ease-out;
|
||||
}
|
||||
|
||||
@keyframes dialog-enter {
|
||||
from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
|
||||
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
||||
@keyframes dialog-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0.92);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-close {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-primary);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
transition: all var(--transition);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.dialog-close {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-primary);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
transition: all var(--transition);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.dialog-close:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.dialog-close:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
padding: 2.5rem 1.5rem 1.5rem;
|
||||
background: #252525; /* Explicit slightly lighter dark */
|
||||
border-bottom: 1px solid var(--border);
|
||||
text-align: center;
|
||||
}
|
||||
.dialog-header {
|
||||
padding: 2.5rem 1.5rem 1.5rem;
|
||||
background: #252525; /* Explicit slightly lighter dark */
|
||||
border-bottom: 1px solid var(--border);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog-header h2 {
|
||||
margin: 1.25rem 0 0;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff; /* Explicit white */
|
||||
}
|
||||
.dialog-header h2 {
|
||||
margin: 1.25rem 0 0;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff; /* Explicit white */
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
background: #1a1a1a; /* Explicit dark */
|
||||
}
|
||||
.dialog-body {
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
background: #1a1a1a; /* Explicit dark */
|
||||
}
|
||||
|
||||
.doc-content {
|
||||
line-height: 1.7;
|
||||
color: #e0e0e0; /* Explicit light gray */
|
||||
font-size: 1rem;
|
||||
}
|
||||
.doc-content {
|
||||
line-height: 1.7;
|
||||
color: #e0e0e0; /* Explicit light gray */
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.inline-card-ref {
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
}
|
||||
.inline-card-ref {
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.doc-content p {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.doc-content p {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: 1040;
|
||||
animation: fade-in 0.2s ease-out;
|
||||
}
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: 1040;
|
||||
animation: fade-in 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user