修复桌面歌词启用歌词缩放后的阴影显示问题;就放桌面歌词在启用卡拉OK歌词后字体边缘可能被截断的问题

This commit is contained in:
lyswhut
2023-01-11 13:08:28 +08:00
parent cb9fa62dac
commit db38db9256
4 changed files with 20 additions and 5 deletions
@@ -76,7 +76,7 @@ export default {
}
.shadow {
color: transparent;
margin-left: -0.14em;
// margin-left: -0.14em;
}
.line-content {
line-height: 1.2;
@@ -119,8 +119,16 @@ export default {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 0 100%;
padding-left: 1px;
padding-right: 1px;
padding-bottom: 1px;
}
}
.line .shadow span {
padding-left: 1px;
padding-right: 1px;
padding-bottom: 1px;
}
// &.line-mode {
// .shadow {
// text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.40);
@@ -138,7 +146,7 @@ export default {
// .stroke(2px, rgba(0, 0, 0, 0.025));
transition: font-size @transition-slow;
}
.font-mode .line .shadow {
.font-mode .line .shadow span {
.stroke(1px, var(--color-lyric-shadow-font-mode));
transition: font-size @transition-slow;
// text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3), 1px 1px 1px rgba(0, 0, 0, 0.3);
@@ -86,7 +86,6 @@ export default {
line-height: 1.2;
margin: 0 var(--line-gap);
overflow-wrap: break-word;
letter-spacing: 5px;
.font-lrc {
cursor: grab;
@@ -97,6 +96,7 @@ export default {
margin-right: var(--line-extended-gap);
}
&.line-mode {
letter-spacing: 5px;
.font-lrc {
transition: @transition-slow;
transition-property: font-size, color;
@@ -124,8 +124,13 @@ export default {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 0 100%;
padding: 2px;
}
}
&.font-mode .line .shadow span {
padding: 2px;
}
}
// .shadow {
// .stroke2(rgba(0, 0, 0, 0.05));
@@ -143,7 +148,7 @@ export default {
// .stroke(2px, rgba(0, 0, 0, 0.025));
transition: font-size @transition-slow;
}
.font-mode .line .shadow {
.font-mode .line .shadow span {
.stroke(1px, var(--color-lyric-shadow-font-mode));
// .stroke(1px, rgba(0, 0, 0, 0.07));
transition: font-size @transition-slow;