🔥 Primary Red Add Button + Static Rarity Shadows
🎨 Add Button Color Update: - Changed main add button from wood brown to ember red - Updated 'Own' option to match ember red theme - Added static ember red shadow with ring effect - Consistent fire-themed primary action color ⚡ Performance: Removed All Pulsing Animations: - Eliminated mythic-pulse animation (3s infinite) - Eliminated rare-pulse animation (2.5s infinite) - Eliminated uncommon-pulse animation (2s infinite) - Eliminated enchanted-pulse animation (2s infinite) - Removed all @keyframes pulse definitions ✨ Static Rarity Shadow System: - Mythic/Legendary: Enhanced golden glow (static) - Rare: Enhanced purple glow (static) - Uncommon: Enhanced blue glow (static) - Enchanted: Multi-color rainbow glow (static) - All shadows now use consistent opacity levels 🚀 Performance Benefits: - Eliminated continuous CSS animations on every card - Reduced GPU usage from constant pulse effects - Smoother scrolling and hover interactions - Better battery life on mobile devices - Cleaner, more professional appearance 🎯 Visual Improvements: - More vibrant static shadows than pulsing minimums - Consistent visual hierarchy with static effects - Primary red add button stands out appropriately - Cleaner, less distracting card presentation The cards page should now be much more performant without the constant pulsing animations! 🔥⚡
This commit is contained in:
Randall Stillwell
parent
cf148f5fa3
commit
d3e4980b8f
2 changed files with 15 additions and 82 deletions
|
|
@ -54,7 +54,7 @@ function ExpandingAddButton({ card, onAddToCollection, onAddToDeck, onMarkAsOwne
|
|||
<button
|
||||
onClick={(e) => handleOptionClick(e, onMarkAsOwned)}
|
||||
className="p-1.5 rounded-md shadow-lg transition-all duration-150 hover:scale-105 flex items-center space-x-1 text-xs whitespace-nowrap"
|
||||
style={{ backgroundColor: 'var(--accent-wood)', color: 'white' }}
|
||||
style={{ backgroundColor: 'var(--accent-ember)', color: 'white' }}
|
||||
title="Mark as Owned"
|
||||
>
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
|
@ -70,8 +70,9 @@ function ExpandingAddButton({ card, onAddToCollection, onAddToDeck, onMarkAsOwne
|
|||
onClick={handleMainClick}
|
||||
className="p-1.5 rounded-md shadow-lg transition-all duration-150 hover:scale-105 relative"
|
||||
style={{
|
||||
backgroundColor: isExpanded ? 'var(--accent-ember)' : 'var(--accent-wood)',
|
||||
color: 'white'
|
||||
backgroundColor: 'var(--accent-ember)',
|
||||
color: 'white',
|
||||
boxShadow: '0 0 0 2px var(--accent-ember), 0 4px 6px -1px rgba(216, 67, 21, 0.3)'
|
||||
}}
|
||||
title={isExpanded ? "Add to Collection" : "Show Options"}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -463,25 +463,9 @@ body {
|
|||
/* Mythic/Legendary - Golden glow */
|
||||
.rarity-glow-mythic {
|
||||
box-shadow:
|
||||
0 0 20px rgba(251, 191, 36, 0.4),
|
||||
0 0 40px rgba(251, 191, 36, 0.3),
|
||||
0 0 60px rgba(251, 191, 36, 0.2);
|
||||
animation: mythic-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes mythic-pulse {
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
0 0 20px rgba(251, 191, 36, 0.4),
|
||||
0 0 40px rgba(251, 191, 36, 0.3),
|
||||
0 0 60px rgba(251, 191, 36, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 30px rgba(251, 191, 36, 0.6),
|
||||
0 0 60px rgba(251, 191, 36, 0.4),
|
||||
0 0 90px rgba(251, 191, 36, 0.3);
|
||||
}
|
||||
0 0 25px rgba(251, 191, 36, 0.5),
|
||||
0 0 50px rgba(251, 191, 36, 0.35),
|
||||
0 0 75px rgba(251, 191, 36, 0.25);
|
||||
}
|
||||
|
||||
.rarity-particles-mythic::before {
|
||||
|
|
@ -503,25 +487,9 @@ body {
|
|||
/* Rare - Purple glow */
|
||||
.rarity-glow-rare {
|
||||
box-shadow:
|
||||
0 0 15px rgba(168, 85, 247, 0.4),
|
||||
0 0 30px rgba(168, 85, 247, 0.3),
|
||||
0 0 45px rgba(168, 85, 247, 0.2);
|
||||
animation: rare-pulse 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes rare-pulse {
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
0 0 15px rgba(168, 85, 247, 0.4),
|
||||
0 0 30px rgba(168, 85, 247, 0.3),
|
||||
0 0 45px rgba(168, 85, 247, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 25px rgba(168, 85, 247, 0.5),
|
||||
0 0 50px rgba(168, 85, 247, 0.4),
|
||||
0 0 75px rgba(168, 85, 247, 0.3);
|
||||
}
|
||||
0 0 20px rgba(168, 85, 247, 0.45),
|
||||
0 0 40px rgba(168, 85, 247, 0.35),
|
||||
0 0 60px rgba(168, 85, 247, 0.25);
|
||||
}
|
||||
|
||||
.rarity-particles-rare::before {
|
||||
|
|
@ -542,22 +510,8 @@ body {
|
|||
/* Uncommon - Blue glow */
|
||||
.rarity-glow-uncommon {
|
||||
box-shadow:
|
||||
0 0 10px rgba(96, 165, 250, 0.3),
|
||||
0 0 20px rgba(96, 165, 250, 0.2);
|
||||
animation: uncommon-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes uncommon-pulse {
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
0 0 10px rgba(96, 165, 250, 0.3),
|
||||
0 0 20px rgba(96, 165, 250, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 15px rgba(96, 165, 250, 0.4),
|
||||
0 0 30px rgba(96, 165, 250, 0.3);
|
||||
}
|
||||
0 0 12px rgba(96, 165, 250, 0.35),
|
||||
0 0 25px rgba(96, 165, 250, 0.25);
|
||||
}
|
||||
|
||||
.rarity-particles-uncommon::before {
|
||||
|
|
@ -577,31 +531,9 @@ body {
|
|||
/* Enchanted/Secret - Pink/Rainbow glow */
|
||||
.rarity-glow-enchanted {
|
||||
box-shadow:
|
||||
0 0 25px rgba(244, 114, 182, 0.5),
|
||||
0 0 50px rgba(244, 114, 182, 0.4),
|
||||
0 0 75px rgba(244, 114, 182, 0.3);
|
||||
animation: enchanted-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes enchanted-pulse {
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
0 0 25px rgba(244, 114, 182, 0.5),
|
||||
0 0 50px rgba(244, 114, 182, 0.4),
|
||||
0 0 75px rgba(244, 114, 182, 0.3);
|
||||
}
|
||||
33% {
|
||||
box-shadow:
|
||||
0 0 30px rgba(168, 85, 247, 0.5),
|
||||
0 0 60px rgba(168, 85, 247, 0.4),
|
||||
0 0 90px rgba(168, 85, 247, 0.3);
|
||||
}
|
||||
66% {
|
||||
box-shadow:
|
||||
0 0 30px rgba(59, 130, 246, 0.5),
|
||||
0 0 60px rgba(59, 130, 246, 0.4),
|
||||
0 0 90px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
0 0 28px rgba(244, 114, 182, 0.5),
|
||||
0 0 55px rgba(168, 85, 247, 0.35),
|
||||
0 0 80px rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
|
||||
.rarity-particles-enchanted::before {
|
||||
|
|
|
|||
Loading…
Reference in a new issue