1 line
3.0 KiB
CSS
1 line
3.0 KiB
CSS
.module[data-type=MP3]{width:446px;height:118px;background:#a4cfe2;border-radius:10px}.module[data-type=MP3] .musicPlayer audio{display:none}.musicPlayer .m-header{position:relative;text-align:center;font-size:24px;line-height:40px;color:#333;padding-top:16px;cursor:move}.musicPlayer .m-close{position:absolute;top:0;right:20px;line-height:30px;cursor:pointer;width:30px;height:30px}.musicPlayer .m-disk{margin:51px auto;display:block}.musicPlayer .m-handle{position:absolute;top:60px;transform:rotate(-25deg);right:113px;transition:all .3s}.musicPlayer .m-handle.on{right:134px;transform:rotate(0deg)}.musicPlayer .m-content{position:relative;overflow:hidden}.musicPlayer .m-footer{position:absolute;top:30%;left:0;width:100%;transform:translateY(-50%);overflow:hidden}.m-l-toolBox{float:left;margin-left:5%}.m-l-toolBox .m-player{display:inline-block;height:100%;cursor:pointer}.m-l-toolBox .m-player .mp-pause{display:none}.m-l-toolBox .m-player.on .mp-player{display:none}.m-l-toolBox .m-player.on .mp-pause{display:inline-block}.m-l-toolBox .m-random{display:inline-block;height:100%;cursor:pointer;margin-left:13px;padding:3px}.m-l-toolBox .m-random.on{background-color:rgba(0,0,0,.2);border-radius:4px}.m-r-toolBox{float:right;margin-right:5%}.m-r-toolBox .m-voice{cursor:pointer}.m-r-toolBox .m-voice .mv-muted{display:none}.m-r-toolBox .m-voice.on .mv-voice{display:none}.m-r-toolBox .m-voice.on .mv-muted{display:inline-block}.m-r-toolBox .m-voice-progress{display:inline-block;width:80px;height:4px;margin-left:5px;background-color:#fff;border-radius:4px;cursor:pointer;position:relative;top:-4px}.m-r-toolBox .m-voice-progress-bg{width:0;height:4px;display:block;border-radius:4px;background-color:#41aef4;transition:all .3s}.m-play-infoBox{position:absolute;bottom:10%;left:5%;width:90%;transform:translateY(15%)}.m-play-progress{width:100%;height:4px;margin:0 auto;background-color:#fff;cursor:pointer}.m-play-progress{margin-top:20px;border-radius:4px}.m-play-progress-bg{position:relative;width:0;height:4px;display:block;border-radius:4px;background-color:#41aef4;transition:all .3s ease}.m-play-progress-bg .m-play-progress-btn{position:absolute;top:-6px;right:-12px;width:8px;height:8px;background-color:#fff;border:4px solid #56c2e8;border-radius:50%;box-shadow:0 2px 5px 0 #3c91b1;cursor:pointer;pointer-events:none;box-sizing:content-box}.m-play-time{margin:8px auto 0;width:100%}.mp-left-time{width:40px;height:14px;line-height:14px;background-color:rgba(15,109,166,.2);border-radius:7px;text-align:center;font-size:12px;color:#fff;display:inline-block}.mp-right-time{float:right;width:40px;height:14px;line-height:14px;background-color:rgba(15,109,166,.2);border-radius:7px;text-align:center;font-size:12px;color:#fff;display:inline-block}.play_box .musiced .music_icon{-webkit-animation:changeright 6s linear infinite}@-webkit-keyframes changeright{0%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg)}to{-webkit-transform:rotate(1turn)}}.rotate_common{-webkit-animation:changeright 6s linear infinite} |