wangyang/moeplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

阶段3:皮肤系统现代化

Browse Source 
- CSS 架构改为 src/css/base.css(结构+35个--moe-变量) + themes/(default/red/ixigua) 构建拼接
- 11 张 PNG 雪碧图全部删除,20+ 图标改为 SVG data-URI + CSS mask,颜色随主题变量
- 修复原 ckplayer 雪碧图 exitfull/next 共用图标 bug
- 视觉重做:渐变控制条/细轨道+圆点滑块进度条/圆角弹层/系统字体栈
- 默认皮肤深蓝 accent,ixigua 重做为浅色皮肤;播放器默认不再带品牌水印
- 修复中央播放键三角形不居中问题
- index.html 演示页重做:深色现代设计,移除原项目链接
This commit is contained in:
王阳
2026-07-21 14:34:05 +08:00
parent 639c37248d
commit 7e5fc46126
22 changed files with 6791 additions and 5013 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/base.css
+1561
View File
File diff suppressed because it is too large Load Diff
src/css/themes/default.css
+27
View File
@@ -0,0 +1,27 @@
/*
* MoePlayer 主题:默认(default)
* 深色渐变控制条 + 蓝色 accent(#00a1d6)
* 只覆盖 .moeplayer 作用域上的 --moe-* 变量(结构样式见 base.css)
* (右键菜单 .moeplayer-menu、错误框 .moeplayer-error 挂载在 body 下,需一并覆盖)
*/
.moeplayer, .moeplayer-menu, .moeplayer-error{
--moe-accent: #00a1d6;
--moe-icon-color: rgba(255,255,255,.92);
--moe-icon-hover: #00a1d6;
--moe-text-color: #FFF;
--moe-text-hover: #00a1d6;
--moe-bar-bg: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
--moe-top-bar-bg: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
--moe-top-bar-text: #FFF;
--moe-right-bar-bg: rgba(0,0,0,.35);
--moe-progress-bg: rgba(255,255,255,.25);
--moe-progress-buffer: rgba(255,255,255,.45);
--moe-volume-bg: rgba(255,255,255,.25);
--moe-volume-panel-bg: rgba(0,0,0,.85);
--moe-popup-bg: rgba(0,0,0,.85);
--moe-popup-text: #FFF;
--moe-menu-bg: rgba(0,0,0,.85);
--moe-menu-text: rgba(255,255,255,.75);
--moe-menu-link: #FFF;
--moe-menu-border: rgba(255,255,255,.08);
}
src/css/themes/ixigua.css
+102
View File
@@ -0,0 +1,102 @@
/*
* MoePlayer 主题:西瓜(ixigua)
* 浅色/白色控制条 + 深色图标 + 红色 accent(#e80101,沿用旧西瓜皮肤配色)
* 只覆盖 .moeplayer 作用域上的 --moe-* 变量(结构样式见 base.css)
* (右键菜单 .moeplayer-menu、错误框 .moeplayer-error 挂载在 body 下,需一并覆盖)
*/
.moeplayer, .moeplayer-menu, .moeplayer-error{
--moe-accent: #e80101;
--moe-icon-color: rgba(0,0,0,.72);
--moe-icon-hover: #e80101;
--moe-text-color: rgba(0,0,0,.85);
--moe-text-hover: #e80101;
--moe-bar-bg: linear-gradient(to top, rgba(255,255,255,.95), rgba(255,255,255,.55) 55%, rgba(255,255,255,0));
--moe-top-bar-bg: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
--moe-top-bar-text: #FFF;
--moe-right-bar-bg: rgba(255,255,255,.9);
--moe-progress-bg: rgba(0,0,0,.15);
--moe-progress-buffer: rgba(0,0,0,.3);
--moe-volume-bg: rgba(0,0,0,.15);
--moe-volume-panel-bg: rgba(255,255,255,.96);
--moe-popup-bg: rgba(255,255,255,.96);
--moe-popup-text: rgba(0,0,0,.85);
--moe-popup-shadow: 0 4px 16px rgba(0,0,0,.18);
--moe-menu-bg: rgba(255,255,255,.96);
--moe-menu-text: rgba(0,0,0,.6);
--moe-menu-link: rgba(0,0,0,.85);
--moe-menu-border: rgba(0,0,0,.08);
}
/*西瓜皮肤特色:全屏/网页全屏/剧场按钮 hover 脉冲动画(沿用旧西瓜皮肤的动效)*/
.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-bar-btn:hover,
.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-bar-btn:hover{
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-name: moe-button-hover;
animation-name: moe-button-hover;
}
.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-bar-btn:hover{
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-name: moe-button-hover-x;
animation-name: moe-button-hover-x;
}
@-webkit-keyframes moe-button-hover {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes moe-button-hover {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes moe-button-hover-x {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.15,1);
transform: scale(1.15,1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes moe-button-hover-x {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.15,1);
transform: scale(1.15,1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
src/css/themes/red.css
+27
View File
@@ -0,0 +1,27 @@
/*
* MoePlayer 主题:红色(red)
* 深色渐变控制条 + 红色 accent(#e80101)
* 只覆盖 .moeplayer 作用域上的 --moe-* 变量(结构样式见 base.css)
* (右键菜单 .moeplayer-menu、错误框 .moeplayer-error 挂载在 body 下,需一并覆盖)
*/
.moeplayer, .moeplayer-menu, .moeplayer-error{
--moe-accent: #e80101;
--moe-icon-color: rgba(255,255,255,.92);
--moe-icon-hover: #e80101;
--moe-text-color: #FFF;
--moe-text-hover: #e80101;
--moe-bar-bg: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
--moe-top-bar-bg: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
--moe-top-bar-text: #FFF;
--moe-right-bar-bg: rgba(0,0,0,.35);
--moe-progress-bg: rgba(255,255,255,.25);
--moe-progress-buffer: rgba(255,255,255,.45);
--moe-volume-bg: rgba(255,255,255,.25);
--moe-volume-panel-bg: rgba(0,0,0,.85);
--moe-popup-bg: rgba(0,0,0,.85);
--moe-popup-text: #FFF;
--moe-menu-bg: rgba(0,0,0,.85);
--moe-menu-text: rgba(255,255,255,.75);
--moe-menu-link: #FFF;
--moe-menu-border: rgba(255,255,255,.08);
}