core: 修正歌词布局排版

Author: Steve-xmh

packages/core/src/lyric-player/index.ts

@@ -427,9 +427,17 @@ export class LyricPlayer extends EventTarget implements HasElement, Disposable {
 		);
 		let style = "";
 		style += "--amll-lp-width:";
-		style += `${this.innerSize[0] - this.padding * 2}px;`;
+		const width = this.innerSize[0] - this._baseFontSize * 2;
+		style += `${width.toFixed(4)}px;`;
 		style += "--amll-lp-height:";
-		style += `${this.innerSize[1] - this.padding * 2}px;`;
+		style += `${(this.innerSize[1] - this._baseFontSize * 2).toFixed(4)}px;`;
+		// 原本想用 calc 来计算的，但是发现算式复杂之后无法解析，所以只能用 JS 来计算直接结果了
+		style += "--amll-lp-line-width:";
+		if (this.innerSize[0] < 768) {
+			style += `${width.toFixed(4)}px;`;
+		} else {
+			style += `${(width * 0.8).toFixed(4)}px;`;
+		}
 
 		// style += "--amll-player-time:";
 		// style += this.currentTime;

packages/core/src/styles/index.css

@@ -4,9 +4,9 @@
 
 /* 给歌词视图元素应用的样式 */
 .amll-lyric-player {
-    --amll-lp-line-width-aspect: 0.9;
+    --amll-lp-line-width-aspect: 0.8;
     --amll-lp-line-padding-x: 1em;
-    --amll-lp-bg-line-scale: 70%;
+    --amll-lp-bg-line-scale: 0.7;
     user-select: none;
     font-size: var(--amll-lp-font-size, max(max(4.7vh, 3.2vw), 12px));
     padding: 1em;

packages/core/src/styles/lyric-player.module.css

@@ -7,7 +7,9 @@
     position: absolute;
     backface-visibility: hidden;
     transform-origin: left;
-    width: calc(var(--amll-lp-line-width-aspect, 1) * (var(--amll-lp-width, 100%) - (var(--amll-lp-line-padding-x, 1em) * 2)));
+    width: var(--amll-lp-line-width, 100%);
+    min-width: var(--amll-lp-line-width, 100%);
+    max-width: var(--amll-lp-line-width, 100%);
     height: fit-content;
     padding: 2vh var(--amll-lp-line-padding-x, 1em);
     contain: content;
@@ -28,10 +30,10 @@
 
 .lyricBgLine {
     opacity: 0;
-    font-size: max(var(--amll-lp-bg-line-scale, 70%), 10px);
+    font-size: max(calc(100% * var(--amll-lp-bg-line-scale, 70%)), 10px);
     transition: opacity 0.25s, scale 0.5s, filter 0.2s, background-color 0.25s, box-shadow 0.25s;
     /* 因为字体大小缩小了，故内边距要和主行字体大小统一，行边距计算公式为 100% / font-size 转 em 单位 */
-    padding: 1vh calc(var(--amll-lp-line-padding-x, 1em) / var(--amll-lp-bg-line-scale, 70%));
+    padding: 1vh calc(var(--amll-lp-line-padding-x, 1em) / var(--amll-lp-bg-line-scale, 0.7));
 
     &.active {
         transition: opacity 0.5s 0.25s, scale 1.5s cubic-bezier(0, 1, 0, 1) 0.25s, filter 0.2s, background-color 0.25s, box-shadow 0.25s;
@@ -93,7 +95,7 @@
     height: clamp(0.5em, 1vh, 3em);
     transform-origin: center;
     width: fit-content;
-    padding: 2.5% 1em;
+    padding: 2.5% var(--amll-lp-line-padding-x, 1em);
     position: absolute;
     display: flex;
     gap: 0.25em;