dwweb-pc/论坛/2016多玩论坛年度盛典/sass/global.scss

@charset "UTF-8";

@import "lego/lego";

/* S ZhuanTi Common */
$main_width: 1000px;
$yahei: "Microsoft YaHei", SimHei, sans-serif;

html {
    font-size: 12px;
    overflow-y: scroll;
    font-family: $yahei;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
body {
    a {
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
    p, a, span, em, i, h1, h2, h3, h4, h5, h6{
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }
}



body{
    // background: url(../img/bottom.jpg) bottom no-repeat;
    background-color: #000611;
}
/* S warpper */
.wrapper{
    background: url(../img/bg.jpg) center top no-repeat;
    position: relative;
}

.wrapper-inner{
    background: url(../img/bg-inner.jpg) center top no-repeat;
    position: relative;   
}

.aside-bar{
    position: fixed;
    width: 144px;
    height: 292px;
    background: url(../img/aside-bg.png) no-repeat;
    right: 2%;
    top: 50%;
    margin-top: -146px;
    z-index: 9999;
    ul{
        padding-top: 23px;
    }
    li{
        a{
            line-height: 40px;
            text-align: center;
            color: #b28e5d;
            font-size: 16px;
            display: block;
            &:hover{
                color: #ffd59c;
                text-decoration: none;
            }
        }
    }
    .nav-title{
        position: absolute;
        top: -50px;
        left: 50%;
        text-indent: -9999px;
        transition: opacity ease 300ms;
        &:hover{
            opacity: 0.8;
        }
        &.title1{
            width: 112px;
            height: 20px;
            background: url(../img/nav-title1.png) no-repeat;
            margin-left: -56px;
        }
        &.title2{
            width: 176px;
            height: 20px;
            background: url(../img/nav-title2.png) no-repeat;
            margin-left: -88px;
        }
        &.title3{
            width: 180px;
            height: 20px;
            background: url(../img/nav-title3.png) no-repeat;
            margin-left: -90px;
        }
        &.title4{
            width: 155px;
            height: 20px;
            background: url(../img/nav-title4.png) no-repeat;
            margin-left: -77px;
        }
        &.title5{
            width: 112px;
            height: 20px;
            background: url(../img/nav-title5.png) no-repeat;
            margin-left: -56px;
        }
    }
}
.wrapout{
    min-width: $main_width;
}

.wrapin{
    width: $main_width;
    margin: 0 auto;
    position: relative;
}

.title-time{
    font-size: 20px;
    color: #ba9454;
    width: 250px;
    margin: 0 auto;
    text-align: center;
    padding-top: 636px;
}

.section-1{
    width: 617px;
    margin: 70px auto 0;
    h2{
        font-size: 16px;
        color: #caa26c;
        text-align: center;
        margin-bottom: 16px;
    }
    .slide-box{
        width: 100%;
        height: 146px;
        background: url(../img/section-1.png) no-repeat;
    }
    .gift-list__bd{
        position: relative;
        height: 100%;
    }
    ul{
        font-size: 0;
        height: 108px;
        // width: 10000px;
    }
    .list-con{
        width: 535px;
        overflow: hidden;
        height: 100px;
        margin: 0 auto;
        padding-top: 32px;
    }
    .list-item{
        @include inline-block;
        padding-right: 6px;
        position: relative;
        margin-bottom: 10px;
        &:hover{
            .gift-des{
                display: block;
            }
        }
        img{
            display: block;
            width: 128px;
            height: 72px;
        }
    }
    .gift-des{
        // font-size: 0;
        width: 100%;
        div{
            display: inline-block;
            *display: inline;
            zoom:1;
            vertical-align: middle;
            font-size: 12px;
            text-align: center;
            color:#d1b897;
            line-height: 28px;
            width: 100%;
        }
        i{
            display:inline-block;
            width: 0;
            height: 100%;
            vertical-align: middle;
        }
    }
    .btn-prev,.btn-next{
        position: absolute;
        top:50%;
        margin-top: -12px;
        width: 14px;
        height: 24px;
        cursor:pointer;
        z-index: 999;
    }
    .btn-prev{
        left:16px;
        background: url(../img/icon-prev.png) no-repeat;
        &:hover{
            opacity: 0.8;
        }
    }
    .btn-next{
        right: 16px;
        background: url(../img/icon-next.png) no-repeat;
        &:hover{
            opacity: 0.8;
        }
    }
    &.is-short{
        width: 1188px - 242;
        margin-left: -(1188px - 242) / 2;
        .list-con{
            width: 1184px - 242;
        }
    }
}

.bbsparty {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 78px
}

.bbsparty .bbsparty-title {
    font-size: 0;
    margin-bottom: 21px;
    height: 44px
}

.bbsparty-editor{
    .bbsparty-title{
        width: 137px;
        background: url(../img/bg-title-editor.png) no-repeat;
    }
}

.bbsparty-player{
    .bbsparty-title{
        width: 137px;
        background: url(../img/bg-title-player.png) no-repeat;
    }
}

.bbsparty-wall{
    .bbsparty-title{
        width: 137px;
        background: url(../img/bg-title-wall.png) no-repeat;
    }
}

.bbsparty-act{
    .bbsparty-title{
        width: 137px;
        background: url(../img/bg-title-act.png) no-repeat;
    }
}

.bbsparty-hot{
    .bbsparty-title{
        width: 137px;
        background: url(../img/bg-title-hot.png) no-repeat;
    }
}


.bbsparty-editor__editorbox{
    padding-top: 18px;
    margin-bottom: 32px;
}
.editorbox__con{
    margin-bottom: 32px;
}
.ui-slide{
    width: 1000px;
    height: 414px;
}
.ui-slide__prev,
.ui-slide__next{
    width: 42px;
    height: 70px;
    margin-top: -50px;
    z-index: 888;
}
.ui-slide__prev{
    left: 10px;
    background: url(../img/icon-prev2.png) no-repeat;
    &:hover{
        background: url(../img/icon-prev2-hover.png) no-repeat;
    }
}
.ui-slide__next{
    right: 10px;
    background: url(../img/icon-next2.png) no-repeat;
    &:hover{
        background: url(../img/icon-next2-hover.png) no-repeat;
    }
}
.ui-slide__trigger{
    font-size: 0;
    text-align: center;
    padding:  24px 0;
    li{
        @include inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin:0 6px;
        background-color: #888d8d;
        cursor:pointer;
        &.is-active{
            background-color: #ffe79c;
        }
    }
}
.ui-slide__link{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    &:hover{
        text-decoration: none;
    }
}
.editorbox-list{
    width: 500px - 28 * 2;
    height: 414px - 20;
    padding: 20px 28px 0;
    background-color: #e5caa1;
    h3{
        font-size: 18px;
        color:#333333;
        line-height: 24px;
    }
    p{
        color:#333333;
        line-height: 24px;
        position: relative;
        padding-left: 74px;
        font-size: 14px;
        span{
            line-height: 24px;
            position: absolute;
            font-weight: 700;
            left:0px;
            top:0px;
        }
    }
}
.editorbox-author{
    position: absolute;
    left:432px;
    top:0px;
    height: 414px;
    width: 500px;
    z-index: 999;
    .editorbox-list{
        display:none;
    }
}
.bbsparty-editor__video{
    width: 100%;
    height: 100%;
    position: fixed;
    left:0px;
    top:0px;
    z-index: 99999;
    display: none;
    .video-box{
        width: 880px;
        height: 570px;
        position: absolute;
        left:50%;
        top:50%;
        margin-left: -440px;
        margin-top: -285px;
        z-index: 3;
    }
    .hide{
        display: none;
    }
}
.bbsparty-editor__comment{
    background-color: #191919;
    margin: 40px 0;
    min-height: 300px;
}

.bbsparty-act-list{
    margin-top: 210px;
    background: url(../img/bg-2.png) no-repeat;
    width: 1000px;
    height: 360px;
    ul{
        width: 100%;
        @include clearfix;
    }
    li{
        width: 33.3%;
        height: 180px;
        float: left;
        position: relative;
    }
    .list-item{
        position: absolute;
        transition: all 300ms ease;
        // height: 306px;
        left: 50%;
        width: 242px;
        top: 23px;
        padding-bottom: 12px;
        margin-left: -121px;
        background-color: none;
        &:hover{
            background-color: #393431;
            top: -150px;
            .top3, .top4{
                display: block;
            }
        }
        .top1{
            text-align: center;
            margin-top: 23px;
            @include nowrap;
            width: 100%;
            overflow: hidden;
            em{
                width: 62px;
                height: 50px;
                display: inline-block;    
                vertical-align: text-bottom;
            }
            .num01{
                background: url(../img/act-01.png) center no-repeat;
            }
            .num02{
                background: url(../img/act-02.png) center no-repeat;
            }
            .num03{
                background: url(../img/act-03.png) center no-repeat;
            }
            .num04{
                background: url(../img/act-04.png) center no-repeat;
            }
            .num05{
                background: url(../img/act-05.png) center no-repeat;
            }
            .num06{
                background: url(../img/act-06.png) center no-repeat;
            }
            span{
                color: #c6332b;
                font-size: 24px;
                display: inline-block;
                line-height: 26px; 
                vertical-align: text-bottom;
            }
        }
        .top2{
            color: #ffffff;
            font-size: 16px;
            text-align: center;
            margin: 16px 0 0;
        }
        .top3{
            display: none;
            font-size: 14px;
            color: #958980;
            padding: 36px 16px 15px;
            line-height: 22px;
            height: 110px;
            overflow: hidden;
            strong{
                color: #c0a176;
                font-weight: 700;
            }
        }
        .top4{
            display: none;
            text-align: center;
            a{
                font-size: 14px;
                color: #ffe79c;
                &:hover{
                    text-decoration: underline;
                }
            }
        }
    }
}

.bbsparty-player{
    .mod-pic{
        overflow: hidden;
    }
    .bbsparty-player-btn{
        width: 100%;
        overflow: hidden;
        margin-bottom: 12px;
        span{
            color: #fff;
            line-height: 30px;
            width: 70px;
            background: #ea195a;
            text-align: center;
            float: right;
            cursor: pointer;
            font-size: 14px;
            &:hover{
                opacity: 0.8;
            }
        }
    }
    .mod-tips{
        height: 700px;
        color: #ffe79c;
        font-size: 30px;
        text-align: center;
        padding-top: 140px;
    }
}
.bbsparty-player__con{
    .hide{
        display: none;
    }
}
.mod-pic{
    font-size: 0;
    margin-right: -36px;
}
.mod-pic__list{
    width: 310px;
    @include inline-block;
    margin-right: 35px;
    margin-bottom: 50px;
    transition:all ease-in .2s;
    &:hover{
        box-shadow: 0 0 3px 1px rgba(#000,.3);
        a{
            text-decoration: none;
        }
    }
    a,img{
        display: block;
    }
    .mod-pic__link,img{
        width: 310px;
        height: 174px;
    }
    .mod-pic__link{
        position: relative;
        overflow: hidden;
        .link-mes{
            position: absolute;
            width: 300px;
            height: 40px; 
            left:0px;
            bottom:0px;
            text-align: right;  
            padding: 0 5px;  
            background: url(../img/bg-shadow.png) bottom repeat-x;
            font-size: 14px;
            color:#fff; 
            line-height: 46px;
            transition: bottom ease-in .2s;
            i{
                background: url(../img/icon-video.png) no-repeat;
                position: absolute;
                left:5px;
                top:50%;
                margin-top: -14px;
                width: 28px;
                height: 28px;
            }
        }
        .icon-play{
            width: 55px;
            height: 55px;
            position: absolute;
            left:50%;
            top:50%;
            margin-top: -23px;
            margin-left: -23px;
            background: url(../img/icon-play.png) no-repeat;
        }
        &:hover{
            .mod-pic-covershadow{
                top:0px;
            }
            .link-mes{
                bottom: -32px !important    ;
            }
        }
            
    }
    .mod-pic-covershadow{
        width: 100%;
        height: 100%;
        position: absolute;
        left:0px;
        top: 100%;
        @include transparent(#000,.6);
        // transition: top ease-in .3s;
    }
    .mod-pic__tit{
        font-size: 14px;
        color:#ffd59c;
        line-height: 20px;
        overflow: hidden;
        padding-top: 7px;
        margin-bottom: 8px;

    }
}

.bbsparty-wall{
    .mod-wall{
        margin-top: 30px;
        padding-bottom: 50px;
        height: 750px;
        @include clearfix;
    }
    .mod-aside{
        float: left;
        width: 300px;
        height: 100%;
        background: #23201e;
        .aside-inner{
            padding: 20px;
        }
        .user-info{
            @include clearfix;
            margin: 10px 0;
            .avatar{
                float: left;
                width: 40px;
                height: 40px;
                margin-right: 10px;
                img{
                    display: block;
                    width: 100%;
                    overflow: hidden;
                }
            }
            em{
                float: left;
                line-height: 40px;
                color: #d8b07a;
                font-size: 14px;
            }
        }
        textarea{
            background: #191715;
            border: none;
            margin: 0;
            width: 230px;
            height: 160px;
            line-height: 32px;
            resize: none;
            outline: none;
            font-size: 14px;
            color: #4b4744;
            padding: 0 15px;
        }
        .tips{
            line-height: 44px;
            color: #b28e5d;
            font-size: 14px;
        }
        .cont{
            background: #191715;
            color: #4b4744;
            font-size: 14px;
            padding: 5px 8px;
            line-height: 24px;
            margin-bottom: 40px;
        }
        .m-btn{
            line-height: 46px;
            color: #fff;
            width: 100%;
            cursor: pointer;
            font-size: 14px;
            text-align: center;
            margin-bottom: 20px;
            &:hover{
                opacity: 0.8;
            }
            &.type1{
                background: #23964e;
            }
            &.type2{
                background: #314d88;
            }
            &.type3{
                background: #9b1109;
            }
        }
    }
    .mod-content{
        margin-left: 300px;
        height: 710px;
        background: #292623;
        padding: 20px 0;
        position: relative;
        .content-inner{
            margin: 0 20px;
            height: 100%;
            overflow: auto;
            &::-webkit-scrollbar {  
                width: 8px;  
                height: 8px;  
            } 
            &::-webkit-scrollbar-track {  
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
                border-radius: 5px;  
                background-color: #23201e;  
            }
            &::-webkit-scrollbar-thumb {  
                border-radius: 10px;  
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
                background-color: #85663d;  
            } 
        }
        .mask-top{
            position: absolute;
            background: url(../img/text-bg1.png) top no-repeat;
            top: 20px;
            left: 0;
            height: 70px;
            width: 100%;
        }
        .mask-bottom{
            position: absolute;
            background: url(../img/text-bg2.png) bottom no-repeat;
            bottom: 20px;
            left: 0;
            height: 70px;
            width: 100%;
        }
        ul{

        }
        li{
            margin-top: 20px;
            margin-bottom: 30px;
            .avatar{
                float: left;
                width: 40px;
                height: 40px;
                img{
                    display: block;
                    overflow: hidden;
                    width: 100%;
                }
            }
            .cont{
                margin-left: 50px;

            }
            h4{
                color: #ffe79c;
                font-size: 14px;
            }
            p{
                font-size: 14px;
                color: #b28e5d;
                line-height: 22px;
            }
        }
    }
}