fix(ui): adopt clean FireflySrTool/NeonTeam character card layout and accurate 99 avatars metadata
This commit is contained in:
CAtlas0784 committed
1 parent
9ec9110905
commit
9b5b4087c9
5 files changed
+1659
-708
No files matched your search
+97
-23
@@ -377,40 +377,47 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 220px;
|
||||
min-height: 140px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-width: 1.5px;
|
||||
padding: 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.avatar-card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
/* 5-Star Card Theme */
|
||||
.avatar-card.card-rarity-5 {
|
||||
border-color: rgba(251, 191, 36, 0.4);
|
||||
background: linear-gradient(145deg, rgba(251, 191, 36, 0.05) 0%, rgba(18, 24, 38, 0.8) 100%);
|
||||
border-color: rgba(251, 191, 36, 0.45);
|
||||
background: linear-gradient(145deg, rgba(251, 191, 36, 0.08) 0%, rgba(18, 24, 38, 0.95) 100%);
|
||||
}
|
||||
|
||||
.avatar-card.card-rarity-5:hover {
|
||||
border-color: rgba(251, 191, 36, 0.8);
|
||||
box-shadow: var(--glow-gold);
|
||||
border-color: rgba(251, 191, 36, 0.9);
|
||||
box-shadow: 0 8px 24px rgba(251, 191, 36, 0.25), 0 0 15px rgba(251, 191, 36, 0.15);
|
||||
}
|
||||
|
||||
/* 4-Star Card Theme */
|
||||
.avatar-card.card-rarity-4 {
|
||||
border-color: rgba(192, 132, 252, 0.35);
|
||||
background: linear-gradient(145deg, rgba(192, 132, 252, 0.05) 0%, rgba(18, 24, 38, 0.8) 100%);
|
||||
border-color: rgba(192, 132, 252, 0.4);
|
||||
background: linear-gradient(145deg, rgba(192, 132, 252, 0.08) 0%, rgba(18, 24, 38, 0.95) 100%);
|
||||
}
|
||||
|
||||
.avatar-card.card-rarity-4:hover {
|
||||
border-color: rgba(192, 132, 252, 0.8);
|
||||
box-shadow: var(--glow-purple);
|
||||
border-color: rgba(192, 132, 252, 0.9);
|
||||
box-shadow: 0 8px 24px rgba(192, 132, 252, 0.25), 0 0 15px rgba(192, 132, 252, 0.15);
|
||||
}
|
||||
|
||||
.avatar-badge-rarity {
|
||||
position: absolute;
|
||||
top: 0.85rem;
|
||||
right: 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.15rem 0.5rem;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
font-size: 0.725rem;
|
||||
padding: 0.15rem 0.45rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.05em;
|
||||
@@ -432,6 +439,12 @@ body {
|
||||
display: flex;
|
||||
gap: 0.85rem;
|
||||
align-items: center;
|
||||
margin-right: 2.2rem;
|
||||
}
|
||||
|
||||
.avatar-meta-details {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Circular / Rounded Avatar Portrait */
|
||||
@@ -523,6 +536,53 @@ body {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Avatar Card Footer & Status */
|
||||
.avatar-card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.85rem;
|
||||
padding-top: 0.65rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.avatar-status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
font-size: 0.775rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.avatar-lvl {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.avatar-eidolon {
|
||||
color: #94a3b8;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.avatar-eidolon.e6 {
|
||||
color: #0b0d14;
|
||||
background: linear-gradient(135deg, #fbbf24, #f59e0b);
|
||||
box-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.btn-card-quick-max {
|
||||
padding: 0.25rem 0.65rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Eidolon Selector */
|
||||
.eidolon-selector {
|
||||
display: flex;
|
||||
@@ -537,17 +597,18 @@ body {
|
||||
|
||||
.eidolon-buttons {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
gap: 0.35rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.eidolon-pip {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #cbd5e1;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.825rem;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
@@ -573,12 +634,20 @@ body {
|
||||
}
|
||||
|
||||
.modal-eidolon-pip {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
font-size: 0.95rem;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 1rem;
|
||||
font-weight: 900;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.modal-eidolon-pip.active {
|
||||
background: linear-gradient(135deg, #f59e0b, #fbbf24);
|
||||
border-color: #fbbf24;
|
||||
color: #0b0d14;
|
||||
box-shadow: 0 0 14px rgba(251, 191, 36, 0.6);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Party / Lineup Builder
|
||||
========================================================================== */
|
||||
@@ -805,7 +874,7 @@ input:checked + .slider:before {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
z-index: 10000;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@@ -817,10 +886,15 @@ input:checked + .slider:before {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
max-width: 600px;
|
||||
max-width: 640px;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
z-index: 10001;
|
||||
pointer-events: auto;
|
||||
padding: 1.75rem;
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
|
||||
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user