Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                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")
			
			
				
			
              
            
!

CSS

              
                .--dark-theme
	--chat-background: rgba(10, 14, 14, 0.95)
	--chat-panel-background: #131719
	--chat-bubble-background: #14181a
	--chat-bubble-active-background: #171a1b
	--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

              
            
!

JS

              
                // Chcek out Damian Denis on Dribbble
// https://dribbble.com/shots/5587903-ECHO-Voice-chat-for-gamers
              
            
!
999px

Console