girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-16 05:08:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: 歌词页视觉效果缺陷 (#1649)

Browse source
This commit is contained in:
memorydream 2022-05-21 06:03:11 +08:00 • committed by GitHub
parent cb59eb94a1
commit c1efcb895c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/views/lyrics.vue
View file

@ -192,16 +192,18 @@
@click="clickLyricLine(line.time)"
@dblclick="clickLyricLine(line.time, true)"
>
<span v-if="line.contents[0]">{{ line.contents[0] }}</span>
<br />
<span
v-if="
line.contents[1] &&
$store.state.settings.showLyricsTranslation
"
class="translation"
>{{ line.contents[1] }}</span
>
<div class="content">
<span v-if="line.contents[0]">{{ line.contents[0] }}</span>
<br />
<span
v-if="
line.contents[1] &&
$store.state.settings.showLyricsTranslation
"
class="translation"
>{{ line.contents[1] }}</span
>
</div>
</div>
</div>
</transition>
@ -697,20 +699,23 @@ export default {
&:hover {
background: var(--color-secondary-bg-for-transparent);
}
&:active {
.content {
transform-origin: center left;
transform: scale(0.95);
}
span {
opacity: 0.28;
cursor: default;
font-size: 0.9em;
transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
span.translation {
opacity: 0.2;
font-size: 0.825em;
span {
opacity: 0.28;
cursor: default;
font-size: 1em;
transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
span.translation {
opacity: 0.2;
font-size: 0.925em;
}
}
}
@ -722,18 +727,16 @@ export default {
margin-top: 0.1em;
}
.highlight {
transform-origin: center left;
transform: scale(1.05);
}
.highlight div.content {
transform: scale(1);
span {
opacity: 0.98;
display: inline-block;
}
.highlight span {
opacity: 0.98;
display: inline-block;
}
.highlight span.translation {
opacity: 0.65;
span.translation {
opacity: 0.65;
}
}
}