王阳
ce4b31470c
- media_moeplayer_plugin 接管 mp4/m4v/mov/webm/ogv/m3u8/flv/ts,rank=100 - 播放器资源内打包(moeplayer/ 目录),每页一次加载,多视频多实例 - 管理设置:皮肤(默认/红色/西瓜)、默认宽高 - 中英语言包,兼容 Moodle 3.9+(3.x/4.x)
1597 lines
49 KiB
CSS
1597 lines
49 KiB
CSS
/*
|
|
* 软件名称：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);
|
|
}
|