diff --git a/.gitattributes b/.gitattributes deleted file mode 100644 index bdb0cab..0000000 --- a/.gitattributes +++ /dev/null @@ -1,17 +0,0 @@ -# Auto detect text files and perform LF normalization -* text=auto - -# Custom for Visual Studio -*.cs diff=csharp - -# Standard to msysgit -*.doc diff=astextplain -*.DOC diff=astextplain -*.docx diff=astextplain -*.DOCX diff=astextplain -*.dot diff=astextplain -*.DOT diff=astextplain -*.pdf diff=astextplain -*.PDF diff=astextplain -*.rtf diff=astextplain -*.RTF diff=astextplain diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 96374c4..0000000 --- a/.gitignore +++ /dev/null @@ -1,43 +0,0 @@ -# Windows image file caches -Thumbs.db -ehthumbs.db - -# Folder config file -Desktop.ini - -# Recycle Bin used on file shares -$RECYCLE.BIN/ - -# Windows Installer files -*.cab -*.msi -*.msm -*.msp - -# Windows shortcuts -*.lnk - -# ========================= -# Operating System Files -# ========================= - -# OSX -# ========================= - -.DS_Store -.AppleDouble -.LSOverride - -# Thumbnails -._* - -# Files that might appear on external disk -.Spotlight-V100 -.Trashes - -# Directories potentially created on remote AFP share -.AppleDB -.AppleDesktop -Network Trash Folder -Temporary Items -.apdisk diff --git a/README.MD b/README.MD new file mode 100644 index 0000000..7611e23 --- /dev/null +++ b/README.MD @@ -0,0 +1,223 @@ +MKOnlineMusicPlayer +======== +MKOnlineMusicPlayer 是一款开源的基于 `Meting` 的在线音乐播放器。具有音乐搜索、播放、下载、歌词同步显示、个人网易云音乐播放列表同步等功能。 + +前端界面参照 QQ 音乐网页版进行布局,同时采用了流行的响应式设计,无论是在PC端还是在手机端,均能给您带来原生 app 般的使用体验。 + +> 本项目仅为学习前端的练手之作,请勿用作商业用途,请勿通过本项目下载盗版歌曲资源,否则后果自负! + +### 界面欣赏 +----- +![主界面(电脑端)](https://user-images.githubusercontent.com/16880885/30487091-f7b45980-9a64-11e7-9588-8b6b87ac6763.jpg) + +![播放列表界面(电脑端)](https://user-images.githubusercontent.com/16880885/30487141-1f8ad416-9a65-11e7-960c-a102c47a3d0e.jpg) + +![歌曲搜索与播放](https://user-images.githubusercontent.com/16880885/30487344-c93a0306-9a65-11e7-92f3-552072b1dbce.jpg) + + +### 相关链接 +----- +**在线演示** [http://lab.mkblog.cn/music/](http://lab.mkblog.cn/music/) + +**详细介绍** [http://mkblog.cn/1060/](http://mkblog.cn/1060/) + +**GitHub** [https://github.com/mengkunsoft/MKOnlineMusicPlayer](https://github.com/mengkunsoft/MKOnlineMusicPlayer) + +### 注意事项 +----- +#### 运行环境 +php 5.4+, curl_exec, file_get_contents, json_decode, openssl_encrypt + +#### 兼容性 +本播放器设计支持 IE9及以上的现代浏览器。并且已在 Chrome、firefox、IE11 等浏览器测试使用正常。 + +#### 版权 +本播放器由 [mengkun(https://mkblog.cn)](https://mkblog.cn) 开发,您可以随意修改、使用、转载。使用或转载时`请务必保留出处`,抱拳了各位老铁们! + +#### 歌曲 +播放器中的歌曲来自各大音乐平台,歌曲版权归各大平台享有。请支持正版音乐。 + +#### 其它 +作者很忙,非诚勿扰。欢迎提交 BUG 及好的建议,不欢迎一上来就问一些基础的东西及唠东唠西。 +`如果要提交问题,请务必告知您的网址,否则无法处理` + +### 常见问题 +----- +[请前往 wiki 查阅](https://github.com/mengkunsoft/MKOnlineMusicPlayer/wiki) +`遇到问题请详细阅读以上 wiki,已经进行解答的问题将不再回复!` + +### 开发计划 +----- +- 歌曲音质切换功能 +- IOS 歌曲播放问题 +- 美化歌曲搜索框 + +### 打赏 +----- +- 解决上面这些问题,需要花费很多时间与精力。支持项目继续完善下去,你也可以贡献一份力量! +- 有了打赏,也就会有更新的动力 : ) + + ![](https://ws3.sinaimg.cn/large/006srDtYly1ffqy973ijwj30hk05atam.jpg) + +### 更新日志 +----- +#### v2.41 `2018/3/13` +- 修复 IE 下播放键错位的 BUG +- 修改默认背景为黑色 +- 其它一些细节优化 + +#### v2.4 `2018/3/11` +- 修复网易云音乐无法播放 +- 增加标题栏滚动效果(感谢@lzcykevin) +- 增加歌曲循环播放控制(感谢@yuxizhe) +- 修复百度音乐无法播放 +- 优化连续播放失败的歌曲过多时,自动终止播放。防止卡死 +- 压缩图片素材,限制封面图片尺寸,优化页面加载速度 + +#### v2.32 `2017/9/15` +- 修复播放历史记录歌曲时播放失败的 BUG +- 新增播放歌曲时浏览器标题栏显示相关信息 +- 一些细节的完善 + +#### v2.31 `2017/9/13` +- 优化下载功能,支持直接弹出下载 +- 下载或分享无版权音乐时给出提示 +- 再次降低移动端背景特效内存占用 +- 修复某些手机浏览器列表页右侧菜单按钮下移 BUG +- 升级 Meting 至最新版本 + +#### v2.3 `2017/9/9` +- 全面支持网易云、QQ、虾米、酷狗、百度音乐源切换 +- 移动端歌曲列表支持直接分享、下载歌曲 +- 降低内存占用,解决移动端背景特效卡顿问题 +- 新增对 https 的支持(酷狗、百度音乐源除外) +- 新增运行环境自检功能 +- 优化中等屏幕下显示效果 +- 修复长歌词定位错乱的 BUG +- 修复无法获取自定义专辑封面的 BUG +- 修复移动端无法自动播放下一曲的 BUG +- 修复切换播放列表后滚动条未归位的 BUG +- 修复某些情况下歌词与歌曲不对应的 BUG +- 修复中小屏幕下顶部 tab 激活错乱的 BUG +- 修复搜索分页的 BUG +- 去除超时检测 + +#### v2.21 `2017/5/19` +- 临时修复 API 失效问题 +- 新增歌曲超时检测,播放超时则自动播放下一首 +- 新增设置数据传输方式(GET/POST) +- (这是一个临时版本,虽然解决了一部分API失效的问题,但是还是存在一些问题。剩下的问题将在之后的 v2.3 正式版中解决) + +#### v2.2 `2017/3/26` +- 用户歌单获取时新增加载中动画及遮罩,防止重复加载 +- 修复中等屏幕下鼠标滑过tab边框消失的 BUG +- 修复某些情况下第一句歌词无法渲染的 BUG +- 修复在IE9下音乐无法播放的 BUG +- 更换背景展现方式,整体界面更美观 +- 正在播放和播放历史列表支持一键清空 +- 新增图片加载失败时替换处理 +- 新增小屏幕下为当前显示的tab添加下划线 +- 新增favicon小图标 +- 新增歌曲播放时进度条小点闪烁效果 +- 优化后台数据获取失败时弹出提示 +- 其它的一些细节优化 + +#### v2.1 `2017/3/20` +- 紧急修复部分浏览器下切换歌曲造成无限播放失败循环的 BUG +- 新增点击未加载完的播放列表弹出提示 +- 新增搜索时弹出加载中动画 +- 切换歌曲后进度条自动复位 +- 优化歌曲外链显示方式,方便复制 +- 优化封面图像加载大小 +- 新增无歌词、歌词加载中提示 +- 优化歌词展现方式 + +#### v2.0 Beta `2017/3/18` +- 所有代码均推翻重写,前端界面全新改版 +- 完善对手机端的适配,新支持 IE9~IE11 浏览器 +- 修复 IE11 下点击下载歌曲名字乱码的 BUG +- 新增“正在播放”、“播放历史”列表功能 +- 新增后台自定义播放列表功能,支持多种列表定义模式 +- 新增本地记录用户设置及播放列表功能 +- 进度条支持响应点击事件 + +#### v1.3 `未发布` +- 新增同步用户歌单功能 +- 修复一些已知 BUG +(因逻辑过于混乱,代码过于庞杂,此版本废弃) + +#### v1.2 `未发布` +- 这个版本的存档神秘失踪,我也不记得有哪些改变。。 + +#### v1.1 `2016/10/27` +- 修复宽屏下背景覆盖缺失的 BUG +- 修复打开页面后直接点击播放无效的 BUG +- 修复EDGE浏览器点击下载时文件名为乱码的 BUG +- 优化播放已下架的音乐,会给出无法播放的提示 +- 修复歌词获取失败时无法清除原有歌词的 BUG +- 暂停播放时停止歌词滚动,方便复制歌词 +- 优化搜索内容为空时弹出提示 + +#### v1.0 `2016/10/25` +- 完成搜索并播放音乐功能 +- 完成一键提取音乐外链功能 +- 完成音乐下载功能 +- 完成显示歌曲封面、歌词功能 + + +### 开发文档[待完善] +----- +#### 播放列表DIY教程 +本播放器支持后台自定义播放列表。打开 `js/musicList.js`,按照里面的说明对应修改即可。 + +#### 播放器DIY教程 +除了自定义播放列表,本播放器还支持一些 DIY 设定,比如修改 api.php 文件的默认路径、修改搜索框的默认搜索内容等。具体请打开 `js/player.js` 查看 + +#### rem 变量表 +程序中的rem数组用于存储全局变量,具体的成员(部分)及作用见下表: + +| 变量名 | 用途 | +| ----------- | ----------- | +| rem.audio | audio dom | +| rem.playlist | 当前正在播放的播放列表编号 | +| rem.playid | 正在播放的这首歌在播放列表中的编号 | +| rem.dislist | 当前显示的列表的列表编号 | +| rem.loadPage | 搜索功能已加载的页码 | +| rem.wd | 当前的搜索词 | +| rem.source | 当前选定的音乐源 | +| rem.uid | 当前已同步的用户的网易云 ID | +| rem.uname | 已登录用户的用户名 | +| rem.sheetList | 歌单容器操作对象 | +| rem.mainList | 歌曲列表容器操作对象 | +| rem.isMobile | 是否是手机浏览 | + +### 致谢 +----- +#### 特别感谢 `@metowolf`、`网易云音乐`、`QQ音乐`、`虾米`、`酷狗`、`百度音乐` + +#### 采用的开源模块 +- **Jquery**:js主流开发框架 [http://jquery.com/](http://jquery.com/) +- **Meting**:一个高效的多平台音乐 API 框架 [https://github.com/metowolf/Meting](https://github.com/metowolf/Meting) +- **layer**:一款强大的web弹层组件 [http://layer.layui.com/](http://layer.layui.com/) +- **mCustomScrollbar**:jQuery自定义滚动条样式插件 [http://manos.malihu.gr/jquery-custom-content-scroller/](http://manos.malihu.gr/jquery-custom-content-scroller/) +- **background-blur**:跨浏览器磨砂效果背景图片模糊特效插件 [https://msurguy.github.io/background-blur/](https://msurguy.github.io/background-blur/) +- **Let's Kill IE6**:消灭IE [http://overtrue.me](http://overtrue.me) + +##### 在开发过程中,还参照了很多开源 html 播放器的相关代码,在此一并向他们表示感谢! + +### 耻辱柱 +----- +恭喜下列个人或单位永久入驻耻辱柱! + +#### 素材火 [http://www.sucaihuo.com/] +原因:以积分的形式变相售卖本作品(http://www.sucaihuo.com/php/3378.html ) 截图:https://t.cn/RFsgAAw + +#### 绿岛资源站 [http://www.ldzy.cc/] +原因:未经允许,发布到淘宝售卖(https://item.taobao.com/item.htm?id=560064138441 ) 截图:https://t.cn/RlNRmi5 + +#### 68喜论坛 [http://www.68xi.com/] +原因:未经允许,删改版权信息(http://music.68xi.com/ ),并发布到淘宝售卖(https://item.taobao.com/item.htm?id=547226809330 ) + +还有这位朋友 https://github.com/HenryGit8/PondMusicPlayer + +`奉劝某些“人”保留住做人的最基本底线,遵守开源协议,并引以为戒` diff --git a/api.php b/api.php new file mode 100644 index 0000000..aa3f378 --- /dev/null +++ b/api.php @@ -0,0 +1,230 @@ +format(true); // 启用格式化功能 + +if($source == 'kugou' || $source == 'baidu') { + define('NO_HTTPS', true); // 酷狗和百度音乐源暂不支持 https +} elseif(($source == 'netease') && $netease_cookie) { + $API->cookie($netease_cookie); // 解决网易云 Cookie 失效 +} + +// 没有缓存文件夹则创建 +if(defined('CACHE_PATH') && !is_dir(CACHE_PATH)) createFolders(CACHE_PATH); + +$types = getParam('types'); +switch($types) // 根据请求的 Api,执行相应操作 +{ + case 'url': // 获取歌曲链接 + $id = getParam('id'); // 歌曲ID + + $data = $API->url($id); + + echojson($data); + break; + + case 'pic': // 获取歌曲链接 + $id = getParam('id'); // 歌曲ID + + $data = $API->pic($id); + + echojson($data); + break; + + case 'lyric': // 获取歌词 + $id = getParam('id'); // 歌曲ID + + if(($source == 'netease') && defined('CACHE_PATH')) { + $cache = CACHE_PATH.$source.'_'.$types.'_'.$id.'.json'; + + if(file_exists($cache)) { // 缓存存在,则读取缓存 + $data = file_get_contents($cache); + } else { + $data = $API->lyric($id); + + // 只缓存链接获取成功的歌曲 + if(json_decode($data)->lyric !== '') { + file_put_contents($cache, $data); + } + } + } else { + $data = $API->lyric($id); + } + + echojson($data); + break; + + case 'download': // 下载歌曲(弃用) + $fileurl = getParam('url'); // 链接 + + header('location:$fileurl'); + exit(); + break; + + case 'userlist': // 获取用户歌单列表 + $uid = getParam('uid'); // 用户ID + + $url= 'http://music.163.com/api/user/playlist/?offset=0&limit=1001&uid='.$uid; + $data = file_get_contents($url); + + echojson($data); + break; + + case 'playlist': // 获取歌单中的歌曲 + $id = getParam('id'); // 歌单ID + + if(($source == 'netease') && defined('CACHE_PATH')) { + $cache = CACHE_PATH.$source.'_'.$types.'_'.$id.'.json'; + + if(file_exists($cache) && (date("Ymd", filemtime($cache)) == date("Ymd"))) { // 缓存存在,则读取缓存 + $data = file_get_contents($cache); + } else { + $data = $API->format(false)->playlist($id); + + // 只缓存链接获取成功的歌曲 + if(isset(json_decode($data)->playlist->tracks)) { + file_put_contents($cache, $data); + } + } + } else { + $data = $API->format(false)->playlist($id); + } + + echojson($data); + break; + + case 'search': // 搜索歌曲 + $s = getParam('name'); // 歌名 + $limit = getParam('count', 20); // 每页显示数量 + $pages = getParam('pages', 1); // 页码 + + $data = $API->search($s, [ + 'page' => $pages, + 'limit' => $limit + ]); + + echojson($data); + break; + + default: + echo '
Api 调试模式已关闭
'; + } else { + echo '您已开启 Api 调试功能,正常使用时请在 api.php 中关闭该选项!
PHP 版本:'.phpversion().' (本程序要求 PHP 5.4+)
服务器函数检查
'; + echo 'curl_exec: '.checkfunc('curl_exec',true).' (用于获取音乐数据)
'; + echo 'file_get_contents: '.checkfunc('file_get_contents',true).' (用于获取音乐数据)
'; + echo 'json_decode: '.checkfunc('json_decode',true).' (用于后台数据格式化)
'; + echo 'hex2bin: '.checkfunc('hex2bin',true).' (用于数据解析)
'; + echo 'openssl_encrypt: '.checkfunc('openssl_encrypt',true).' (用于数据解析)
'; + } + + echo ''; +} + +/** + * 创建多层文件夹 + * @param $dir 路径 + */ +function createFolders($dir) { + return is_dir($dir) or (createFolders(dirname($dir)) and mkdir($dir, 0755)); +} + +/** + * 检测服务器函数支持情况 + * @param $f 函数名 + * @param $m 是否为必须函数 + * @return + */ +function checkfunc($f,$m = false) { + if (function_exists($f)) { + return '可用'; + } else { + if ($m == false) { + return '不支持'; + } else { + return '不支持'; + } + } +} + +/** + * 获取GET或POST过来的参数 + * @param $key 键值 + * @param $default 默认值 + * @return 获取到的内容(没有则为默认值) + */ +function getParam($key, $default='') +{ + return trim($key && is_string($key) ? (isset($_POST[$key]) ? $_POST[$key] : (isset($_GET[$key]) ? $_GET[$key] : $default)) : $default); +} + +/** + * 输出一个json或jsonp格式的内容 + * @param $data 数组内容 + */ +function echojson($data) //json和jsonp通用 +{ + header('Content-type: application/json'); + $callback = getParam('callback'); + + if(defined('HTTPS') && HTTPS === true && !defined('NO_HTTPS')) { // 替换链接为 https + $data = str_replace('http:\/\/', 'https:\/\/', $data); + $data = str_replace('http://', 'https://', $data); + } + + if($callback) //输出jsonp格式 + { + die(htmlspecialchars($callback).'('.$data.')'); + } else { + die($data); + } +} \ No newline at end of file diff --git a/cache/index.html b/cache/index.html new file mode 100644 index 0000000..e69de29 diff --git a/css/jquery.mCustomScrollbar.min.css b/css/jquery.mCustomScrollbar.min.css new file mode 100644 index 0000000..6cd1177 --- /dev/null +++ b/css/jquery.mCustomScrollbar.min.css @@ -0,0 +1 @@ +.mCustomScrollbar{-ms-touch-action:pinch-zoom;touch-action:pinch-zoom}.mCustomScrollbar.mCS_no_scrollbar,.mCustomScrollbar.mCS_touch_action{-ms-touch-action:auto;touch-action:auto}.mCustomScrollBox{position:relative;overflow:hidden;height:100%;max-width:100%;outline:0;direction:ltr}.mCSB_container{overflow:hidden;width:auto;height:auto}.mCSB_inside>.mCSB_container{margin-right:30px}.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{margin-right:0}.mCS-dir-rtl>.mCSB_inside>.mCSB_container{margin-right:0;margin-left:30px}.mCS-dir-rtl>.mCSB_inside>.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{margin-left:0}.mCSB_scrollTools{position:absolute;width:16px;height:auto;left:auto;top:0;right:0;bottom:0;opacity:.75;filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_outside+.mCSB_scrollTools{right:-26px}.mCS-dir-rtl>.mCSB_inside>.mCSB_scrollTools,.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools{right:auto;left:0}.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools{left:-26px}.mCSB_scrollTools .mCSB_draggerContainer{position:absolute;top:0;left:0;bottom:0;right:0;height:auto}.mCSB_scrollTools a+.mCSB_draggerContainer{margin:20px 0}.mCSB_scrollTools .mCSB_draggerRail{width:2px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.mCSB_scrollTools .mCSB_dragger{cursor:pointer;width:100%;height:30px;z-index:1}.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{position:relative;width:4px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;text-align:center}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{width:12px}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:8px}.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonUp{display:block;position:absolute;height:20px;width:100%;overflow:hidden;margin:0 auto;cursor:pointer}.mCSB_scrollTools .mCSB_buttonDown{bottom:0}.mCSB_horizontal.mCSB_inside>.mCSB_container{margin-right:0;margin-bottom:30px}.mCSB_horizontal.mCSB_outside>.mCSB_container{min-height:100%}.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{margin-bottom:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal{width:auto;height:16px;top:auto;right:0;bottom:0;left:0}.mCustomScrollBox+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox+.mCSB_scrollTools.mCSB_scrollTools_horizontal{bottom:-26px}.mCSB_scrollTools.mCSB_scrollTools_horizontal a+.mCSB_draggerContainer{margin:0 20px}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:2px;margin:7px 0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{width:30px;height:100%;left:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:4px;margin:6px auto}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{height:12px;margin:2px auto}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:8px;margin:4px 0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{display:block;position:absolute;width:20px;height:100%;overflow:hidden;margin:0 auto;cursor:pointer}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{left:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{right:0}.mCSB_container_wrapper{position:absolute;height:auto;width:auto;overflow:hidden;top:0;left:0;right:0;bottom:0;margin-right:30px;margin-bottom:30px}.mCSB_container_wrapper>.mCSB_container{padding-right:30px;padding-bottom:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_vertical{bottom:20px}.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_horizontal{right:20px}.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden+.mCSB_scrollTools.mCSB_scrollTools_vertical{bottom:0}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal{right:0}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal{left:20px}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal{left:0}.mCS-dir-rtl>.mCSB_inside>.mCSB_container_wrapper{margin-right:0;margin-left:30px}.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden>.mCSB_container{padding-right:0}.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden>.mCSB_container{padding-bottom:0}.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{margin-right:0;margin-left:0}.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{margin-bottom:0}.mCSB_scrollTools,.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight,.mCSB_scrollTools .mCSB_buttonUp,.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{-webkit-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;-moz-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;-o-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar{-webkit-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;-moz-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;-o-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out}.mCS-autoHide>.mCustomScrollBox>.mCSB_scrollTools,.mCS-autoHide>.mCustomScrollBox~.mCSB_scrollTools{opacity:0;filter:"alpha(opacity=0)";-ms-filter:"alpha(opacity=0)"}.mCS-autoHide:hover>.mCustomScrollBox>.mCSB_scrollTools,.mCS-autoHide:hover>.mCustomScrollBox~.mCSB_scrollTools,.mCustomScrollBox:hover>.mCSB_scrollTools,.mCustomScrollBox:hover~.mCSB_scrollTools,.mCustomScrollbar>.mCustomScrollBox>.mCSB_scrollTools.mCSB_scrollTools_onDrag,.mCustomScrollbar>.mCustomScrollBox~.mCSB_scrollTools.mCSB_scrollTools_onDrag{opacity:1;filter:"alpha(opacity=100)";-ms-filter:"alpha(opacity=100)"}.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.4);filter:"alpha(opacity=40)";-ms-filter:"alpha(opacity=40)"}.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.75);filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85);filter:"alpha(opacity=85)";-ms-filter:"alpha(opacity=85)"}.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9);filter:"alpha(opacity=90)";-ms-filter:"alpha(opacity=90)"}.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight,.mCSB_scrollTools .mCSB_buttonUp{background-image:url(mCSB_buttons.png);background-repeat:no-repeat;opacity:.4;filter:"alpha(opacity=40)";-ms-filter:"alpha(opacity=40)"}.mCSB_scrollTools .mCSB_buttonUp{background-position:0 0}.mCSB_scrollTools .mCSB_buttonDown{background-position:0 -20px}.mCSB_scrollTools .mCSB_buttonLeft{background-position:0 -40px}.mCSB_scrollTools .mCSB_buttonRight{background-position:0 -56px}.mCSB_scrollTools .mCSB_buttonDown:hover,.mCSB_scrollTools .mCSB_buttonLeft:hover,.mCSB_scrollTools .mCSB_buttonRight:hover,.mCSB_scrollTools .mCSB_buttonUp:hover{opacity:.75;filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_scrollTools .mCSB_buttonDown:active,.mCSB_scrollTools .mCSB_buttonLeft:active,.mCSB_scrollTools .mCSB_buttonRight:active,.mCSB_scrollTools .mCSB_buttonUp:active{opacity:.9;filter:"alpha(opacity=90)";-ms-filter:"alpha(opacity=90)"}.mCS-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:rgba(0,0,0,.85)}.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:rgba(0,0,0,.9)}.mCS-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px 0}.mCS-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -20px}.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -40px}.mCS-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -56px}.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-2.mCSB_scrollTools .mCSB_draggerRail{width:4px;background-color:#fff;background-color:rgba(255,255,255,.1);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:4px;background-color:#fff;background-color:rgba(255,255,255,.75);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:4px;margin:6px auto}.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)}.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px 0}.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -20px}.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -40px}.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -56px}.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px 0}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -20px}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -40px}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -56px}.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail{width:4px;background-color:#fff;background-color:rgba(255,255,255,.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px;background-color:#fff;background-color:rgba(255,255,255,.75);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:4px;margin:6px 0}.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:6px;margin:5px auto}.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-16px 0}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-16px -20px}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-20px -40px}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-20px -56px}.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-96px 0}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-96px -20px}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-100px -40px}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-100px -56px}.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.1)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:2px}.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%}.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:2px;margin:7px auto}.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px 0}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -20px}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -40px}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -56px}.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.15)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger,.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger,.mCS-rounded.mCSB_scrollTools .mCSB_dragger{height:14px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:14px;margin:0 1px}.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger{width:14px}.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{height:14px;margin:1px 0}.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{width:16px;height:16px;margin:-1px 0}.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:4px}.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{height:16px;width:16px;margin:0 -1px}.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:4px;margin:6px 0}.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{background-position:0 -72px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{background-position:0 -92px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{background-position:0 -112px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{background-position:0 -128px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px -72px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -92px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -112px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -128px}.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail{width:4px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail{background-color:transparent;background-position:center}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);background-repeat:repeat-y;opacity:.3;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail{height:4px;margin:6px 0;background-repeat:repeat-x}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{background-position:-16px -72px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{background-position:-16px -92px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{background-position:-20px -112px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{background-position:-20px -128px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=)}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-96px -72px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-96px -92px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-100px -112px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-100px -128px}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-repeat:repeat-y;background-image:-moz-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,.5)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:linear-gradient(to right,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{background-repeat:repeat-x;background-image:-moz-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,.5)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-o-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-ms-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:linear-gradient(to bottom,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%)}.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger,.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger{height:70px}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger{width:70px}.mCS-3d-dark.mCSB_scrollTools,.mCS-3d.mCSB_scrollTools{opacity:1;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_draggerRail{-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools .mCSB_draggerRail{width:8px;background-color:#000;background-color:rgba(0,0,0,.2);box-shadow:inset 1px 0 1px rgba(0,0,0,.5),inset -1px 0 1px rgba(255,255,255,.2)}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#555}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:8px}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:8px;margin:4px 0;box-shadow:inset 0 1px 1px rgba(0,0,0,.5),inset 0 -1px 1px rgba(255,255,255,.2)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:8px;margin:4px auto}.mCS-3d.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-3d.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-3d.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);box-shadow:inset 1px 0 1px rgba(0,0,0,.1)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{box-shadow:inset 0 1px 1px rgba(0,0,0,.1)}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-3d-thick-dark.mCSB_scrollTools,.mCS-3d-thick.mCSB_scrollTools{opacity:1;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-3d-thick-dark.mCSB_scrollTools,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer,.mCS-3d-thick.mCSB_scrollTools,.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px}.mCSB_inside+.mCS-3d-thick-dark.mCSB_scrollTools_vertical,.mCSB_inside+.mCS-3d-thick.mCSB_scrollTools_vertical{right:1px}.mCS-3d-thick-dark.mCSB_scrollTools_vertical,.mCS-3d-thick.mCSB_scrollTools_vertical{box-shadow:inset 1px 0 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.5)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal,.mCS-3d-thick.mCSB_scrollTools_horizontal{bottom:1px;box-shadow:inset 0 1px 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.5)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:inset 1px 0 0 rgba(255,255,255,.4);width:12px;margin:2px;position:absolute;height:auto;top:0;bottom:0;left:0;right:0}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.4);height:12px;width:auto}.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#555}.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{background-color:#000;background-color:rgba(0,0,0,.05);box-shadow:inset 1px 1px 16px rgba(0,0,0,.1)}.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-3d-thick-dark.mCSB_scrollTools{box-shadow:inset 0 0 14px rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{box-shadow:inset 0 1px 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 1px 0 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#777}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{background-color:#fff;background-color:rgba(0,0,0,.05);box-shadow:inset 1px 1px 16px rgba(0,0,0,.1)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical,.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical{right:0;margin:12px 0}.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools.mCSB_scrollTools_horizontal{bottom:0;margin:0 12px}.mCS-dir-rtl>.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical,.mCS-dir-rtl>.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical{left:0;right:auto}.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger,.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger{height:50px}.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger{width:50px}.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.2);filter:"alpha(opacity=20)";-ms-filter:"alpha(opacity=20)"}.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.5);filter:"alpha(opacity=50)";-ms-filter:"alpha(opacity=50)"}.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.2);filter:"alpha(opacity=20)";-ms-filter:"alpha(opacity=20)"}.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.5);filter:"alpha(opacity=50)";-ms-filter:"alpha(opacity=50)"}.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail{width:6px;background-color:#000;background-color:rgba(0,0,0,.2)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px}.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:6px;margin:5px 0}.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:12px}.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:12px;margin:2px 0}.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1)}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset.mCSB_scrollTools .mCSB_draggerRail{width:12px;background-color:#000;background-color:rgba(0,0,0,.2)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px;margin:3px 5px;position:absolute;height:auto;top:0;bottom:0;left:0;right:0}.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{height:6px;margin:5px 3px;position:absolute;width:auto;top:0;bottom:0;left:0;right:0}.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:12px;margin:2px 0}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent;border-width:1px;border-style:solid;border-color:#fff;border-color:rgba(255,255,255,.2);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{border-color:#000;border-color:rgba(0,0,0,.2)}.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.6)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.6)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.75)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)} \ No newline at end of file diff --git a/css/player.css b/css/player.css new file mode 100644 index 0000000..5074b48 --- /dev/null +++ b/css/player.css @@ -0,0 +1,805 @@ +@charset "utf-8"; +/************************************************** + * MKOnlinePlayer v2.41 + * 播放器样式表文件 + * 编写:mengkun(https://mkblog.cn) + * 时间:2018-3-13 + *************************************************/ +blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, input, lengend, li, ol, p, pre, td, textarea, th, ul { + margin: 0; + padding: 0 +} +body, button, input, select, textarea, th { + color: #333; + background-color: #fff; + font-size: 14px; + line-height: 1.5; + font-family: poppin, 'PingFang SC', Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, sans-serif; + font-family: Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, sans-serif/9 +} +h1, h2, h3, h4, h5, h6 { + font-size: 100% +} +li { + list-style: none +} +img { + border: 0 none; + -ms-interpolation-mode: bicubic; + image-rendering: optimizeQuality +} +input[type=button], input[type=submit] { + cursor: pointer +} +button { + cursor: pointer +} +table { + border-collapse: collapse; + border-spacing: 0 +} +a { + color: #333; + text-decoration: none +} +a:hover { + color: #31c27c; + text-decoration: none +} +a:focus, button:focus, input:focus { + outline: 0 +} +.text-center {text-align: center;} +.clear-fix {zoom: 1;} +.clear-fix:before, .clear-fix:after {display: table;line-height: 0;content: "";} +.clear-fix:after {clear: both; } +.hidden {display: none !important;} +/*滚动条美化*/ +.mCSB_container::-webkit-scrollbar{width:0;height:0} +#lyric::-webkit-scrollbar{width:0;height:0} + +html,body{ + height: 100%; + width: 100%; + background-color: #777970; + overflow: hidden; +} +body { + /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ba43a8+0,ea4fce+62,537bad+100&0.38+0,0.17+61,0.8+100 */ + /* IE9 SVG, needs conditional override of 'filter' to 'none' */ + background: #000000; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7f7280', endColorstr='#000000'); + background-image: -webkit-linear-gradient(200deg, #7f7280, #000000); + background-image: -moz-linear-gradient(200deg, #7f7280, #000000); + background-image: -o-linear-gradient(200deg, #7f7280, #000000); + background-image: -ms-linear-gradient(200deg, #7f7280, #000000); + background-image: linear-gradient(200deg, #7f7280, #000000); + + overflow: hidden; +} +/* 模糊图像层 */ +#blur-img { + position: fixed; + height: 100%; + left: -10%; + width: 120%; + overflow: hidden; +} +/* 移动端使用的模糊图像层 */ +#mobile-blur { + -webkit-filter: blur(50px); + filter: blur(50px); + -webkit-transform: scale(1.15); + transform: scale(1.15); + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: 1; + width: 100%; + background-size: cover; + background-position: bottom center; +} +/* 图像遮罩层 */ +.blur-mask { + display: none; + position: absolute; + width: 100%; + height: 100%; + background-color: #000; + filter:alpha(opacity=30); + -moz-opacity:0.3; + opacity:0.3; + top: 0; + left: 0; + overflow: hidden; +} + +.mobile-mask { + filter:alpha(opacity=60); + -moz-opacity:0.6; + opacity:0.6; +} + +#mkplayer{ + display: none; +} +.header { + height: 50px; + position: absolute; +} +.logo { + transition: all 0.25s ease; + -webkit-transition: all 0.25s ease; + -moz-transition: all 0.25s ease; + -o-transition: all 0.25s ease; + -ms-transition: all 0.25s ease; + display: inline-block; + font-size: 23px; + color: #829194; + cursor: pointer; + margin: 10px 20px; +} +.logo:hover { + color: #fff; +} + +/* 宽度约束容器 */ +.container{ + position: relative; + width: 100%; + height: 100%; + max-width: 1200px; + margin: 0 auto; +} + +/* 中部主要容器 */ +.center{ + position: absolute; + width: 100%; + top: 50px; + bottom: 100px; +} + +/* 顶部按钮条 */ +.btn-bar { + position: absolute; + display: inline-block; + left: 0; + right: 400px; + height: 55px; +} + + +/* 顶部按钮区域 */ +.btn-box { + position: absolute; + top: 10px; + bottom: 10px; + left: 10px; + right: 10px; +} +/* 常规按钮 */ +.btn { + transition: all 0.25s ease; + -webkit-transition: all 0.25s ease; + -moz-transition: all 0.25s ease; + -o-transition: all 0.25s ease; + -ms-transition: all 0.25s ease; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: inline-block; + position: relative; + border-radius: 2px; + border: 1px solid #fff; + border: 1px solid rgba(150,150,150,.5); + color: #fff; + opacity: .8; + filter: alpha(opacity=80); + cursor: pointer; + font-size: 14px; + padding: 6px 25px; + margin: 0 2px; +} +.btn:hover { + border: 1px solid #fff; + opacity: 1; + filter: alpha(opacity=100); +} +.btn[data-action='player'] { + display: none; +} + +/* 搜索工具样式 */ +#search-area { + padding: 25px 15px; +} +.search-group { + font-size: 0; + padding-bottom: 10px; +} +.search-group>input, .search-group>button { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.search-group>input { + padding: 5px; + border: 1px solid #a7a1a1; + height: 35px; + width: 80%; +} +.search-group>button { + border: 1px solid #a7a1a1; + background-color: #eee; + height: 35px; + margin-left: -1px; + width: 20%; + white-space: nowrap; + text-overflow: clip; + overflow: hidden; +} +.radio-group>label { + margin-right: 10px; + cursor: pointer; +} +.radio-group>label>input { + vertical-align: -2px; +} + +/* 左侧主体数据区 */ +.data-area { + position: absolute; + left: 0; + right: 400px; + top: 60px; + bottom: 0; + overflow: hidden; +} + +/* 数据区域容器 */ +.data-box { + position: absolute; + left: 10px; + right: 10px; + top: 10px; + bottom: 10px; + overflow-y: auto; +} + +/*以下是播放列表 css 样式*/ +/* 列表头 */ +.list-head { + height: 40px; +} + +/* 一项数据 */ +.list-item { + width: 100%; + height: 50px; + line-height: 50px; + color: #bdbdbe; + color: rgba(225,225,225,.8); + font-size: 14px; + overflow: hidden; + border-bottom: 1px solid rgba(150,150,150,.1); + cursor: default; + position: relative; +} + +/* 正在播放的那项 */ +.list-playing { + color: #fff; +} + +/* 列表数字 */ +.list-num { + display: block; + width: 30px; + text-align: center; + float: left; + overflow: hidden; +} +/* 正在播放的那项数字 */ +.list-playing .list-num { + background: url("../images/wave.gif") 10px 20px no-repeat; + text-indent: -99px; +} + +/* 音乐名字 */ +.music-name { + position: relative; + display: block; + width: auto; + margin-left: 40px; + margin-right: 300px; + height: 100%; + -webkit-user-select: none; + -moz-user-select: none; /*禁止双击选定*/ + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} +/* 鼠标滑过时音乐名字被截断 */ +.music-name-cult { + display: block; + word-break: keep-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.list-item:hover .music-name-cult { + padding-right: 150px; +} +.list-playing:hover .music-name-cult { + padding-right: 100px; +} +/* 作者名称与音乐专辑 */ +.auth-name,.music-album { + position: relative; + display: block; + width: 150px; + float: right; + height: 100%; + word-break: keep-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +/* 移动端的菜单图标 */ +.list-mobile-menu { + display: none; +} + +/*列表中滑动出现的菜单*/ +.list-menu { + position: absolute; + right: 10px; + top: 50%; + overflow: hidden; + font-size: 0; + height: 36px; + margin-top: -18px; + float: right; + display: none; +} +.list-item:hover .list-menu { + display: block; +} +.list-head:hover .list-menu { + display: none; +} + +/* 列表中滑动出现的小图标 */ +.list-icon { + display: block; + width: 36px; + height: 36px; + background-image: url("../images/icon_list_menu.png"); + float: left; + margin-left: 10px; + cursor: pointer; +} +.list-playing .icon-play{ + display: none; +} +.icon-play { + background-position: -80px 0; +} +.icon-play:hover { + background-position: -120px 0; +} +.icon-download { + background-position: -80px -120px; +} +.icon-download:hover { + background-position: -120px -120px; +} +.icon-share { + background-position: -80px -40px; +} +.icon-share:hover { + background-position: -120px -40px; +} + +/* 分享弹窗中的链接框 */ +.share-url { + width: 100%; + margin-top: 10px; + margin-bottom: 10px; + line-height: 30px; + box-sizing: border-box; + padding: 0 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 5px rgba(0,0,0,.1) inset; + color: #333; + height: 35px; +} +.share-tips { + font-size: 12px; + color: #a9a9a9; +} + +/* 列表中可以被点击的横条 */ +.list-clickable { + cursor: pointer; +} + +/* 以下是歌单 css 样式 */ +/* 歌单中的一项 */ +.sheet-item { + position: relative; + display: block; + width: 25%; + float: left; + text-align: center; +} +/* 歌单封面 */ +.sheet-cover { + display: block; + width: 100px; + height: 100px; + margin: 10px auto; + cursor: pointer; +} +/* 正在播放的列表 */ +.sheet-playing:before { + content: url(../images/wave.gif); + position: absolute; + top: 90px; + left: 50%; + margin-left: -45px; +} + +/* 歌单名字 */ +.sheet-name { + /*padding: 0 5px;*/ + display: inline-block; + max-width: 120px; + white-space: nowrap; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + overflow: hidden; + margin-bottom: 10px; + color: #fff; + cursor: pointer; + font-size: 12px; +} +/* 播放列表分割标题栏 */ +.sheet-title-bar { + border-radius: 2px; + margin: 20px 0; + text-align: center; + line-height: 40px; + height: 40px; + color: #C5C5C5; + background-color: rgba(0, 0, 0, 0.12); +} +.login-btn { + cursor: pointer; +} +.login-btn:hover { + color: #31c27c; +} + +/* 以下是界面右侧 css 样式 */ +/* 播放器主体(歌词和封面) */ +.player { + height: 100%; + width: 400px; + float: right; + position: relative; +} + +/* 歌曲封面区域 */ +.cover { + position: relative; + display: block; + width: 186px; + height: 186px; + margin: auto; +} + +.cover:after { + content: ""; + position: absolute; + left: 9px; + top: 0; + width: 201px; + height: 180px; + background: url(../images/album_cover_player.png) 0 0 no-repeat; + pointer-events: none; +} +/* 歌曲封面图片 */ +.music-cover { + vertical-align: middle; + width: 186px; + height: 186px; +} + +/* 歌词显示区域 */ +.lyric { + position: absolute; + left: 10px; + right: 10px; + top: 195px; + bottom: 10px; + overflow: hidden; + text-align: center; + color: #bdbdbe; + color: rgba(225,225,225,.8); + line-height: 28px; + padding: 20px 0; +} +/* 歌词ul */ +#lyric { + position: absolute; + width: 100%; + top: 0; + bottom: 0; + overflow: hidden; +} +#lyric>li { + word-break: keep-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +/* 正在播放的那一句歌词 */ +#lyric .lplaying { + color: #31c27c; +} +/* 歌词显示区显示的提示语(如加载中、无歌词等) */ +.lyric-tip { + position: absolute; + width: 100%; + top: 50%; +} + +/* 歌曲信息按钮 */ +#music-info { + transition: all 0.25s ease; + -webkit-transition: all 0.25s ease; + -moz-transition: all 0.25s ease; + -o-transition: all 0.25s ease; + -ms-transition: all 0.25s ease; + position: absolute; + width: 27px; + height: 26px; + border-radius: 13px; + right: 10px; + bottom: 10px; + cursor: pointer; + color: #fff; + text-align: center; + line-height: 26px; + font-weight: bold; + background-image: url(../images/player.png); + background-position: -28px -367px; + background-color: #353535; + opacity: 0.3; + filter: Alpha(opacity=30); +} +#music-info:hover { + opacity: 1; + filter: Alpha(opacity=100); +} +/* 标题 */ +.info-title { + color: #B2AFAF +} +.info-btn { + cursor: pointer; + color: #31c27c; +} +.info-btn:hover { + text-decoration: underline; +} +/* 底部 */ +.footer { + height: 100px; + bottom: 0; + width: 100%; + position: absolute; +} + +/* 带图片的按钮 */ +.player-btn { + background-image: url("../images/player.png"); + opacity: .8; + filter: alpha(opacity=80) +} +.player-btn:hover { + opacity: 1; + filter: alpha(opacity=100) +} +/* 暂停状态 */ +.btn-state-paused { + background-position: -30px 0; +} +/* 控制按钮(上一首、播放、下一首)区域 */ +.con-btn { + float: left; + width: 130px; + height: 100%; + position: relative; + margin: 0 10px; +} +.con-btn a{ + display: inline-block; + position: absolute; + top: 50%; +} +.btn-prev{ + background-position: 0 -30px; + width: 19px; + height: 20px; + margin-top: -10px; +} + +.btn-play{ + width: 19px; + height: 29px; + margin-top: -14.5px; + left: 36%; + margin-left: -10.5px; +} +.btn-next{ + background-position: 0 -52px; + right: 30%; + width: 19px; + height: 20px; + margin-top: -10px; +} +.btn-order{ + background-position: 0 -173px; + background-size: 450%; + right: 0; + width: 25px; + height: 25px; + margin-top: -10px; +} +.btn-order-single { + background-position: 0 -196px; +} +.btn-order-list { + background-position: 0 -173px; +} +.btn-order-random { + background-position: 0 -62px; + height: 18px; + margin-top: -9px; +} + +/* 音乐进度条区域 */ +.progress { + width: auto; + margin-left: 150px; + margin-right: 200px; + height: 100%; + position: relative; +} + +/* 限制进度条的盒子 */ +.progress-box { + position: absolute; + height: 20px; + left: 10px; + right: 0; + top: 50%; + margin-top: -9px; +} + +/* 音量控制区域 */ +.vol { + float: right; + width: 200px; + height: 100%; + right: 0; + position: relative; +} + +.quiet { + width: 60px; + height: 100%; + position: relative; + float: left; +} +.btn-quiet{ + display: inline-block; + position: absolute; + width: 26px; + height: 21px; + top: 50%; + right: 0; + margin-top: -10px; + background-position: 0 -144px; +} +.btn-state-quiet { + background-position: 0 -182px; +} +.volume { + position: relative; + margin-left: 60px; + height: 100%; + overflow: hidden; +} +/* 限制声音进度条的盒子 */ +.volume-box { + position: absolute; + height: 20px; + left: 10px; + right: 10px; + top: 50%; + margin-top: -10px; +} + +/* 以下是孟坤进度条控件样式区域 */ +/* 进度条可点击区域 */ +.mkpgb-area { + position: relative; + cursor: pointer; + height: 100%; +} +/* 进度条有背景区域 */ +.mkpgb-bar { + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 2px; + margin-top: -1px; + border-radius: 2px; + background-color: #808284; + overflow: hidden; +} +/* 进度条已完成区域 */ +.mkpgb-cur { + position: absolute; + background-color: #D8D8D8; + width: 0; + height: 2px; + top: 50%; + margin-top: -1px; + border-radius: 2px; + transition: all 0.25s ease; + -webkit-transition: all 0.25s ease; + -moz-transition: all 0.25s ease; + -o-transition: all 0.25s ease; + -ms-transition: all 0.25s ease; +} +/* 进度条小点 */ +.mkpgb-dot { + width: 10px; + height: 10px; + background-color: #fff; + border-radius: 5px; + overflow: hidden; + position: absolute; + left: 0px; + margin-left: -5px; + top: 50%; + margin-top: -5px; + transition: all 0.25s ease; + -webkit-transition: all 0.25s ease; + -moz-transition: all 0.25s ease; + -o-transition: all 0.25s ease; + -ms-transition: all 0.25s ease; +} +/* 进度条禁止点击样式 */ +.mkpgb-locked { + cursor: default; +} + +/* 闪动效果作者:qiuye */ +.dot-move { + -webkit-box-shadow: 0 0 20px #fff; + -moz-animation: dot-move 3s linear 2s infinite; + -webkit-animation: dot-move 3s linear 2s infinite; + -o-animation: dot-move 3s linear 2s infinite; + -ms-animation: dot-move 3s linear 2s infinite; +} +@-webkit-keyframes dot-move{0%{-webkit-box-shadow: 0 0 20px #fff;}25%{-webkit-box-shadow: 0 0 10px #fff;}50%{-webkit-box-shadow: 0 0 0px #fff;}75%{-webkit-box-shadow: 0 0 10px #fff;}100%{-webkit-box-shadow: 0 0 20px #fff;}} +@keyframes dot-move{0%{-webkit-box-shadow: 0 0 10px #363333;}25%{-webkit-box-shadow: 0 0 7px #363333;}50%{-webkit-box-shadow: 0 0 0px #fff;}75%{-webkit-box-shadow: 0 0 6px #fff;}100%{-webkit-box-shadow: 0 0 10px #363333;}} diff --git a/css/small.css b/css/small.css new file mode 100644 index 0000000..6c48808 --- /dev/null +++ b/css/small.css @@ -0,0 +1,183 @@ +@charset "utf-8"; +/************************************************** + * MKOnlinePlayer v2.31 + * 小屏幕样式修复 + * 编写:mengkun(http://mkblog.cn) + * 时间:2017-9-13 + *************************************************/ + +/* 小于 900px 采用这个样式 */ +@media screen and (max-width: 900px) { + /*隐藏头部logo*/ + .header { + display: none; + } + /*中部顶格*/ + .center { + top: 0; + } + + /* 调出播放器按钮 */ + .btn[data-action='player'] { + display: inline-block; + } + + /* 按钮工具条区域 */ + .btn-bar { + height: 35px; + right: 0; + z-index: 999; + } + .btn-box { + background-color: #000; + background-color: rgba(0, 0, 0, 0.12); + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + .btn { + margin: 0; + padding: 0; + width: 25%; + height: 100%; + display: block; + float: left; + border: none; + text-align: center; + line-height: 35px; + color: #C5C5C5; + } + .btn:hover { + border: none; + } + .btn-box .active:after { + content: ''; + display: block; + border-bottom: 3px solid #A2A0A0; + margin-top: -3px; + } + + /* 中部容器区域 */ + .data-area { + top: 40px; + } + + /*数据区域占满整个屏幕*/ + .data-area { + right: 0; + } + + + /*列表菜单不显示*/ + .list-menu { + display: none!important; + } + .music-name-cult { + padding-right: 0!important; + } + + /* 专辑区域腾出位置 */ + .music-album { + margin-right: 30px; + } + /* 小屏幕的列表菜单 */ + .list-mobile-menu { + position: absolute; + display: block; + width: 30px; + height: 30px; + background-image: url(../images/player.png); + background-position: -30px -365px; + right: 0; + top: 50%; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -o-transform: translateY(-50%); + transform: translateY(-50%); + z-index: 2; + cursor: pointer; + } + + /*控制按钮区域缩小*/ + .con-btn { + width: 120px; + } + /*进度条调整*/ + .progress { + width: auto; + margin-left: 130px; + margin-right: 10px; + height: 100%; + position: relative; + } + /*音量控制区域隐藏*/ + .vol { + display: none; + } + + /*隐藏右侧歌词及封面*/ + .player { + display: none; + width: 100%; + } + .cover { + margin-top: 60px; + } + #lyric { + overflow-x: hidden; + overflow-y: auto; + } + .lyric { + top: 260px; + } +} + +/* 小于 620px 采用这个样式 */ +@media screen and (max-width: 620px) { + /*专辑信息不显示*/ + .music-album { + display: none; + } + /*歌手名字*/ + .auth-name { + width: 35%; + padding-right: 30px; + box-sizing: border-box; + } + /*音乐名字拉长*/ + .music-name { + margin-right: 35%; + } +} + +/* 小于 500px 采用这个样式 */ +@media screen and (max-width: 500px) { + .center { + bottom: 60px; + } + /* 歌单封面 */ + .sheet-item { + width: 33.33%; + } + /* 歌单名字 */ + .sheet-name { + max-width: 100px; + } + .cover { + margin-top: 50px; + } + .footer { + height: 60px; + } +} + +/* 小于 350px 采用这个样式 */ +@media screen and (max-width: 350px) { + /* 歌单封面 */ + .sheet-item { + width: 50%; + } +} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..fa69985 Binary files /dev/null and b/favicon.ico differ diff --git a/images/album_cover_player.png b/images/album_cover_player.png new file mode 100644 index 0000000..882f9b5 Binary files /dev/null and b/images/album_cover_player.png differ diff --git a/images/history.png b/images/history.png new file mode 100644 index 0000000..18b0867 Binary files /dev/null and b/images/history.png differ diff --git a/images/icon_list_menu.png b/images/icon_list_menu.png new file mode 100644 index 0000000..0fe907a Binary files /dev/null and b/images/icon_list_menu.png differ diff --git a/images/player.png b/images/player.png new file mode 100644 index 0000000..61a0fef Binary files /dev/null and b/images/player.png differ diff --git a/images/player_cover.png b/images/player_cover.png new file mode 100644 index 0000000..30ef9fd Binary files /dev/null and b/images/player_cover.png differ diff --git a/images/wave.gif b/images/wave.gif new file mode 100644 index 0000000..aebed01 Binary files /dev/null and b/images/wave.gif differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..0b61085 --- /dev/null +++ b/index.html @@ -0,0 +1,155 @@ + + + + + + + + + + + + + + + + + + + + +' + music.artist + ' - ' + music.name + ' 的外链地址为:
' + + '' + + ' '; + + layer.open({ + title: '歌曲外链分享' + ,content: tmpHtml + }); +} + +// 改变右侧封面图像 +// 新的图像地址 +function changeCover(music) { + var img = music.pic; // 获取歌曲封面 + var animate = false,imgload = false; + + if(!img) { // 封面为空 + ajaxPic(music, changeCover); // 获取歌曲封面图 + img == "err"; // 暂时用无图像占个位... + } + + if(img == "err") { + img = "images/player_cover.png"; + } else { + if(mkPlayer.mcoverbg === true && rem.isMobile) // 移动端封面 + { + $("#music-cover").load(function(){ + $("#mobile-blur").css('background-image', 'url("' + img + '")'); + }); + } + else if(mkPlayer.coverbg === true && !rem.isMobile) // PC端封面 + { + $("#music-cover").load(function(){ + if(animate) { // 渐变动画也已完成 + $("#blur-img").backgroundBlur(img); // 替换图像并淡出 + $("#blur-img").animate({opacity:"1"}, 2000); // 背景更换特效 + } else { + imgload = true; // 告诉下面的函数,图片已准备好 + } + + }); + + // 渐变动画 + $("#blur-img").animate({opacity: "0.2"}, 1000, function(){ + if(imgload) { // 如果图片已经加载好了 + $("#blur-img").backgroundBlur(img); // 替换图像并淡出 + $("#blur-img").animate({opacity:"1"}, 2000); // 背景更换特效 + } else { + animate = true; // 等待图像加载完 + } + }); + } + } + + $("#music-cover").attr("src", img); // 改变右侧封面 + $(".sheet-item[data-no='1'] .sheet-cover").attr('src', img); // 改变正在播放列表的图像 +} + + +// 向列表中载入某个播放列表 +function loadList(list) { + if(musicList[list].isloading === true) { + layer.msg('列表读取中...', {icon: 16,shade: 0.01,time: 500}); + return true; + } + + rem.dislist = list; // 记录当前显示的列表 + + dataBox("list"); // 在主界面显示出播放列表 + + // 调试信息输出 + if(mkPlayer.debug) { + if(musicList[list].id) { + console.log('加载播放列表 ' + list + ' - ' + musicList[list].name + '\n' + + 'id: ' + musicList[list].id + ',\n' + + 'name: "' + musicList[list].name + '",\n' + + 'cover: "' + musicList[list].cover + '",\n' + + 'item: []'); + } else { + console.log('加载播放列表 ' + list + ' - ' + musicList[list].name); + } + } + + rem.mainList.html(''); // 清空列表中原有的元素 + addListhead(); // 向列表中加入列表头 + + if(musicList[list].item.length == 0) { + addListbar("nodata"); // 列表中没有数据 + } else { + + // 逐项添加数据 + for(var i=0; i' +name+ '
' + + ''; + rem.sheetList.append(html); +} +// 清空歌单显示 +function clearSheet() { + rem.sheetList.html(''); +} + +// 歌单列表底部登陆条 +function sheetBar() { + var barHtml; + if(playerReaddata('uid')) { + barHtml = '已同步 ' + rem.uname + ' 的歌单 [刷新] [退出]'; + } else { + barHtml = '我的歌单 [点击同步]'; + } + barHtml = '' + + ''; + rem.sheetList.append(barHtml); +} + +// 选择要显示哪个数据区 +// 参数:要显示的数据区(list、sheet、player) +function dataBox(choose) { + $('.btn-box .active').removeClass('active'); + switch(choose) { + case "list": // 显示播放列表 + if($(".btn[data-action='player']").css('display') !== 'none') { + $("#player").hide(); + } else if ($("#player").css('display') == 'none') { + $("#player").fadeIn(); + } + $("#main-list").fadeIn(); + $("#sheet").fadeOut(); + if(rem.dislist == 1 || rem.dislist == rem.playlist) { // 正在播放 + $(".btn[data-action='playing']").addClass('active'); + } else if(rem.dislist == 0) { // 搜索 + $(".btn[data-action='search']").addClass('active'); + } + break; + + case "sheet": // 显示专辑 + if($(".btn[data-action='player']").css('display') !== 'none') { + $("#player").hide(); + } else if ($("#player").css('display') == 'none') { + $("#player").fadeIn(); + } + $("#sheet").fadeIn(); + $("#main-list").fadeOut(); + $(".btn[data-action='sheet']").addClass('active'); + break; + + case "player": // 显示播放器 + $("#player").fadeIn(); + $("#sheet").fadeOut(); + $("#main-list").fadeOut(); + $(".btn[data-action='player']").addClass('active'); + break; + } +} + +// 将当前歌曲加入播放历史 +// 参数:要添加的音乐 +function addHis(music) { + if(rem.playlist == 2) return true; // 在播放“播放记录”列表则不作改变 + + if(musicList[2].item.length > 300) musicList[2].item.length = 299; // 限定播放历史最多是 300 首 + + if(music.id !== undefined && music.id !== '') { + // 检查历史数据中是否有这首歌,如果有则提至前面 + for(var i=0; it |
'+(n.content||"")+"
"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"':"")+'