@charset "utf-8";
/**************************************************
 * MKOnlinePlayer v2.0
 * 小屏幕样式修复
 * 编写：mengkun(http://mkblog.cn)
 * 时间：2017-3-16
 *************************************************/

/* 小于 900px 采用这个样式 */
@media screen and (max-width: 900px) {
/*隐藏头部logo*/
.header {
    display: none;
}
/*中部顶格*/
.center {
    top: 0;
}
.btn {
    padding: 6px 8px;
}
.btn:hover {
    border: none;
}
.btn-bar {
    right: 0;
    z-index: 999;
}
/* 调出播放器按钮 */
.btn[data-action='player'] {
    display: inline-block;
}
/*隐藏右侧歌词及封面*/
.player {
    display: none;
    width: 100%;
}
.cover {
    margin-top: 60px;
}
#lyric {
    overflow-x: hidden;
    overflow-y: auto;
}
.lyric {
    top: 260px;
}


/*数据区域占满整个屏幕*/
.data-area {
    right: 0;
}
/*音乐名字拉长*/
.music-name {
    margin-right: 30%;
}
/*专辑信息不显示*/
.music-album {
    display: none;
}
/*歌手名字*/
.auth-name {
    width: 30%;
}
/*列表菜单不显示*/
.list-menu {
    display: none!important;
}
.music-name-cult {
    padding-right: 0!important;
}
/*控制按钮区域缩小*/
.con-btn {
    width: 100px;
}
/*进度条调整*/
.progress {
    width: auto;
    margin-left: 110px;
    margin-right: 10px;
    height: 100%;
    position: relative;
}
/*音量控制区域隐藏*/
.vol {
    display: none;
}

}

/* 小于 500px 采用这个样式 */
@media screen and (max-width: 500px) {
    .btn-bar {
        height: 35px;
    }
    .btn-box {
        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: #6A6969;
    }
    .center {
        bottom: 60px;
    }
    .data-area {
        top: 40px;
    }
    /* 歌单封面 */
    .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%;
    }
}