iPawd Music Player - CSS

/*------------------------------------------------------------------------*/

 .popup_block{
    display:none;
    position:fixed;
    z-index:1000000;
    top:50%;
    left:50%;
    padding:10px;
    border-radius:2px;
    border:1px solid #cccccc;
    background-color:#ffffff;
}


.jp-col1{
    display:inline-block;
    margin-bottom:10px;
    margin-right:15px;
    width:130px;
    text-align:center;
}

.jp-col2{
    display:inline-block;
    float:right;
    width:350px;
}

/*---- Track/ Artist -----*/

.jp-image{
    margin-bottom:5px;
    padding:2px;
    border:1px solid #eeeeee;
}

.jp-image img{
    width:124px;
    vertical-align:middle;
}


.jp-track-name{
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    text-transform:uppercase;
    font-size:12px;
    color:#ACCEE1;
}

.jp-artist-name{
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    color:#cccccc;
}

/* ----- Buttons ------ */
.jp-controls{
    display:block;
    margin-top:5px;
}

.jp-controls button{
    margin-left:2px;
    margin-right:2px;
    height:30px;
    width:30px;
    padding:0px;
    font-size:15px;
    border:none;
    background:transparent;
    color:#ffffff;
}

.jp-controls i{
    width:30px;
    height:30px;
    border-radius:2px;
    background-color:#ACCEE1;
    display:flex;
        align-items: center;
        justify-content: center;
        -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.jp-controls button:hover i{
    background-color:#000000;
    color:#ffffff;
}

.jp-controls button:focus {
    outline:0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.jp-state-playing .jp-play i:before {
    padding-left: 0px;
    content: "\f04c" !important;
}

.jp-toggles{
    margin-top:5px;
    text-align:center;
}

.jp-toggles button{
    margin-left:2px;
    margin-right:2px;
    width:20px;
    height:20px;
    padding:0px;
    border-radius:2px;
    border:none;
    background:transparent;
}

.jp-toggles i{
    width:20px;
    height:20px;
    border-radius:2px;
    background-color:#aaaaaa;
    color:#ffffff;
    display:flex;
        align-items: center;
        justify-content: center;
        -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
}

.jp-toggles button:hover i{
    background-color:#000000;
}

.jp-toggles button:focus{
    outline:0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.jp-state-looped .jp-toggles .jp-repeat i,
.jp-state-shuffled .jp-toggles .jp-shuffle i{
    background-color:#000000;
}

.jp-state-muted .jp-mute i:before {
  content: "\f026" !important;
}


/*-------- Progress bars ---------*/

.jp-progress,
.jp-seek-bar,
.jp-play-bar,
.jp-volume-bar,
.jp-volume-bar-value {
  height: 9px;
  -webkit-border-radius:1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}

.jp-progress-container{
  height: 19px;
  font-size:10px;
}

.jp-progress {
  margin: 5px 30px 5px 30px;
  background-color: #ffffff;
}

.jp-seek-bar{
  cursor:pointer;
  background-color:#aaaaaa;
}

.jp-play-bar {
  float:left;
  position:relative;
  background-color:#ACCEE1;
  overflow: visible!important;
}


.jp-progress .bullet{
  position:absolute;
  top:-3px;
  right:-7px;
  width:12px;
  height:12px;
  border-radius:90px;
  border:1px solid #eeeeee;
  background-color: #ffffff;
}

.jp-time-holder {
    position:relative;
    font-size: 8px;
    color:#cccccc;
}

.jp-time-holder .jp-current-time {
  position: absolute;
  left: 0;
  top: 1px;
}

.jp-time-holder .jp-duration {
  position: absolute;
  right: 0;
  top: 1px;
}

/*--------- VOLUME -----------*/

.jp-volume-holder{
    margin-top:10px;
}


.jp-volume-bar{
    position:relative;
    height:10px;
    background-color:#ACCEE1;
}

.jp-volume-bar-value {
    position: relative;
    height:10px;
    background-color:#aaaaaa;
    overflow: visible!important;
}

.jp-volume-bar .bullet{
  position:absolute;
  top:-4px;
  right:-3px;
  width:5px;
  height:15px;
  border-radius:2px;
  border:1px solid #eeeeee;
  background-color: #ffffff;
}

/* ------- Playlist -------- */

.jp-playlist {
  position: relative;
  height:200px;
  padding:3px;
  border-radius:2px;
  border:1px solid #eeeeee;
  overflow:auto;
}

.jp-playlist::-webkit-scrollbar {
    width: 0px;
}

.jp-playlist ul {
  padding: 0;
  margin: 0;
  background-color:#eeeeee;
  overflow: auto;
}

.jp-playlist li {
  list-style: none;
}

.jp-playlist li a{
  color: #aaaaaa;
  display: block;
  margin-top:-1px;
  padding: 5px 10px 5px 10px;
  outline: none;
  border-top: 1px solid #ffffff;
  border-bottom:1px solid #ffffff;
  font-size:9px;
        -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.jp-playlist li a:hover,
.jp-playlist li a:focus,
.jp-playlist li a:active {
    color: #ffffff;
    text-decoration: none;
    background-color:#000000;
    color:#ffffff;
    outline:0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*------------------------------------------------------------------------*/