✨ feat: 优化 AMLL 歌词高亮效果。

[ITManCHINA]

• 基于 a7bc2e3 和 ✨ feat: 尝试给 MainAMLyric 使用 plus-lighter #647 重新提交；
• 解决分支冲突；
• 引入 plus-lighter¹ 特性，并为不支持该特性的浏览器提供兼容方案；
• 修改 --amll-lp-color 为 '--amll-lp-color': 'rgb(239 239 239)' ，未高亮的字体颜色不再跟随 --main-cover-color 变化。

https://github.com/imsyy/SPlayer/blob/a7bc2e3f0cf838159f1d8db3f53d0eaf8e52f111/src/components/Player/MainAMLyric.vue#L7

---

Footnotes

1. 可在 CanIUse.com 上查询各个浏览器对 plus-lighter 的支持状态。 ↩

[gemini-code-assist]

Summary of Changes

Hello @ITManCHINA, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求旨在全面优化AMLL歌词的高亮显示效果。核心改动是引入了CSS的plus-lighter混合模式，使当前播放的歌词行在视觉上更加突出和明亮。同时，为了确保在各种浏览器环境下的兼容性，PR提供了优雅的降级方案，并对高亮颜色进行了固定，以及限定了混合模式的作用范围，从而为用户提供更一致、更美观的歌词体验。

Highlights

• 固定歌词高亮颜色: 将AMLL歌词的高亮颜色--amll-lp-color固定为rgb(239 239 239)，不再动态跟随--main-cover-color变化，以确保高亮效果的视觉一致性。
• 引入plus-lighter混合模式: 为当前高亮歌词行引入mix-blend-mode: plus-lighter样式，使其在视觉上更明亮、更突出，并配合半透明白色文字和轻微发光阴影，提升整体美观度。
• 增强浏览器兼容性: 针对不支持plus-lighter混合模式的浏览器，通过@supports规则提供了降级方案，使用纯白色文字和更明显的文本阴影，确保在不同浏览器中都能有良好的高亮显示效果。
• 限定混合模式作用范围: 通过在歌词容器上添加isolation: isolate;属性，确保mix-blend-mode仅作用于歌词区域，避免对页面其他元素产生不必要的视觉影响。

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

你好，感谢你的贡献！这次的 PR 旨在优化 AMLL 歌词的高亮效果，通过引入 plus-lighter 混合模式并提供兼容性回退方案，这是一个很棒的视觉增强。代码整体实现得不错，isolation: isolate 的使用也很恰当。我发现了一些可以改进的地方，主要集中在 CSS 的可读性和注释的准确性上，请查看我的具体评论。

[gemini-code-assist]

你好，这个选择器列表可以被简化。为了提高代码的可读性和可维护性，可以考虑使用 :is() 伪类来合并这些选择器。

例如，可以改写为：

:deep(.am-lyric :is(.current, .is-current, .active, .is-active)),
:deep(.am-lyric .lyric-line:is(.current, .is-current)) {
  /* ... styles ... */
}

:is() 伪类在现代浏览器中有很好的支持，与 mix-blend-mode: plus-lighter 的兼容性相当。

[gemini-code-assist]

你好，与前面的高亮样式类似，这里的选择器列表也可以使用 :is() 伪类来简化，以提高代码的可读性和可维护性。