Размер файла: 3.1Kb
.music-prev {
text-align: center;
width: 120px;
height: 120px;
background-color: #E3EAF0;
color: #6C7A85;
display: inline-block;
font-size: 50px;
vertical-align: middle;
line-height: 120px;
}
.play-upload {
position: absolute;
top: 12px;
display: inline-block;
left: 11px;
}
.play-volume {
position: absolute;
top: 12px;
display: inline-block;
right: 10px;
}
.audio-bg {
background-color: #D2DCE6;
width: 100%;
height: 8px;
box-sizing: border-box;
border-radius: 4px;
}
.audio-bar {
width: 0px;
height: 8px;
background-color: #78A2CC;
border-radius: 4px;
}
.player-duration-left {
width: 20px;
text-align: center;
vertical-align: middle;
color: #5C5F61;
font-size: 12px;
}
.player-duration-right {
width: 20px;
text-align: center;
vertical-align: middle;
color: #5C5F61;
font-size: 12px;
}
.player-progress-bar {
width: 72%;
text-align: center;
vertical-align: middle;
}
.play-button-style {
background-color: rgba(50, 50, 50, 0.6);
color: white;
width: 37px;
height: 37px;
border-radius: 100%;
border: none;
line-height: 37px;
position: absolute;
top: 47%;
left: 50%;
z-index: 1;
font-size: 16px;
transform: translate(-50%, -47%);
display: inline-block;
}
.play-button-style i{
position: absolute;
top: 53%;
left: 55%;
z-index: 1;
font-size: 16px;
transform: translate(-55%, -53%);
}
.play-button-style img{
position: absolute;
top: 46%;
left: 52%;
z-index: 1;
max-width: 19px;
transform: translate(-52%, -46%);
}
.play-pause {
position: absolute;
top: 12px;
display: inline-block;
left: 50%;
transform: translateX(-50%);
}
.play-back {
position: absolute;
left: 28%;
display: inline-block;
top: 13px;
}
.play-forward {
position: absolute;
right: 28%;
display: inline-block;
top: 13px;
}
.overlay-player {
z-index: 10;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 40px;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.75);
opacity: 0;
pointer-events: none;
transition: 0.5s ease-in-out;
max-height: 100vh;
overflow-y: auto;
}
.overlay-player.open-player {
opacity: 1;
pointer-events: inherit;
}
.modal-player {
position: fixed;
top: 5%;
left: 50%;
transform: translateX(-50%);
background-color: white;
box-shadow: 0px 1px 10px rgba(255, 255, 255, 0.35);
width: 400px;
max-width: 85%;
height: 460px;
transition: 0.5s ease-in-out;
z-index: 999999;
}
.play-content {
background-color: white;
padding: 7px;
box-sizing: border-box;
border: 1px #DEE1E2 solid;
margin-bottom: 10px;
}
.play-content-left {
display: inline-block;
width: 10%;
text-align: left;
}
.play-content-center {
display: inline-block;
width: 80%;
font-size: 13px;
}
.play-content-right {
display: inline-block;
width: 10%;
text-align: right;
}
.play-button-null {
background: none;
border: none;
color: #6C7F8D;
}