vanilla-js-chat/dist/vanillaJsChat.css

A tiny html chat using pure Javascript.

.vanilla-js-chat__btn{padding:10px;border:1px solid #555454;font-weight:bold;text-transform:uppercase;letter-spacing:1px;outline:none;cursor:pointer}.vanilla-js-chat__btn:hover{background:#d8d5d5}.vanilla-js-chat__input{-webkit-box-flex:1;flex:1;padding:10px;border:1px solid #555454;margin-right:10px;outline:none}.vanilla-js-chat__message{background:white;margin-bottom:15px;border-radius:4px}.vanilla-js-chat__message.right{text-align:right;margin-left:25px}.vanilla-js-chat__message.left{margin-right:25px}.vanilla-js-chat__message.blue{background:#c4d8fd;box-shadow:0 1px 6px 0 #c4d8fd}.vanilla-js-chat__message.green{background:#c4fdd2;box-shadow:0 1px 6px 0 #c4fdd2}.vanilla-js-chat__message.red{background:#fdc4c4;box-shadow:0 1px 6px 0 #fdc4c4}.vanilla-js-chat__message.yellow{background:#ecfdc4;box-shadow:0 1px 6px 0 #ecfdc4}.vanilla-js-chat__message__name{font-size:12px;font-weight:14px;font-weight:bold;margin-bottom:5px;color:#555454}.vanilla-js-chat__message__text{font-size:16px}.vanilla-js-chat__message__body{padding:10px;position:relative}.vanilla-js-chat{width:100%;border:1px solid rgba(34,0,34,0.0666667);border-radius:4px}.vanilla-js-chat__title{text-align:center;letter-spacing:1px;font-size:16px;color:#555454}.vanilla-js-chat__header{width:100%;margin-bottom:5px;padding:10px;box-shadow:0px 2px 3px -1px rgba(34,0,34,0.0666667)}.vanilla-js-chat__body{max-height:300px;min-height:10px;overflow-y:scroll;padding:5px;margin-bottom:5px;-ms-overflow-style:none}.vanilla-js-chat__body::-webkit-scrollbar{display:none}.vanilla-js-chat__controller{display:-webkit-box;display:flex;padding:10px}