183 lines
3.6 KiB
CSS
183 lines
3.6 KiB
CSS
@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: 100px;
|
||
}
|
||
/*进度条调整*/
|
||
.progress {
|
||
width: auto;
|
||
margin-left: 110px;
|
||
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%;
|
||
}
|
||
} |