src/css/theme-mini.css
.meplayer-container-mini {
position: relative;
width: 90px;
height: 90px;
background: #FFF;
border-radius: 50%;
box-shadow: 0 0 20px rgba(59, 59, 177, .18);
}
.meplayer-isplaying.meplayer-container-mini {
-webkit-animation: breath 2s infinite alternate;
animation: breath 2s infinite alternate;
}
.meplayer-container-mini .meplayer-info, .meplayer-container-mini .meplayer-spectrum,
.meplayer-container-mini .meplayer-lyric, .meplayer-container-mini .meplayer-duration,
.meplayer-container-mini .meplayer-loadingsign, .meplayer-container-mini .meplayer-timeline-bg {
display: none;
}
.meplayer-container-mini .meplayer-control-play {
width: 90px;
height: 90px;
position: absolute;
top: 50%;
font-size: 26px;
line-height: 90px;
left: 50%;
margin-top: -45px;
margin-left: -45px;
color: #D94240;
}
.meplayer-container-mini .meplayer-control-play [class^='icon-'] {
line-height: 90px;
position: absolute;
left: 50%;
margin-left: -11px;
-webkit-transition: all .5s;
transition: all .5s;
cursor: pointer;
}
.meplayer-container-mini .meplayer-control-play .icon-play {
-webkit-transform: translateX(4px);
transform: translateX(4px);
opacity: 1;
}
.meplayer-container-mini.meplayer-isplaying .meplayer-control-play .icon-play {
-webkit-transform: translateX(16px);
transform: translateX(16px);
opacity: 0;
}
.meplayer-container-mini .meplayer-control-play .icon-pause {
-webkit-transform: translateX(-16px);
transform: translateX(-16px);
opacity: 0;
}
.meplayer-container-mini.meplayer-isplaying .meplayer-control-play .icon-pause {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.meplayer-container-mini .meplayer-volume-bg {
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.98);
line-height: 90px;
border-radius: 50%;
text-align: center;
color: rgba(0, 0, 0, 0.9);
font-size: 30px;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}
.meplayer-container-mini.meplayer-adjusting-volume .meplayer-volume-bg {
opacity: 1;
z-index: 0;
}
.meplayer-container-mini.meplayer-adjusting-volume .meplayer-volume-bg i {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
.meplayer-container-mini .meplayer-volume-bg i {
-webkit-transition: all 0.7s;
transition: all 0.7s;
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
.meplayer-container-mini.meplayer-changing-theme .meplayer-volume-bg {
display: none;
}
@-webkit-keyframes breath {
0% {
box-shadow: 0 0 35px rgba(59, 59, 177, .25);
}
100% {
box-shadow: 0 0 10px rgba(59, 59, 177, .33);
}
}
@keyframes breath {
0% {
box-shadow: 0 0 35px rgba(59, 59, 177, .25);
}
100% {
box-shadow: 0 0 10px rgba(59, 59, 177, .33);
}
}