A continuation of my first Music Player pen (https://codepen.io/emilcarlsson/pen/aOYbmK).
Try clicking around the menus and playing a song.
A Pen by Khun Htetz Naing on CodePen.
<div id="wrapper"> | |
<div id="iphone"> | |
<div id="camera"> | |
<span></span> | |
<span></span> | |
</div> | |
<div id="screen"> | |
<div id="content-wrap"> | |
<div id="background"></div> | |
<div id="content"> | |
<div id="header"> | |
<span id="menu-btn"><img src="https://emilcarlsson.se/assets/svg/menu.svg" alt="" class="svg"></span> | |
<span id="options-btn"><img src="https://emilcarlsson.se/assets/svg/more.svg" alt="" class="svg"></span> | |
</div> | |
<div class="jcarousel"> | |
<ul id="songs"> | |
<li class="song" data-audio="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/Leo%20-%20Trying.mp3" data-color="#f38578"> | |
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/trying-album-cover.jpg"> | |
<p class="song-title">Trying</p> | |
<p class="song-artist">Leo</p> | |
</li> | |
</ul> | |
</div> | |
<audio crossorigin> | |
<source src="" type="audio/mpeg"> | |
</audio> | |
<div id="controls"> | |
<span id="previous-btn"><i class="fa fa-step-backward fa-fw" aria-hidden="true"></i></span> | |
<span id="play-btn"><i class="fa fa-play fa-fw" aria-hidden="true"></i></span> | |
<span id="next-btn"><i class="fa fa-step-forward fa-fw" aria-hidden="true"></i></span> | |
</div> | |
<div id="timeline"> | |
<span id="current-time">--:--</span> | |
<span id="total-time">--:--</span> | |
<div class="slider" data-direction="horizontal"> | |
<div class="progress"> | |
<div class="pin" id="progress-pin" data-method="rewind"></div> | |
</div> | |
</div> | |
</div> | |
<div id="sub-controls"> | |
<i class="fa fa-random" aria-hidden="true"></i> | |
<i class="fa fa-refresh" aria-hidden="true"></i> | |
<i class="fa fa-bluetooth-b active" id="bluetooth-btn" aria-hidden="true"></i> | |
<i class="fa fa-heart-o" id="heart-icon" aria-hidden="true"></i> | |
</div> | |
</div> | |
<div id="overlay"></div> | |
</div> | |
<div id="sidemenu"> | |
<ul> | |
<li> | |
<i class="fa fa-search fa-fw" aria-hidden="true"></i> | |
Search | |
</li> | |
<li> | |
<img class="svg menu-icons" src="https://emilcarlsson.se/assets/svg/music-player.svg" alt=""> | |
Playlists | |
</li> | |
<li> | |
<img id="album-icon" class="svg menu-icons" src="https://emilcarlsson.se/assets/svg/album-icon.svg" alt=""> | |
Albums | |
</li> | |
<li> | |
<i class="fa fa-microphone fa-fw" aria-hidden="true"></i> | |
Artists | |
</li> | |
<li> | |
<i class="fa fa-podcast fa-fw" aria-hidden="true"></i> | |
Podcasts | |
</li> | |
<li> | |
<i class="fa fa-cog fa-fw" aria-hidden="true"></i> | |
Settings | |
</li> | |
</ul> | |
</div> | |
<div id="bluetooth-devices" class="menu"> | |
<span class="close-btn"><span>×</span> Close</span> | |
<h3>Devices nearby</h3> | |
<ul> | |
<li class="connected"> | |
<img id="headphones-icon" class="svg menu-icons" src="https://emilcarlsson.se/assets/svg/headphone.svg" alt=""> | |
<p> | |
Major II Bluetooth | |
<span>Connected</span> | |
</p> | |
</li> | |
<li> | |
<img id="headphones-icon" class="svg menu-icons" src="https://emilcarlsson.se/assets/svg/loudspeaker.svg" alt=""> | |
<p> | |
Sonos One | |
<span>Connected</span> | |
</p> | |
</li> | |
<li> | |
<img id="headphones-icon" class="svg menu-icons" src="https://emilcarlsson.se/assets/svg/car.svg" alt=""> | |
<p> | |
Kia Motors | |
<span>Connected</span> | |
</p> | |
</li> | |
</ul> | |
<p class="info-text"> | |
Make sure your bluetooth device is turned on and in range. | |
</p> | |
</div> | |
<div id="song-options" class="menu"> | |
<span class="close-btn"><span>×</span> Close</span> | |
<div id="song-info"> | |
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/rockstar-album-cover.jpg" alt=""> | |
<div class="artist-wrap"> | |
<p> | |
<span class="title">rockstar</span> | |
<span class="artist">Post Malone, 21 Savage</span> | |
</p> | |
</div> | |
</div> | |
<ul> | |
<li> | |
<i class="fa fa-music fa-fw add" aria-hidden="true"></i> | |
Add to playlist | |
</li> | |
<li> | |
<i class="fa fa-microphone fa-fw" aria-hidden="true"></i> | |
View Artist | |
</li> | |
<li> | |
<img id="album-icon" class="svg menu-icons" src="https://emilcarlsson.se/assets/svg/compact-disc.svg" alt=""> | |
View Album | |
</li> | |
<li> | |
<i class="fa fa-share-square-o fa-fw" aria-hidden="true"></i> | |
Share | |
</li> | |
</ul> | |
</div> | |
<div id="home-screen"> | |
<div class="home-content"> | |
<h2>Music Player App</h2> | |
<p id="made-by">Made by <a href="https://codepen.io/emilcarlsson">@emilcarlsson</a></p> | |
<div class="app-icon"> | |
<img class="svg" src="https://emilcarlsson.se/assets/svg/music-note.svg" alt=""> | |
</div> | |
<p id="icons-by">Icons by <a href="http://fontawesome.io/" title="Font Awesome">Font Awesome</a>, <a href="https://www.flaticon.com/authors/those-icons" title="Those Icons">Those Icons</a>,<br /><a href="https://www.flaticon.com/authors/epiccoders" title="EpicCoders">EpicCoders</a> & <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a></p> | |
</div> | |
</div> | |
</div> | |
<div id="home-btn"></div> | |
</div> | |
</div> |
A continuation of my first Music Player pen (https://codepen.io/emilcarlsson/pen/aOYbmK).
Try clicking around the menus and playing a song.
A Pen by Khun Htetz Naing on CodePen.
/* | |
* Icons by: | |
* Font Awesome – http://fontawesome.io/ | |
* Those Icons – https://www.flaticon.com/authors/those-icons | |
* EpicCoders – https://www.flaticon.com/authors/epiccoders | |
* Smashicons – https://www.flaticon.com/authors/smashicons | |
*/ | |
$(document).ready(function () { | |
var songs = [ | |
{ | |
title: "rockstar", | |
artist: "Post Malone, 21 Savage", | |
cover: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/rockstar-album-cover.jpg", | |
audioFile: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/Post%20Malone%20-%20rockstar%20ft.%2021%20Savage%20(1).mp3", | |
color: "#c3af50" | |
}, | |
{ | |
title: "Let You Down", | |
artist: "NF", | |
cover: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/perception-album-cover.png", | |
audioFile: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/NF%20-%20Let%20You%20Down.mp3", | |
color: "#25323b" | |
}, | |
{ | |
title: "Silence", | |
artist: "Marshmello, Khalid", | |
cover: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/silence-album-cover.jpg", | |
audioFile: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/Marshmello%20-%20Silence%20ft.%20Khalid.mp3", | |
color: "#c1c1c1" | |
}, | |
{ | |
title: "I Fall Apart", | |
artist: "Post Malone", | |
cover: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/stoney-cover-album.jpg", | |
audioFile: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/Post%20Malone%20-%20I%20Fall%20Apart.mp3", | |
color: "#cd4829" | |
}, | |
{ | |
title: "Fireproof", | |
artist: "VAX, Teddy Sky", | |
cover: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/fireproof-album-cover.jpeg", | |
audioFile: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/308622/VAX%20-%20Fireproof%20Feat%20Teddy%20Sky.mp3", | |
color: "#5d0126" | |
} | |
]; | |
for (let song of songs) { | |
$("#songs").append('<li class="song" data-audio="' + song.audioFile + '" data-color="'+ song.color +'">' + | |
'<img src="' + song.cover + '">' + | |
'<p class="song-title">' + song.title + '</p>' + | |
'<p class="song-artist">' + song.artist + '</p>' + | |
'</li>'); | |
} | |
$('.jcarousel').jcarousel({ | |
wrap: 'circular' | |
}); | |
}); | |
/* | |
* Replace all SVG images with inline SVG | |
*/ | |
jQuery('img[src$=".svg"]').each(function(){ | |
var $img = jQuery(this); | |
var imgID = $img.attr('id'); | |
var imgClass = $img.attr('class'); | |
var imgURL = $img.attr('src'); | |
jQuery.get(imgURL, function(data) { | |
// Get the SVG tag, ignore the rest | |
var $svg = jQuery(data).find('svg'); | |
// Add replaced image's ID to the new SVG | |
if(typeof imgID !== 'undefined') { | |
$svg = $svg.attr('id', imgID); | |
} | |
// Add replaced image's classes to the new SVG | |
if(typeof imgClass !== 'undefined') { | |
$svg = $svg.attr('class', imgClass+' replaced-svg'); | |
} | |
// Remove any invalid XML tags as per http://validator.w3.org | |
$svg = $svg.removeAttr('xmlns:a'); | |
// Replace image with new SVG | |
$img.replaceWith($svg); | |
}, 'xml'); | |
}); | |
// Current slide | |
$('.jcarousel').on('jcarousel:visiblein', 'li', function(event, carousel) { | |
let cover = $(this).find("img").attr("src"); | |
let songTitle = $(this).find("p.song-title").html(); | |
let songArtist = $(this).find("p.song-artist").html(); | |
let audioSrc = $(this).attr("data-audio"); | |
let backgroundColor = $(this).attr("data-color"); | |
$("body").css('background', backgroundColor) | |
$("#background").css('background-image', 'url('+cover+')'); | |
$("audio").find("source").attr("src", ""+audioSrc+""); | |
player.load(); | |
player.currentTime = 0; | |
$("#song-info").find("img").attr("src", cover); | |
$("#song-info .artist-wrap p").find("span.title").html(songTitle); | |
$("#song-info .artist-wrap p").find("span.artist").html(songArtist); | |
}); | |
// Previous slide | |
$('#previous-btn').click(function() { | |
$('.jcarousel').jcarousel('scroll', '-=1'); | |
$('#play-btn i').removeClass('fa-pause'); | |
player.pause(); | |
}); | |
// Next slide | |
$('#next-btn').click(function() { | |
if ($(".fa-random").hasClass('active')) { | |
let songs = $("#songs li").length - 1; | |
let randomSong = Math.floor(Math.random() * songs) + 1; | |
$('.jcarousel').jcarousel('scroll', '+=' + randomSong); | |
} else { | |
$('.jcarousel').jcarousel('scroll', '+=1'); | |
} | |
$('#play-btn i').removeClass('fa-pause'); | |
player.pause(); | |
}); | |
// Play Icon Switcher | |
$('#play-btn').click(function() { | |
$(this).find('i').toggleClass('fa-pause'); | |
}); | |
// Menu | |
$("#menu-btn").click(function() { | |
$("#content-wrap").addClass('inactive'); | |
$("#sidemenu").addClass('active'); | |
}); | |
// Home Button | |
$("#home-btn").click(function() { | |
$("#home-screen").addClass('active'); | |
$(".menu").removeClass('active'); | |
$("#content-wrap").addClass('minimized'); | |
}); | |
// App | |
$(".app-icon").click(function() { | |
$("#content-wrap").removeClass('minimized'); | |
setTimeout(function(){ $("#home-screen").removeClass('active'); }, 300); | |
}); | |
// Overlay | |
$("#overlay").click(function () { | |
$("#content-wrap").removeClass('inactive'); | |
$("#sidemenu").removeClass('active'); | |
}); | |
// Options | |
$("#options-btn").click(function() { | |
$("#song-options").addClass('active'); | |
}); | |
// Bluetooth | |
$("#bluetooth-btn").click(function() { | |
$("#bluetooth-devices").addClass('active'); | |
}); | |
// Bluetooth Menu | |
$("#bluetooth-devices ul li").click(function() { | |
$(this).toggleClass('connected'); | |
$(this).siblings().removeClass('connected'); | |
if ($("#bluetooth-devices ul li").hasClass('connected')) { | |
$("#sub-controls i.fa-bluetooth-b").addClass('active'); | |
} else { | |
$("#sub-controls i.fa-bluetooth-b").removeClass('active'); | |
} | |
}); | |
// Close Menu | |
$(".close-btn").click(function() { | |
$(".menu").removeClass('active'); | |
}); | |
$('#sub-controls i').click(function () { | |
if(!$(this).hasClass('fa-bluetooth-b')) { | |
$(this).toggleClass('active'); | |
} | |
if ($("#heart-icon").hasClass('active')) { | |
$("#heart-icon").removeClass('fa-heart-o'); | |
$("#heart-icon").addClass('fa-heart'); | |
} else { | |
$("#heart-icon").removeClass('fa-heart'); | |
$("#heart-icon").addClass('fa-heart-o'); | |
} | |
}); | |
/* | |
* Music Player | |
* By Greg Hovanesyan | |
* https://codepen.io/gregh/pen/NdVvbm | |
*/ | |
var audioPlayer = document.querySelector('#content'); | |
var playpauseBtn = audioPlayer.querySelector('#play-btn'); | |
var progress = audioPlayer.querySelector('.progress'); | |
var sliders = audioPlayer.querySelectorAll('.slider'); | |
var player = audioPlayer.querySelector('audio'); | |
var currentTime = audioPlayer.querySelector('#current-time'); | |
var totalTime = audioPlayer.querySelector('#total-time'); | |
var draggableClasses = ['pin']; | |
var currentlyDragged = null; | |
window.addEventListener('mousedown', function(event) { | |
if(!isDraggable(event.target)) return false; | |
currentlyDragged = event.target; | |
let handleMethod = currentlyDragged.dataset.method; | |
this.addEventListener('mousemove', window[handleMethod], false); | |
window.addEventListener('mouseup', () => { | |
currentlyDragged = false; | |
window.removeEventListener('mousemove', window[handleMethod], false); | |
}, false); | |
}); | |
playpauseBtn.addEventListener('click', togglePlay); | |
player.addEventListener('timeupdate', updateProgress); | |
player.addEventListener('loadedmetadata', () => { | |
totalTime.textContent = formatTime(player.duration); | |
}); | |
player.addEventListener('ended', function(){ | |
player.currentTime = 0; | |
if ($(".fa-refresh").hasClass('active')) { | |
togglePlay(); | |
} else { | |
if ($(".fa-random").hasClass('active')) { | |
let songs = $("#songs li").length - 1; | |
let randomSong = Math.floor(Math.random() * songs) + 1; | |
$('.jcarousel').jcarousel('scroll', '+=' + randomSong); | |
} else { | |
$('.jcarousel').jcarousel('scroll', '+=1'); | |
} | |
togglePlay(); | |
} | |
}); | |
sliders.forEach(slider => { | |
let pin = slider.querySelector('.pin'); | |
slider.addEventListener('click', window[pin.dataset.method]); | |
}); | |
function isDraggable(el) { | |
let canDrag = false; | |
let classes = Array.from(el.classList); | |
draggableClasses.forEach(draggable => { | |
if(classes.indexOf(draggable) !== -1) | |
canDrag = true; | |
}) | |
return canDrag; | |
} | |
function inRange(event) { | |
let rangeBox = getRangeBox(event); | |
let direction = rangeBox.dataset.direction; | |
let screenOffset = document.querySelector("#screen").offsetLeft + 26; | |
var min = screenOffset - rangeBox.offsetLeft; | |
var max = min + rangeBox.offsetWidth; | |
if(event.clientX < min || event.clientX > max) { return false }; | |
return true; | |
} | |
function updateProgress() { | |
var current = player.currentTime; | |
var percent = (current / player.duration) * 100; | |
progress.style.width = percent + '%'; | |
currentTime.textContent = formatTime(current); | |
} | |
function getRangeBox(event) { | |
let rangeBox = event.target; | |
let el = currentlyDragged; | |
if(event.type == 'click' && isDraggable(event.target)) { | |
rangeBox = event.target.parentElement.parentElement; | |
} | |
if(event.type == 'mousemove') { | |
rangeBox = el.parentElement.parentElement; | |
} | |
return rangeBox; | |
} | |
function getCoefficient(event) { | |
let slider = getRangeBox(event); | |
let screenOffset = document.querySelector("#screen").offsetLeft + 26; | |
let K = 0; | |
let offsetX = event.clientX - screenOffset; | |
let width = slider.clientWidth; | |
K = offsetX / width; | |
return K; | |
} | |
function rewind(event) { | |
if(inRange(event)) { | |
player.currentTime = player.duration * getCoefficient(event); | |
} | |
} | |
function formatTime(time) { | |
var min = Math.floor(time / 60); | |
var sec = Math.floor(time % 60); | |
return min + ':' + ((sec<10) ? ('0' + sec) : sec); | |
} | |
function togglePlay() { | |
player.volume = 0.5; | |
if(player.paused) { | |
player.play(); | |
} else { | |
player.pause(); | |
} | |
} |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
<script src="https://use.fontawesome.com/15af25ac7b.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.1/jquery.jcarousel.min.js"></script> |
$iphone-color: white; | |
$primary-color: $alizarin; | |
body { | |
color: white; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
height: 100vh; | |
width: 100vw; | |
background: lighten($alizarin, 15%); | |
font-family: $font; | |
@include transition(background 0.25s ease); | |
} | |
.svg { | |
path { | |
fill: white; | |
} | |
} | |
h3 { | |
cursor: default; | |
font-weight: 600; | |
font-size: 12px; | |
letter-spacing: 1px; | |
margin: 0 0 15px; | |
text-transform: uppercase; | |
} | |
p { | |
cursor: default; | |
&.info-text { | |
color: darken(white, 30%); | |
font-size: 10px; | |
} | |
} | |
.fa.add { | |
position: relative; | |
&::after { | |
background: #444444; | |
border-radius: 100px; | |
content: '\f055'; | |
font-size: 10px; | |
left: 2px; | |
position: absolute; | |
top: -1px; | |
width: 10px; | |
height: 11px; | |
} | |
} | |
div#iphone { | |
background: $iphone-color; | |
border: 4px solid darken($iphone-color, 7.5%); | |
border-radius: 30px; | |
max-width: 257px; | |
padding: 10px; | |
@include box-shadow(0px 10px 25px rgba(51, 51, 51, 0.3)); | |
div#camera { | |
cursor: default; | |
margin: 5px auto 20px; | |
width: 100%; | |
text-align: center; | |
@include user-select(none); | |
span { | |
background: darken($iphone-color, 7.5%); | |
display: inline-block; | |
&:nth-child(1) { | |
$camera-size: 7px; | |
border-radius: $camera-size; | |
height: $camera-size; | |
margin-right: 7px; | |
position: relative; | |
top: 1px; | |
width: $camera-size; | |
} | |
&:nth-child(2) { | |
border-radius: 5px; | |
height: 5px; | |
width: 35px; | |
} | |
} | |
} | |
div#screen { | |
background: darken($iphone-color, 60%); | |
border: 2px solid darken($iphone-color, 5%); | |
border-radius: 4px; | |
height: 400px; | |
overflow: hidden; | |
position: relative; | |
width: 225px; | |
z-index: 1; | |
&::after { | |
background: darken($iphone-color, 50%); | |
content: ''; | |
display: block; | |
height: 130%; | |
left: 60%; | |
opacity: 0.15; | |
position: absolute; | |
pointer-events: none; | |
top: -25%; | |
width: 100%; | |
@include transform(rotate(-20deg)); | |
} | |
} | |
div#home-btn { | |
$button-size: 35px; | |
border: 3px solid darken($iphone-color, 7.5%); | |
border-radius: $button-size; | |
cursor: pointer; | |
height: $button-size; | |
margin: 10px auto 5px; | |
width: $button-size; | |
} | |
} | |
div#content-wrap { | |
background: #333; | |
height: 100%; | |
overflow: hidden; | |
position: relative; | |
z-index: 5; | |
@include transition(transform 0.25s ease); | |
&.minimized { | |
@include transform(scale(0)); | |
} | |
&.inactive { | |
@include transform(scale(0.85) translate(0, 60%)); | |
div#overlay { | |
display: block; | |
} | |
} | |
} | |
div#overlay { | |
cursor: pointer; | |
display: none; | |
height: 100%; | |
left: 0; | |
position: absolute; | |
top: 0; | |
width: 100%; | |
z-index: 3; | |
} | |
div#content { | |
padding: 15px; | |
position: relative; | |
z-index: 2; | |
} | |
div#background { | |
background-size: cover; | |
background-position: center; | |
display: block; | |
height: 100%; | |
left: 0; | |
position: absolute; | |
top: 0; | |
width: 100%; | |
z-index: 1; | |
@include filter(blur, 10px); | |
@include transition(background-image 0.25s ease); | |
&::before { | |
background: #333; | |
content: ''; | |
display: block; | |
height: 100%; | |
opacity: 0.5; | |
position: absolute; | |
width: 100%; | |
} | |
&::after { | |
content: ''; | |
display: block; | |
height: 100%; | |
position: absolute; | |
width: 100%; | |
@include linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(50, 50, 50, 1) 100%); | |
} | |
} | |
div#header { | |
color: white; | |
@extend .clearfix; | |
span { | |
cursor: pointer; | |
font-size: 20px; | |
.svg { | |
height: 16px; | |
width: 16px; | |
} | |
&#menu-btn { | |
float: left; | |
} | |
&#options-btn { | |
float: right; | |
} | |
} | |
} | |
div.jcarousel { | |
left: -15px; | |
width: calc(100% + 30px); | |
position: relative; | |
overflow: hidden; | |
ul#songs { | |
width: 20000em; | |
position: relative; | |
li.song { | |
float: left; | |
margin: 10px 15px; | |
text-align: center; | |
width: calc(225px - 30px); | |
img { | |
width: 92.5%; | |
@include box-shadow(0px 5px 25px rgba(50, 50, 50, 0.5)); | |
} | |
p { | |
color: white; | |
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); | |
&.song-title { | |
font-size: 16px; | |
font-weight: 600; | |
margin: 10px 0 5px; | |
} | |
&.song-artist { | |
color: darken(white, 30%); | |
font-size: 12px; | |
margin: 0; | |
} | |
} | |
} | |
} | |
} | |
div#controls { | |
color: white; | |
display: table; | |
margin: 10px auto 25px; | |
text-align: center; | |
width: 75%; | |
span { | |
display: table-cell; | |
font-size: 20px; | |
vertical-align: middle; | |
&#play-btn { | |
font-size: 34px; | |
} | |
i { | |
cursor: pointer; | |
} | |
} | |
} | |
div#sub-controls { | |
color: darken(white, 40%); | |
cursor: default; | |
font-size: 14px; | |
margin: 15px 0 0; | |
text-align: center; | |
@include user-select(none); | |
.svg { | |
height: 14px; | |
position: relative; | |
top: 2px; | |
width: 14px; | |
path { | |
fill: darken(white, 40%); | |
} | |
} | |
i, .svg { | |
cursor: pointer; | |
margin: 0 15px; | |
&.active { | |
color: $primary-color; | |
} | |
} | |
} | |
div#timeline { | |
position: relative; | |
margin: 0 auto; | |
width: 92.5%; | |
span { | |
color: darken(white, 30%); | |
font-size: 7px; | |
position: absolute; | |
top: -10px; | |
&#current-time { | |
left: 0; | |
} | |
&#total-time { | |
right: 0; | |
} | |
} | |
div.slider { | |
background-color: darken(white, 50%); | |
border-radius: 2px; | |
cursor: pointer; | |
height: 2px; | |
position: relative; | |
width: 100%; | |
div.progress { | |
background-color: $primary-color; | |
height: 100%; | |
pointer-events: none; | |
position: absolute; | |
width: 0; | |
div.pin { | |
background-color: white; | |
border-radius: 8px; | |
height: 8px; | |
position: absolute; | |
pointer-events: all; | |
right: -5px; | |
top: -3px; | |
width: 8px; | |
@include box-shadow(0px 1px 1px 0px rgba(0,0,0,0.32)); | |
@include transition(transform 0.25s ease); | |
&:active { | |
@include transform(scale(1.5)); | |
} | |
} | |
} | |
} | |
} | |
div#sidemenu { | |
background: #444; | |
box-sizing: border-box; | |
height: 100%; | |
left: 0; | |
padding: 20px 10px; | |
position: absolute; | |
top: 0; | |
width: 100%; | |
z-index: 1; | |
&.active { | |
ul { | |
@include transform(scale(1)); | |
} | |
} | |
ul { | |
color: white; | |
font-size: 18px; | |
@include transition(transform 0.25s ease); | |
@include transform(scale(0.8)); | |
li { | |
cursor: pointer; | |
font-weight: 300; | |
padding: 8px 5px; | |
&:nth-child(1) { | |
margin-top: -8px; | |
} | |
&:hover { | |
background: lighten(#444, 5%); | |
border-radius: 5px; | |
.svg, i { | |
opacity: 1; | |
} | |
} | |
.svg { | |
display: inline-block; | |
height: 16px; | |
padding: 0 0.2em; | |
position: relative; | |
top: 2px; | |
width: 16px; | |
} | |
.svg, i { | |
margin-right: 5px; | |
opacity: 0.75; | |
@include transition(opacity 0.25s ease); | |
} | |
} | |
} | |
} | |
div#song-options { | |
div#song-info { | |
margin: 0 0 20px; | |
position: relative; | |
@extend .clearfix; | |
img { | |
float: left; | |
width: 50px; | |
@include box-shadow(0 2px 5px rgba(50, 50, 50, 0.2)); | |
} | |
div.artist-wrap { | |
box-sizing: border-box; | |
float: right; | |
padding: 0 0 0 8px; | |
width: calc(100% - 50px); | |
p { | |
bottom: 4px; | |
font-size: 16px; | |
position: absolute; | |
span { | |
display: block; | |
&.artist { | |
font-size: 12px; | |
font-weight: 300; | |
margin: 4px 0 0; | |
} | |
} | |
} | |
} | |
} | |
ul { | |
font-size: 16px; | |
} | |
} | |
div#bluetooth-devices { | |
ul { | |
margin: 5px 0 15px; | |
li { | |
&.connected { | |
border: 1px solid rgba(255, 255, 255, 0.2); | |
font-size: 14px; | |
span { | |
display: block; | |
} | |
i { | |
color: $primary-color; | |
} | |
.svg path { | |
fill: $primary-color !important; | |
} | |
.svg, i { | |
opacity: 1; | |
position: relative; | |
top: -5px; | |
} | |
} | |
p { | |
display: inline-block; | |
span { | |
display: none; | |
font-size: 10px; | |
margin: 2px 0 0; | |
opacity: 0.75; | |
} | |
} | |
} | |
} | |
} | |
div.menu { | |
background: #444; | |
box-sizing: border-box; | |
display: block; | |
height: 100%; | |
padding: 0 20px; | |
position: absolute; | |
top: 100%; | |
width: 100%; | |
z-index: 10; | |
@include transition(top 0.25s ease); | |
&.active { | |
top: 0; | |
} | |
span.close-btn { | |
color: darken(white, 30%); | |
cursor: pointer; | |
display: block; | |
font-size: 14px; | |
margin: 5px auto 15px; | |
padding: 0 8px 4px; | |
text-align: center; | |
width: 50px; | |
@include transition(color 0.25s ease); | |
&:hover { | |
color: darken(white, 10%); | |
} | |
span { | |
font-size: 1.6em; | |
position: relative; | |
top: 3px; | |
} | |
} | |
li { | |
border-radius: 5px; | |
cursor: pointer; | |
font-weight: 300; | |
margin-bottom: 4px; | |
padding: 8px 5px; | |
&:nth-child(1) { | |
margin-top: -8px; | |
} | |
&:hover { | |
background: lighten(#444, 5%); | |
.svg, i { | |
opacity: 1; | |
} | |
} | |
.svg { | |
display: inline-block; | |
height: 14px; | |
padding: 0 0.2em; | |
position: relative; | |
top: 2px; | |
width: 14px; | |
} | |
.svg, i { | |
margin-right: 5px; | |
opacity: 0.75; | |
@include transition(opacity 0.25s ease); | |
} | |
i { | |
position: relative; | |
top: 1px; | |
} | |
} | |
} | |
div#home-screen { | |
@include linear-gradient(to bottom, lighten($wet-asphalt, 15%), lighten($wet-asphalt, 5%)); | |
height: 100%; | |
left: 0; | |
position: absolute; | |
top: 0; | |
width: 100%; | |
visibility: hidden; | |
z-index: 2; | |
@extend .flex-center; | |
&.active { | |
visibility: visible; | |
} | |
div.home-content { | |
margin: 15px; | |
padding-bottom: 80px; | |
text-align: center; | |
h2 { | |
font-size: 22px; | |
font-weight: 600; | |
} | |
p { | |
font-size: 13px; | |
line-height: 1.5; | |
margin: 5px 0; | |
&#made-by { | |
a { | |
color: white; | |
} | |
} | |
&#icons-by { | |
color: lighten($wet-asphalt, 30%); | |
bottom: 15px; | |
font-size: 11px; | |
left: 0; | |
position: absolute; | |
text-align: center; | |
width: 100%; | |
} | |
a { | |
color: lighten($wet-asphalt, 40%); | |
border-bottom: 1px solid lighten($wet-asphalt, 30%); | |
text-decoration: none; | |
padding: 0 1px; | |
@include transition(border-color 0.25s ease, color 0.25s ease); | |
&:hover { | |
color: lighten($wet-asphalt, 50%); | |
border-color: lighten($wet-asphalt, 50%); | |
} | |
} | |
} | |
div.app-icon { | |
cursor: pointer; | |
border-radius: 10px; | |
height: 40px; | |
margin: 30px auto 0; | |
position: relative; | |
width: 40px; | |
@extend .flex-center; | |
@include linear-gradient(to bottom, $primary-color, darken($primary-color, 10%)); | |
&:hover { | |
@include linear-gradient(to bottom, darken($primary-color, 5%), darken($primary-color, 15%)); | |
} | |
&::after { | |
content: 'Music Player'; | |
font-size: 10px; | |
position: absolute; | |
top: 45px; | |
white-space: nowrap; | |
} | |
.svg { | |
height: 60%; | |
width: 60%; | |
} | |
} | |
} | |
} |
<link href="https://emilcarlsson.se/assets/variables.scss" rel="stylesheet" /> |