ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

新增桌面歌词设置字体加粗设置&优化歌词字体显示

Browse Source
This commit is contained in:
lyswhut
2023-01-30 17:48:47 +08:00
parent c013d19530
commit c24b29a42c
14 changed files with 266 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer-lyric/assets/styles/layout.less
+147 -9
View File
@@ -48,18 +48,156 @@
text-shadow+: 0 0 0 @color;
}
.stroke4(@color) {
text-shadow:
0.02em -0.02em 0 var(--color-lyric-shadow),
// -0.02em 0.02em 0 var(--color-lyric-shadow),
// 0.02em 0.02em 0 var(--color-lyric-shadow),
// 0.02em -0.02em 0 var(--color-lyric-shadow),
-0.02em -1px 0 var(--color-lyric-shadow),
-0.02em 1px 0 var(--color-lyric-shadow),
0.02em 1px 0 var(--color-lyric-shadow),
0.02em -1px 0 var(--color-lyric-shadow),
-0.02em 0px 0 var(--color-lyric-shadow),
-0.02em 0px 0 var(--color-lyric-shadow),
0.02em 0px 0 var(--color-lyric-shadow),
0.02em 0px 0 var(--color-lyric-shadow),
// -1px -0.02em 0 var(--color-lyric-shadow),
// -1px 0.02em 0 var(--color-lyric-shadow),
// 1px 0.02em 0 var(--color-lyric-shadow),
// 1px -0.02em 0 var(--color-lyric-shadow),
-1px -1px 0 var(--color-lyric-shadow),
-1px 1px 0 var(--color-lyric-shadow),
1px 1px 0 var(--color-lyric-shadow),
1px -1px 0 var(--color-lyric-shadow),
-1px 0px 0 var(--color-lyric-shadow),
-1px 0px 0 var(--color-lyric-shadow),
1px 0px 0 var(--color-lyric-shadow),
1px 0px 0 var(--color-lyric-shadow)
// 0px -0.02em 0 var(--color-lyric-shadow),
// 0px 0.02em 0 var(--color-lyric-shadow),
// 0px 0.02em 0 var(--color-lyric-shadow),
// 0px -0.02em 0 var(--color-lyric-shadow),
// 0px -1px 0 var(--color-lyric-shadow),
// 0px 1px 0 var(--color-lyric-shadow),
// 0px 1px 0 var(--color-lyric-shadow),
// 0px -1px 0 var(--color-lyric-shadow)
;
// text-shadow:
// -0.04em -0.04em 0 var(--color-lyric-shadow),
// // -0.04em 0.04em 0 var(--color-lyric-shadow),
// 0.04em 0.04em 0 var(--color-lyric-shadow),
// 0.04em -0.04em 0 var(--color-lyric-shadow),
// -0.04em 0px 0 var(--color-lyric-shadow),
// -0.04em 0px 0 var(--color-lyric-shadow),
// 0.04em 0px 0 var(--color-lyric-shadow),
// 0.04em 0px 0 var(--color-lyric-shadow),
// // 0px -0.03em 0 var(--color-lyric-shadow),
// 0px 0.04em 0 var(--color-lyric-shadow),
// // 0px 0.03em 0 var(--color-lyric-shadow),
// 0px -0.04em 0 var(--color-lyric-shadow);
// @maxi: 2 + 1;
// .i-loop (@i) when (@i > 0) {
// @maxj: 2 + 1;
// .j-loop (@j) when (@j > 0) {
// text-shadow+: (@i - 1)*(-1px) (@j - 1)*(-1px) 0 @color;
// text-shadow+: (@i - 1)*(-1px) (@j - 1)*(1px) 0 @color;
// text-shadow+: (@i - 1)*(1px) (@j - 1)*(1px) 0 @color;
// text-shadow+: (@i - 1)*(1px) (@j - 1)*(-1px) 0 @color;
// .j-loop(@j - 1);
// }
// .j-loop (0) {}
// .j-loop(@maxj);
// .i-loop(@i - 1);
// }
// .i-loop (0) {}
// .i-loop(@maxi);
// text-shadow+: 0 0 0 @color;
}
.stroke3(@color) {
text-shadow: 0.04em 0.04em 0 var(--color-lyric-shadow-font-mode),
0.04em -0.03em 0 var(--color-lyric-shadow-font-mode),
-0.04em -0.03em 0 var(--color-lyric-shadow-font-mode),
-0.04em 0.04em 0 var(--color-lyric-shadow-font-mode),
0.04em 0.01em 0 var(--color-lyric-shadow-font-mode),
0.04em -0.01em 0 var(--color-lyric-shadow-font-mode),
-0.04em -0.01em 0 var(--color-lyric-shadow-font-mode),
-0.04em 0.01em 0 var(--color-lyric-shadow-font-mode),
0.04em 0px 0 var(--color-lyric-shadow-font-mode),
0.04em 0px 0 var(--color-lyric-shadow-font-mode),
-0.04em 0px 0 var(--color-lyric-shadow-font-mode),
-0.04em 0px 0 var(--color-lyric-shadow-font-mode),
0.01em 0.04em 0 var(--color-lyric-shadow-font-mode),
0.01em -0.03em 0 var(--color-lyric-shadow-font-mode),
-0.01em -0.03em 0 var(--color-lyric-shadow-font-mode),
-0.01em 0.04em 0 var(--color-lyric-shadow-font-mode),
0.01em 0.01em 0 var(--color-lyric-shadow-font-mode),
0.01em -0.01em 0 var(--color-lyric-shadow-font-mode),
-0.01em -0.01em 0 var(--color-lyric-shadow-font-mode),
-0.01em 0.01em 0 var(--color-lyric-shadow-font-mode),
0.01em 0px 0 var(--color-lyric-shadow-font-mode),
0.01em 0px 0 var(--color-lyric-shadow-font-mode),
-0.01em 0px 0 var(--color-lyric-shadow-font-mode),
-0.01em 0px 0 var(--color-lyric-shadow-font-mode),
0px 0.04em 0 var(--color-lyric-shadow-font-mode),
0px -0.03em 0 var(--color-lyric-shadow-font-mode),
0px -0.03em 0 var(--color-lyric-shadow-font-mode),
0px 0.04em 0 var(--color-lyric-shadow-font-mode),
0px 0.01em 0 var(--color-lyric-shadow-font-mode),
0px -0.01em 0 var(--color-lyric-shadow-font-mode),
0px -0.01em 0 var(--color-lyric-shadow-font-mode),
0px 0.01em 0 var(--color-lyric-shadow-font-mode);
// text-shadow: 0.04em 0.04em 0 var(--color-lyric-shadow-font-mode),
// 0.04em -0.03em 0 var(--color-lyric-shadow-font-mode),
// -0.04em -0.03em 0 var(--color-lyric-shadow-font-mode),
// -0.04em 0.04em 0 var(--color-lyric-shadow-font-mode),
// 0.04em 0.01em 0 var(--color-lyric-shadow-font-mode),
// 0.04em -0.02em 0 var(--color-lyric-shadow-font-mode),
// -0.04em -0.02em 0 var(--color-lyric-shadow-font-mode),
// -0.04em 0.01em 0 var(--color-lyric-shadow-font-mode),
// 0.04em 0px 0 var(--color-lyric-shadow-font-mode),
// 0.04em 0px 0 var(--color-lyric-shadow-font-mode),
// -0.04em 0px 0 var(--color-lyric-shadow-font-mode),
// -0.04em 0px 0 var(--color-lyric-shadow-font-mode),
// 0.01em 0.04em 0 var(--color-lyric-shadow-font-mode),
// 0.01em -0.03em 0 var(--color-lyric-shadow-font-mode),
// -0.02em -0.03em 0 var(--color-lyric-shadow-font-mode),
// -0.02em 0.04em 0 var(--color-lyric-shadow-font-mode),
// 0.01em 0.01em 0 var(--color-lyric-shadow-font-mode),
// 0.01em -0.02em 0 var(--color-lyric-shadow-font-mode),
// -0.02em -0.02em 0 var(--color-lyric-shadow-font-mode),
// -0.02em 0.01em 0 var(--color-lyric-shadow-font-mode),
// 0.01em 0px 0 var(--color-lyric-shadow-font-mode),
// 0.01em 0px 0 var(--color-lyric-shadow-font-mode),
// -0.02em 0px 0 var(--color-lyric-shadow-font-mode),
// -0.02em 0px 0 var(--color-lyric-shadow-font-mode),
// 0px 0.04em 0 var(--color-lyric-shadow-font-mode),
// 0px -0.03em 0 var(--color-lyric-shadow-font-mode),
// 0px -0.03em 0 var(--color-lyric-shadow-font-mode),
// 0px 0.04em 0 var(--color-lyric-shadow-font-mode),
// 0px 0.01em 0 var(--color-lyric-shadow-font-mode),
// 0px -0.02em 0 var(--color-lyric-shadow-font-mode),
// 0px -0.02em 0 var(--color-lyric-shadow-font-mode),
// 0px 0.01em 0 var(--color-lyric-shadow-font-mode);
}
.stroke2(@color) {
text-shadow: 2px 0 @color, -2px 0 @color, 0 2px @color, 0 -2px @color,
1px 1px @color, -1px -1px @color, 1px -1px @color, -1px 1px @color;
}
// .stroke2(@color) {
// text-shadow:
// -1px -1px 0px @color,
// 0px -1px 0px @color,
// 1px -1px 0px @color,
// -1px 0px 0px @color,
// 1px 0px 0px @color,
// -1px 1px 0px @color,
// 0px 1px 0px @color,
// 1px 1px 0px @color;
// // text-shadow: 1px 1px 2px @color;
// // text-shadow:
// // -1px -1px 0px @color,
// // 0px -1px 0px @color,
// // 1px -1px 0px @color,
// // -1px 0px 0px @color,
// // 1px 0px 0px @color,
// // -1px 1px 0px @color,
// // 0px 1px 0px @color,
// // 1px 1px 0px @color;
// // -webkit-text-stroke: 0.03em black;
// // -webkit-text-fill-color: @color;
// }
src/renderer-lyric/components/layout/LyricHorizontal/index.vue
+36 -20
View File
@@ -1,7 +1,7 @@
<template>
<div
ref="dom_lyric"
:class="[$style.lyric, { [$style.draging]: isMsDown }, { [$style.lrcActiveZoom]: isZoomActiveLrc }, { [$style.ellipsis]: ellipsis } ]"
:class="[$style.lyric, { [$style.draging]: isMsDown }, { [$style.lrcActiveZoom]: isZoomActiveLrc }, { [$style.ellipsis]: ellipsis }, { [$style.fontWeightFont]: isFontWeightFont }, { [$style.fontWeightLine]: isFontWeightLine } ]"
:style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" @touchstart="handleLyricTouchStart"
>
<div :class="$style.lyricSpace" />
@@ -19,7 +19,8 @@ export default {
setup() {
const isZoomActiveLrc = computed(() => setting['desktopLyric.style.isZoomActiveLrc'])
const ellipsis = computed(() => setting['desktopLyric.style.ellipsis'])
// const fontWeight = computed(() => setting['desktopLyric.style.fontWeight'])
const isFontWeightFont = computed(() => setting['desktopLyric.style.isFontWeightFont'])
const isFontWeightLine = computed(() => setting['desktopLyric.style.isFontWeightLine'])
const lrcStyles = computed(() => ({
fontFamily: setting['desktopLyric.style.font'],
fontSize: Math.trunc(setting['desktopLyric.style.fontSize']) + 'px',
@@ -41,7 +42,8 @@ export default {
isZoomActiveLrc,
lrcStyles,
ellipsis,
// fontWeight,
isFontWeightFont,
isFontWeightLine,
dom_lyric,
dom_lyric_text,
@@ -70,6 +72,7 @@ export default {
:global {
.font-lrc, .shadow {
padding: 0.08em 0.14em;
margin: -0.08em -0.14em;
}
.font-lrc {
color: var(--color-lyric-unplay);
@@ -104,9 +107,9 @@ export default {
transition: @transition-slow;
transition-property: font-size, color;
}
&.font-mode > .line {
font-weight: bold;
}
// &.font-mode > .line {
// font-weight: bold;
// }
&.font-mode > .line > .font-lrc {
> span {
@@ -119,15 +122,21 @@ export default {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 0 100%;
padding-left: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 0.12em;
padding-right: 0.12em;
padding-bottom: 0.12em;
margin-left: -0.11em;
margin-right: -0.11em;
margin-bottom: -0.12em;
}
}
.line .shadow span {
padding-left: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 0.12em;
padding-right: 0.12em;
padding-bottom: 0.12em;
margin-left: -0.11em;
margin-right: -0.11em;
margin-bottom: -0.12em;
}
// &.line-mode {
// .shadow {
@@ -140,7 +149,7 @@ export default {
}
.line-mode .font-lrc, .extended .font-lrc {
// text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.3);
.stroke2(var(--color-lyric-shadow));
.stroke3(var(--color-lyric-shadow));
// .stroke2(rgba(0, 0, 0, 0.18));
// .stroke(1px, rgba(0, 0, 0, 0.08));
// .stroke(2px, rgba(0, 0, 0, 0.025));
@@ -228,13 +237,20 @@ export default {
}
}
}
// .font-weight {
// :global {
// .font-mode > .line {
// font-weight: bold;
// }
// }
// }
.font-weight-font {
:global {
.font-mode > .line {
font-weight: bold;
}
}
}
.font-weight-line {
:global {
.line-mode > .line {
font-weight: bold;
}
}
}
// .footer {
// flex: 0 0 100px;
// overflow: hidden;
src/renderer-lyric/components/layout/LyricVertical/index.vue
+12 -6
View File
@@ -1,7 +1,7 @@
<template>
<div
ref="dom_lyric"
:class="[$style.lyric, { [$style.draging]: isMsDown }, { [$style.lrcActiveZoom]: isZoomActiveLrc }, { [$style.ellipsis]: ellipsis } ]"
:class="[$style.lyric, { [$style.draging]: isMsDown }, { [$style.lrcActiveZoom]: isZoomActiveLrc }, { [$style.ellipsis]: ellipsis }, { [$style.fontWeightFont]: isFontWeightFont }, { [$style.fontWeightLine]: isFontWeightLine } ]"
:style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" @touchstart="handleLyricTouchStart"
>
<div :class="$style.lyricSpace" />
@@ -19,6 +19,8 @@ export default {
setup() {
const isZoomActiveLrc = computed(() => setting['desktopLyric.style.isZoomActiveLrc'])
const ellipsis = computed(() => setting['desktopLyric.style.ellipsis'])
const isFontWeightFont = computed(() => setting['desktopLyric.style.isFontWeightFont'])
const isFontWeightLine = computed(() => setting['desktopLyric.style.isFontWeightLine'])
// const fontWeight = computed(() => setting['desktopLyric.style.fontWeight'])
const lrcStyles = computed(() => ({
fontFamily: setting['desktopLyric.style.font'],
@@ -41,7 +43,8 @@ export default {
isZoomActiveLrc,
lrcStyles,
ellipsis,
// fontWeight,
isFontWeightFont,
isFontWeightLine,
dom_lyric,
dom_lyric_text,
@@ -74,13 +77,14 @@ export default {
:global {
.font-lrc, .shadow {
padding: 0.14em 0.07em;
margin: -0.14em -0.07em;
}
.font-lrc {
color: var(--color-lyric-unplay);
}
.shadow {
color: transparent;
margin-left: -0.14em;
// margin-left: -0.14em;
}
.line-content {
line-height: 1.2;
@@ -124,12 +128,14 @@ export default {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 0 100%;
padding: 2px;
padding: 0.14em;
margin: -0.08em;
}
}
&.font-mode .line .shadow span {
padding: 2px;
padding: 0.14em;
margin: -0.08em;
}
}
// .shadow {
@@ -143,7 +149,7 @@ export default {
.line-mode .font-lrc, .extended .font-lrc {
// text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.3);
// .stroke2(rgba(0, 0, 0, 0.14));
.stroke2(var(--color-lyric-shadow));
.stroke4(var(--color-lyric-shadow));
// .stroke(1px, rgba(0, 0, 0, 0.08));
// .stroke(2px, rgba(0, 0, 0, 0.025));
transition: font-size @transition-slow;
src/renderer-lyric/store/state.ts
+2
View File
@@ -26,6 +26,8 @@ export const setting = shallowReactive<LX.DesktopLyric.Config>({
// 'desktopLyric.style.fontWeight': true,
'desktopLyric.style.opacity': 95,
'desktopLyric.style.ellipsis': false,
'desktopLyric.style.isFontWeightFont': false,
'desktopLyric.style.isFontWeightLine': false,
'desktopLyric.style.isZoomActiveLrc': true,
'common.langId': 'zh-cn',
'player.isShowLyricTranslation': false,