JonathanMcCaffrey/ChronoCCG
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adding vibe hover effect

Browse Source
This commit is contained in:
Jonathan McCaffrey
2026-07-18 16:23:21 -04:00
parent 74f065e0f5
commit 4ce33bdb36
17 changed files with 550 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Chrono/Cloud/Components/Layout/MainLayout.razor
+4
View File
@@ -1,4 +1,5 @@
@inherits LayoutComponentBase
@inject Shared.Services.CardPreviewService PreviewService
<div class="page">
<div class="sidebar">
<NavMenu/>
@@ -9,6 +10,9 @@
<article class="content px-4">
<TelerikRootComponent>
@Body
<Shared.Components.CardPreview />
<Shared.Components.DocDetailModal Doc="@PreviewService.SelectedDoc"
OnClose="@(() => PreviewService.SelectDoc(null))" />
</TelerikRootComponent>
</article>
</main>
Chrono/Shared/Components/CardGrid.razor
+6 -2
View File
@@ -1,4 +1,6 @@
@namespace Shared.Components
@namespace Shared.Components
@inject Shared.Services.CardPreviewService PreviewService
<div class="deck-card-row">
@foreach (var group in Cards.GroupBy(x => x))
@@ -7,7 +9,9 @@
var count = group.Count();
var card = LookupCard(cardName);
<button class="mini-card-btn @(count > 1 ? "is-stacked" : "")"
@onclick="() => SelectCard(card)">
@onclick="() => SelectCard(card)"
@onmouseenter="@(e => PreviewService.Show(card, e.ClientX, e.ClientY))"
@onmouseleave="@(() => PreviewService.Hide())">
<div class="mini-card-stack">
@for (var i = 0; i < (count > 1 ? Math.Min(count, 3) : 1); i++)
{
Chrono/Shared/Components/CardPreview.razor
+29 -12
View File
@@ -1,18 +1,37 @@
@implements IDisposable
@using Shared.Services
@using Model
@inject CardPreviewService PreviewService
@namespace Shared.Components
@if (PreviewService.IsVisible && PreviewService.HoveredCard != null)
{
<div class="card-preview-popup" style="left: @(PreviewService.X + 20)px; top: @(PreviewService.Y)px;">
<div class="preview-content">
<img src="@PreviewService.HoveredCard.ImagePath" alt="@PreviewService.HoveredCard.Name"/>
<div class="preview-info">
<strong>@PreviewService.HoveredCard.Name</strong>
@if (PreviewService.HoveredCard.Cost.HasValue)
<div class="card-preview-container" style="left: @(PreviewService.X + 20)px; top: @(PreviewService.Y - 100)px;">
<div class="card-preview-card">
<img src="@PreviewService.HoveredCard.ImagePath" alt="@PreviewService.HoveredCard.Name" class="preview-image" />
<div class="preview-overlay">
<div class="preview-name">@PreviewService.HoveredCard.Name</div>
<div class="preview-meta">
@if (PreviewService.HoveredCard.Cost.HasValue)
{
<span class="preview-cost"><i class="bi bi-lightning-fill"></i> @PreviewService.HoveredCard.Cost</span>
}
<span class="preview-category">@PreviewService.HoveredCard.Category</span>
</div>
@if (!string.IsNullOrEmpty(PreviewService.HoveredCard.Description))
{
<span class="preview-cost"><i
class="bi bi-lightning-fill"></i> @PreviewService.HoveredCard.Cost</span>
<div class="preview-description">@PreviewService.HoveredCard.Description</div>
}
@if (PreviewService.HoveredCard.Attack.HasValue || PreviewService.HoveredCard.Health.HasValue)
{
<div class="preview-stats">
@if (PreviewService.HoveredCard.Attack.HasValue)
{
<span class="stat-item"><i class="bi bi-shield-shaded"></i> @PreviewService.HoveredCard.Attack</span>
}
@if (PreviewService.HoveredCard.Health.HasValue)
{
<span class="stat-item"><i class="bi bi-heart-fill"></i> @PreviewService.HoveredCard.Health</span>
}
</div>
}
</div>
</div>
@@ -20,7 +39,6 @@
}
@code {
protected override void OnInitialized()
{
PreviewService.OnChange += StateHasChanged;
@@ -30,5 +48,4 @@
{
PreviewService.OnChange -= StateHasChanged;
}
}
Chrono/Shared/Components/CardPreview.razor.css
+80 -20
View File
@@ -1,33 +1,93 @@
.card-preview-popup {
.card-preview-container {
position: fixed;
z-index: 9999;
z-index: 10000;
pointer-events: none;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
padding: 0.5rem;
width: 220px;
transition: opacity 0.15s ease-in-out;
}
.preview-content img {
width: 100%;
height: auto;
border-radius: 4px;
display: block;
margin-bottom: 0.5rem;
.card-preview-card {
width: 280px;
background: #1a1a1a;
border: 2px solid #333;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
animation: previewFadeIn 0.2s ease-out;
}
.preview-info {
.preview-image {
width: 100%;
display: block;
}
.preview-overlay {
padding: 10px;
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.preview-name {
font-weight: bold;
color: white;
font-size: 1.1rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.preview-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
color: var(--text-primary);
font-size: 0.85rem;
margin-top: 4px;
}
.preview-cost {
color: var(--accent);
font-weight: bold;
color: #00d2ff;
}
.preview-category {
color: #aaa;
text-transform: uppercase;
letter-spacing: 1px;
}
.preview-description {
margin-top: 8px;
font-size: 0.85rem;
color: #eee;
line-height: 1.3;
font-style: italic;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 6px;
}
.preview-stats {
display: flex;
gap: 15px;
margin-top: 8px;
padding-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-item {
display: flex;
align-items: center;
gap: 4px;
font-weight: bold;
font-size: 1rem;
}
.stat-item .bi-shield-shaded {
color: #ff4d4d;
}
.stat-item .bi-heart-fill {
color: #2ecc71;
}
@keyframes previewFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
Chrono/Shared/Components/DocDetailModal.razor
+139
View File
@@ -0,0 +1,139 @@
@using System.Text.RegularExpressions
@using Microsoft.AspNetCore.Components.Rendering
@using Model
@namespace Shared.Components
@if (Doc != null)
{
<div class="modal-backdrop" @onclick="HandleBackdropClick"></div>
<div class="generic-detail">
<button class="detail-close" @onclick="HandleClose"><i class="bi bi-x-lg"></i></button>
<div class="detail-layout">
<div class="detail-info">
<div class="detail-header">
@if (!string.IsNullOrEmpty(Doc.Category))
{
<span class="category-badge">@Doc.Category</span>
}
<h2>@Doc.Title</h2>
</div>
@if (!string.IsNullOrWhiteSpace(Doc.Content))
{
<div class="detail-field description">
<div class="markdown-content">
@RenderDescription(Doc.Content)
</div>
</div>
}
</div>
</div>
</div>
}
@code {
[Parameter] public DocData? Doc { get; set; }
[Parameter] public EventCallback OnClose { get; set; }
private void HandleClose()
{
_ = OnClose.InvokeAsync();
}
private void HandleBackdropClick()
{
_ = OnClose.InvokeAsync();
}
private RenderFragment RenderDescription(string content)
{
return builder =>
{
if (string.IsNullOrWhiteSpace(content)) return;
var seq = 0;
var lines = content.Split(['\r', '\n'], StringSplitOptions.None);
var inList = false;
for (var i = 0; i < lines.Length; i++)
{
var line = lines[i];
var trimmedLine = line.Trim();
// Handle Lists
if (trimmedLine.StartsWith("- ") || trimmedLine.StartsWith("* "))
{
if (!inList)
{
builder.OpenElement(seq++, "ul");
inList = true;
}
builder.OpenElement(seq++, "li");
RenderInlines(builder, ref seq, trimmedLine[2..]);
builder.CloseElement();
continue;
}
if (inList)
{
builder.CloseElement();
inList = false;
}
if (!string.IsNullOrWhiteSpace(trimmedLine))
{
builder.OpenElement(seq++, "p");
RenderInlines(builder, ref seq, line);
builder.CloseElement();
}
}
if (inList) builder.CloseElement();
};
}
private void RenderInlines(RenderTreeBuilder builder, ref int seq, string text)
{
var remaining = text;
while (!string.IsNullOrEmpty(remaining))
{
var boldMatch = Regex.Match(remaining, @"\*\*(.*?)\*\*");
var italicMatch = Regex.Match(remaining, @"\*(.*?)\*");
var bestIdx = int.MaxValue;
Match? bestMatch = null;
var matchType = 0; // 1: bold, 2: italic
if (boldMatch.Success && boldMatch.Index < bestIdx)
{
bestIdx = boldMatch.Index;
bestMatch = boldMatch;
matchType = 1;
}
if (italicMatch.Success && italicMatch.Index < bestIdx)
{
bestIdx = italicMatch.Index;
bestMatch = italicMatch;
matchType = 2;
}
if (bestMatch != null)
{
if (bestIdx > 0) builder.AddContent(seq++, remaining[..bestIdx]);
var innerText = bestMatch.Groups[1].Value;
builder.OpenElement(seq++, matchType == 1 ? "strong" : "em");
builder.AddContent(seq++, innerText);
builder.CloseElement();
remaining = remaining[(bestIdx + bestMatch.Length)..];
}
else
{
builder.AddContent(seq++, remaining);
remaining = "";
}
}
}
}
Chrono/Shared/Components/DocDetailModal.razor.css
+76
View File
@@ -0,0 +1,76 @@
.modal-backdrop {
position: fixed;
inset: 0;
z-index: 1060;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
}
.generic-detail {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1070;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 2rem;
max-width: 600px;
width: 90vw;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
color: var(--text-primary);
}
.detail-close {
position: absolute;
top: 1rem;
right: 1rem;
background: rgba(0, 0, 0, 0.3);
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;
transition: all 0.2s;
}
.detail-close:hover {
background: rgba(255, 255, 255, 0.1);
transform: rotate(90deg);
}
.detail-header {
text-align: center;
margin-bottom: 1.5rem;
}
.category-badge {
display: inline-block;
padding: 0.2rem 0.6rem;
background: var(--accent);
color: white;
font-size: 0.75rem;
font-weight: 700;
border-radius: 4px;
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.detail-header h2 {
margin: 0;
font-size: 1.5rem;
font-weight: 800;
}
.markdown-content {
line-height: 1.6;
}
.markdown-content p {
margin-bottom: 1rem;
}
Chrono/Shared/Pages/Agents.razor
+9 -3
View File
@@ -1,4 +1,5 @@
@namespace Shared.Pages
@inject Shared.Services.CardPreviewService PreviewService
@page "/agents"
<PageTitle>Chrono CCG - Agents</PageTitle>
@@ -29,10 +30,15 @@
</GridColumn>
<GridColumn Field="@nameof(CardData.Name)" Title="Card" Width="220px">
<Template>
<div class="agent-name-cell">
<img src="@(((CardData)context).ImagePath)" alt="@(((CardData)context).Name)"
@{
var card = (CardData)context;
}
<div class="agent-name-cell"
@onmouseenter="@(e => PreviewService.Show(card, e.ClientX, e.ClientY))"
@onmouseleave="@(() => PreviewService.Hide())">
<img src="@(card.ImagePath)" alt="@(card.Name)"
class="agent-thumb"/>
<span>@(((CardData)context).Name)</span>
<span>@(card.Name)</span>
</div>
</Template>
</GridColumn>
Chrono/Shared/Pages/DeckDetail.razor
+3 -2
View File
@@ -1,5 +1,6 @@
@namespace Shared.Pages
@inject CardRenderingService CardRenderer
@inject Shared.Services.CardPreviewService PreviewService
@page "/decks/{Name}"
<PageTitle>Chrono CCG - @(deck?.Name ?? "Deck Details")</PageTitle>
@@ -75,7 +76,7 @@
<section class="deck-section description">
<h2><i class="bi bi-chat-quote-fill"></i> Description</h2>
<div class="deck-description">
@CardRenderer.RenderDescription(deck.Description, SelectCard)
@CardRenderer.RenderDescription(deck.Description, SelectCard, doc => PreviewService.SelectDoc(doc), PreviewService)
</div>
</section>
}
@@ -86,7 +87,7 @@
<CardDetailModal Card="selectedCard"
OnClose="CloseDetail"
OnSelectCard="SelectCard"
DescriptionRenderer="@(desc => CardRenderer.RenderDescription(desc, SelectCard))"/>
DescriptionRenderer="@(desc => CardRenderer.RenderDescription(desc, SelectCard, doc => PreviewService.SelectDoc(doc), PreviewService))"/>
@code {
[Parameter] public string Name { get; set; } = "";
Chrono/Shared/Pages/Docs.razor
+5 -1
View File
@@ -1,3 +1,5 @@
@inject Shared.Services.CardRenderingService CardRenderer
@inject Shared.Services.CardPreviewService PreviewService
@namespace Shared.Pages
@page "/docs"
@@ -85,7 +87,9 @@
@if (key == "description")
{
<p class="doc-field-desc">@val</p>
<div class="doc-field-desc">
@CardRenderer.RenderDescription(val, _ => {}, doc => PreviewService.SelectDoc(doc), PreviewService)
</div>
}
else
{
Chrono/Standalone/Pages/SyndicatePairings.razor → Chrono/Shared/Pages/SyndicatePairings.razor
+4 -4
View File
@@ -1,5 +1,5 @@
@page "/syndicate-pairings"
@using Chrono.Components
@namespace Shared.Pages
<HeadContent>
<meta name="description" content="Explore all syndicate pairings in Chrono CCG."/>
@@ -38,9 +38,9 @@
</div>
</div>
<SyndicatePairDialog Doc="selectedDoc" OnClose="ClosePairing" OnNavigate="HandleNavigate"/>
<CardDialog Card="selectedCard" OnClose="CloseCard" OnNavigate="HandleNavigate"/>
<GenericDocDialog Doc="selectedGenericDoc" OnClose="CloseGenericDoc"/>
<Shared.Components.SyndicatePairDialog Doc="selectedDoc" OnClose="ClosePairing" OnNavigate="HandleNavigate"/>
<Shared.Components.CardDetailModal Card="selectedCard" IsVisible="@(selectedCard != null)" OnClose="CloseCard" />
<Shared.Components.DocDetailModal Doc="selectedGenericDoc" OnClose="CloseGenericDoc"/>
@code {
private List<DocData> pairings = [];
Chrono/Shared/Pages/SyndicatePairings.razor.css
+130
View File
@@ -0,0 +1,130 @@
.syndicates-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.syndicates-header {
margin-bottom: 2rem;
text-align: center;
}
.pairings-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.pairing-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
transition: transform var(--transition), box-shadow var(--transition);
cursor: pointer;
}
.pairing-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: var(--accent);
}
.pairing-display {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
width: 100%;
justify-content: center;
}
.syndicate-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
flex: 1;
}
.syn-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 10px currentColor;
}
.syn-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-primary);
}
.pairing-separator {
color: var(--text-muted);
font-size: 0.8rem;
opacity: 0.5;
}
.pairing-info {
border-top: 1px solid var(--border);
padding-top: 0.75rem;
width: 100%;
text-align: center;
}
.pairing-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.syn-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 10px currentColor;
display: inline-block; /* Ensure visibility */
}
/* Syndicate Colors */
.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;
}
}
Chrono/Standalone/Components/Syndicates.razor → Chrono/Shared/Pages/Syndicates.razor
+5 -5
View File
@@ -1,5 +1,5 @@
@page "/syndicates"
@using Chrono.Components
@page "/syndicates"
@namespace Shared.Pages
<HeadContent>
<meta name="description" content="Explore each syndicate in Chrono CCG."/>
@@ -30,9 +30,9 @@
</div>
</div>
<SyndicateDialog Doc="selectedDoc" OnClose="CloseSyndicate" OnNavigate="HandleNavigate"/>
<CardDialog Card="selectedCard" OnClose="CloseCard" OnNavigate="HandleNavigate"/>
<GenericDocDialog Doc="selectedGenericDoc" OnClose="CloseGenericDoc"/>
<Shared.Components.SyndicateDialog Doc="selectedDoc" OnClose="CloseSyndicate" OnNavigate="HandleNavigate"/>
<Shared.Components.CardDetailModal Card="selectedCard" IsVisible="@(selectedCard != null)" OnClose="CloseCard" />
<Shared.Components.DocDetailModal Doc="selectedGenericDoc" OnClose="CloseGenericDoc"/>
@code {
private List<DocData> syndicates = [];
Chrono/Standalone/Components/Syndicates.razor.css → Chrono/Shared/Pages/Syndicates.razor.css
View File
Chrono/Shared/Services/CardPreviewService.cs
+7
View File
@@ -5,6 +5,7 @@ namespace Shared.Services;
public class CardPreviewService
{
public CardData? HoveredCard { get; private set; }
public DocData? SelectedDoc { get; private set; }
public double X { get; private set; }
public double Y { get; private set; }
public bool IsVisible { get; private set; }
@@ -26,6 +27,12 @@ public class CardPreviewService
NotifyStateChanged();
}
public void SelectDoc(DocData? doc)
{
SelectedDoc = doc;
NotifyStateChanged();
}
private void NotifyStateChanged()
{
OnChange?.Invoke();
Chrono/Shared/Services/CardRenderingService.cs
+49 -15
View File
@@ -7,8 +7,9 @@ namespace Shared.Services;
public class CardRenderingService
{
private readonly Dictionary<string, CardData> _cardLookup;
private readonly List<string> _cardNames;
private readonly Regex _nameRegex;
private readonly Dictionary<string, DocData> _docLookup;
private readonly List<string> _allTerms;
private readonly Regex _termRegex;
public CardRenderingService()
{
@@ -20,16 +21,25 @@ public class CardRenderingService
.GroupBy(c => c.Name, StringComparer.OrdinalIgnoreCase)
.ToDictionary(g => g.Key, g => g.First(), StringComparer.OrdinalIgnoreCase);
_cardNames = allCards
.Select(c => c.Name)
var allDocs = DocDatabase.Docs
.Where(d => !string.IsNullOrWhiteSpace(d.Title))
.ToList();
_docLookup = allDocs
.GroupBy(d => d.Title, StringComparer.OrdinalIgnoreCase)
.ToDictionary(g => g.Key, g => g.First(), StringComparer.OrdinalIgnoreCase);
_allTerms = _cardLookup.Keys
.Concat(_docLookup.Keys)
.Distinct(StringComparer.OrdinalIgnoreCase)
.OrderByDescending(n => n.Length)
.ToList();
var pattern = string.Join("|", _cardNames.Select(n => $@"\b{Regex.Escape(n)}\b"));
_nameRegex = new Regex(pattern, RegexOptions.IgnoreCase | RegexOptions.Compiled);
var pattern = string.Join("|", _allTerms.Select(n => $@"\b{Regex.Escape(n)}\b"));
_termRegex = new Regex(pattern, RegexOptions.IgnoreCase | RegexOptions.Compiled);
}
public RenderFragment RenderDescription(string description, Action<CardData?> onCardClick)
public RenderFragment RenderDescription(string description, Action<CardData?> onCardClick, Action<DocData?>? onDocClick = null, CardPreviewService? previewService = null)
{
return builder =>
{
@@ -40,7 +50,7 @@ public class CardRenderingService
{
builder.OpenElement(sequence++, "p");
var matches = _nameRegex.Matches(paragraph);
var matches = _termRegex.Matches(paragraph);
var lastIndex = 0;
foreach (Match match in matches)
@@ -48,14 +58,33 @@ public class CardRenderingService
if (match.Index > lastIndex)
builder.AddContent(sequence++, paragraph.Substring(lastIndex, match.Index - lastIndex));
var cardName = match.Value;
var card = LookupCard(cardName);
var term = match.Value;
var card = LookupCard(term);
var doc = LookupDoc(term);
builder.OpenElement(sequence++, "button");
builder.AddAttribute(sequence++, "class", "inline-card-btn");
builder.AddAttribute(sequence++, "onclick",
EventCallback.Factory.Create(this, () => onCardClick(card)));
builder.AddContent(sequence++, cardName);
if (card != null)
{
builder.AddAttribute(sequence++, "onclick",
EventCallback.Factory.Create(this, () => onCardClick(card)));
if (previewService != null)
{
builder.AddAttribute(sequence++, "onmouseenter",
EventCallback.Factory.Create<Microsoft.AspNetCore.Components.Web.MouseEventArgs>(this, e => previewService.Show(card, e.ClientX, e.ClientY)));
builder.AddAttribute(sequence++, "onmouseleave",
EventCallback.Factory.Create(this, () => previewService.Hide()));
}
}
else if (doc != null && onDocClick != null)
{
builder.AddAttribute(sequence++, "onclick",
EventCallback.Factory.Create(this, () => onDocClick(doc)));
}
builder.AddContent(sequence++, term);
builder.CloseElement();
lastIndex = match.Index + match.Length;
@@ -68,8 +97,13 @@ public class CardRenderingService
};
}
private CardData? LookupCard(string cardName)
private CardData? LookupCard(string name)
{
return _cardLookup.GetValueOrDefault(cardName);
return _cardLookup.GetValueOrDefault(name);
}
private DocData? LookupDoc(string name)
{
return _docLookup.GetValueOrDefault(name);
}
}
Chrono/Standalone/Components/Layout/MainLayout.razor
+4
View File
@@ -1,4 +1,5 @@
@inherits LayoutComponentBase
@inject Shared.Services.CardPreviewService PreviewService
<div class="page">
<div class="sidebar">
<NavMenu/>
@@ -9,6 +10,9 @@
<article class="content px-4">
<TelerikRootComponent>
@Body
<Shared.Components.CardPreview />
<Shared.Components.DocDetailModal Doc="@PreviewService.SelectedDoc"
OnClose="@(() => PreviewService.SelectDoc(null))" />
</TelerikRootComponent>
</article>
</main>
Chrono/Standalone/Pages/SyndicatePairings.razor.css
-244
View File
@@ -1,244 +0,0 @@
.syndicates-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.syndicates-header {
margin-bottom: 2rem;
text-align: center;
}
.pairings-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.pairing-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
transition: transform var(--transition), box-shadow var(--transition);
cursor: pointer;
}
.pairing-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: var(--accent);
}
.pairing-display {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
width: 100%;
justify-content: center;
}
.syndicate-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
flex: 1;
}
.syn-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 10px currentColor;
}
.syn-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-primary);
}
.pairing-separator {
color: var(--text-muted);
font-size: 0.8rem;
opacity: 0.5;
}
.pairing-info {
border-top: 1px solid var(--border);
padding-top: 0.75rem;
width: 100%;
text-align: center;
}
.pairing-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.syn-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 10px currentColor;
display: inline-block; /* Ensure visibility */
}
/* Syndicate Colors */
.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;
}
@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: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 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 */
}
.doc-content {
line-height: 1.7;
color: #e0e0e0; /* Explicit light gray */
font-size: 1rem;
}
.inline-card-ref {
font-weight: 600;
color: var(--accent);
}
.doc-content p {
margin-bottom: 1.25rem;
}
.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;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}