html {
height:100%;
}
body {
height:100%;
}
#player {
display:none;
}
.ss-player {
position:fixed;
left:0;
bottom:0;
margin:10px;
color:#FFF;
}
.ss-player.mini .ss-box {
width:100px;
height:100px;
border-radius:50%;
}
.ss-player.mini .pbcell:nth-child(2),.ss-player.mini .pbcell:nth-child(3) {
display:none;
}
.ss-box {
width:500px;
height:100px;
background-color:#000;
overflow:hidden;
display:table;
transition:0.5s;
}
.ss-player .btn-ctrl {
width:40px;
height:40px;
margin:10px;
cursor:pointer;
display:inline-block;
background-image:url(http://jq22.qiniudn.com/1gvzgu.svg);
background-size:100% 100%;
background-position:center center;
transition:0.5s;
}
.ss-player .btn-ctrl.pause {
background-image:url(http://jq22.qiniudn.com/44mnya.svg);
}
.ss-player .timelabel {
color:#FFF;
font-size:14px;
}
.ss-player .progressbar {
width:300px;
height:4px;
margin:auto;
display:inline-block;
border-radius:2px;
background-color:rgba(255,255,255,0.2);
position:relative;
}
.ss-player .currenttime {
width:0%;
height:100%;
background-color:#e60012;
border-radius:2px;
position:absolute;
text-align:right;
left:0;
top:0;
}
.ss-player .buffertime {
width:0%;
height:100%;
background-color:rgba(180,180,180,0.5);
border-radius:2px;
}
.ss-player .currenttime .btn-drag {
width:6px;
height:6px;
border-radius:50%;
background-color:#e60012;
border:2px solid #FFF;
display:inline-block;
position:absolute;
right:0px;
margin-right:-4px;
top:-2px;
cursor:pointer;
transition:0.3s;
}
.ss-player .currenttime .btn-drag:hover {
box-shadow:0 0 10px 0 rgba(255,255,255,1);
}
.ss-player .pbcell {
display:table-cell;
vertical-align:middle;
text-align:center;
}
.pbcell:nth-child(3) {
padding:0 10px;
}