.player-component {
color: #ffffff;
text-align: left;
padding: 0px 40px;
}
.player-component #audio {
height: 100%;
}
.player-component #audio > * {
display: block;
float: left;
height: 100%;
}
.player-component #audio .controls i {
position: relative;
width: auto;
height: 40px;
line-height: 36px;
text-align: center;
font-size: 0px;
box-sizing: border-box;
float: left;
top: 50%;
margin: -20px 0px 0px 0px;
}
.player-component #audio .controls i.fa-backward {
margin-right: 10px;
}
.player-component #audio .controls i.fa-play {
border: 2px solid #ffffff;
border-radius: 100%;
margin-right: 8px;
margin-left: 8px;
width: 40px;
}
.player-component #audio .controls i::before {
font-size: 22px;
}
.player-component #audio .controls i.fa-play::before {
margin-left: 5px;
}
.player-component #audio .controls i.fa-forward {
margin-left: 10px;
}
.player-component #audio .progress {
position: relative;
margin: 0px 59px;
}
.player-component #audio .progress > * {
display: inline-block;
line-height: 80px;
}
.player-component #audio .progress .head,
.player-component #audio .progress .remaining {
position: absolute;
top: 0px;
}
.player-component #audio .progress .head {
left: 0px;
}
.player-component #audio .progress .remaining {
right: 0px;
}
.player-component #audio .progress .bar {
width: 302px;
height: 3px;
background-color: #cfd2d5;
margin: -1px 60px 0 60px;
position: relative;
display: block;
top: 50%;
}
.player-component #audio .progress .bar .value {
width: 20%;
height: 100%;
background-color: #2faddd;
display: block;
}
.player-component #audio .meta p {
float: left;
width: 170px;
margin: 0px 0px 0px 30px;
padding: 0px;
box-sizing: border-box;
top: 50%;
margin-top: -22px;
display: block;
position: relative;
}
.player-component #audio .meta p:first-child {
margin-left: 0px;
}
.player-component #audio .meta p > * {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 22px;
display: block;
}
.player-component #audio .meta .language,
.player-component #audio .meta .date {
}
.player-component #audio .meta .title,
.player-component #audio .meta .author {
}
.player-component #audio .meta .title {
font-weight: bold;
}