mixin newMessage(avatarUrl, nickName, messages, type)
	.chat__conversation-board__message-container(class={reversed: type === "me"})
		.chat__conversation-board__message__person
			.chat__conversation-board__message__person__avatar
				img(src=avatarUrl alt=nickName)
			span.chat__conversation-board__message__person__nickname= nickName
		.chat__conversation-board__message__context
			each message in messages
				.chat__conversation-board__message__bubble 
					span= message
		.chat__conversation-board__message__options
			button.btn-icon.chat__conversation-board__message__option-button.option-item.emoji-button
				svg( class="feather feather-smile sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true")
					circle( cx="12" cy="12" r="10")
					path( d="M8 14s1.5 2 4 2 4-2 4-2")
					line( x1="9" y1="9" x2="9.01" y2="9")
					line( x1="15" y1="9" x2="15.01" y2="9")
			button.btn-icon.chat__conversation-board__message__option-button.option-item.more-button
				svg( class="feather feather-more-horizontal sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true")
					circle( cx="12" cy="12" r="1")
					circle( cx="19" cy="12" r="1")
					circle( cx="5" cy="12" r="1")

#chat.--dark-theme
	.chat__conversation-board
		
		+newMessage(
		'https://randomuser.me/api/portraits/women/44.jpg', 
		'Monika Figi', 
		[`Somewhere stored deep, deep in my memory banks is the phrase "It really whips the llama's ass".`])
		
		+newMessage(
		'https://randomuser.me/api/portraits/men/32.jpg', 
		'Thomas Rogh', 
		[`Think the guy that did the voice has a Twitter?`])
		
		+newMessage(
		'https://randomuser.me/api/portraits/women/44.jpg', 
		'Monika Figi', 
		[`WE MUST FIND HIM!!`, `Wait ...`])
		
		+newMessage(
		'https://randomuser.me/api/portraits/men/9.jpg', 
		'Dennis Mikle', 
		[`Winamp's still an essential.`], 
		'me')
					
		
	.chat__conversation-panel
		.chat__conversation-panel__container
			button.chat__conversation-panel__button.panel-item.btn-icon.add-file-button
				svg(class="feather feather-plus sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true")
					line( x1="12" y1="5" x2="12" y2="19")
					line( x1="5" y1="12" x2="19" y2="12")
				
			button.chat__conversation-panel__button.panel-item.btn-icon.emoji-button
				svg( class="feather feather-smile sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true")
					circle( cx="12" cy="12" r="10")
					path( d="M8 14s1.5 2 4 2 4-2 4-2")
					line( x1="9" y1="9" x2="9.01" y2="9")
					line( x1="15" y1="9" x2="15.01" y2="9")
			
			
			input.chat__conversation-panel__input.panel-item(placeholder="Type a message...")
			button.chat__conversation-panel__button.panel-item.btn-icon.send-message-button
				svg(xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-reactid="1036")
					line( x1="22" y1="2" x2="11" y2="13")
					polygon( points="22 2 15 22 11 13 2 9 22 2")
			
			
				
			
View Compiled
.--dark-theme
	--chat-background: rgba(10, 14, 14, 0.95)
	--chat-panel-background: #131719
	--chat-bubble-background: #14181a
	--chat-add-button-background: #212324
	--chat-send-button-background: #8147fc
	--chat-text-color: #a3a3a3
	--chat-options-svg: #a3a3a3

@mixin centered 
	position: absolute
	top: 50%
	left: 50%
	transform: translate(-50%, -50%)

body
	background: url(https://images.unsplash.com/photo-1495808985667-ba4ce2ef31b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)
	background-size: cover
	

#chat
	background: var(--chat-background)
	max-width: 600px
	margin: 25px auto
	box-sizing: border-box
	padding: 1em
	border-radius: 12px
	position: relative
	overflow: hidden
	&::before
		content: ""
		position: absolute
		top: 0
		left: 0
		width: 100%
		height: 100%
		background: url(https://images.unsplash.com/photo-1495808985667-ba4ce2ef31b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) fixed
		z-index: -1

	.btn-icon
		position: relative
		cursor: pointer
		svg
			stroke: #FFF
			fill: #FFF
			width: 50%
			height: auto
			@include centered

	.chat
		&__conversation-board
			padding: 1em 0 2em
			height: calc(100vh - 55px - 2em - 25px * 2 - .5em - 3em)
			overflow: auto
	
			&__message-container.reversed
				flex-direction: row-reverse
				
				.chat__conversation-board__message__bubble 
					position: relative
	
					span
						&:not(:last-child)
							margin: 0 0 2em 0
		
				.chat__conversation-board__message__person
					margin: 0 0 0 1.2em
	
				.chat__conversation-board__message__options
					align-self: center
					position: absolute
					left: 0
					display: none
	
	
			&__message-container
				position: relative
				display: flex
				flex-direction: row
				
				&:hover 
					.chat__conversation-board__message__options
						display: flex
						align-items: center
					
					.option-item:not(:last-child)
						margin: 0 .5em 0 0
	
				&:not(:last-child)
					margin: 0 0 2em 0
		
			&__message__person
				text-align: center
				margin: 0 1.2em 0 0
	
				&__avatar
					height: 35px
					width: 35px
					overflow: hidden
					border-radius: 50%
					user-select: none
					ms-user-select: none
					position: relative
	
					&::before
						content: ""
						position: absolute
						height: 100%
						width: 100%
	
					img
						height: 100%
						width: auto
		
				&__nickname
					font-size: 9px
					color: #484848
					user-select: none
					display: none
		
			&__message__context
				max-width: 55%
				align-self: flex-end
	
			&__message__options
				align-self: center
				position: absolute
				right: 0
				display: none
				
				.option-item
					border: 0
					background: 0
					padding: 0
					margin: 0
					height: 16px
					width: 16px
					outline: none
	
				.emoji-button
					svg
						stroke: var(--chat-options-svg)
						fill: transparent
						width: 100%
		
				.more-button
					svg
						stroke: var(--chat-options-svg)
						fill: transparent
						width: 100%
	
			&__message__date
		
			&__message__bubble
		
				span
					width: fit-content
					display: inline-table
					word-wrap: break-word
					background: var(--chat-bubble-background)
					font-size: 13px
					color: var(--chat-text-color)
					padding: .5em .8em
					line-height: 1.5
					border-radius: 6px
					font-family: 'Lato', sans-serif
					
				&:not(:last-child)
					margin: 0 0 .3em
	
				&:active
					background: var(--chat-bubble-active-background)
				
		&__conversation-panel
			background: var(--chat-panel-background)
			border-radius: 12px
			padding: 0 1em
			height: 55px
			margin: .5em 0 0

			&__container
				display: flex
				flex-direction: row
				align-items: center
				height: 100%
				
				.panel-item:not(:last-child)
					margin: 0 1em 0 0

			&__button
				background: grey
				height: 20px
				width: 30px
				border: 0
				padding: 0
				outline: none
				cursor: pointer
		
			.add-file-button
				height: 23px
				min-width: 23px
				width: 23px
				background: var(--chat-add-button-background)
				border-radius: 50%
				svg
					width: 70%
					stroke: #54575c
	
			.emoji-button
				min-width: 23px
				width: 23px
				height: 23px
				background: transparent
				border-radius: 50%
				svg
					width: 100%
					fill: transparent
					stroke: #54575c
		
			.send-message-button
				background: var(--chat-send-button-background)
				height: 30px
				min-width: 30px
				border-radius: 50%
				transition: .3s ease
				&:active
					transform: scale(.97)
				
				svg
					margin: 1px -1px
	
			&__input
				width: 100%
				height: 100%
				outline: none
				position: relative
				color: var(--chat-text-color)
				font-size: 13px
				background: transparent
				border: 0
				font-family: 'Lato', sans-serif
				resize: none

@media only screen and (max-width: 600px)
	#chat
		margin: 0
		border-radius: 0
		.chat__conversation-board
			height: calc(100vh - 55px - 2em - .5em - 3em)
		.chat__conversation-board__message__options
			display: none !important
View Compiled
// Chcek out Damian Denis on Dribbble
// https://dribbble.com/shots/5587903-ECHO-Voice-chat-for-gamers
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Lato

External JavaScript

This Pen doesn't use any external JavaScript resources.