:root {
--srclub-sticky-height: 0px; --srclub-container-max: 1200px;
--srclub-container-pad: 14px;
}
body {
padding-bottom: var(--srclub-sticky-height) !important;
} #srclub-sticky-player {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 999999;
background: rgba(10, 10, 10, 0.96);
backdrop-filter: blur(8px);
border-top: 1px solid rgba(255,255,255,.12);
box-shadow: 0 -10px 30px rgba(0,0,0,.45);
color: #fff;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
} #srclub-sticky-player.is-collapsed {
transform: translateY(calc(100% - 46px));
} .srclub-sticky-inner {
display: flex;
align-items: center;
gap: 12px;
max-width: var(--srclub-container-max);
margin: 0 auto;
padding: 10px var(--srclub-container-pad);
} .srclub-sticky-toggle {
width: 36px;
height: 36px;
border-radius: 999px;
border: none;
background: rgba(255,255,255,.12);
color: #fff;
cursor: pointer;
font-size: 18px;
line-height: 1;
flex-shrink: 0;
}
.srclub-sticky-toggle:hover {
background: rgba(255,255,255,.22);
} .srclub-sticky-meta {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex-shrink: 0;
}
.srclub-sticky-art {
width: 44px;
height: 44px;
border-radius: 8px;
overflow: hidden;
background: #222;
flex-shrink: 0;
}
.srclub-sticky-art img {
width: 100%;
height: 100%;
object-fit: cover;
}
.srclub-sticky-art-fallback {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #444, #111);
}
.srclub-sticky-text {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.srclub-sticky-title {
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 320px;
} .srclub-sticky-speeds {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.srclub-speed {
border: none;
background: rgba(255,255,255,.12);
color: #fff;
padding: 4px 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.srclub-speed:hover {
background: rgba(255,255,255,.22);
}
.srclub-speed.is-active {
background: #0fb9b1;
color: #000;
} .srclub-sticky-host {
flex: 1;
min-width: 0;
} #srclub-sticky-player .plyr {
--plyr-color-main: #0fb9b1;
--plyr-audio-controls-background: transparent;
--plyr-audio-control-color: #fff; --plyr-audio-control-color-hover: #0fb9b1;
background: transparent;
}
#srclub-sticky-player .plyr__controls {
padding: 6px 0 0;
}
#srclub-sticky-player .plyr__control {
border-radius: 8px;
} #srclub-sticky-player .srclub-seekback,
#srclub-sticky-player .srclub-seekfwd {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 10px !important;
background: rgba(255,255,255,.08);
}
#srclub-sticky-player .srclub-seekback:hover,
#srclub-sticky-player .srclub-seekfwd:hover {
background: rgba(255,255,255,.16);
}
#srclub-sticky-player .srclub-seekback svg,
#srclub-sticky-player .srclub-seekfwd svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
#srclub-sticky-player .srclub-seek-label {
font-size: 12px;
font-weight: 800;
letter-spacing: .2px;
opacity: .95;
line-height: 1;
} #srclub-sticky-player .plyr__control[data-plyr="play"] {
color: #ffffff !important;
}
#srclub-sticky-player .plyr__control[data-plyr="play"] svg,
#srclub-sticky-player .plyr__control[data-plyr="play"] svg path,
#srclub-sticky-player .plyr__control[data-plyr="play"] svg polygon {
fill: #ffffff !important;
stroke: #ffffff !important;
}
#srclub-sticky-player .plyr__control[data-plyr="play"]:hover {
background: #0fb9b1 !important;
color: #ffffff !important;
}
#srclub-sticky-player .plyr__control[data-plyr="play"]:hover svg,
#srclub-sticky-player .plyr__control[data-plyr="play"]:hover svg path,
#srclub-sticky-player .plyr__control[data-plyr="play"]:hover svg polygon {
fill: #ffffff !important;
stroke: #ffffff !important;
} #srclub-sticky-player .plyr__control[data-plyr="mute"] {
color: #ffffff !important; }
#srclub-sticky-player .plyr__control[data-plyr="mute"] svg,
#srclub-sticky-player .plyr__control[data-plyr="mute"] svg * {
fill: #ffffff !important;
stroke: #ffffff !important;
}
#srclub-sticky-player .plyr__control[data-plyr="mute"]:hover,
#srclub-sticky-player .plyr__control[data-plyr="mute"]:focus {
background: #0fb9b1 !important; color: #ffffff !important; }
#srclub-sticky-player .plyr__control[data-plyr="mute"]:hover svg,
#srclub-sticky-player .plyr__control[data-plyr="mute"]:hover svg *,
#srclub-sticky-player .plyr__control[data-plyr="mute"]:focus svg,
#srclub-sticky-player .plyr__control[data-plyr="mute"]:focus svg * {
fill: #ffffff !important;
stroke: #ffffff !important;
} .srclub-inline-audio-hidden,
.wp-audio-shortcode,
.mejs-container,
.mejs__container,
.mejs-controls,
.mejs__controls {
display: none !important;
} @media (max-width: 900px) {
.srclub-sticky-inner {
flex-wrap: wrap;
padding: 12px 10px 14px;
max-width: 100%;
margin: 0;
} .srclub-sticky-meta {
width: 100%;
justify-content: center;
text-align: center;
gap: 10px;
}
.srclub-sticky-toggle { order: 0; }
.srclub-sticky-art    { order: 1; }
.srclub-sticky-text   { order: 2; align-items: center; }
.srclub-sticky-title {
max-width: 100%;
font-size: 13px;
text-align: center;
}
.srclub-sticky-speeds {
justify-content: center;
}
.srclub-speed {
font-size: 11px;
padding: 4px 8px;
}
}
@media (max-width: 600px) {
.srclub-sticky-inner {
gap: 10px;
} .srclub-sticky-art {
width: 56px;
height: 56px;
}
.srclub-sticky-title {
font-size: 13px;
line-height: 1.3;
} #srclub-sticky-player .plyr__controls {
flex-wrap: wrap;
row-gap: 8px;
} #srclub-sticky-player .srclub-seekback,
#srclub-sticky-player .srclub-seekfwd {
padding: 6px 10px !important;
}
#srclub-sticky-player .srclub-seek-label {
font-size: 11px;
}
}