* {
margin:0;
padding:0;
box-sizing:border-box;
}
.talk-window {
width:450px;
height:400px;
background-color:whitesmoke;
box-shadow:0 0 10px #ccc;
position:fixed;
bottom:10px;
right:30px;
}
.tw-title {
text-align:center;
line-height:40px;
font-size:14px;
font-weight:bold;
color:#666;
position:relative;
}
.close-tw-window {
display:inline-block;
width:20px;
height:20px;
position:absolute;
right:10px;
top:10px;
line-height:20px;
font-size:24px;
cursor:pointer;
color:#666;
}
.close-tw-window:hover {
color:#333;
}
.tw-content {
padding:0 10px 150px;
width:100%;
height:calc(100% - 40px);
}
.talk-list-div {
width:100%;
height:100%;
border:5px double #ccc;
padding:5px 10px;
overflow:auto;
}
.msg-div {
overflow:hidden;
margin:20px 0;
}
.other-msg-div {
float:left;
max-width:260px;
position:relative;
padding-left:35px;
}
.header-img-div {
width:30px;
height:30px;
overflow:hidden;
border-radius:30px;
}
.other-msg-div .header-img-div {
position:absolute;
left:0;
top:5px;
}
.my-msg-div {
float:right;
max-width:260px;
position:relative;
padding-right:35px;
}
.my-msg-div .header-img-div {
position:absolute;
right:0;
top:5px;
}
.header-img-div img {
width:100%;
height:100%;
}
.msg-content {
padding:10px;
border-radius:5px;
}
.other-msg-div .msg-content {
background-color:#f4ecdd;
color:#333;
}
.my-msg-div .msg-content {
background-color:#403dff;
color:white;
}
.talk-operate-div {
width:100%;
height:150px;
position:absolute;
bottom:0;
left:0;
padding:5px 10px 0 10px;
}
.talk-operate-btn-list {
width:100%;
height:30px;
line-height:30px;
background-color:white;
margin-bottom:5px;
font-size:12px;
}
.talk-operate-textarea {
height:75px;
}
.talk-operate-textarea textarea {
width:100%;
max-height:70px;
min-height:70px;
height:70px;
padding:5px 10px;
background-color:white;
outline:none;
max-width:100%;
min-width:100%;
resize:none;
}
.send-btn {
text-align:right;
}
.send-btn span {
display:inline-block;
padding:0 20px;
background-color:#403dff;
color:white;
font-size:14px;
line-height:30px;
cursor:pointer;
border-radius:5px;
}