()
| 3611 | 0 0 0 3px var(--accent-color,#1DB954), |
| 3612 | 0 0 16px 3px var(--accent-color,#1DB954); |
| 3613 | animation: lqObFadeIn 320ms ease-out both, lqObSpotPulse 2.4s ease-in-out 320ms infinite; |
| 3614 | } |
| 3615 | .lqObSpot.is-out { animation: lqObFadeOut 220ms ease-in both; } |
| 3616 | @keyframes lqObSpotPulse { |
| 3617 | 0%,100% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.72), 0 0 0 3px var(--accent-color,#1DB954), 0 0 16px 3px var(--accent-color,#1DB954); } |
| 3618 | 50% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.72), 0 0 0 3px var(--accent-color,#1DB954), 0 0 26px 7px var(--accent-color,#1DB954); } |
| 3619 | } |
| 3620 | |
| 3621 | @keyframes lqObFadeIn { from { opacity: 0; } to { opacity: 1; } } |
| 3622 | @keyframes lqObFadeOut { from { opacity: 1; } to { opacity: 0; } } |
| 3623 | |
| 3624 | /* Centered cards live in a non-interactive flex wrapper, so the card's own |
| 3625 | transform is pure scale/translate \u2014 no translate(-50%,-50%) for the |
| 3626 | keyframes to fight (that was the old "slides in from the corner" glitch). */ |
| 3627 | .lqObCenter { |
| 3628 | position: fixed; inset: 0; z-index: 100005; |
| 3629 | display: flex; align-items: center; justify-content: center; |
| 3630 | pointer-events: none; |
| 3631 | } |
| 3632 | |
| 3633 | .lqObCard { |
| 3634 | position: fixed; |
| 3635 | z-index: 100005; |
| 3636 | background: transparent; |
| 3637 | backdrop-filter: blur(32px); |
| 3638 | -webkit-backdrop-filter: blur(32px); |
| 3639 | box-shadow: var(--glowify-shadow); |
| 3640 | border-radius: 16px; |
| 3641 | padding: 18px 20px 16px; |
| 3642 | color: white; |
| 3643 | pointer-events: all; |
| 3644 | will-change: transform, opacity; |
| 3645 | /* Enter: settings-panel bounce curve. */ |
| 3646 | animation: lqObCardIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both; |
| 3647 | } |
| 3648 | .lqObCenter .lqObCard { position: relative; } |
| 3649 | /* Exit: snappy ease-in, matching the settings panel close. */ |
| 3650 | .lqObCard.is-out { animation: lqObCardOut ${EXIT_MS}ms cubic-bezier(0.8, 0, 0.2, 1) both; } |
| 3651 | @keyframes lqObCardIn { |
| 3652 | from { opacity: 0; transform: scale(0.86); } |
| 3653 | to { opacity: 1; transform: scale(1); } |
| 3654 | } |
| 3655 | @keyframes lqObCardOut { |
| 3656 | from { opacity: 1; transform: scale(1); } |
| 3657 | to { opacity: 0; transform: translateY(8px) scale(0.95); } |
| 3658 | } |
| 3659 | |
| 3660 | .lqObArrow { |
| 3661 | position: absolute; |
| 3662 | top: -8px; right: 18px; |
| 3663 | width: 0; height: 0; |
| 3664 | border-left: 9px solid transparent; |
| 3665 | border-right: 9px solid transparent; |
| 3666 | border-bottom: 9px solid rgba(255,255,255,0.13); |
| 3667 | } |
| 3668 | |
| 3669 | .lqObBrand { |
| 3670 | font-size: 10px; font-weight: 700; letter-spacing: 0.14em; |
no test coverage detected