html在线聊天界面模板,一款带气泡对话框的HTML5聊天应用界面模板

admin管理员组

文章数量:1794759

html在线聊天界面模板,一款带气泡对话框的HTML5聊天应用界面模板

CSS

语言：

CSSSCSS

确定

@import url('fonts.googleapis/css?family=Roboto:100,400,700');

html,

body {

height: 100%;

margin: 0;

font-family: 'Roboto', sans-serif;

font-weight: 100;

}

body {

display: flex;

justify-content: center;

align-items: center;

}

#container {

width: 80%;

height: 80%;

display: flex;

box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

min-width: 600px;

}

aside,

#main {

flex-grow: 1;

height: 100%;

min-width: 300px;

}

aside {

background-color: #2F373F;

}

#main {

background-color: #E7EDED;

}

aside header {

background-color: #343E48;

padding: 10px;

padding-bottom: 0;

display: flex;

align-items: center;

justify-content: space-between;

color: #fff;

font-weight: bold;

}

aside ul {

padding-left: 10px;

list-style-type: none;

overflow: auto;

}

aside ul li {

display: flex;

justify-content: space-between;

align-items: flex-start;

color: #c0c0c0;

margin-bottom: 10px;

}

aside ul li div {

flex-grow: 1;

}

aside ul li .color {

border: 2px solid #2F373F;

}

.avatar {

margin-bottom: -5px;

margin-right: -10px;

}

.avatar img {

width: 40px;

height: 40px;

border-radius: 100%;

}

.color {

background-color: #4AD99B;

width: 8px;

height: 8px;

border-radius: 100%;

position: relative;

top: -16px;

right: -32px;

border: 2px solid #343E48;

}

.away {

background-color: #FA676A;

}

.main_li {

flex-grow: 2;

}

.selected {

border-bottom: 2px solid #fff;

}

.username {

margin-top: 5px;

}

.text {

font-size: 0.7em;

}

.time {

font-size: 0.6em;

flex-grow: 0.3;

margin-top: 10px;

}

#main {

display: flex;

flex-direction: column;

justify-content: space-between;

}

#main footer {

background-color: #fff;

padding: 10px;

display: flex;

justify-content: space-between;

}

#main footer textarea {

flex-grow: 2;

margin: 0 10px;

resize: none;

border: none;

padding-top: 5px;

height: 20px;

}

#main footer textarea:focus {

outline: none;

}

#main footer i {

color: #c0c0c0;

cursor: pointer;

cursor: hand;

}

#messages {

overflow: auto;

flex-grow: 2;

padding: 10px;

}

#messages article {

display: flex;

justify-content: flex-start;

margin-bottom: 20px;

}

#messages article .avatar {

margin-right: 10px;

}

#messages .right .avatar {

margin-right: 0;

}

.msg {

display: flex;

justify-content: space-between;

}

.msg .tri {

width: 0;

height: 0;

border-style: solid;

border-width: 0 10px 15px 0;

border-color: transparent #ffffff transparent transparent;

}

.msg_inner {

background-color: #fff;

width: 100%;

padding: 15px 10px;

border-radius: 0 4px 4px 4px;

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);

text-align: left;

}

.right {

flex-direction: row-reverse;

}

.right .msg {

flex-direction: row-reverse;

}

.right .msg .tri {

width: 0;

height: 0;

border-style: solid;

border-width: 15px 10px 0 0;

border-color: #ffffff transparent transparent transparent;

}

.right .msg .msg_inner {

border-radius: 4px 0 4px 4px;

box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.1);

text-align: right;

}

#credits {

position: fixed;

bottom: 0;

width: 100%;

}

#credits img {

border-radius: 100%;

width: 30px;

height: 30px;

margin-left: 10px;

}

#credits span {

display: block;

padding: 10px;

display: flex;

justify-content: flex-end;

align-items: center;

user-select: none;

}

本文标签： 在线界面模板气泡对话框