diff --git a/src/renderer/features/lyrics/karaoke-lyric-line.module.css b/src/renderer/features/lyrics/karaoke-lyric-line.module.css index bd3d6c725..8df0b8263 100644 --- a/src/renderer/features/lyrics/karaoke-lyric-line.module.css +++ b/src/renderer/features/lyrics/karaoke-lyric-line.module.css @@ -10,8 +10,10 @@ opacity: var(--lyric-opacity); transform: scale(var(--lyric-scale)); transform-origin: var(--lyric-scale-origin) center; - transition: transform 0.166s var(--karaoke-anim-delay, 0s); - will-change: transform; + transition: + opacity 0.4s ease-in-out, + transform 0.4s ease-in-out; + will-change: opacity, transform; } .karaoke-line:global(.lyrics-line-active), diff --git a/src/renderer/features/lyrics/lyric-line.module.css b/src/renderer/features/lyrics/lyric-line.module.css index 328ac7499..e2e728f8e 100644 --- a/src/renderer/features/lyrics/lyric-line.module.css +++ b/src/renderer/features/lyrics/lyric-line.module.css @@ -7,8 +7,10 @@ opacity: var(--lyric-opacity); transform: scale(var(--lyric-scale)); transform-origin: var(--lyric-scale-origin) center; - transition: transform 0.166s var(--karaoke-anim-delay, 0s); - will-change: transform; + transition: + opacity 0.4s ease-in-out, + transform 0.4s ease-in-out; + will-change: opacity, transform; } .lyric-line:global(.lyrics-line-active), diff --git a/src/renderer/features/lyrics/styles/karaoke-animation.css b/src/renderer/features/lyrics/styles/karaoke-animation.css index cb8f3fa71..1b78b6e9a 100644 --- a/src/renderer/features/lyrics/styles/karaoke-animation.css +++ b/src/renderer/features/lyrics/styles/karaoke-animation.css @@ -11,23 +11,12 @@ initial-value: 0; } -/* 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: 1; - filter: none; -} - .synchronized-karaoke-lyrics :is(.karaoke-line, .lyric-line).lyrics-line-active { opacity: 1 !important; } .synchronized-karaoke-lyrics:has(.lyrics-line-active) - :is(.karaoke-line, .lyric-line).lyrics-line-active - ~ :is(.karaoke-line, .lyric-line) { + :is(.karaoke-line, .lyric-line):not(.lyrics-line-active) { opacity: var(--lyric-opacity, 0.3); } @@ -54,7 +43,7 @@ vertical-align: baseline; } -.karaoke-word.sung { +:is(.karaoke-line, .lyric-line).lyrics-line-active .karaoke-word.sung { color: var(--theme-colors-foreground); } @@ -143,7 +132,7 @@ ); } -.karaoke-word.sung .karaoke-word-highlight { +:is(.karaoke-line, .lyric-line).lyrics-line-active .karaoke-word.sung .karaoke-word-highlight { opacity: 1; transition: none; diff --git a/src/renderer/features/lyrics/styles/synchronized-lyrics-animation.css b/src/renderer/features/lyrics/styles/synchronized-lyrics-animation.css index 09857a2f7..d18be2f08 100644 --- a/src/renderer/features/lyrics/styles/synchronized-lyrics-animation.css +++ b/src/renderer/features/lyrics/styles/synchronized-lyrics-animation.css @@ -1,15 +1,8 @@ -/* Past (sung) lines stay fully visible */ -.synchronized-lyrics:has(.lyrics-line-active) - .lyric-line:not(.lyrics-line-active, .lyrics-line-active ~ .lyric-line) { - opacity: 1; - filter: none; -} - .synchronized-lyrics .lyric-line.lyrics-line-active { opacity: 1 !important; } -.synchronized-lyrics:has(.lyrics-line-active) .lyric-line.lyrics-line-active ~ .lyric-line { +.synchronized-lyrics:has(.lyrics-line-active) .lyric-line:not(.lyrics-line-active) { opacity: var(--lyric-opacity, 0.3); }