/** * SMusic * Author:Smohan * Version:1.0.0 * url:http://www.smohan.net/lab/smusic.html * 使用请保留以上信息 */
.f-cb{height:0;}
.f-cb:after{display:block;content:" ";height:0;visibility:hidden;clear:both;}
.f-ib{display:inline-block;}
.f-din{display:inline;}
.f-dn{display:none;}
.f-db{display:block;}
.f-fl{float:left;}
.f-fr{float:right;}
.f-fwn{font-weight:normal;}
.f-fwb{font-weight:bold;}
.f-tal{text-align:left;}
.f-tac{text-align:center;}
.f-tar{text-align:right;}
.f-oh{overflow:hidden;zoom:1;clear:both;}
.f-tdn{text-decoration:none!important;}
.f-vam,.f-vama *{vertical-align:middle;}
.f-wsn{word-wrap:normal;white-space:nowrap;}
.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}
.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}
.f-ti{overflow:hidden;text-indent:-30000px;}
.f-lhn{line-height:normal;}
.f-toe{overflow:hidden;word-wrap:normal!important;white-space:nowrap;text-overflow:ellipsis;}
.f-usn{-webkit-user-select:none;user-select:none;}
.f-bsb{-webkit-box-sizing:border-box;box-sizing:border-box;}
.f-cp{cursor:pointer}
/*滚动条美化*/
.m-music-list-wrap::-webkit-scrollbar{width:6px;}
.m-music-list-wrap::-webkit-scrollbar-button:vertical{display:none}
.m-music-list-wrap::-webkit-scrollbar-track:vertical{background-color:#E0E0E0;border-radius:6px;}
.m-music-list-wrap::-webkit-scrollbar-track-piece{background-color:transparent;}
.m-music-list-wrap::-webkit-scrollbar-thumb:vertical{background-color:#888;border-radius:6px}
.m-music-list-wrap::-webkit-scrollbar-thumb:vertical:hover,::-webkit-scrollbar-thumb:vertical:active{background-color:#888}
/*SMusic*/
.grid-music-container{width:600px;height:306px;padding:20px 40px;position:absolute;border: 1px #D2D6D9 solid;margin-top: 10px;background-color: #fff;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .07), 0 1px 5px 0 rgba(0, 0, 0, .1);font-family:"Microsoft Yahei","微软雅黑","Helvetica Neue","Hiragino Sans GB",Helvetica,Tahoma,sans-serif;text-shadow:1px 0 0 rgba(255,255,255,.7);}
.grid-music-container h1{font-weight:bold;text-align: center;white-space: nowrap;}
.grid-music-container h1 strong{font-size:18px;color:#111210;}
.grid-music-container h1 small{margin-left:20px;font-size:14px;color:#313230;}
.grid-music-container .m-now-controls{padding-top:10px;position:relative;}
.grid-music-container .m-music-play-wrap{height:150px;position:relative;padding-left:140px;margin-top: 20px;float: left;margin-left: 29.5px;}
.grid-music-container .u-cover{width:121px;height:121px;overflow:hidden;background:url(../fm/music_icons.png) 0 0 no-repeat;position:absolute;top:0;left:0;}
.grid-music-container .u-cover img{display:block;width:100%;height:auto;max-height:100%;border-radius:50%;}
.grid-music-container .u-cover.play{-webkit-animation:Circle 10s linear infinite 0s forwards;animation:Circle 10s linear infinite 0s forwards;}
.grid-music-container .u-cover.paused{-webkit-animation-play-state:paused;animation-play-state:paused;}
@-webkit-keyframes Circle{from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@keyframes Circle{from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
.grid-music-container .m-now-info{float: left;}

.grid-music-container .m-now-controls .u-control{display:inline-block;vertical-align:middle;font-size:0;overflow:hidden;}
.grid-music-container .m-now-controls .u-process{width:420px;height:4px;position:relative;background-color:#cecfd4;}
.grid-music-container .m-now-controls .u-process .buffer-process,.grid-music-container .m-now-controls .u-process .current-process{display:block;width:0;height:4px;position:absolute;top:0;left:0;background-color:#3792ef;z-index:1;}
.grid-music-container .m-now-controls .u-process .buffer-process{z-index:0;background-color:#c1c2c0;}
.grid-music-container .m-now-controls .u-time{margin-left:10px;font-size:12px;color:#585957;}
.grid-music-container .m-now-controls .u-volume{overflow:visible;text-align:center;position:relative;margin-left:20px;}
.grid-music-container .u-volume .volume-process{width:3px;height:50px;background:#cecfd4;position:absolute;top:-54px;left:6px;cursor:pointer;visibility:hidden;/*设置不可见性，最好不要使用display:none，不然高度很难获取*/
}
.grid-music-container .u-volume .volume-process.show{visibility:visible;}
.grid-music-container .u-volume .volume-process .volume-current,.grid-music-container .u-volume .volume-process .volume-event{display:inline-block;width:3px;height:50%;background-color:#3792ef;position:absolute;left:0;bottom:0;-webkit-transition:height .2s linear;transition:height .2s linear;}
.grid-music-container .u-volume .volume-process .volume-event{width:21px;left:-10px;background:none;height:100%;z-index:1;}
.grid-music-container .u-volume .volume-process .volume-bar{display:inline-block;width:8px;height:8px;border-radius:100%;background-color:#fff;border:1px solid #a8a9a7;position:absolute;left:-3px;bottom:50%;-webkit-transition:bottom .2s linear;transition:bottom .2s linear;/* z-index:2;*/
 /* opacity:0;*/
}
.grid-music-container .u-volume .volume-process .volume-bar:hover,.grid-music-container .u-volume .volume-process .volume-bar:active{background-color:#f1f2f0;}
.grid-music-container .u-volume .volume-control{display:inline-block;width:18px;height:18px;background:url(../fm/music_icons.png) -140px -80px no-repeat;cursor:pointer;}
.grid-music-container .u-volume .volume-control:hover{background-position:-158px -80px;}
.grid-music-container .u-volume .volume-control.muted{background-position:-140px -98px;}
.grid-music-container .u-volume .volume-control.muted:hover{background-position:-158px -98px;}
.grid-music-container .m-music-list-wrap{height:270px;overflow-x:hidden;overflow-y:auto;float: right;}
.grid-music-container .m-music-list-wrap ul{width:220px}
.grid-music-container .m-music-list-wrap li{display:block;line-height:30px;padding:0 10px;cursor:pointer;color:#383937;font-size:14px;margin: 3px 0;}
.grid-music-container .m-music-list-wrap li strong{font-size:14px;font-weight:normal;}
.grid-music-container .m-music-list-wrap li:hover,.grid-music-container .m-music-list-wrap li.current{color:#ff850b;background:#e9e9e9;}
.grid-music-container .m-music-list-wrap li:hover{color:#383937;}
.grid-music-container .m-music-list-wrap li.current{background-color:transparent;}
.grid-music-container .m-play-controls{margin-top:10px;width:150px;float: left;margin-left:22.5px;}
.grid-music-container .m-play-controls a{display:inline-block;vertical-align:middle;}
.grid-music-container .m-play-controls .u-play-btn{display:inline-block;width:30px;height:30px;margin-right:15px;cursor:pointer;}
.u-play-btn{background:url(../fm/music_icons.png) -220px 0 no-repeat;}
.u-play-btn.prev,.u-play-btn.next{background-position:-220px 0;}
.u-play-btn.prev:hover,.u-play-btn.next:hover{background-position:-220px -36px;}
.u-play-btn.prev{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);}
.u-play-btn.play{background-position:-250px 0;}
.u-play-btn.play:hover{background-position:-250px -36px;}
.u-play-btn.paused{background-position:-280px 0;}
.u-play-btn.paused:hover{background-position:-280px -36px;}
.u-play-btn.mode{width:20px!important;height:18px!important;margin-right:10px!important;}
.u-play-btn.mode-list{background-position:-181px -98px;margin-left:65px;}
.u-play-btn.mode-list.current{background-position:-221px -98px;}
.u-play-btn.mode-random{background-position:-201px -80px;}
.u-play-btn.mode-random.current{background-position:-241px -80px;}
.u-play-btn.mode-single{background-position:-181px -80px;}
.u-play-btn.mode-single.current{background-position:-221px -80px;}