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
AGENTS.md
+15 -8
View File
@@ -14,18 +14,23 @@ MoePlayer —— 一款中文友好的开源网页视频播放器（MIT 协议
├── index.html # 演示/测试页（含 API 调用示例）
├── package.json # npm 工程化入口,依赖与构建脚本
├── 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 由单文件拆分而来)
│ ├── index.js # 入口:export default moeplayerEmbed
│ ├── language.js # 默认中文语言包
│ ├── defaults.js # videoObjectDefault 默认配置
│ ├── 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/ # 播放器本体,部署时整个上传到网站
│ ├── js/moeplayer.js # UMD 产物,【由 npm run build 自动生成,勿手改】
│ ├── js/moeplayer.min.js # 压缩版,同上
│ ├── css/moeplayer.css # 默认皮肤；另有 moeplayer.red.css、moeplayer.ixigua.css
│ ├── css/images/ # 皮肤图片资源
│ ├── css/moeplayer.css # 默认皮肤,【由 build-css.js 拼接生成,勿手改】
│ ├── css/moeplayer.red.css # 红色皮肤,同上
│ ├── css/moeplayer.ixigua.css # 西瓜皮肤(浅色),同上
│ ├── language/ # 语言包：zh.cn.js（默认内嵌）、zh.hk.js、en.js
│ ├── hls.js/ # hls.min.js,【由构建从 npm 包拷贝,勿手改】
│ ├── flv.js/ # flv.min.js,同上（flv.js 已停维护,阶段4将移除）
@@ -36,10 +41,12 @@ MoePlayer —— 一款中文友好的开源网页视频播放器（MIT 协议
## 构建与依赖
- 安装：`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`(保留 `软件名称|版权` 头部注释)
2. `scripts/copy-libs.js` 从 node_modules 拷贝 hls.js / flv.js / mpegts.js 的产物及 LICENSE 到 `moeplayer/` 对应目录
- **改动 `src/` 后必须执行 `npm run build`** 重新生成两个产物；`moeplayer/js/` 下两个 js 均为生成物,勿手改
2. `scripts/build-css.js` 把 `src/css/base.css` 与各主题(`src/css/themes/*.css`)拼接为自包含的 `moeplayer/css/moeplayer[.red|.ixigua].css`(加版权注释头,用户只引一个文件,无 @import)
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`
- 运行时机制：播放器用 `getPath()` 定位自身所在目录，按需动态 `<script>` 加载同级 `hls.js/` 等目录里的文件，库挂全局变量（`Hls`/`flvjs`/`mpegts`）。**这个目录结构约定不能破坏**
- 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` 语句
- 主函数 `moeplayerEmbed` 整体搬迁、内部逻辑零改动；语言包替换机制（`window.moeplayerLanguage`）在其内部,勿动
- `moeplayer/` 下由构建生成的文件（js 两个产物、hls.js/flv.js/mpegts.js 目录内容）不要手动修改
- `moeplayer/` 下由构建生成的文件（js 两个产物、css 三个皮肤、hls.js/flv.js/mpegts.js 目录内容）不要手动修改
## Git 约定
index.html
+147 -79
View File
@@ -1,79 +1,147 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MoePlayer</title>
<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>
-->
<script type="text/javascript" src="moeplayer/js/moeplayer.min.js" charset="UTF-8"></script>
</head>
<body>
<div class="video" style="width: 100%; height: 500px;max-width: 800px;">播放容器</div>
<script>
//调用开始
var videoObject = {
container: '.video', //视频容器
poster:'video/poster.png',//封面图片
video:'video/lc.mp4'//视频地址
};
var player=new MoePlayer(videoObject)//调用播放器并赋值给变量player
/*
* ===============================================================================================
* 以上代码已完成调用演示，下方的代码是演示监听动作和外部控制的部分
* ===============================================================================================
* ===============================================================================================
*/
player.play(function(){
document.getElementById('state').innerHTML='监听到播放';
});
player.pause(function(){
document.getElementById('state').innerHTML='监听到暂停';
});
player.volume(function(vol){
document.getElementById('state').innerHTML='监听到音量改变：'+vol;
});
player.muted(function(b){
document.getElementById('state2').innerHTML='监听到静音状态：'+b;
});
player.full(function(b){
document.getElementById('state').innerHTML='监听到全屏状态：'+b;
});
player.ended(function(){
document.getElementById('state').innerHTML='监听到播放结束';
});
//皮肤切换:替换引入的CSS文件
function changeSkin(css){
document.getElementById('skin').href='moeplayer/css/'+css;
}
</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>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<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" />
<!--
如果需要使用其它语言，请在此处引入相应的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>
<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>
<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>
<script>
//调用开始
var videoObject = {
container: '.video', //视频容器
poster:'video/poster.png',//封面图片
video:'video/lc.mp4'//视频地址
};
var player=new MoePlayer(videoObject)//调用播放器并赋值给变量player
//皮肤切换:替换引入的CSS文件
function changeSkin(css){
document.getElementById('skin').href='moeplayer/css/'+css;
}
/*
* ===============================================================================================
* 以下代码演示监听动作和外部控制
* ===============================================================================================
*/
player.play(function(){
document.getElementById('state').innerHTML='监听到播放';
});
player.pause(function(){
document.getElementById('state').innerHTML='监听到暂停';
});
player.volume(function(vol){
document.getElementById('state').innerHTML='监听到音量改变：'+vol;
});
player.muted(function(b){
document.getElementById('state2').innerHTML='监听到静音状态：'+b;
});
player.full(function(b){
document.getElementById('state').innerHTML='监听到全屏状态：'+b;
});
player.ended(function(){
document.getElementById('state').innerHTML='监听到播放结束';
});
</script>
</body>
</html>
moeplayer/css/images/adclose.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 KiB

moeplayer/css/images/buffer.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.4 KiB

moeplayer/css/images/loading.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

moeplayer/css/images/logo.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.0 KiB

moeplayer/css/images/moeplayer.48.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

moeplayer/css/images/moeplayer.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

moeplayer/css/images/moeplayer_ixigua.48.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.9 KiB

moeplayer/css/images/moeplayer_ixigua.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

moeplayer/css/images/moeplayer_red.48.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

moeplayer/css/images/moeplayer_red.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

moeplayer/css/images/play.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

moeplayer/css/moeplayer.css
+1596 -1609
View File
File diff suppressed because it is too large Load Diff
moeplayer/css/moeplayer.ixigua.css
+1671 -1707
View File
File diff suppressed because it is too large Load Diff
moeplayer/css/moeplayer.red.css
+1596 -1609
View File
File diff suppressed because it is too large Load Diff
package.json
+1 -1
View File
@@ -4,7 +4,7 @@
"description": "一款中文友好的网页视频播放器(fork 自 ckplayer X3),支持 mp4/flv/m3u8/ts,可搭配 Moodle media 插件使用",
"license": "MIT",
"scripts": {
"build": "rollup -c && node scripts/copy-libs.js"
"build": "rollup -c && node scripts/build-css.js && node scripts/copy-libs.js"
},
"dependencies": {
"flv.js": "^1.6.2",
scripts/build-css.js
+48
View File
@@ -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);
}
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);
}