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
This Pen doesn't use any external JavaScript resources.