Lyrics 插件样式 - 音乐播放界面美化

引言

Obsidian Lyrics 插件可以将 Obsidian 变成一个带有滚动歌词的音乐播放器，美中不足是默认样式外观较为一般，遂根据插件作者的指引进行一些自定义美化设置。

代码

body {
    --font-lyrics: Bookerly, 方正聚珍新仿简繁;
}

body.colorful-link-animation :is(.markdown-preview-view,.markdown-rendered) .lyrics-line .lyrics-timestamp:hover {
    animation: 2s colorful-link infinite;
    cursor: pointer;
}

@keyframes colorful-link {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.lyrics-line p {
    font-family: var(--font-lyrics) !important;
    font-weight: bold;
}

.lyrics-highlighted .lyrics-text {
    color: purple;
    background: linear-gradient(45deg,#FD8A8A 0%,#FFBF9B 11%,#FFDD83 22%,#DFFFD8 33%,#B4E4FF 44%,#ADA2FF 55%);;
    border-radius: 5px;
}

效果展示

讨论

若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。