阶段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 演示页重做:深色现代设计,移除原项目链接

scripts/build-css.js

@@ -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);
+}