mirror of
https://github.com/jeffvli/feishin.git
synced 2026-07-14 22:50:26 +02:00
remove lyrics blur animation
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user