add button to change lyrics layout

This commit is contained in:
vapormusic 2022-01-04 13:43:05 +07:00
parent 952e632e49
commit 54f197e1e3
3 changed files with 64 additions and 3 deletions

View file

@ -1557,6 +1557,34 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
font-size: 26px;
}
.lyric-footer {
bottom: 0;
height: 50px;
width: 100%;
position: absolute;
z-index: 1000;
opacity: 1;
background: rgba(30, 30, 30, 0.8);
justify-content: center;
align-items: center;
display: none;
transition: opacity 0.1s var(--appleEase);
}
.lyric-body:hover + .lyric-footer, .lyric-footer:hover {
display: flex;
}
.modular-fs .app-drawer .lyric-footer {
background: rgba(30, 30, 30, 0.3);
display: flex;
opacity: 0.3;
}
.modular-fs .app-drawer .lyric-footer:hover {
opacity: 1;
}
.lyric-line {
--bgSpeed: 1s;
appearance: none;
@ -1645,6 +1673,34 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
filter: contrast(0.5);
}
.lyric-footer {
bottom: 0;
height: 50px;
width: 100%;
position: absolute;
z-index: 1000;
opacity: 1;
background: rgba(30, 30, 30, 0.8);
justify-content: center;
align-items: center;
display: none;
transition: opacity 0.1s var(--appleEase);
}
.lyric-body:hover + .lyric-footer, .lyric-footer:hover {
display: flex;
}
.modular-fs .app-drawer .lyric-footer {
background: rgba(30, 30, 30, 0.3);
display: flex;
opacity: 0.3;
}
.modular-fs .app-drawer .lyric-footer:hover {
opacity: 1;
}
@keyframes lyricWaitingLine {
0% {
opacity: 0.25;