simple-chat-websocket-reactjs
Version:
### Props: In this article we will create a simple chat using websocket, nodeJs and ReactJs. From there you can play around and explore and add your own ideas and features.
58 lines • 11.2 kB
CSS
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #ededed url('data:image/png;base64,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')left center no-repeat;
background-position: 30px 30px;
}
.fixed-chat{
background: #fff;
border:1px solid #ccc;
position: fixed;
bottom: 0;
box-shadow: 1px 5px 10px #aaa;
right: 40px;
border-radius: 5px 5px 0px 0px;
width: 350px;
height: 450px;
}
.panel-chat{
height: 450px;
position: relative;
text-align: left;
}
.panel-chat .header-chat input{
padding: 5px;
border:1px solid #ccc;
}
.panel-chat .header-chat{
border-bottom:1px solid #ccc;
position: absolute;
top: 0;
left: 0;
padding: 10px;
right: 0;
}
.panel-chat .body-chat{
padding: 50px 10px;
}
.panel-chat .message-chat input[type="submit"]{
position: absolute;
right: 20px;
border:1px solid #222;
top: 19px;
padding: 5px 20px;
}
.panel-chat .message-chat input[type="text"]{
width: calc(100% - 30px);
padding: 15px;
border:1px solid #ccc;
}
.panel-chat .message-chat{
position: absolute;
padding: 10px;
bottom: 0;
left: 0;
right: 0;
background: #26ade4;
}