diff --git a/AGENTS.md b/AGENTS.md index 3f8a58b..7824a86 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -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()` 定位自身所在目录，按需动态 ` - - - -
播放容器
- -

以下链接指向原 ckplayer 项目：

-

官网：www.ckplayer.com

-

手册：www.ckplayer.com/manual/

-

社区：bbs.ckplayer.com

-

全功能演示：www.ckplayer.com/demo.html

-

皮肤切换：

-

- - - -

-

控制示例：

-

- - - - - - - - - - -

-

-

- - + + + + + + MoePlayer - 中文友好的网页视频播放器 + + + + + + +
+
+

MoePlayer

+

中文友好的网页视频播放器 · mp4 / flv / m3u8 / ts · PC 与移动端 H5

+
+ +
+
播放容器
+
+ +
+

皮肤切换

+
+ + + +
+
+ +
+

控制示例

+
+ + + + + + + + + + +
+
+ +
+

事件监听

+
等待播放器事件…
+
+
+ + +
+ + + + diff --git a/moeplayer/css/images/adclose.png b/moeplayer/css/images/adclose.png deleted file mode 100644 index b3c0b7b..0000000 Binary files a/moeplayer/css/images/adclose.png and /dev/null differ diff --git a/moeplayer/css/images/buffer.png b/moeplayer/css/images/buffer.png deleted file mode 100644 index 198d4a1..0000000 Binary files a/moeplayer/css/images/buffer.png and /dev/null differ diff --git a/moeplayer/css/images/loading.png b/moeplayer/css/images/loading.png deleted file mode 100644 index fe16ca3..0000000 Binary files a/moeplayer/css/images/loading.png and /dev/null differ diff --git a/moeplayer/css/images/logo.png b/moeplayer/css/images/logo.png deleted file mode 100644 index 4ca44d2..0000000 Binary files a/moeplayer/css/images/logo.png and /dev/null differ diff --git a/moeplayer/css/images/moeplayer.48.png b/moeplayer/css/images/moeplayer.48.png deleted file mode 100644 index 650c117..0000000 Binary files a/moeplayer/css/images/moeplayer.48.png and /dev/null differ diff --git a/moeplayer/css/images/moeplayer.png b/moeplayer/css/images/moeplayer.png deleted file mode 100644 index 15940cf..0000000 Binary files a/moeplayer/css/images/moeplayer.png and /dev/null differ diff --git a/moeplayer/css/images/moeplayer_ixigua.48.png b/moeplayer/css/images/moeplayer_ixigua.48.png deleted file mode 100644 index 7301e36..0000000 Binary files a/moeplayer/css/images/moeplayer_ixigua.48.png and /dev/null differ diff --git a/moeplayer/css/images/moeplayer_ixigua.png b/moeplayer/css/images/moeplayer_ixigua.png deleted file mode 100644 index 818c261..0000000 Binary files a/moeplayer/css/images/moeplayer_ixigua.png and /dev/null differ diff --git a/moeplayer/css/images/moeplayer_red.48.png b/moeplayer/css/images/moeplayer_red.48.png deleted file mode 100644 index 5f226ac..0000000 Binary files a/moeplayer/css/images/moeplayer_red.48.png and /dev/null differ diff --git a/moeplayer/css/images/moeplayer_red.png b/moeplayer/css/images/moeplayer_red.png deleted file mode 100644 index d872a0a..0000000 Binary files a/moeplayer/css/images/moeplayer_red.png and /dev/null differ diff --git a/moeplayer/css/images/play.png b/moeplayer/css/images/play.png deleted file mode 100644 index f9e111b..0000000 Binary files a/moeplayer/css/images/play.png and /dev/null differ diff --git a/moeplayer/css/moeplayer.css b/moeplayer/css/moeplayer.css index d215af9..68b6953 100644 --- a/moeplayer/css/moeplayer.css +++ b/moeplayer/css/moeplayer.css @@ -1,1609 +1,1596 @@ -.moeplayer-error{ - position: fixed; - z-index: 9999999; - left: 10px; - bottom: 10px; - width: auto; - height: 38px; - line-height: 38px; - padding: 0 .85rem; - background: rgb(0,0,0,.9); - border-radius: .25rem; - color: #FFF; - font-size: 14px; - white-space: nowrap; -} -.moeplayer{ - width: 100%; - height: 100%; - float: left; - background: #000; - overflow: hidden; -} -.moeplayer .moe-main.moe-nocursor{ - cursor: none; -} -.moeplayer-smallwindow{ - position: fixed; - z-index: 9999999; - width: 420px; - max-width: 100%; - height: 266px; - right: 10px; - bottom: 10px; -} -.moeplayer .moe-main{ - width: 100%; - height: 100%; - overflow: hidden; - background: #000; - position: relative; -} -.moeplayer .moe-main .moe-video{ - width: 100%; - height: 100%; - overflow: hidden; - position:absolute; - z-index: 1; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; -} -.moeplayer .moe-main .moe-video video,.moeplayer .moe-main .moe-video canvas{ - width: 100%; - height: 100%; -} -.moeplayer .moe-main .moe-error{ - width: 100%; - height: 80px; - line-height: 35px; - text-align: center; - color: #FFF; - position:absolute; - z-index: 70; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; - overflow: hidden; -} -.moeplayer .moe-main .moe-logo{ - position:absolute; - right: 20px; - top:20px; - z-index: 400; -} -.moeplayer .moe-main .moe-loading{ - position:absolute; - top:0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - z-index: 80; - width: 80px; - height: 80px; - border-radius: 50%; - background: url(images/loading.png) no-repeat center center; - background-size: 100% 100%; - animation: moe-Circle 1.5s linear infinite; - -webkit-animation: moe-Circle 1.5s linear infinite -} -.moeplayer .moe-main .moe-center-play{ - background: url(images/play.png) no-repeat 70% center; - background-size:60% 60%; - border: 8px solid rgba(255,255,255,.3); - border-radius: 50%; - box-sizing:border-box; - -moz-box-sizing:border-box; /* Firefox */ - -webkit-box-sizing:border-box; /* Safari */ - width: 80px; - height: 80px; - position: absolute; - display: none; - z-index: 90; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; - cursor: pointer; - transition: .2s; -} -.moeplayer .moe-main.moe-main-full .moe-center-play{ - width: 100px; - height: 100px; -} -.moeplayer .moe-main .moe-center-play:hover{ - width: 100px; - height: 100px; - transition: 0.2s; -} -.moeplayer .moe-main.moe-main-full .moe-center-play:hover{ - width: 120px; - height: 120px; -} -.moeplayer .moe-main .moe-buffer{ - background: url(images/buffer.png) no-repeat center center; - background-size:100% 100%; - border-radius: 50%; - width: 60px; - height: 60px; - position: absolute; - z-index: 100; - top:0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - display: none; - animation: moe-Circle 1s linear infinite; - -webkit-animation: moe-Circle 1s linear infinite -} -.moeplayer .moe-main .moe-message{ - position: absolute; - z-index: 240; - left:5px; - bottom: 78px; - padding: 0 1rem; - line-height: 30px; - height: 30px; - width: auto; - min-width: 1px; - border-radius: .25rem; - background: rgba(0,0,0,.6); - font-size: 14px; - color: #FFF; - display: none; - white-space:nowrap; -} -.moeplayer .moe-main .moe-message-right{ - left:auto; - right: 5px; -} -.moeplayer .moe-main.moe-main-full .moe-message{ - font-size: 18px; - bottom: 100px; -} -.moeplayer .moe-main .moe-tip{ - width: auto; - height: auto; - position: absolute; - z-index: 230; - display: none; - margin-bottom: 1px; -} -.moeplayer .moe-main .moe-tip .moe-content{ - width: auto; - height: auto; - white-space: nowrap; - min-width: 1px; - background: rgba(0,0,0,.6); - font-size: 14px; - color: #FFF; - line-height: 32px; - height: 32px; - padding: 0 15px; -} -.moeplayer .moe-main .moe-tip .moe-content-float-auto{ - border-radius: 5px; - margin: auto; -} -.moeplayer .moe-main .moe-tip .moe-content-float-left{ - border-radius: 5px; - float: left; -} -.moeplayer .moe-main.moe-main-full .moe-tip .moe-content{ - font-size: 18px; -} -.moeplayer .moe-main .moe-tip .moe-triangle{ - width: 0px; - height: 0px; -} -.moeplayer .moe-main .moe-tip .moe-triangle-auto{ - border-left: 8px solid transparent; - border-top: 8px solid rgba(0, 0, 0,.6); - border-right: 8px solid transparent; - margin: auto; -} -.moeplayer .moe-main .moe-tip .moe-triangle-left{ - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 8px solid rgba(0, 0, 0,.6); - float: left; - margin-top: 10px; -} -.moeplayer .moe-main .moe-preview{ - position: absolute; - z-index: 210; - width: 100%; - left:0; - bottom: 64px; - overflow: hidden; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-preview{ - bottom: 86px; -} -.moeplayer .moe-main .moe-preview-load-img{ - position: absolute; - z-index: 210; - top:110%; -} -.moeplayer .moe-main .moe-preview .moe-preview-bg{ - position: absolute; - z-index: 1; - top:0; - float: left; - transition: .2s; -} -.moeplayer .moe-main .moe-preview .moe-preview-bg .moe-preview-img{ - background-repeat: no-repeat ; - float: left; -} -.moeplayer .moe-main .moe-preview .moe-preview-frame{ - position: absolute; - z-index: 2; - top:0; - left:-1000px; - border:4px solid #0078ff; - box-sizing:content-box; - -moz-box-sizing:content-box; /* Firefox */ - -webkit-box-sizing:content-box; /* Safari */ -} -.moeplayer .moe-main .moe-prompt-words{ - position: absolute; - z-index: 220; - width: 213px; - line-height: 23px; - font-size: 14px; - color: #FFF; - background: rgba(0, 0, 0,.6); - overflow: hidden; - display: none; - margin-bottom: 10px; - border-radius: 3px; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-duration: .2s; - animation-duration: .2s; - -webkit-animation-name: moe-bounceIn; - animation-name: moe-bounceIn; -} -.moeplayer .moe-main .moe-prompt-words .moe-prompt-content{ - padding: 5px; -} -.moeplayer .moe-main .moe-layer{ - position: absolute; - z-index: 101; -} -.moeplayer .moe-main .moe-tempTime{ - position: absolute; - z-index: 20; - left:10px; - bottom: 5px; - display: none; - font-size: 14px; - line-height: 28px; - color: #FFF; -} -/*关于*/ -.moeplayer .moe-main .moe-about{ - position: absolute; - z-index: 200; - width: 50%; - max-width: 600px; - min-width: 400px; - left: 1rem; - top: 1rem; - background: rgba(0,0,0,.6); - padding: 1rem 0; - display: none; -} -.moeplayer .moe-main .moe-about ul{ - padding: 0; - margin: 0; -} -.moeplayer .moe-main .moe-about ul li{ - list-style:none; - color: #FFF; - font-size: 12px; - line-height: 18px; - height: 18px; - padding: 0; - margin: 0; -} -.moeplayer .moe-main .moe-about ul li .moe-about-title{ - width: 100px; - text-align: right; - float: left; - padding-right: .5rem; -} -.moeplayer .moe-main .moe-about ul li .moe-about-content{ - width: auto; - float: left; -} -.moeplayer .moe-main .moe-about .moe-about-bar{ - position: absolute; - z-index: 1; - top: 0; - right: 0; - width: 96px; -} -.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar{ - width: 140px; -} -.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-copy{ - background-position:-1632px 0; -} -.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-copy:hover{ - background-position:-1680px 0; -} -.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar .moe-btn-about-copy{ - background-position:-2380px 0; -} -.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar .moe-btn-about-copy:hover{ - background-position:-2450px 0; -} -.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-close{ - background-position:-1728px 0; -} -.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-close:hover{ - background-position:-1776px 0; -} -.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar .moe-btn-about-close{ - background-position:-2520px 0; -} -.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar .moe-btn-about-close:hover{ - background-position:-2590px 0; -} -/*截图显示容器*/ -.moeplayer .moe-main .moe-screenshot{ - position: absolute; - z-index: 220; - width: auto; - height: 144px; - margin: auto !important; - top: 0; - bottom: 0; - right: 55px; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-screenshot{ - height: 210px; - right: 77px; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-img{ - position: absolute; - z-index: 1; - width: 100%; - height: 100%; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-img img{ - height: 100%; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar{ - position: absolute; - z-index: 1; - width: 100%; - height: 36px; - bottom: 5px; - text-align: center; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn{ - display: inline-block; - overflow: hidden; - border: 0px solid transparent; - border-radius: 5px; - vertical-align: middle; - text-align: center; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - line-height: 30px; - padding: 0px 15px; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - color: #fff; - margin: 0 5px; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn:hover{ - color: #FFFF00; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn:focus{ - outline:0; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-down{ - background-color: #007bff; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-close{ - background-color: #505050; - color: #fff; -} -/*广告*/ -.moeplayer .moe-main .moe-yytf{ - position: absolute; - z-index: 800; - width: 100%; - height: 100%; - left: 0px; - top: 0px; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-front-link{ - width: 100%; - height: 100%; - display: none; - cursor: pointer; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-front-picture{ - width: 100%; - height: 100%; - background: #000; - display: none; - text-align: center; - line-height: 100%; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-front-picture img{ - max-width: 100%; - max-height: 100%; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-top{ - position: absolute; - z-index: 3; - top: 10px; - right: 10px; -} - -.moeplayer .moe-main .moe-yytf .moe-yytf-top div{ - float: right; - margin-left: 10px; - font-size: 14px; - border-radius: 15px; - background: rgba(0,0,0,.6); - padding: 0px 10px; - line-height: 30px; - height: 30px; - color: #FFF; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-top div{ - font-size: 18px; - border-radius: 20px; - line-height: 40px; - height: 40px; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-top .moe-yytf-closetime{ - display: none; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-top .moe-yytf-closead{ - cursor: pointer; - display: none; -} - -/*显示广告时的底部内容*/ -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom{ - position: absolute; - z-index: 3; - bottom: 10px; - right: 10px; -} -/*显示广告时的底部按钮-共用*/ -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn{ - background-color: rgba(0,0,0,.6); - background-image: url(images/moeplayer.png); - background-size: auto 100%; - border: none; - outline: none; - width: 30px; - height: 30px; - cursor: pointer; - background-repeat: no-repeat; - border-radius: 50%; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-btn{ - width: 40px; - height: 40px; -} -/*显示广告时的静音按钮*/ -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit{ - float: right; - width: 30px; - height: 30px; - margin-left: 10px; - overflow: hidden; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit{ - width: 40px; - height: 40px; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted{ - background-position:-180px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted:hover{ - background-position:-210px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted{ - background-position:-240px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted:hover{ - background-position:-270px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted{ - background-position:-240px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted:hover{ - background-position:-280px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted{ - background-position:-320px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted:hover{ - background-position:-360px 0; -} -/*显示广告时的全屏按钮*/ -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit{ - float: right; - width: 30px; - height: 30px; - margin-left: 10px; - overflow: hidden; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit{ - width: 40px; - height: 40px; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full{ - background-position:-300px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full:hover{ - background-position:-330px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull{ - background-position:-360px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull:hover{ - background-position:-390px 0; -} - -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full{ - background-position:-400px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full:hover{ - background-position:-440px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull{ - background-position:-480px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull:hover{ - background-position:-520px 0; -} -/*广告查看详情按钮*/ -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-details{ - float: right; - font-size: 14px; - border-radius: 15px; - background: rgba(0,0,0,.6); - padding: 0 10px; - color: #FFF; - line-height: 30px; - height: 30px; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-details{ - font-size: 18px; - border-radius: 20px; - line-height: 40px; - height: 40px; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-details a{ - color: #FFF; - text-decoration: none; -} -/*暂停广告容器*/ -.moeplayer .moe-main .moe-pause-yytf{ - display: none; - position:absolute; - z-index: 800; - max-width: 100%; - max-height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; -} -.moeplayer .moe-main .moe-pause-yytf img{ - max-width: 100%; - max-height: 100%; -} -.moeplayer .moe-main .moe-pause-close{ - position:absolute; - z-index: 1; - right: -15px; - top:-15px; - width: 30px; - height: 30px; - background-color: transparent; - background-image: url(images/adclose.png); - border: none; - outline: none; - cursor: pointer; - background-repeat: no-repeat ; -} -.moeplayer .moe-main .moe-pause-close:hover{ - background-position:-30px 0; -} -/*右键菜单*/ -.moeplayer-menu{ - width:120px; - background: rgba(50,50,50,.6); - position: absolute; - z-index: 9000; - font-size:14px ; - border: 1px #000 solid; - display: none; -} -.moeplayer-menu .moe-li{ - color: #adadad; - line-height: 35px; - padding: 0 0 0 5px; -} -.moeplayer-menu .moe-li a{ - color: #FFF; - text-decoration: none; -} -.moeplayer-menu .moe-underline{ - border-bottom: 1px #000 solid; -} -/*控制栏*/ -.moeplayer .moe-main .moe-bar{ - position:absolute; - z-index: 260; - left:0px; - bottom:0px; - width: 100%; - height: 48px; - background: rgba(0,0,0,.3); - transition: 0.2s; -} -.moeplayer .moe-main.moe-main-full .moe-bar{ - height: 70px; -} -.moeplayer .moe-main .moe-bar.moe-bar-out{ - bottom: -50px; - transition: 0.2s; -} -.moeplayer .moe-main.moe-main-full .moe-bar.moe-bar-out{ - bottom: -80px; - transition: 0.2s; -} - -/*按钮公用样式*/ -.moeplayer .moe-main .moe-bar-btn{ - background-color: transparent; - background-image: url(images/moeplayer.48.png); - background-size: auto 100%; - border: none; - outline: none; - width: 48px; - height: 48px; - cursor: pointer; - background-repeat: no-repeat ; -} -.moeplayer .moe-main.moe-main-full .moe-bar-btn{ - background-image: url(images/moeplayer.png); - width: 70px; - height: 70px; -} -.moeplayer .moe-main .moe-bar .moe-bar-btn:hover{ - background-size:auto 100%; -} - -/*播放暂停按钮组*/ -.moeplayer .moe-main .moe-bar .moe-bar-playandpause{ - float: left; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-play{ - background-position:0px top; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-play:hover{ - background-position:-48px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playandpause .moe-btn-play:hover{ - background-position:-70px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-pause{ - background-position:-96px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playandpause .moe-btn-pause{ - background-position:-140px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-pause:hover{ - background-position:-144px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playandpause .moe-btn-pause:hover{ - background-position:-210px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-refresh{ - background-position:-192px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playandpause .moe-btn-refresh{ - background-position:-280px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-refresh:hover{ - background-position:-240px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playandpause .moe-btn-refresh:hover{ - background-position:-350px 0; -} - -/*返回播放按钮*/ -.moeplayer .moe-main .moe-bar .moe-btn-backlive{ - float: left; - font-size: 16px; - line-height: 28px; - border-radius: 3px; - margin: 10px; - border: 0px; - background: rgba(3,60,146,.5); - color: #FFF; - cursor: pointer; - padding: 0 8px; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-btn-backlive{ - font-size: 18px; - line-height: 36px; - margin: 17px 10px; -} -.moeplayer .moe-main .moe-bar .moe-btn-backlive:hover{ - background: rgba(3,60,146,.9); -} -.moeplayer .moe-main .moe-bar .moe-btn-backlive:focus{ - outline:0; - background: rgba(3,60,146,.6); -} -/*静音取消静音按钮组*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-btn-muted{ - background-position:-288px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-btn-muted{ - background-position:-420px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-btn-muted:hover{ - background-position:-336px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-btn-muted:hover{ - background-position:-490px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-btn-exitmuted{ - background-position:-384px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-btn-exitmuted{ - background-position:-560px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-btn-exitmuted:hover{ - background-position:-432px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-btn-exitmuted:hover{ - background-position:-630px 0; -} - -/*全屏按钮组*/ -.moeplayer .moe-main .moe-bar .moe-bar-fullandexit{ - float: right; -} -.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-full{ - background-position:-480px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-fullandexit .moe-btn-full{ - background-position:-700px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-full:hover{ - background-position:-528px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-fullandexit .moe-btn-full:hover{ - background-position:-770px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-exitfull{ - background-position:-672px 0; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-fullandexit .moe-btn-exitfull{ - background-position:-840px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-exitfull:hover{ - background-position:-720px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-fullandexit .moe-btn-exitfull:hover{ - background-position:-910px 0; -} - -/*网页全屏按钮组*/ -.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit{ - float: right; -} -.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-webfull{ - background-position:-768px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-webfullandexit .moe-btn-webfull{ - background-position:-1120px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-webfull:hover{ - background-position:-816px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-webfullandexit .moe-btn-webfull:hover{ - background-position:-1190px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull{ - background-position:-864px 0; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull{ - background-position:-1260px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull:hover{ - background-position:-912px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull:hover{ - background-position:-1330px 0; -} - -/*剧场模式按钮组*/ -.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit{ - float: right; -} -.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-theatre{ - background-position:-960px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-theatreandexit .moe-btn-theatre{ - background-position:-1400px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-theatre:hover{ - background-position:-1008px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-theatreandexit .moe-btn-theatre:hover{ - background-position:-1470px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre{ - background-position:-1056px 0; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre{ - background-position:-1540px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre:hover{ - background-position:-1104px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre:hover{ - background-position:-1610px 0; -} -/*播放速度*/ -.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box{ - float: right; - height: 48px; - line-height: 48px; - position: relative; - cursor: pointer; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playbackrate-box{ - height: 70px; - line-height: 70px; -} -.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate{ - height: 100%; - padding: 0 10px; - white-space:nowrap; - font-size: 16px; - color: #FFF; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate{ - font-size: 18px; -} -.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate:hover{ - color: #0368d0; -} -.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate-bg-box { - width: auto; - height: auto; -} -.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box:hover .moe-bar-playbackrate-bg-box { - display: block; -} -/*字幕*/ -.moeplayer .moe-main .moe-bar .moe-bar-track-box{ - float: right; - height: 48px; - line-height: 48px; - position: relative; - cursor: pointer; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-track-box{ - height: 70px; - line-height: 70px; -} -.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track{ - height: 100%; - padding: 0 10px; - white-space:nowrap; - font-size: 16px; - color: #FFF; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-track-box .moe-bar-track{ - font-size: 18px; -} -.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track:hover{ - color: #0368d0; -} -.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track-bg-box { - width: auto; - height: auto; -} -.moeplayer .moe-main .moe-bar .moe-bar-track-box:hover .moe-bar-track-bg-box { - display: block; -} -/*清晰度*/ -.moeplayer .moe-main .moe-bar .moe-bar-definition-box{ - float: right; - height: 48px; - line-height: 48px; - position: relative; - cursor: pointer; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-definition-box{ - height: 70px; - line-height: 70px; -} -.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition{ - height: 100%; - padding: 0 10px; - white-space:nowrap; - font-size: 16px; - color: #FFF; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-definition-box .moe-bar-definition{ - font-size: 18px; -} -.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition:hover{ - color: #0368d0; -} -.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition-bg-box { - width: auto; - height: auto; -} -.moeplayer .moe-main .moe-bar .moe-bar-definition-box:hover .moe-bar-definition-bg-box { - display: block; -} -/*列表切换*/ -.moeplayer .moe-main .moe-bar .moe-list-bg-box { - background: rgba(0,0,0,.001); - position: absolute; - z-index: 1; - bottom: 46px; - display: none; - -webkit-animation-duration: .2s; - animation-duration: .2s; - -webkit-animation-name: moe-bounceIn; - animation-name: moe-bounceIn; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box { - bottom: 68px; -} -.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg{ - background: rgba(0,0,0,.6); - float: left; - border-radius: 5px; - padding: 10px; - margin-bottom: 10px; -} -.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p{ - width: 100%; - float: left; - line-height: 35px; - color: #FFF; - text-align: center; - font-size: 14px; - background-color: rgba(0,0,0,0); - border: 0px; - white-space:nowrap; - cursor: pointer; -} -.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p:hover{ - color: #0368d0; - font-size: 16px; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p:hover{ - font-size: 20px; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p{ - font-size: 18px; -} -.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p-focus{ - color: #0368d0; -} -/*下一集按钮*/ -.moeplayer .moe-main .moe-bar .moe-bar-next{ - float: left; - background-position:-672px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-next{ - background-position:-980px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-next:hover{ - background-position:-720px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-next:hover{ - background-position:-1050px 0; -} -/*进度栏*/ -.moeplayer .moe-main .moe-bar .moe-bar-progress{ - width: 100%; - position:absolute; - z-index: 1; - height: 12px; - top:-11px; - transition: 0.2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg{ - width: 100%; - background: rgba(255,255,255,.3); - margin-top: 2px; - overflow: hidden; - height: 10px; - transition: .2s; - cursor: pointer; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-load{ - float: left; - width: 0px; - background: rgba(169,169,169,.7); - height: 10px; - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-play{ - width: 0px; - background: #0368d0; - position: absolute; - z-index: 1; - height: 10px; - transition: .2s; - cursor: pointer; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-mouseline{ - width: 3px; - background: rgba(255,255,255,.6); - position: absolute; - z-index: 2; - display: none; - height: 10px; - cursor: pointer; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-prompt{ - background: #FFF; - position: absolute; - z-index: 3; - border-radius: 50%; - width: 10px; - height: 10px; - top:2px; - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-slider{ - border-radius: 50%; - overflow: hidden; - position: relative; - float: left; - z-index: 4; - left: 0px; - cursor: pointer; - width: 12px; - height: 12px; - top: -11px; - background: #FFF; - box-shadow: 0px 0px 0px 4px rgba(255,255,255,.5); -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-slider:hover{ - background: #0368d0; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg:hover .moe-bar-progress-mouseline{ - display: block; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out{ - height: 2px; - top:-2px; - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-load,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg .moe-bar-progress-play{ - height: 2px; - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-slider{ - width: 12px; - height: 2px; - top: -2px; - box-shadow: 0px 0px 0px 0px rgba(255,255,255,0); - background: rgba(255,255,255,0); - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg .moe-bar-progress-prompt{ - height: 2px; - border-radius: 0; - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-slider-move .moe-bar-progress-play,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-slider-move .moe-bar-progress-slider{ - transition: 0s; -} - -/*音量调节栏*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox{ - float: right; - width: 48px; - overflow-x: hidden; -} -/*音量调节栏*/ -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox{ - width: 70px; -} -/*默认状态-音量调节总外框*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume{ - width: 48px; - height: 215px; - background: rgba(0,0,0,.01); - position: absolute; - z-index: 1; - bottom: 46px; - display: none; - overflow: hidden; -} -/*全屏状态-音量调节总外框*/ -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-bar-volume{ - width: 70px; - bottom: 68px; -} -/*默认状态-音量调节总外框-鼠标经过时样式*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox:hover .moe-bar-volume{ - display: block; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-duration: .1s; - animation-duration: .1s; - -webkit-animation-name: moe-bounceIn; - animation-name: moe-bounceIn; -} -/*共用状态-音量调节内部外框*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volumex{ - width: 100%; - height: 200px; - float: left; - background: rgba(0,0,0,.8); - border-radius: 5px; -} -/*共用状态-音量调节顶部文字*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-txt{ - width: 100%; - height: 40px; - line-height: 40px; - color: #FFF; - text-align: center; - font-size: 1rem; - float: left; - overflow: hidden; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -/*共用状态-音量调节背景色*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-bg{ - width: 8px; - height: 140px; - background: #808080; - border-radius: 3px; - overflow: hidden; - cursor: pointer; - margin: auto; -} -/*共用状态-音量调节前景色*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-bg .moe-bar-volume-pp{ - width: 8px; - height: 140px; - background: #0368d0; - margin-top: 140px; -} -/*共用状态-音量调节拖动小按钮*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-slider{ - width: 10px; - height: 10px; - background: #FFF; - border-radius: 50%; - overflow: hidden; - box-shadow: 0px 0px 0px 8px rgba(255,255,255,.5); - position: absolute; - z-index: 1; - top: 0px; - left: 19px; - cursor: pointer; -} -/*全屏状态-音量调节拖动小按钮*/ -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-slider{ - left: 30px; -} -/*默认状态-显示时间*/ -.moeplayer .moe-main .moe-bar .moe-bar-time{ - float: left; - line-height: 48px; - font-size: 16px; - color: #FFF; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -/*全屏状态-显示时间*/ -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-time{ - float: left; - line-height: 70px; - font-size: 18px; - color: #FFF; -} -/*右侧控制栏*/ -.moeplayer .moe-main .moe-right-bar{ - position: absolute; - z-index: 260; - top: 0; - right: 2px; - bottom: 0; - margin: auto !important; - width: 48px; - height: 144px; - background: rgba(0,0,0,.3); - border-radius: 5px; - transition: .2s; -} -.moeplayer .moe-main .moe-right-bar-hide{ - right: -48px; - transition: .2s; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar{ - width: 70px; - height: 210px; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar-hide{ - right: -70px; - transition: .2s; -} -/*截图按钮*/ -.moeplayer .moe-main .moe-right-bar .moe-btn-screenshot{ - float: left; - background-position:-1536px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-btn-screenshot{ - background-position:-2240px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-btn-screenshot:hover{ - background-position:-1584px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-btn-screenshot:hover{ - background-position:-2310px 0; -} -/*小窗口按钮组*/ -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows{ - float: left; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows button{ - float: left; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-open{ - background-position:-1248px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-open{ - background-position:-1820px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-open:hover{ - background-position:-1296px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-open:hover{ - background-position:-1890px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close{ - background-position:-1152px 0; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close{ - background-position:-1680px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close:hover{ - background-position:-1200px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close:hover{ - background-position:-1750px 0; -} -/*循环按钮组*/ -.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop{ - float: left; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-open{ - background-position:-1440px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-loop .moe-btn-loop-open{ - background-position:-2100px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-open:hover{ - background-position:-1488px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-loop .moe-btn-loop-open:hover{ - background-position:-2170px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close{ - background-position:-1344px 0; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close{ - background-position:-1960px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close:hover{ - background-position:-1392px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close:hover{ - background-position:-2030px 0; -} -/*顶部显示栏*/ -.moeplayer .moe-main .moe-top-bar{ - position: absolute; - z-index: 260; - top: -36px; - width: 100%; - height: 36px; - background: rgba(0,0,0,.3); - transition: .2s; -} -.moeplayer .moe-main .moe-top-bar-hide{ - top: -36px; - transition: .2s; -} -.moeplayer .moe-main.moe-main-full .moe-top-bar{ - top: 0; -} -.moeplayer .moe-main.moe-main-full .moe-top-bar-hide{ - top: -36px; - transition: .2s; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom{ - position: absolute; - z-index: 260; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container{ - float: left; - margin-left: 10px; - margin-top: 9px; - cursor: pointer; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left{ - float: left; - width: 20px; - height: 18px; - border: 1px solid #FFF; - box-sizing:content-box; - -moz-box-sizing:content-box; /* Firefox */ - -webkit-box-sizing:content-box; /* Safari */ -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-left, -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-left{ - border-color: #0368d0; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-left div, -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-left div{ - background: #0368d0; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-right{ - float: left; - font-size: 14px; - color: #FFF; - padding-left: 5px; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-right, -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-right{ - color: #0368d0; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-50{ - width: 50%; - height: 50%; - background: #FFF; - margin: 4.5px 25%; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-75{ - width: 75%; - height: 50%; - background: #FFF; - margin: 4.5px 12.5%; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-100{ - width: 100%; - height: 50%; - background: #FFF; - margin: 4.5px 0; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-title{ - position: absolute; - z-index: 1; - top: 0px; - width: 100%; - height: 36px; - line-height: 36px; - text-align: center; - font-size: 18px; - color: #FFF; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-time{ - float: right; - height: 36px; - line-height: 36px; - font-size: 14px; - color: #FFF; - padding: 0 1rem 0; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -/*以下为缓动效果样式*/ -.moe-animate { - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-duration: .3s; - animation-duration: .3s; -} -.moe-animate-bouncein { - -webkit-animation-name: moe-bounceIn; - animation-name: moe-bounceIn; -} - -@-webkit-keyframes moe-bounceIn { - 0% { - opacity: 0; - -webkit-transform: scale(.5); - transform: scale(.5) - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } -} - -@keyframes moe-bounceIn { - 0% { - opacity: 0; - -webkit-transform: scale(.5); - -ms-transform: scale(.5); - transform: scale(.5); - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - } -} -.moe-animate-bounceout { - -webkit-animation-name: moe-bounceOut; - animation-name: moe-bounceOut; -} - -@-webkit-keyframes moe-bounceOut { - 0% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } - 100% { - opacity: 0; - -webkit-transform: scale(.5); - transform: scale(.5); - } -} - -@keyframes moe-bounceOut { - 0% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } - 100% { - opacity: 0; - -webkit-transform: scale(.5); - transform: scale(.5); - } -} -.moe-animate-circle { - animation: moe-Circle 1s linear infinite; - -webkit-animation: moe-Circle 1s linear infinite -} - -@-webkit-keyframes moe-Circle { - 0% { - transform: rotate(0deg); - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg) - } - 25% { - transform: rotate(90deg); - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg) - } - 50% { - transform: rotate(180deg); - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg) - } - 75% { - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg) - } - 100% { - transform: rotate(360deg); - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg) - } -} - -@keyframes moe-Circle { - 0% { - transform: rotate(0deg); - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg) - } - 25% { - transform: rotate(90deg); - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg) - } - 50% { - transform: rotate(180deg); - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg) - } - 75% { - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg) - } - 100% { - transform: rotate(360deg); - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg) - } -} \ No newline at end of file +/* + * 软件名称：MoePlayer + * 版本:X3 + * 版权：MoePlayer 项目(fork 自 ckplayer, www.ckplayer.com) + * 开源协议：MIT + * 本文件由 npm run build 自动生成(src/css/base.css + 主题),请勿手动修改 + */ +/* + * MoePlayer 皮肤基础样式(base.css) + * 功能：三个皮肤共用的全部结构样式 + 默认主题变量 + * 说明：所有颜色/主题相关值均为 CSS 自定义属性(--moe-*),定义在 .moeplayer 作用域上 + * (右键菜单 .moeplayer-menu、错误框 .moeplayer-error 会被挂载到 body 下,故一并定义) + * 各主题(src/css/themes/*.css)只需覆盖这些变量即可换肤 + * 图标：全部使用 SVG data-URI + CSS mask 实现,颜色跟随 --moe-icon-color,换肤零成本 + * 本文件不单独使用,由 scripts/build-css.js 与各主题拼接生成最终产物 + */ + +/*======================== 主题变量(默认值即默认皮肤) ========================*/ +.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-progress-play: var(--moe-accent); + --moe-slider-color: var(--moe-accent); + /* 音量条:轨道/已音量/面板背景 */ + --moe-volume-bg: rgba(255,255,255,.25); + --moe-volume-play: var(--moe-accent); + --moe-volume-panel-bg: rgba(0,0,0,.85); + /* 弹层(倍速/字幕/清晰度列表等) */ + --moe-popup-bg: rgba(0,0,0,.85); + --moe-popup-text: #FFF; + --moe-popup-hover: var(--moe-accent); + --moe-popup-shadow: 0 4px 16px rgba(0,0,0,.3); + /* 浮层提示(message/tip/prompt 等,浮于视频上方,不随浅色主题变化) */ + --moe-overlay-bg: rgba(0,0,0,.85); + --moe-overlay-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); + /* 圆角与字体 */ + --moe-radius: 6px; + --moe-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; + /* 尺寸 */ + --moe-bar-height: 48px; + --moe-bar-height-full: 70px; + --moe-btn-size: 48px; + --moe-btn-size-full: 70px; + --moe-icon-size: 22px; + --moe-icon-size-full: 30px; +} + +/*======================== 全局错误提示框 ========================*/ +.moeplayer-error{ + position: fixed; + z-index: 9999999; + left: 10px; + bottom: 10px; + width: auto; + height: 38px; + line-height: 38px; + padding: 0 .85rem; + background: var(--moe-overlay-bg); + border-radius: var(--moe-radius); + color: var(--moe-overlay-text); + font-size: 14px; + font-family: var(--moe-font-family); + white-space: nowrap; +} + +/*======================== 播放器容器 ========================*/ +.moeplayer{ + width: 100%; + height: 100%; + float: left; + background: #000; + overflow: hidden; + font-family: var(--moe-font-family); +} +.moeplayer button, .moeplayer input{ + font-family: inherit; +} +.moeplayer .moe-main.moe-nocursor{ + cursor: none; +} +.moeplayer-smallwindow{ + position: fixed; + z-index: 9999999; + width: 420px; + max-width: 100%; + height: 266px; + right: 10px; + bottom: 10px; +} +.moeplayer .moe-main{ + width: 100%; + height: 100%; + overflow: hidden; + background: #000; + position: relative; +} +.moeplayer .moe-main .moe-video{ + width: 100%; + height: 100%; + overflow: hidden; + position:absolute; + z-index: 1; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.moeplayer .moe-main .moe-video video,.moeplayer .moe-main .moe-video canvas{ + width: 100%; + height: 100%; +} +.moeplayer .moe-main .moe-error{ + width: 100%; + height: 80px; + line-height: 35px; + text-align: center; + color: var(--moe-overlay-text); + position:absolute; + z-index: 70; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + overflow: hidden; +} +/*logo:默认无品牌水印,用户通过 logo 配置项传入自定义图片(JS 会插入 img)*/ +.moeplayer .moe-main .moe-logo{ + position:absolute; + right: 20px; + top:20px; + z-index: 400; + background: none; +} +/*加载动画:CSS 圆弧旋转,不再使用图片*/ +.moeplayer .moe-main .moe-loading{ + position:absolute; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + z-index: 80; + width: 46px; + height: 46px; + box-sizing: border-box; + border-radius: 50%; + border: 3px solid rgba(255,255,255,.3); + border-top-color: #FFF; + animation: moe-Circle .8s linear infinite; + -webkit-animation: moe-Circle .8s linear infinite +} +/*中央大播放键:圆形半透明底 + 白色播放三角,hover 变主题色*/ +.moeplayer .moe-main .moe-center-play{ + background: rgba(0,0,0,.45); + border: none; + border-radius: 50%; + box-sizing:border-box; + width: 80px; + height: 80px; + position: absolute; + display: none; + z-index: 90; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + cursor: pointer; + transition: background-color .2s, width .2s, height .2s; +} +.moeplayer .moe-main .moe-center-play::before{ + content: ''; + position: absolute; + inset: 0; + background-color: #FFF; + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7.5,6.2v11.6c0,.8,.9,1.3,1.6,.9l9.1-5.8c.6-.4,.6-1.4,0-1.8l-9.1-5.8c-.7-.4-1.6,.1-1.6,.9z'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7.5,6.2v11.6c0,.8,.9,1.3,1.6,.9l9.1-5.8c.6-.4,.6-1.4,0-1.8l-9.1-5.8c-.7-.4-1.6,.1-1.6,.9z'/%3E%3C/svg%3E"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: 50% 50%; + mask-position: 50% 50%; + -webkit-mask-size: 46%; + mask-size: 46%; +} +.moeplayer .moe-main.moe-main-full .moe-center-play{ + width: 100px; + height: 100px; +} +.moeplayer .moe-main .moe-center-play:hover{ + width: 100px; + height: 100px; + background: var(--moe-accent); +} +.moeplayer .moe-main.moe-main-full .moe-center-play:hover{ + width: 120px; + height: 120px; +} +/*缓冲动画:CSS 圆弧旋转*/ +.moeplayer .moe-main .moe-buffer{ + width: 38px; + height: 38px; + box-sizing: border-box; + border-radius: 50%; + border: 3px solid rgba(255,255,255,.25); + border-top-color: var(--moe-accent); + position: absolute; + z-index: 100; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + display: none; + animation: moe-Circle .8s linear infinite; + -webkit-animation: moe-Circle .8s linear infinite +} +.moeplayer .moe-main .moe-message{ + position: absolute; + z-index: 240; + left:5px; + bottom: 78px; + padding: 0 1rem; + line-height: 30px; + height: 30px; + width: auto; + min-width: 1px; + border-radius: var(--moe-radius); + background: var(--moe-overlay-bg); + font-size: 14px; + color: var(--moe-overlay-text); + display: none; + white-space:nowrap; +} +.moeplayer .moe-main .moe-message-right{ + left:auto; + right: 5px; +} +.moeplayer .moe-main.moe-main-full .moe-message{ + font-size: 18px; + bottom: 100px; +} +.moeplayer .moe-main .moe-tip{ + width: auto; + height: auto; + position: absolute; + z-index: 230; + display: none; + margin-bottom: 1px; +} +.moeplayer .moe-main .moe-tip .moe-content{ + width: auto; + height: auto; + white-space: nowrap; + min-width: 1px; + background: var(--moe-overlay-bg); + font-size: 14px; + color: var(--moe-overlay-text); + line-height: 32px; + height: 32px; + padding: 0 15px; +} +.moeplayer .moe-main .moe-tip .moe-content-float-auto{ + border-radius: var(--moe-radius); + margin: auto; +} +.moeplayer .moe-main .moe-tip .moe-content-float-left{ + border-radius: var(--moe-radius); + float: left; +} +.moeplayer .moe-main.moe-main-full .moe-tip .moe-content{ + font-size: 18px; +} +.moeplayer .moe-main .moe-tip .moe-triangle{ + width: 0px; + height: 0px; +} +.moeplayer .moe-main .moe-tip .moe-triangle-auto{ + border-left: 8px solid transparent; + border-top: 8px solid var(--moe-overlay-bg); + border-right: 8px solid transparent; + margin: auto; +} +.moeplayer .moe-main .moe-tip .moe-triangle-left{ + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 8px solid var(--moe-overlay-bg); + float: left; + margin-top: 10px; +} +/*预览(缩略图)*/ +.moeplayer .moe-main .moe-preview{ + position: absolute; + z-index: 210; + width: 100%; + left:0; + bottom: 64px; + overflow: hidden; + display: none; +} +.moeplayer .moe-main.moe-main-full .moe-preview{ + bottom: 86px; +} +.moeplayer .moe-main .moe-preview-load-img{ + position: absolute; + z-index: 210; + top:110%; +} +.moeplayer .moe-main .moe-preview .moe-preview-bg{ + position: absolute; + z-index: 1; + top:0; + float: left; + transition: .2s; +} +.moeplayer .moe-main .moe-preview .moe-preview-bg .moe-preview-img{ + background-repeat: no-repeat ; + float: left; +} +.moeplayer .moe-main .moe-preview .moe-preview-frame{ + position: absolute; + z-index: 2; + top:0; + left:-1000px; + border:4px solid var(--moe-accent); + border-radius: 2px; + box-sizing:content-box; +} +.moeplayer .moe-main .moe-prompt-words{ + position: absolute; + z-index: 220; + width: 213px; + line-height: 23px; + font-size: 14px; + color: var(--moe-overlay-text); + background: var(--moe-overlay-bg); + overflow: hidden; + display: none; + margin-bottom: 10px; + border-radius: var(--moe-radius); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .2s; + animation-duration: .2s; + -webkit-animation-name: moe-bounceIn; + animation-name: moe-bounceIn; +} +.moeplayer .moe-main .moe-prompt-words .moe-prompt-content{ + padding: 5px; +} +.moeplayer .moe-main .moe-layer{ + position: absolute; + z-index: 101; +} +.moeplayer .moe-main .moe-tempTime{ + position: absolute; + z-index: 20; + left:10px; + bottom: 5px; + display: none; + font-size: 14px; + line-height: 28px; + color: var(--moe-overlay-text); +} + +/*======================== 关于 ========================*/ +.moeplayer .moe-main .moe-about{ + position: absolute; + z-index: 200; + width: 50%; + max-width: 600px; + min-width: 400px; + left: 1rem; + top: 1rem; + background: var(--moe-overlay-bg); + border-radius: var(--moe-radius); + padding: 1rem 0; + display: none; +} +.moeplayer .moe-main .moe-about ul{ + padding: 0; + margin: 0; +} +.moeplayer .moe-main .moe-about ul li{ + list-style:none; + color: var(--moe-overlay-text); + font-size: 12px; + line-height: 18px; + height: 18px; + padding: 0; + margin: 0; +} +.moeplayer .moe-main .moe-about ul li .moe-about-title{ + width: 100px; + text-align: right; + float: left; + padding-right: .5rem; +} +.moeplayer .moe-main .moe-about ul li .moe-about-content{ + width: auto; + float: left; +} +.moeplayer .moe-main .moe-about .moe-about-bar{ + position: absolute; + z-index: 1; + top: 0; + right: 0; + width: 96px; +} +.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar{ + width: 140px; +} +/*关于-复制按钮图标*/ +.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-copy{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5,15H4a2,2,0,0,1-2-2V4a2,2,0,0,1,2-2h9a2,2,0,0,1,2,2v1'/%3E%3C/svg%3E"); +} +/*关于-关闭按钮图标*/ +.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-close{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6,6l12,12M18,6L6,18'/%3E%3C/svg%3E"); +} + +/*======================== 截图显示容器 ========================*/ +.moeplayer .moe-main .moe-screenshot{ + position: absolute; + z-index: 220; + width: auto; + height: 144px; + margin: auto !important; + top: 0; + bottom: 0; + right: 55px; + display: none; +} +.moeplayer .moe-main.moe-main-full .moe-screenshot{ + height: 210px; + right: 77px; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-img{ + position: absolute; + z-index: 1; + width: 100%; + height: 100%; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-img img{ + height: 100%; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar{ + position: absolute; + z-index: 1; + width: 100%; + height: 36px; + bottom: 5px; + text-align: center; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn{ + display: inline-block; + overflow: hidden; + border: 0px solid transparent; + border-radius: var(--moe-radius); + vertical-align: middle; + text-align: center; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + line-height: 30px; + padding: 0px 15px; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: #fff; + margin: 0 5px; + transition: filter .2s, color .2s, background-color .2s; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn:hover{ + filter: brightness(1.15); +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn:focus{ + outline:0; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-down{ + background-color: var(--moe-accent); +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-close{ + background-color: rgba(96,96,96,.9); + color: #fff; +} + +/*======================== 广告 ========================*/ +.moeplayer .moe-main .moe-yytf{ + position: absolute; + z-index: 800; + width: 100%; + height: 100%; + left: 0px; + top: 0px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-front-link{ + width: 100%; + height: 100%; + display: none; + cursor: pointer; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-front-picture{ + width: 100%; + height: 100%; + background: #000; + display: none; + text-align: center; + line-height: 100%; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-front-picture img{ + max-width: 100%; + max-height: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-top{ + position: absolute; + z-index: 3; + top: 10px; + right: 10px; +} + +.moeplayer .moe-main .moe-yytf .moe-yytf-top div{ + float: right; + margin-left: 10px; + font-size: 14px; + border-radius: 15px; + background: var(--moe-overlay-bg); + padding: 0px 10px; + line-height: 30px; + height: 30px; + color: var(--moe-overlay-text); +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-top div{ + font-size: 18px; + border-radius: 20px; + line-height: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-top .moe-yytf-closetime{ + display: none; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-top .moe-yytf-closead{ + cursor: pointer; + display: none; +} + +/*显示广告时的底部内容*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom{ + position: absolute; + z-index: 3; + bottom: 10px; + right: 10px; +} +/*显示广告时的底部按钮-共用(圆形半透明底 + SVG 图标)*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn{ + background-color: var(--moe-overlay-bg); + border: none; + outline: none; + width: 30px; + height: 30px; + cursor: pointer; + border-radius: 50%; + position: relative; + padding: 0; + transition: background-color .2s; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-btn{ + width: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn::before{ + content: ''; + position: absolute; + inset: 0; + background-color: #FFF; + -webkit-mask-image: var(--moe-icon); + mask-image: var(--moe-icon); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: 16px; + mask-size: 16px; + transition: background-color .2s; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-btn::before{ + -webkit-mask-size: 20px; + mask-size: 20px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn:hover::before{ + background-color: var(--moe-icon-hover); +} +/*显示广告时的静音按钮*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit{ + float: right; + width: 30px; + height: 30px; + margin-left: 10px; + overflow: hidden; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit{ + width: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9a4.2,4.2,0,0,1,0,6'/%3E%3Cpath d='M18.4,6.6a7.6,7.6,0,0,1,0,10.8'/%3E%3C/svg%3E"); +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9.5l5.5,5.5M21.5,9.5L16,15'/%3E%3C/svg%3E"); +} +/*显示广告时的全屏按钮*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit{ + float: right; + width: 30px; + height: 30px; + margin-left: 10px; + overflow: hidden; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit{ + width: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5,4H4v4.5M15.5,4H20v4.5M8.5,20H4v-4.5M15.5,20h4.5v-4.5'/%3E%3C/svg%3E"); +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,8.5h4.5V4M20,8.5h-4.5V4M4,15.5h4.5V20M20,15.5h-4.5V20'/%3E%3C/svg%3E"); +} +/*广告查看详情按钮*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-details{ + float: right; + font-size: 14px; + border-radius: 15px; + background: var(--moe-overlay-bg); + padding: 0 10px; + color: var(--moe-overlay-text); + line-height: 30px; + height: 30px; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-details{ + font-size: 18px; + border-radius: 20px; + line-height: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-details a{ + color: var(--moe-overlay-text); + text-decoration: none; +} +/*暂停广告容器*/ +.moeplayer .moe-main .moe-pause-yytf{ + display: none; + position:absolute; + z-index: 800; + max-width: 100%; + max-height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.moeplayer .moe-main .moe-pause-yytf img{ + max-width: 100%; + max-height: 100%; +} +/*暂停广告关闭按钮(圆形底 + × 图标)*/ +.moeplayer .moe-main .moe-pause-close{ + position:absolute; + z-index: 1; + right: -15px; + top:-15px; + width: 30px; + height: 30px; + background-color: var(--moe-overlay-bg); + border: none; + outline: none; + border-radius: 50%; + cursor: pointer; + padding: 0; + transition: background-color .2s; +} +.moeplayer .moe-main .moe-pause-close::before{ + content: ''; + position: absolute; + inset: 0; + background-color: #FFF; + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7,7l10,10M17,7L7,17'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7,7l10,10M17,7L7,17'/%3E%3C/svg%3E"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: 14px; + mask-size: 14px; +} +.moeplayer .moe-main .moe-pause-close:hover{ + background-color: var(--moe-accent); +} + +/*======================== 右键菜单(挂载在 body 下) ========================*/ +.moeplayer-menu{ + width:120px; + background: var(--moe-menu-bg); + position: absolute; + z-index: 9000; + font-size:14px; + font-family: var(--moe-font-family); + border: 1px solid var(--moe-menu-border); + border-radius: var(--moe-radius); + box-shadow: var(--moe-popup-shadow); + padding: 4px 0; + display: none; +} +.moeplayer-menu .moe-li{ + color: var(--moe-menu-text); + line-height: 32px; + padding: 0 0 0 10px; + cursor: pointer; + transition: background-color .15s, color .15s; +} +.moeplayer-menu .moe-li:hover{ + background: rgba(127,127,127,.18); + color: var(--moe-menu-link); +} +.moeplayer-menu .moe-li a{ + color: var(--moe-menu-link); + text-decoration: none; +} +.moeplayer-menu .moe-underline{ + border-bottom: 1px solid var(--moe-menu-border); +} + +/*======================== 控制栏 ========================*/ +.moeplayer .moe-main .moe-bar{ + position:absolute; + z-index: 260; + left:0px; + bottom:0px; + width: 100%; + height: var(--moe-bar-height); + background: var(--moe-bar-bg); + transition: 0.2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar{ + height: var(--moe-bar-height-full); +} +.moeplayer .moe-main .moe-bar.moe-bar-out{ + bottom: -50px; + transition: 0.2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar.moe-bar-out{ + bottom: -80px; + transition: 0.2s; +} + +/*======================== 按钮公用样式(SVG mask 图标) ========================*/ +.moeplayer .moe-main .moe-bar-btn{ + background-color: transparent; + border: none; + outline: none; + width: var(--moe-btn-size); + height: var(--moe-btn-size); + cursor: pointer; + position: relative; + padding: 0; + transition: transform .2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar-btn{ + width: var(--moe-btn-size-full); + height: var(--moe-btn-size-full); +} +/*图标层:颜色跟随 --moe-icon-color,形状由每个按钮的 --moe-icon 决定*/ +.moeplayer .moe-main .moe-bar-btn::before{ + content: ''; + position: absolute; + inset: 0; + background-color: var(--moe-icon-color); + -webkit-mask-image: var(--moe-icon); + mask-image: var(--moe-icon); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: var(--moe-icon-size); + mask-size: var(--moe-icon-size); + transition: background-color .2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar-btn::before{ + -webkit-mask-size: var(--moe-icon-size-full); + mask-size: var(--moe-icon-size-full); +} +.moeplayer .moe-main .moe-bar .moe-bar-btn:hover::before, +.moeplayer .moe-main .moe-right-bar .moe-bar-btn:hover::before, +.moeplayer .moe-main .moe-about .moe-bar-btn:hover::before{ + background-color: var(--moe-icon-hover); +} + +/*======================== 按钮图标定义 ========================*/ +/*播放*/ +.moeplayer .moe-main .moe-btn-play{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8,5.2v13.6c0,.8,.9,1.3,1.6,.9l10.2-6.8c.6-.4,.6-1.4,0-1.8L9.6,4.3c-.7-.4-1.6,.1-1.6,.9z'/%3E%3C/svg%3E"); +} +/*暂停*/ +.moeplayer .moe-main .moe-btn-pause{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='6.8' y='5' width='3.6' height='14' rx='1'/%3E%3Crect x='13.6' y='5' width='3.6' height='14' rx='1'/%3E%3C/svg%3E"); +} +/*刷新/重播*/ +.moeplayer .moe-main .moe-btn-refresh{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2,14.9a8.5,8.5,0,1,1-2-8.4L20.5,9'/%3E%3Cpolyline points='20.5,3.8,20.5,9,15.3,9'/%3E%3C/svg%3E"); +} +/*音量(非静音)*/ +.moeplayer .moe-main .moe-btn-muted{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9a4.2,4.2,0,0,1,0,6'/%3E%3Cpath d='M18.4,6.6a7.6,7.6,0,0,1,0,10.8'/%3E%3C/svg%3E"); +} +/*音量(已静音)*/ +.moeplayer .moe-main .moe-btn-exitmuted{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9.5l5.5,5.5M21.5,9.5L16,15'/%3E%3C/svg%3E"); +} +/*全屏*/ +.moeplayer .moe-main .moe-btn-full{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5,4H4v4.5M15.5,4H20v4.5M8.5,20H4v-4.5M15.5,20h4.5v-4.5'/%3E%3C/svg%3E"); +} +/*退出全屏*/ +.moeplayer .moe-main .moe-btn-exitfull{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,8.5h4.5V4M20,8.5h-4.5V4M4,15.5h4.5V20M20,15.5h-4.5V20'/%3E%3C/svg%3E"); +} +/*网页全屏*/ +.moeplayer .moe-main .moe-btn-webfull{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M10,14l4.5-4.5M14.5,13.2V9.5H10.8'/%3E%3C/svg%3E"); +} +/*退出网页全屏*/ +.moeplayer .moe-main .moe-btn-exitwebfull{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M14.5,9.5L10,14M10,10.3V14h3.7'/%3E%3C/svg%3E"); +} +/*剧场模式*/ +.moeplayer .moe-main .moe-btn-theatre{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Cpath d='M9,10l-2,2,2,2M15,10l2,2-2,2'/%3E%3C/svg%3E"); +} +/*退出剧场模式*/ +.moeplayer .moe-main .moe-btn-exittheatre{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Cpath d='M7,10l2,2-2,2M17,10l-2,2,2,2'/%3E%3C/svg%3E"); +} +/*下一集*/ +.moeplayer .moe-main .moe-bar-next{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6,5.7v12.6c0,.8,.9,1.2,1.5,.8l7.6-6.3c.5-.4,.5-1.2,0-1.6L7.5,4.9c-.6-.4-1.5,0-1.5,.8z'/%3E%3Crect x='16.4' y='5.5' width='2.6' height='13' rx='1'/%3E%3C/svg%3E"); +} +/*截图*/ +.moeplayer .moe-main .moe-btn-screenshot{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,8h2.6L8.8,5.5h6.4L17.4,8H20a1,1,0,0,1,1,1v9a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V9a1,1,0,0,1,1-1z'/%3E%3Ccircle cx='12' cy='13' r='3.2'/%3E%3C/svg%3E"); +} +/*开启循环(当前处于循环状态)*/ +.moeplayer .moe-main .moe-btn-loop-open{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5,4.5L20,8l-3.5,3.5'/%3E%3Cpath d='M20,8H9a4.5,4.5,0,0,0-4.5,4.5V13'/%3E%3Cpath d='M7.5,19.5L4,16l3.5-3.5'/%3E%3Cpath d='M4,16h11a4.5,4.5,0,0,0,4.5-4.5V11'/%3E%3C/svg%3E"); +} +/*关闭循环(当前未循环,循环箭头中带 1)*/ +.moeplayer .moe-main .moe-btn-loop-close{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5,4.5L20,8l-3.5,3.5'/%3E%3Cpath d='M20,8H9a4.5,4.5,0,0,0-4.5,4.5V13'/%3E%3Cpath d='M7.5,19.5L4,16l3.5-3.5'/%3E%3Cpath d='M4,16h11a4.5,4.5,0,0,0,4.5-4.5V11'/%3E%3Cpath d='M12.5,10v4M11.4,10.7l1.1-.7' stroke-width='1.6'/%3E%3C/svg%3E"); +} +/*开启小窗口*/ +.moeplayer .moe-main .moe-btn-smallwindows-open{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Crect x='12' y='12' width='6.5' height='4.5' rx='1' fill='black' stroke='none'/%3E%3C/svg%3E"); +} +/*关闭小窗口*/ +.moeplayer .moe-main .moe-btn-smallwindows-close{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Crect x='12' y='12' width='6.5' height='4.5' rx='1' stroke-width='1.5'/%3E%3C/svg%3E"); +} + +/*======================== 播放暂停按钮组 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-playandpause{ + float: left; +} + +/*======================== 返回直播按钮 ========================*/ +.moeplayer .moe-main .moe-bar .moe-btn-backlive{ + float: left; + font-size: 16px; + line-height: 28px; + border-radius: var(--moe-radius); + margin: 10px; + border: 0px; + background: var(--moe-accent); + color: #FFF; + cursor: pointer; + padding: 0 8px; + transition: filter .2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-btn-backlive{ + font-size: 18px; + line-height: 36px; + margin: 17px 10px; +} +.moeplayer .moe-main .moe-bar .moe-btn-backlive:hover{ + filter: brightness(1.15); +} +.moeplayer .moe-main .moe-bar .moe-btn-backlive:focus{ + outline:0; +} +/*======================== 全屏按钮组 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-fullandexit{ + float: right; +} +.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-exitfull{ + display: none; +} + +/*======================== 网页全屏按钮组 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit{ + float: right; +} +.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull{ + display: none; +} + +/*======================== 剧场模式按钮组 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit{ + float: right; +} +.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre{ + display: none; +} + +/*======================== 播放速度/字幕/清晰度(文字按钮) ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box, +.moeplayer .moe-main .moe-bar .moe-bar-track-box, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box{ + float: right; + height: var(--moe-bar-height); + line-height: var(--moe-bar-height); + position: relative; + cursor: pointer; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playbackrate-box, +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-track-box, +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-definition-box{ + height: var(--moe-bar-height-full); + line-height: var(--moe-bar-height-full); +} +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate, +.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition{ + height: 100%; + padding: 0 10px; + white-space:nowrap; + font-size: 14px; + color: var(--moe-text-color); + transition: color .2s; + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate, +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-track-box .moe-bar-track, +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-definition-box .moe-bar-definition{ + font-size: 18px; +} +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate:hover, +.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track:hover, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition:hover{ + color: var(--moe-text-hover); +} +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate-bg-box, +.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track-bg-box, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition-bg-box{ + width: auto; + height: auto; +} +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box:hover .moe-bar-playbackrate-bg-box, +.moeplayer .moe-main .moe-bar .moe-bar-track-box:hover .moe-bar-track-bg-box, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box:hover .moe-bar-definition-bg-box{ + display: block; +} +/*列表切换弹层*/ +.moeplayer .moe-main .moe-bar .moe-list-bg-box { + background: rgba(0,0,0,.001); + position: absolute; + z-index: 1; + bottom: 46px; + display: none; + -webkit-animation-duration: .2s; + animation-duration: .2s; + -webkit-animation-name: moe-bounceIn; + animation-name: moe-bounceIn; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box { + bottom: 68px; +} +.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg{ + background: var(--moe-popup-bg); + float: left; + border-radius: var(--moe-radius); + box-shadow: var(--moe-popup-shadow); + padding: 6px; + margin-bottom: 10px; +} +.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p{ + width: 100%; + float: left; + line-height: 32px; + color: var(--moe-popup-text); + text-align: center; + font-size: 14px; + background-color: rgba(0,0,0,0); + border: 0px; + border-radius: 4px; + white-space:nowrap; + cursor: pointer; + transition: color .15s, background-color .15s; +} +.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p:hover{ + color: var(--moe-popup-hover); + background: rgba(127,127,127,.15); +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p{ + font-size: 18px; + line-height: 36px; +} +.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p-focus{ + color: var(--moe-accent); +} +/*下一集按钮*/ +.moeplayer .moe-main .moe-bar .moe-bar-next{ + float: left; +} + +/*======================== 进度栏 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-progress{ + width: 100%; + position:absolute; + z-index: 1; + height: 12px; + top:-11px; + transition: 0.2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg{ + width: 100%; + background: var(--moe-progress-bg); + margin-top: 4px; + overflow: hidden; + height: 4px; + border-radius: 2px; + transition: .2s; + cursor: pointer; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg{ + height: 6px; + margin-top: 3px; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg .moe-bar-progress-load, +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg .moe-bar-progress-play, +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg .moe-bar-progress-mouseline{ + height: 6px; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-load{ + float: left; + width: 0px; + background: var(--moe-progress-buffer); + height: 4px; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-play{ + width: 0px; + background: var(--moe-progress-play); + position: absolute; + z-index: 1; + height: 4px; + transition: .2s; + cursor: pointer; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-mouseline{ + width: 2px; + background: rgba(255,255,255,.6); + position: absolute; + z-index: 2; + display: none; + height: 4px; + cursor: pointer; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-prompt{ + background: #FFF; + position: absolute; + z-index: 3; + border-radius: 50%; + width: 10px; + height: 10px; + top:1px; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-slider{ + border-radius: 50%; + overflow: hidden; + position: relative; + float: left; + z-index: 4; + left: 0px; + cursor: pointer; + width: 14px; + height: 14px; + top: -9px; + background: var(--moe-slider-color); + box-shadow: 0 1px 4px rgba(0,0,0,.5); + transition: transform .15s, background-color .15s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-slider{ + transform: scale(1.25); +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg:hover .moe-bar-progress-mouseline{ + display: block; +} +/*控制栏隐藏时的细进度条*/ +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out{ + height: 2px; + top:-2px; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-load,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg .moe-bar-progress-play{ + height: 2px; + margin-top: 0; + border-radius: 0; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-slider{ + width: 14px; + height: 2px; + top: -2px; + box-shadow: none; + background: rgba(255,255,255,0); + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg .moe-bar-progress-prompt{ + height: 2px; + top: 0; + border-radius: 0; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-slider-move .moe-bar-progress-play,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-slider-move .moe-bar-progress-slider{ + transition: 0s; +} + +/*======================== 音量调节栏 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox{ + float: right; + width: var(--moe-btn-size); + overflow-x: hidden; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox{ + width: var(--moe-btn-size-full); +} +/*默认状态-音量调节总外框*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume{ + width: var(--moe-btn-size); + height: 215px; + background: rgba(0,0,0,.01); + position: absolute; + z-index: 1; + bottom: 46px; + display: none; + overflow: hidden; +} +/*全屏状态-音量调节总外框*/ +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-bar-volume{ + width: var(--moe-btn-size-full); + bottom: 68px; +} +/*默认状态-音量调节总外框-鼠标经过时样式*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox:hover .moe-bar-volume{ + display: block; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .1s; + animation-duration: .1s; + -webkit-animation-name: moe-bounceIn; + animation-name: moe-bounceIn; +} +/*共用状态-音量调节内部外框*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volumex{ + width: 100%; + height: 200px; + float: left; + background: var(--moe-volume-panel-bg); + border-radius: var(--moe-radius); + box-shadow: var(--moe-popup-shadow); +} +/*共用状态-音量调节顶部文字*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-txt{ + width: 100%; + height: 40px; + line-height: 40px; + color: var(--moe-popup-text); + text-align: center; + font-size: 1rem; + float: left; + overflow: hidden; + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} +/*共用状态-音量调节背景色*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-bg{ + width: 6px; + height: 140px; + background: var(--moe-volume-bg); + border-radius: 3px; + overflow: hidden; + cursor: pointer; + margin: auto; +} +/*共用状态-音量调节前景色*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-bg .moe-bar-volume-pp{ + width: 6px; + height: 140px; + background: var(--moe-volume-play); + margin-top: 140px; +} +/*共用状态-音量调节拖动小按钮*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-slider{ + width: 12px; + height: 12px; + background: #FFF; + border-radius: 50%; + overflow: hidden; + box-shadow: 0 1px 4px rgba(0,0,0,.5); + position: absolute; + z-index: 1; + top: 0px; + left: 18px; + cursor: pointer; +} +/*全屏状态-音量调节拖动小按钮*/ +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-slider{ + left: 29px; +} +/*默认状态-显示时间*/ +.moeplayer .moe-main .moe-bar .moe-bar-time{ + float: left; + line-height: var(--moe-bar-height); + font-size: 14px; + padding: 0 4px; + color: var(--moe-text-color); + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} +/*全屏状态-显示时间*/ +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-time{ + float: left; + line-height: var(--moe-bar-height-full); + font-size: 18px; + color: var(--moe-text-color); +} + +/*======================== 右侧控制栏 ========================*/ +.moeplayer .moe-main .moe-right-bar{ + position: absolute; + z-index: 260; + top: 0; + right: 2px; + bottom: 0; + margin: auto !important; + width: var(--moe-btn-size); + height: 144px; + background: var(--moe-right-bar-bg); + border-radius: var(--moe-radius); + transition: .2s; +} +.moeplayer .moe-main .moe-right-bar-hide{ + right: -48px; + transition: .2s; +} +.moeplayer .moe-main.moe-main-full .moe-right-bar{ + width: var(--moe-btn-size-full); + height: 210px; +} +.moeplayer .moe-main.moe-main-full .moe-right-bar-hide{ + right: -70px; + transition: .2s; +} +/*截图按钮*/ +.moeplayer .moe-main .moe-right-bar .moe-btn-screenshot{ + float: left; +} +/*小窗口按钮组*/ +.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows{ + float: left; +} +.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows button{ + float: left; +} +.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close{ + display: none; +} +/*循环按钮组*/ +.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop{ + float: left; +} +.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close{ + display: none; +} + +/*======================== 顶部显示栏 ========================*/ +.moeplayer .moe-main .moe-top-bar{ + position: absolute; + z-index: 260; + top: -36px; + width: 100%; + height: 36px; + background: var(--moe-top-bar-bg); + transition: .2s; +} +.moeplayer .moe-main .moe-top-bar-hide{ + top: -36px; + transition: .2s; +} +.moeplayer .moe-main.moe-main-full .moe-top-bar{ + top: 0; +} +.moeplayer .moe-main.moe-main-full .moe-top-bar-hide{ + top: -36px; + transition: .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom{ + position: absolute; + z-index: 260; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container{ + float: left; + margin-left: 10px; + margin-top: 9px; + cursor: pointer; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left{ + float: left; + width: 20px; + height: 18px; + border: 1px solid var(--moe-top-bar-text); + box-sizing:content-box; + transition: border-color .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-left, +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-left{ + border-color: var(--moe-accent); +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-left div, +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-left div{ + background: var(--moe-accent); +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-right{ + float: left; + font-size: 14px; + color: var(--moe-top-bar-text); + padding-left: 5px; + transition: color .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-right, +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-right{ + color: var(--moe-accent); +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-50{ + width: 50%; + height: 50%; + background: var(--moe-top-bar-text); + margin: 4.5px 25%; + transition: background .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-75{ + width: 75%; + height: 50%; + background: var(--moe-top-bar-text); + margin: 4.5px 12.5%; + transition: background .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-100{ + width: 100%; + height: 50%; + background: var(--moe-top-bar-text); + margin: 4.5px 0; + transition: background .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-title{ + position: absolute; + z-index: 1; + top: 0px; + width: 100%; + height: 36px; + line-height: 36px; + text-align: center; + font-size: 18px; + color: var(--moe-top-bar-text); + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-time{ + float: right; + height: 36px; + line-height: 36px; + font-size: 14px; + color: var(--moe-top-bar-text); + padding: 0 1rem 0; + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} + +/*======================== 缓动效果 ========================*/ +.moe-animate { + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .3s; + animation-duration: .3s; +} +.moe-animate-bouncein { + -webkit-animation-name: moe-bounceIn; + animation-name: moe-bounceIn; +} + +@-webkit-keyframes moe-bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5) + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes moe-bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.5); + -ms-transform: scale(.5); + transform: scale(.5); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +.moe-animate-bounceout { + -webkit-animation-name: moe-bounceOut; + animation-name: moe-bounceOut; +} + +@-webkit-keyframes moe-bounceOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5); + } +} + +@keyframes moe-bounceOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5); + } +} +.moe-animate-circle { + animation: moe-Circle 1s linear infinite; + -webkit-animation: moe-Circle 1s linear infinite +} + +@-webkit-keyframes moe-Circle { + 0% { + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg) + } + 25% { + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg) + } + 50% { + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg) + } + 75% { + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg) + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg) + } +} + +@keyframes moe-Circle { + 0% { + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg) + } + 25% { + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg) + } + 50% { + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg) + } + 75% { + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg) + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg) + } +} + +/* + * 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); +} diff --git a/moeplayer/css/moeplayer.ixigua.css b/moeplayer/css/moeplayer.ixigua.css index c3380dd..cf8fbbf 100644 --- a/moeplayer/css/moeplayer.ixigua.css +++ b/moeplayer/css/moeplayer.ixigua.css @@ -1,1707 +1,1671 @@ -.moeplayer-error{ - position: fixed; - z-index: 9999999; - left: 10px; - bottom: 10px; - width: auto; - height: 38px; - line-height: 38px; - padding: 0 .85rem; - background: rgb(0,0,0,.9); - border-radius: .25rem; - color: #FFF; - font-size: 14px; - white-space: nowrap; -} -.moeplayer{ - width: 100%; - height: 100%; - float: left; - background: #000; - overflow: hidden; -} -.moeplayer .moe-main.moe-nocursor{ - cursor: none; -} -.moeplayer-smallwindow{ - position: fixed; - z-index: 9999999; - width: 420px; - max-width: 100%; - height: 266px; - right: 10px; - bottom: 10px; -} -.moeplayer .moe-main{ - width: 100%; - height: 100%; - overflow: hidden; - background: #000; - position: relative; -} -.moeplayer .moe-main .moe-video{ - width: 100%; - height: 100%; - overflow: hidden; - position:absolute; - z-index: 1; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; -} -.moeplayer .moe-main .moe-video video,.moeplayer .moe-main .moe-video canvas{ - width: 100%; - height: 100%; -} -.moeplayer .moe-main .moe-error{ - width: 100%; - height: 80px; - line-height: 35px; - text-align: center; - color: #FFF; - position:absolute; - z-index: 70; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; - overflow: hidden; -} -.moeplayer .moe-main .moe-logo{ - position:absolute; - right: 20px; - top:20px; - z-index: 400; -} -.moeplayer .moe-main .moe-loading{ - position:absolute; - top:0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - z-index: 80; - width: 80px; - height: 80px; - border-radius: 50%; - background: url(images/loading.png) no-repeat center center; - background-size: 100% 100%; - animation: moe-Circle 1.5s linear infinite; - -webkit-animation: moe-Circle 1.5s linear infinite -} -.moeplayer .moe-main .moe-center-play{ - background: url(images/play.png) no-repeat 70% center; - background-size:60% 60%; - border: 8px solid rgba(255,255,255,.3); - border-radius: 50%; - box-sizing:border-box; - -moz-box-sizing:border-box; /* Firefox */ - -webkit-box-sizing:border-box; /* Safari */ - width: 80px; - height: 80px; - position: absolute; - display: none; - z-index: 90; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; - cursor: pointer; - transition: .2s; -} -.moeplayer .moe-main.moe-main-full .moe-center-play{ - width: 100px; - height: 100px; -} -.moeplayer .moe-main .moe-center-play:hover{ - width: 100px; - height: 100px; - transition: 0.2s; -} -.moeplayer .moe-main.moe-main-full .moe-center-play:hover{ - width: 120px; - height: 120px; -} -.moeplayer .moe-main .moe-buffer{ - background: url(images/buffer.png) no-repeat center center; - background-size:100% 100%; - border-radius: 50%; - width: 60px; - height: 60px; - position: absolute; - z-index: 100; - top:0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - display: none; - animation: moe-Circle 1s linear infinite; - -webkit-animation: moe-Circle 1s linear infinite -} -.moeplayer .moe-main .moe-message{ - position: absolute; - z-index: 240; - left:5px; - bottom: 78px; - padding: 0 1rem; - line-height: 30px; - height: 30px; - width: auto; - min-width: 1px; - border-radius: .25rem; - background: rgba(0,0,0,.6); - font-size: 14px; - color: #FFF; - display: none; - white-space:nowrap; -} -.moeplayer .moe-main .moe-message-right{ - left:auto; - right: 5px; -} -.moeplayer .moe-main.moe-main-full .moe-message{ - font-size: 18px; - bottom: 100px; -} -.moeplayer .moe-main .moe-tip{ - width: auto; - height: auto; - position: absolute; - z-index: 230; - display: none; - margin-bottom: 1px; -} -.moeplayer .moe-main .moe-tip .moe-content{ - width: auto; - height: auto; - white-space: nowrap; - min-width: 1px; - background: rgba(0,0,0,.6); - font-size: 14px; - color: #FFF; - line-height: 32px; - height: 32px; - padding: 0 15px; -} -.moeplayer .moe-main .moe-tip .moe-content-float-auto{ - border-radius: 5px; - margin: auto; -} -.moeplayer .moe-main .moe-tip .moe-content-float-left{ - border-radius: 5px; - float: left; -} -.moeplayer .moe-main.moe-main-full .moe-tip .moe-content{ - font-size: 18px; -} -.moeplayer .moe-main .moe-tip .moe-triangle{ - width: 0px; - height: 0px; -} -.moeplayer .moe-main .moe-tip .moe-triangle-auto{ - border-left: 8px solid transparent; - border-top: 8px solid rgba(0, 0, 0,.6); - border-right: 8px solid transparent; - margin: auto; -} -.moeplayer .moe-main .moe-tip .moe-triangle-left{ - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 8px solid rgba(0, 0, 0,.6); - float: left; - margin-top: 10px; -} -.moeplayer .moe-main .moe-preview{ - position: absolute; - z-index: 210; - width: 100%; - left:0; - bottom: 64px; - overflow: hidden; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-preview{ - bottom: 86px; -} -.moeplayer .moe-main .moe-preview-load-img{ - position: absolute; - z-index: 210; - top:110%; -} -.moeplayer .moe-main .moe-preview .moe-preview-bg{ - position: absolute; - z-index: 1; - top:0; - float: left; - transition: .2s; -} -.moeplayer .moe-main .moe-preview .moe-preview-bg .moe-preview-img{ - background-repeat: no-repeat ; - float: left; -} -.moeplayer .moe-main .moe-preview .moe-preview-frame{ - position: absolute; - z-index: 2; - top:0; - left:-1000px; - border:4px solid #0078ff; - box-sizing:content-box; - -moz-box-sizing:content-box; /* Firefox */ - -webkit-box-sizing:content-box; /* Safari */ -} -.moeplayer .moe-main .moe-prompt-words{ - position: absolute; - z-index: 220; - width: 213px; - line-height: 23px; - font-size: 14px; - color: #FFF; - background: rgba(0, 0, 0,.6); - overflow: hidden; - display: none; - margin-bottom: 10px; - border-radius: 3px; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-duration: .2s; - animation-duration: .2s; - -webkit-animation-name: moe-bounceIn; - animation-name: moe-bounceIn; -} -.moeplayer .moe-main .moe-prompt-words .moe-prompt-content{ - padding: 5px; -} -.moeplayer .moe-main .moe-layer{ - position: absolute; - z-index: 101; -} -.moeplayer .moe-main .moe-tempTime{ - position: absolute; - z-index: 20; - left:10px; - bottom: 5px; - display: none; - font-size: 14px; - line-height: 28px; - color: #FFF; -} -/*关于*/ -.moeplayer .moe-main .moe-about{ - position: absolute; - z-index: 200; - width: 50%; - max-width: 600px; - min-width: 400px; - left: 1rem; - top: 1rem; - background: rgba(0,0,0,.6); - padding: 1rem 0; - display: none; -} -.moeplayer .moe-main .moe-about ul{ - padding: 0; - margin: 0; -} -.moeplayer .moe-main .moe-about ul li{ - list-style:none; - color: #FFF; - font-size: 12px; - line-height: 18px; - height: 18px; - padding: 0; - margin: 0; -} -.moeplayer .moe-main .moe-about ul li .moe-about-title{ - width: 100px; - text-align: right; - float: left; - padding-right: .5rem; -} -.moeplayer .moe-main .moe-about ul li .moe-about-content{ - width: auto; - float: left; -} -.moeplayer .moe-main .moe-about .moe-about-bar{ - position: absolute; - z-index: 1; - top: 0; - right: 0; - width: 96px; -} -.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar{ - width: 140px; -} -.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-copy{ - background-position:-1632px 0; -} -.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-copy:hover{ - background-position:-1680px 0; -} -.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar .moe-btn-about-copy{ - background-position:-2380px 0; -} -.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar .moe-btn-about-copy:hover{ - background-position:-2450px 0; -} -.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-close{ - background-position:-1728px 0; -} -.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-close:hover{ - background-position:-1776px 0; -} -.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar .moe-btn-about-close{ - background-position:-2520px 0; -} -.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar .moe-btn-about-close:hover{ - background-position:-2590px 0; -} -/*截图显示容器*/ -.moeplayer .moe-main .moe-screenshot{ - position: absolute; - z-index: 220; - width: auto; - height: 144px; - margin: auto !important; - top: 0; - bottom: 0; - right: 55px; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-screenshot{ - height: 210px; - right: 77px; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-img{ - position: absolute; - z-index: 1; - width: 100%; - height: 100%; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-img img{ - height: 100%; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar{ - position: absolute; - z-index: 1; - width: 100%; - height: 36px; - bottom: 5px; - text-align: center; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn{ - display: inline-block; - overflow: hidden; - border: 0px solid transparent; - border-radius: 5px; - vertical-align: middle; - text-align: center; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - line-height: 30px; - padding: 0px 15px; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - color: #fff; - margin: 0 5px; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn:hover{ - color: #FFFF00; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn:focus{ - outline:0; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-down{ - background-color: #007bff; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-close{ - background-color: #505050; - color: #fff; -} -/*广告*/ -.moeplayer .moe-main .moe-yytf{ - position: absolute; - z-index: 800; - width: 100%; - height: 100%; - left: 0px; - top: 0px; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-front-link{ - width: 100%; - height: 100%; - display: none; - cursor: pointer; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-front-picture{ - width: 100%; - height: 100%; - background: #000; - display: none; - text-align: center; - line-height: 100%; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-front-picture img{ - max-width: 100%; - max-height: 100%; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-top{ - position: absolute; - z-index: 3; - top: 10px; - right: 10px; -} - -.moeplayer .moe-main .moe-yytf .moe-yytf-top div{ - float: right; - margin-left: 10px; - font-size: 14px; - border-radius: 15px; - background: rgba(0,0,0,.6); - padding: 0px 10px; - line-height: 30px; - height: 30px; - color: #FFF; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-top div{ - font-size: 18px; - border-radius: 20px; - line-height: 40px; - height: 40px; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-top .moe-yytf-closetime{ - display: none; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-top .moe-yytf-closead{ - cursor: pointer; - display: none; -} - -/*显示广告时的底部内容*/ -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom{ - position: absolute; - z-index: 3; - bottom: 10px; - right: 10px; -} -/*显示广告时的底部按钮-共用*/ -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn{ - background-color: rgba(0,0,0,.6); - background-image: url(images/moeplayer_ixigua.png); - background-size: auto 100%; - border: none; - outline: none; - width: 30px; - height: 30px; - cursor: pointer; - background-repeat: no-repeat; - border-radius: 50%; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-btn{ - width: 40px; - height: 40px; -} -/*显示广告时的静音按钮*/ -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit{ - float: right; - width: 30px; - height: 30px; - margin-left: 10px; - overflow: hidden; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit{ - width: 40px; - height: 40px; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted{ - background-position:-180px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted:hover{ - background-position:-210px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted{ - background-position:-240px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted:hover{ - background-position:-270px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted{ - background-position:-240px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted:hover{ - background-position:-280px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted{ - background-position:-320px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted:hover{ - background-position:-360px 0; -} -/*显示广告时的全屏按钮*/ -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit{ - float: right; - width: 30px; - height: 30px; - margin-left: 10px; - overflow: hidden; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit{ - width: 40px; - height: 40px; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full{ - background-position:-300px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full:hover{ - background-position:-330px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull{ - background-position:-360px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull:hover{ - background-position:-390px 0; -} - -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full{ - background-position:-400px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full:hover{ - background-position:-440px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull{ - background-position:-480px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull:hover{ - background-position:-520px 0; -} -/*广告查看详情按钮*/ -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-details{ - float: right; - font-size: 14px; - border-radius: 15px; - background: rgba(0,0,0,.6); - padding: 0 10px; - color: #FFF; - line-height: 30px; - height: 30px; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-details{ - font-size: 18px; - border-radius: 20px; - line-height: 40px; - height: 40px; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-details a{ - color: #FFF; - text-decoration: none; -} -/*暂停广告容器*/ -.moeplayer .moe-main .moe-pause-yytf{ - display: none; - position:absolute; - z-index: 800; - max-width: 100%; - max-height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; -} -.moeplayer .moe-main .moe-pause-yytf img{ - max-width: 100%; - max-height: 100%; -} -.moeplayer .moe-main .moe-pause-close{ - position:absolute; - z-index: 1; - right: -15px; - top:-15px; - width: 30px; - height: 30px; - background-color: transparent; - background-image: url(images/adclose.png); - border: none; - outline: none; - cursor: pointer; - background-repeat: no-repeat ; -} -.moeplayer .moe-main .moe-pause-close:hover{ - background-position:-30px 0; -} -/*右键菜单*/ -.moeplayer-menu{ - width:120px; - background: rgba(0,0,0,.8); - position: absolute; - z-index: 9000; - font-size:14px ; - border: 1px #000 solid; - display: none; - border-radius: 5px; -} -.moeplayer-menu .moe-li{ - color: #adadad; - line-height: 35px; - padding: 0 0 0 5px; -} -.moeplayer-menu .moe-li a{ - color: #FFF; - text-decoration: none; -} -.moeplayer-menu .moe-underline{ - border-bottom: 1px #000 solid; -} -/*控制栏*/ -.moeplayer .moe-main .moe-bar{ - position:absolute; - z-index: 260; - left:0px; - bottom:0px; - width: 100%; - height: 48px; - background: rgba(0,0,0,.3); - transition: 0.2s; -} -.moeplayer .moe-main.moe-main-full .moe-bar{ - height: 70px; -} -.moeplayer .moe-main .moe-bar.moe-bar-out{ - bottom: -50px; - transition: 0.2s; -} -.moeplayer .moe-main.moe-main-full .moe-bar.moe-bar-out{ - bottom: -80px; - transition: 0.2s; -} - -/*按钮公用样式*/ -.moeplayer .moe-main .moe-bar-btn{ - background-color: transparent; - background-image: url(images/moeplayer_ixigua.48.png); - background-size: auto 100%; - border: none; - outline: none; - width: 48px; - height: 48px; - cursor: pointer; - background-repeat: no-repeat ; -} -.moeplayer .moe-main.moe-main-full .moe-bar-btn{ - background-image: url(images/moeplayer_ixigua.png); - width: 70px; - height: 70px; -} -.moeplayer .moe-main .moe-bar .moe-bar-btn:hover{ - background-size:auto 100%; -} - -/*播放暂停按钮组*/ -.moeplayer .moe-main .moe-bar .moe-bar-playandpause{ - float: left; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-play{ - background-position:0px top; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-play:hover{ - background-position:-48px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playandpause .moe-btn-play:hover{ - background-position:-70px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-pause{ - background-position:-96px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playandpause .moe-btn-pause{ - background-position:-140px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-pause:hover{ - background-position:-144px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playandpause .moe-btn-pause:hover{ - background-position:-210px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-refresh{ - background-position:-192px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playandpause .moe-btn-refresh{ - background-position:-280px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-refresh:hover{ - background-position:-240px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playandpause .moe-btn-refresh:hover{ - background-position:-350px 0; -} - -/*返回播放按钮*/ -.moeplayer .moe-main .moe-bar .moe-btn-backlive{ - float: left; - font-size: 16px; - line-height: 28px; - border-radius: 3px; - margin: 10px; - border: 0px; - background: rgba(3,60,146,.5); - color: #FFF; - cursor: pointer; - padding: 0 8px; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-btn-backlive{ - font-size: 18px; - line-height: 36px; - margin: 17px 10px; -} -.moeplayer .moe-main .moe-bar .moe-btn-backlive:hover{ - background: rgba(3,60,146,.9); -} -.moeplayer .moe-main .moe-bar .moe-btn-backlive:focus{ - outline:0; - background: rgba(3,60,146,.6); -} -/*静音取消静音按钮组*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-btn-muted{ - background-position:-288px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-btn-muted{ - background-position:-420px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-btn-muted:hover{ - background-position:-336px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-btn-muted:hover{ - background-position:-490px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-btn-exitmuted{ - background-position:-384px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-btn-exitmuted{ - background-position:-560px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-btn-exitmuted:hover{ - background-position:-432px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-btn-exitmuted:hover{ - background-position:-630px 0; -} - -/*全屏按钮组*/ -.moeplayer .moe-main .moe-bar .moe-bar-fullandexit{ - float: right; -} -.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-full{ - background-position:-480px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-fullandexit .moe-btn-full{ - background-position:-700px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-full:hover{ - background-position:-528px 0; - -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-main-full .moe-bar .moe-bar-fullandexit .moe-btn-full:hover{ - background-position:-770px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-exitfull{ - background-position:-672px 0; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-fullandexit .moe-btn-exitfull{ - background-position:-840px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-exitfull:hover{ - background-position:-720px 0; - -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-main-full .moe-bar .moe-bar-fullandexit .moe-btn-exitfull:hover{ - background-position:-910px 0; -} - -/*网页全屏按钮组*/ -.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit{ - float: right; -} -.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-webfull{ - background-position:-768px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-webfullandexit .moe-btn-webfull{ - background-position:-1120px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-webfull:hover{ - background-position:-816px 0; - -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-main-full .moe-bar .moe-bar-webfullandexit .moe-btn-webfull:hover{ - background-position:-1190px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull{ - background-position:-864px 0; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull{ - background-position:-1260px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull:hover{ - background-position:-912px 0; - -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-main-full .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull:hover{ - background-position:-1330px 0; -} - -/*剧场模式按钮组*/ -.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit{ - float: right; -} -.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-theatre{ - background-position:-960px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-theatreandexit .moe-btn-theatre{ - background-position:-1400px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-theatre:hover{ - background-position:-1008px 0; - -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; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-theatreandexit .moe-btn-theatre:hover{ - background-position:-1470px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre{ - background-position:-1056px 0; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre{ - background-position:-1540px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre:hover{ - background-position:-1104px 0; - -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; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre:hover{ - background-position:-1610px 0; -} -/*播放速度*/ -.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box{ - float: right; - height: 48px; - line-height: 48px; - position: relative; - cursor: pointer; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playbackrate-box{ - height: 70px; - line-height: 70px; -} -.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate{ - height: 100%; - padding: 0 10px; - white-space:nowrap; - font-size: 16px; - color: #cfcccc; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate{ - font-size: 18px; -} -.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate:hover{ - color: #FFF; -} -.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate-bg-box { - width: auto; - height: auto; -} -.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box:hover .moe-bar-playbackrate-bg-box { - display: block; -} -/*字幕*/ -.moeplayer .moe-main .moe-bar .moe-bar-track-box{ - float: right; - height: 48px; - line-height: 48px; - position: relative; - cursor: pointer; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-track-box{ - height: 70px; - line-height: 70px; -} -.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track{ - height: 100%; - padding: 0 10px; - white-space:nowrap; - font-size: 16px; - color: #cfcccc; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-track-box .moe-bar-track{ - font-size: 18px; -} -.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track:hover{ - color: #FFF; -} -.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track-bg-box { - width: auto; - height: auto; -} -.moeplayer .moe-main .moe-bar .moe-bar-track-box:hover .moe-bar-track-bg-box { - display: block; -} -/*清晰度*/ -.moeplayer .moe-main .moe-bar .moe-bar-definition-box{ - float: right; - height: 48px; - line-height: 48px; - position: relative; - cursor: pointer; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-definition-box{ - height: 70px; - line-height: 70px; -} -.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition{ - height: 100%; - padding: 0 10px; - white-space:nowrap; - font-size: 16px; - color: #cfcccc; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-definition-box .moe-bar-definition{ - font-size: 18px; -} -.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition:hover{ - color: #FFF; -} -.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition-bg-box { - width: auto; - height: auto; -} -.moeplayer .moe-main .moe-bar .moe-bar-definition-box:hover .moe-bar-definition-bg-box { - display: block; -} -/*列表切换*/ -.moeplayer .moe-main .moe-bar .moe-list-bg-box { - background: rgba(0,0,0,.001); - position: absolute; - z-index: 1; - bottom: 46px; - display: none; - -webkit-animation-duration: .2s; - animation-duration: .2s; - -webkit-animation-name: moe-bounceIn; - animation-name: moe-bounceIn; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box { - bottom: 68px; -} -.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg{ - background: rgba(0,0,0,.6); - float: left; - border-radius: 5px; - padding: 10px; - margin-bottom: 10px; -} -.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p{ - width: 100%; - float: left; - line-height: 35px; - color: #cfcccc; - text-align: center; - font-size: 14px; - background-color: rgba(0,0,0,0); - border: 0px; - white-space:nowrap; - cursor: pointer; -} -.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p:hover{ - color: #FFF; - font-size: 16px; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p:hover{ - font-size: 20px; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p{ - font-size: 18px; -} -.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p-focus{ - color: #FF0302; -} -/*下一集按钮*/ -.moeplayer .moe-main .moe-bar .moe-bar-next{ - float: left; - background-position:-672px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-next{ - background-position:-980px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-next:hover{ - background-position:-720px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-next:hover{ - background-position:-1050px 0; -} -/*进度栏*/ -.moeplayer .moe-main .moe-bar .moe-bar-progress{ - width: 100%; - position:absolute; - z-index: 1; - height: 12px; - top:-11px; - transition: 0.2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg{ - width: 100%; - background: rgba(255,255,255,.3); - margin-top: 2px; - overflow: hidden; - height: 10px; - transition: .2s; - cursor: pointer; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-load{ - float: left; - width: 0px; - background: rgba(169,169,169,.7); - height: 10px; - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-play{ - width: 0px; - background: #e80101; - position: absolute; - z-index: 1; - height: 10px; - transition: .2s; - cursor: pointer; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-mouseline{ - width: 3px; - background: rgba(255,255,255,.6); - position: absolute; - z-index: 2; - display: none; - height: 10px; - cursor: pointer; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-prompt{ - background: #FFF; - position: absolute; - z-index: 3; - border-radius: 50%; - width: 10px; - height: 10px; - top:2px; - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-slider{ - border-radius: 50%; - overflow: hidden; - position: relative; - float: left; - z-index: 4; - left: 0px; - cursor: pointer; - width: 12px; - height: 12px; - top: -11px; - background: #FFF; - box-shadow: 0px 0px 0px 4px rgba(255,255,255,.5); -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-slider:hover{ - background: #e80101; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg:hover .moe-bar-progress-mouseline{ - display: block; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out{ - height: 2px; - top:-2px; - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-load,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg .moe-bar-progress-play{ - height: 2px; - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-slider{ - width: 12px; - height: 2px; - top: -2px; - box-shadow: 0px 0px 0px 0px rgba(255,255,255,0); - background: rgba(232,1,1,0); - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg .moe-bar-progress-prompt{ - height: 2px; - border-radius: 0; - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-slider-move .moe-bar-progress-play,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-slider-move .moe-bar-progress-slider{ - transition: 0s; -} - -/*音量调节栏*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox{ - float: right; - width: 48px; - overflow-x: hidden; -} -/*音量调节栏*/ -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox{ - width: 70px; -} -/*默认状态-音量调节总外框*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume{ - width: 48px; - height: 215px; - background: rgba(0,0,0,.01); - position: absolute; - z-index: 1; - bottom: 46px; - display: none; - overflow: hidden; -} -/*全屏状态-音量调节总外框*/ -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-bar-volume{ - width: 70px; - bottom: 68px; -} -/*默认状态-音量调节总外框-鼠标经过时样式*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox:hover .moe-bar-volume{ - display: block; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-duration: .1s; - animation-duration: .1s; - -webkit-animation-name: moe-bounceIn; - animation-name: moe-bounceIn; -} -/*共用状态-音量调节内部外框*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volumex{ - width: 100%; - height: 200px; - float: left; - background: rgba(0,0,0,.8); - border-radius: 5px; -} -/*共用状态-音量调节顶部文字*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-txt{ - width: 100%; - height: 40px; - line-height: 40px; - color: #FFF; - text-align: center; - font-size: 1rem; - float: left; - overflow: hidden; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -/*共用状态-音量调节背景色*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-bg{ - width: 8px; - height: 140px; - background: #808080; - border-radius: 3px; - overflow: hidden; - cursor: pointer; - margin: auto; -} -/*共用状态-音量调节前景色*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-bg .moe-bar-volume-pp{ - width: 8px; - height: 140px; - background: #e80101; - margin-top: 140px; -} -/*共用状态-音量调节拖动小按钮*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-slider{ - width: 10px; - height: 10px; - background: #FFF; - border-radius: 50%; - overflow: hidden; - box-shadow: 0px 0px 0px 8px rgba(255,255,255,.5); - position: absolute; - z-index: 1; - top: 0px; - left: 19px; - cursor: pointer; -} -/*全屏状态-音量调节拖动小按钮*/ -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-slider{ - left: 30px; -} -/*默认状态-显示时间*/ -.moeplayer .moe-main .moe-bar .moe-bar-time{ - float: left; - line-height: 48px; - font-size: 16px; - color: #cfcccc; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -/*全屏状态-显示时间*/ -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-time{ - float: left; - line-height: 70px; - font-size: 18px; - color: #cfcccc; -} -/*右侧控制栏*/ -.moeplayer .moe-main .moe-right-bar{ - position: absolute; - z-index: 260; - top: 0; - right: 2px; - bottom: 0; - margin: auto !important; - width: 48px; - height: 144px; - background: rgba(0,0,0,.3); - border-radius: 5px; - transition: .2s; -} -.moeplayer .moe-main .moe-right-bar-hide{ - right: -48px; - transition: .2s; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar{ - width: 70px; - height: 210px; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar-hide{ - right: -70px; - transition: .2s; -} -/*截图按钮*/ -.moeplayer .moe-main .moe-right-bar .moe-btn-screenshot{ - float: left; - background-position:-1536px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-btn-screenshot{ - background-position:-2240px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-btn-screenshot:hover{ - background-position:-1584px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-btn-screenshot:hover{ - background-position:-2310px 0; -} -/*小窗口按钮组*/ -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows{ - float: left; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows button{ - float: left; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-open{ - background-position:-1248px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-open{ - background-position:-1820px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-open:hover{ - background-position:-1296px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-open:hover{ - background-position:-1890px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close{ - background-position:-1152px 0; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close{ - background-position:-1680px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close:hover{ - background-position:-1200px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close:hover{ - background-position:-1750px 0; -} -/*循环按钮组*/ -.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop{ - float: left; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-open{ - background-position:-1440px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-loop .moe-btn-loop-open{ - background-position:-2100px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-open:hover{ - background-position:-1488px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-loop .moe-btn-loop-open:hover{ - background-position:-2170px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close{ - background-position:-1344px 0; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close{ - background-position:-1960px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close:hover{ - background-position:-1392px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close:hover{ - background-position:-2030px 0; -} -/*顶部显示栏*/ -.moeplayer .moe-main .moe-top-bar{ - position: absolute; - z-index: 260; - top: -36px; - width: 100%; - height: 36px; - background: rgba(0,0,0,.3); - transition: .2s; -} -.moeplayer .moe-main .moe-top-bar-hide{ - top: -36px; - transition: .2s; -} -.moeplayer .moe-main.moe-main-full .moe-top-bar{ - top: 0; -} -.moeplayer .moe-main.moe-main-full .moe-top-bar-hide{ - top: -36px; - transition: .2s; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom{ - position: absolute; - z-index: 260; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container{ - float: left; - margin-left: 10px; - margin-top: 9px; - cursor: pointer; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left{ - float: left; - width: 20px; - height: 18px; - border: 1px solid #FFF; - box-sizing:content-box; - -moz-box-sizing:content-box; /* Firefox */ - -webkit-box-sizing:content-box; /* Safari */ -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-left, -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-left{ - border-color: #e80101; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-left div, -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-left div{ - background: #e80101; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-right{ - float: left; - font-size: 14px; - color: #FFF; - padding-left: 5px; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-right, -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-right{ - color: #e80101; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-50{ - width: 50%; - height: 50%; - background: #FFF; - margin: 4.5px 25%; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-75{ - width: 75%; - height: 50%; - background: #FFF; - margin: 4.5px 12.5%; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-100{ - width: 100%; - height: 50%; - background: #FFF; - margin: 4.5px 0; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-title{ - position: absolute; - z-index: 1; - top: 0px; - width: 100%; - height: 36px; - line-height: 36px; - text-align: center; - font-size: 18px; - color: #FFF; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-time{ - float: right; - height: 36px; - line-height: 36px; - font-size: 14px; - color: #FFF; - padding: 0 1rem 0; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -/*以下为缓动效果样式*/ -.moe-animate { - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-duration: .3s; - animation-duration: .3s; -} -.moe-animate-bouncein { - -webkit-animation-name: moe-bounceIn; - animation-name: moe-bounceIn; -} - -@-webkit-keyframes moe-bounceIn { - 0% { - opacity: 0; - -webkit-transform: scale(.5); - transform: scale(.5) - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } -} - -@keyframes moe-bounceIn { - 0% { - opacity: 0; - -webkit-transform: scale(.5); - -ms-transform: scale(.5); - transform: scale(.5); - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - } -} -.moe-animate-bounceout { - -webkit-animation-name: moe-bounceOut; - animation-name: moe-bounceOut; -} - -@-webkit-keyframes moe-bounceOut { - 0% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } - 100% { - opacity: 0; - -webkit-transform: scale(.5); - transform: scale(.5); - } -} - -@keyframes moe-bounceOut { - 0% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } - 100% { - opacity: 0; - -webkit-transform: scale(.5); - transform: scale(.5); - } -} - -.moe-animate-circle { - animation: moe-Circle 1s linear infinite; - -webkit-animation: moe-Circle 1s linear infinite -} - -@-webkit-keyframes moe-Circle { - 0% { - transform: rotate(0deg); - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg) - } - 25% { - transform: rotate(90deg); - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg) - } - 50% { - transform: rotate(180deg); - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg) - } - 75% { - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg) - } - 100% { - transform: rotate(360deg); - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg) - } -} - -@keyframes moe-Circle { - 0% { - transform: rotate(0deg); - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg) - } - 25% { - transform: rotate(90deg); - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg) - } - 50% { - transform: rotate(180deg); - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg) - } - 75% { - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg) - } - 100% { - transform: rotate(360deg); - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg) - } -} - -@-webkit-keyframes moe-button-hover { - 0% { - -webkit-transform: scale(1); - transform: scale(1); - } - 50% { - -webkit-transform: scale(1.2); - transform: scale(1.2); - } - 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.2); - transform: scale(1.2); - } - 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.2,1); - transform: scale(1.2,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.2,1); - transform: scale(1.2,1); - } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - } -} \ No newline at end of file +/* + * 软件名称：MoePlayer + * 版本:X3 + * 版权：MoePlayer 项目(fork 自 ckplayer, www.ckplayer.com) + * 开源协议：MIT + * 本文件由 npm run build 自动生成(src/css/base.css + 主题),请勿手动修改 + */ +/* + * MoePlayer 皮肤基础样式(base.css) + * 功能：三个皮肤共用的全部结构样式 + 默认主题变量 + * 说明：所有颜色/主题相关值均为 CSS 自定义属性(--moe-*),定义在 .moeplayer 作用域上 + * (右键菜单 .moeplayer-menu、错误框 .moeplayer-error 会被挂载到 body 下,故一并定义) + * 各主题(src/css/themes/*.css)只需覆盖这些变量即可换肤 + * 图标：全部使用 SVG data-URI + CSS mask 实现,颜色跟随 --moe-icon-color,换肤零成本 + * 本文件不单独使用,由 scripts/build-css.js 与各主题拼接生成最终产物 + */ + +/*======================== 主题变量(默认值即默认皮肤) ========================*/ +.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-progress-play: var(--moe-accent); + --moe-slider-color: var(--moe-accent); + /* 音量条:轨道/已音量/面板背景 */ + --moe-volume-bg: rgba(255,255,255,.25); + --moe-volume-play: var(--moe-accent); + --moe-volume-panel-bg: rgba(0,0,0,.85); + /* 弹层(倍速/字幕/清晰度列表等) */ + --moe-popup-bg: rgba(0,0,0,.85); + --moe-popup-text: #FFF; + --moe-popup-hover: var(--moe-accent); + --moe-popup-shadow: 0 4px 16px rgba(0,0,0,.3); + /* 浮层提示(message/tip/prompt 等,浮于视频上方,不随浅色主题变化) */ + --moe-overlay-bg: rgba(0,0,0,.85); + --moe-overlay-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); + /* 圆角与字体 */ + --moe-radius: 6px; + --moe-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; + /* 尺寸 */ + --moe-bar-height: 48px; + --moe-bar-height-full: 70px; + --moe-btn-size: 48px; + --moe-btn-size-full: 70px; + --moe-icon-size: 22px; + --moe-icon-size-full: 30px; +} + +/*======================== 全局错误提示框 ========================*/ +.moeplayer-error{ + position: fixed; + z-index: 9999999; + left: 10px; + bottom: 10px; + width: auto; + height: 38px; + line-height: 38px; + padding: 0 .85rem; + background: var(--moe-overlay-bg); + border-radius: var(--moe-radius); + color: var(--moe-overlay-text); + font-size: 14px; + font-family: var(--moe-font-family); + white-space: nowrap; +} + +/*======================== 播放器容器 ========================*/ +.moeplayer{ + width: 100%; + height: 100%; + float: left; + background: #000; + overflow: hidden; + font-family: var(--moe-font-family); +} +.moeplayer button, .moeplayer input{ + font-family: inherit; +} +.moeplayer .moe-main.moe-nocursor{ + cursor: none; +} +.moeplayer-smallwindow{ + position: fixed; + z-index: 9999999; + width: 420px; + max-width: 100%; + height: 266px; + right: 10px; + bottom: 10px; +} +.moeplayer .moe-main{ + width: 100%; + height: 100%; + overflow: hidden; + background: #000; + position: relative; +} +.moeplayer .moe-main .moe-video{ + width: 100%; + height: 100%; + overflow: hidden; + position:absolute; + z-index: 1; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.moeplayer .moe-main .moe-video video,.moeplayer .moe-main .moe-video canvas{ + width: 100%; + height: 100%; +} +.moeplayer .moe-main .moe-error{ + width: 100%; + height: 80px; + line-height: 35px; + text-align: center; + color: var(--moe-overlay-text); + position:absolute; + z-index: 70; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + overflow: hidden; +} +/*logo:默认无品牌水印,用户通过 logo 配置项传入自定义图片(JS 会插入 img)*/ +.moeplayer .moe-main .moe-logo{ + position:absolute; + right: 20px; + top:20px; + z-index: 400; + background: none; +} +/*加载动画:CSS 圆弧旋转,不再使用图片*/ +.moeplayer .moe-main .moe-loading{ + position:absolute; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + z-index: 80; + width: 46px; + height: 46px; + box-sizing: border-box; + border-radius: 50%; + border: 3px solid rgba(255,255,255,.3); + border-top-color: #FFF; + animation: moe-Circle .8s linear infinite; + -webkit-animation: moe-Circle .8s linear infinite +} +/*中央大播放键:圆形半透明底 + 白色播放三角,hover 变主题色*/ +.moeplayer .moe-main .moe-center-play{ + background: rgba(0,0,0,.45); + border: none; + border-radius: 50%; + box-sizing:border-box; + width: 80px; + height: 80px; + position: absolute; + display: none; + z-index: 90; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + cursor: pointer; + transition: background-color .2s, width .2s, height .2s; +} +.moeplayer .moe-main .moe-center-play::before{ + content: ''; + position: absolute; + inset: 0; + background-color: #FFF; + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7.5,6.2v11.6c0,.8,.9,1.3,1.6,.9l9.1-5.8c.6-.4,.6-1.4,0-1.8l-9.1-5.8c-.7-.4-1.6,.1-1.6,.9z'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7.5,6.2v11.6c0,.8,.9,1.3,1.6,.9l9.1-5.8c.6-.4,.6-1.4,0-1.8l-9.1-5.8c-.7-.4-1.6,.1-1.6,.9z'/%3E%3C/svg%3E"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: 50% 50%; + mask-position: 50% 50%; + -webkit-mask-size: 46%; + mask-size: 46%; +} +.moeplayer .moe-main.moe-main-full .moe-center-play{ + width: 100px; + height: 100px; +} +.moeplayer .moe-main .moe-center-play:hover{ + width: 100px; + height: 100px; + background: var(--moe-accent); +} +.moeplayer .moe-main.moe-main-full .moe-center-play:hover{ + width: 120px; + height: 120px; +} +/*缓冲动画:CSS 圆弧旋转*/ +.moeplayer .moe-main .moe-buffer{ + width: 38px; + height: 38px; + box-sizing: border-box; + border-radius: 50%; + border: 3px solid rgba(255,255,255,.25); + border-top-color: var(--moe-accent); + position: absolute; + z-index: 100; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + display: none; + animation: moe-Circle .8s linear infinite; + -webkit-animation: moe-Circle .8s linear infinite +} +.moeplayer .moe-main .moe-message{ + position: absolute; + z-index: 240; + left:5px; + bottom: 78px; + padding: 0 1rem; + line-height: 30px; + height: 30px; + width: auto; + min-width: 1px; + border-radius: var(--moe-radius); + background: var(--moe-overlay-bg); + font-size: 14px; + color: var(--moe-overlay-text); + display: none; + white-space:nowrap; +} +.moeplayer .moe-main .moe-message-right{ + left:auto; + right: 5px; +} +.moeplayer .moe-main.moe-main-full .moe-message{ + font-size: 18px; + bottom: 100px; +} +.moeplayer .moe-main .moe-tip{ + width: auto; + height: auto; + position: absolute; + z-index: 230; + display: none; + margin-bottom: 1px; +} +.moeplayer .moe-main .moe-tip .moe-content{ + width: auto; + height: auto; + white-space: nowrap; + min-width: 1px; + background: var(--moe-overlay-bg); + font-size: 14px; + color: var(--moe-overlay-text); + line-height: 32px; + height: 32px; + padding: 0 15px; +} +.moeplayer .moe-main .moe-tip .moe-content-float-auto{ + border-radius: var(--moe-radius); + margin: auto; +} +.moeplayer .moe-main .moe-tip .moe-content-float-left{ + border-radius: var(--moe-radius); + float: left; +} +.moeplayer .moe-main.moe-main-full .moe-tip .moe-content{ + font-size: 18px; +} +.moeplayer .moe-main .moe-tip .moe-triangle{ + width: 0px; + height: 0px; +} +.moeplayer .moe-main .moe-tip .moe-triangle-auto{ + border-left: 8px solid transparent; + border-top: 8px solid var(--moe-overlay-bg); + border-right: 8px solid transparent; + margin: auto; +} +.moeplayer .moe-main .moe-tip .moe-triangle-left{ + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 8px solid var(--moe-overlay-bg); + float: left; + margin-top: 10px; +} +/*预览(缩略图)*/ +.moeplayer .moe-main .moe-preview{ + position: absolute; + z-index: 210; + width: 100%; + left:0; + bottom: 64px; + overflow: hidden; + display: none; +} +.moeplayer .moe-main.moe-main-full .moe-preview{ + bottom: 86px; +} +.moeplayer .moe-main .moe-preview-load-img{ + position: absolute; + z-index: 210; + top:110%; +} +.moeplayer .moe-main .moe-preview .moe-preview-bg{ + position: absolute; + z-index: 1; + top:0; + float: left; + transition: .2s; +} +.moeplayer .moe-main .moe-preview .moe-preview-bg .moe-preview-img{ + background-repeat: no-repeat ; + float: left; +} +.moeplayer .moe-main .moe-preview .moe-preview-frame{ + position: absolute; + z-index: 2; + top:0; + left:-1000px; + border:4px solid var(--moe-accent); + border-radius: 2px; + box-sizing:content-box; +} +.moeplayer .moe-main .moe-prompt-words{ + position: absolute; + z-index: 220; + width: 213px; + line-height: 23px; + font-size: 14px; + color: var(--moe-overlay-text); + background: var(--moe-overlay-bg); + overflow: hidden; + display: none; + margin-bottom: 10px; + border-radius: var(--moe-radius); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .2s; + animation-duration: .2s; + -webkit-animation-name: moe-bounceIn; + animation-name: moe-bounceIn; +} +.moeplayer .moe-main .moe-prompt-words .moe-prompt-content{ + padding: 5px; +} +.moeplayer .moe-main .moe-layer{ + position: absolute; + z-index: 101; +} +.moeplayer .moe-main .moe-tempTime{ + position: absolute; + z-index: 20; + left:10px; + bottom: 5px; + display: none; + font-size: 14px; + line-height: 28px; + color: var(--moe-overlay-text); +} + +/*======================== 关于 ========================*/ +.moeplayer .moe-main .moe-about{ + position: absolute; + z-index: 200; + width: 50%; + max-width: 600px; + min-width: 400px; + left: 1rem; + top: 1rem; + background: var(--moe-overlay-bg); + border-radius: var(--moe-radius); + padding: 1rem 0; + display: none; +} +.moeplayer .moe-main .moe-about ul{ + padding: 0; + margin: 0; +} +.moeplayer .moe-main .moe-about ul li{ + list-style:none; + color: var(--moe-overlay-text); + font-size: 12px; + line-height: 18px; + height: 18px; + padding: 0; + margin: 0; +} +.moeplayer .moe-main .moe-about ul li .moe-about-title{ + width: 100px; + text-align: right; + float: left; + padding-right: .5rem; +} +.moeplayer .moe-main .moe-about ul li .moe-about-content{ + width: auto; + float: left; +} +.moeplayer .moe-main .moe-about .moe-about-bar{ + position: absolute; + z-index: 1; + top: 0; + right: 0; + width: 96px; +} +.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar{ + width: 140px; +} +/*关于-复制按钮图标*/ +.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-copy{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5,15H4a2,2,0,0,1-2-2V4a2,2,0,0,1,2-2h9a2,2,0,0,1,2,2v1'/%3E%3C/svg%3E"); +} +/*关于-关闭按钮图标*/ +.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-close{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6,6l12,12M18,6L6,18'/%3E%3C/svg%3E"); +} + +/*======================== 截图显示容器 ========================*/ +.moeplayer .moe-main .moe-screenshot{ + position: absolute; + z-index: 220; + width: auto; + height: 144px; + margin: auto !important; + top: 0; + bottom: 0; + right: 55px; + display: none; +} +.moeplayer .moe-main.moe-main-full .moe-screenshot{ + height: 210px; + right: 77px; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-img{ + position: absolute; + z-index: 1; + width: 100%; + height: 100%; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-img img{ + height: 100%; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar{ + position: absolute; + z-index: 1; + width: 100%; + height: 36px; + bottom: 5px; + text-align: center; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn{ + display: inline-block; + overflow: hidden; + border: 0px solid transparent; + border-radius: var(--moe-radius); + vertical-align: middle; + text-align: center; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + line-height: 30px; + padding: 0px 15px; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: #fff; + margin: 0 5px; + transition: filter .2s, color .2s, background-color .2s; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn:hover{ + filter: brightness(1.15); +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn:focus{ + outline:0; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-down{ + background-color: var(--moe-accent); +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-close{ + background-color: rgba(96,96,96,.9); + color: #fff; +} + +/*======================== 广告 ========================*/ +.moeplayer .moe-main .moe-yytf{ + position: absolute; + z-index: 800; + width: 100%; + height: 100%; + left: 0px; + top: 0px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-front-link{ + width: 100%; + height: 100%; + display: none; + cursor: pointer; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-front-picture{ + width: 100%; + height: 100%; + background: #000; + display: none; + text-align: center; + line-height: 100%; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-front-picture img{ + max-width: 100%; + max-height: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-top{ + position: absolute; + z-index: 3; + top: 10px; + right: 10px; +} + +.moeplayer .moe-main .moe-yytf .moe-yytf-top div{ + float: right; + margin-left: 10px; + font-size: 14px; + border-radius: 15px; + background: var(--moe-overlay-bg); + padding: 0px 10px; + line-height: 30px; + height: 30px; + color: var(--moe-overlay-text); +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-top div{ + font-size: 18px; + border-radius: 20px; + line-height: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-top .moe-yytf-closetime{ + display: none; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-top .moe-yytf-closead{ + cursor: pointer; + display: none; +} + +/*显示广告时的底部内容*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom{ + position: absolute; + z-index: 3; + bottom: 10px; + right: 10px; +} +/*显示广告时的底部按钮-共用(圆形半透明底 + SVG 图标)*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn{ + background-color: var(--moe-overlay-bg); + border: none; + outline: none; + width: 30px; + height: 30px; + cursor: pointer; + border-radius: 50%; + position: relative; + padding: 0; + transition: background-color .2s; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-btn{ + width: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn::before{ + content: ''; + position: absolute; + inset: 0; + background-color: #FFF; + -webkit-mask-image: var(--moe-icon); + mask-image: var(--moe-icon); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: 16px; + mask-size: 16px; + transition: background-color .2s; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-btn::before{ + -webkit-mask-size: 20px; + mask-size: 20px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn:hover::before{ + background-color: var(--moe-icon-hover); +} +/*显示广告时的静音按钮*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit{ + float: right; + width: 30px; + height: 30px; + margin-left: 10px; + overflow: hidden; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit{ + width: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9a4.2,4.2,0,0,1,0,6'/%3E%3Cpath d='M18.4,6.6a7.6,7.6,0,0,1,0,10.8'/%3E%3C/svg%3E"); +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9.5l5.5,5.5M21.5,9.5L16,15'/%3E%3C/svg%3E"); +} +/*显示广告时的全屏按钮*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit{ + float: right; + width: 30px; + height: 30px; + margin-left: 10px; + overflow: hidden; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit{ + width: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5,4H4v4.5M15.5,4H20v4.5M8.5,20H4v-4.5M15.5,20h4.5v-4.5'/%3E%3C/svg%3E"); +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,8.5h4.5V4M20,8.5h-4.5V4M4,15.5h4.5V20M20,15.5h-4.5V20'/%3E%3C/svg%3E"); +} +/*广告查看详情按钮*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-details{ + float: right; + font-size: 14px; + border-radius: 15px; + background: var(--moe-overlay-bg); + padding: 0 10px; + color: var(--moe-overlay-text); + line-height: 30px; + height: 30px; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-details{ + font-size: 18px; + border-radius: 20px; + line-height: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-details a{ + color: var(--moe-overlay-text); + text-decoration: none; +} +/*暂停广告容器*/ +.moeplayer .moe-main .moe-pause-yytf{ + display: none; + position:absolute; + z-index: 800; + max-width: 100%; + max-height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.moeplayer .moe-main .moe-pause-yytf img{ + max-width: 100%; + max-height: 100%; +} +/*暂停广告关闭按钮(圆形底 + × 图标)*/ +.moeplayer .moe-main .moe-pause-close{ + position:absolute; + z-index: 1; + right: -15px; + top:-15px; + width: 30px; + height: 30px; + background-color: var(--moe-overlay-bg); + border: none; + outline: none; + border-radius: 50%; + cursor: pointer; + padding: 0; + transition: background-color .2s; +} +.moeplayer .moe-main .moe-pause-close::before{ + content: ''; + position: absolute; + inset: 0; + background-color: #FFF; + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7,7l10,10M17,7L7,17'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7,7l10,10M17,7L7,17'/%3E%3C/svg%3E"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: 14px; + mask-size: 14px; +} +.moeplayer .moe-main .moe-pause-close:hover{ + background-color: var(--moe-accent); +} + +/*======================== 右键菜单(挂载在 body 下) ========================*/ +.moeplayer-menu{ + width:120px; + background: var(--moe-menu-bg); + position: absolute; + z-index: 9000; + font-size:14px; + font-family: var(--moe-font-family); + border: 1px solid var(--moe-menu-border); + border-radius: var(--moe-radius); + box-shadow: var(--moe-popup-shadow); + padding: 4px 0; + display: none; +} +.moeplayer-menu .moe-li{ + color: var(--moe-menu-text); + line-height: 32px; + padding: 0 0 0 10px; + cursor: pointer; + transition: background-color .15s, color .15s; +} +.moeplayer-menu .moe-li:hover{ + background: rgba(127,127,127,.18); + color: var(--moe-menu-link); +} +.moeplayer-menu .moe-li a{ + color: var(--moe-menu-link); + text-decoration: none; +} +.moeplayer-menu .moe-underline{ + border-bottom: 1px solid var(--moe-menu-border); +} + +/*======================== 控制栏 ========================*/ +.moeplayer .moe-main .moe-bar{ + position:absolute; + z-index: 260; + left:0px; + bottom:0px; + width: 100%; + height: var(--moe-bar-height); + background: var(--moe-bar-bg); + transition: 0.2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar{ + height: var(--moe-bar-height-full); +} +.moeplayer .moe-main .moe-bar.moe-bar-out{ + bottom: -50px; + transition: 0.2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar.moe-bar-out{ + bottom: -80px; + transition: 0.2s; +} + +/*======================== 按钮公用样式(SVG mask 图标) ========================*/ +.moeplayer .moe-main .moe-bar-btn{ + background-color: transparent; + border: none; + outline: none; + width: var(--moe-btn-size); + height: var(--moe-btn-size); + cursor: pointer; + position: relative; + padding: 0; + transition: transform .2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar-btn{ + width: var(--moe-btn-size-full); + height: var(--moe-btn-size-full); +} +/*图标层:颜色跟随 --moe-icon-color,形状由每个按钮的 --moe-icon 决定*/ +.moeplayer .moe-main .moe-bar-btn::before{ + content: ''; + position: absolute; + inset: 0; + background-color: var(--moe-icon-color); + -webkit-mask-image: var(--moe-icon); + mask-image: var(--moe-icon); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: var(--moe-icon-size); + mask-size: var(--moe-icon-size); + transition: background-color .2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar-btn::before{ + -webkit-mask-size: var(--moe-icon-size-full); + mask-size: var(--moe-icon-size-full); +} +.moeplayer .moe-main .moe-bar .moe-bar-btn:hover::before, +.moeplayer .moe-main .moe-right-bar .moe-bar-btn:hover::before, +.moeplayer .moe-main .moe-about .moe-bar-btn:hover::before{ + background-color: var(--moe-icon-hover); +} + +/*======================== 按钮图标定义 ========================*/ +/*播放*/ +.moeplayer .moe-main .moe-btn-play{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8,5.2v13.6c0,.8,.9,1.3,1.6,.9l10.2-6.8c.6-.4,.6-1.4,0-1.8L9.6,4.3c-.7-.4-1.6,.1-1.6,.9z'/%3E%3C/svg%3E"); +} +/*暂停*/ +.moeplayer .moe-main .moe-btn-pause{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='6.8' y='5' width='3.6' height='14' rx='1'/%3E%3Crect x='13.6' y='5' width='3.6' height='14' rx='1'/%3E%3C/svg%3E"); +} +/*刷新/重播*/ +.moeplayer .moe-main .moe-btn-refresh{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2,14.9a8.5,8.5,0,1,1-2-8.4L20.5,9'/%3E%3Cpolyline points='20.5,3.8,20.5,9,15.3,9'/%3E%3C/svg%3E"); +} +/*音量(非静音)*/ +.moeplayer .moe-main .moe-btn-muted{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9a4.2,4.2,0,0,1,0,6'/%3E%3Cpath d='M18.4,6.6a7.6,7.6,0,0,1,0,10.8'/%3E%3C/svg%3E"); +} +/*音量(已静音)*/ +.moeplayer .moe-main .moe-btn-exitmuted{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9.5l5.5,5.5M21.5,9.5L16,15'/%3E%3C/svg%3E"); +} +/*全屏*/ +.moeplayer .moe-main .moe-btn-full{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5,4H4v4.5M15.5,4H20v4.5M8.5,20H4v-4.5M15.5,20h4.5v-4.5'/%3E%3C/svg%3E"); +} +/*退出全屏*/ +.moeplayer .moe-main .moe-btn-exitfull{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,8.5h4.5V4M20,8.5h-4.5V4M4,15.5h4.5V20M20,15.5h-4.5V20'/%3E%3C/svg%3E"); +} +/*网页全屏*/ +.moeplayer .moe-main .moe-btn-webfull{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M10,14l4.5-4.5M14.5,13.2V9.5H10.8'/%3E%3C/svg%3E"); +} +/*退出网页全屏*/ +.moeplayer .moe-main .moe-btn-exitwebfull{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M14.5,9.5L10,14M10,10.3V14h3.7'/%3E%3C/svg%3E"); +} +/*剧场模式*/ +.moeplayer .moe-main .moe-btn-theatre{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Cpath d='M9,10l-2,2,2,2M15,10l2,2-2,2'/%3E%3C/svg%3E"); +} +/*退出剧场模式*/ +.moeplayer .moe-main .moe-btn-exittheatre{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Cpath d='M7,10l2,2-2,2M17,10l-2,2,2,2'/%3E%3C/svg%3E"); +} +/*下一集*/ +.moeplayer .moe-main .moe-bar-next{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6,5.7v12.6c0,.8,.9,1.2,1.5,.8l7.6-6.3c.5-.4,.5-1.2,0-1.6L7.5,4.9c-.6-.4-1.5,0-1.5,.8z'/%3E%3Crect x='16.4' y='5.5' width='2.6' height='13' rx='1'/%3E%3C/svg%3E"); +} +/*截图*/ +.moeplayer .moe-main .moe-btn-screenshot{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,8h2.6L8.8,5.5h6.4L17.4,8H20a1,1,0,0,1,1,1v9a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V9a1,1,0,0,1,1-1z'/%3E%3Ccircle cx='12' cy='13' r='3.2'/%3E%3C/svg%3E"); +} +/*开启循环(当前处于循环状态)*/ +.moeplayer .moe-main .moe-btn-loop-open{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5,4.5L20,8l-3.5,3.5'/%3E%3Cpath d='M20,8H9a4.5,4.5,0,0,0-4.5,4.5V13'/%3E%3Cpath d='M7.5,19.5L4,16l3.5-3.5'/%3E%3Cpath d='M4,16h11a4.5,4.5,0,0,0,4.5-4.5V11'/%3E%3C/svg%3E"); +} +/*关闭循环(当前未循环,循环箭头中带 1)*/ +.moeplayer .moe-main .moe-btn-loop-close{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5,4.5L20,8l-3.5,3.5'/%3E%3Cpath d='M20,8H9a4.5,4.5,0,0,0-4.5,4.5V13'/%3E%3Cpath d='M7.5,19.5L4,16l3.5-3.5'/%3E%3Cpath d='M4,16h11a4.5,4.5,0,0,0,4.5-4.5V11'/%3E%3Cpath d='M12.5,10v4M11.4,10.7l1.1-.7' stroke-width='1.6'/%3E%3C/svg%3E"); +} +/*开启小窗口*/ +.moeplayer .moe-main .moe-btn-smallwindows-open{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Crect x='12' y='12' width='6.5' height='4.5' rx='1' fill='black' stroke='none'/%3E%3C/svg%3E"); +} +/*关闭小窗口*/ +.moeplayer .moe-main .moe-btn-smallwindows-close{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Crect x='12' y='12' width='6.5' height='4.5' rx='1' stroke-width='1.5'/%3E%3C/svg%3E"); +} + +/*======================== 播放暂停按钮组 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-playandpause{ + float: left; +} + +/*======================== 返回直播按钮 ========================*/ +.moeplayer .moe-main .moe-bar .moe-btn-backlive{ + float: left; + font-size: 16px; + line-height: 28px; + border-radius: var(--moe-radius); + margin: 10px; + border: 0px; + background: var(--moe-accent); + color: #FFF; + cursor: pointer; + padding: 0 8px; + transition: filter .2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-btn-backlive{ + font-size: 18px; + line-height: 36px; + margin: 17px 10px; +} +.moeplayer .moe-main .moe-bar .moe-btn-backlive:hover{ + filter: brightness(1.15); +} +.moeplayer .moe-main .moe-bar .moe-btn-backlive:focus{ + outline:0; +} +/*======================== 全屏按钮组 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-fullandexit{ + float: right; +} +.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-exitfull{ + display: none; +} + +/*======================== 网页全屏按钮组 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit{ + float: right; +} +.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull{ + display: none; +} + +/*======================== 剧场模式按钮组 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit{ + float: right; +} +.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre{ + display: none; +} + +/*======================== 播放速度/字幕/清晰度(文字按钮) ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box, +.moeplayer .moe-main .moe-bar .moe-bar-track-box, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box{ + float: right; + height: var(--moe-bar-height); + line-height: var(--moe-bar-height); + position: relative; + cursor: pointer; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playbackrate-box, +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-track-box, +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-definition-box{ + height: var(--moe-bar-height-full); + line-height: var(--moe-bar-height-full); +} +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate, +.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition{ + height: 100%; + padding: 0 10px; + white-space:nowrap; + font-size: 14px; + color: var(--moe-text-color); + transition: color .2s; + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate, +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-track-box .moe-bar-track, +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-definition-box .moe-bar-definition{ + font-size: 18px; +} +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate:hover, +.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track:hover, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition:hover{ + color: var(--moe-text-hover); +} +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate-bg-box, +.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track-bg-box, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition-bg-box{ + width: auto; + height: auto; +} +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box:hover .moe-bar-playbackrate-bg-box, +.moeplayer .moe-main .moe-bar .moe-bar-track-box:hover .moe-bar-track-bg-box, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box:hover .moe-bar-definition-bg-box{ + display: block; +} +/*列表切换弹层*/ +.moeplayer .moe-main .moe-bar .moe-list-bg-box { + background: rgba(0,0,0,.001); + position: absolute; + z-index: 1; + bottom: 46px; + display: none; + -webkit-animation-duration: .2s; + animation-duration: .2s; + -webkit-animation-name: moe-bounceIn; + animation-name: moe-bounceIn; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box { + bottom: 68px; +} +.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg{ + background: var(--moe-popup-bg); + float: left; + border-radius: var(--moe-radius); + box-shadow: var(--moe-popup-shadow); + padding: 6px; + margin-bottom: 10px; +} +.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p{ + width: 100%; + float: left; + line-height: 32px; + color: var(--moe-popup-text); + text-align: center; + font-size: 14px; + background-color: rgba(0,0,0,0); + border: 0px; + border-radius: 4px; + white-space:nowrap; + cursor: pointer; + transition: color .15s, background-color .15s; +} +.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p:hover{ + color: var(--moe-popup-hover); + background: rgba(127,127,127,.15); +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p{ + font-size: 18px; + line-height: 36px; +} +.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p-focus{ + color: var(--moe-accent); +} +/*下一集按钮*/ +.moeplayer .moe-main .moe-bar .moe-bar-next{ + float: left; +} + +/*======================== 进度栏 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-progress{ + width: 100%; + position:absolute; + z-index: 1; + height: 12px; + top:-11px; + transition: 0.2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg{ + width: 100%; + background: var(--moe-progress-bg); + margin-top: 4px; + overflow: hidden; + height: 4px; + border-radius: 2px; + transition: .2s; + cursor: pointer; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg{ + height: 6px; + margin-top: 3px; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg .moe-bar-progress-load, +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg .moe-bar-progress-play, +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg .moe-bar-progress-mouseline{ + height: 6px; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-load{ + float: left; + width: 0px; + background: var(--moe-progress-buffer); + height: 4px; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-play{ + width: 0px; + background: var(--moe-progress-play); + position: absolute; + z-index: 1; + height: 4px; + transition: .2s; + cursor: pointer; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-mouseline{ + width: 2px; + background: rgba(255,255,255,.6); + position: absolute; + z-index: 2; + display: none; + height: 4px; + cursor: pointer; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-prompt{ + background: #FFF; + position: absolute; + z-index: 3; + border-radius: 50%; + width: 10px; + height: 10px; + top:1px; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-slider{ + border-radius: 50%; + overflow: hidden; + position: relative; + float: left; + z-index: 4; + left: 0px; + cursor: pointer; + width: 14px; + height: 14px; + top: -9px; + background: var(--moe-slider-color); + box-shadow: 0 1px 4px rgba(0,0,0,.5); + transition: transform .15s, background-color .15s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-slider{ + transform: scale(1.25); +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg:hover .moe-bar-progress-mouseline{ + display: block; +} +/*控制栏隐藏时的细进度条*/ +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out{ + height: 2px; + top:-2px; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-load,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg .moe-bar-progress-play{ + height: 2px; + margin-top: 0; + border-radius: 0; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-slider{ + width: 14px; + height: 2px; + top: -2px; + box-shadow: none; + background: rgba(255,255,255,0); + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg .moe-bar-progress-prompt{ + height: 2px; + top: 0; + border-radius: 0; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-slider-move .moe-bar-progress-play,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-slider-move .moe-bar-progress-slider{ + transition: 0s; +} + +/*======================== 音量调节栏 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox{ + float: right; + width: var(--moe-btn-size); + overflow-x: hidden; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox{ + width: var(--moe-btn-size-full); +} +/*默认状态-音量调节总外框*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume{ + width: var(--moe-btn-size); + height: 215px; + background: rgba(0,0,0,.01); + position: absolute; + z-index: 1; + bottom: 46px; + display: none; + overflow: hidden; +} +/*全屏状态-音量调节总外框*/ +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-bar-volume{ + width: var(--moe-btn-size-full); + bottom: 68px; +} +/*默认状态-音量调节总外框-鼠标经过时样式*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox:hover .moe-bar-volume{ + display: block; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .1s; + animation-duration: .1s; + -webkit-animation-name: moe-bounceIn; + animation-name: moe-bounceIn; +} +/*共用状态-音量调节内部外框*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volumex{ + width: 100%; + height: 200px; + float: left; + background: var(--moe-volume-panel-bg); + border-radius: var(--moe-radius); + box-shadow: var(--moe-popup-shadow); +} +/*共用状态-音量调节顶部文字*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-txt{ + width: 100%; + height: 40px; + line-height: 40px; + color: var(--moe-popup-text); + text-align: center; + font-size: 1rem; + float: left; + overflow: hidden; + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} +/*共用状态-音量调节背景色*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-bg{ + width: 6px; + height: 140px; + background: var(--moe-volume-bg); + border-radius: 3px; + overflow: hidden; + cursor: pointer; + margin: auto; +} +/*共用状态-音量调节前景色*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-bg .moe-bar-volume-pp{ + width: 6px; + height: 140px; + background: var(--moe-volume-play); + margin-top: 140px; +} +/*共用状态-音量调节拖动小按钮*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-slider{ + width: 12px; + height: 12px; + background: #FFF; + border-radius: 50%; + overflow: hidden; + box-shadow: 0 1px 4px rgba(0,0,0,.5); + position: absolute; + z-index: 1; + top: 0px; + left: 18px; + cursor: pointer; +} +/*全屏状态-音量调节拖动小按钮*/ +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-slider{ + left: 29px; +} +/*默认状态-显示时间*/ +.moeplayer .moe-main .moe-bar .moe-bar-time{ + float: left; + line-height: var(--moe-bar-height); + font-size: 14px; + padding: 0 4px; + color: var(--moe-text-color); + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} +/*全屏状态-显示时间*/ +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-time{ + float: left; + line-height: var(--moe-bar-height-full); + font-size: 18px; + color: var(--moe-text-color); +} + +/*======================== 右侧控制栏 ========================*/ +.moeplayer .moe-main .moe-right-bar{ + position: absolute; + z-index: 260; + top: 0; + right: 2px; + bottom: 0; + margin: auto !important; + width: var(--moe-btn-size); + height: 144px; + background: var(--moe-right-bar-bg); + border-radius: var(--moe-radius); + transition: .2s; +} +.moeplayer .moe-main .moe-right-bar-hide{ + right: -48px; + transition: .2s; +} +.moeplayer .moe-main.moe-main-full .moe-right-bar{ + width: var(--moe-btn-size-full); + height: 210px; +} +.moeplayer .moe-main.moe-main-full .moe-right-bar-hide{ + right: -70px; + transition: .2s; +} +/*截图按钮*/ +.moeplayer .moe-main .moe-right-bar .moe-btn-screenshot{ + float: left; +} +/*小窗口按钮组*/ +.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows{ + float: left; +} +.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows button{ + float: left; +} +.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close{ + display: none; +} +/*循环按钮组*/ +.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop{ + float: left; +} +.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close{ + display: none; +} + +/*======================== 顶部显示栏 ========================*/ +.moeplayer .moe-main .moe-top-bar{ + position: absolute; + z-index: 260; + top: -36px; + width: 100%; + height: 36px; + background: var(--moe-top-bar-bg); + transition: .2s; +} +.moeplayer .moe-main .moe-top-bar-hide{ + top: -36px; + transition: .2s; +} +.moeplayer .moe-main.moe-main-full .moe-top-bar{ + top: 0; +} +.moeplayer .moe-main.moe-main-full .moe-top-bar-hide{ + top: -36px; + transition: .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom{ + position: absolute; + z-index: 260; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container{ + float: left; + margin-left: 10px; + margin-top: 9px; + cursor: pointer; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left{ + float: left; + width: 20px; + height: 18px; + border: 1px solid var(--moe-top-bar-text); + box-sizing:content-box; + transition: border-color .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-left, +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-left{ + border-color: var(--moe-accent); +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-left div, +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-left div{ + background: var(--moe-accent); +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-right{ + float: left; + font-size: 14px; + color: var(--moe-top-bar-text); + padding-left: 5px; + transition: color .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-right, +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-right{ + color: var(--moe-accent); +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-50{ + width: 50%; + height: 50%; + background: var(--moe-top-bar-text); + margin: 4.5px 25%; + transition: background .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-75{ + width: 75%; + height: 50%; + background: var(--moe-top-bar-text); + margin: 4.5px 12.5%; + transition: background .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-100{ + width: 100%; + height: 50%; + background: var(--moe-top-bar-text); + margin: 4.5px 0; + transition: background .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-title{ + position: absolute; + z-index: 1; + top: 0px; + width: 100%; + height: 36px; + line-height: 36px; + text-align: center; + font-size: 18px; + color: var(--moe-top-bar-text); + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-time{ + float: right; + height: 36px; + line-height: 36px; + font-size: 14px; + color: var(--moe-top-bar-text); + padding: 0 1rem 0; + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} + +/*======================== 缓动效果 ========================*/ +.moe-animate { + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .3s; + animation-duration: .3s; +} +.moe-animate-bouncein { + -webkit-animation-name: moe-bounceIn; + animation-name: moe-bounceIn; +} + +@-webkit-keyframes moe-bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5) + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes moe-bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.5); + -ms-transform: scale(.5); + transform: scale(.5); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +.moe-animate-bounceout { + -webkit-animation-name: moe-bounceOut; + animation-name: moe-bounceOut; +} + +@-webkit-keyframes moe-bounceOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5); + } +} + +@keyframes moe-bounceOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5); + } +} +.moe-animate-circle { + animation: moe-Circle 1s linear infinite; + -webkit-animation: moe-Circle 1s linear infinite +} + +@-webkit-keyframes moe-Circle { + 0% { + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg) + } + 25% { + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg) + } + 50% { + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg) + } + 75% { + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg) + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg) + } +} + +@keyframes moe-Circle { + 0% { + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg) + } + 25% { + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg) + } + 50% { + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg) + } + 75% { + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg) + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg) + } +} + +/* + * 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); + } +} diff --git a/moeplayer/css/moeplayer.red.css b/moeplayer/css/moeplayer.red.css index 83825f5..db9d965 100644 --- a/moeplayer/css/moeplayer.red.css +++ b/moeplayer/css/moeplayer.red.css @@ -1,1609 +1,1596 @@ -.moeplayer-error{ - position: fixed; - z-index: 9999999; - left: 10px; - bottom: 10px; - width: auto; - height: 38px; - line-height: 38px; - padding: 0 .85rem; - background: rgb(0,0,0,.9); - border-radius: .25rem; - color: #FFF; - font-size: 14px; - white-space: nowrap; -} -.moeplayer{ - width: 100%; - height: 100%; - float: left; - background: #000; - overflow: hidden; -} -.moeplayer .moe-main.moe-nocursor{ - cursor: none; -} -.moeplayer-smallwindow{ - position: fixed; - z-index: 9999999; - width: 420px; - max-width: 100%; - height: 266px; - right: 10px; - bottom: 10px; -} -.moeplayer .moe-main{ - width: 100%; - height: 100%; - overflow: hidden; - background: #000; - position: relative; -} -.moeplayer .moe-main .moe-video{ - width: 100%; - height: 100%; - overflow: hidden; - position:absolute; - z-index: 1; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; -} -.moeplayer .moe-main .moe-video video,.moeplayer .moe-main .moe-video canvas{ - width: 100%; - height: 100%; -} -.moeplayer .moe-main .moe-error{ - width: 100%; - height: 80px; - line-height: 35px; - text-align: center; - color: #FFF; - position:absolute; - z-index: 70; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; - overflow: hidden; -} -.moeplayer .moe-main .moe-logo{ - position:absolute; - right: 20px; - top:20px; - z-index: 400; -} -.moeplayer .moe-main .moe-loading{ - position:absolute; - top:0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - z-index: 80; - width: 80px; - height: 80px; - border-radius: 50%; - background: url(images/loading.png) no-repeat center center; - background-size: 100% 100%; - animation: moe-Circle 1.5s linear infinite; - -webkit-animation: moe-Circle 1.5s linear infinite -} -.moeplayer .moe-main .moe-center-play{ - background: url(images/play.png) no-repeat 70% center; - background-size:60% 60%; - border: 8px solid rgba(255,255,255,.3); - border-radius: 50%; - box-sizing:border-box; - -moz-box-sizing:border-box; /* Firefox */ - -webkit-box-sizing:border-box; /* Safari */ - width: 80px; - height: 80px; - position: absolute; - display: none; - z-index: 90; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; - cursor: pointer; - transition: .2s; -} -.moeplayer .moe-main.moe-main-full .moe-center-play{ - width: 100px; - height: 100px; -} -.moeplayer .moe-main .moe-center-play:hover{ - width: 100px; - height: 100px; - transition: 0.2s; -} -.moeplayer .moe-main.moe-main-full .moe-center-play:hover{ - width: 120px; - height: 120px; -} -.moeplayer .moe-main .moe-buffer{ - background: url(images/buffer.png) no-repeat center center; - background-size:100% 100%; - border-radius: 50%; - width: 60px; - height: 60px; - position: absolute; - z-index: 100; - top:0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - display: none; - animation: moe-Circle 1s linear infinite; - -webkit-animation: moe-Circle 1s linear infinite -} -.moeplayer .moe-main .moe-message{ - position: absolute; - z-index: 240; - left:5px; - bottom: 78px; - padding: 0 1rem; - line-height: 30px; - height: 30px; - width: auto; - min-width: 1px; - border-radius: .25rem; - background: rgba(0,0,0,.6); - font-size: 14px; - color: #FFF; - display: none; - white-space:nowrap; -} -.moeplayer .moe-main .moe-message-right{ - left:auto; - right: 5px; -} -.moeplayer .moe-main.moe-main-full .moe-message{ - font-size: 18px; - bottom: 100px; -} -.moeplayer .moe-main .moe-tip{ - width: auto; - height: auto; - position: absolute; - z-index: 230; - display: none; - margin-bottom: 1px; -} -.moeplayer .moe-main .moe-tip .moe-content{ - width: auto; - height: auto; - white-space: nowrap; - min-width: 1px; - background: rgba(0,0,0,.6); - font-size: 14px; - color: #FFF; - line-height: 32px; - height: 32px; - padding: 0 15px; -} -.moeplayer .moe-main .moe-tip .moe-content-float-auto{ - border-radius: 5px; - margin: auto; -} -.moeplayer .moe-main .moe-tip .moe-content-float-left{ - border-radius: 5px; - float: left; -} -.moeplayer .moe-main.moe-main-full .moe-tip .moe-content{ - font-size: 18px; -} -.moeplayer .moe-main .moe-tip .moe-triangle{ - width: 0px; - height: 0px; -} -.moeplayer .moe-main .moe-tip .moe-triangle-auto{ - border-left: 8px solid transparent; - border-top: 8px solid rgba(0, 0, 0,.6); - border-right: 8px solid transparent; - margin: auto; -} -.moeplayer .moe-main .moe-tip .moe-triangle-left{ - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 8px solid rgba(0, 0, 0,.6); - float: left; - margin-top: 10px; -} -.moeplayer .moe-main .moe-preview{ - position: absolute; - z-index: 210; - width: 100%; - left:0; - bottom: 64px; - overflow: hidden; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-preview{ - bottom: 86px; -} -.moeplayer .moe-main .moe-preview-load-img{ - position: absolute; - z-index: 210; - top:110%; -} -.moeplayer .moe-main .moe-preview .moe-preview-bg{ - position: absolute; - z-index: 1; - top:0; - float: left; - transition: .2s; -} -.moeplayer .moe-main .moe-preview .moe-preview-bg .moe-preview-img{ - background-repeat: no-repeat ; - float: left; -} -.moeplayer .moe-main .moe-preview .moe-preview-frame{ - position: absolute; - z-index: 2; - top:0; - left:-1000px; - border:4px solid #0078ff; - box-sizing:content-box; - -moz-box-sizing:content-box; /* Firefox */ - -webkit-box-sizing:content-box; /* Safari */ -} -.moeplayer .moe-main .moe-prompt-words{ - position: absolute; - z-index: 220; - width: 213px; - line-height: 23px; - font-size: 14px; - color: #FFF; - background: rgba(0, 0, 0,.6); - overflow: hidden; - display: none; - margin-bottom: 10px; - border-radius: 3px; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-duration: .2s; - animation-duration: .2s; - -webkit-animation-name: moe-bounceIn; - animation-name: moe-bounceIn; -} -.moeplayer .moe-main .moe-prompt-words .moe-prompt-content{ - padding: 5px; -} -.moeplayer .moe-main .moe-layer{ - position: absolute; - z-index: 101; -} -.moeplayer .moe-main .moe-tempTime{ - position: absolute; - z-index: 20; - left:10px; - bottom: 5px; - display: none; - font-size: 14px; - line-height: 28px; - color: #FFF; -} -/*关于*/ -.moeplayer .moe-main .moe-about{ - position: absolute; - z-index: 200; - width: 50%; - max-width: 600px; - min-width: 400px; - left: 1rem; - top: 1rem; - background: rgba(0,0,0,.6); - padding: 1rem 0; - display: none; -} -.moeplayer .moe-main .moe-about ul{ - padding: 0; - margin: 0; -} -.moeplayer .moe-main .moe-about ul li{ - list-style:none; - color: #FFF; - font-size: 12px; - line-height: 18px; - height: 18px; - padding: 0; - margin: 0; -} -.moeplayer .moe-main .moe-about ul li .moe-about-title{ - width: 100px; - text-align: right; - float: left; - padding-right: .5rem; -} -.moeplayer .moe-main .moe-about ul li .moe-about-content{ - width: auto; - float: left; -} -.moeplayer .moe-main .moe-about .moe-about-bar{ - position: absolute; - z-index: 1; - top: 0; - right: 0; - width: 96px; -} -.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar{ - width: 140px; -} -.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-copy{ - background-position:-1632px 0; -} -.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-copy:hover{ - background-position:-1680px 0; -} -.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar .moe-btn-about-copy{ - background-position:-2380px 0; -} -.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar .moe-btn-about-copy:hover{ - background-position:-2450px 0; -} -.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-close{ - background-position:-1728px 0; -} -.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-close:hover{ - background-position:-1776px 0; -} -.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar .moe-btn-about-close{ - background-position:-2520px 0; -} -.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar .moe-btn-about-close:hover{ - background-position:-2590px 0; -} -/*截图显示容器*/ -.moeplayer .moe-main .moe-screenshot{ - position: absolute; - z-index: 220; - width: auto; - height: 144px; - margin: auto !important; - top: 0; - bottom: 0; - right: 55px; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-screenshot{ - height: 210px; - right: 77px; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-img{ - position: absolute; - z-index: 1; - width: 100%; - height: 100%; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-img img{ - height: 100%; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar{ - position: absolute; - z-index: 1; - width: 100%; - height: 36px; - bottom: 5px; - text-align: center; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn{ - display: inline-block; - overflow: hidden; - border: 0px solid transparent; - border-radius: 5px; - vertical-align: middle; - text-align: center; - text-decoration: none; - white-space: nowrap; - font-size: 14px; - line-height: 30px; - padding: 0px 15px; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - color: #fff; - margin: 0 5px; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn:hover{ - color: #FFFF00; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn:focus{ - outline:0; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-down{ - background-color: #007bff; -} -.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-close{ - background-color: #505050; - color: #fff; -} -/*广告*/ -.moeplayer .moe-main .moe-yytf{ - position: absolute; - z-index: 800; - width: 100%; - height: 100%; - left: 0px; - top: 0px; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-front-link{ - width: 100%; - height: 100%; - display: none; - cursor: pointer; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-front-picture{ - width: 100%; - height: 100%; - background: #000; - display: none; - text-align: center; - line-height: 100%; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-front-picture img{ - max-width: 100%; - max-height: 100%; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-top{ - position: absolute; - z-index: 3; - top: 10px; - right: 10px; -} - -.moeplayer .moe-main .moe-yytf .moe-yytf-top div{ - float: right; - margin-left: 10px; - font-size: 14px; - border-radius: 15px; - background: rgba(0,0,0,.6); - padding: 0px 10px; - line-height: 30px; - height: 30px; - color: #FFF; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-top div{ - font-size: 18px; - border-radius: 20px; - line-height: 40px; - height: 40px; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-top .moe-yytf-closetime{ - display: none; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-top .moe-yytf-closead{ - cursor: pointer; - display: none; -} - -/*显示广告时的底部内容*/ -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom{ - position: absolute; - z-index: 3; - bottom: 10px; - right: 10px; -} -/*显示广告时的底部按钮-共用*/ -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn{ - background-color: rgba(0,0,0,.6); - background-image: url(images/moeplayer_red.png); - background-size: auto 100%; - border: none; - outline: none; - width: 30px; - height: 30px; - cursor: pointer; - background-repeat: no-repeat; - border-radius: 50%; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-btn{ - width: 40px; - height: 40px; -} -/*显示广告时的静音按钮*/ -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit{ - float: right; - width: 30px; - height: 30px; - margin-left: 10px; - overflow: hidden; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit{ - width: 40px; - height: 40px; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted{ - background-position:-180px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted:hover{ - background-position:-210px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted{ - background-position:-240px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted:hover{ - background-position:-270px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted{ - background-position:-240px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted:hover{ - background-position:-280px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted{ - background-position:-320px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted:hover{ - background-position:-360px 0; -} -/*显示广告时的全屏按钮*/ -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit{ - float: right; - width: 30px; - height: 30px; - margin-left: 10px; - overflow: hidden; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit{ - width: 40px; - height: 40px; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full{ - background-position:-300px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full:hover{ - background-position:-330px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull{ - background-position:-360px 0; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull:hover{ - background-position:-390px 0; -} - -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full{ - background-position:-400px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full:hover{ - background-position:-440px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull{ - background-position:-480px 0; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull:hover{ - background-position:-520px 0; -} -/*广告查看详情按钮*/ -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-details{ - float: right; - font-size: 14px; - border-radius: 15px; - background: rgba(0,0,0,.6); - padding: 0 10px; - color: #FFF; - line-height: 30px; - height: 30px; -} -.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-details{ - font-size: 18px; - border-radius: 20px; - line-height: 40px; - height: 40px; -} -.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-details a{ - color: #FFF; - text-decoration: none; -} -/*暂停广告容器*/ -.moeplayer .moe-main .moe-pause-yytf{ - display: none; - position:absolute; - z-index: 800; - max-width: 100%; - max-height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: auto; -} -.moeplayer .moe-main .moe-pause-yytf img{ - max-width: 100%; - max-height: 100%; -} -.moeplayer .moe-main .moe-pause-close{ - position:absolute; - z-index: 1; - right: -15px; - top:-15px; - width: 30px; - height: 30px; - background-color: transparent; - background-image: url(images/adclose.png); - border: none; - outline: none; - cursor: pointer; - background-repeat: no-repeat ; -} -.moeplayer .moe-main .moe-pause-close:hover{ - background-position:-30px 0; -} -/*右键菜单*/ -.moeplayer-menu{ - width:120px; - background: rgba(50,50,50,.6); - position: absolute; - z-index: 9000; - font-size:14px ; - border: 1px #000 solid; - display: none; -} -.moeplayer-menu .moe-li{ - color: #adadad; - line-height: 35px; - padding: 0 0 0 5px; -} -.moeplayer-menu .moe-li a{ - color: #FFF; - text-decoration: none; -} -.moeplayer-menu .moe-underline{ - border-bottom: 1px #000 solid; -} -/*控制栏*/ -.moeplayer .moe-main .moe-bar{ - position:absolute; - z-index: 260; - left:0px; - bottom:0px; - width: 100%; - height: 48px; - background: rgba(0,0,0,.3); - transition: 0.2s; -} -.moeplayer .moe-main.moe-main-full .moe-bar{ - height: 70px; -} -.moeplayer .moe-main .moe-bar.moe-bar-out{ - bottom: -50px; - transition: 0.2s; -} -.moeplayer .moe-main.moe-main-full .moe-bar.moe-bar-out{ - bottom: -80px; - transition: 0.2s; -} - -/*按钮公用样式*/ -.moeplayer .moe-main .moe-bar-btn{ - background-color: transparent; - background-image: url(images/moeplayer_red.48.png); - background-size: auto 100%; - border: none; - outline: none; - width: 48px; - height: 48px; - cursor: pointer; - background-repeat: no-repeat ; -} -.moeplayer .moe-main.moe-main-full .moe-bar-btn{ - background-image: url(images/moeplayer_red.png); - width: 70px; - height: 70px; -} -.moeplayer .moe-main .moe-bar .moe-bar-btn:hover{ - background-size:auto 100%; -} - -/*播放暂停按钮组*/ -.moeplayer .moe-main .moe-bar .moe-bar-playandpause{ - float: left; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-play{ - background-position:0px top; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-play:hover{ - background-position:-48px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playandpause .moe-btn-play:hover{ - background-position:-70px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-pause{ - background-position:-96px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playandpause .moe-btn-pause{ - background-position:-140px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-pause:hover{ - background-position:-144px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playandpause .moe-btn-pause:hover{ - background-position:-210px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-refresh{ - background-position:-192px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playandpause .moe-btn-refresh{ - background-position:-280px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-playandpause .moe-btn-refresh:hover{ - background-position:-240px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playandpause .moe-btn-refresh:hover{ - background-position:-350px 0; -} - -/*返回播放按钮*/ -.moeplayer .moe-main .moe-bar .moe-btn-backlive{ - float: left; - font-size: 16px; - line-height: 28px; - border-radius: 3px; - margin: 10px; - border: 0px; - background: rgba(3,60,146,.5); - color: #FFF; - cursor: pointer; - padding: 0 8px; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-btn-backlive{ - font-size: 18px; - line-height: 36px; - margin: 17px 10px; -} -.moeplayer .moe-main .moe-bar .moe-btn-backlive:hover{ - background: rgba(3,60,146,.9); -} -.moeplayer .moe-main .moe-bar .moe-btn-backlive:focus{ - outline:0; - background: rgba(3,60,146,.6); -} -/*静音取消静音按钮组*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-btn-muted{ - background-position:-288px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-btn-muted{ - background-position:-420px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-btn-muted:hover{ - background-position:-336px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-btn-muted:hover{ - background-position:-490px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-btn-exitmuted{ - background-position:-384px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-btn-exitmuted{ - background-position:-560px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-btn-exitmuted:hover{ - background-position:-432px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-btn-exitmuted:hover{ - background-position:-630px 0; -} - -/*全屏按钮组*/ -.moeplayer .moe-main .moe-bar .moe-bar-fullandexit{ - float: right; -} -.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-full{ - background-position:-480px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-fullandexit .moe-btn-full{ - background-position:-700px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-full:hover{ - background-position:-528px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-fullandexit .moe-btn-full:hover{ - background-position:-770px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-exitfull{ - background-position:-672px 0; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-fullandexit .moe-btn-exitfull{ - background-position:-840px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-exitfull:hover{ - background-position:-720px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-fullandexit .moe-btn-exitfull:hover{ - background-position:-910px 0; -} - -/*网页全屏按钮组*/ -.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit{ - float: right; -} -.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-webfull{ - background-position:-768px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-webfullandexit .moe-btn-webfull{ - background-position:-1120px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-webfull:hover{ - background-position:-816px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-webfullandexit .moe-btn-webfull:hover{ - background-position:-1190px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull{ - background-position:-864px 0; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull{ - background-position:-1260px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull:hover{ - background-position:-912px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull:hover{ - background-position:-1330px 0; -} - -/*剧场模式按钮组*/ -.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit{ - float: right; -} -.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-theatre{ - background-position:-960px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-theatreandexit .moe-btn-theatre{ - background-position:-1400px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-theatre:hover{ - background-position:-1008px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-theatreandexit .moe-btn-theatre:hover{ - background-position:-1470px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre{ - background-position:-1056px 0; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre{ - background-position:-1540px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre:hover{ - background-position:-1104px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre:hover{ - background-position:-1610px 0; -} -/*播放速度*/ -.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box{ - float: right; - height: 48px; - line-height: 48px; - position: relative; - cursor: pointer; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playbackrate-box{ - height: 70px; - line-height: 70px; -} -.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate{ - height: 100%; - padding: 0 10px; - white-space:nowrap; - font-size: 16px; - color: #FFF; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate{ - font-size: 18px; -} -.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate:hover{ - color: #e80101; -} -.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate-bg-box { - width: auto; - height: auto; -} -.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box:hover .moe-bar-playbackrate-bg-box { - display: block; -} -/*字幕*/ -.moeplayer .moe-main .moe-bar .moe-bar-track-box{ - float: right; - height: 48px; - line-height: 48px; - position: relative; - cursor: pointer; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-track-box{ - height: 70px; - line-height: 70px; -} -.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track{ - height: 100%; - padding: 0 10px; - white-space:nowrap; - font-size: 16px; - color: #FFF; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-track-box .moe-bar-track{ - font-size: 18px; -} -.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track:hover{ - color: #0368d0; -} -.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track-bg-box { - width: auto; - height: auto; -} -.moeplayer .moe-main .moe-bar .moe-bar-track-box:hover .moe-bar-track-bg-box { - display: block; -} -/*清晰度*/ -.moeplayer .moe-main .moe-bar .moe-bar-definition-box{ - float: right; - height: 48px; - line-height: 48px; - position: relative; - cursor: pointer; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-definition-box{ - height: 70px; - line-height: 70px; -} -.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition{ - height: 100%; - padding: 0 10px; - white-space:nowrap; - font-size: 16px; - color: #FFF; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-definition-box .moe-bar-definition{ - font-size: 18px; -} -.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition:hover{ - color: #e80101; -} -.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition-bg-box { - width: auto; - height: auto; -} -.moeplayer .moe-main .moe-bar .moe-bar-definition-box:hover .moe-bar-definition-bg-box { - display: block; -} -/*列表切换*/ -.moeplayer .moe-main .moe-bar .moe-list-bg-box { - background: rgba(0,0,0,.001); - position: absolute; - z-index: 1; - bottom: 46px; - display: none; - -webkit-animation-duration: .2s; - animation-duration: .2s; - -webkit-animation-name: moe-bounceIn; - animation-name: moe-bounceIn; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box { - bottom: 68px; -} -.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg{ - background: rgba(0,0,0,.6); - float: left; - border-radius: 5px; - padding: 10px; - margin-bottom: 10px; -} -.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p{ - width: 100%; - float: left; - line-height: 35px; - color: #FFF; - text-align: center; - font-size: 14px; - background-color: rgba(0,0,0,0); - border: 0px; - white-space:nowrap; - cursor: pointer; -} -.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p:hover{ - color: #e80101; - font-size: 16px; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p:hover{ - font-size: 20px; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p{ - font-size: 18px; -} -.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p-focus{ - color: #FF0302; -} -/*下一集按钮*/ -.moeplayer .moe-main .moe-bar .moe-bar-next{ - float: left; - background-position:-672px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-next{ - background-position:-980px 0; -} -.moeplayer .moe-main .moe-bar .moe-bar-next:hover{ - background-position:-720px 0; -} -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-next:hover{ - background-position:-1050px 0; -} -/*进度栏*/ -.moeplayer .moe-main .moe-bar .moe-bar-progress{ - width: 100%; - position:absolute; - z-index: 1; - height: 12px; - top:-11px; - transition: 0.2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg{ - width: 100%; - background: rgba(255,255,255,.3); - margin-top: 2px; - overflow: hidden; - height: 10px; - transition: .2s; - cursor: pointer; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-load{ - float: left; - width: 0px; - background: rgba(169,169,169,.7); - height: 10px; - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-play{ - width: 0px; - background: #e80101; - position: absolute; - z-index: 1; - height: 10px; - transition: .2s; - cursor: pointer; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-mouseline{ - width: 3px; - background: rgba(255,255,255,.6); - position: absolute; - z-index: 2; - display: none; - height: 10px; - cursor: pointer; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-prompt{ - background: #FFF; - position: absolute; - z-index: 3; - border-radius: 50%; - width: 10px; - height: 10px; - top:2px; - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-slider{ - border-radius: 50%; - overflow: hidden; - position: relative; - float: left; - z-index: 4; - left: 0px; - cursor: pointer; - width: 12px; - height: 12px; - top: -11px; - background: #FFF; - box-shadow: 0px 0px 0px 4px rgba(255,255,255,.5); -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-slider:hover{ - background: #e80101; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg:hover .moe-bar-progress-mouseline{ - display: block; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out{ - height: 2px; - top:-2px; - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-load,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg .moe-bar-progress-play{ - height: 2px; - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-slider{ - width: 12px; - height: 2px; - top: -2px; - box-shadow: 0px 0px 0px 0px rgba(255,255,255,0); - background: rgba(232,1,1,0); - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg .moe-bar-progress-prompt{ - height: 2px; - border-radius: 0; - transition: .2s; -} -.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-slider-move .moe-bar-progress-play,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-slider-move .moe-bar-progress-slider{ - transition: 0s; -} - -/*音量调节栏*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox{ - float: right; - width: 48px; - overflow-x: hidden; -} -/*音量调节栏*/ -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox{ - width: 70px; -} -/*默认状态-音量调节总外框*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume{ - width: 48px; - height: 215px; - background: rgba(0,0,0,.01); - position: absolute; - z-index: 1; - bottom: 46px; - display: none; - overflow: hidden; -} -/*全屏状态-音量调节总外框*/ -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-bar-volume{ - width: 70px; - bottom: 68px; -} -/*默认状态-音量调节总外框-鼠标经过时样式*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox:hover .moe-bar-volume{ - display: block; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-duration: .1s; - animation-duration: .1s; - -webkit-animation-name: moe-bounceIn; - animation-name: moe-bounceIn; -} -/*共用状态-音量调节内部外框*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volumex{ - width: 100%; - height: 200px; - float: left; - background: rgba(0,0,0,.8); - border-radius: 5px; -} -/*共用状态-音量调节顶部文字*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-txt{ - width: 100%; - height: 40px; - line-height: 40px; - color: #FFF; - text-align: center; - font-size: 1rem; - float: left; - overflow: hidden; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -/*共用状态-音量调节背景色*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-bg{ - width: 8px; - height: 140px; - background: #808080; - border-radius: 3px; - overflow: hidden; - cursor: pointer; - margin: auto; -} -/*共用状态-音量调节前景色*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-bg .moe-bar-volume-pp{ - width: 8px; - height: 140px; - background: #e80101; - margin-top: 140px; -} -/*共用状态-音量调节拖动小按钮*/ -.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-slider{ - width: 10px; - height: 10px; - background: #FFF; - border-radius: 50%; - overflow: hidden; - box-shadow: 0px 0px 0px 8px rgba(255,255,255,.5); - position: absolute; - z-index: 1; - top: 0px; - left: 19px; - cursor: pointer; -} -/*全屏状态-音量调节拖动小按钮*/ -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-slider{ - left: 30px; -} -/*默认状态-显示时间*/ -.moeplayer .moe-main .moe-bar .moe-bar-time{ - float: left; - line-height: 48px; - font-size: 16px; - color: #FFF; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -/*全屏状态-显示时间*/ -.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-time{ - float: left; - line-height: 70px; - font-size: 18px; - color: #FFF; -} -/*右侧控制栏*/ -.moeplayer .moe-main .moe-right-bar{ - position: absolute; - z-index: 260; - top: 0; - right: 2px; - bottom: 0; - margin: auto !important; - width: 48px; - height: 144px; - background: rgba(0,0,0,.3); - border-radius: 5px; - transition: .2s; -} -.moeplayer .moe-main .moe-right-bar-hide{ - right: -48px; - transition: .2s; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar{ - width: 70px; - height: 210px; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar-hide{ - right: -70px; - transition: .2s; -} -/*截图按钮*/ -.moeplayer .moe-main .moe-right-bar .moe-btn-screenshot{ - float: left; - background-position:-1536px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-btn-screenshot{ - background-position:-2240px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-btn-screenshot:hover{ - background-position:-1584px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-btn-screenshot:hover{ - background-position:-2310px 0; -} -/*小窗口按钮组*/ -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows{ - float: left; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows button{ - float: left; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-open{ - background-position:-1248px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-open{ - background-position:-1820px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-open:hover{ - background-position:-1296px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-open:hover{ - background-position:-1890px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close{ - background-position:-1152px 0; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close{ - background-position:-1680px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close:hover{ - background-position:-1200px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close:hover{ - background-position:-1750px 0; -} -/*循环按钮组*/ -.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop{ - float: left; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-open{ - background-position:-1440px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-loop .moe-btn-loop-open{ - background-position:-2100px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-open:hover{ - background-position:-1488px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-loop .moe-btn-loop-open:hover{ - background-position:-2170px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close{ - background-position:-1344px 0; - display: none; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close{ - background-position:-1960px 0; -} -.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close:hover{ - background-position:-1392px 0; -} -.moeplayer .moe-main.moe-main-full .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close:hover{ - background-position:-2030px 0; -} -/*顶部显示栏*/ -.moeplayer .moe-main .moe-top-bar{ - position: absolute; - z-index: 260; - top: -36px; - width: 100%; - height: 36px; - background: rgba(0,0,0,.3); - transition: .2s; -} -.moeplayer .moe-main .moe-top-bar-hide{ - top: -36px; - transition: .2s; -} -.moeplayer .moe-main.moe-main-full .moe-top-bar{ - top: 0; -} -.moeplayer .moe-main.moe-main-full .moe-top-bar-hide{ - top: -36px; - transition: .2s; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom{ - position: absolute; - z-index: 260; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container{ - float: left; - margin-left: 10px; - margin-top: 9px; - cursor: pointer; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left{ - float: left; - width: 20px; - height: 18px; - border: 1px solid #FFF; - box-sizing:content-box; - -moz-box-sizing:content-box; /* Firefox */ - -webkit-box-sizing:content-box; /* Safari */ -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-left, -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-left{ - border-color: #e80101; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-left div, -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-left div{ - background: #e80101; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-right{ - float: left; - font-size: 14px; - color: #FFF; - padding-left: 5px; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-right, -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-right{ - color: #e80101; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-50{ - width: 50%; - height: 50%; - background: #FFF; - margin: 4.5px 25%; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-75{ - width: 75%; - height: 50%; - background: #FFF; - margin: 4.5px 12.5%; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-100{ - width: 100%; - height: 50%; - background: #FFF; - margin: 4.5px 0; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-title{ - position: absolute; - z-index: 1; - top: 0px; - width: 100%; - height: 36px; - line-height: 36px; - text-align: center; - font-size: 18px; - color: #FFF; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -.moeplayer .moe-main .moe-top-bar .moe-top-bar-time{ - float: right; - height: 36px; - line-height: 36px; - font-size: 14px; - color: #FFF; - padding: 0 1rem 0; - -moz-user-select:none; /*火狐*/ - -webkit-user-select:none; /*webkit浏览器*/ - -ms-user-select:none; /*IE10*/ - -khtml-user-select:none; /*早期浏览器*/ - user-select:none; -} -/*以下为缓动效果样式*/ -.moe-animate { - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-duration: .3s; - animation-duration: .3s; -} -.moe-animate-bouncein { - -webkit-animation-name: moe-bounceIn; - animation-name: moe-bounceIn; -} - -@-webkit-keyframes moe-bounceIn { - 0% { - opacity: 0; - -webkit-transform: scale(.5); - transform: scale(.5) - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } -} - -@keyframes moe-bounceIn { - 0% { - opacity: 0; - -webkit-transform: scale(.5); - -ms-transform: scale(.5); - transform: scale(.5); - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - } -} -.moe-animate-bounceout { - -webkit-animation-name: moe-bounceOut; - animation-name: moe-bounceOut; -} - -@-webkit-keyframes moe-bounceOut { - 0% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } - 100% { - opacity: 0; - -webkit-transform: scale(.5); - transform: scale(.5); - } -} - -@keyframes moe-bounceOut { - 0% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } - 100% { - opacity: 0; - -webkit-transform: scale(.5); - transform: scale(.5); - } -} -.moe-animate-circle { - animation: moe-Circle 1s linear infinite; - -webkit-animation: moe-Circle 1s linear infinite -} - -@-webkit-keyframes moe-Circle { - 0% { - transform: rotate(0deg); - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg) - } - 25% { - transform: rotate(90deg); - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg) - } - 50% { - transform: rotate(180deg); - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg) - } - 75% { - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg) - } - 100% { - transform: rotate(360deg); - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg) - } -} - -@keyframes moe-Circle { - 0% { - transform: rotate(0deg); - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg) - } - 25% { - transform: rotate(90deg); - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg) - } - 50% { - transform: rotate(180deg); - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg) - } - 75% { - transform: rotate(270deg); - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg) - } - 100% { - transform: rotate(360deg); - -webkit-transform: rotate(360deg); - -ms-transform: rotate(360deg) - } -} \ No newline at end of file +/* + * 软件名称：MoePlayer + * 版本:X3 + * 版权：MoePlayer 项目(fork 自 ckplayer, www.ckplayer.com) + * 开源协议：MIT + * 本文件由 npm run build 自动生成(src/css/base.css + 主题),请勿手动修改 + */ +/* + * MoePlayer 皮肤基础样式(base.css) + * 功能：三个皮肤共用的全部结构样式 + 默认主题变量 + * 说明：所有颜色/主题相关值均为 CSS 自定义属性(--moe-*),定义在 .moeplayer 作用域上 + * (右键菜单 .moeplayer-menu、错误框 .moeplayer-error 会被挂载到 body 下,故一并定义) + * 各主题(src/css/themes/*.css)只需覆盖这些变量即可换肤 + * 图标：全部使用 SVG data-URI + CSS mask 实现,颜色跟随 --moe-icon-color,换肤零成本 + * 本文件不单独使用,由 scripts/build-css.js 与各主题拼接生成最终产物 + */ + +/*======================== 主题变量(默认值即默认皮肤) ========================*/ +.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-progress-play: var(--moe-accent); + --moe-slider-color: var(--moe-accent); + /* 音量条:轨道/已音量/面板背景 */ + --moe-volume-bg: rgba(255,255,255,.25); + --moe-volume-play: var(--moe-accent); + --moe-volume-panel-bg: rgba(0,0,0,.85); + /* 弹层(倍速/字幕/清晰度列表等) */ + --moe-popup-bg: rgba(0,0,0,.85); + --moe-popup-text: #FFF; + --moe-popup-hover: var(--moe-accent); + --moe-popup-shadow: 0 4px 16px rgba(0,0,0,.3); + /* 浮层提示(message/tip/prompt 等,浮于视频上方,不随浅色主题变化) */ + --moe-overlay-bg: rgba(0,0,0,.85); + --moe-overlay-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); + /* 圆角与字体 */ + --moe-radius: 6px; + --moe-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; + /* 尺寸 */ + --moe-bar-height: 48px; + --moe-bar-height-full: 70px; + --moe-btn-size: 48px; + --moe-btn-size-full: 70px; + --moe-icon-size: 22px; + --moe-icon-size-full: 30px; +} + +/*======================== 全局错误提示框 ========================*/ +.moeplayer-error{ + position: fixed; + z-index: 9999999; + left: 10px; + bottom: 10px; + width: auto; + height: 38px; + line-height: 38px; + padding: 0 .85rem; + background: var(--moe-overlay-bg); + border-radius: var(--moe-radius); + color: var(--moe-overlay-text); + font-size: 14px; + font-family: var(--moe-font-family); + white-space: nowrap; +} + +/*======================== 播放器容器 ========================*/ +.moeplayer{ + width: 100%; + height: 100%; + float: left; + background: #000; + overflow: hidden; + font-family: var(--moe-font-family); +} +.moeplayer button, .moeplayer input{ + font-family: inherit; +} +.moeplayer .moe-main.moe-nocursor{ + cursor: none; +} +.moeplayer-smallwindow{ + position: fixed; + z-index: 9999999; + width: 420px; + max-width: 100%; + height: 266px; + right: 10px; + bottom: 10px; +} +.moeplayer .moe-main{ + width: 100%; + height: 100%; + overflow: hidden; + background: #000; + position: relative; +} +.moeplayer .moe-main .moe-video{ + width: 100%; + height: 100%; + overflow: hidden; + position:absolute; + z-index: 1; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.moeplayer .moe-main .moe-video video,.moeplayer .moe-main .moe-video canvas{ + width: 100%; + height: 100%; +} +.moeplayer .moe-main .moe-error{ + width: 100%; + height: 80px; + line-height: 35px; + text-align: center; + color: var(--moe-overlay-text); + position:absolute; + z-index: 70; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + overflow: hidden; +} +/*logo:默认无品牌水印,用户通过 logo 配置项传入自定义图片(JS 会插入 img)*/ +.moeplayer .moe-main .moe-logo{ + position:absolute; + right: 20px; + top:20px; + z-index: 400; + background: none; +} +/*加载动画:CSS 圆弧旋转,不再使用图片*/ +.moeplayer .moe-main .moe-loading{ + position:absolute; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + z-index: 80; + width: 46px; + height: 46px; + box-sizing: border-box; + border-radius: 50%; + border: 3px solid rgba(255,255,255,.3); + border-top-color: #FFF; + animation: moe-Circle .8s linear infinite; + -webkit-animation: moe-Circle .8s linear infinite +} +/*中央大播放键:圆形半透明底 + 白色播放三角,hover 变主题色*/ +.moeplayer .moe-main .moe-center-play{ + background: rgba(0,0,0,.45); + border: none; + border-radius: 50%; + box-sizing:border-box; + width: 80px; + height: 80px; + position: absolute; + display: none; + z-index: 90; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + cursor: pointer; + transition: background-color .2s, width .2s, height .2s; +} +.moeplayer .moe-main .moe-center-play::before{ + content: ''; + position: absolute; + inset: 0; + background-color: #FFF; + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7.5,6.2v11.6c0,.8,.9,1.3,1.6,.9l9.1-5.8c.6-.4,.6-1.4,0-1.8l-9.1-5.8c-.7-.4-1.6,.1-1.6,.9z'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7.5,6.2v11.6c0,.8,.9,1.3,1.6,.9l9.1-5.8c.6-.4,.6-1.4,0-1.8l-9.1-5.8c-.7-.4-1.6,.1-1.6,.9z'/%3E%3C/svg%3E"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: 50% 50%; + mask-position: 50% 50%; + -webkit-mask-size: 46%; + mask-size: 46%; +} +.moeplayer .moe-main.moe-main-full .moe-center-play{ + width: 100px; + height: 100px; +} +.moeplayer .moe-main .moe-center-play:hover{ + width: 100px; + height: 100px; + background: var(--moe-accent); +} +.moeplayer .moe-main.moe-main-full .moe-center-play:hover{ + width: 120px; + height: 120px; +} +/*缓冲动画:CSS 圆弧旋转*/ +.moeplayer .moe-main .moe-buffer{ + width: 38px; + height: 38px; + box-sizing: border-box; + border-radius: 50%; + border: 3px solid rgba(255,255,255,.25); + border-top-color: var(--moe-accent); + position: absolute; + z-index: 100; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + display: none; + animation: moe-Circle .8s linear infinite; + -webkit-animation: moe-Circle .8s linear infinite +} +.moeplayer .moe-main .moe-message{ + position: absolute; + z-index: 240; + left:5px; + bottom: 78px; + padding: 0 1rem; + line-height: 30px; + height: 30px; + width: auto; + min-width: 1px; + border-radius: var(--moe-radius); + background: var(--moe-overlay-bg); + font-size: 14px; + color: var(--moe-overlay-text); + display: none; + white-space:nowrap; +} +.moeplayer .moe-main .moe-message-right{ + left:auto; + right: 5px; +} +.moeplayer .moe-main.moe-main-full .moe-message{ + font-size: 18px; + bottom: 100px; +} +.moeplayer .moe-main .moe-tip{ + width: auto; + height: auto; + position: absolute; + z-index: 230; + display: none; + margin-bottom: 1px; +} +.moeplayer .moe-main .moe-tip .moe-content{ + width: auto; + height: auto; + white-space: nowrap; + min-width: 1px; + background: var(--moe-overlay-bg); + font-size: 14px; + color: var(--moe-overlay-text); + line-height: 32px; + height: 32px; + padding: 0 15px; +} +.moeplayer .moe-main .moe-tip .moe-content-float-auto{ + border-radius: var(--moe-radius); + margin: auto; +} +.moeplayer .moe-main .moe-tip .moe-content-float-left{ + border-radius: var(--moe-radius); + float: left; +} +.moeplayer .moe-main.moe-main-full .moe-tip .moe-content{ + font-size: 18px; +} +.moeplayer .moe-main .moe-tip .moe-triangle{ + width: 0px; + height: 0px; +} +.moeplayer .moe-main .moe-tip .moe-triangle-auto{ + border-left: 8px solid transparent; + border-top: 8px solid var(--moe-overlay-bg); + border-right: 8px solid transparent; + margin: auto; +} +.moeplayer .moe-main .moe-tip .moe-triangle-left{ + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 8px solid var(--moe-overlay-bg); + float: left; + margin-top: 10px; +} +/*预览(缩略图)*/ +.moeplayer .moe-main .moe-preview{ + position: absolute; + z-index: 210; + width: 100%; + left:0; + bottom: 64px; + overflow: hidden; + display: none; +} +.moeplayer .moe-main.moe-main-full .moe-preview{ + bottom: 86px; +} +.moeplayer .moe-main .moe-preview-load-img{ + position: absolute; + z-index: 210; + top:110%; +} +.moeplayer .moe-main .moe-preview .moe-preview-bg{ + position: absolute; + z-index: 1; + top:0; + float: left; + transition: .2s; +} +.moeplayer .moe-main .moe-preview .moe-preview-bg .moe-preview-img{ + background-repeat: no-repeat ; + float: left; +} +.moeplayer .moe-main .moe-preview .moe-preview-frame{ + position: absolute; + z-index: 2; + top:0; + left:-1000px; + border:4px solid var(--moe-accent); + border-radius: 2px; + box-sizing:content-box; +} +.moeplayer .moe-main .moe-prompt-words{ + position: absolute; + z-index: 220; + width: 213px; + line-height: 23px; + font-size: 14px; + color: var(--moe-overlay-text); + background: var(--moe-overlay-bg); + overflow: hidden; + display: none; + margin-bottom: 10px; + border-radius: var(--moe-radius); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .2s; + animation-duration: .2s; + -webkit-animation-name: moe-bounceIn; + animation-name: moe-bounceIn; +} +.moeplayer .moe-main .moe-prompt-words .moe-prompt-content{ + padding: 5px; +} +.moeplayer .moe-main .moe-layer{ + position: absolute; + z-index: 101; +} +.moeplayer .moe-main .moe-tempTime{ + position: absolute; + z-index: 20; + left:10px; + bottom: 5px; + display: none; + font-size: 14px; + line-height: 28px; + color: var(--moe-overlay-text); +} + +/*======================== 关于 ========================*/ +.moeplayer .moe-main .moe-about{ + position: absolute; + z-index: 200; + width: 50%; + max-width: 600px; + min-width: 400px; + left: 1rem; + top: 1rem; + background: var(--moe-overlay-bg); + border-radius: var(--moe-radius); + padding: 1rem 0; + display: none; +} +.moeplayer .moe-main .moe-about ul{ + padding: 0; + margin: 0; +} +.moeplayer .moe-main .moe-about ul li{ + list-style:none; + color: var(--moe-overlay-text); + font-size: 12px; + line-height: 18px; + height: 18px; + padding: 0; + margin: 0; +} +.moeplayer .moe-main .moe-about ul li .moe-about-title{ + width: 100px; + text-align: right; + float: left; + padding-right: .5rem; +} +.moeplayer .moe-main .moe-about ul li .moe-about-content{ + width: auto; + float: left; +} +.moeplayer .moe-main .moe-about .moe-about-bar{ + position: absolute; + z-index: 1; + top: 0; + right: 0; + width: 96px; +} +.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar{ + width: 140px; +} +/*关于-复制按钮图标*/ +.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-copy{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5,15H4a2,2,0,0,1-2-2V4a2,2,0,0,1,2-2h9a2,2,0,0,1,2,2v1'/%3E%3C/svg%3E"); +} +/*关于-关闭按钮图标*/ +.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-close{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6,6l12,12M18,6L6,18'/%3E%3C/svg%3E"); +} + +/*======================== 截图显示容器 ========================*/ +.moeplayer .moe-main .moe-screenshot{ + position: absolute; + z-index: 220; + width: auto; + height: 144px; + margin: auto !important; + top: 0; + bottom: 0; + right: 55px; + display: none; +} +.moeplayer .moe-main.moe-main-full .moe-screenshot{ + height: 210px; + right: 77px; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-img{ + position: absolute; + z-index: 1; + width: 100%; + height: 100%; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-img img{ + height: 100%; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar{ + position: absolute; + z-index: 1; + width: 100%; + height: 36px; + bottom: 5px; + text-align: center; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn{ + display: inline-block; + overflow: hidden; + border: 0px solid transparent; + border-radius: var(--moe-radius); + vertical-align: middle; + text-align: center; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + line-height: 30px; + padding: 0px 15px; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: #fff; + margin: 0 5px; + transition: filter .2s, color .2s, background-color .2s; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn:hover{ + filter: brightness(1.15); +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn:focus{ + outline:0; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-down{ + background-color: var(--moe-accent); +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-close{ + background-color: rgba(96,96,96,.9); + color: #fff; +} + +/*======================== 广告 ========================*/ +.moeplayer .moe-main .moe-yytf{ + position: absolute; + z-index: 800; + width: 100%; + height: 100%; + left: 0px; + top: 0px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-front-link{ + width: 100%; + height: 100%; + display: none; + cursor: pointer; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-front-picture{ + width: 100%; + height: 100%; + background: #000; + display: none; + text-align: center; + line-height: 100%; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-front-picture img{ + max-width: 100%; + max-height: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-top{ + position: absolute; + z-index: 3; + top: 10px; + right: 10px; +} + +.moeplayer .moe-main .moe-yytf .moe-yytf-top div{ + float: right; + margin-left: 10px; + font-size: 14px; + border-radius: 15px; + background: var(--moe-overlay-bg); + padding: 0px 10px; + line-height: 30px; + height: 30px; + color: var(--moe-overlay-text); +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-top div{ + font-size: 18px; + border-radius: 20px; + line-height: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-top .moe-yytf-closetime{ + display: none; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-top .moe-yytf-closead{ + cursor: pointer; + display: none; +} + +/*显示广告时的底部内容*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom{ + position: absolute; + z-index: 3; + bottom: 10px; + right: 10px; +} +/*显示广告时的底部按钮-共用(圆形半透明底 + SVG 图标)*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn{ + background-color: var(--moe-overlay-bg); + border: none; + outline: none; + width: 30px; + height: 30px; + cursor: pointer; + border-radius: 50%; + position: relative; + padding: 0; + transition: background-color .2s; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-btn{ + width: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn::before{ + content: ''; + position: absolute; + inset: 0; + background-color: #FFF; + -webkit-mask-image: var(--moe-icon); + mask-image: var(--moe-icon); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: 16px; + mask-size: 16px; + transition: background-color .2s; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-btn::before{ + -webkit-mask-size: 20px; + mask-size: 20px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn:hover::before{ + background-color: var(--moe-icon-hover); +} +/*显示广告时的静音按钮*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit{ + float: right; + width: 30px; + height: 30px; + margin-left: 10px; + overflow: hidden; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit{ + width: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9a4.2,4.2,0,0,1,0,6'/%3E%3Cpath d='M18.4,6.6a7.6,7.6,0,0,1,0,10.8'/%3E%3C/svg%3E"); +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9.5l5.5,5.5M21.5,9.5L16,15'/%3E%3C/svg%3E"); +} +/*显示广告时的全屏按钮*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit{ + float: right; + width: 30px; + height: 30px; + margin-left: 10px; + overflow: hidden; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit{ + width: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5,4H4v4.5M15.5,4H20v4.5M8.5,20H4v-4.5M15.5,20h4.5v-4.5'/%3E%3C/svg%3E"); +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,8.5h4.5V4M20,8.5h-4.5V4M4,15.5h4.5V20M20,15.5h-4.5V20'/%3E%3C/svg%3E"); +} +/*广告查看详情按钮*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-details{ + float: right; + font-size: 14px; + border-radius: 15px; + background: var(--moe-overlay-bg); + padding: 0 10px; + color: var(--moe-overlay-text); + line-height: 30px; + height: 30px; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-details{ + font-size: 18px; + border-radius: 20px; + line-height: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-details a{ + color: var(--moe-overlay-text); + text-decoration: none; +} +/*暂停广告容器*/ +.moeplayer .moe-main .moe-pause-yytf{ + display: none; + position:absolute; + z-index: 800; + max-width: 100%; + max-height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.moeplayer .moe-main .moe-pause-yytf img{ + max-width: 100%; + max-height: 100%; +} +/*暂停广告关闭按钮(圆形底 + × 图标)*/ +.moeplayer .moe-main .moe-pause-close{ + position:absolute; + z-index: 1; + right: -15px; + top:-15px; + width: 30px; + height: 30px; + background-color: var(--moe-overlay-bg); + border: none; + outline: none; + border-radius: 50%; + cursor: pointer; + padding: 0; + transition: background-color .2s; +} +.moeplayer .moe-main .moe-pause-close::before{ + content: ''; + position: absolute; + inset: 0; + background-color: #FFF; + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7,7l10,10M17,7L7,17'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7,7l10,10M17,7L7,17'/%3E%3C/svg%3E"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: 14px; + mask-size: 14px; +} +.moeplayer .moe-main .moe-pause-close:hover{ + background-color: var(--moe-accent); +} + +/*======================== 右键菜单(挂载在 body 下) ========================*/ +.moeplayer-menu{ + width:120px; + background: var(--moe-menu-bg); + position: absolute; + z-index: 9000; + font-size:14px; + font-family: var(--moe-font-family); + border: 1px solid var(--moe-menu-border); + border-radius: var(--moe-radius); + box-shadow: var(--moe-popup-shadow); + padding: 4px 0; + display: none; +} +.moeplayer-menu .moe-li{ + color: var(--moe-menu-text); + line-height: 32px; + padding: 0 0 0 10px; + cursor: pointer; + transition: background-color .15s, color .15s; +} +.moeplayer-menu .moe-li:hover{ + background: rgba(127,127,127,.18); + color: var(--moe-menu-link); +} +.moeplayer-menu .moe-li a{ + color: var(--moe-menu-link); + text-decoration: none; +} +.moeplayer-menu .moe-underline{ + border-bottom: 1px solid var(--moe-menu-border); +} + +/*======================== 控制栏 ========================*/ +.moeplayer .moe-main .moe-bar{ + position:absolute; + z-index: 260; + left:0px; + bottom:0px; + width: 100%; + height: var(--moe-bar-height); + background: var(--moe-bar-bg); + transition: 0.2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar{ + height: var(--moe-bar-height-full); +} +.moeplayer .moe-main .moe-bar.moe-bar-out{ + bottom: -50px; + transition: 0.2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar.moe-bar-out{ + bottom: -80px; + transition: 0.2s; +} + +/*======================== 按钮公用样式(SVG mask 图标) ========================*/ +.moeplayer .moe-main .moe-bar-btn{ + background-color: transparent; + border: none; + outline: none; + width: var(--moe-btn-size); + height: var(--moe-btn-size); + cursor: pointer; + position: relative; + padding: 0; + transition: transform .2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar-btn{ + width: var(--moe-btn-size-full); + height: var(--moe-btn-size-full); +} +/*图标层:颜色跟随 --moe-icon-color,形状由每个按钮的 --moe-icon 决定*/ +.moeplayer .moe-main .moe-bar-btn::before{ + content: ''; + position: absolute; + inset: 0; + background-color: var(--moe-icon-color); + -webkit-mask-image: var(--moe-icon); + mask-image: var(--moe-icon); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: var(--moe-icon-size); + mask-size: var(--moe-icon-size); + transition: background-color .2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar-btn::before{ + -webkit-mask-size: var(--moe-icon-size-full); + mask-size: var(--moe-icon-size-full); +} +.moeplayer .moe-main .moe-bar .moe-bar-btn:hover::before, +.moeplayer .moe-main .moe-right-bar .moe-bar-btn:hover::before, +.moeplayer .moe-main .moe-about .moe-bar-btn:hover::before{ + background-color: var(--moe-icon-hover); +} + +/*======================== 按钮图标定义 ========================*/ +/*播放*/ +.moeplayer .moe-main .moe-btn-play{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8,5.2v13.6c0,.8,.9,1.3,1.6,.9l10.2-6.8c.6-.4,.6-1.4,0-1.8L9.6,4.3c-.7-.4-1.6,.1-1.6,.9z'/%3E%3C/svg%3E"); +} +/*暂停*/ +.moeplayer .moe-main .moe-btn-pause{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='6.8' y='5' width='3.6' height='14' rx='1'/%3E%3Crect x='13.6' y='5' width='3.6' height='14' rx='1'/%3E%3C/svg%3E"); +} +/*刷新/重播*/ +.moeplayer .moe-main .moe-btn-refresh{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2,14.9a8.5,8.5,0,1,1-2-8.4L20.5,9'/%3E%3Cpolyline points='20.5,3.8,20.5,9,15.3,9'/%3E%3C/svg%3E"); +} +/*音量(非静音)*/ +.moeplayer .moe-main .moe-btn-muted{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9a4.2,4.2,0,0,1,0,6'/%3E%3Cpath d='M18.4,6.6a7.6,7.6,0,0,1,0,10.8'/%3E%3C/svg%3E"); +} +/*音量(已静音)*/ +.moeplayer .moe-main .moe-btn-exitmuted{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9.5l5.5,5.5M21.5,9.5L16,15'/%3E%3C/svg%3E"); +} +/*全屏*/ +.moeplayer .moe-main .moe-btn-full{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5,4H4v4.5M15.5,4H20v4.5M8.5,20H4v-4.5M15.5,20h4.5v-4.5'/%3E%3C/svg%3E"); +} +/*退出全屏*/ +.moeplayer .moe-main .moe-btn-exitfull{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,8.5h4.5V4M20,8.5h-4.5V4M4,15.5h4.5V20M20,15.5h-4.5V20'/%3E%3C/svg%3E"); +} +/*网页全屏*/ +.moeplayer .moe-main .moe-btn-webfull{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M10,14l4.5-4.5M14.5,13.2V9.5H10.8'/%3E%3C/svg%3E"); +} +/*退出网页全屏*/ +.moeplayer .moe-main .moe-btn-exitwebfull{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M14.5,9.5L10,14M10,10.3V14h3.7'/%3E%3C/svg%3E"); +} +/*剧场模式*/ +.moeplayer .moe-main .moe-btn-theatre{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Cpath d='M9,10l-2,2,2,2M15,10l2,2-2,2'/%3E%3C/svg%3E"); +} +/*退出剧场模式*/ +.moeplayer .moe-main .moe-btn-exittheatre{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Cpath d='M7,10l2,2-2,2M17,10l-2,2,2,2'/%3E%3C/svg%3E"); +} +/*下一集*/ +.moeplayer .moe-main .moe-bar-next{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6,5.7v12.6c0,.8,.9,1.2,1.5,.8l7.6-6.3c.5-.4,.5-1.2,0-1.6L7.5,4.9c-.6-.4-1.5,0-1.5,.8z'/%3E%3Crect x='16.4' y='5.5' width='2.6' height='13' rx='1'/%3E%3C/svg%3E"); +} +/*截图*/ +.moeplayer .moe-main .moe-btn-screenshot{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,8h2.6L8.8,5.5h6.4L17.4,8H20a1,1,0,0,1,1,1v9a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V9a1,1,0,0,1,1-1z'/%3E%3Ccircle cx='12' cy='13' r='3.2'/%3E%3C/svg%3E"); +} +/*开启循环(当前处于循环状态)*/ +.moeplayer .moe-main .moe-btn-loop-open{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5,4.5L20,8l-3.5,3.5'/%3E%3Cpath d='M20,8H9a4.5,4.5,0,0,0-4.5,4.5V13'/%3E%3Cpath d='M7.5,19.5L4,16l3.5-3.5'/%3E%3Cpath d='M4,16h11a4.5,4.5,0,0,0,4.5-4.5V11'/%3E%3C/svg%3E"); +} +/*关闭循环(当前未循环,循环箭头中带 1)*/ +.moeplayer .moe-main .moe-btn-loop-close{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5,4.5L20,8l-3.5,3.5'/%3E%3Cpath d='M20,8H9a4.5,4.5,0,0,0-4.5,4.5V13'/%3E%3Cpath d='M7.5,19.5L4,16l3.5-3.5'/%3E%3Cpath d='M4,16h11a4.5,4.5,0,0,0,4.5-4.5V11'/%3E%3Cpath d='M12.5,10v4M11.4,10.7l1.1-.7' stroke-width='1.6'/%3E%3C/svg%3E"); +} +/*开启小窗口*/ +.moeplayer .moe-main .moe-btn-smallwindows-open{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Crect x='12' y='12' width='6.5' height='4.5' rx='1' fill='black' stroke='none'/%3E%3C/svg%3E"); +} +/*关闭小窗口*/ +.moeplayer .moe-main .moe-btn-smallwindows-close{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Crect x='12' y='12' width='6.5' height='4.5' rx='1' stroke-width='1.5'/%3E%3C/svg%3E"); +} + +/*======================== 播放暂停按钮组 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-playandpause{ + float: left; +} + +/*======================== 返回直播按钮 ========================*/ +.moeplayer .moe-main .moe-bar .moe-btn-backlive{ + float: left; + font-size: 16px; + line-height: 28px; + border-radius: var(--moe-radius); + margin: 10px; + border: 0px; + background: var(--moe-accent); + color: #FFF; + cursor: pointer; + padding: 0 8px; + transition: filter .2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-btn-backlive{ + font-size: 18px; + line-height: 36px; + margin: 17px 10px; +} +.moeplayer .moe-main .moe-bar .moe-btn-backlive:hover{ + filter: brightness(1.15); +} +.moeplayer .moe-main .moe-bar .moe-btn-backlive:focus{ + outline:0; +} +/*======================== 全屏按钮组 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-fullandexit{ + float: right; +} +.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-exitfull{ + display: none; +} + +/*======================== 网页全屏按钮组 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit{ + float: right; +} +.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull{ + display: none; +} + +/*======================== 剧场模式按钮组 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit{ + float: right; +} +.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre{ + display: none; +} + +/*======================== 播放速度/字幕/清晰度(文字按钮) ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box, +.moeplayer .moe-main .moe-bar .moe-bar-track-box, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box{ + float: right; + height: var(--moe-bar-height); + line-height: var(--moe-bar-height); + position: relative; + cursor: pointer; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playbackrate-box, +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-track-box, +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-definition-box{ + height: var(--moe-bar-height-full); + line-height: var(--moe-bar-height-full); +} +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate, +.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition{ + height: 100%; + padding: 0 10px; + white-space:nowrap; + font-size: 14px; + color: var(--moe-text-color); + transition: color .2s; + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate, +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-track-box .moe-bar-track, +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-definition-box .moe-bar-definition{ + font-size: 18px; +} +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate:hover, +.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track:hover, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition:hover{ + color: var(--moe-text-hover); +} +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate-bg-box, +.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track-bg-box, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition-bg-box{ + width: auto; + height: auto; +} +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box:hover .moe-bar-playbackrate-bg-box, +.moeplayer .moe-main .moe-bar .moe-bar-track-box:hover .moe-bar-track-bg-box, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box:hover .moe-bar-definition-bg-box{ + display: block; +} +/*列表切换弹层*/ +.moeplayer .moe-main .moe-bar .moe-list-bg-box { + background: rgba(0,0,0,.001); + position: absolute; + z-index: 1; + bottom: 46px; + display: none; + -webkit-animation-duration: .2s; + animation-duration: .2s; + -webkit-animation-name: moe-bounceIn; + animation-name: moe-bounceIn; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box { + bottom: 68px; +} +.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg{ + background: var(--moe-popup-bg); + float: left; + border-radius: var(--moe-radius); + box-shadow: var(--moe-popup-shadow); + padding: 6px; + margin-bottom: 10px; +} +.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p{ + width: 100%; + float: left; + line-height: 32px; + color: var(--moe-popup-text); + text-align: center; + font-size: 14px; + background-color: rgba(0,0,0,0); + border: 0px; + border-radius: 4px; + white-space:nowrap; + cursor: pointer; + transition: color .15s, background-color .15s; +} +.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p:hover{ + color: var(--moe-popup-hover); + background: rgba(127,127,127,.15); +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p{ + font-size: 18px; + line-height: 36px; +} +.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p-focus{ + color: var(--moe-accent); +} +/*下一集按钮*/ +.moeplayer .moe-main .moe-bar .moe-bar-next{ + float: left; +} + +/*======================== 进度栏 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-progress{ + width: 100%; + position:absolute; + z-index: 1; + height: 12px; + top:-11px; + transition: 0.2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg{ + width: 100%; + background: var(--moe-progress-bg); + margin-top: 4px; + overflow: hidden; + height: 4px; + border-radius: 2px; + transition: .2s; + cursor: pointer; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg{ + height: 6px; + margin-top: 3px; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg .moe-bar-progress-load, +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg .moe-bar-progress-play, +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg .moe-bar-progress-mouseline{ + height: 6px; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-load{ + float: left; + width: 0px; + background: var(--moe-progress-buffer); + height: 4px; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-play{ + width: 0px; + background: var(--moe-progress-play); + position: absolute; + z-index: 1; + height: 4px; + transition: .2s; + cursor: pointer; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-mouseline{ + width: 2px; + background: rgba(255,255,255,.6); + position: absolute; + z-index: 2; + display: none; + height: 4px; + cursor: pointer; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-prompt{ + background: #FFF; + position: absolute; + z-index: 3; + border-radius: 50%; + width: 10px; + height: 10px; + top:1px; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-slider{ + border-radius: 50%; + overflow: hidden; + position: relative; + float: left; + z-index: 4; + left: 0px; + cursor: pointer; + width: 14px; + height: 14px; + top: -9px; + background: var(--moe-slider-color); + box-shadow: 0 1px 4px rgba(0,0,0,.5); + transition: transform .15s, background-color .15s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-slider{ + transform: scale(1.25); +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg:hover .moe-bar-progress-mouseline{ + display: block; +} +/*控制栏隐藏时的细进度条*/ +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out{ + height: 2px; + top:-2px; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-load,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg .moe-bar-progress-play{ + height: 2px; + margin-top: 0; + border-radius: 0; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-slider{ + width: 14px; + height: 2px; + top: -2px; + box-shadow: none; + background: rgba(255,255,255,0); + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg .moe-bar-progress-prompt{ + height: 2px; + top: 0; + border-radius: 0; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-slider-move .moe-bar-progress-play,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-slider-move .moe-bar-progress-slider{ + transition: 0s; +} + +/*======================== 音量调节栏 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox{ + float: right; + width: var(--moe-btn-size); + overflow-x: hidden; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox{ + width: var(--moe-btn-size-full); +} +/*默认状态-音量调节总外框*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume{ + width: var(--moe-btn-size); + height: 215px; + background: rgba(0,0,0,.01); + position: absolute; + z-index: 1; + bottom: 46px; + display: none; + overflow: hidden; +} +/*全屏状态-音量调节总外框*/ +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-bar-volume{ + width: var(--moe-btn-size-full); + bottom: 68px; +} +/*默认状态-音量调节总外框-鼠标经过时样式*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox:hover .moe-bar-volume{ + display: block; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .1s; + animation-duration: .1s; + -webkit-animation-name: moe-bounceIn; + animation-name: moe-bounceIn; +} +/*共用状态-音量调节内部外框*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volumex{ + width: 100%; + height: 200px; + float: left; + background: var(--moe-volume-panel-bg); + border-radius: var(--moe-radius); + box-shadow: var(--moe-popup-shadow); +} +/*共用状态-音量调节顶部文字*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-txt{ + width: 100%; + height: 40px; + line-height: 40px; + color: var(--moe-popup-text); + text-align: center; + font-size: 1rem; + float: left; + overflow: hidden; + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} +/*共用状态-音量调节背景色*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-bg{ + width: 6px; + height: 140px; + background: var(--moe-volume-bg); + border-radius: 3px; + overflow: hidden; + cursor: pointer; + margin: auto; +} +/*共用状态-音量调节前景色*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-bg .moe-bar-volume-pp{ + width: 6px; + height: 140px; + background: var(--moe-volume-play); + margin-top: 140px; +} +/*共用状态-音量调节拖动小按钮*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-slider{ + width: 12px; + height: 12px; + background: #FFF; + border-radius: 50%; + overflow: hidden; + box-shadow: 0 1px 4px rgba(0,0,0,.5); + position: absolute; + z-index: 1; + top: 0px; + left: 18px; + cursor: pointer; +} +/*全屏状态-音量调节拖动小按钮*/ +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-slider{ + left: 29px; +} +/*默认状态-显示时间*/ +.moeplayer .moe-main .moe-bar .moe-bar-time{ + float: left; + line-height: var(--moe-bar-height); + font-size: 14px; + padding: 0 4px; + color: var(--moe-text-color); + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} +/*全屏状态-显示时间*/ +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-time{ + float: left; + line-height: var(--moe-bar-height-full); + font-size: 18px; + color: var(--moe-text-color); +} + +/*======================== 右侧控制栏 ========================*/ +.moeplayer .moe-main .moe-right-bar{ + position: absolute; + z-index: 260; + top: 0; + right: 2px; + bottom: 0; + margin: auto !important; + width: var(--moe-btn-size); + height: 144px; + background: var(--moe-right-bar-bg); + border-radius: var(--moe-radius); + transition: .2s; +} +.moeplayer .moe-main .moe-right-bar-hide{ + right: -48px; + transition: .2s; +} +.moeplayer .moe-main.moe-main-full .moe-right-bar{ + width: var(--moe-btn-size-full); + height: 210px; +} +.moeplayer .moe-main.moe-main-full .moe-right-bar-hide{ + right: -70px; + transition: .2s; +} +/*截图按钮*/ +.moeplayer .moe-main .moe-right-bar .moe-btn-screenshot{ + float: left; +} +/*小窗口按钮组*/ +.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows{ + float: left; +} +.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows button{ + float: left; +} +.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close{ + display: none; +} +/*循环按钮组*/ +.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop{ + float: left; +} +.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close{ + display: none; +} + +/*======================== 顶部显示栏 ========================*/ +.moeplayer .moe-main .moe-top-bar{ + position: absolute; + z-index: 260; + top: -36px; + width: 100%; + height: 36px; + background: var(--moe-top-bar-bg); + transition: .2s; +} +.moeplayer .moe-main .moe-top-bar-hide{ + top: -36px; + transition: .2s; +} +.moeplayer .moe-main.moe-main-full .moe-top-bar{ + top: 0; +} +.moeplayer .moe-main.moe-main-full .moe-top-bar-hide{ + top: -36px; + transition: .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom{ + position: absolute; + z-index: 260; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container{ + float: left; + margin-left: 10px; + margin-top: 9px; + cursor: pointer; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left{ + float: left; + width: 20px; + height: 18px; + border: 1px solid var(--moe-top-bar-text); + box-sizing:content-box; + transition: border-color .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-left, +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-left{ + border-color: var(--moe-accent); +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-left div, +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-left div{ + background: var(--moe-accent); +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-right{ + float: left; + font-size: 14px; + color: var(--moe-top-bar-text); + padding-left: 5px; + transition: color .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-right, +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-right{ + color: var(--moe-accent); +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-50{ + width: 50%; + height: 50%; + background: var(--moe-top-bar-text); + margin: 4.5px 25%; + transition: background .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-75{ + width: 75%; + height: 50%; + background: var(--moe-top-bar-text); + margin: 4.5px 12.5%; + transition: background .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-100{ + width: 100%; + height: 50%; + background: var(--moe-top-bar-text); + margin: 4.5px 0; + transition: background .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-title{ + position: absolute; + z-index: 1; + top: 0px; + width: 100%; + height: 36px; + line-height: 36px; + text-align: center; + font-size: 18px; + color: var(--moe-top-bar-text); + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-time{ + float: right; + height: 36px; + line-height: 36px; + font-size: 14px; + color: var(--moe-top-bar-text); + padding: 0 1rem 0; + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} + +/*======================== 缓动效果 ========================*/ +.moe-animate { + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .3s; + animation-duration: .3s; +} +.moe-animate-bouncein { + -webkit-animation-name: moe-bounceIn; + animation-name: moe-bounceIn; +} + +@-webkit-keyframes moe-bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5) + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes moe-bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.5); + -ms-transform: scale(.5); + transform: scale(.5); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +.moe-animate-bounceout { + -webkit-animation-name: moe-bounceOut; + animation-name: moe-bounceOut; +} + +@-webkit-keyframes moe-bounceOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5); + } +} + +@keyframes moe-bounceOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5); + } +} +.moe-animate-circle { + animation: moe-Circle 1s linear infinite; + -webkit-animation: moe-Circle 1s linear infinite +} + +@-webkit-keyframes moe-Circle { + 0% { + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg) + } + 25% { + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg) + } + 50% { + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg) + } + 75% { + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg) + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg) + } +} + +@keyframes moe-Circle { + 0% { + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg) + } + 25% { + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg) + } + 50% { + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg) + } + 75% { + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg) + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg) + } +} + +/* + * 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); +} diff --git a/package.json b/package.json index c9fab42..5c35f43 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/scripts/build-css.js b/scripts/build-css.js new file mode 100644 index 0000000..b07312b --- /dev/null +++ b/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); +} diff --git a/src/css/base.css b/src/css/base.css new file mode 100644 index 0000000..03e0e71 --- /dev/null +++ b/src/css/base.css @@ -0,0 +1,1561 @@ +/* + * MoePlayer 皮肤基础样式(base.css) + * 功能：三个皮肤共用的全部结构样式 + 默认主题变量 + * 说明：所有颜色/主题相关值均为 CSS 自定义属性(--moe-*),定义在 .moeplayer 作用域上 + * (右键菜单 .moeplayer-menu、错误框 .moeplayer-error 会被挂载到 body 下,故一并定义) + * 各主题(src/css/themes/*.css)只需覆盖这些变量即可换肤 + * 图标：全部使用 SVG data-URI + CSS mask 实现,颜色跟随 --moe-icon-color,换肤零成本 + * 本文件不单独使用,由 scripts/build-css.js 与各主题拼接生成最终产物 + */ + +/*======================== 主题变量(默认值即默认皮肤) ========================*/ +.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-progress-play: var(--moe-accent); + --moe-slider-color: var(--moe-accent); + /* 音量条:轨道/已音量/面板背景 */ + --moe-volume-bg: rgba(255,255,255,.25); + --moe-volume-play: var(--moe-accent); + --moe-volume-panel-bg: rgba(0,0,0,.85); + /* 弹层(倍速/字幕/清晰度列表等) */ + --moe-popup-bg: rgba(0,0,0,.85); + --moe-popup-text: #FFF; + --moe-popup-hover: var(--moe-accent); + --moe-popup-shadow: 0 4px 16px rgba(0,0,0,.3); + /* 浮层提示(message/tip/prompt 等,浮于视频上方,不随浅色主题变化) */ + --moe-overlay-bg: rgba(0,0,0,.85); + --moe-overlay-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); + /* 圆角与字体 */ + --moe-radius: 6px; + --moe-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; + /* 尺寸 */ + --moe-bar-height: 48px; + --moe-bar-height-full: 70px; + --moe-btn-size: 48px; + --moe-btn-size-full: 70px; + --moe-icon-size: 22px; + --moe-icon-size-full: 30px; +} + +/*======================== 全局错误提示框 ========================*/ +.moeplayer-error{ + position: fixed; + z-index: 9999999; + left: 10px; + bottom: 10px; + width: auto; + height: 38px; + line-height: 38px; + padding: 0 .85rem; + background: var(--moe-overlay-bg); + border-radius: var(--moe-radius); + color: var(--moe-overlay-text); + font-size: 14px; + font-family: var(--moe-font-family); + white-space: nowrap; +} + +/*======================== 播放器容器 ========================*/ +.moeplayer{ + width: 100%; + height: 100%; + float: left; + background: #000; + overflow: hidden; + font-family: var(--moe-font-family); +} +.moeplayer button, .moeplayer input{ + font-family: inherit; +} +.moeplayer .moe-main.moe-nocursor{ + cursor: none; +} +.moeplayer-smallwindow{ + position: fixed; + z-index: 9999999; + width: 420px; + max-width: 100%; + height: 266px; + right: 10px; + bottom: 10px; +} +.moeplayer .moe-main{ + width: 100%; + height: 100%; + overflow: hidden; + background: #000; + position: relative; +} +.moeplayer .moe-main .moe-video{ + width: 100%; + height: 100%; + overflow: hidden; + position:absolute; + z-index: 1; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.moeplayer .moe-main .moe-video video,.moeplayer .moe-main .moe-video canvas{ + width: 100%; + height: 100%; +} +.moeplayer .moe-main .moe-error{ + width: 100%; + height: 80px; + line-height: 35px; + text-align: center; + color: var(--moe-overlay-text); + position:absolute; + z-index: 70; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + overflow: hidden; +} +/*logo:默认无品牌水印,用户通过 logo 配置项传入自定义图片(JS 会插入 img)*/ +.moeplayer .moe-main .moe-logo{ + position:absolute; + right: 20px; + top:20px; + z-index: 400; + background: none; +} +/*加载动画:CSS 圆弧旋转,不再使用图片*/ +.moeplayer .moe-main .moe-loading{ + position:absolute; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + z-index: 80; + width: 46px; + height: 46px; + box-sizing: border-box; + border-radius: 50%; + border: 3px solid rgba(255,255,255,.3); + border-top-color: #FFF; + animation: moe-Circle .8s linear infinite; + -webkit-animation: moe-Circle .8s linear infinite +} +/*中央大播放键:圆形半透明底 + 白色播放三角,hover 变主题色*/ +.moeplayer .moe-main .moe-center-play{ + background: rgba(0,0,0,.45); + border: none; + border-radius: 50%; + box-sizing:border-box; + width: 80px; + height: 80px; + position: absolute; + display: none; + z-index: 90; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + cursor: pointer; + transition: background-color .2s, width .2s, height .2s; +} +.moeplayer .moe-main .moe-center-play::before{ + content: ''; + position: absolute; + inset: 0; + background-color: #FFF; + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7.5,6.2v11.6c0,.8,.9,1.3,1.6,.9l9.1-5.8c.6-.4,.6-1.4,0-1.8l-9.1-5.8c-.7-.4-1.6,.1-1.6,.9z'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7.5,6.2v11.6c0,.8,.9,1.3,1.6,.9l9.1-5.8c.6-.4,.6-1.4,0-1.8l-9.1-5.8c-.7-.4-1.6,.1-1.6,.9z'/%3E%3C/svg%3E"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: 50% 50%; + mask-position: 50% 50%; + -webkit-mask-size: 46%; + mask-size: 46%; +} +.moeplayer .moe-main.moe-main-full .moe-center-play{ + width: 100px; + height: 100px; +} +.moeplayer .moe-main .moe-center-play:hover{ + width: 100px; + height: 100px; + background: var(--moe-accent); +} +.moeplayer .moe-main.moe-main-full .moe-center-play:hover{ + width: 120px; + height: 120px; +} +/*缓冲动画:CSS 圆弧旋转*/ +.moeplayer .moe-main .moe-buffer{ + width: 38px; + height: 38px; + box-sizing: border-box; + border-radius: 50%; + border: 3px solid rgba(255,255,255,.25); + border-top-color: var(--moe-accent); + position: absolute; + z-index: 100; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + display: none; + animation: moe-Circle .8s linear infinite; + -webkit-animation: moe-Circle .8s linear infinite +} +.moeplayer .moe-main .moe-message{ + position: absolute; + z-index: 240; + left:5px; + bottom: 78px; + padding: 0 1rem; + line-height: 30px; + height: 30px; + width: auto; + min-width: 1px; + border-radius: var(--moe-radius); + background: var(--moe-overlay-bg); + font-size: 14px; + color: var(--moe-overlay-text); + display: none; + white-space:nowrap; +} +.moeplayer .moe-main .moe-message-right{ + left:auto; + right: 5px; +} +.moeplayer .moe-main.moe-main-full .moe-message{ + font-size: 18px; + bottom: 100px; +} +.moeplayer .moe-main .moe-tip{ + width: auto; + height: auto; + position: absolute; + z-index: 230; + display: none; + margin-bottom: 1px; +} +.moeplayer .moe-main .moe-tip .moe-content{ + width: auto; + height: auto; + white-space: nowrap; + min-width: 1px; + background: var(--moe-overlay-bg); + font-size: 14px; + color: var(--moe-overlay-text); + line-height: 32px; + height: 32px; + padding: 0 15px; +} +.moeplayer .moe-main .moe-tip .moe-content-float-auto{ + border-radius: var(--moe-radius); + margin: auto; +} +.moeplayer .moe-main .moe-tip .moe-content-float-left{ + border-radius: var(--moe-radius); + float: left; +} +.moeplayer .moe-main.moe-main-full .moe-tip .moe-content{ + font-size: 18px; +} +.moeplayer .moe-main .moe-tip .moe-triangle{ + width: 0px; + height: 0px; +} +.moeplayer .moe-main .moe-tip .moe-triangle-auto{ + border-left: 8px solid transparent; + border-top: 8px solid var(--moe-overlay-bg); + border-right: 8px solid transparent; + margin: auto; +} +.moeplayer .moe-main .moe-tip .moe-triangle-left{ + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 8px solid var(--moe-overlay-bg); + float: left; + margin-top: 10px; +} +/*预览(缩略图)*/ +.moeplayer .moe-main .moe-preview{ + position: absolute; + z-index: 210; + width: 100%; + left:0; + bottom: 64px; + overflow: hidden; + display: none; +} +.moeplayer .moe-main.moe-main-full .moe-preview{ + bottom: 86px; +} +.moeplayer .moe-main .moe-preview-load-img{ + position: absolute; + z-index: 210; + top:110%; +} +.moeplayer .moe-main .moe-preview .moe-preview-bg{ + position: absolute; + z-index: 1; + top:0; + float: left; + transition: .2s; +} +.moeplayer .moe-main .moe-preview .moe-preview-bg .moe-preview-img{ + background-repeat: no-repeat ; + float: left; +} +.moeplayer .moe-main .moe-preview .moe-preview-frame{ + position: absolute; + z-index: 2; + top:0; + left:-1000px; + border:4px solid var(--moe-accent); + border-radius: 2px; + box-sizing:content-box; +} +.moeplayer .moe-main .moe-prompt-words{ + position: absolute; + z-index: 220; + width: 213px; + line-height: 23px; + font-size: 14px; + color: var(--moe-overlay-text); + background: var(--moe-overlay-bg); + overflow: hidden; + display: none; + margin-bottom: 10px; + border-radius: var(--moe-radius); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .2s; + animation-duration: .2s; + -webkit-animation-name: moe-bounceIn; + animation-name: moe-bounceIn; +} +.moeplayer .moe-main .moe-prompt-words .moe-prompt-content{ + padding: 5px; +} +.moeplayer .moe-main .moe-layer{ + position: absolute; + z-index: 101; +} +.moeplayer .moe-main .moe-tempTime{ + position: absolute; + z-index: 20; + left:10px; + bottom: 5px; + display: none; + font-size: 14px; + line-height: 28px; + color: var(--moe-overlay-text); +} + +/*======================== 关于 ========================*/ +.moeplayer .moe-main .moe-about{ + position: absolute; + z-index: 200; + width: 50%; + max-width: 600px; + min-width: 400px; + left: 1rem; + top: 1rem; + background: var(--moe-overlay-bg); + border-radius: var(--moe-radius); + padding: 1rem 0; + display: none; +} +.moeplayer .moe-main .moe-about ul{ + padding: 0; + margin: 0; +} +.moeplayer .moe-main .moe-about ul li{ + list-style:none; + color: var(--moe-overlay-text); + font-size: 12px; + line-height: 18px; + height: 18px; + padding: 0; + margin: 0; +} +.moeplayer .moe-main .moe-about ul li .moe-about-title{ + width: 100px; + text-align: right; + float: left; + padding-right: .5rem; +} +.moeplayer .moe-main .moe-about ul li .moe-about-content{ + width: auto; + float: left; +} +.moeplayer .moe-main .moe-about .moe-about-bar{ + position: absolute; + z-index: 1; + top: 0; + right: 0; + width: 96px; +} +.moeplayer .moe-main.moe-main-full .moe-about .moe-about-bar{ + width: 140px; +} +/*关于-复制按钮图标*/ +.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-copy{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5,15H4a2,2,0,0,1-2-2V4a2,2,0,0,1,2-2h9a2,2,0,0,1,2,2v1'/%3E%3C/svg%3E"); +} +/*关于-关闭按钮图标*/ +.moeplayer .moe-main .moe-about .moe-about-bar .moe-btn-about-close{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6,6l12,12M18,6L6,18'/%3E%3C/svg%3E"); +} + +/*======================== 截图显示容器 ========================*/ +.moeplayer .moe-main .moe-screenshot{ + position: absolute; + z-index: 220; + width: auto; + height: 144px; + margin: auto !important; + top: 0; + bottom: 0; + right: 55px; + display: none; +} +.moeplayer .moe-main.moe-main-full .moe-screenshot{ + height: 210px; + right: 77px; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-img{ + position: absolute; + z-index: 1; + width: 100%; + height: 100%; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-img img{ + height: 100%; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar{ + position: absolute; + z-index: 1; + width: 100%; + height: 36px; + bottom: 5px; + text-align: center; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn{ + display: inline-block; + overflow: hidden; + border: 0px solid transparent; + border-radius: var(--moe-radius); + vertical-align: middle; + text-align: center; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + line-height: 30px; + padding: 0px 15px; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: #fff; + margin: 0 5px; + transition: filter .2s, color .2s, background-color .2s; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn:hover{ + filter: brightness(1.15); +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-btn:focus{ + outline:0; +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-down{ + background-color: var(--moe-accent); +} +.moeplayer .moe-main .moe-screenshot .moe-screenshot-bar .moe-screenshot-close{ + background-color: rgba(96,96,96,.9); + color: #fff; +} + +/*======================== 广告 ========================*/ +.moeplayer .moe-main .moe-yytf{ + position: absolute; + z-index: 800; + width: 100%; + height: 100%; + left: 0px; + top: 0px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-front-link{ + width: 100%; + height: 100%; + display: none; + cursor: pointer; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-front-picture{ + width: 100%; + height: 100%; + background: #000; + display: none; + text-align: center; + line-height: 100%; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-front-picture img{ + max-width: 100%; + max-height: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-top{ + position: absolute; + z-index: 3; + top: 10px; + right: 10px; +} + +.moeplayer .moe-main .moe-yytf .moe-yytf-top div{ + float: right; + margin-left: 10px; + font-size: 14px; + border-radius: 15px; + background: var(--moe-overlay-bg); + padding: 0px 10px; + line-height: 30px; + height: 30px; + color: var(--moe-overlay-text); +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-top div{ + font-size: 18px; + border-radius: 20px; + line-height: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-top .moe-yytf-closetime{ + display: none; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-top .moe-yytf-closead{ + cursor: pointer; + display: none; +} + +/*显示广告时的底部内容*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom{ + position: absolute; + z-index: 3; + bottom: 10px; + right: 10px; +} +/*显示广告时的底部按钮-共用(圆形半透明底 + SVG 图标)*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn{ + background-color: var(--moe-overlay-bg); + border: none; + outline: none; + width: 30px; + height: 30px; + cursor: pointer; + border-radius: 50%; + position: relative; + padding: 0; + transition: background-color .2s; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-btn{ + width: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn::before{ + content: ''; + position: absolute; + inset: 0; + background-color: #FFF; + -webkit-mask-image: var(--moe-icon); + mask-image: var(--moe-icon); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: 16px; + mask-size: 16px; + transition: background-color .2s; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-btn::before{ + -webkit-mask-size: 20px; + mask-size: 20px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-btn:hover::before{ + background-color: var(--moe-icon-hover); +} +/*显示广告时的静音按钮*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit{ + float: right; + width: 30px; + height: 30px; + margin-left: 10px; + overflow: hidden; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit{ + width: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-muted{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9a4.2,4.2,0,0,1,0,6'/%3E%3Cpath d='M18.4,6.6a7.6,7.6,0,0,1,0,10.8'/%3E%3C/svg%3E"); +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-mutedandexit .moe-yytf-mutedandexit-exitmuted{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9.5l5.5,5.5M21.5,9.5L16,15'/%3E%3C/svg%3E"); +} +/*显示广告时的全屏按钮*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit{ + float: right; + width: 30px; + height: 30px; + margin-left: 10px; + overflow: hidden; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit{ + width: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-full{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5,4H4v4.5M15.5,4H20v4.5M8.5,20H4v-4.5M15.5,20h4.5v-4.5'/%3E%3C/svg%3E"); +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-fullandexit .moe-yytf-fullandexit-exitfull{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,8.5h4.5V4M20,8.5h-4.5V4M4,15.5h4.5V20M20,15.5h-4.5V20'/%3E%3C/svg%3E"); +} +/*广告查看详情按钮*/ +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-details{ + float: right; + font-size: 14px; + border-radius: 15px; + background: var(--moe-overlay-bg); + padding: 0 10px; + color: var(--moe-overlay-text); + line-height: 30px; + height: 30px; +} +.moeplayer .moe-main.moe-main-full .moe-yytf .moe-yytf-bottom .moe-yytf-details{ + font-size: 18px; + border-radius: 20px; + line-height: 40px; + height: 40px; +} +.moeplayer .moe-main .moe-yytf .moe-yytf-bottom .moe-yytf-details a{ + color: var(--moe-overlay-text); + text-decoration: none; +} +/*暂停广告容器*/ +.moeplayer .moe-main .moe-pause-yytf{ + display: none; + position:absolute; + z-index: 800; + max-width: 100%; + max-height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.moeplayer .moe-main .moe-pause-yytf img{ + max-width: 100%; + max-height: 100%; +} +/*暂停广告关闭按钮(圆形底 + × 图标)*/ +.moeplayer .moe-main .moe-pause-close{ + position:absolute; + z-index: 1; + right: -15px; + top:-15px; + width: 30px; + height: 30px; + background-color: var(--moe-overlay-bg); + border: none; + outline: none; + border-radius: 50%; + cursor: pointer; + padding: 0; + transition: background-color .2s; +} +.moeplayer .moe-main .moe-pause-close::before{ + content: ''; + position: absolute; + inset: 0; + background-color: #FFF; + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7,7l10,10M17,7L7,17'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7,7l10,10M17,7L7,17'/%3E%3C/svg%3E"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: 14px; + mask-size: 14px; +} +.moeplayer .moe-main .moe-pause-close:hover{ + background-color: var(--moe-accent); +} + +/*======================== 右键菜单(挂载在 body 下) ========================*/ +.moeplayer-menu{ + width:120px; + background: var(--moe-menu-bg); + position: absolute; + z-index: 9000; + font-size:14px; + font-family: var(--moe-font-family); + border: 1px solid var(--moe-menu-border); + border-radius: var(--moe-radius); + box-shadow: var(--moe-popup-shadow); + padding: 4px 0; + display: none; +} +.moeplayer-menu .moe-li{ + color: var(--moe-menu-text); + line-height: 32px; + padding: 0 0 0 10px; + cursor: pointer; + transition: background-color .15s, color .15s; +} +.moeplayer-menu .moe-li:hover{ + background: rgba(127,127,127,.18); + color: var(--moe-menu-link); +} +.moeplayer-menu .moe-li a{ + color: var(--moe-menu-link); + text-decoration: none; +} +.moeplayer-menu .moe-underline{ + border-bottom: 1px solid var(--moe-menu-border); +} + +/*======================== 控制栏 ========================*/ +.moeplayer .moe-main .moe-bar{ + position:absolute; + z-index: 260; + left:0px; + bottom:0px; + width: 100%; + height: var(--moe-bar-height); + background: var(--moe-bar-bg); + transition: 0.2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar{ + height: var(--moe-bar-height-full); +} +.moeplayer .moe-main .moe-bar.moe-bar-out{ + bottom: -50px; + transition: 0.2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar.moe-bar-out{ + bottom: -80px; + transition: 0.2s; +} + +/*======================== 按钮公用样式(SVG mask 图标) ========================*/ +.moeplayer .moe-main .moe-bar-btn{ + background-color: transparent; + border: none; + outline: none; + width: var(--moe-btn-size); + height: var(--moe-btn-size); + cursor: pointer; + position: relative; + padding: 0; + transition: transform .2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar-btn{ + width: var(--moe-btn-size-full); + height: var(--moe-btn-size-full); +} +/*图标层:颜色跟随 --moe-icon-color,形状由每个按钮的 --moe-icon 决定*/ +.moeplayer .moe-main .moe-bar-btn::before{ + content: ''; + position: absolute; + inset: 0; + background-color: var(--moe-icon-color); + -webkit-mask-image: var(--moe-icon); + mask-image: var(--moe-icon); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: var(--moe-icon-size); + mask-size: var(--moe-icon-size); + transition: background-color .2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar-btn::before{ + -webkit-mask-size: var(--moe-icon-size-full); + mask-size: var(--moe-icon-size-full); +} +.moeplayer .moe-main .moe-bar .moe-bar-btn:hover::before, +.moeplayer .moe-main .moe-right-bar .moe-bar-btn:hover::before, +.moeplayer .moe-main .moe-about .moe-bar-btn:hover::before{ + background-color: var(--moe-icon-hover); +} + +/*======================== 按钮图标定义 ========================*/ +/*播放*/ +.moeplayer .moe-main .moe-btn-play{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8,5.2v13.6c0,.8,.9,1.3,1.6,.9l10.2-6.8c.6-.4,.6-1.4,0-1.8L9.6,4.3c-.7-.4-1.6,.1-1.6,.9z'/%3E%3C/svg%3E"); +} +/*暂停*/ +.moeplayer .moe-main .moe-btn-pause{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='6.8' y='5' width='3.6' height='14' rx='1'/%3E%3Crect x='13.6' y='5' width='3.6' height='14' rx='1'/%3E%3C/svg%3E"); +} +/*刷新/重播*/ +.moeplayer .moe-main .moe-btn-refresh{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2,14.9a8.5,8.5,0,1,1-2-8.4L20.5,9'/%3E%3Cpolyline points='20.5,3.8,20.5,9,15.3,9'/%3E%3C/svg%3E"); +} +/*音量(非静音)*/ +.moeplayer .moe-main .moe-btn-muted{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9a4.2,4.2,0,0,1,0,6'/%3E%3Cpath d='M18.4,6.6a7.6,7.6,0,0,1,0,10.8'/%3E%3C/svg%3E"); +} +/*音量(已静音)*/ +.moeplayer .moe-main .moe-btn-exitmuted{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,9.5v5h3.5L13,19V5L7.5,9.5H4z' fill='black' stroke='none'/%3E%3Cpath d='M16,9.5l5.5,5.5M21.5,9.5L16,15'/%3E%3C/svg%3E"); +} +/*全屏*/ +.moeplayer .moe-main .moe-btn-full{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5,4H4v4.5M15.5,4H20v4.5M8.5,20H4v-4.5M15.5,20h4.5v-4.5'/%3E%3C/svg%3E"); +} +/*退出全屏*/ +.moeplayer .moe-main .moe-btn-exitfull{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,8.5h4.5V4M20,8.5h-4.5V4M4,15.5h4.5V20M20,15.5h-4.5V20'/%3E%3C/svg%3E"); +} +/*网页全屏*/ +.moeplayer .moe-main .moe-btn-webfull{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M10,14l4.5-4.5M14.5,13.2V9.5H10.8'/%3E%3C/svg%3E"); +} +/*退出网页全屏*/ +.moeplayer .moe-main .moe-btn-exitwebfull{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M14.5,9.5L10,14M10,10.3V14h3.7'/%3E%3C/svg%3E"); +} +/*剧场模式*/ +.moeplayer .moe-main .moe-btn-theatre{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Cpath d='M9,10l-2,2,2,2M15,10l2,2-2,2'/%3E%3C/svg%3E"); +} +/*退出剧场模式*/ +.moeplayer .moe-main .moe-btn-exittheatre{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Cpath d='M7,10l2,2-2,2M17,10l-2,2,2,2'/%3E%3C/svg%3E"); +} +/*下一集*/ +.moeplayer .moe-main .moe-bar-next{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6,5.7v12.6c0,.8,.9,1.2,1.5,.8l7.6-6.3c.5-.4,.5-1.2,0-1.6L7.5,4.9c-.6-.4-1.5,0-1.5,.8z'/%3E%3Crect x='16.4' y='5.5' width='2.6' height='13' rx='1'/%3E%3C/svg%3E"); +} +/*截图*/ +.moeplayer .moe-main .moe-btn-screenshot{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4,8h2.6L8.8,5.5h6.4L17.4,8H20a1,1,0,0,1,1,1v9a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V9a1,1,0,0,1,1-1z'/%3E%3Ccircle cx='12' cy='13' r='3.2'/%3E%3C/svg%3E"); +} +/*开启循环(当前处于循环状态)*/ +.moeplayer .moe-main .moe-btn-loop-open{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5,4.5L20,8l-3.5,3.5'/%3E%3Cpath d='M20,8H9a4.5,4.5,0,0,0-4.5,4.5V13'/%3E%3Cpath d='M7.5,19.5L4,16l3.5-3.5'/%3E%3Cpath d='M4,16h11a4.5,4.5,0,0,0,4.5-4.5V11'/%3E%3C/svg%3E"); +} +/*关闭循环(当前未循环,循环箭头中带 1)*/ +.moeplayer .moe-main .moe-btn-loop-close{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5,4.5L20,8l-3.5,3.5'/%3E%3Cpath d='M20,8H9a4.5,4.5,0,0,0-4.5,4.5V13'/%3E%3Cpath d='M7.5,19.5L4,16l3.5-3.5'/%3E%3Cpath d='M4,16h11a4.5,4.5,0,0,0,4.5-4.5V11'/%3E%3Cpath d='M12.5,10v4M11.4,10.7l1.1-.7' stroke-width='1.6'/%3E%3C/svg%3E"); +} +/*开启小窗口*/ +.moeplayer .moe-main .moe-btn-smallwindows-open{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Crect x='12' y='12' width='6.5' height='4.5' rx='1' fill='black' stroke='none'/%3E%3C/svg%3E"); +} +/*关闭小窗口*/ +.moeplayer .moe-main .moe-btn-smallwindows-close{ + --moe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Crect x='12' y='12' width='6.5' height='4.5' rx='1' stroke-width='1.5'/%3E%3C/svg%3E"); +} + +/*======================== 播放暂停按钮组 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-playandpause{ + float: left; +} + +/*======================== 返回直播按钮 ========================*/ +.moeplayer .moe-main .moe-bar .moe-btn-backlive{ + float: left; + font-size: 16px; + line-height: 28px; + border-radius: var(--moe-radius); + margin: 10px; + border: 0px; + background: var(--moe-accent); + color: #FFF; + cursor: pointer; + padding: 0 8px; + transition: filter .2s; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-btn-backlive{ + font-size: 18px; + line-height: 36px; + margin: 17px 10px; +} +.moeplayer .moe-main .moe-bar .moe-btn-backlive:hover{ + filter: brightness(1.15); +} +.moeplayer .moe-main .moe-bar .moe-btn-backlive:focus{ + outline:0; +} +/*======================== 全屏按钮组 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-fullandexit{ + float: right; +} +.moeplayer .moe-main .moe-bar .moe-bar-fullandexit .moe-btn-exitfull{ + display: none; +} + +/*======================== 网页全屏按钮组 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit{ + float: right; +} +.moeplayer .moe-main .moe-bar .moe-bar-webfullandexit .moe-btn-exitwebfull{ + display: none; +} + +/*======================== 剧场模式按钮组 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit{ + float: right; +} +.moeplayer .moe-main .moe-bar .moe-bar-theatreandexit .moe-btn-exittheatre{ + display: none; +} + +/*======================== 播放速度/字幕/清晰度(文字按钮) ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box, +.moeplayer .moe-main .moe-bar .moe-bar-track-box, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box{ + float: right; + height: var(--moe-bar-height); + line-height: var(--moe-bar-height); + position: relative; + cursor: pointer; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playbackrate-box, +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-track-box, +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-definition-box{ + height: var(--moe-bar-height-full); + line-height: var(--moe-bar-height-full); +} +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate, +.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition{ + height: 100%; + padding: 0 10px; + white-space:nowrap; + font-size: 14px; + color: var(--moe-text-color); + transition: color .2s; + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate, +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-track-box .moe-bar-track, +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-definition-box .moe-bar-definition{ + font-size: 18px; +} +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate:hover, +.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track:hover, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition:hover{ + color: var(--moe-text-hover); +} +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box .moe-bar-playbackrate-bg-box, +.moeplayer .moe-main .moe-bar .moe-bar-track-box .moe-bar-track-bg-box, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box .moe-bar-definition-bg-box{ + width: auto; + height: auto; +} +.moeplayer .moe-main .moe-bar .moe-bar-playbackrate-box:hover .moe-bar-playbackrate-bg-box, +.moeplayer .moe-main .moe-bar .moe-bar-track-box:hover .moe-bar-track-bg-box, +.moeplayer .moe-main .moe-bar .moe-bar-definition-box:hover .moe-bar-definition-bg-box{ + display: block; +} +/*列表切换弹层*/ +.moeplayer .moe-main .moe-bar .moe-list-bg-box { + background: rgba(0,0,0,.001); + position: absolute; + z-index: 1; + bottom: 46px; + display: none; + -webkit-animation-duration: .2s; + animation-duration: .2s; + -webkit-animation-name: moe-bounceIn; + animation-name: moe-bounceIn; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box { + bottom: 68px; +} +.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg{ + background: var(--moe-popup-bg); + float: left; + border-radius: var(--moe-radius); + box-shadow: var(--moe-popup-shadow); + padding: 6px; + margin-bottom: 10px; +} +.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p{ + width: 100%; + float: left; + line-height: 32px; + color: var(--moe-popup-text); + text-align: center; + font-size: 14px; + background-color: rgba(0,0,0,0); + border: 0px; + border-radius: 4px; + white-space:nowrap; + cursor: pointer; + transition: color .15s, background-color .15s; +} +.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p:hover{ + color: var(--moe-popup-hover); + background: rgba(127,127,127,.15); +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p{ + font-size: 18px; + line-height: 36px; +} +.moeplayer .moe-main .moe-bar .moe-list-bg-box .moe-list-bg .moe-list-p-focus{ + color: var(--moe-accent); +} +/*下一集按钮*/ +.moeplayer .moe-main .moe-bar .moe-bar-next{ + float: left; +} + +/*======================== 进度栏 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-progress{ + width: 100%; + position:absolute; + z-index: 1; + height: 12px; + top:-11px; + transition: 0.2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg{ + width: 100%; + background: var(--moe-progress-bg); + margin-top: 4px; + overflow: hidden; + height: 4px; + border-radius: 2px; + transition: .2s; + cursor: pointer; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg{ + height: 6px; + margin-top: 3px; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg .moe-bar-progress-load, +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg .moe-bar-progress-play, +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-bg .moe-bar-progress-mouseline{ + height: 6px; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-load{ + float: left; + width: 0px; + background: var(--moe-progress-buffer); + height: 4px; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-play{ + width: 0px; + background: var(--moe-progress-play); + position: absolute; + z-index: 1; + height: 4px; + transition: .2s; + cursor: pointer; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-mouseline{ + width: 2px; + background: rgba(255,255,255,.6); + position: absolute; + z-index: 2; + display: none; + height: 4px; + cursor: pointer; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg .moe-bar-progress-prompt{ + background: #FFF; + position: absolute; + z-index: 3; + border-radius: 50%; + width: 10px; + height: 10px; + top:1px; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-slider{ + border-radius: 50%; + overflow: hidden; + position: relative; + float: left; + z-index: 4; + left: 0px; + cursor: pointer; + width: 14px; + height: 14px; + top: -9px; + background: var(--moe-slider-color); + box-shadow: 0 1px 4px rgba(0,0,0,.5); + transition: transform .15s, background-color .15s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress:hover .moe-bar-progress-slider{ + transform: scale(1.25); +} +.moeplayer .moe-main .moe-bar .moe-bar-progress .moe-bar-progress-bg:hover .moe-bar-progress-mouseline{ + display: block; +} +/*控制栏隐藏时的细进度条*/ +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out{ + height: 2px; + top:-2px; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-load,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg .moe-bar-progress-play{ + height: 2px; + margin-top: 0; + border-radius: 0; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-slider{ + width: 14px; + height: 2px; + top: -2px; + box-shadow: none; + background: rgba(255,255,255,0); + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-out .moe-bar-progress-bg .moe-bar-progress-prompt{ + height: 2px; + top: 0; + border-radius: 0; + transition: .2s; +} +.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-slider-move .moe-bar-progress-play,.moeplayer .moe-main .moe-bar .moe-bar-progress.moe-bar-progress-slider-move .moe-bar-progress-slider{ + transition: 0s; +} + +/*======================== 音量调节栏 ========================*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox{ + float: right; + width: var(--moe-btn-size); + overflow-x: hidden; +} +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox{ + width: var(--moe-btn-size-full); +} +/*默认状态-音量调节总外框*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume{ + width: var(--moe-btn-size); + height: 215px; + background: rgba(0,0,0,.01); + position: absolute; + z-index: 1; + bottom: 46px; + display: none; + overflow: hidden; +} +/*全屏状态-音量调节总外框*/ +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-bar-volume{ + width: var(--moe-btn-size-full); + bottom: 68px; +} +/*默认状态-音量调节总外框-鼠标经过时样式*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox:hover .moe-bar-volume{ + display: block; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .1s; + animation-duration: .1s; + -webkit-animation-name: moe-bounceIn; + animation-name: moe-bounceIn; +} +/*共用状态-音量调节内部外框*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volumex{ + width: 100%; + height: 200px; + float: left; + background: var(--moe-volume-panel-bg); + border-radius: var(--moe-radius); + box-shadow: var(--moe-popup-shadow); +} +/*共用状态-音量调节顶部文字*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-txt{ + width: 100%; + height: 40px; + line-height: 40px; + color: var(--moe-popup-text); + text-align: center; + font-size: 1rem; + float: left; + overflow: hidden; + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} +/*共用状态-音量调节背景色*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-bg{ + width: 6px; + height: 140px; + background: var(--moe-volume-bg); + border-radius: 3px; + overflow: hidden; + cursor: pointer; + margin: auto; +} +/*共用状态-音量调节前景色*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-bg .moe-bar-volume-pp{ + width: 6px; + height: 140px; + background: var(--moe-volume-play); + margin-top: 140px; +} +/*共用状态-音量调节拖动小按钮*/ +.moeplayer .moe-main .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-slider{ + width: 12px; + height: 12px; + background: #FFF; + border-radius: 50%; + overflow: hidden; + box-shadow: 0 1px 4px rgba(0,0,0,.5); + position: absolute; + z-index: 1; + top: 0px; + left: 18px; + cursor: pointer; +} +/*全屏状态-音量调节拖动小按钮*/ +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-volumebox .moe-bar-volume .moe-bar-volume-slider{ + left: 29px; +} +/*默认状态-显示时间*/ +.moeplayer .moe-main .moe-bar .moe-bar-time{ + float: left; + line-height: var(--moe-bar-height); + font-size: 14px; + padding: 0 4px; + color: var(--moe-text-color); + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} +/*全屏状态-显示时间*/ +.moeplayer .moe-main.moe-main-full .moe-bar .moe-bar-time{ + float: left; + line-height: var(--moe-bar-height-full); + font-size: 18px; + color: var(--moe-text-color); +} + +/*======================== 右侧控制栏 ========================*/ +.moeplayer .moe-main .moe-right-bar{ + position: absolute; + z-index: 260; + top: 0; + right: 2px; + bottom: 0; + margin: auto !important; + width: var(--moe-btn-size); + height: 144px; + background: var(--moe-right-bar-bg); + border-radius: var(--moe-radius); + transition: .2s; +} +.moeplayer .moe-main .moe-right-bar-hide{ + right: -48px; + transition: .2s; +} +.moeplayer .moe-main.moe-main-full .moe-right-bar{ + width: var(--moe-btn-size-full); + height: 210px; +} +.moeplayer .moe-main.moe-main-full .moe-right-bar-hide{ + right: -70px; + transition: .2s; +} +/*截图按钮*/ +.moeplayer .moe-main .moe-right-bar .moe-btn-screenshot{ + float: left; +} +/*小窗口按钮组*/ +.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows{ + float: left; +} +.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows button{ + float: left; +} +.moeplayer .moe-main .moe-right-bar .moe-right-bar-smallwindows .moe-btn-smallwindows-close{ + display: none; +} +/*循环按钮组*/ +.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop{ + float: left; +} +.moeplayer .moe-main .moe-right-bar .moe-right-bar-loop .moe-btn-loop-close{ + display: none; +} + +/*======================== 顶部显示栏 ========================*/ +.moeplayer .moe-main .moe-top-bar{ + position: absolute; + z-index: 260; + top: -36px; + width: 100%; + height: 36px; + background: var(--moe-top-bar-bg); + transition: .2s; +} +.moeplayer .moe-main .moe-top-bar-hide{ + top: -36px; + transition: .2s; +} +.moeplayer .moe-main.moe-main-full .moe-top-bar{ + top: 0; +} +.moeplayer .moe-main.moe-main-full .moe-top-bar-hide{ + top: -36px; + transition: .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom{ + position: absolute; + z-index: 260; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container{ + float: left; + margin-left: 10px; + margin-top: 9px; + cursor: pointer; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left{ + float: left; + width: 20px; + height: 18px; + border: 1px solid var(--moe-top-bar-text); + box-sizing:content-box; + transition: border-color .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-left, +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-left{ + border-color: var(--moe-accent); +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-left div, +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-left div{ + background: var(--moe-accent); +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-right{ + float: left; + font-size: 14px; + color: var(--moe-top-bar-text); + padding-left: 5px; + transition: color .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container:hover .moe-top-bar-zoom-right, +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container.moe-top-bar-zoom-container-focus .moe-top-bar-zoom-right{ + color: var(--moe-accent); +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-50{ + width: 50%; + height: 50%; + background: var(--moe-top-bar-text); + margin: 4.5px 25%; + transition: background .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-75{ + width: 75%; + height: 50%; + background: var(--moe-top-bar-text); + margin: 4.5px 12.5%; + transition: background .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-zoom .moe-top-bar-zoom-container .moe-top-bar-zoom-left .moe-top-bar-zoom-button-100{ + width: 100%; + height: 50%; + background: var(--moe-top-bar-text); + margin: 4.5px 0; + transition: background .2s; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-title{ + position: absolute; + z-index: 1; + top: 0px; + width: 100%; + height: 36px; + line-height: 36px; + text-align: center; + font-size: 18px; + color: var(--moe-top-bar-text); + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} +.moeplayer .moe-main .moe-top-bar .moe-top-bar-time{ + float: right; + height: 36px; + line-height: 36px; + font-size: 14px; + color: var(--moe-top-bar-text); + padding: 0 1rem 0; + -moz-user-select:none; + -webkit-user-select:none; + -ms-user-select:none; + user-select:none; +} + +/*======================== 缓动效果 ========================*/ +.moe-animate { + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .3s; + animation-duration: .3s; +} +.moe-animate-bouncein { + -webkit-animation-name: moe-bounceIn; + animation-name: moe-bounceIn; +} + +@-webkit-keyframes moe-bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5) + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes moe-bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.5); + -ms-transform: scale(.5); + transform: scale(.5); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +.moe-animate-bounceout { + -webkit-animation-name: moe-bounceOut; + animation-name: moe-bounceOut; +} + +@-webkit-keyframes moe-bounceOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5); + } +} + +@keyframes moe-bounceOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5); + } +} +.moe-animate-circle { + animation: moe-Circle 1s linear infinite; + -webkit-animation: moe-Circle 1s linear infinite +} + +@-webkit-keyframes moe-Circle { + 0% { + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg) + } + 25% { + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg) + } + 50% { + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg) + } + 75% { + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg) + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg) + } +} + +@keyframes moe-Circle { + 0% { + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg) + } + 25% { + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg) + } + 50% { + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg) + } + 75% { + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg) + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg) + } +} diff --git a/src/css/themes/default.css b/src/css/themes/default.css new file mode 100644 index 0000000..d28bc25 --- /dev/null +++ b/src/css/themes/default.css @@ -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); +} diff --git a/src/css/themes/ixigua.css b/src/css/themes/ixigua.css new file mode 100644 index 0000000..0dcd4aa --- /dev/null +++ b/src/css/themes/ixigua.css @@ -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); + } +} diff --git a/src/css/themes/red.css b/src/css/themes/red.css new file mode 100644 index 0000000..5d1a8c2 --- /dev/null +++ b/src/css/themes/red.css @@ -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); +}