/** * Flag Favorite Button Styling * Styles the flag_favourite_content flag link to match the existing button design. */ /* Style the link inside the flag wrapper */ .flag-favourite-content a { display: inline-flex; align-items: center; gap: var(--ks-space-2); padding: var(--ks-space-3) var(--ks-space-6); background: linear-gradient(to right, var(--ks-color-primary-600), var(--ks-color-primary-700)); color: var(--ks-color-text-inverse); font-weight: var(--ks-font-weight-strong); border-radius: var(--ks-radius-md); transition: all 0.3s ease; text-decoration: none; font-size: 1rem; line-height: 1.5; } .flag-favourite-content a:hover { background: linear-gradient(to right, var(--ks-color-primary-700), var(--ks-color-primary-800)); transform: translateY(-1px); box-shadow: var(--ks-shadow-md); } .flag-favourite-content a:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ks-color-primary-500) 50%, transparent); border-radius: var(--ks-radius-md); } /* Add heart icon before text using CSS */ .flag-favourite-content a::before { content: '♡'; /* outline heart when not flagged */ font-size: 1rem; display: inline-block; transition: transform 0.2s ease, color 0.2s ease; } /* Animate heart on hover */ .flag-favourite-content a:hover::before { transform: scale(1.2); } /* When flagged, show filled red heart (but keep button background same) */ .flag-favourite-content.action-unflag a::before { content: '♥'; /* filled heart when flagged */ color: var(--ks-color-danger-500); animation: heartbeat 0.3s ease-in-out; } /* Heart beat animation when favorited */ @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } /* Responsive adjustments */ @media (max-width: 640px) { .flag-favourite-content a { padding: 0.625rem var(--ks-space-5); font-size: 0.875rem; } .flag-favourite-content a::before { font-size: 0.875rem; } } /* Album page specific styling - rounded-full instead of rounded-lg */ .album-detail .flag-favourite-content a { border-radius: var(--ks-radius-full); } /* Loading state during AJAX */ .flag-favourite-content.flag-throbber a { opacity: 0.6; pointer-events: none; } /* Ensure flag message (success/error) styling */ .flag-message { padding: var(--ks-space-3) var(--ks-space-4); border-radius: var(--ks-radius-md); margin: var(--ks-space-2) 0; font-weight: 500; } .flag-message.messages--status { background-color: var(--ks-color-success-100); color: var(--ks-color-success-700); border-left: 4px solid var(--ks-color-success-500); } .flag-message.messages--error { background-color: var(--ks-color-danger-100); color: var(--ks-color-danger-700); border-left: 4px solid var(--ks-color-danger-500); } /* Dark mode: brighter focus ring (site .dark class on ) */ .dark .flag-favourite-content a:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ks-color-primary-400) 50%, transparent); } /* Track list inline favorite buttons - compact styling. Selectors use `.track-favorite-button .flag a` so they outrank the `.flag-favourite-content a` button styles without !important. */ .track-favorite-button { display: flex; align-items: center; justify-content: center; } .track-favorite-button .flag { margin: 0; padding: 0; } .track-favorite-button .flag a { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; margin: 0; background: transparent; border: none; border-radius: var(--ks-radius-full); transition: all 0.2s ease; font-size: 0; /* Hide text */ line-height: 0; text-indent: -9999px; /* Extra hiding for text */ } .track-favorite-button .flag a:hover { background-color: color-mix(in srgb, var(--ks-color-primary-50) 50%, transparent); transform: none; box-shadow: none; } /* Heart icon styling - for flag action (not yet flagged) */ .track-favorite-button .action-flag a::before, .track-favorite-button .flag:not(.action-unflag) a::before { content: '♡'; /* outline heart when not flagged */ font-size: 1.25rem; color: var(--ks-color-text-muted); transition: color 0.2s ease; text-indent: 0; display: block; line-height: 1; } .track-favorite-button .action-flag a:hover::before, .track-favorite-button .flag:not(.action-unflag) a:hover::before { color: var(--ks-color-danger-500); } /* When flagged (unflag action available) - show filled red heart */ .track-favorite-button .action-unflag a::before { content: '♥'; /* filled heart when flagged */ font-size: 1.25rem; color: var(--ks-color-danger-500); text-indent: 0; display: block; line-height: 1; } /* Dark mode: hover tint on track favorite buttons */ .dark .track-favorite-button .flag a:hover { background-color: color-mix(in srgb, var(--ks-color-primary-400) 20%, transparent); }