阶段3:皮肤系统现代化
- 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:
王阳
@@ -14,18 +14,23 @@ MoePlayer —— 一款中文友好的开源网页视频播放器（MIT 协议
|
|||||||
├── index.html # 演示/测试页（含 API 调用示例）
|
├── index.html # 演示/测试页（含 API 调用示例）
|
||||||
├── package.json # npm 工程化入口,依赖与构建脚本
|
├── package.json # npm 工程化入口,依赖与构建脚本
|
||||||
├── rollup.config.js # rollup 配置:src/ 打包为 UMD 产物 + terser 压缩
|
├── rollup.config.js # rollup 配置:src/ 打包为 UMD 产物 + terser 压缩
|
||||||
├── scripts/copy-libs.js # 构建脚本第二步:从 node_modules 拷贝运行时库
|
├── scripts/build-css.js # 构建脚本第二步:base.css + 主题拼接为三个皮肤产物
|
||||||
|
├── scripts/copy-libs.js # 构建脚本第三步:从 node_modules 拷贝运行时库
|
||||||
├── src/ # 播放器源码(ES Module,2026-07 由单文件拆分而来)
|
├── src/ # 播放器源码(ES Module,2026-07 由单文件拆分而来)
|
||||||
│ ├── index.js # 入口:export default moeplayerEmbed
|
│ ├── index.js # 入口:export default moeplayerEmbed
|
||||||
│ ├── language.js # 默认中文语言包
|
│ ├── language.js # 默认中文语言包
|
||||||
│ ├── defaults.js # videoObjectDefault 默认配置
|
│ ├── defaults.js # videoObjectDefault 默认配置
|
||||||
│ ├── core/moeplayerEmbed.js # 主函数,【整体搬自旧单文件,内部未拆分,逻辑零改动】
|
│ ├── core/moeplayerEmbed.js # 主函数,【整体搬自旧单文件,内部未拆分,逻辑零改动】
|
||||||
│ └── utils/ # 工具函数:type/dom/format/net/cookie/path
|
│ ├── utils/ # 工具函数:type/dom/format/net/cookie/path
|
||||||
|
│ └── css/ # 皮肤源码(2026-07 皮肤系统现代化:CSS 变量 + SVG mask 图标)
|
||||||
|
│ ├── base.css # 三皮肤共用结构样式 + 默认主题变量(--moe-* 定义在 .moeplayer 等作用域)
|
||||||
|
│ └── themes/ # default.css / red.css / ixigua.css,只覆盖 --moe-* 变量值
|
||||||
├── moeplayer/ # 播放器本体,部署时整个上传到网站
|
├── moeplayer/ # 播放器本体,部署时整个上传到网站
|
||||||
│ ├── js/moeplayer.js # UMD 产物,【由 npm run build 自动生成,勿手改】
|
│ ├── js/moeplayer.js # UMD 产物,【由 npm run build 自动生成,勿手改】
|
||||||
│ ├── js/moeplayer.min.js # 压缩版,同上
|
│ ├── js/moeplayer.min.js # 压缩版,同上
|
||||||
│ ├── css/moeplayer.css # 默认皮肤；另有 moeplayer.red.css、moeplayer.ixigua.css
|
│ ├── css/moeplayer.css # 默认皮肤,【由 build-css.js 拼接生成,勿手改】
|
||||||
│ ├── css/images/ # 皮肤图片资源
|
│ ├── css/moeplayer.red.css # 红色皮肤,同上
|
||||||
|
│ ├── css/moeplayer.ixigua.css # 西瓜皮肤(浅色),同上
|
||||||
│ ├── language/ # 语言包：zh.cn.js（默认内嵌）、zh.hk.js、en.js
|
│ ├── language/ # 语言包：zh.cn.js（默认内嵌）、zh.hk.js、en.js
|
||||||
│ ├── hls.js/ # hls.min.js,【由构建从 npm 包拷贝,勿手改】
|
│ ├── hls.js/ # hls.min.js,【由构建从 npm 包拷贝,勿手改】
|
||||||
│ ├── flv.js/ # flv.min.js,同上（flv.js 已停维护,阶段4将移除）
|
│ ├── flv.js/ # flv.min.js,同上（flv.js 已停维护,阶段4将移除）
|
||||||
@@ -36,10 +41,12 @@ MoePlayer —— 一款中文友好的开源网页视频播放器（MIT 协议
|
|||||||
## 构建与依赖
|
## 构建与依赖
|
||||||
|
|
||||||
- 安装：`npm install`
|
- 安装：`npm install`
|
||||||
- 构建：`npm run build`(即 `rollup -c && node scripts/copy-libs.js`) —— 做两件事：
|
- 构建：`npm run build`(即 `rollup -c && node scripts/build-css.js && node scripts/copy-libs.js`) —— 做三件事：
|
||||||
1. rollup 把 `src/` 的 ES Module 打包为 UMD：`moeplayer/js/moeplayer.js`,并经 @rollup/plugin-terser 生成 `moeplayer.min.js`(保留 `软件名称|版权` 头部注释)
|
1. rollup 把 `src/` 的 ES Module 打包为 UMD：`moeplayer/js/moeplayer.js`,并经 @rollup/plugin-terser 生成 `moeplayer.min.js`(保留 `软件名称|版权` 头部注释)
|
||||||
2. `scripts/copy-libs.js` 从 node_modules 拷贝 hls.js / flv.js / mpegts.js 的产物及 LICENSE 到 `moeplayer/` 对应目录
|
2. `scripts/build-css.js` 把 `src/css/base.css` 与各主题(`src/css/themes/*.css`)拼接为自包含的 `moeplayer/css/moeplayer[.red|.ixigua].css`(加版权注释头,用户只引一个文件,无 @import)
|
||||||
- **改动 `src/` 后必须执行 `npm run build`** 重新生成两个产物；`moeplayer/js/` 下两个 js 均为生成物,勿手改
|
3. `scripts/copy-libs.js` 从 node_modules 拷贝 hls.js / flv.js / mpegts.js 的产物及 LICENSE 到 `moeplayer/` 对应目录
|
||||||
|
- **改动 `src/` 后必须执行 `npm run build`** 重新生成产物；`moeplayer/js/` 与 `moeplayer/css/` 下的 js、css 均为生成物,勿手改
|
||||||
|
- 皮肤机制：全部主题相关值是 CSS 自定义属性(`--moe-*`),定义在 `.moeplayer, .moeplayer-menu, .moeplayer-error` 作用域(菜单/错误框挂在 body 下)；按钮图标为 SVG data-URI + CSS mask,颜色跟随 `--moe-icon-color`,不再使用雪碧图 PNG；换肤=覆盖变量,新增主题=在 `src/css/themes/` 加一个变量文件并登记到 `scripts/build-css.js` 的 themes 清单
|
||||||
- 升级依赖：改 `package.json` 版本号后 `npm install && npm run build`
|
- 升级依赖：改 `package.json` 版本号后 `npm install && npm run build`
|
||||||
- 运行时机制：播放器用 `getPath()` 定位自身所在目录，按需动态 `<script>` 加载同级 `hls.js/` 等目录里的文件，库挂全局变量（`Hls`/`flvjs`/`mpegts`）。**这个目录结构约定不能破坏**
|
- 运行时机制：播放器用 `getPath()` 定位自身所在目录，按需动态 `<script>` 加载同级 `hls.js/` 等目录里的文件，库挂全局变量（`Hls`/`flvjs`/`mpegts`）。**这个目录结构约定不能破坏**
|
||||||
- rollup 配置要点：`treeshake: false`(完整保留所有工具函数,与旧单文件一致)；UMD `name: 'MoePlayer'`、`exports: 'default'`,CJS/AMD/全局变量行为与旧 UMD 等价
|
- rollup 配置要点：`treeshake: false`(完整保留所有工具函数,与旧单文件一致)；UMD `name: 'MoePlayer'`、`exports: 'default'`,CJS/AMD/全局变量行为与旧 UMD 等价
|
||||||
@@ -53,7 +60,7 @@ MoePlayer —— 一款中文友好的开源网页视频播放器（MIT 协议
|
|||||||
- 注释与文档使用中文（项目惯例）
|
- 注释与文档使用中文（项目惯例）
|
||||||
- `src/` 为 ES Module 源码,但函数体保持旧单文件的 ES5 风格（`var`、函数式）,阶段 2/3 重构前不要在函数体内引入 ES6+ 语法；只允许模块级的 `import`/`export` 语句
|
- `src/` 为 ES Module 源码,但函数体保持旧单文件的 ES5 风格（`var`、函数式）,阶段 2/3 重构前不要在函数体内引入 ES6+ 语法；只允许模块级的 `import`/`export` 语句
|
||||||
- 主函数 `moeplayerEmbed` 整体搬迁、内部逻辑零改动；语言包替换机制（`window.moeplayerLanguage`）在其内部,勿动
|
- 主函数 `moeplayerEmbed` 整体搬迁、内部逻辑零改动；语言包替换机制（`window.moeplayerLanguage`）在其内部,勿动
|
||||||
- `moeplayer/` 下由构建生成的文件（js 两个产物、hls.js/flv.js/mpegts.js 目录内容）不要手动修改
|
- `moeplayer/` 下由构建生成的文件（js 两个产物、css 三个皮肤、hls.js/flv.js/mpegts.js 目录内容）不要手动修改
|
||||||
|
|
||||||
## Git 约定
|
## Git 约定
|
||||||
|
|
||||||
|
|||||||
+103
-35
@@ -1,17 +1,112 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="zh-CN">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>MoePlayer</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>MoePlayer - 中文友好的网页视频播放器</title>
|
||||||
<link id="skin" type="text/css" rel="stylesheet" href="moeplayer/css/moeplayer.css" />
|
<link id="skin" type="text/css" rel="stylesheet" href="moeplayer/css/moeplayer.css" />
|
||||||
<!--
|
<!--
|
||||||
如果需要使用其它语言，请在此处引入相应的js,比如:<script type="text/javascript" src="moeplayer/language/en.js" charset="UTF-8"></script>
|
如果需要使用其它语言，请在此处引入相应的js,比如:<script type="text/javascript" src="moeplayer/language/en.js" charset="UTF-8"></script>
|
||||||
-->
|
-->
|
||||||
<script type="text/javascript" src="moeplayer/js/moeplayer.min.js" charset="UTF-8"></script>
|
<script type="text/javascript" src="moeplayer/js/moeplayer.min.js" charset="UTF-8"></script>
|
||||||
|
<style>
|
||||||
|
/* ===== 演示页样式,与播放器无关 ===== */
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||||
|
background: #0f1216;
|
||||||
|
color: #d7dde5;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.wrap { max-width: 860px; margin: 0 auto; padding: 40px 20px 60px; }
|
||||||
|
header { text-align: center; margin-bottom: 32px; }
|
||||||
|
header h1 { font-size: 32px; color: #fff; letter-spacing: 1px; }
|
||||||
|
header h1 em { color: #00a1d6; font-style: normal; }
|
||||||
|
header p { margin-top: 8px; color: #8a94a3; font-size: 14px; }
|
||||||
|
.player-card {
|
||||||
|
background: #171c23;
|
||||||
|
border: 1px solid #232a35;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 16px;
|
||||||
|
box-shadow: 0 12px 40px rgba(0,0,0,.45);
|
||||||
|
}
|
||||||
|
.video { width: 100%; height: 460px; border-radius: 8px; overflow: hidden; }
|
||||||
|
section { margin-top: 28px; }
|
||||||
|
section h2 {
|
||||||
|
font-size: 14px; color: #8a94a3; font-weight: 600;
|
||||||
|
text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||||
|
.btns button {
|
||||||
|
background: #1f2630; color: #d7dde5;
|
||||||
|
border: 1px solid #2c3644; border-radius: 6px;
|
||||||
|
padding: 8px 16px; font-size: 13px; cursor: pointer;
|
||||||
|
transition: all .15s;
|
||||||
|
}
|
||||||
|
.btns button:hover { background: #00a1d6; border-color: #00a1d6; color: #fff; }
|
||||||
|
.state {
|
||||||
|
margin-top: 14px; padding: 10px 14px;
|
||||||
|
background: #171c23; border: 1px solid #232a35; border-radius: 8px;
|
||||||
|
font-size: 13px; color: #00a1d6; min-height: 40px; line-height: 20px;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
margin-top: 40px; text-align: center;
|
||||||
|
font-size: 12px; color: #5c6675; line-height: 1.9;
|
||||||
|
}
|
||||||
|
footer a { color: #8a94a3; }
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.video { height: 240px; }
|
||||||
|
header h1 { font-size: 24px; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="wrap">
|
||||||
|
<header>
|
||||||
|
<h1><em>Moe</em>Player</h1>
|
||||||
|
<p>中文友好的网页视频播放器 · mp4 / flv / m3u8 / ts · PC 与移动端 H5</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="player-card">
|
||||||
|
<div class="video">播放容器</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>皮肤切换</h2>
|
||||||
|
<div class="btns">
|
||||||
|
<button type="button" onclick="changeSkin('moeplayer.css')">默认</button>
|
||||||
|
<button type="button" onclick="changeSkin('moeplayer.red.css')">红色</button>
|
||||||
|
<button type="button" onclick="changeSkin('moeplayer.ixigua.css')">西瓜</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>控制示例</h2>
|
||||||
|
<div class="btns">
|
||||||
|
<button type="button" onclick="player.play()">播放</button>
|
||||||
|
<button type="button" onclick="player.pause()">暂停</button>
|
||||||
|
<button type="button" onclick="player.seek(20)">跳转 20s</button>
|
||||||
|
<button type="button" onclick="player.volume(0.6)">音量 0.6</button>
|
||||||
|
<button type="button" onclick="player.muted()">静音</button>
|
||||||
|
<button type="button" onclick="player.exitMuted()">恢复音量</button>
|
||||||
|
<button type="button" onclick="player.full()">全屏</button>
|
||||||
|
<button type="button" onclick="player.webFull()">页面全屏</button>
|
||||||
|
<button type="button" onclick="player.theatre()">剧场模式</button>
|
||||||
|
<button type="button" onclick="player.exitTheatre()">退出剧场</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>事件监听</h2>
|
||||||
|
<div class="state" id="state">等待播放器事件…</div>
|
||||||
|
<div class="state" id="state2" style="margin-top:8px"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>MoePlayer · MIT 开源协议 · fork 自 <a href="https://www.ckplayer.com" target="_blank" rel="noopener">ckplayer</a>,感谢原作者 niandeng</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="video" style="width: 100%; height: 500px;max-width: 800px;">播放容器</div>
|
|
||||||
<script>
|
<script>
|
||||||
//调用开始
|
//调用开始
|
||||||
var videoObject = {
|
var videoObject = {
|
||||||
@@ -20,10 +115,13 @@
|
|||||||
video:'video/lc.mp4'//视频地址
|
video:'video/lc.mp4'//视频地址
|
||||||
};
|
};
|
||||||
var player=new MoePlayer(videoObject)//调用播放器并赋值给变量player
|
var player=new MoePlayer(videoObject)//调用播放器并赋值给变量player
|
||||||
|
//皮肤切换:替换引入的CSS文件
|
||||||
|
function changeSkin(css){
|
||||||
|
document.getElementById('skin').href='moeplayer/css/'+css;
|
||||||
|
}
|
||||||
/*
|
/*
|
||||||
* ===============================================================================================
|
* ===============================================================================================
|
||||||
* 以上代码已完成调用演示，下方的代码是演示监听动作和外部控制的部分
|
* 以下代码演示监听动作和外部控制
|
||||||
* ===============================================================================================
|
|
||||||
* ===============================================================================================
|
* ===============================================================================================
|
||||||
*/
|
*/
|
||||||
player.play(function(){
|
player.play(function(){
|
||||||
@@ -44,36 +142,6 @@
|
|||||||
player.ended(function(){
|
player.ended(function(){
|
||||||
document.getElementById('state').innerHTML='监听到播放结束';
|
document.getElementById('state').innerHTML='监听到播放结束';
|
||||||
});
|
});
|
||||||
//皮肤切换:替换引入的CSS文件
|
|
||||||
function changeSkin(css){
|
|
||||||
document.getElementById('skin').href='moeplayer/css/'+css;
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
<p>以下链接指向原 ckplayer 项目：</p>
|
|
||||||
<p>官网：<a href="https://www.ckplayer.com" target="_blank">www.ckplayer.com</a></p>
|
|
||||||
<p>手册：<a href="https://www.ckplayer.com/manual/" target="_blank">www.ckplayer.com/manual/</a></p>
|
|
||||||
<p>社区：<a href="https://bbs.ckplayer.com/" target="_blank">bbs.ckplayer.com</a></p>
|
|
||||||
<p>全功能演示：<a href="https://www.ckplayer.com/demo.html" target="_blank">www.ckplayer.com/demo.html</a></p>
|
|
||||||
<p>皮肤切换：</p>
|
|
||||||
<p>
|
|
||||||
<button type="button" onclick="changeSkin('moeplayer.css')">默认</button>
|
|
||||||
<button type="button" onclick="changeSkin('moeplayer.red.css')">红色</button>
|
|
||||||
<button type="button" onclick="changeSkin('moeplayer.ixigua.css')">西瓜</button>
|
|
||||||
</p>
|
|
||||||
<p>控制示例：</p>
|
|
||||||
<p>
|
|
||||||
<button type="button" onclick="player.play()" >播放</button>
|
|
||||||
<button type="button" onclick="player.pause()" >暂停</button>
|
|
||||||
<button type="button" onclick="player.seek(20)" >跳转</button>
|
|
||||||
<button type="button" onclick="player.volume(0.6)">修改音量</button>
|
|
||||||
<button type="button" onclick="player.muted()">静音</button>
|
|
||||||
<button type="button" onclick="player.exitMuted()">恢复音量</button>
|
|
||||||
<button type="button" onclick="player.full()">全屏</button>
|
|
||||||
<button type="button" onclick="player.webFull()">页面全屏</button>
|
|
||||||
<button type="button" onclick="player.theatre()">剧场模式</button>
|
|
||||||
<button type="button" onclick="player.exitTheatre()">退出剧场模式</button>
|
|
||||||
</p>
|
|
||||||
<p id="state"></p>
|
|
||||||
<p id="state2"></p>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
+508
-521
File diff suppressed because it is too large
Load Diff
+535
-571
File diff suppressed because it is too large
Load Diff
+509
-522
File diff suppressed because it is too large
Load Diff
+1
-1
@@ -4,7 +4,7 @@
|
|||||||
"description": "一款中文友好的网页视频播放器(fork 自 ckplayer X3),支持 mp4/flv/m3u8/ts,可搭配 Moodle media 插件使用",
|
"description": "一款中文友好的网页视频播放器(fork 自 ckplayer X3),支持 mp4/flv/m3u8/ts,可搭配 Moodle media 插件使用",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "rollup -c && node scripts/copy-libs.js"
|
"build": "rollup -c && node scripts/build-css.js && node scripts/copy-libs.js"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"flv.js": "^1.6.2",
|
"flv.js": "^1.6.2",
|
||||||
|
|||||||
@@ -0,0 +1,48 @@
|
|||||||
|
/*
|
||||||
|
* 构建脚本(第二步)
|
||||||
|
* 功能：把 src/css/base.css 与各主题(src/css/themes/*.css)拼接为自包含的皮肤产物
|
||||||
|
* 输出到 moeplayer/css/(moeplayer.css / moeplayer.red.css / moeplayer.ixigua.css)
|
||||||
|
* 用户只需引用一个文件,无需 @import;拼接时自动加上版权注释头
|
||||||
|
* 第一步(rollup 打包压缩)见 rollup.config.js,第三步(拷贝运行时依赖)见 scripts/copy-libs.js
|
||||||
|
* 用法：npm run build(即 rollup -c && node scripts/build-css.js && node scripts/copy-libs.js)
|
||||||
|
*/
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
const root = path.resolve(__dirname, '..');
|
||||||
|
const cssSrcDir = path.join(root, 'src', 'css');
|
||||||
|
const cssOutDir = path.join(root, 'moeplayer', 'css');
|
||||||
|
|
||||||
|
// 版权注释头(与 rollup 产物头部保持一致)
|
||||||
|
const header = '/*\n' +
|
||||||
|
' * 软件名称：MoePlayer\n' +
|
||||||
|
' * 版本:X3\n' +
|
||||||
|
' * 版权：MoePlayer 项目(fork 自 ckplayer, www.ckplayer.com)\n' +
|
||||||
|
' * 开源协议：MIT\n' +
|
||||||
|
' * 本文件由 npm run build 自动生成(src/css/base.css + 主题),请勿手动修改\n' +
|
||||||
|
' */\n';
|
||||||
|
|
||||||
|
// 皮肤产物清单：[主题文件名, 输出文件名, 皮肤说明]
|
||||||
|
const themes = [
|
||||||
|
['default.css', 'moeplayer.css', '默认(深色控制条 + 蓝色 accent)'],
|
||||||
|
['red.css', 'moeplayer.red.css', '红色(深色控制条 + 红色 accent)'],
|
||||||
|
['ixigua.css', 'moeplayer.ixigua.css', '西瓜(浅色控制条 + 深色图标 + 红色 accent)']
|
||||||
|
];
|
||||||
|
|
||||||
|
function buildCss() {
|
||||||
|
const base = fs.readFileSync(path.join(cssSrcDir, 'base.css'), 'utf8');
|
||||||
|
for (const [themeFile, outFile, desc] of themes) {
|
||||||
|
const theme = fs.readFileSync(path.join(cssSrcDir, 'themes', themeFile), 'utf8');
|
||||||
|
const out = header + base + '\n' + theme;
|
||||||
|
fs.writeFileSync(path.join(cssOutDir, outFile), out);
|
||||||
|
console.log('生成皮肤: moeplayer/css/' + outFile + ' (' + desc + ')');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
buildCss();
|
||||||
|
console.log('皮肤构建完成');
|
||||||
|
} catch (err) {
|
||||||
|
console.error('皮肤构建失败:', err);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
+1561
File diff suppressed because it is too large
Load Diff
@@ -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);
|
||||||
|
}
|
||||||
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user