fixes lyrics shifting whole view
This commit is contained in:
parent
acbc4a8995
commit
4ca4f33826
2 changed files with 42 additions and 3 deletions
|
@ -101,6 +101,25 @@ body[platform='linux'] {
|
||||||
background-size: 400% 400%;
|
background-size: 400% 400%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bgGradientMaterial {
|
||||||
|
position:relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bgGradientMaterial::before {
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
left: -50%;
|
||||||
|
width: 200%;
|
||||||
|
height: 250%;
|
||||||
|
background-image: var(--bgColor);
|
||||||
|
content: "";
|
||||||
|
z-index: -1;
|
||||||
|
transform: rotateZ(0deg);
|
||||||
|
transform-origin: center;
|
||||||
|
animation: bgRotate 10s linear infinite;
|
||||||
|
filter: brightness(100%) saturate(200%) contrast(1.5);
|
||||||
|
}
|
||||||
|
|
||||||
#app::before {
|
#app::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -50%;
|
top: -50%;
|
||||||
|
|
|
@ -130,10 +130,30 @@
|
||||||
if(this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`)) {this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`).classList.remove("active");}
|
if(this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`)) {this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`).classList.remove("active");}
|
||||||
this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).classList.add("active")
|
this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).classList.add("active")
|
||||||
if (checkIfScrollIsStatic) {
|
if (checkIfScrollIsStatic) {
|
||||||
this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).scrollIntoView({
|
let lyricElement = this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`)
|
||||||
behavior: "smooth",
|
// this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).scrollIntoView({
|
||||||
block: "center"
|
// behavior: "smooth",
|
||||||
|
// block: "nearest", inline: 'start'
|
||||||
|
// })
|
||||||
|
let parent = lyricElement.parentElement
|
||||||
|
let parentRect = parent.getBoundingClientRect()
|
||||||
|
let lyricElementRect = lyricElement.getBoundingClientRect()
|
||||||
|
let parentScrollTop = parent.scrollTop
|
||||||
|
let parentScrollLeft = parent.scrollLeft
|
||||||
|
let parentScrollTopDiff = parentScrollTop - parentRect.top
|
||||||
|
let parentScrollLeftDiff = parentScrollLeft - parentRect.left
|
||||||
|
let lyricElementScrollTop = lyricElementRect.top + parentScrollTopDiff
|
||||||
|
let lyricElementScrollLeft = lyricElementRect.left + parentScrollLeftDiff
|
||||||
|
let scrollTopDiff = lyricElementScrollTop - parentScrollTop
|
||||||
|
let scrollLeftDiff = lyricElementScrollLeft - parentScrollLeft
|
||||||
|
let scrollTop = parent.scrollTop + scrollTopDiff
|
||||||
|
let scrollLeft = parent.scrollLeft + scrollLeftDiff
|
||||||
|
parent.scrollTo({
|
||||||
|
top: scrollTop - 128,
|
||||||
|
left: scrollLeft,
|
||||||
|
behavior: 'smooth'
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else if (app.currentLyricsLine == 0 && app.drawer.open) {
|
} else if (app.currentLyricsLine == 0 && app.drawer.open) {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue