glenthemes music player 05

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link href="//fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">

<script src="https://static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="//glenthemes.github.io/-music-/glenplayer05-left.js"></script>

<style type="text/css">

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
:root {
--Music-Player-Position-From-Bottom:30px;
--Music-Player-Background:#121212;
--Music-Player-Padding:9px;
--Music-Player-Roundness:3px;
--Music-Title-Font-Size:11px;
--Music-Title-Color:#d0cdd8;
--Play-Pause-Buttons-Size:17px;
--Play-Pause-Buttons-Color:#d0cdd8;
--Headphones-Icon-Size:15px;
--Headphones-Icon-Color:#d0cdd8;
}
#glenjams-05 {
position:fixed;
bottom:0;margin-bottom:calc(var(--Music-Player-Position-From-Bottom) - 5px);
left:0;margin-left:0px;
z-index:99;
visibility:hidden;
}

.nebula {
padding:5px 0;
cursor:default;
}

.suns {
padding:calc(var(--Music-Player-Padding) * 1.1) var(--Music-Player-Padding);
background:var(--Music-Player-Background);
border-radius:0 var(--Music-Player-Roundness) var(--Music-Player-Roundness) 0;
line-height:1em;
}

.suns, .m-txt {display:flex;}

.suns > *, .m-txt > * {
align-self:center;
-webkit-align-self:center;
}

.music-name {
padding:0 calc(var(--Music-Player-Padding) / 2);
font-family:work sans;
font-size:var(--Music-Title-Font-Size);
color:var(--Music-Title-Color);
}

.music-controls {
margin-left:1px;
margin-right:calc((var(--Music-Player-Padding) / 2) + 1px);
width:var(--Play-Pause-Buttons-Size);
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
cursor:pointer;
}

.music-controls .material-icons {
font-size:var(--Play-Pause-Buttons-Size);
color:var(--Play-Pause-Buttons-Color);
cursor:pointer;
}

.pausee {display:none;}

.beff {display:none;}
.aff {display:block;}

.headphones {
margin-left:-1px;
padding:0 calc(var(--Music-Player-Padding) / 2);
}

.headphones svg {
width:var(--Headphones-Icon-Size);
height:var(--Headphones-Icon-Size);
color:var(--Headphones-Icon-Color);
}

</style>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="glenjams-05">
<div class="nebula">
<div class="suns">
<div class="mm">
<div class="m-txt">
<div class="music-name">MAMI MAMI ZONE</div>
<div class="music-controls">
<a class="fire">
<i class="material-icons playy">play_arrow</i>
<i class="material-icons pausee">pause</i>
</a>
</div><!--music-controls-->
</div><!--m-txt-->
</div><!--mm-->
<div class="headphones"><i data-feather="headphones"></i></div>
</div><!--suns-->
</div><!--nebula-->
</div><!--glenjams-05-->

<audio id="audio" src="https://dl.dropbox.com/s/su8mergyk9lvhmb/mami-mami-zone.mp3" type="audio"></audio>
<!----end music player---->

<script>feather.replace()</script>