/**common styles**/

*{
	box-sizing:border-box;
}
html{
  /*font-size: 37.5px; *//* 解决UC浏览，rem适配问题 https://www.cnblogs.com/chenrong/articles/4686601.html */
}
html,body{
    width: 100%;
    min-height: 100%;
    touch-action: manipulation; /* IE11+ 禁止双击缩放，关于移动端300ms延迟：https://github.com/ftlabs/fastclick */  
    -ms-touch-action: manipulation; /* IE10+ 禁止双击缩放 */
}
body{
    font-family: Microsoft YaHei,STHeiti,Helvetica,Arial,sans-serif;
    overflow-y: initial !important; /* music-ui的自带样式会导致body出现滚动条，然后导致scrollBehavior无法获取window的滚动位置 */
}
img{vertical-align: top;border: 0;}
ul, li, ol{
    list-style-type: none;
}
a, blockquote, body, button, code, dd, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html,iframe, img, input, label, li, object, ol, p, q, small, span, strong, table, tbody, td, th, tr, ul {
    margin: 0;
    padding: 0;
    border: 0;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
}

button, input, select, textarea { font-size: 100%; line-height:normal; }
button, input, select, label{vertical-align:middle;}
table{ border-collapse: collapse; border-spacing: 0; }
input[type="button"],input[type="submit"],input[type="reset"]{cursor:pointer;}
a{color: #333; outline: none; text-decoration: none;}
a:focus{outline: none;}
.clearfix:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix {zoom:1; }
em{
    font-style: normal;
}

@import "variables.scss";

body {
    font-size:$font-size;
    color:$font-color;
    background: $body-color;
    line-height: 1.4;
}

.red {
    color:$red;
}

.containerTitle {
    display: flex;
    align-items: center;
    border-bottom:2px solid $red;
    font-size: $font-size * 2;
    padding:10px 0;
}
.smallTitle{
    font-size: $font-size;
    border-bottom: 1px solid darken($grey, 10%);
    padding:8px 0;
    margin-top: 10px;
    font-weight: bold;
}
.container {
    display: flex;
    .containerLeft{
        width:270px;
        background: $body-color;
        border-right:1px solid $border-area-color;
        font-size: $font-size - 2;
        h4 {
            padding:20px 20px 10px 20px;
            font-size: $font-size;
        }
        .menulist {     
            color: inherit;
            display: flex;
            align-items: center;
            padding:10px 20px;
            cursor: pointer;
            img {
                width:40px;
                height: 40px;
                margin-right:10px;
            }
            span {
                flex:1;
            }
            &.active {
                background: darken($grey,4%);
            }
        }
    }
    .containerRight {
        flex:1;
        border-right:1px solid $grey;
        padding: 15px 30px 40px 39px;
        overflow: hidden;
    }

}

.margin {
    margin:0 27px;
}

#Search{
    margin:20px 5%;
    color:$font-color;
    font-size:$font-size - 2;
}
.snote {
    color:$font-detail-color;        
    .red {
        color:$red;
    }
}
.searchList{
    padding:10px 0;
    font-size: $font-size - 2;        
    li{        
        &:nth-child(even) {
            background:$grey;
        }
        a{
            display: flex;
            padding:10px 20px;
            align-items: center;
        }
        span {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &.name {
                flex:2;
                i {
                    font-style:normal;
                    display:block;
                    line-height:20px;
                    &.des{
                        color:$font-detail-color;
                    }
                }
            }
            
            flex: 1;
            text-align:left;
            &:last-child {
                flex:.5;
                text-align:right;
            }
            &.number {
                width: 30px;
                flex:none;
            }
        }
        .pic,
        .pic img {
            width:40px;
            height:40px;
            margin-right: 10px;
            vertical-align: middle;
        }
        .category {
            i{
                font-style: normal;
                font-size:$font-size - 2;
                border:1px solid darken($grey,5%);
                color:$font-detail-color;
                padding: 5px;
                line-height: 28px;
            }
        }
    }
}
.searchsingerList {
    display:flex;
    flex-wrap:wrap;
    li {
        width:130px;
        display:block;
        margin: 21px 30px 0 0;
        a {
            display:block;
            color:$font-color;
        }
        img {
            width:130px;
            height:130px;
            border:1px solid $grey;
        }
        p {
            text-overflow:ellipsis;
            overflow:hidden;
            white-space: nowrap;
            margin-top:5px;
        }
    }
}
.albumList {        
    li {
        position:relative;
        width:153px;
        .msk {
            background:url('~@/assets/images/coverall.png') no-repeat 0 -845px;
            position:absolute;
            width:100%;
            height:130px;
            left:0px;
            top:0px;
        }
        .albumTime {
            display: none;
        }
    }
}
.mvList {
    li {
        width:160px;
        .mvcover {
            position:relative;
            width:100%;
            height:90px;
            display:block;
            img{
                width:100%;
                height:90px;
            }
            .duration,
            .playcount{
                position:absolute;
            }
            .duration{                    
                left:5px;
                bottom:5px;                    
            }
            .playcount {
                right: 5px;
                top: 5px;
                color: #fff;
                text-shadow: 0 0 2px $black;
                &:before {
                    background:url('~@/assets/images/icon2.png') no-repeat -60px -310px;
                    content:'';
                    width: 15px;
                    height: 10px;
                    position: absolute;
                    left: -18px;
                    top: 3px;
                }
            }
        }
        span {
            display: block;
            line-height: 20px;
        }
        .iconplay {
            position: absolute;
            width: 44px;
            height: 44px;
            top: 50%;
            left: 50%;
            margin: -22px 0 0 -22px;
            background: url('~@/assets/images/iconall.png') no-repeat -30px -135px;
        }
    }
}
.lyricList {
    margin:10px 0;
    .lyricDes {
        display:flex;
        padding:10px;
        border:1px solid transparent;
        background:$grey;
        border-color:darken($grey,5%);
        > span {
            flex:auto;
            &:first-child {
                position:relative;
                padding-left:25px;
                &:before {
                    content:'';
                    background:url('~@/assets/images/table.png') no-repeat 0 -103px;
                    width:17px;
                    height:17px;
                    position:absolute;
                    left:0px;
                }
            }
            &:last-child {
                text-align:right;
            }
        }
    }
    .lyrics {
        padding:10px;
        display:block;
        margin-left:50px;
        > span {
            display:block;
        }
        .lyricstext {
            &.collapse {
                max-height:85px;
                overflow:hidden;
            }
            p {
                line-height:20px;
            }
        }
        .crl {
            margin-top:10px;
            cursor:pointer;
        }
    }
}
.songsList {
    li {
        align-items: center;
        img {
            width:50px;
            height:50px;
            margin-right:10px;
        }
    }
}
.audioList {
    img {
        width:150px;
        height:150px;
    }
    img,p {
        display:block;
    }
}
.userList {
    img {
        width:50px;
        height:50px;
        margin-right:10px;
    }
}
.mvsList {
    li {
        div.mvv{
            position:relative;
            img{
                height:103px;
            }
            
        }
    }
}

.songlistcomponent {
    ul {
        display: flex;
        flex-wrap: wrap;
        li {
            display:block;
            padding:0;
            margin: 21px 44px 0 0;
            width:140px;
            > * {
                display:block;
                line-height:20px;
            }
            &:nth-child(even) {
                background:none;
            }
            .pic {
                width:100%;
                height:140px;
                border:1px solid $grey;
                margin-bottom:5px;
            }
            .name,
            span {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .nickname {
                font-size:$font-size - 2;
                color:$font-detail-color;
            }
            .count,
            .bookcount,
            .playcount {
                display:none;
            }
        }
    }
}


.area {
    width: 980px;
    margin:auto;
    background: $white;
    border-color:$border-area-color;
    border-width:0 1px;
    border-style: solid;
}

@media screen and (max-width:768px) {
    .area {
        width: 100%;
        border:0;
    }
}