diff --git a/src/renderer/features/lyrics/karaoke-lyric-line.module.css b/src/renderer/features/lyrics/karaoke-lyric-line.module.css index 96969aa51..bd3d6c725 100644 --- a/src/renderer/features/lyrics/karaoke-lyric-line.module.css +++ b/src/renderer/features/lyrics/karaoke-lyric-line.module.css @@ -10,10 +10,7 @@ opacity: var(--lyric-opacity); transform: scale(var(--lyric-scale)); transform-origin: var(--lyric-scale-origin) center; - transition: - filter calc(var(--karaoke-line-duration, 1s) / 3) 0.4s, - opacity calc(var(--karaoke-line-duration, 1s) / 2) 0.166s, - transform 0.166s var(--karaoke-anim-delay, 0s); + transition: transform 0.166s var(--karaoke-anim-delay, 0s); will-change: transform; } @@ -21,7 +18,6 @@ .karaoke-line:global(.lyrics-line-animating), .karaoke-line:global(.lyrics-line-pre-animating) { opacity: 1 !important; - filter: blur(0); transform: scale(1); } diff --git a/src/renderer/features/lyrics/lyric-line.module.css b/src/renderer/features/lyrics/lyric-line.module.css index 450ada65a..328ac7499 100644 --- a/src/renderer/features/lyrics/lyric-line.module.css +++ b/src/renderer/features/lyrics/lyric-line.module.css @@ -7,10 +7,7 @@ opacity: var(--lyric-opacity); transform: scale(var(--lyric-scale)); transform-origin: var(--lyric-scale-origin) center; - transition: - filter calc(var(--karaoke-line-duration, 1s) / 3) 0.4s, - opacity calc(var(--karaoke-line-duration, 1s) / 2) 0.166s, - transform 0.166s var(--karaoke-anim-delay, 0s); + transition: transform 0.166s var(--karaoke-anim-delay, 0s); will-change: transform; } @@ -19,7 +16,6 @@ .lyric-line:global(.lyrics-line-pre-animating), .lyric-line:global(.active) { opacity: 1 !important; - filter: blur(0); transform: scale(1); } diff --git a/src/renderer/features/lyrics/styles/karaoke-animation.css b/src/renderer/features/lyrics/styles/karaoke-animation.css index e16681d1f..cb8f3fa71 100644 --- a/src/renderer/features/lyrics/styles/karaoke-animation.css +++ b/src/renderer/features/lyrics/styles/karaoke-animation.css @@ -11,36 +11,32 @@ initial-value: 0; } -/* Container-level line context blur/fade (karaoke sync only) */ +/* Past (sung) lines stay fully visible */ .synchronized-karaoke-lyrics:has(.lyrics-line-active) :is(.karaoke-line, .lyric-line):not( .lyrics-line-active, .lyrics-line-active ~ :is(.karaoke-line, .lyric-line) ) { - opacity: var(--lyric-opacity, 0.3); - filter: blur(2.5px); + opacity: 1; + filter: none; } .synchronized-karaoke-lyrics :is(.karaoke-line, .lyric-line).lyrics-line-active { opacity: 1 !important; - filter: blur(0); } .synchronized-karaoke-lyrics:has(.lyrics-line-active) :is(.karaoke-line, .lyric-line).lyrics-line-active ~ :is(.karaoke-line, .lyric-line) { opacity: var(--lyric-opacity, 0.3); - filter: blur(0); } .synchronized-karaoke-lyrics :is(.karaoke-line, .lyric-line).lyrics-line-animating { opacity: 1 !important; - filter: blur(0) !important; } .synchronized-karaoke-lyrics :is(.karaoke-line, .lyric-line):hover { opacity: 1 !important; - filter: blur(0) !important; } /* Word highlight via stacked text twin + gradient swipe */ @@ -148,7 +144,11 @@ } .karaoke-word.sung .karaoke-word-highlight { - opacity: 0; + opacity: 1; + transition: none; + + --lyric-transition-amount-start: 1.4; + --lyric-transition-amount-end: 1.5; } .karaoke-word ruby { diff --git a/src/renderer/features/lyrics/styles/synchronized-lyrics-animation.css b/src/renderer/features/lyrics/styles/synchronized-lyrics-animation.css index f0e70ed55..09857a2f7 100644 --- a/src/renderer/features/lyrics/styles/synchronized-lyrics-animation.css +++ b/src/renderer/features/lyrics/styles/synchronized-lyrics-animation.css @@ -1,33 +1,22 @@ -/* Container-level line context blur/fade (line-sync only) */ -.synchronized-lyrics .lyric-line { - transition: - filter 0.2s ease, - opacity 0.2s ease, - transform 0.2s ease; -} - +/* Past (sung) lines stay fully visible */ .synchronized-lyrics:has(.lyrics-line-active) .lyric-line:not(.lyrics-line-active, .lyrics-line-active ~ .lyric-line) { - opacity: var(--lyric-opacity, 0.3); - filter: blur(2.5px); + opacity: 1; + filter: none; } .synchronized-lyrics .lyric-line.lyrics-line-active { opacity: 1 !important; - filter: blur(0); } .synchronized-lyrics:has(.lyrics-line-active) .lyric-line.lyrics-line-active ~ .lyric-line { opacity: var(--lyric-opacity, 0.3); - filter: blur(0); } .synchronized-lyrics .lyric-line.lyrics-line-animating { opacity: 1 !important; - filter: blur(0) !important; } .synchronized-lyrics .lyric-line:hover { opacity: 1 !important; - filter: blur(0) !important; }