@import "base.less";
@import "view.less";
@import "loading.less";
@import "list.less";

.touch-invisible .touch-link:active{
    background: none;
}

.card{
	overflow: hidden;


}

// 综艺年份选择
.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: 10px 0;

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

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

// 电视剧列表
.tvList {
    padding: 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: #fff;
        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: 100px;

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

        .info {
            width: 190px;

            .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: 375px){

            .icon {
                width: 100px;
            }

            .info{
                width: 230px;
            }

        }

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

            .icon {
                width: 100px;
            }

            .info{
                width: 269px;
            }

        }

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

            .icon {
                width: 150px;
            }

            .info{
                width: 573px;
            }

        }
    } 
}

.episode{
    position: relative;

    .icon-tv{
        position: absolute;
        right: 0px;
        top: 0px;
        background-repeat: no-repeat;
        background-size: 10px;
        height: 10px;
        width: 10px;
    }

    .downloading{
        background-image: url('img/wait_list.svg');
    }

    .downloaded{
        background-image: url('img/done_list.svg');
    }

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

        .icon-tv{
            background-size: 15px;
            height: 15px;
            width: 15px;
        }
        
    }
    .summary{
        position: relative;
        .icon-show{
            position: absolute;
            right: 0;
            bottom: 0;
            background-repeat: no-repeat;
            background-size: 10px;
            background-position: center left;
            height: 16px;
            width: auto;
            font-size: 0.9em;
            padding-left: 12px; 
            line-height: 16px;

        }

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

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

            
        }

        @media screen and (min-width: 768px){
            .icon-show{
                height: 16px;
                font-size: 0.9em;
                padding-left: 12px; 
                line-height: 16px;
            }
            
        }
    }
}