smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-13 03:11:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(synced-lyrics): multiple lyric sources (#2383)

Browse Source 
Co-authored-by: JellyBrick <shlee1503@naver.com>
This commit is contained in:
Angelos Bouklis
2024-12-25 00:44:29 +02:00
committed by GitHub
parent 5c9ded8779
commit 533b96d1f6
28 changed files with 1527 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/plugins/synced-lyrics/style.css
View File

@ -3,7 +3,8 @@
display: none !important;
}
#tab-renderer[page-type='MUSIC_PAGE_TYPE_TRACK_LYRICS'] > #synced-lyrics-container {
#tab-renderer[page-type='MUSIC_PAGE_TYPE_TRACK_LYRICS']
> #synced-lyrics-container {
display: block !important;
}
@ -32,10 +33,10 @@
.synced-line {
width: var(--lyric-width, 100%);
}
.synced-line > .text-lyrics {
cursor: pointer;
& > .text-lyrics {
cursor: pointer;
}
}
.synced-lyrics {
@ -56,10 +57,17 @@
display: block;
text-align: left;
margin: var(--global-margin) 0;
transition: scale 0.3s ease-in-out, translate 0.3s ease-in-out, color 0.1s ease-in-out;
transition:
scale 0.3s ease-in-out,
translate 0.3s ease-in-out,
color 0.1s ease-in-out;
transform-origin: 0 50%;
}
.text-lyrics > span {
margin-inline: 0.1em;
}
.previous > .text-lyrics {
color: var(--previous-lyrics);
font-weight: normal;
@ -76,3 +84,81 @@
color: var(--upcoming-lyrics);
font-weight: normal;
}
.lyrics-renderer {
display: flex;
flex-direction: column;
}
.lyrics-picker {
height: 5em;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding-block: 1em;
}
.lyrics-picker-content {
display: flex;
width: 50%;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.lyrics-picker-content-label {
display: flex;
overflow: hidden;
width: 100%;
/* padding-block: 5%; */
}
.lyrics-picker-content-dots {
display: block;
list-style: none;
}
.lyrics-picker-item {
display: flex;
height: 100%;
min-width: 100%;
justify-content: center;
align-items: center;
transition: transform 0.25s ease-in-out;
}
.lyrics-picker-dot {
display: inline-block;
cursor: pointer;
width: 5px;
height: 5px;
margin: 0 4px 0;
border-radius: 200px;
border: 1px solid #6e7c7c7f;
}
.lyrics-picker-left,
.lyrics-picker-right {
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
border-radius: 25%;
&:hover {
background-color: hsla(0, 0%, 100%, 0.1);
}
}
.lyrics-renderer-sticky {
position: sticky;
top: var(--top, 0);
z-index: 100;
background-color: var(--ytmusic-background);
transition: top 325ms ease-in-out;
}