YoduBGM插件是由泽泽社长开发的一款Typecho主题插件,用于网页的背景音乐播放器,因为YoduBGM插件样式上太过单调(chou),为了更贴合Sinner主题,减少突兀性,进行了适当调整,为了以后便于对比,特此记录。

找到YoduBGM插件根目录下的\css\player.css文件,复制下方内容对player.css全部内容进行替换即可。

以下内容基于YoduBGM v1.7.0调整而来,其他版本不保证可用,请自行确认后调整

@font-face {
    font-family: 'ydbgm';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg9jDFQAAAC8AAAAYGNtYXAAk9NNAAABHAAAAGRnYXNwAAAAEAAAAYAAAAAIZ2x5Zq98cUMAAAGIAAABsGhlYWQLbpAHAAADOAAAADZoaGVhByYDdgAAA3AAAAAkaG10eAvcAGwAAAOUAAAAHGxvY2EA3AFyAAADsAAAABBtYXhwAAkARwAAA8AAAAAgbmFtZZlKCfsAAAPgAAABhnBvc3QAAwAAAAAFaAAAACAAAwH3AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADx2ANt/24AkgNtAJIAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQASAAAAA4ACAACAAYAAQAg8AHxBfHY//3//wAAAAAAIPAB8QXx2P/9//8AAf/jEAMPAA4uAAMAAQAAAAAAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQBJ/4QDtwM8AEQAAAERFAcGBwYHBiMiJyYnJicmNTQ3Njc2NzYzMhcRBREUBwYHBgcGIyInJicmJyY1NDc2NzY3NjMyFxE0NzY3JTYzMhcWFQO3ExQdHh4dGhkeHR4eExQUEx4eHR4ZPDL+SRQTHh4dHhkaHR4eHRQTExQdHh4dGjwyCgsRAdwHCRcQEAMF/X8cFxYMDAYGBgYMDBYXHB0WFwwMBgYWATOI/msdFhYNDAYGBgYMDRYWHR0WFgwNBgYXAioRDw4GkwIQEBcAAAEAEQBDAV0CfQAZAAABFAcBBiMiLwEmNTQ/AScmNTQ/ATYzMhcBFgFdBf71BgcHBh0FBeHhBQUdBgcHBgELBQFgBwb+9QUFHQYHBwbh4QYHBwYdBQX+9QYAAAAAAQASADsBXAKFABIAAAEUBwEGIyInJjURNDc2MzIXARYBXAv/AAsPDwsLCwsPDwsBAAsBYA8L/wALCwsPAgAPCwsL/wALAAAAAQAAAAAAAE4KM+1fDzz1AAsEAAAAAADUTKYlAAAAANRMpiUAAP+EA7cDPAAAAAgAAgAAAAAAAAABAAADbf9uAAAEAAAAAAADtwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAEAAAAEAABJAW4AEQFuABIAAAAAAAoAFAAeAIYAtADYAAEAAAAHAEUAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype');
    font-weight: normal;
    font-style: normal
}
bgm [class*=" icon-"], bgm [class^=icon-] {
    font-family: ydbgm!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
}
.icon-music:before {
    /*播放中*/
    content: "\266A"
}
.icon-you:before {
    /*下一曲*/
    content: "\f105"
}
.icon-bofang:before {
    /*未播放*/
    content: "\f1d8"
}
bgm {
    position: fixed;
    right: 2rem;
    bottom: 72px;
}
bgm a {
    display: flex;
    background: #1abc9c;
    margin-bottom: 5px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
    padding: 8px;
    color: white;
    cursor: pointer;
    /*-moz-box-shadow:3px 3px 6px #858585; -webkit-box-shadow:3px 3px 6px #858585; box-shadow:3px 3px 6px #858585;*/
}
.dark bgm a {
    /*background: #1f2937;*/
    background: #1abc9c;
    /*-moz-box-shadow:3px 3px 6px #718096; -webkit-box-shadow:3px 3px 6px #718096; box-shadow:3px 3px 6px #718096; */
    color: white;
}