.hap-sticky.hap-sticky-fixed{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 9999999;
opacity: 0;
margin-bottom: 0;
display: none;
max-width: none!important;
transition: all .3s ease-out;
}
.hap-sticky.hap-sticky-float{
position: fixed;
bottom: 10px;
left: 0;
margin-bottom: 0;
margin-left: 10px!important;
margin-right: 10px!important;
z-index: 9999999;
opacity: 0;
display: none;
max-width: none!important;
transition: all .3s ease-out;
}
.hap-sticky-float.hap-sticky-float-right{
left:auto;
right:0;
}
@media screen and (max-width: 500px) {
.hap-sticky-float{
margin-left:0!important;
margin-right:0!important; 
}
}
.hap-fixed-visible{
opacity: 1!important;
}
.hap-sticky-fixed .hap-sticky-player-holder{
position: relative;
height: 70px;
left:0;
top:0px;
width: 100%;
display: flex;
border-width: 4px;
border-style: solid;
border-left: none;
border-bottom: none;
border-right: none;
border-color: rgba(116, 221, 199, 1);
}
.hap-sticky-float .hap-sticky-player-holder{
position: relative;
height: 50px;
left:0;
top:0px;
width: 100%;
display: flex;
border-radius: 10px;
}
.hap-sticky-skin-light .hap-sticky-player-holder,
.hap-sticky-skin-light .hap-sticky-player-outer-controls{
background:#fafafa;
box-shadow: 0px -2px 5px 0px rgba(153,153,153,0.25);
}
.hap-sticky-skin-dark .hap-sticky-player-holder,
.hap-sticky-skin-dark .hap-sticky-player-outer-controls{
background:#222;
box-shadow: 0px -2px 5px 0px rgba(20,20,20,0.25);
}
button.hap-sticky-player-btn{
position:relative;
left:0;
top:0;
width:43px;
height:100%;
float:left;
cursor: pointer;
}
.hap-sticky-player-btn svg,
.hap-sticky-playback-toggle-ex svg,
.hap-sticky-player-toggle-ex svg{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
fill:currentColor;
transition: color .3s ease-out;
}
.hap-sticky-fixed .hap-sticky-player-btn svg,
.hap-sticky-fixed .hap-sticky-playback-toggle-ex svg,
.hap-sticky-fixed .hap-sticky-player-toggle-ex svg{
height: 19px;
}
.hap-sticky-float .hap-sticky-player-btn svg,
.hap-sticky-float .hap-sticky-playback-toggle-ex svg,
.hap-sticky-float .hap-sticky-player-toggle-ex svg{
height: 17px;
}
.hap-sticky .hap-sticky-btn-player-toggle{
transition: transform 0.3s ease-out;
height: 100%;
display: block;
}
.hap-sticky .hap-btn-player-toggle-rotate{
transform: rotate(180deg);
}
.hap-sticky-fixed.hap-sticky-skin-light .hap-sticky-player-btn svg,
.hap-sticky-fixed.hap-sticky-skin-light .hap-sticky-playback-toggle-ex svg,
.hap-sticky-fixed.hap-sticky-skin-light .hap-sticky-player-toggle-ex svg{
color:#666;
}
.hap-sticky-skin-dark .hap-sticky-player-btn svg,
.hap-sticky-skin-dark .hap-sticky-playback-toggle-ex svg,
.hap-sticky-skin-dark .hap-sticky-player-toggle-ex svg{
color:#aaa;
}
.hap-sticky-float.hap-sticky-skin-light .hap-sticky-player-btn svg,
.hap-sticky-float.hap-sticky-skin-light .hap-sticky-playback-toggle-ex svg,
.hap-sticky-float.hap-sticky-skin-light .hap-sticky-player-toggle-ex svg{
color:#666;
}
.hap-sticky-skin-dark .hap-sticky-player-btn svg,
.hap-sticky-skin-dark .hap-sticky-playback-toggle-ex svg,
.hap-sticky-skin-dark .hap-sticky-player-toggle-ex svg{
color:#efefef;
}
@media (hover: hover) {
.hap-sticky-skin-light .hap-sticky-player-btn:hover svg,
.hap-sticky-skin-light .hap-sticky-playback-toggle-ex:hover svg,
.hap-sticky-skin-light .hap-sticky-player-toggle-ex:hover svg{
color:rgba(116, 221, 199, 1);
}
.hap-sticky-skin-dark .hap-sticky-player-btn:hover svg,
.hap-sticky-skin-dark .hap-sticky-playback-toggle-ex:hover svg,
.hap-sticky-skin-dark .hap-sticky-player-toggle-ex:hover svg{
color:rgba(116, 221, 199, 1);
}
.hap-sticky .hap-contr-btn-hover svg{
color: rgba(116, 221, 199, 1)!important;
}
}
.hap-sticky-player-left {
position: relative;
top:0;
left:0;
height: 100%;
display: flex;
align-items:center;
}
.hap-sticky-playback-controls{
position: relative;
display: flex;
align-items: center;
height: 100%;
}
.hap-sticky-fixed .hap-sticky-player-thumb{
position: relative;
width:70px;
height:100%;
float: left;
overflow: hidden;
background-position: 50% 50%;
background-size: cover;
flex-shrink: 0;
}
.hap-sticky-fixed .hap-sticky-player-song-info{
margin-left: 10px;
margin-right: 10px;
width:100%;
overflow:hidden;
max-width: 300px;
line-height: normal;
box-sizing: border-box;
line-height: 1;
}
.hap-sticky-float .hap-sticky-player-thumb{
position: relative;
width:50px;
height:100%;
float: left;
overflow: hidden;
background-position: 50% 50%;
background-size: cover;
flex-shrink: 0;
border-radius: 10px;
}
.hap-sticky-float .hap-sticky-player-song-info{
margin-left: 10px;
margin-right: 10px;
width:100%;
overflow:hidden;
max-width: 200px;
line-height: normal;
box-sizing: border-box;
line-height: 1;
}
.hap-sticky-player-title{
font-size: 1em;
font-weight: bold;
display: inline-block;
white-space:nowrap;
padding: 0;
margin: 0;
}
.hap-sticky-player-artist{
font-size: 0.8em;
display: inline-block;
white-space:nowrap;
padding: 0;
margin: 0;
}
.hap-sticky-scrolling-repeat{
padding-left: 10px;
}
.hap-sticky-title-scrolling{
transition: transform 4s linear;
}
.hap-sticky-artist-scrolling{
transition: transform 6s linear;
}
.hap-sticky-skin-light .hap-sticky-player-title{
color: #111;
}
.hap-sticky-skin-dark .hap-sticky-player-title{
color: #ddd;
}
.hap-sticky-skin-light .hap-sticky-player-artist{
color: #9E9E9E;
}
.hap-sticky-skin-dark .hap-sticky-player-artist{
color: #aaa;
}
.hap-sticky-time-current,
.hap-sticky-time-total{
position:relative;
text-align: center;
align-items: center;
display: flex;
padding: 0!important;
font-size:11px!important;
pointer-events:none;
width:auto;
}
.hap-sticky-time-current{
margin-left: 15px;
}
.hap-sticky-time-total{
margin-right: 15px;
}
.hap-sticky-skin-dark .hap-sticky-time-current,
.hap-sticky-skin-dark .hap-sticky-time-total{
color: #aaa;
}
.hap-sticky-music-seekbar{
position: relative;
display: flex;
flex:1;
margin: 0 20px;
cursor: pointer;
opacity: 0;
}
.hap-sticky-music-seekbar-visible{
opacity: 1;
transition: opacity 0.5s;
}
.hap-sticky-music-seekbar-wave{
position: absolute;
top: 10px;
left: 20px;
right: 20px;
box-sizing: border-box;
height: calc(100% - 20px);
overflow: hidden;
}
.hap-sticky-music-seekbar-wave-progress{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.hap-sticky-fixed .hap-sticky-music-seekbar-progress-bg{
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.hap-sticky-fixed .hap-sticky-music-seekbar-progress{
position: absolute;
top: 0;
left: 0;
height: 100%;
width:333px;
transition: width 100ms linear;
}
.hap-sticky-music-seekbar-progress-bg{
background: #aaa;
}
.hap-sticky-music-seekbar-progress{
background: #7780b4;
} .hap-sticky-fixed .hap-sticky-music-seekbar-wrap{
position: relative;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.hap-sticky-fixed .hap-sticky-music-seekbar-line{
position: absolute;
top: 33px;
left: 25px;
right: 25px;
height: 3px;
box-sizing: border-box;
} .hap-sticky-float .hap-sticky-music-seekbar-wrap{
position: absolute;
top: -14px;
width: calc(100% - 16px);
height: 20px;
left: 8px;
display: none;
cursor: pointer;
}
.hap-sticky-float .hap-sticky-music-seekbar-line{
position: absolute;
top: 12px;
width: 100%;
height: 3px;
left: 0;
}
.hap-sticky-float .hap-sticky-music-seekbar-progress-bg{
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.hap-sticky-float .hap-sticky-music-seekbar-progress{
position: absolute;
top: 0;
left: 0;
height: 100%;
transition: width 100ms linear;
}
.hap-sticky-float .hap-sticky-player-holder:hover .hap-sticky-music-seekbar-wrap{
display: block;
}
.hap-sticky-player-right{
position: relative;
top: 0;
right: 0;
display: flex;
align-items: center;
height: 100%;
}
.hap-sticky-right-controls{
margin-right:20px;
}
.hap-sticky .hap-volume-toggle .hap-sticky-btn{
display: none;
}
.hap-sticky .hap-volume-toggle .hap-sticky-btn svg{
height: 25px;
}
.hap-sticky-volume-wrap{
position:relative;
left:0;
top:0;
height:100%;
cursor: pointer;
display: flex;
align-items: center;
touch-action: none;
flex-direction: row;
}
.hap-sticky .hap-volume-toggle .hap-sticky-btn{
display: none;
}
.hap-sticky .hap-volume-toggle .hap-sticky-btn-volume-up{
display: block;
}
.hap-sticky-fixed .hap-volume-seekbar{
position: relative;
width:100px;
height:30px;
cursor: pointer;
touch-action: none;
}
.hap-sticky-fixed .hap-volume-bg{
position:absolute;
top:14px;
overflow-y: hidden;
left:10px;
width:80px;
height:3px;
background:#ccc;
}
.hap-sticky-fixed .hap-volume-level{
position:absolute;
top:0;
left:0;
width:45px;
height:100%;
background:rgba(116, 221, 199, 1);
transition: width 100ms linear; 
}
.hap-sticky-float .hap-volume-seekbar{
position: absolute;
left: 5px;
top:-100px;
width:30px;
height:100px;
cursor: pointer;
touch-action: none;
visibility: hidden;
pointer-events: none;
}
.hap-sticky-skin-light.hap-sticky-float .hap-volume-seekbar{
background: #fafafa;
}
.hap-sticky-skin-dark.hap-sticky-float .hap-volume-seekbar{
background: #222;
}
.hap-sticky-float .hap-volume-bg{
position:absolute;
bottom:10px;
overflow-y: hidden;
left:14px;
width:3px;
height:80px;
background:#ccc;
}
.hap-sticky-float .hap-volume-level{
position:absolute;
bottom:0;
left:0;
width:100%;
height: 33px;
background:rgba(116, 221, 199, 1);
transition: width 100ms linear; 
}
.hap-sticky-float .hap-sticky-volume-wrap:hover .hap-volume-seekbar{
visibility: visible;
pointer-events: auto;
}
.hap-sticky .hap-tooltip{
background:rgba(116, 221, 199, 1);
color:#fff!important;
}
.hap-sticky-fixed .hap-sticky-player-outer-controls{
position: absolute;
right: 0;
top: -39px;
width: 70px;
height: 35px;
}
.hap-sticky-float .hap-sticky-player-outer-controls{
position: absolute;
left: 10px;
top: -30px;
width: 30px;
height: 30px;
display: none;
background: rgb(116, 221, 199);
}
.hap-sticky-float .hap-sticky-player-outer-controls svg{
color: #fff!important;
}
.hap-sticky-float .hap-sticky-player-holder:hover .hap-sticky-player-outer-controls{
display: block;
}
.hap-sticky-fixed .hap-sticky-player-outer-controls button{
position: relative;
width:35px;
height:35px;
float: left;
cursor: pointer;
left: 0;
top: 0;
z-index: 2;
}
.hap-sticky-float .hap-sticky-player-outer-controls button{
position: relative;
width:30px;
height:30px;
cursor: pointer;
left: 0;
top: 0;
z-index: 2;
}
.hap-sticky-playback-rate-toggle{
display: flex;
align-items: center;
justify-content: center;
}
.hap-sticky-playback-rate-toggle-inner{
padding: 3px;
text-align: center;
border-radius: 3px;
user-select: none;
font-size: 13px;
line-height: normal;
}
.hap-sticky-playback-rate-toggle-inner{
color: #666;
background: #efefef;
}
.hap-sticky-share-holder{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width:600px;
width:100%;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
z-index:50;
padding:20px 20px 10px 20px;
display: none;
box-sizing: border-box; 
}
.hap-sticky-skin-light .hap-sticky-share-holder{
background:#fafafa;
}
.hap-sticky-skin-dark .hap-sticky-share-holder{
background:#222;
}
.hap-sticky-info-data{
max-height: 300px;
overflow:hidden;
}
.hap-sticky-info-title{
margin:0;
margin-right: 20px;
margin-bottom: 10px;
padding:0;
font-size:17px;
}
.hap-sticky-info-desc{
margin:0;
margin-right: 20px;
padding:0;
max-height: 150px;
overflow-y: auto;
font-size:13px;
}
.hap-sticky-skin-light .hap-sticky-info-title{
color:rgb(17,17,17);
}
.hap-sticky-skin-dark .hap-sticky-info-title{
color: #bcbcbc;
}
.hap-sticky-skin-light .hap-sticky-info-desc{
color:rgb(17,17,17);
}
.hap-sticky-skin-dark .hap-sticky-info-desc{
color: #9E9E9E;
}
.hap-sticky-info-desc::-webkit-scrollbar {
width: 5px; 
height: 5px; 
}
.hap-sticky-info-desc::-webkit-scrollbar-thumb {
background:#999;
}
.hap-sticky-info-desc::-webkit-scrollbar-track {
background:#e6e6e6;
}
.hap-sticky-share-holder-inner{
margin-top: 10px;
}
.hap-sticky-share-container{
display: flex;
flex-direction: row;
white-space: nowrap;
overflow-y: hidden;
overflow-x: auto;
margin-bottom: 10px;
}
.hap-sticky-share-close{
position: absolute;
right: 0;
top: 0;
left:auto;
height: 50px;
width: 50px;
cursor: pointer;
}
.hap-share-item.hap-sticky-player-btn{
height: 40px;
} .hap-sticky-fixed .hap-sticky-more-toggle-wrap{
position: relative;
width: 43px;
height: 100%;
display: none;
}
.hap-sticky-float .hap-sticky-more-toggle-wrap{
position: relative;
width: 43px;
height: 100%;
}
.hap-sticky-more-holder{
position: absolute;
bottom: 100%;
right: 0;
width: auto!important;
min-width: 150px;
z-index: 100;
display: none;
}
.hap-sticky-skin-light .hap-sticky-more-holder{
background: #fafafa;
}
.hap-sticky-skin-dark .hap-sticky-more-holder{
background: #222;
}
.hap-sticky-more-menu{
font-size: 14px;
list-style: none;
margin: 0;
padding: 0;
}
.hap-sticky-more-menu-item{
border: none;
display: block;
padding: 7px;
cursor: pointer;
}
.hap-sticky-skin-light .hap-sticky-more-holder{
color: #666;
}
.hap-sticky-skin-dark .hap-sticky-more-holder{
color: #efefef; 
}
@media (hover: hover) {
.hap-sticky-more-menu-item:hover{
background: rgba(116, 221, 199, 1)!important;
color: #fff;
}
}
.hap-sticky-float-anim{
position: fixed;
left: 0;
bottom: 0;
width: 30px;
height: 30px;
cursor: pointer;
display: none;
}
.hap-sticky-float-right .hap-sticky-float-anim{
left:auto;
right:0;
}
.hap-sticky-skin-light .hap-sticky-float-anim{
color: #333;
background: #fafafa;
}
.hap-sticky-skin-dark .hap-sticky-float-anim{
color: #fff;
background: #222;
}
.hap-sticky-float-anim svg{
position: absolute;
top: 11px;
left: 6px;
fill: currentColor;
transition: color .3s ease-out;
transform: rotate(180deg);
}
.hap-sticky-hidden {
opacity: 0; 
}
.hap-sticky-visible {
opacity: 1;
transition: opacity 500ms ease-out;
}
@media screen and (max-width: 1200px) {
.hap-sticky-fixed .hap-sticky-time-current,
.hap-sticky-fixed .hap-sticky-time-total{
display: none;
}
.hap-sticky-fixed .hap-volume-seekbar{
display: none;
}
}
@media screen and (max-width: 1000px) {
.hap-sticky-fixed .hap-sticky-prev-toggle{
display: none;
}
.hap-sticky-float .hap-sticky-skip-forward{
display: none;
}
.hap-sticky-fixed .hap-sticky-random-toggle{
display: none;
}
.hap-sticky-fixed .hap-sticky-loop-toggle{
display: none;
}
.hap-sticky-fixed .hap-sticky-lyrics-toggle,
.hap-sticky-fixed .hap-sticky-share-toggle,
.hap-sticky-fixed .hap-sticky-download-toggle{
display: none!important;
}
.hap-sticky-fixed .hap-sticky-more-toggle-wrap{
display: block;
}
}
@media screen and (max-width: 800px) {
.hap-sticky-fixed .hap-sticky-playback-toggle{
display: none;
}
.hap-sticky-fixed .hap-sticky-playback-rate-toggle{
display: none;
}
.hap-sticky-fixed .hap-sticky-volume-wrap{
display: none;
}
.hap-sticky-fixed .hap-sticky-music-seekbar{
display: none;
}
.hap-sticky-fixed .hap-sticky-music-seekbar-line{
display: block;
}
.hap-sticky-fixed .hap-sticky-player-left{
flex:1;
}
}
@media screen and (max-width: 800px) {
.hap-sticky-float .hap-sticky-prev-toggle{
display: none;
}
.hap-sticky-float .hap-sticky-playback-rate-toggle{
display: none;
}
.hap-sticky-float .hap-sticky-skip-forward{
display: none;
}
.hap-sticky-float .hap-sticky-random-toggle{
display: none;
}
.hap-sticky-float .hap-sticky-loop-toggle{
display: none;
}
}
@media screen and (max-width: 600px) {
.hap-sticky-float .hap-sticky-volume-wrap{
display: none;
}
}