https://www.facebook.com/brittwavyhttps://twitter.com/newwave_britthttps://www.instagram.com/britt_mb_/https://www.youtube.com/channel/UCC6Fp1rWObE35I-PN1wg78g
 

































    powered by Surfing Waves























FREE DOWNLOAD

Donate

PLAYLIST

ARTISTS

ARTISTS
Unique Artists. Unique Sounds. Discover New Music. Find Related Artists.
  • Trying

    Leo

--:-- --:--
  • Search
  • Playlists
  • Albums
  • Artists
  • Podcasts
  • Settings

Music Player App

Made by @emilcarlsson

Icons by Font Awesome, Those Icons,
EpicCoders & Smashicons

$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%; } } } }

Comments

Popular Posts