#wps-sticky-player{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:9999;
background:#ffffff;
box-shadow:0 -4px 12px rgba(0,0,0,0.12);
display:flex;
flex-direction:column;
align-items:stretch;
gap:0;
padding:0;
transform:translateY(100%);
transition:transform 0.25s ease-out, opacity 0.25s ease-out;
opacity:0;
font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
box-sizing:border-box;
}
#wps-sticky-player .wps-sticky-note{
width:100%;
box-sizing:border-box;
padding:10px 14px 6px;
margin:0;
font-size:14px;
line-height:1.45;
font-weight:500;
color:#1a1a1a;
text-align:center;
max-width:100%;
overflow:hidden;
opacity:0;
max-height:0;
padding-top:0;
padding-bottom:0;
transform:translateY(6px);
transition:opacity 0.3s ease, max-height 0.35s ease, padding 0.35s ease, transform 0.35s ease;
pointer-events:none;
-webkit-font-smoothing:antialiased;
}
#wps-sticky-player .wps-sticky-note.wps-note-visible{
opacity:1;
max-height:280px;
padding-top:10px;
padding-bottom:8px;
transform:translateY(0);
white-space:normal;
overflow:visible;
}
#wps-sticky-player .wps-sticky-note.wps-note-hidden{
opacity:0;
max-height:0;
padding-top:0;
padding-bottom:0;
transform:translateY(4px);
overflow:hidden;
}
#wps-sticky-player .wps-sticky-body{
position:relative;
padding-top:3px;
}
#wps-sticky-player .wps-sticky-row{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
align-items:center;
gap:8px;
padding:8px 10px 10px;
box-sizing:border-box;
}
#wps-sticky-player.wps-visible{
transform:translateY(0);
opacity:1;
}
#wps-sticky-player .wps-title-wrap{
flex:1 1 auto;
overflow:hidden;
min-width:0;
position:relative;
max-width:calc(100vw - 200px);
}
#wps-sticky-player .wps-title-single{
display:none;
width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:inherit;
font-weight:600;
line-height:1.25;
}
#wps-sticky-player.wps-narrow-title .wps-title-single{
display:block;
}
#wps-sticky-player.wps-narrow-title .wps-title-stack{
display:none !important;
}
#wps-sticky-player .wps-title{
font-size:13px;
font-weight:600;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
display:flex;
flex-direction:column;
max-width:100%;
min-width:0;
line-height:1.2;
}
#wps-sticky-player .wps-title-stack{
display:flex;
flex-direction:column;
min-width:0;
overflow:hidden;
}
#wps-sticky-player .wps-album-title{
font-size:13px;
font-weight:600;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#wps-sticky-player .wps-track-title{
font-size:12px;
font-weight:500;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
margin-top:2px;
opacity:0.9;
}
#wps-sticky-player.wps-marquee-on .wps-album-title,
#wps-sticky-player.wps-marquee-on .wps-track-title{
text-overflow:clip !important;
} #wps-sticky-player.wps-size-custom .wps-album-title,
#wps-sticky-player.wps-size-custom .wps-track-title{ }
#wps-sticky-player .wps-title-wrap{
overflow:hidden !important;
position:relative;
}
#wps-sticky-player .wps-track-title.wps-marquee-on,
#wps-sticky-player .wps-album-title.wps-marquee-on{
text-overflow:clip !important;
display:inline-block !important;
will-change:transform;
overflow:visible !important;
white-space:nowrap !important;
} #wps-sticky-player .wps-controls{
display:flex;
align-items:center;
justify-content:flex-end;
gap:4px;
flex-shrink:0;
flex-grow:0;
margin-left:auto;
}
@media (max-width:639px){
#wps-sticky-player .wps-title-wrap{
max-width:calc(100vw - 168px);
}
#wps-sticky-player .wps-sticky-row{
gap:6px;
padding:6px 8px 8px;
}
#wps-sticky-player .wps-controls{
gap:3px;
}
}
#wps-sticky-player button.wps-btn{
border:none;
border-radius:999px;
background:transparent;
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
cursor:pointer;
padding:0px;
flex-shrink:0;
color:inherit;
}
#wps-sticky-player button.wps-btn svg{
width:100%;
height:100%;
display:block;
}
#wps-sticky-player button.wps-back,
#wps-sticky-player button.wps-fwd{
color:#b79505;
font-weight:600;
}
#wps-sticky-player button.wps-back svg,
#wps-sticky-player button.wps-fwd svg{
width:100%;
height:100%;
display:block;
}
#wps-sticky-player button.wps-main{
width:34px;
height:34px;
font-size:16px;
border-radius:999px;
} #wps-sticky-player.wps-size-compact .wps-sticky-row{padding:6px 10px 8px;}
#wps-sticky-player.wps-size-compact .wps-title{font-size:12px;}
#wps-sticky-player.wps-size-compact button.wps-btn{width:24px;height:24px;font-size:11px;padding:0px;}
#wps-sticky-player.wps-size-compact button.wps-main{width:30px;height:30px;font-size:14px;}
#wps-sticky-player.wps-size-medium .wps-sticky-row{padding:8px 12px 10px;}
#wps-sticky-player.wps-size-medium .wps-title{font-size:13px;}
#wps-sticky-player.wps-size-medium button.wps-btn{width:28px;height:28px;font-size:13px;padding:0px;}
#wps-sticky-player.wps-size-medium button.wps-main{width:34px;height:34px;font-size:16px;}
#wps-sticky-player.wps-size-large .wps-sticky-row{padding:12px 16px 14px;}
#wps-sticky-player.wps-size-large .wps-title{font-size:15px;}
#wps-sticky-player.wps-size-large button.wps-btn{width:32px;height:32px;font-size:15px;padding:0px;}
#wps-sticky-player.wps-size-large button.wps-main{width:40px;height:40px;font-size:18px;}
#wps-sticky-player.wps-size-super-large .wps-sticky-row{padding:16px 20px 18px;}
#wps-sticky-player.wps-size-super-large{
min-height:80px;
}
#wps-sticky-player.wps-size-super-large .wps-title{
font-size:18px;
}
#wps-sticky-player.wps-size-super-large .wps-album-title{
font-size:18px !important;
font-weight:700 !important;
}
#wps-sticky-player.wps-size-super-large .wps-track-title{
font-size:16px !important;
font-weight:600 !important;
margin-top:4px;
}
#wps-sticky-player.wps-size-super-large button.wps-btn{
width:40px !important;
height:40px !important;
font-size:18px;
padding:0px;
}
#wps-sticky-player.wps-size-super-large button.wps-main{
width:48px !important;
height:48px !important;
font-size:22px;
}
#wps-sticky-player.wps-size-super-large .wps-back svg,
#wps-sticky-player.wps-size-super-large .wps-fwd svg,
#wps-sticky-player.wps-size-super-large .wps-prev svg,
#wps-sticky-player.wps-size-super-large .wps-next svg{
width:40px;
height:40px;
}
#wps-sticky-player.wps-size-super-large .wps-playbtn svg{
width:48px;
height:48px;
}
#wps-sticky-player .wps-progress-wrap{
position:absolute;
left:0;
right:0;
top:0;
height:3px;
background:rgba(0,0,0,0.05);
z-index:1;
}
#wps-sticky-player .wps-progress-bar{
height:100%;
width:0;
border-radius:999px;
} .wps-skip-btn{
border:none;
border-radius:999px;
background:transparent;
width:32px;
height:32px;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
padding:0px;
color:#b79505;
margin:0 4px;
vertical-align:middle;
line-height:1;
}
.wps-skip-btn svg{
width:100%;
height:100%;
display:block;
}
.wps-skip-btn:hover{
opacity:0.8;
} @media (min-width:1025px){
#wps-sticky-player.wps-size-compact{display:none;}
}