chat.css 5.44 KB
html, body, .main {
    height: 100%;
    overflow: hidden;
}

.stopro {
    font-size: .26rem;
    padding: .1rem .2rem;
    border-bottom: 1px #ddd solid;
}

.stopro .rad_50 {
    width: .5rem;
    height: .5rem;
    margin-right: .15rem;
    display: inline-block;
    vertical-align: middle;
}

.arrow_down_off {
    width: .22rem;
    height: .22rem;
    display: inline-block;
    vertical-align: middle;
    margin-left: .15rem;
    margin-top: -.05rem;
}

.chatreturn {
    float: right;
    width: .5rem;
    height: .5rem;
}

.sto_goods {
    padding: .1rem .2rem;
    background-color: #fff;
}

.sto_goods .rel {
    padding-left: 1.6rem;
    font-size: .26rem;
    height: 1.4rem;
}

.sto_goods .rel .chat_goods_img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 1.4rem;
    height: 1.4rem;
}

.return_href {
    float: right;
    display: inline-block;
    padding: .05rem .1rem;
    border: 1px #c4182e solid;
    color: #c4182e;
    margin-top: -.12rem;
}

.chat_goods_name {
    height: .8rem;
    line-height: .4rem;
    margin-bottom: .2rem;
    overflow: hidden;
}

.chatfoot {
    position: fixed;
    z-index: 10;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px #ddd solid;
    background-color: #fff;
    max-width: 720px;
    margin: auto;
    right: 0;
}

.chatfoot .inner {
    padding: .15rem .2rem;
    font-size: 0;
}

.footimg {
    width: .46rem;
    height: .46rem;
    display: inline-block;
    vertical-align: bottom;
    margin-right: .2rem;
}

.chatinput {
    display: inline-block;
    vertical-align: bottom;
    border: 1px #ddd solid;
    word-wrap: break-word;
    word-break: normal;
    width: 4.1rem;
    padding: 0 .1rem;
    min-height: .46rem;
    font-size: .26rem;
    line-height: .46rem;
}

.chat_sumb {
    display: inline-block;
    vertical-align: middle;
    background-color: #c4182e;
    height: .46rem;
    font-size: .26rem;
    color: #fff;
    line-height: .46rem;
    padding: 0 .2rem;
    margin-left: .15rem;
    border-radius: 3px;
}

.center {
    background-color: #e1e1e1;
    padding: .2rem .2rem 0;
    overflow-y: auto;
}

.stochat,
.vipchat {
    margin: .2rem 0 .3rem;
    font-size: 0;
}

.stochat .answer,
.vipchat .answer {
    display: inline-block;
    width: 5.8rem;
}

.stochat .answer .rad_50,
.vipchat .answer .rad_50 {
    width: .6rem;
    height: .6rem;
    margin-right: .25rem;
}

.vipchat .answer .rad_50 {
    margin-left: .25rem;
    margin-right: 0;
}

.stochat .answer .inner,
.vipchat .answer .inner {
    position: relative;
    max-width: 4rem;
    word-wrap: break-word;
    word-break: normal;
    /*min-width: 4rem;*/
    min-height: .4rem;
    line-height: .4rem;
    /*max-height: 2.8rem;*/
    padding: .05rem .1rem;
    background-color: #fff;
    font-size: .26rem;
    display: inline-block;
    vertical-align: top;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.vipchat .answer .inner {
    text-align: left;
}
.vipchat {
    text-align: right;
}
.stochat .answer .inner .chatsj{
    display: inline-block;
    position: absolute;
    left: -.09rem;
    top:.2rem;
    border-top: .1rem solid transparent;
    border-right: .1rem solid #fff;
    border-bottom: .1rem solid transparent;
    width: 0;
    height: 0;
}
.vipchat .answer .inner .chatsj{
    display: inline-block;
    position: absolute;
    right: -.09rem;
    top:.2rem;
    border-top: .1rem solid transparent;
    border-left: .1rem solid #fff;
    border-bottom: .1rem solid transparent;
    width: 0;
    height: 0;
}
.chatboximg {
    max-width: 100%;
}
/*表情包*/
.comment{width:680px; margin:20px auto; position:relative}
.comment h3{height:28px; line-height:28px}
.com_form{width:100%; position:relative}
.input{width:99%; height:60px; border:1px solid #ccc}
.com_form p{height:28px; line-height:28px; position:relative}
span.emotion{width:42px; height:20px; background:url(icon.gif) no-repeat 2px 2px;
    padding-left:20px; cursor:pointer}
span.emotion:hover{background-position:2px -28px}
.qqFace{margin-top:4px;background:#fff;width: 100%;overflow-x: auto;}
.qqFace table {
    width: 100%;
}
.qqFace table td{padding:0px;}
.qqFace table td img{cursor:pointer;border:1px #fff solid;
    margin:8px 13px;}
.qqFace table td img:hover{border:1px #0066cc solid;}
#show{width:680px; margin:20px auto}

/*商品链接*/
.stochat .answer .inner.goods_chat, .vipchat .answer .inner.goods_chat
{
    background-color: #ff736f;
}
.stochat .answer .inner.goods_chat .chatsj{
    border-right: .1rem solid #ff736f;
}
.vipchat .answer .inner.goods_chat .chatsj{
    border-left: .1rem solid #ff736f;
}

.vipchat .answer .inner.goods_chat .sto_goods{
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}