Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

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.

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

              
                <div class="list">
	<div class="playlist">
		<button class="displayList">List</button>
	</div>
</div>
<div class="diskTable">
	<div class="lines"></div>
	<div class="disk"></div>
	<div class="controls">
		<div class="title">
			<h2>黑色幽默</h2>
			<h3>周杰倫</h3>
			<div class="volumn slide">
				<input type="range" min="0" max="1" step="0.1" class="slider" />
			</div>
	<div class="timeline slide">
				<input type="range" min="0" max="1" step="0.1" class="slider" />
			</div>
		</div>
		<button class="prev"></button>
		<button class="next"></button>
		<button class="random"></button>
		<div class="player"></div>
		<button class="play"></button>
	</div>
</div>

              
            
!

CSS

              
                $rootFontSize: 16;

$white:           	#fff;
$black:           	#000;
$gray:				#dfdfdf;
$gray2:				#c5c5c5;
$salmon:			#FF8C6E;

$colors: (
	white:           	$white,
	black:           	$black,
	gray:				$gray,
	gray2:				$gray2,
	salmon: 		   	$salmon,
);

$font-lato: 'Noto Sans TC';

@mixin font-source-sans($font: $font-lato, $size: false, $colour: false, $weight: false, $lh: false) {
	font-family: $font;
	@if $size   { font-size: $size; }
	@if $colour { color: $colour; }
	@if $weight { font-weight: $weight; }
	@if $lh     { line-height: $lh; }
}

@mixin NotoSansTC($size: false, $colorful: false, $weight: false,  $lh: false) {
	@include font-source-sans($font-lato, $size, $colorful, $weight, $lh);
	@content;
}

:root {
	font-size: $rootFontSize + px;
}

* {
	@include NotoSansTC(16px, $black, 400, 1.5) {
		box-sizing: border-box;
		padding: 0;
		margin: 0;
		outline: none;
	}
}

body {
	position: relative;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
    background-color: $salmon;
}

.list,
.playlist {
	position: absolute;
	display: block;
	width: 57.1875vw;
	height: 91.5vh;
	background-color: $white;
	border: 3px solid $black;
}

.list {
	left: -50%;
	top: -10%;
	
	transform: translateX(-17.5%) rotate(25deg);
}

.playlist {
	right: -15px;
	top: 15px;
}

.displayList {
	float: right;
	position: relative;
	display: inline-block;
	cursor: pointer;
	background-color: transparent;
	border-width: 0px;
	border-bottom: 3px solid $black;
	padding-bottom: 1em;
	margin: .75em;
	
	&::before, &::after {
		content: '\200B';
		position: absolute;
		bottom: 0;
		display: block;
		width: 100%;
		height: 3px;
		background-color: $black;
	}
	
	&::before { bottom: 9px; }
	&::after { bottom: 3px; }
}

.diskTable {
	position: relative;
	display: block;
	width: 57.1875vw;
	max-width: 750px;
	height: 91.5vh;
	background-color: $white;
	border: 3px solid $black;
	
	&::before, &::after {
		content: '\200B';
		display: block;
		border: 3px solid $black;
		position: absolute;
		background-color: $gray2;
		border-radius: 4px;
	}
	
	&::before {
		right: -26px;
		top: -5px;
		width: 20px;
		height: calc(100% + 1px);
		transform: skewY(45deg);
		transform-origin: top left;
	}
	
	&::after {
		left: -5px;
		bottom: -25px;
		width: calc(100% + 1px);
		height: 19px;
		transform: skewX(45deg);
		transform-origin: top left;
	}
}

.disk {
	background-image: url('data:image/jpeg;base64,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');
}

.lines, .disk {
	display: block;
	font-size: 0px;
	position: absolute;
	top: 33%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	&::before, &::after {
		content: '\200B';
		display: block;
	}
	
	&::after {
		padding-bottom: 100%;
	}
}

.lines {
	width: 45vw;
	
	&::before, &::after {
		display: block;
	}
}

.disk {
	width: 39vw;
	max-width: 475px;
	border-radius: 50%;
	border: 3px solid $black;
	background-size: contain;
	
	&::before {
		width: 9vw;
		height: 9vw;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: $white;
		border: 3px solid $black;
	}
}

.controls {
	display: block;	
	width: 100%;
	height: 100%;
	font-weight: 700;
	padding: 24px;
	
	h2 {
		font-size: 24px;
		font-weight: 700;
	}
	
	h3 {
		font-size: 16px;
	}
	
	.title {
		position: absolute;
		bottom: 0;
		display: flex;
		flex-flow: row wrap;
		width: calc(100% - 48px);
		height: 15%;
		
		h2, h3 {
			flex: 1 1 60%;
		}
	}
	
	button {
		position: absolute;
		display: block;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		border: 3px solid $black;
		background-color: transparent;
		box-shadow: 3px 3px 0 0 $gray2, 6px 6px 0 0 $black;
		margin: 0;
		
		&.play {
			background-size: 32px 29px;
			background-repeat: no-repeat;
			background-position: center;
			background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjMsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5ZyW5bGkXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMzIgMzYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDM2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDozO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkuc3Qxe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MztzdHJva2UtbGluZWNhcDpyb3VuZDt9DQoJLnN0MntmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjM7fQ0KCS5zdDN7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDozO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8ZyBpZD0iUG9seWdvbl85IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzOCkgcm90YXRlKDkwKSI+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTcuNiwzNi41SDYuNWMtMS42LDAtMy4xLTAuOC0zLjktMi4zYy0wLjgtMS40LTAuOC0zLjEsMC00LjVsMTEuNi0yMGMwLjgtMS40LDIuMy0yLjIsMy45LTIuMg0KCQlzMy4xLDAuOCwzLjksMi4ybDExLjYsMjBjMC44LDEuNCwwLjgsMy4xLDAsNC41Yy0wLjgsMS40LTIuMywyLjMtMy45LDIuM0gxNy40Ii8+DQo8L2c+DQo8L3N2Zz4NCg==');
		}
		
		&.prev, 
		&.next,
		&.random {
			right: 25px;
			background-size: 21px 21px;
    		background-repeat: no-repeat;
    		background-position: center;
		}
		
		&.prev, &.next {
			background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjMsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5ZyW5bGkXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMjEgMjEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIxIDIxOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDozO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkuc3Qxe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MztzdHJva2UtbGluZWNhcDpyb3VuZDt9DQoJLnN0MntmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjM7fQ0KCS5zdDN7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDozO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cGF0aCBkPSJNMTksMjAuNmMtMC40LDAtMC43LTAuMS0xLTAuM2wtMTMuMS04Yy0wLjYtMC40LTEtMS0xLTEuN3MwLjQtMS4zLDEtMS43bDEzLjEtOGMwLjYtMC40LDEuNC0wLjQsMiwwYzAuNiwwLjQsMSwxLDEsMS43DQoJdjE1LjljMCwwLjctMC40LDEuNC0xLDEuN0MxOS43LDIwLjUsMTkuMywyMC42LDE5LDIwLjZ6IE03LjgsMTAuNkwxOCwxNi44VjQuNEw3LjgsMTAuNnoiLz4NCjxwYXRoIGQ9Ik0xLjUsMjAuMWMtMC44LDAtMS41LTAuNy0xLjUtMS41di0xN2MwLTAuOCwwLjctMS41LDEuNS0xLjVTMywwLjgsMywxLjZ2MTdDMywxOS40LDIuMywyMC4xLDEuNSwyMC4xeiIvPg0KPC9zdmc+DQo=');
		}
		
		&.prev {
			top: 45px;
		}
		
		&.next {
			top: 145px;
			transform: rotate(180deg);
			box-shadow: -3px -3px 0 0 $gray2, -6px -6px 0 0 $black;
		}
		
		&.random {
			bottom: 15%;
			background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNC43MTIiIGhlaWdodD0iMjMuNTc2IiB2aWV3Qm94PSIwIDAgMzQuNzEyIDIzLjU3NiI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTExMTUuOTI2IC0yNTQpIj48cGF0aCBkPSJNMTExNi43MzksMjcxLjI3OXM2LjY5MywwLDEwLjY4OC0yLjQ1M2wuMTMzLS4wODhjMS4zMS0uNzkyLDIuNDg2LTMuOTUsMy45NjItNi40MTRsLjA0Ny0uMDc4YzQuMDc0LTYuOCwxMC42ODgtNS41MTgsMTIuNzc3LTQuOTI2LjAyLDAsLjE4OC4wNjQuMTg4LjA2NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC43MDUgMS4wOTQpIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIi8+PHBhdGggZD0iTTExMTYuNzIxLDI1Ny40MzhzNi43MS0xLjg1NCwxMC43MDYuODY5YzEuNDQzLjk3OCwyLjYxOSw0LjQ4OSw0LjEsNy4yMjlsLjA0Ny4wODZjNC4wNzQsNy41NjIsMTAuNDkyLDYuODQ3LDEyLjU4MSw2LjE4OSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC43MDUgMC45ODMpIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIi8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTE1MC42MzggMjU0KSByb3RhdGUoOTApIj48cGF0aCBkPSJNIDcuNTQ1MTczMTY4MTgyMzczIDUuMTM4MTgwMjU1ODg5ODkzIEwgMi4xODM0NzMxMTAxOTg5NzUgNS4xMzgxODAyNTU4ODk4OTMgQyAxLjg4NTY3MzE2NTMyMTM1IDUuMTM4MTgwMjU1ODg5ODkzIDEuNzYwMjQzMTc3NDEzOTQgNC45MTQ4MzAyMDc4MjQ3MDcgMS43Mjg4OTMxNjA4MjAwMDcgNC44NDYzODAyMzM3NjQ2NDggQyAxLjY5NzUzMzEzMDY0NTc1MiA0Ljc3NzkzMDI1OTcwNDU5IDEuNjEwMzYzMTI1ODAxMDg2IDQuNTM3MDUwMjQ3MTkyMzgzIDEuODA0OTAzMTQ5NjA0Nzk3IDQuMzExNTcwMTY3NTQxNTA0IEwgNC40ODU3NDMwNDU4MDY4ODUgMS4yMDQyMzAzMDg1MzI3MTUgQyA0LjU4MjIwMjkxMTM3Njk1MyAxLjA5MjQyMDMzOTU4NDM1MSA0LjcxNjY1MzM0NzAxNTM4MSAxLjAzMDg1MDI5MTI1MjEzNiA0Ljg2NDMyMzEzOTE5MDY3NCAxLjAzMDg1MDI5MTI1MjEzNiBDIDUuMDExOTkyOTMxMzY1OTY3IDEuMDMwODUwMjkxMjUyMTM2IDUuMTQ2NDQzMzY3MDA0Mzk1IDEuMDkyNDIwMzM5NTg0MzUxIDUuMjQyOTEzMjQ2MTU0Nzg1IDEuMjA0MjMwMzA4NTMyNzE1IEwgNy45MjM3NDMyNDc5ODU4NCA0LjMxMTU3MDE2NzU0MTUwNCBDIDguMTE4MjgzMjcxNzg5NTUxIDQuNTM3MDUwMjQ3MTkyMzgzIDguMDMxMTEyNjcwODk4NDM4IDQuNzc3OTMwMjU5NzA0NTkgNy45OTk3NTI5OTgzNTIwNTEgNC44NDYzODAyMzM3NjQ2NDggQyA3Ljk2ODQwMzMzOTM4NTk4NiA0LjkxNDgzMDIwNzgyNDcwNyA3Ljg0Mjk3MzIzMjI2OTI4NyA1LjEzODE4MDI1NTg4OTg5MyA3LjU0NTE3MzE2ODE4MjM3MyA1LjEzODE4MDI1NTg4OTg5MyBaIiBzdHJva2U9Im5vbmUiLz48cGF0aCBkPSJNIDQuODY0MzIzMTM5MTkwNjc0IDEuNTMwODQwMzk2ODgxMTA0IEwgMi4xODM0ODMxMjM3NzkyOTcgNC42MzgxODAyNTU4ODk4OTMgQyAyLjE4MzQ4MzEyMzc3OTI5NyA0LjYzODE4MDI1NTg4OTg5MyAyLjE4MzQ4MzEyMzc3OTI5NyA0LjYzODE4MDI1NTg4OTg5MyAyLjE4MzQ3MzExMDE5ODk3NSA0LjYzODE4MDI1NTg4OTg5MyBMIDcuNTQ1MTYzMTU0NjAyMDUxIDQuNjM4MTgwMjU1ODg5ODkzIEwgNC44NjU4NDMyOTYwNTEwMjUgMS41MzA5OTAxMjM3NDg3NzkgQyA0Ljg2NTY5MzA5MjM0NjE5MSAxLjUzMDk1MDA2OTQyNzQ5IDQuODY1MTIzMjcxOTQyMTM5IDEuNTMwODUwNDEwNDYxNDI2IDQuODY0MzIzMTM5MTkwNjc0IDEuNTMwODUwNDEwNDYxNDI2IEwgNC44NjQzMjMxMzkxOTA2NzQgMS41MzA4NDAzOTY4ODExMDQgTSA0Ljg2NDMyMzEzOTE5MDY3NCAwLjUzMDg0NzU0OTQzODQ3NjYgQyA1LjE0MzE3Nzk4NjE0NTAyIDAuNTMwODQ3NTQ5NDM4NDc2NiA1LjQyMjAzMzMwOTkzNjUyMyAwLjY0NjQzNTI2MDc3MjcwNTEgNS42MjE0ODMzMjU5NTgyNTIgMC44Nzc2MTAyMDY2MDQwMDM5IEwgOC4zMDIzMjMzNDEzNjk2MjkgMy45ODQ5NTAzMDQwMzEzNzIgQyA4Ljg2MTQwMzQ2NTI3MDk5NiA0LjYzMjk4MDM0NjY3OTY4OCA4LjQwMTAzMzQwMTQ4OTI1OCA1LjYzODE4MDI1NTg4OTg5MyA3LjU0NTE3MzE2ODE4MjM3MyA1LjYzODE4MDI1NTg4OTg5MyBMIDIuMTgzNDczMTEwMTk4OTc1IDUuNjM4MTgwMjU1ODg5ODkzIEMgMS4zMjc2MTI4NzY4OTIwOSA1LjYzODE4MDI1NTg4OTg5MyAwLjg2NzI0MjgxMzExMDM1MTYgNC42MzI5ODAzNDY2Nzk2ODggMS40MjYzMjI5MzcwMTE3MTkgMy45ODQ5NTAzMDQwMzEzNzIgTCA0LjEwNzE2Mjk1MjQyMzA5NiAwLjg3NzYxMDIwNjYwNDAwMzkgQyA0LjMwNjYxMjk2ODQ0NDgyNCAwLjY0NjQzNTI2MDc3MjcwNTEgNC41ODU0NjgyOTIyMzYzMjggMC41MzA4NDc1NDk0Mzg0NzY2IDQuODY0MzIzMTM5MTkwNjc0IDAuNTMwODQ3NTQ5NDM4NDc2NiBaIiBzdHJva2U9Im5vbmUiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTE1MC42MzggMjY3Ljg0Nykgcm90YXRlKDkwKSI+PHBhdGggZD0iTSA3LjU0NTE3MzE2ODE4MjM3MyA1LjEzODE4MDI1NTg4OTg5MyBMIDIuMTgzNDczMTEwMTk4OTc1IDUuMTM4MTgwMjU1ODg5ODkzIEMgMS44ODU2NzMxNjUzMjEzNSA1LjEzODE4MDI1NTg4OTg5MyAxLjc2MDI0MzE3NzQxMzk0IDQuOTE0ODMwMjA3ODI0NzA3IDEuNzI4ODkzMTYwODIwMDA3IDQuODQ2MzgwMjMzNzY0NjQ4IEMgMS42OTc1MzMxMzA2NDU3NTIgNC43Nzc5MzAyNTk3MDQ1OSAxLjYxMDM2MzEyNTgwMTA4NiA0LjUzNzA1MDI0NzE5MjM4MyAxLjgwNDkwMzE0OTYwNDc5NyA0LjMxMTU3MDE2NzU0MTUwNCBMIDQuNDg1NzQzMDQ1ODA2ODg1IDEuMjA0MjMwMzA4NTMyNzE1IEMgNC41ODIyMDI5MTEzNzY5NTMgMS4wOTI0MjAzMzk1ODQzNTEgNC43MTY2NTMzNDcwMTUzODEgMS4wMzA4NTAyOTEyNTIxMzYgNC44NjQzMjMxMzkxOTA2NzQgMS4wMzA4NTAyOTEyNTIxMzYgQyA1LjAxMTk5MjkzMTM2NTk2NyAxLjAzMDg1MDI5MTI1MjEzNiA1LjE0NjQ0MzM2NzAwNDM5NSAxLjA5MjQyMDMzOTU4NDM1MSA1LjI0MjkxMzI0NjE1NDc4NSAxLjIwNDIzMDMwODUzMjcxNSBMIDcuOTIzNzQzMjQ3OTg1ODQgNC4zMTE1NzAxNjc1NDE1MDQgQyA4LjExODI4MzI3MTc4OTU1MSA0LjUzNzA1MDI0NzE5MjM4MyA4LjAzMTExMjY3MDg5ODQzOCA0Ljc3NzkzMDI1OTcwNDU5IDcuOTk5NzUyOTk4MzUyMDUxIDQuODQ2MzgwMjMzNzY0NjQ4IEMgNy45Njg0MDMzMzkzODU5ODYgNC45MTQ4MzAyMDc4MjQ3MDcgNy44NDI5NzMyMzIyNjkyODcgNS4xMzgxODAyNTU4ODk4OTMgNy41NDUxNzMxNjgxODIzNzMgNS4xMzgxODAyNTU4ODk4OTMgWiIgc3Ryb2tlPSJub25lIi8+PHBhdGggZD0iTSA0Ljg2NDMyMzEzOTE5MDY3NCAxLjUzMDg0MDM5Njg4MTEwNCBMIDIuMTgzNDgzMTIzNzc5Mjk3IDQuNjM4MTgwMjU1ODg5ODkzIEMgMi4xODM0ODMxMjM3NzkyOTcgNC42MzgxODAyNTU4ODk4OTMgMi4xODM0ODMxMjM3NzkyOTcgNC42MzgxODAyNTU4ODk4OTMgMi4xODM0NzMxMTAxOTg5NzUgNC42MzgxODAyNTU4ODk4OTMgTCA3LjU0NTE2MzE1NDYwMjA1MSA0LjYzODE4MDI1NTg4OTg5MyBMIDQuODY1ODQzMjk2MDUxMDI1IDEuNTMwOTkwMTIzNzQ4Nzc5IEMgNC44NjU2OTMwOTIzNDYxOTEgMS41MzA5NTAwNjk0Mjc0OSA0Ljg2NTEyMzI3MTk0MjEzOSAxLjUzMDg1MDQxMDQ2MTQyNiA0Ljg2NDMyMzEzOTE5MDY3NCAxLjUzMDg1MDQxMDQ2MTQyNiBMIDQuODY0MzIzMTM5MTkwNjc0IDEuNTMwODQwMzk2ODgxMTA0IE0gNC44NjQzMjMxMzkxOTA2NzQgMC41MzA4NDc1NDk0Mzg0NzY2IEMgNS4xNDMxNzc5ODYxNDUwMiAwLjUzMDg0NzU0OTQzODQ3NjYgNS40MjIwMzMzMDk5MzY1MjMgMC42NDY0MzUyNjA3NzI3MDUxIDUuNjIxNDgzMzI1OTU4MjUyIDAuODc3NjEwMjA2NjA0MDAzOSBMIDguMzAyMzIzMzQxMzY5NjI5IDMuOTg0OTUwMzA0MDMxMzcyIEMgOC44NjE0MDM0NjUyNzA5OTYgNC42MzI5ODAzNDY2Nzk2ODggOC40MDEwMzM0MDE0ODkyNTggNS42MzgxODAyNTU4ODk4OTMgNy41NDUxNzMxNjgxODIzNzMgNS42MzgxODAyNTU4ODk4OTMgTCAyLjE4MzQ3MzExMDE5ODk3NSA1LjYzODE4MDI1NTg4OTg5MyBDIDEuMzI3NjEyODc2ODkyMDkgNS42MzgxODAyNTU4ODk4OTMgMC44NjcyNDI4MTMxMTAzNTE2IDQuNjMyOTgwMzQ2Njc5Njg4IDEuNDI2MzIyOTM3MDExNzE5IDMuOTg0OTUwMzA0MDMxMzcyIEwgNC4xMDcxNjI5NTI0MjMwOTYgMC44Nzc2MTAyMDY2MDQwMDM5IEMgNC4zMDY2MTI5Njg0NDQ4MjQgMC42NDY0MzUyNjA3NzI3MDUxIDQuNTg1NDY4MjkyMjM2MzI4IDAuNTMwODQ3NTQ5NDM4NDc2NiA0Ljg2NDMyMzEzOTE5MDY3NCAwLjUzMDg0NzU0OTQzODQ3NjYgWiIgc3Ryb2tlPSJub25lIi8+PC9nPjwvZz48L3N2Zz4=');
		}
		
		&.play {
			border-left: none;
			top: 75%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
	
	.player {
		display: block;
		width: 195px;
		height: 487px;
		position: absolute;
		top: 75%;
		left: 50%;
		transform: translate(-80%, -88%);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center bottom;
		background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjk3LjIwMSIgaGVpZ2h0PSI0NDQuNTc2IiB2aWV3Qm94PSIwIDAgMjk3LjIwMSA0NDQuNTc2Ij4NCiAgPGRlZnM+DQogICAgPGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgiPg0KICAgICAgPHJlY3Qgd2lkdGg9IjI5Ny4yMDEiIGhlaWdodD0iNDQ0LjU3NiIgZmlsbD0ibm9uZSIvPg0KICAgIDwvY2xpcFBhdGg+DQogIDwvZGVmcz4NCiAgPGcgaWQ9InBsYXllciIgY2xpcC1wYXRoPSJ1cmwoI2NsaXAtcGF0aCkiPg0KICAgIDxnIGlkPSJwbGF5ZXItMiIgZGF0YS1uYW1lPSJwbGF5ZXIiIHRyYW5zZm9ybT0ibWF0cml4KDAuOTY2LCAtMC4yNTksIDAuMjU5LCAwLjk2NiwgLTIuOTU3LCA1MS42MTgpIj4NCiAgICAgIDxwYXRoIGlkPSJQYXRoXzkzIiBkYXRhLW5hbWU9IlBhdGggOTMiIGQ9Ik0xNTQsMzE0YTQ2LjAxLDQ2LjAxLDAsMCwwLTQ0Ljc1LDM1LjM1TDI2LjUyLDYwLjgzbDExLjIzLTYuNTJMMjIuNzcsMi4wNiwxMC42Nyw1LjUzbC0uMTQtLjQ4TDMuOCw2Ljk4LDEwOSwzNjkuNTVBNDYsNDYsMCwxLDAsMTU0LDMxNFoiIGZpbGw9IiNmZmYiLz4NCiAgICAgIDxwYXRoIGlkPSJQYXRoXzk0IiBkYXRhLW5hbWU9IlBhdGggOTQiIGQ9Ik0xMDcuMTQsMzU4LjQ3LDYuMjcsOC4zNSwyMS43NCwzLjkyLDM1Ljk4LDUzLjYsMjMuOTUsNjAuNTlhMS41LDEuNSwwLDAsMCwuNzYsMi44LDEuNTMxLDEuNTMxLDAsMCwwLC43NS0uMkwzOC41LDU1LjYyYTEuNTA4LDEuNTA4LDAsMCwwLC42OS0xLjcxTDI0LjIxLDEuNjVBMS41LDEuNSwwLDAsMCwyMi4zNS42Mkw0LDUuODhBMS41LDEuNSwwLDAsMCwyLjk3LDcuNzRoMEwxMDguNDYsMzczLjkyaC4wMWMuMDIuMDYuMDMuMTIuMDUuMThhNDUuMDg2LDQ1LjA4NiwwLDAsMCwxMy41NSwyMS41NSw0Ny44MzEsNDcuODMxLDAsMSwwLDMxLjc1LTgzLjcxYy0xNi45NC0uMDQtNDAuMTcsMTMuODUtNDIuNTcsMjguMzdhMS41LDEuNSwwLDAsMCwxLjQ3LDEuNzRBMS4xLDEuMSwwLDAsMCwxMTQsMzQxYzIuMjctMTMuMDIsMjQuNDYtMjYuMTEsMzkuODItMjYuMDdhNDQuODMsNDQuODMsMCwxLDEtMjkuNzYsNzguNDYsNDIuMDkyLDQyLjA5MiwwLDAsMS0xMi42NS0yMC4xMiIgZmlsbD0iIzA0MDAwMCIvPg0KICAgIDwvZz4NCiAgPC9nPg0KPC9zdmc+DQo=');
	}
	
	.slide {
		position: relative;
		border: 3px solid $black;
		box-shadow: 0 3px 6px rgba($black, .16);
		background-color: $white;
		appearance: none;
		width: 100%;
		height: 10px;
		border-radius: 100px;
		background-color: $white;
		outline: none;
		
		&.volumn {
			flex: 1 1 calc(40% - 48px);
		}
		
		&.timeline {
			flex: 1 1 100%;
		}
		
		input[type="range"].slider {
    		position: absolute;
    		top: 0;
			appearance: none;
			width: 100%;
			width: 100%;
			height: 4px;
			border-radius: 100px;
			background-color: $white;
			outline: none;
			transition: background-color .2s;
			
			&:hover {
				background-color: $gray;
			}
			
			&::-webkit-slider-thumb {
				border: 3px solid $black;
				appearance: none;
				width: 16px;
				height: 25px;
				background-color: #fff;
				cursor: pointer;
			}
		}
	}
}
              
            
!

JS

              
                
              
            
!
999px

Console