让Aplayer Plugin适配Mirages主题

如图所示, 原版的Aplayer对于简约的Mirages主题可谓是水土不服啊, 直角配上窄窄的留白, 让つつ非常抓狂, 而且原版Aplayer是没有黑白主题的适配, 的确有点难受.

原GitHub地址:

稍微修改一下CSS!

找到 /path-to-typecho/usr/plugins/APlayer/assets/dist/Aplayer.min.css , 添加如下代码:

.aplayer {
    margin: 5px !important;
    box-shadow: 0 5px 5px 0 rgba(0,0,0,.14),0 6px 2px -4px rgba(0,0,0,.2),0 2px 10px 0 rgba(0,0,0,.12) !important;
    border-radius: 10px !important;
    transition-duration:0.5s !important;
}
.aplayer:hover{
    box-shadow: 0 10px 10px 0 rgba(0,0,0,.14),0 12px 4px -8px rgba(0,0,0,.2),0 4px 20px 0 rgba(0,0,0,.12);
    margin-top: -2px;
    margin-bottom:17px;
    transition-duration:0.5s;
}
.aplayer .aplayer-info {
    margin-left: 66px !important;
    padding: 26px 28px 0 51px !important;
    height: 100px !important;
}

找到 /path-to-typecho/usr/themes/Mirages/css/your-version/mirages.min.css , 并添加如下代码:

@supports (-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px)) {
    .aplayer {
        background-color: rgba(255,255,255,0.7);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px)
    }
    .aplayer-title{
        color:black;
    }
}

@supports (-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px)) {
    body.theme-sunset.aplayer {
        background-color: rgba(255,255,255,0.7);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px)
    }
    body.theme-sunset.aplayer-title{
        color:black;
    }
}

@supports (-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px)) {
    body.theme-dark .aplayer {
        background-color: rgba(52,50,50,0.7);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px)
    }
    body.theme-dark .aplayer-title{
        color:white;
    }
}

保存即可~
回到浏览器, Ctrl+F5即可刷新缓存:

《让Aplayer Plugin适配Mirages主题》的所有内容, 均受国家相关法律法规保护，相应的版权、著作权等知识产权均归属 つつのBlog 所有。