@import "base.less";
.detailView {
    background: @backgroundColor;
}

.downloadList {
    background-color: @backgroundColor;
}


// 综艺年份选择
.yearSelectWrapper {
    overflow-x: auto;
    overflow-y: hidden;
    line-height: 30px;
    width: 100%;
    border-bottom: @lineColor 1px solid;

    @media screen and (-webkit-min-device-pixel-ratio : 1.5), screen and (min-device-pixel-ratio : 1.5) {
        & {
            border: 0;
            box-shadow: inset 0 -1px 1px -1px @lineColorRetina;
        }
    }

    .yearSelect {
        padding: 5px 0;

        a {
            display: block;
            float: left;
            width: 36px;
            color: @infoColor;
            padding: 6px 10px;
            text-align: center;

            &.current {
                color: #fff;
            }
        }
    }
}


// 动漫区间选择
.rangeSelectWrapper {
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: @lineColor 1px solid;
    width: 100%;
    line-height: 30px;

    @media screen and (-webkit-min-device-pixel-ratio : 1.5), screen and (min-device-pixel-ratio : 1.5) {
        & {
            border: 0;
            -webkit-box-shadow: inset 0 -1px 1px -1px @lineColorRetina;
        }
    }

    .rangeSelect {
        padding: 5px 0;

        a {
            display: block;
            float: left;
            width: 60px;
            color: @infoColor;
            text-align: center;
            padding: 6px 10px;

            &.current {
                color: #fff;
            }
        }
    }
}


// 视频源选择
.siteListWrapper {
    overflow: hidden;
    width: 100%;
    margin-top: 0 0.8em;
    overflow-x: auto;
    padding: 0 0 10px;

    .siteList {
        // display: table;
        height: 30px;

        a {
            // display: table-cell;
            // padding: 0 5px;
            // width: 30px;
            display: block;
            float: left;
            width: 35px;

            height: 30px;
            background-image: url('img/source/other_off@2x.png?v=6');
            background-position: 0 center;
            background-size: 30px auto;
            background-repeat: no-repeat;

            opacity: 0.5;


            &.m56 {background-image: url('img/source/56_off@2x.png?v=6')}

            &.ku6 {background-image: url('img/source/ku6_off@2x.png?v=6')}

            &.baomihua {background-image: url('img/source/baomihua_off@2x.png?v=6')}

            &.bilibili {background-image: url('img/source/bilibili_off@2x.png?v=6')}

            &.cntv {background-image: url('img/source/cntv_off@2x.png?v=6')}

            &.funshion {background-image: url('img/source/funshion_off@2x.png?v=6')}

            &.hunantv {background-image: url('img/source/hunantv_off@2x.png?v=6')}

            &.ifeng {background-image: url('img/source/ifeng_off@2x.png?v=6')}

            &.iqiyi {background-image: url('img/source/iqiyi_off@2x.png?v=6')}

            &.letv {background-image: url('img/source/letv_off@2x.png?v=6')}

            &.m1905 {background-image: url('img/source/m1905_off@2x.png?v=6')}

            &.pps {background-image: url('img/source/pps_off@2x.png?v=6')}

            &.pptv {background-image: url('img/source/pptv_off@2x.png?v=6')}

            &.qq {background-image: url('img/source/qq_off@2x.png?v=6')}

            &.sohu {background-image: url('img/source/sohu_off@2x.png?v=6')}

            &.taomi {background-image: url('img/source/taomi_off@2x.png?v=6')}

            &.tudou {background-image: url('img/source/tudou_off@2x.png?v=6')}

            &.tv189 {background-image: url('img/source/tv189_off@2x.png?v=6')}

            &.wasu {background-image: url('img/source/wasu_off@2x.png?v=6')}

            &.kankan {background-image: url('img/source/kankan_off@2x.png?v=6')}

            &.yinyuetai {background-image: url('img/source/yinyuetai_off@2x.png?v=6')}

            &.youku {background-image: url('img/source/youku_off@2x.png?v=6')}

            &.zjstv {background-image: url('img/source/zjstv_off@2x.png?v=6')}

            &.cloud {background-image: url('img/source/cloud_off@2x.png?v=6')}

            &.chaogao {background-image: url('img/source/cloud_off@2x.png?v=6')}


            &.selected {

                background-image: url('img/source/other_on@2x.png?v=6');

                &.m56 {background-image: url('img/source/56_on@2x.png?v=6')}

                &.ku6 {background-image: url('img/source/ku6_on@2x.png?v=6')}

                &.baomihua {background-image: url('img/source/baomihua_on@2x.png?v=6')}

                &.bilibili {background-image: url('img/source/bilibili_on@2x.png?v=6')}

                &.cntv {background-image: url('img/source/cntv_on@2x.png?v=6')}

                &.funshion {background-image: url('img/source/funshion_on@2x.png?v=6')}

                &.hunantv {background-image: url('img/source/hunantv_on@2x.png?v=6')}

                &.ifeng {background-image: url('img/source/ifeng_on@2x.png?v=6')}

                &.iqiyi {background-image: url('img/source/iqiyi_on@2x.png?v=6')}

                &.letv {background-image: url('img/source/letv_on@2x.png?v=6')}

                &.m1905 {background-image: url('img/source/m1905_on@2x.png?v=6')}

                &.pps {background-image: url('img/source/pps_on@2x.png?v=6')}

                &.pptv {background-image: url('img/source/pptv_on@2x.png?v=6')}

                &.qq {background-image: url('img/source/qq_on@2x.png?v=6')}

                &.sohu {background-image: url('img/source/sohu_on@2x.png?v=6')}

                &.taomi {background-image: url('img/source/taomi_on@2x.png?v=6')}

                &.tudou {background-image: url('img/source/tudou_on@2x.png?v=6')}

                &.tv189 {background-image: url('img/source/tv189_on@2x.png?v=6')}

                &.wasu {background-image: url('img/source/wasu_on@2x.png?v=6')}

                &.kankan {background-image: url('img/source/kankan_on@2x.png?v=6')}

                &.yinyuetai {background-image: url('img/source/yinyuetai_on@2x.png?v=6')}

                &.youku {background-image: url('img/source/youku_on@2x.png?v=6')}

                &.zjstv {background-image: url('img/source/zjstv_on@2x.png?v=6')}

                &.cloud {background-image: url('img/source/cloud_on@2x.png?v=6')}

                &.chaogao {background-image: url('img/source/cloud_on@2x.png?v=6')}
            }
        }
    }
}


// 剧集&详情切换区域
.detail-cards {

    .buttons {
        display: table;
        line-height: 50px;
        width: 100%;
        position: relative;
        overflow: hidden;
        .lineTop();

        .button {
            display: table-cell;
            text-align: center;
            color: #999;

            &.current {
                color: #fff;
            }
        }

        @media screen and (min-width: 768px) {
            .button {
                font-size: 1.1em;
            }
        }

        .arrow {
            width: 12px;
            height: 12px;
            position: absolute;
            bottom: -7px;
            left: -12px;
            background: @backgroundColor;
            border: @lineColor 1px solid;
            border-width: 1px 0 0 1px;
            .rotation(45deg);
            z-index: 100; 

            @media screen and (-webkit-min-device-pixel-ratio : 1.5), screen and (min-device-pixel-ratio : 1.5) {
                & {
                    border: 0;
                    -webkit-box-shadow: inset 0 0 1px 0 @lineColorRetina;
                }
            }
        }
    }

    .cards {
        position: relative;
        margin-top: -1px;
        .lineTop();

        .card {
            height: 100%;
            overflow: hidden;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

            .detailLoading {
                text-align: center;

                .x-loading {
                    margin: 10px auto;
                }
                
                .x-loading-spinner {
                    font-size: 150%;
                }
            }
        }

        #card-summary {
            color: #ccc;
            line-height: 1.5;
            padding: 10px;
        }
        #card-related{
            color: #ccc;
            line-height: 1.5;
            padding: 10px;
            .video-item {
                color: #333;
                display: inline-block;
                margin: 0 0 20px;
                position: relative;
                text-align: center;
                vertical-align: top;
                width: 33.3%;
                .title {
                    color: @titleColor;
                    font-size: 0.9em;
                    line-height: 17px;
                    margin-top: 10px;
                    max-height: 51px;
                    overflow: hidden;
                }
                .cover {
                    margin: 0 auto;
                    position: relative;
                    width: 80%;
                    img {
                        background-color: rgba(255, 255, 255, 0.05);
                        background-image: url("img/placeholder.png?v=1");
                        background-position: center center;
                        background-size: cover;
                        display: block;
                        height: 100%;
                        width: 100%;
                    }
                    .info {
                        bottom: 0;
                        color: #fff;
                        font-size: 0.8em;
                        height: 18px;
                        left: 0;
                        line-height: 18px;
                        padding: 5% 5% 0;
                        position: absolute;
                        text-align: left;
                        width: 90%;
                    }
                }
            }
        }
    }
}


 
// 电视剧列表
.tvList {
    padding: 0 0 10px 0;

    a {
        display: block;
        float: left;
        width: 15%;
        margin: 3% 2.5% 0;
        height: 2.5em;
        line-height: 2.5em;
        text-align: center;
        color: @infoColor;
        border-radius: 2px;
        box-sizing: border-box;
        font-size: 0.9em;
        border: @lineColor 1px solid;
        
        @media screen and (-webkit-min-device-pixel-ratio : 1.5), screen and (min-device-pixel-ratio : 1.5) {
            & {
                border: 0;
                -webkit-box-shadow: inset 0 0 1px 0 @lineColorRetina;
            }
        }

        &:active {
            background: @linkActiveColor;
        }

        &.highlight {
            color: @highlightColor;
        }
    }
}
.touch-invisible .cards a:active{
    background: none;
}


//综艺列表
.zongyi_list {
    
    .zongyi_list_item {

        .icon {
            width: 60px;

            img {
                width: 100%;
                display: block;
            }
        }

        .info {

            .name {
                margin: 0.2em 0 0.3em;
                white-space: normal;
                color: @linkColor;
                line-height: 1.2;
            }

            .summary {
                margin-bottom: 0.2em;
            }
        }

        &.highlight .name {
            color: @highlightColor;
        }
    } 
}



@media screen and (min-width: 768px) {

    .siteListWrapper {
        padding-left: 15px;
        padding-right: 15px;

        .siteList {

            height: 40px;
            
            a {
                padding: 0 10px 0 0;
                height: 40px;
                width: 40px;
                background-size: 40px auto;
            }
        }
    }

    .yearSelectWrapper {

        .yearSelect {
            padding-left: 5px;
            padding-right: 5px;
        }
    }

    .rangeSelectWrapper {
        .rangeSelect {
            padding-left: 10px;
            padding-right: 10px;
        }
    }

    .detail-cards {
        .cards {
            #card-summary {
                padding: 20px;
                font-size: 1.1em;
            }
            #card-related{
                padding: 20px 0;
                .video-item {
                    width: 20%;
                    .cover{
                        height: 160px;
                        width: 120px;
                    }
                }
            }
        }
    }

    .zongyi_list {
    
        .zongyi_list_item {

            .icon {
                width: 100px;
            }
        }
    }

    .tvList {
        padding-left: 10px;
        padding-right: 10px;

        a {
            font-size: 1em;
            width: 16%;
            margin: 3% 2% 0;
        }
    }
}



@media screen and (min-width: 375px) and (max-width: 767px){

    .siteListWrapper {
        padding-left: 10px;
        padding-right: 10px;
    }

    .detail-cards {
        .cards {
            #card-summary {
                padding: 15px;
            }
            #card-related{
                padding: 15px 0;
                .video-item {
                    
                    .cover{
                        height: 145px;
                        width: 110px;
                    }
                }
            }
        }
    }

    .rangeSelectWrapper {
        .rangeSelect {
            padding-left: 5px;
            padding-right: 5px;
        }
    }

    .zongyi_list {
    
        .zongyi_list_item {

            .icon {
                width: 100px;
            }
        }
    }

    .tvList {
        padding-left: 5px;
        padding-right: 5px;
    }

    .yearSelectWrapper {

        .yearSelect {
            padding-left: 5px;
            padding-right: 5px;
        }
    }
}

@media screen and (min-width: 320px) and (max-width: 374px){

    .siteListWrapper {
        padding-left: 10px;
        padding-right: 10px;
    }

    .detail-cards {
        .cards {
            #card-summary {
                padding: 15px;
            }
            #card-related{
                padding: 15px 0;
                .video-item {
                    
                    .cover{
                        width: 86px;
                        height: 128px;
                    }
                }
            }
        }
    }

    .rangeSelectWrapper {
        .rangeSelect {
            padding-left: 5px;
            padding-right: 5px;
        }
    }

    .zongyi_list {
    
        .zongyi_list_item {

            .icon {
                width: 100px;
            }
        }
    }

    .tvList {
        padding-left: 5px;
        padding-right: 5px;
    }

    .yearSelectWrapper {

        .yearSelect {
            padding-left: 5px;
            padding-right: 5px;
        }
    }
}