HTML CSS JS Result Skip Results Iframe EDIT ON
/*
  1. Base
*/

/*
  2. Components
*/
div#amplitude-player {
   background: #FFFFFF;
   box-shadow: 0 2px 12px 8px rgba(0, 0, 0, 0.1);
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
   display: flex;
   max-width: 900px;
}

/* Small only */
@media screen and (max-width: 39.9375em) {
   div#amplitude-player {
      flex-direction: column;
   }
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
   div#amplitude-player {
      max-height: 715px;
   }
}

/* Large and up */
@media screen and (min-width: 64em) {
   div#amplitude-player {
      max-height: 715px;
   }
}

div#amplitude-left {
   padding: 0px;
   border: 5px solid #CFD8DC;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   background-color: #CFD8DC;
   display: flex;
   flex-direction: column;
}

div#amplitude-left img.album-art {
   width: 50%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 4px;
   padding: 10px;
}

div#amplitude-left div#player-left-bottom {
   flex: 1;
   background-color: #F1F1F1;
   padding: 20px 10px;
   border-radius: 5px;
}

div#amplitude-left div#player-left-bottom div#volume-container:after {
   content: "";
   display: table;
   clear: both;
}

/* Small only */
@media screen and (max-width: 39.9375em) {
   div#amplitude-player div#amplitude-left {
      width: 100%;
   }

   div#amplitude-player div#amplitude-left img[amplitude-song-info="cover_art_url"] {
      width: auto;
      height: auto;
   }
}

div#amplitude-right {
   padding: 0px;
   overflow-y: scroll;
   display: flex;
   flex-direction: column;
   background-color: #CFD8DC;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
}

div#amplitude-right div.song {
   cursor: pointer;
   padding: 10px;
}

div#amplitude-right div.song div.song-now-playing-icon-container {
   float: left;
   width: 20px;
   height: 20px;
   margin-right: 10px;
}

div#amplitude-right div.song div.song-now-playing-icon-container img.now-playing {
   display: none;
   margin-top: 15px;
}

div#amplitude-right div.song div.play-button-container {
   display: none;
   background: url("/img/amplitudejs/list-play-light.png") no-repeat;
   width: 22px;
   height: 22px;
   margin-top: 10px;
}

div#amplitude-right div.song div.play-button-container:hover {
   background: url("/img/amplitudejs/list-play-hover.png") no-repeat;
}

div#amplitude-right div.song.amplitude-active-song-container div.song-now-playing-icon-container img.now-playing {
   display: block;
}

div#amplitude-right div.song.amplitude-active-song-container:hover div.play-button-container {
   display: none;
}

div#amplitude-right div.song div.song-meta-data {
   float: left;
   width: calc(100% - 110px);
}

div#amplitude-right div.song div.song-meta-data span.song-title {
   color: #272726;
   font-size: 16px;
   display: block;
   font-weight: 300;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

div#amplitude-right div.song div.song-meta-data span.song-artist {
   color: #607D8B;
   font-size: 14px;
   font-weight: bold;
   text-transform: uppercase;
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

div#amplitude-right div.song span.song-duration {
   float: left;
   width: 80px;
   text-align: center;
   line-height: 45px;
   color: #607D8B;
   font-size: 16px;
   font-weight: 500;
}

div#amplitude-right div.song:after {
   content: "";
   display: table;
   clear: both;
}

/* Small only */
@media screen and (max-width: 39.9375em) {
   div#amplitude-player div#amplitude-right {
      width: 100%;
   }
}

div#progress-container {
   width: 70%;
   float: left;
   position: relative;
   height: 20px;
   cursor: pointer;
   /*
    IE 11
  */
}

div#progress-container:hover input[type=range].amplitude-song-slider::-webkit-slider-thumb {
   display: block;
}

div#progress-container:hover input[type=range].amplitude-song-slider::-moz-range-thumb {
   visibility: visible;
}

div#progress-container progress#song-played-progress {
   width: 100%;
   position: absolute;
   left: 0;
   top: 8px;
   right: 0;
   width: 100%;
   z-index: 60;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   height: 4px;
   border-radius: 5px;
   background: transparent;
   border: none;
   /* Needed for Firefox */
}

@media all and (-ms-high-contrast: none) {

   div#progress-container *::-ms-backdrop,
   div#progress-container progress#song-played-progress {
      color: #00A0FF;
      border: none;
      background-color: #CFD8DC;
   }
}

@supports (-ms-ime-align: auto) {
   div#progress-container progress#song-played-progress {
      color: #00A0FF;
      border: none;
   }
}

div#progress-container progress#song-played-progress[value]::-webkit-progress-bar {
   background: none;
   border-radius: 5px;
}

div#progress-container progress#song-played-progress[value]::-webkit-progress-value {
   background-color: #00A0FF;
   border-radius: 5px;
}

div#progress-container progress#song-played-progress::-moz-progress-bar {
   background: none;
   border-radius: 5px;
   background-color: #00A0FF;
   height: 5px;
   margin-top: -2px;
}

div#progress-container progress#song-buffered-progress {
   position: absolute;
   left: 0;
   top: 8px;
   right: 0;
   width: 100%;
   z-index: 10;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   height: 4px;
   border-radius: 5px;
   background: transparent;
   border: none;
   background-color: #D7DEE3;
}

div#progress-container progress#song-buffered-progress[value]::-webkit-progress-bar {
   background-color: #CFD8DC;
   border-radius: 5px;
}

div#progress-container progress#song-buffered-progress[value]::-webkit-progress-value {
   background-color: #78909C;
   border-radius: 5px;
   transition: width .1s ease;
}

div#progress-container progress#song-buffered-progress::-moz-progress-bar {
   background: none;
   border-radius: 5px;
   background-color: #78909C;
   height: 5px;
   margin-top: -2px;
}

div#progress-container progress::-ms-fill {
   border: none;
}

@-moz-document url-prefix() {
   div#progress-container progress#song-buffered-progress {
      top: 9px;
      border: none;
   }
}

@media all and (-ms-high-contrast: none) {

   div#progress-container *::-ms-backdrop,
   div#progress-container progress#song-buffered-progress {
      color: #78909C;
      border: none;
   }
}

@supports (-ms-ime-align: auto) {
   div#progress-container progress#song-buffered-progress {
      color: #78909C;
      border: none;
   }
}

div#progress-container input[type=range] {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   margin: 7.5px 0;
   position: absolute;
   z-index: 100;
   top: -7px;
   height: 20px;
   cursor: pointer;
   background-color: inherit;
}

div#progress-container input[type=range]:focus {
   outline: none;
}

div#progress-container input[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: 0px;
   cursor: pointer;
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
   background: #0075a9;
   border-radius: 0px;
   border: 0px solid #010101;
}

div#progress-container input[type=range]::-webkit-slider-thumb {
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
   border: 1px solid #00a0ff;
   height: 15px;
   width: 15px;
   border-radius: 16px;
   background: #00a0ff;
   cursor: pointer;
   -webkit-appearance: none;
   margin-top: -7.5px;
}

div#progress-container input[type=range]:focus::-webkit-slider-runnable-track {
   background: #00adfb;
}

div#progress-container input[type=range]::-moz-range-track {
   width: 100%;
   height: 0px;
   cursor: pointer;
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
   background: #0075a9;
   border-radius: 0px;
   border: 0px solid #010101;
}

div#progress-container input[type=range]::-moz-range-thumb {
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
   border: 1px solid #00a0ff;
   height: 15px;
   width: 15px;
   border-radius: 16px;
   background: #00a0ff;
   cursor: pointer;
}

div#progress-container input[type=range]::-ms-track {
   width: 100%;
   height: 0px;
   cursor: pointer;
   background: transparent;
   border-color: transparent;
   color: transparent;
}

div#progress-container input[type=range]::-ms-fill-lower {
   background: #003d57;
   border: 0px solid #010101;
   border-radius: 0px;
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}

div#progress-container input[type=range]::-ms-fill-upper {
   background: #0075a9;
   border: 0px solid #010101;
   border-radius: 0px;
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}

div#progress-container input[type=range]::-ms-thumb {
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
   border: 1px solid #00a0ff;
   height: 15px;
   width: 15px;
   border-radius: 16px;
   background: #00a0ff;
   cursor: pointer;
   height: 0px;
   display: block;
}

@media all and (-ms-high-contrast: none) {

   div#progress-container *::-ms-backdrop,
   div#progress-container input[type="range"].amplitude-song-slider {
      padding: 0px;
   }

   div#progress-container *::-ms-backdrop,
   div#progress-container input[type=range].amplitude-song-slider::-ms-thumb {
      height: 15px;
      width: 15px;
      border-radius: 10px;
      cursor: pointer;
      margin-top: -8px;
   }

   div#progress-container *::-ms-backdrop,
   div#progress-container input[type=range].amplitude-song-slider::-ms-track {
      border-width: 15px 0;
      border-color: transparent;
   }

   div#progress-container *::-ms-backdrop,
   div#progress-container input[type=range].amplitude-song-slider::-ms-fill-lower {
      background: #CFD8DC;
      border-radius: 10px;
   }

   div#progress-container *::-ms-backdrop,
   div#progress-container input[type=range].amplitude-song-slider::-ms-fill-upper {
      background: #CFD8DC;
      border-radius: 10px;
   }
}

@supports (-ms-ime-align: auto) {
   div#progress-container input[type=range].amplitude-song-slider::-ms-thumb {
      height: 15px;
      width: 15px;
      margin-top: 3px;
   }
}

div#progress-container input[type=range]:focus::-ms-fill-lower {
   background: #0075a9;
}

div#progress-container input[type=range]:focus::-ms-fill-upper {
   background: #00adfb;
}

div#control-container {
   margin-top: 25px;
   margin-top: 20px;
}

div#control-container div#repeat-container {
   width: 25%;
   float: left;
   padding-top: 20px;
}

div#control-container div#repeat-container div#repeat {
   width: 24px;
   height: 19px;
   cursor: pointer;
}

div#control-container div#repeat-container div#repeat.amplitude-repeat-off {
   background: url("/img/amplitudejs/repeat-off.svg");
}

div#control-container div#repeat-container div#repeat.amplitude-repeat-on {
   background: url("/img/amplitudejs/repeat-on.svg");
}

div#control-container div#repeat-container div#shuffle {
   width: 23px;
   height: 19px;
   cursor: pointer;
   float: right;
}

div#control-container div#repeat-container div#shuffle.amplitude-shuffle-off {
   background: url("/img/amplitudejs/shuffle-off.svg");
}

div#control-container div#repeat-container div#shuffle.amplitude-shuffle-on {
   background: url("/img/amplitudejs/shuffle-on.svg");
}

@media all and (-ms-high-contrast: none) {

   div#control-container *::-ms-backdrop,
   div#control-container div#control-container {
      margin-top: 40px;
      float: none;
   }
}

div#control-container div#central-control-container {
   width: 50%;
   float: left;
}

div#control-container div#central-control-container div#central-controls {
   width: 130px;
   margin: auto;
}

div#control-container div#central-control-container div#central-controls div#previous {
   width: 40px;
   height: 40px;
   cursor: pointer;
   background: url("/img/amplitudejs/prev.svg");
   background-repeat: no-repeat;
   float: left;
   margin-top: 10px;
   margin-right: -5px;
}

div#control-container div#central-control-container div#central-controls div#play-pause {
   width: 60px;
   height: 60px;
   cursor: pointer;
   float: left;
}

div#control-container div#central-control-container div#central-controls div#play-pause.amplitude-paused {
   background: url("/img/amplitudejs/play.svg");
}

div#control-container div#central-control-container div#central-controls div#play-pause.amplitude-playing {
   background: url("/img/amplitudejs/pause.svg");
}

div#control-container div#central-control-container div#central-controls div#next {
   width: 40px;
   height: 40px;
   cursor: pointer;
   background: url("/img/amplitudejs/next.svg");
   background-repeat: no-repeat;
   float: left;
   margin-top: 10px;
   margin-left: -5px;
}

div#control-container div#volume-container {
   width: 25%;
   float: left;
   padding-top: 20px;
}

div#control-container div#volume-container div#shuffle-right {
   width: 23px;
   height: 19px;
   cursor: pointer;
   margin: auto;
}

div#control-container div#volume-container div#shuffle-right.amplitude-shuffle-off {
   background: url("/img/amplitudejs/shuffle-off.svg");
}

div#control-container div#volume-container div#shuffle-right.amplitude-shuffle-on {
   background: url("/img/amplitudejs/shuffle-on.svg");
}

div#control-container div.amplitude-mute {
   cursor: pointer;
   width: 25px;
   height: 19px;
   float: left;
}

div#control-container div.amplitude-mute.amplitude-not-muted {
   background: url("/img/amplitudejs/volume.svg");
   background-repeat: no-repeat;
}

div#control-container div.amplitude-mute.amplitude-muted {
   background: url("/img/amplitudejs/mute.svg");
   background-repeat: no-repeat;
}

div#control-container:after {
   content: "";
   display: table;
   clear: both;
}

/* Small only */
@media screen and (max-width: 39.9375em) {
   div#amplitude-player div#repeat-container div#repeat {
      margin-left: auto;
      margin-right: auto;
      float: none;
   }

   div#amplitude-player div#repeat-container div#shuffle {
      display: none;
   }

   div#amplitude-player div#volume-container div.volume-controls {
      display: none;
   }

   div#amplitude-player div#volume-container div#shuffle-right {
      display: block;
   }
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
   div#amplitude-player div#repeat-container div#repeat {
      margin-left: auto;
      margin-right: auto;
      float: none;
   }

   div#amplitude-player div#repeat-container div#shuffle {
      display: none;
   }

   div#amplitude-player div#volume-container div.volume-controls {
      display: none;
   }

   div#amplitude-player div#volume-container div#shuffle-right {
      display: block;
   }
}

/* Large and up */
@media screen and (min-width: 64em) {
   div#amplitude-player div#repeat-container div#repeat {
      margin-left: 30px;
      margin-right: 10px;
      float: left;
   }

   div#amplitude-player div#volume-container div#shuffle-right {
      display: none;
   }
}

input[type=range].amplitude-volume-slider {
   -webkit-appearance: none;
   appearance: none;
   width: calc(100% - 33px);
   float: left;
   margin-top: 10px;
   margin-left: 5px;
   background: inherit;
}

@-moz-document url-prefix() {
   input[type=range].amplitude-volume-slider {
      margin-top: 0px;
   }
}

@supports (-ms-ime-align: auto) {
   input[type=range].amplitude-volume-slider {
      margin-top: 3px;
      height: 12px;
      background-color: rgba(255, 255, 255, 0) !important;
      z-index: 999;
      position: relative;
   }

   div.ms-range-fix {
      height: 1px;
      background-color: #A9A9A9;
      width: 67%;
      float: right;
      margin-top: -6px;
      z-index: 9;
      position: relative;
   }
}

@media all and (-ms-high-contrast: none) {

   *::-ms-backdrop,
   input[type=range].amplitude-volume-slider {
      margin-top: -24px;
      background-color: rgba(255, 255, 255, 0) !important;
   }
}

input[type=range].amplitude-volume-slider:focus {
   outline: none;
}

input[type=range].amplitude-volume-slider::-webkit-slider-runnable-track {
   width: 75%;
   height: 1px;
   cursor: pointer;
   background: #CFD8DC;
}

input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
   height: 10px;
   width: 10px;
   border-radius: 10px;
   background: #00A0FF;
   cursor: pointer;
   margin-top: -4px;
   -webkit-appearance: none;
}

input[type=range].amplitude-volume-slider:focus::-webkit-slider-runnable-track {
   background: #CFD8DC;
}

input[type=range].amplitude-volume-slider::-moz-range-track {
   width: 100%;
   height: 1px;
   cursor: pointer;
   background: #CFD8DC;
}

input[type=range].amplitude-volume-slider::-moz-range-thumb {
   height: 10px;
   width: 10px;
   border-radius: 10px;
   background: #00A0FF;
   cursor: pointer;
   margin-top: -4px;
}

input[type=range].amplitude-volume-slider::-ms-track {
   width: 100%;
   height: 1px;
   cursor: pointer;
   background: transparent;
   /*leave room for the larger thumb to overflow with a transparent border */
   border-color: transparent;
   border-width: 15px 0;
   /*remove default tick marks*/
   color: transparent;
}

input[type=range].amplitude-volume-slider::-ms-fill-lower {
   background: #CFD8DC;
   border-radius: 10px;
}

input[type=range].amplitude-volume-slider::-ms-fill-upper {
   background: #CFD8DC;
   border-radius: 10px;
}

input[type=range].amplitude-volume-slider::-ms-thumb {
   height: 10px;
   width: 10px;
   border-radius: 10px;
   background: #00A0FF;
   cursor: pointer;
   margin-top: 2px;
}

input[type=range].amplitude-volume-slider:focus::-ms-fill-lower {
   background: #CFD8DC;
}

input[type=range].amplitude-volume-slider:focus::-ms-fill-upper {
   background: #CFD8DC;
}

input[type=range].amplitude-volume-slider::-ms-tooltip {
   display: none;
}

div#time-container span.current-time {
   color: #607D8B;
   font-size: 14px;
   font-weight: 700;
   float: left;
   width: 15%;
   text-align: center;
}

div#time-container span.duration {
   color: #607D8B;
   font-size: 14px;
   font-weight: 700;
   float: left;
   width: 15%;
   text-align: center;
}

div#time-container:after {
   content: "";
   display: table;
   clear: both;
}

div#meta-container {
   text-align: center;
   margin-top: 5px;
}

div#meta-container span.song-name {
   display: block;
   color: #272726;
   font-size: 20px;
   font-family: 'Open Sans', sans-serif;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

div#meta-container div.song-artist-album {
   color: #607D8B;
   font-size: 14px;
   font-weight: 700;
   text-transform: uppercase;
   font-family: 'Open Sans', sans-serif;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

div#meta-container div.song-artist-album span {
   display: block;
}

/*
  3. Layout
  */

div.amplitude-wave-form {
   margin-top: -14px;
}

div.amplitude-wave-form svg {
   stroke: #00a0ff;
   height: 50px;
   width: 100%;
   stroke-width: .5px;
}

div.amplitude-wave-form svg g {
   stroke: #00a0ff;
   height: 50px;
   width: 100%;
}

div.amplitude-wave-form svg g path {
   stroke: #00a0ff;
   height: 50px;
   width: 100%;
}

/*
  4. Pages
  */
/*
  5. Themes
  */
/*
  6. Utils
  */
/*
  7. Vendors
  */

/*# sourceMappingURL=app.css.map */