cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

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.

            
              //- Daily UI #009 Music Player
.music-box
	.album
		.photo
		.infos
			.song
				span Flamingo
				small Oliver Heldens
	.dashboard
		.list
			.list-btn: span
		.player
			.time
				small.current 0:56
				|  / 
				small.duration 3:04
			.time-rail
				.thumb
				.track
		.action-button
			a.random: i.fa.fa-random
			a.prev: i.fa.fa-step-backward
			a.play-pause: i.fa.fa-pause
			a.stop: i.fa.fa-stop
			a.next: i.fa.fa-step-forward
			a.repeat: i.fa.fa-repeat
			a.volume: i.fa.fa-volume-up
	.lists
		.label MENU
		.box
		ul
			- for(var i = 0; i < 10; i++)
				li
					span Famingo
						small Oliver Heldens
					em 3:04
            
          
!
            
              @import 'https://fonts.googleapis.com/css?family=Open+Sans'
$color: (main: #463239, accent: #ffba49, light: #c6ad94)
=bdrs($bdrs)
	border-radius: $bdrs
=size($w, $h)
	width: $w
	height: $h
*
	outline: none
	user-select: none
body, html
	margin: 0
	background: #ddd
body
	font-family: 'Open Sans', 'Microsoft JhengHei', Arial, sans-serif

.music-box
	position: absolute
	top: 50%
	left: 50%
	transform: translate(-50%,-50%)
	padding: 15px
	+size(364px, initial)
	background-color: map-get($color, main)
	box-shadow: 0 0 15px #535353
	+bdrs(3px)
	overflow: hidden
	.album
		position: relative
		.photo
			background: url('https://zero-space.s3.amazonaws.com/photos/cd69aadc-9775-49fc-8c1a-b80c1c380d4ax840.jpg') no-repeat 100% 100%
			background-size: cover
			+size(100%, 300px)
		.infos
			background-color: rgba(map-get($color, main), .3)
			+size(100%, 60px)
			position: absolute
			bottom: 0
			.song
				padding: 10px
				color: map-get($color, light)
				letter-spacing: .5px
				span, small
					display: block
	.dashboard
		margin-top: 15px
		.list
			position: relative
			transition-duration: .3s
			background-color: #eee
			right: 0
			.list-btn
				z-index: 2
				background-color: map-get($color, accent)
				+size(44px, 44px)
				position: absolute
				right: 5px
				top: -44px
				cursor: pointer
				transition-duration: .3s
				transition-delay: .9s
				span
					top: 50%
					left: 50%
					transform: translate(-50%, -50%)
					display: block
					+size(28px, 1px)
					background-color: map-get($color, main)
					position: relative
					transition: width .3s .3s, background-color .3s .6s
					transition-timing-function: linear
					&::before, &::after
						background-color: map-get($color, main)
						content: ""
						+size(28px, 1px)
						position: absolute
						left: 0
						top: 0
						transition-timing-function: linear
						transition: width .3s .3s, margin .3s .6s, transform .3s .3s
					&::before
						margin-top: 6px
					&::after
						margin-top: -6px
			&.active
				.list-btn
					top: -322px
					transition: top .3s .6s
					span
						background-color: transparent
						width: 34px
						transition: width .3s, background-color .3s
						&::before, &::after
							margin: 0
							width: 34px
							transition: width .3s, margin .3s, transform .3s .3s
						&::before
							transform: rotate(225deg)
						&::after
							transform: rotate(315deg)
		.player
			.time
				color: map-get($color, light)
			.time-rail
				height: 1px
				position: relative
				padding: 15px 0
				overflow: hidden
				.thumb, .track
					position: absolute
					top: 50%
					transform: translateY(-50%)
					cursor: pointer
				.thumb
					+size(10px, 10px)
					+bdrs(50%)
					background-color: map-get($color, accent)
					z-index: 1
					left: 30%
					transition: .3s
					&:hover
						transform: translateY(-50%) scale(1.2)
					&::before
						content: ''
						+size(500px, 1px)
						background-color: map-get($color, accent)
						position: absolute
						top: 50%
						transform: translateY(-50%)
						right: 0
				.track
					top: 50%
					+size(100%, 1px)
					background-color: map-get($color, light)
				input[type="range"]
					width: 100%
					-webkit-appearance: none
					overflow: hidden
					background: none
					&::-webkit-slider-thumb
						-webkit-appearance: none
						position: relative
						+size(10px, 10px)
						+bdrs(50%)
						background-color: map-get($color, accent)
		.action-button
			text-align: center
			a
				cursor: pointer
				display: inline-block
				+size(44px, 44px)
				margin: 3px
				line-height: 44px
				color: map-get($color, light)
				transition-duration: .3s
				&:hover
					color: map-get($color, accent)
					&.play-pause
						border-color: map-get($color, accent)
				&.play-pause
					+bdrs(50%)
					border: 1px solid map-get($color, light)
					font-size: 1.5em
					+size(54px, 54px)
					line-height: 54px
					&.active
						border-color: map-get($color, accent)
						i::before
							content: "\f04b"
							margin-left: 5px
				&.active
					color: map-get($color, accent)
		
	.lists
		z-index: 1
		position: absolute
		+size(100%, 100%)
		top: 0
		left: 0
		background-color: map-get($color, main)
		transform: translateX(-100%)
		transition: .3s 0s
		&.active
			transform: translateX(0)
			transition: .3s .9s
		.label
			font-size: 2em
			padding: 8px 15px
			height: 60px
			box-sizing: border-box
			color: map-get($color, accent)
		ul
			padding-left: 0
			margin: 0
			list-style-type: none
			+size(100%, calc(100% - 60px))
			position: absolute
			overflow-y: auto
			background-color: map-get($color, light)
			&::-webkit-scrollbar
				width: 6px
				background-color: transparent
			&::-webkit-scrollbar-track
				background-color: map-get($color, main)
			&::-webkit-scrollbar-thumb
				background-color: map-get($color, accent)
				+bdrs(3px)
			li
				cursor: pointer
				padding: 5px 15px
				transition-duration: .3s
				span, em
					display: inline-block
				span
					small
						display: block
				em
					float: right
					top: 0
					font-style: normal
					font-size: 12px
					margin-top: 12px
				&:nth-of-type(odd)
					background-color: rgba(map-get($color, main), .1)
				&:hover
					background-color: rgba(map-get($color, main), .3)
            
          
!
            
              $(".list-btn").click ->
	$(this).parent().toggleClass "active"
	$(".lists").toggleClass "active"
$(".action-button").find('a').click ->
	if $(this).hasClass("random") || $(this).hasClass("play-pause") || $(this).hasClass("repeat")
		$(this).toggleClass "active"
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console