html仿qq消息列表,仿qq聊天消息发送

@charset "utf-8";

/* CSS Document */

* {

font-family:helvetica;

appearance:none;

-webkit-appearance:none;

-moz-appearance:none;

border:0;

margin:0;

padding:0;

}

input::-webkit-input-placeholder {

color:#ccc;

font-size:14px;

}

input:-ms-input-placeholder {

// IE10+

color:#ccc;

font-size:14px;

}

input:-moz-placeholder {

// Firefox4-18

color:#ccc;

font-size:14px;

}

input::-moz-placeholder {

// Firefox19+

color:#ccc;

font-size:14px;

}

ul {

list-style:none;

}

a {

text-decoration:none;

color:#333;

}

input {

border:1px solid #ccc;

}

p {

margin:0;

}

.title {

position:absolute;

display:block;

width:100%;

padding:0;

margin:0 -.5rem;

font-size:.85rem;

font-weight:500;

line-height:2.2rem;

color:#3d4145;

text-align:center;

white-space:nowrap;

left:0;

top:0;

}

.bar .icon {

position:relative;

z-index:20;

padding:.5rem .1rem;

font-size:1rem;

line-height:1.2rem;

}

a:active {

color:#0a8ddf;

}

a:active,a:hover {

outline:0;

}

.pull-right {

float:right;

}

.icon {

font-family:iconfont-sm!important;

font-style:normal;

-webkit-font-smoothing:antialiased;

-webkit-text-stroke-width:.2px;

-moz-osx-font-smoothing:grayscale;

}

.page {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

-moz-box-sizing:border-box;

box-sizing:border-box;

background:#efeff4;

}

.bar-nav {

top:0;

}

.bar {

position:absolute;

right:0;

left:0;

z-index:10;

height:2.2rem;

padding-right:.5rem;

padding-left:.5rem;

background-color:#f7f7f8;

border-bottom:1px solid #e7e7e7;

-webkit-backface-visibility:hidden;

backface-visibility:hidden;

}

.bar-tab {

bottom:0;

z-index:9000;

width:100%;

height:2.5rem;

padding:0;

table-layout:fixed;

border-top:1px solid #e7e7e7;

border-bottom:0;

border-left:0;

-webkit-transition-duration:.4s;

-o-transition-duration:.4s;

transition-duration:.4s;

}

.talk_record {

position:absolute;

top:2.2rem;

width:100%;

height:89%;

/*background:#eff0f2;

*/

background:white;

overflow-y:scroll;

}

.talk_recordboxme {

/*border:1px solid #ccc;

*/

display:block;

color:#afafaf;

padding:5px 0px 5px 0px;

overflow:hidden;

margin:5px;

}

.talk_recordbox {

/*border:1px solid #ccc;

*/

display:block;

color:#afafaf;

/*padding:5px 10px 5px 10px;

*/

overflow:hidden;

margin:5px;

}

.talk_recordboxme .user {

background:#a6d4f2;

float:right;

margin:0 2px 0px 2px;

font-size:12px;

line-height:20px;

text-align:center;

display:inline;

padding:5px 12px;

border-radius:15px;

color:#333;

}

.talk_recordbox .user {

background:#dbd8d5;

float:left;

margin:0 2px 0px 2px;

font-size:12px;

line-height:20px;

text-align:center;

display:inline;

padding:5px 12px;

border-radius:15px;

color:#333;

}

.talk_recordboxme .talk_recordtext {

float:right;

/*background:white;

*/

background:#a6d4f2;

padding:12px 12px;

border-radius:15px;

margin-right:20px;

max-width:185px;

}

.talk_recordbox .talk_recordtext {

float:left;

background:#dbd8d5;

padding:12px 12px;

border-radius:15px;

margin-left:20px;

max-width:185px;

}

.talk_recordtext > p {

font-size:13px;

color:#333;

font-family:helvetica;

}

.talk_recordtext > span {

font-size:12px;

color:#333;

}

.talk_recordtext {

position:relative;

}

.talk_recordboxme .talk_recordtextbg {

position:relative;

float:right;

}

.talk_recordboxme .talk_recordtextbg {

width:0;

height:0;

border:solid #ccc;

/*border-width:1px 15px 9px 18px;

*/

border-width:1px 18px 9px 15px;

border-color:transparent transparent transparent #a6d4f2;

position:absolute;

top:10px;

right:-28px;

}

/*.talk_recordbox .talk_recordtextbg {

position:relative;

float:right;

}

*/

.talk_recordbox .talk_recordtextbg {

width:0;

height:0;

border:solid #ccc;

/*border-width:15px 2px 15px 15px;

*/

border-width:1px 15px 9px 18px;

border-color:transparent #dbd8d5 transparent transparent;

position:absolute;

top:10px;

left:-28px;

}

/*输入键盘*/

.page #send-btn[disabled] {

background:#ccc;

color:white;

}

#textInput {

display:block;

float:left;

width:10rem;

height:1.8rem;

margin-top:0.34rem;

margin-left:1rem;

}

#picture-btn {

display:block;

float:left;

width:1.8rem;

height:1.4rem;

margin-top:0.40rem;

margin-left:1.6rem;

background:#f7f7f8;

}

#send-btn {

display:block;

float:left;

width:2.5rem;

height:1.5rem;

line-height:1.5rem;

margin-top:0.50rem;

margin-left:1.2rem;

background:#f7f7f8;

border:1px solid #ccc;

font-size:13px;

border-radius:.4rem;

}

#speak-btn {

display:block;

float:left;

width:1.8rem;

height:1.4rem;

margin-top:0.40rem;

margin-left:1.7rem;

background:#f7f7f8;

}

#picture-btn span,#speak-btn span {

font-size:24px;

line-height:27px;

}

.talk_recordtext p {

word-wrap:break-word;

}

.voice-case {

margin-top:2.2rem;

width:100%;

}

.voice-content {

width:100%;

height:14.4rem;

}

.voice-content img {

width:100%;

height:100%;

}

.button-case {

position:relative;

width:33.3%;

float:left;

height:100%;

text-align:center;

}

.sendVoice-btn {

background:white;

border:1px solid #ccc;

width:58px;

height:58px;

border-radius:29px;

position:absolute;

top:50%;

left:50%;

margin-left:-29px;

margin-top:-29px;

}

.voice-case {

display:none;

}

.speakVoice-btn {

background:white;

border:1px solid #ccc;

width:84px;

height:84px;

border-radius:42px;

position:absolute;

top:50%;

left:50%;

margin-left:-42px;

margin-top:-42px;

background:red;

}

.button-case .speakVoice-btn span.fa {

color:red;

}

.resetVoice-btn {

background:white;

border:1px solid #ccc;

width:58px;

height:58px;

border-radius:29px;

position:absolute;

top:50%;

left:50%;

margin-left:-29px;

margin-top:-29px;

}

#speakVoice-end {

background:white;

}

#speakVoice-end span.fa {

color:red!important;

}

.button-case button:nth-child(2) span.fa {

color:#666;

font-size:1rem;

margin-top:5px;

}

.button-case span {

color:#2196f3;

}

.button-case button:nth-child(2) {

display:none;

}

#speakVoice-disabled span.fa-circle {

color:red;

}

.sendVoice-disabled span.fa-circle {

color:#ccc;

}

#resetVoice-disabled span.fa-circle {

color:#ccc;

}