.ps-radio-player,
.ps-radio-player *,
.ps-radio-player *::before,
.ps-radio-player *::after {
box-sizing: border-box;
}
.ps-radio-player [hidden] {
display: none !important;
}
.ps-radio-player {
--psrp-bg: #111111;
--psrp-text: #ffffff;
--psrp-accent: #ea2127;
--psrp-progress: #ea2127;
--psrp-muted: rgba(255, 255, 255, 0.7);
--psrp-line: rgba(255, 255, 255, 0.16);
--psrp-hover: rgba(255, 255, 255, 0.1);
--psrp-on-accent: #ffffff;
--psrp-accent-soft: rgba(234, 33, 39, 0.18);
--psrp-accent-line: rgba(234, 33, 39, 0.42);
--psrp-bg-glass: rgba(17, 17, 17, 0.7);
--psrp-bg-panel: rgba(17, 17, 17, 0.86);
container-type: inline-size;
container-name: psrp;
display: block;
margin: 0;
padding: 0;
background: var(--psrp-bg);
color: var(--psrp-text);
font: 400 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
letter-spacing: normal;
text-align: left;
text-transform: none;
-webkit-font-smoothing: antialiased;
} .ps-radio-player--bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99990;
border-top: 1px solid var(--psrp-line);
padding-bottom: env(safe-area-inset-bottom, 0px);
box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.12);
}
.ps-radio-player--inline,
.ps-radio-player--preview {
position: relative;
width: 100%;
border: 1px solid var(--psrp-line);
border-radius: 14px;
}
body.psrp-has-bar {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
body.psrp-has-bar.psrp-minimized {
padding-bottom: 0;
}
@media (max-width: 600px) {
body.psrp-has-bar {
padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}
body.psrp-has-bar.psrp-minimized {
padding-bottom: 0;
}
} .ps-radio-player__inner {
--psrp-cover: 48px;
--psrp-play: 38px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
column-gap: 20px;
height: 72px;
margin: 0 auto;
padding: 0 20px;
}
.ps-radio-player__zone {
display: flex;
align-items: center;
min-width: 0;
}
.ps-radio-player__zone--left {
gap: 12px;
}
.ps-radio-player__zone--center {
flex-direction: column;
justify-content: center;
gap: 4px;
width: 360px;
width: clamp(240px, 36cqw, 520px);
}
.ps-radio-player__zone--right {
justify-content: flex-end;
gap: 2px;
}
.ps-radio-player__controls {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
} .ps-radio-player__cover {
position: relative;
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: var(--psrp-cover);
height: var(--psrp-cover);
border-radius: 8px;
overflow: hidden;
background: var(--psrp-hover);
color: var(--psrp-muted);
}
.ps-radio-player__cover img {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
object-fit: cover;
transition: opacity 0.3s ease;
} .ps-radio-player__btn {
all: unset;
box-sizing: border-box;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
color: var(--psrp-text);
cursor: pointer;
transition: background-color 0.15s ease, filter 0.15s ease, transform 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.ps-radio-player__btn:hover {
background: var(--psrp-hover);
}
.ps-radio-player__btn:focus-visible,
.ps-radio-player__range:focus-visible {
outline: 2px solid var(--psrp-text);
outline-offset: 2px;
}
.ps-radio-player__icon {
display: block;
flex: none;
width: 20px;
height: 20px;
} .ps-radio-player__controls .ps-radio-player__btn:not(.ps-radio-player__play) {
width: 36px;
height: 36px;
}
.ps-radio-player__controls .ps-radio-player__btn:not(.ps-radio-player__play) .ps-radio-player__icon {
width: 20px;
height: 20px;
} .ps-radio-player__play {
width: var(--psrp-play);
height: var(--psrp-play);
background: var(--psrp-accent);
color: var(--psrp-on-accent);
box-shadow: 0 4px 12px var(--psrp-accent-line), 0 0 0 3px var(--psrp-accent-soft);
transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.2s ease;
}
.ps-radio-player__play:hover {
background: var(--psrp-accent);
filter: brightness(1.08);
transform: scale(1.06);
}
.ps-radio-player__play:active {
transform: scale(0.95);
}
.ps-radio-player__play .ps-radio-player__icon {
width: 16px;
height: 16px;
}
.ps-radio-player__icon--pause,
.ps-radio-player__spinner {
display: none;
}
.ps-radio-player.is-playing .ps-radio-player__icon--play {
display: none;
}
.ps-radio-player.is-playing .ps-radio-player__icon--pause {
display: block;
}
.ps-radio-player.is-loading .ps-radio-player__icon--play,
.ps-radio-player.is-loading .ps-radio-player__icon--pause {
display: none;
}
.ps-radio-player.is-loading .ps-radio-player__spinner {
display: block;
}
.ps-radio-player__spinner {
width: 18px;
height: 18px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: psrp-spin 0.7s linear infinite;
} .ps-radio-player__icon--muted,
.ps-radio-player__icon--up {
display: none;
}
.ps-radio-player.is-muted .ps-radio-player__icon--volume {
display: none;
}
.ps-radio-player.is-muted .ps-radio-player__icon--muted {
display: block;
}
.ps-radio-player.is-minimized .ps-radio-player__icon--down {
display: none;
}
.ps-radio-player.is-minimized .ps-radio-player__icon--up {
display: block;
} .ps-radio-player__info {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
}
.ps-radio-player__title {
display: block;
overflow: hidden;
white-space: nowrap;
font-size: 14px;
line-height: 18px;
font-weight: 600;
color: var(--psrp-text);
}
.ps-radio-player__title-text {
display: inline-block;
white-space: nowrap;
} .ps-radio-player__title.is-scrolling {
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
}
.ps-radio-player__title.is-scrolling .ps-radio-player__title-text {
animation: psrp-marquee var(--psrp-dur, 12s) linear infinite alternate;
will-change: transform;
}
.ps-radio-player__sub {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
font-size: 12px;
line-height: 16px;
color: var(--psrp-muted);
}
.ps-radio-player__status {
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--psrp-muted);
}
.ps-radio-player.is-playing .ps-radio-player__status {
color: var(--psrp-text);
}
.ps-radio-player__subtext {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} .ps-radio-player__dot {
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--psrp-muted);
}
.ps-radio-player.is-loading .ps-radio-player__dot {
background: var(--psrp-progress);
animation: psrp-pulse 1s ease-in-out infinite;
}
.ps-radio-player.is-error .ps-radio-player__dot {
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--psrp-muted);
}
.ps-radio-player__eq {
display: none;
flex: none;
align-items: flex-end;
gap: 2px;
width: 12px;
height: 10px;
}
.ps-radio-player__eq span {
display: block;
width: 2px;
height: 4px;
border-radius: 1px;
background: var(--psrp-progress);
}
.ps-radio-player.is-playing .ps-radio-player__dot {
display: none;
}
.ps-radio-player.is-playing .ps-radio-player__eq {
display: inline-flex;
}
.ps-radio-player.is-playing .ps-radio-player__eq span {
animation: psrp-eq 0.9s ease-in-out infinite;
}
.ps-radio-player.is-playing .ps-radio-player__eq span:nth-child(2) {
animation-delay: -0.3s;
}
.ps-radio-player.is-playing .ps-radio-player__eq span:nth-child(3) {
animation-delay: -0.6s;
} .ps-radio-player.is-dj .ps-radio-player__subtext {
display: block;
font-weight: 600;
color: var(--psrp-text);
}
.ps-radio-player.is-dj.is-playing .ps-radio-player__eq {
display: none;
}
.ps-radio-player.is-dj.is-playing .ps-radio-player__status-text {
display: inline-flex;
align-items: center;
justify-content: center;
height: 20px;
padding: 0 calc(9px - 0.05em) 0 8px; border: 1px solid var(--psrp-accent);
border-radius: 5px;
background: var(--psrp-accent-soft);
color: var(--psrp-text);
letter-spacing: 0.05em;
line-height: 1;
}
.ps-radio-player.is-dj.is-playing .ps-radio-player__status-text::before {
content: "";
flex: none;
width: 6px;
height: 6px;
margin-right: 6px;
border-radius: 50%;
background: var(--psrp-accent);
animation: psrp-live-dot 1.8s ease-out infinite;
} .ps-radio-player__seek {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 12px;
}
.ps-radio-player__time {
flex: none;
min-width: 34px;
font-size: 11px;
line-height: 12px;
color: var(--psrp-muted);
font-variant-numeric: tabular-nums;
visibility: hidden;
}
.ps-radio-player__time:first-child {
text-align: right;
}
.ps-radio-player__time:last-child {
text-align: left;
}
.ps-radio-player.is-playing .ps-radio-player__time {
visibility: visible;
}
.ps-radio-player__progress {
position: relative;
flex: 1 1 auto;
height: 2px;
border-radius: 1px;
overflow: hidden;
background: var(--psrp-line);
}
.ps-radio-player__progress-fill {
display: block;
width: 100%;
height: 100%;
border-radius: 1px;
background: var(--psrp-progress);
transform: scaleX(0);
transform-origin: left center;
} .ps-radio-player:not(.is-playing) .ps-radio-player__progress-fill {
opacity: 0;
} .ps-radio-player__seek.is-live .ps-radio-player__progress-fill {
transform: scaleX(1) !important;
transition: none !important;
opacity: 0.3;
}
.ps-radio-player__seek.is-live .ps-radio-player__time:first-child {
min-width: 0;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--psrp-text);
}
.ps-radio-player.is-playing .ps-radio-player__seek.is-live .ps-radio-player__progress::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(90deg, transparent, var(--psrp-progress), transparent);
transform: translateX(-100%);
animation: psrp-shimmer 2.4s ease-in-out infinite;
}
.ps-radio-player--preview .ps-radio-player__progress-fill {
transform: scaleX(0.4);
} .ps-radio-player__volume {
display: flex;
align-items: center;
gap: 4px;
}
.ps-radio-player__range {
-webkit-appearance: none;
appearance: none;
display: block;
width: 96px;
height: 16px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
--psrp-fill: 80%;
}
.ps-radio-player__range::-webkit-slider-runnable-track {
height: 4px;
border-radius: 2px;
background: linear-gradient(to right, var(--psrp-progress) var(--psrp-fill), var(--psrp-line) var(--psrp-fill));
}
.ps-radio-player__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
margin-top: -4px;
border: 0;
border-radius: 50%;
background: var(--psrp-text);
}
.ps-radio-player__range::-moz-range-track {
height: 4px;
border-radius: 2px;
background: var(--psrp-line);
}
.ps-radio-player__range::-moz-range-progress {
height: 4px;
border-radius: 2px;
background: var(--psrp-progress);
}
.ps-radio-player__range::-moz-range-thumb {
width: 12px;
height: 12px;
border: 0;
border-radius: 50%;
background: var(--psrp-text);
} .ps-radio-player.is-no-volume .ps-radio-player__range {
display: none;
} .ps-radio-player__toast {
position: absolute;
z-index: 4;
right: 16px;
bottom: calc(100% + 8px);
padding: 6px 10px;
border: 1px solid var(--psrp-line);
border-radius: 6px;
background: var(--psrp-bg);
color: var(--psrp-text);
font-size: 12px;
line-height: 16px;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.ps-radio-player__toast.is-visible {
opacity: 1;
transform: none;
} .ps-radio-player--bar.is-minimized {
left: auto;
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
width: 104px; padding-bottom: 0;
border: 1px solid var(--psrp-line);
border-radius: 999px;
}
.ps-radio-player.is-minimized .ps-radio-player__inner {
display: flex;
justify-content: center;
gap: 4px;
height: 56px;
padding: 0 8px;
}
.ps-radio-player.is-minimized .ps-radio-player__zone--left,
.ps-radio-player.is-minimized .ps-radio-player__zone--center > :not(.ps-radio-player__controls),
.ps-radio-player.is-minimized .ps-radio-player__controls > :not(.ps-radio-player__play),
.ps-radio-player.is-minimized .ps-radio-player__zone--right > :not(.ps-radio-player__min),
.ps-radio-player.is-minimized .ps-radio-player__panel {
display: none;
}
.ps-radio-player.is-minimized .ps-radio-player__zone--center,
.ps-radio-player.is-minimized .ps-radio-player__zone--right {
width: auto;
}
.ps-radio-player.is-minimized .ps-radio-player__toast {
right: 0;
} .ps-radio-player__panel {
--psrp-bar-h: 72px; position: absolute;
top: auto;
right: 0;
bottom: 0;
left: auto;
z-index: 1;
display: flex;
flex-direction: column;
width: min(380px, 100%);
height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
color: var(--psrp-text);
background: var(--psrp-bg-panel, var(--psrp-bg));
-webkit-backdrop-filter: blur(22px) saturate(1.5);
backdrop-filter: blur(22px) saturate(1.5);
border: 0;
border-left: 1px solid var(--psrp-line);
border-radius: 0;
box-shadow: -18px 0 60px rgba(0, 0, 0, 0.35);
overflow: hidden;
outline: 0;
opacity: 0;
transform: translateX(32px);
transform-origin: right center;
transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ps-radio-player__panel.is-open {
opacity: 1;
transform: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.ps-radio-player__panel {
background: var(--psrp-bg);
}
} .ps-radio-player--inline .ps-radio-player__panel,
.ps-radio-player--preview .ps-radio-player__panel {
top: calc(100% + 10px);
right: 0;
bottom: auto;
left: auto;
--psrp-bar-h: 0px;
width: min(380px, 100%);
height: auto;
max-height: 520px;
border: 1px solid var(--psrp-line);
border-radius: 16px;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
transform: translateY(-10px) scale(0.98);
transform-origin: top right;
}
.ps-radio-player--inline .ps-radio-player__panel.is-open,
.ps-radio-player--preview .ps-radio-player__panel.is-open {
transform: none;
}
.ps-radio-player--inline .ps-radio-player__grab,
.ps-radio-player--preview .ps-radio-player__grab {
display: none;
} .ps-radio-player__grab {
display: none;
justify-content: center;
padding: 10px 0 0;
cursor: grab;
touch-action: none;
}
.ps-radio-player__grab span {
width: 38px;
height: 4px;
border-radius: 2px;
background: var(--psrp-line);
}
.ps-radio-player__panel-head {
flex: none;
display: flex;
align-items: center;
gap: 16px;
padding: calc(26px + env(safe-area-inset-top, 0px)) 22px 18px 28px;
touch-action: none;
} .ps-radio-player__grab + .ps-radio-player__panel-head {
padding-top: 12px;
}
.ps-radio-player__panel-icon {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 14px;
background: var(--psrp-accent-soft);
box-shadow: inset 0 0 0 1px var(--psrp-accent-line);
color: var(--psrp-text);
}
.ps-radio-player__panel-icon > span {
display: flex;
}
.ps-radio-player__panel-titles {
flex: 1 1 auto;
min-width: 0;
}
.ps-radio-player__panel-title {
margin: 0;
padding: 0;
font-size: 17px;
line-height: 22px;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
color: var(--psrp-text);
}
.ps-radio-player__panel-sub {
margin: 1px 0 0;
padding: 0;
font-size: 12.5px;
line-height: 17px;
color: var(--psrp-muted);
}
.ps-radio-player__panel-sub:empty {
display: none;
}
.ps-radio-player__panel-close {
width: 36px;
height: 36px;
} .ps-radio-player__tabs {
flex: none;
display: flex;
gap: 4px;
margin: 0 28px 22px;
padding: 5px;
border-radius: 14px;
background: var(--psrp-hover);
}
.ps-radio-player__tab {
all: unset;
box-sizing: border-box;
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
height: 38px;
border-radius: 10px;
color: var(--psrp-muted);
font-size: 13px;
font-weight: 600;
text-align: center;
cursor: pointer;
transition: background-color 0.18s ease, color 0.18s ease;
-webkit-tap-highlight-color: transparent;
}
.ps-radio-player__tab:hover {
color: var(--psrp-text);
}
.ps-radio-player__tab[aria-selected="true"] {
color: var(--psrp-text);
background: var(--psrp-accent-soft);
box-shadow: inset 0 0 0 1px var(--psrp-accent-line);
}
.ps-radio-player__tab:focus-visible {
outline: 2px solid var(--psrp-text);
outline-offset: 1px;
} .ps-radio-player__panel-body {
flex: 1 1 auto;
min-height: 0;
padding: 4px 28px calc(var(--psrp-bar-h, 0px) + 36px + env(safe-area-inset-bottom, 0px));
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--psrp-line) transparent;
}
.ps-radio-player__section-label {
margin: 26px 0 12px;
padding: 0;
font-size: 12px;
line-height: 16px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--psrp-muted);
}  .ps-radio-player__now {
display: flex;
align-items: center;
gap: 16px;
margin: 4px 0 10px;
padding: 0 0 22px;
border-bottom: 1px solid var(--psrp-line);
}
.ps-radio-player__now-label {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11px;
line-height: 14px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--psrp-text);
}
.ps-radio-player__now-eq {
display: inline-flex;
align-items: flex-end;
gap: 2px;
width: 12px;
height: 11px;
}
.ps-radio-player__now-eq span {
display: block;
width: 2px;
height: 5px;
border-radius: 1px;
background: var(--psrp-accent);
}
.ps-radio-player.is-playing .ps-radio-player__now-eq span {
animation: psrp-eq 0.9s ease-in-out infinite;
}
.ps-radio-player.is-playing .ps-radio-player__now-eq span:nth-child(2) {
animation-delay: -0.3s;
}
.ps-radio-player.is-playing .ps-radio-player__now-eq span:nth-child(3) {
animation-delay: -0.6s;
}
.ps-radio-player__now-bar {
position: relative;
display: block;
height: 2px;
margin-top: 12px;
border-radius: 1px;
overflow: hidden;
background: var(--psrp-line);
}
.ps-radio-player__now-fill {
display: block;
width: 100%;
height: 100%;
background: var(--psrp-accent);
transform: scaleX(0);
transform-origin: left center;
} .ps-radio-player__rows {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.ps-radio-player__row {
display: flex;
align-items: center;
gap: 16px;
margin: 0 -10px;
padding: 7px 10px;
border-radius: 12px;
list-style: none;
animation: psrp-item-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
animation-delay: calc(var(--i, 0) * 45ms + 60ms);
}
.ps-radio-player__row::marker {
content: "";
}
.ps-radio-player__row:hover {
background: var(--psrp-hover);
}
.ps-radio-player__row-art {
position: relative;
flex: none;
width: 48px;
height: 48px;
border-radius: 9px;
overflow: hidden;
background: var(--psrp-hover);
}
.ps-radio-player__row-art--lg {
width: 56px;
height: 56px;
border-radius: 11px;
}
.ps-radio-player__row-art img {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
object-fit: cover;
}
.ps-radio-player__row-text {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ps-radio-player__row-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 15px;
line-height: 20px;
font-weight: 700;
color: var(--psrp-text);
}
.ps-radio-player__row-title--lg {
font-size: 16px;
line-height: 21px;
}
.ps-radio-player__row-artist {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
line-height: 18px;
color: var(--psrp-muted);
}
.ps-radio-player__row-when {
flex: none;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
text-align: right;
}
.ps-radio-player__row-clock {
font-size: 13px;
line-height: 18px;
font-weight: 600;
color: var(--psrp-text);
font-variant-numeric: tabular-nums;
}
.ps-radio-player__row-ago {
font-size: 11.5px;
line-height: 15px;
color: var(--psrp-muted);
}
.ps-radio-player__group-title {
margin: 28px 0 10px;
padding: 0;
list-style: none;
font-size: 12px;
line-height: 16px;
font-weight: 600;
color: var(--psrp-muted);
}
.ps-radio-player__group-title::marker {
content: "";
}
.ps-radio-player__group-title:first-child {
margin-top: 8px;
}
.ps-radio-player__badge {
flex: none;
padding: 3px 9px;
border-radius: 999px;
background: var(--psrp-accent-soft);
box-shadow: inset 0 0 0 1px var(--psrp-accent-line);
color: var(--psrp-text);
font-size: 11px;
line-height: 14px;
font-weight: 600;
} .ps-radio-player__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 52px 20px;
text-align: center;
color: var(--psrp-muted);
}
.ps-radio-player__empty p {
margin: 0;
font-size: 13.5px;
line-height: 19px;
}
.ps-radio-player__empty-icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--psrp-hover);
} .ps-radio-player__search {
position: relative;
display: flex;
align-items: center;
height: 48px;
margin: 6px 0 20px;
border-radius: 14px;
background: var(--psrp-hover);
box-shadow: inset 0 0 0 1px var(--psrp-line);
transition: box-shadow 0.18s ease;
}
.ps-radio-player__search:focus-within {
box-shadow: inset 0 0 0 1.5px var(--psrp-accent);
}
.ps-radio-player__search-icon {
position: absolute;
left: 14px;
z-index: 1;
display: flex;
color: var(--psrp-muted);
pointer-events: none;
} .ps-radio-player .ps-radio-player__search input.ps-radio-player__req-input,
.ps-radio-player .ps-radio-player__search input.ps-radio-player__req-input:hover,
.ps-radio-player .ps-radio-player__search input.ps-radio-player__req-input:focus,
.ps-radio-player .ps-radio-player__search input.ps-radio-player__req-input:focus-visible,
.ps-radio-player .ps-radio-player__search input.ps-radio-player__req-input:active {
-webkit-appearance: none !important;
appearance: none !important;
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 48px 0 46px !important; border: 0 !important;
border-radius: 14px !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
outline: 0 !important;
color: var(--psrp-text) !important;
-webkit-text-fill-color: var(--psrp-text) !important;
caret-color: var(--psrp-text) !important;
font: inherit !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
letter-spacing: normal !important;
text-indent: 0 !important;
text-transform: none !important;
opacity: 1 !important;
}
.ps-radio-player .ps-radio-player__search input.ps-radio-player__req-input::placeholder {
color: var(--psrp-muted) !important;
-webkit-text-fill-color: var(--psrp-muted) !important;
font-weight: 400 !important;
opacity: 1 !important;
} .ps-radio-player .ps-radio-player__search input.ps-radio-player__req-input:-webkit-autofill {
-webkit-text-fill-color: var(--psrp-text) !important;
transition: background-color 99999s ease-out 0s;
}
.ps-radio-player__req-input::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
}
.ps-radio-player__search-clear {
all: unset;
box-sizing: border-box;
position: absolute;
right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
color: var(--psrp-muted);
cursor: pointer;
}
.ps-radio-player .ps-radio-player__search button.ps-radio-player__search-clear {
box-sizing: border-box !important;
width: 30px !important;
height: 30px !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--psrp-muted) !important;
line-height: 1 !important;
}
.ps-radio-player .ps-radio-player__search button.ps-radio-player__search-clear:hover,
.ps-radio-player .ps-radio-player__search button.ps-radio-player__search-clear:focus {
background: var(--psrp-hover) !important;
color: var(--psrp-text) !important;
}
.ps-radio-player__search-clear:hover {
background: var(--psrp-hover);
color: var(--psrp-text);
}
.ps-radio-player__search-clear:focus-visible {
outline: 2px solid var(--psrp-text);
outline-offset: 1px;
}
.ps-radio-player__req-status {
margin: 4px 2px 18px;
padding: 0;
font-size: 12.5px;
line-height: 17px;
color: var(--psrp-muted);
}
.ps-radio-player__wa {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
margin: 4px 0 22px;
border-radius: 14px;
background: var(--psrp-accent-soft);
box-shadow: inset 0 0 0 1px var(--psrp-accent-line);
color: var(--psrp-text);
font-size: 13px;
font-weight: 600;
text-decoration: none;
}
.ps-radio-player__wa:hover {
color: var(--psrp-text);
text-decoration: none;
filter: brightness(1.12);
}
.ps-radio-player__wa:focus-visible {
outline: 2px solid var(--psrp-text);
outline-offset: 2px;
}
.ps-radio-player__req-btn {
all: unset;
box-sizing: border-box;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 76px;
height: 34px;
padding: 0 14px;
border-radius: 999px;
background: var(--psrp-accent);
color: var(--psrp-on-accent);
font-size: 12.5px;
font-weight: 600;
line-height: 1;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ps-radio-player__req-btn:hover {
filter: brightness(1.1);
}
.ps-radio-player__req-btn:focus-visible,
.ps-radio-player__req-more:focus-visible {
outline: 2px solid var(--psrp-text);
outline-offset: 2px;
}
.ps-radio-player__req-btn[disabled] {
opacity: 0.6;
filter: none;
cursor: default;
}
.ps-radio-player__req-more {
all: unset;
box-sizing: border-box;
display: block;
margin: 16px 0 0;
padding: 12px;
border-radius: 14px;
background: var(--psrp-hover);
color: var(--psrp-text);
font-size: 12.5px;
font-weight: 600;
text-align: center;
cursor: pointer;
}
.ps-radio-player__req-more:hover {
background: var(--psrp-line);
} .ps-radio-player__row--skel {
animation: none;
pointer-events: none;
}
.ps-radio-player__row--skel:hover {
background: none;
}
.ps-radio-player__skel-art,
.ps-radio-player__skel-line {
display: block;
background: linear-gradient(90deg, var(--psrp-hover) 25%, var(--psrp-line) 50%, var(--psrp-hover) 75%);
background-size: 200% 100%;
animation: psrp-skel 1.3s linear infinite;
}
.ps-radio-player__skel-art {
flex: none;
width: 48px;
height: 48px;
border-radius: 9px;
}
.ps-radio-player__skel-line {
width: 70%;
height: 12px;
border-radius: 6px;
}
.ps-radio-player__skel-line--short {
width: 42%;
margin-top: 4px;
}
.ps-radio-player__history-btn[aria-expanded="true"],
.ps-radio-player__requests-btn[aria-expanded="true"] {
background: var(--psrp-hover);
} .ps-radio-player-scrim {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99989;
background: rgba(0, 0, 0, 0.2);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.ps-radio-player-scrim.is-on {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
} .ps-radio-player.is-glass {
isolation: isolate;
background: transparent;
}
.ps-radio-player.is-glass::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border-radius: inherit;
background: var(--psrp-bg-glass, var(--psrp-bg));
-webkit-backdrop-filter: blur(18px) saturate(1.6);
backdrop-filter: blur(18px) saturate(1.6);
pointer-events: none;
}
.ps-radio-player--bar.is-glass {
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.16);
} @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.ps-radio-player.is-glass::after {
background: var(--psrp-bg);
}
} .ps-radio-player--bar {
isolation: isolate;
background: transparent;
}
.ps-radio-player--bar::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
border-radius: inherit;
background: var(--psrp-bg);
pointer-events: none;
}
.ps-radio-player.ps-radio-player--bar.is-glass::after {
z-index: 2;
background: var(--psrp-bg-glass, var(--psrp-bg));
-webkit-backdrop-filter: blur(18px) saturate(1.6);
backdrop-filter: blur(18px) saturate(1.6);
}
.ps-radio-player--bar .ps-radio-player__inner {
position: relative;
z-index: 3;
} .ps-radio-player--bar.is-expanded {
background: var(--psrp-bg);
}
.ps-radio-player--bar.is-expanded::after {
display: none;
}  @container psrp (max-width: 960px) {
.ps-radio-player__share,
.ps-radio-player__popup {
display: none;
}
.ps-radio-player__range {
width: 72px;
}
}
@container psrp (max-width: 720px) {
.ps-radio-player__inner {
column-gap: 12px;
padding: 0 16px;
}
.ps-radio-player__zone--center {
width: 200px;
width: clamp(200px, 40cqw, 320px);
}
} @container psrp (max-width: 600px) {
.ps-radio-player__panel {
--psrp-bar-h: 60px;
}
.ps-radio-player__inner {
--psrp-cover: 40px;
--psrp-play: 36px;
display: flex;
gap: 10px;
height: 60px;
padding: 0 12px;
}
.ps-radio-player__zone--left {
flex: 1 1 auto;
}
.ps-radio-player__zone--center,
.ps-radio-player__zone--right {
flex: none;
width: auto;
}
.ps-radio-player__controls {
gap: 8px;
}
.ps-radio-player__range {
display: none;
}
.ps-radio-player__title {
font-size: 13px;
line-height: 17px;
}
.ps-radio-player__btn {
width: 34px;
height: 34px;
}
.ps-radio-player__controls .ps-radio-player__btn:not(.ps-radio-player__play) {
width: 36px;
height: 36px;
}
.ps-radio-player__play {
width: var(--psrp-play);
height: var(--psrp-play);
} .ps-radio-player__seek {
position: absolute;
top: -1px;
right: 0;
left: 0;
width: auto;
height: 2px;
gap: 0;
}
.ps-radio-player__time,
.ps-radio-player__seek.is-live {
display: none;
}
.ps-radio-player__progress,
.ps-radio-player__progress-fill {
height: 2px;
border-radius: 0;
}
.ps-radio-player.has-expanded:not(.is-expanded) .ps-radio-player__history-btn,
.ps-radio-player.has-expanded:not(.is-expanded) .ps-radio-player__requests-btn,
.ps-radio-player.has-expanded:not(.is-expanded) .ps-radio-player__share,
.ps-radio-player.has-expanded:not(.is-expanded) .ps-radio-player__popup {
display: none;
}
}
@container psrp (max-width: 420px) {
.ps-radio-player__subtext {
display: none;
} .ps-radio-player.is-dj .ps-radio-player__subtext {
display: block;
}
.ps-radio-player.is-dj.is-playing .ps-radio-player__status-text {
height: 18px;
padding: 0 calc(7px - 0.05em) 0 6px;
border-radius: 4px;
font-size: 10px;
}
.ps-radio-player.is-dj.is-playing .ps-radio-player__status-text::before {
width: 5px;
height: 5px;
margin-right: 5px;
}
} @container psrp (max-width: 960px) {
.ps-radio-player__panel {
left: 0;
width: auto;
border-left: 0;
box-shadow: none;
transform: translateY(32px);
transform-origin: bottom center;
}
.ps-radio-player__grab {
display: none;
}
} @container psrp (max-width: 380px) {
.ps-radio-player__history-btn {
display: none;
}
} body.psrp-lock {
overflow: hidden;
}
.ps-radio-player__collapse {
display: none;
}
.ps-radio-player.has-expanded:not(.is-expanded) .ps-radio-player__info,
.ps-radio-player.has-expanded:not(.is-expanded) .ps-radio-player__cover {
cursor: pointer;
}
.ps-radio-player.is-expanded {
position: fixed;
top: var(--wp-admin--admin-bar--height, 0px);
right: 0;
bottom: 0;
left: 0;
z-index: 99995;
display: flex;
align-items: center;
justify-content: center;
width: auto;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: hidden;
animation: psrp-expand 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.ps-radio-player.is-expanded.is-collapsing {
animation: psrp-collapse 0.26s ease-in both;
} .ps-radio-player.is-glass.is-expanded {
background: var(--psrp-bg);
-webkit-backdrop-filter: none;
backdrop-filter: none;
} .ps-radio-player.is-glass.is-expanded {
background: var(--psrp-bg);
}
.ps-radio-player.is-glass.is-expanded::after {
display: none;
} .ps-radio-player.is-expanded::before {
content: "";
position: absolute;
top: -60px;
right: -60px;
bottom: -60px;
left: -60px;
background-image: var(--psrp-art, none);
background-position: center;
background-size: cover;
filter: blur(50px) saturate(1.3);
opacity: 0.35;
pointer-events: none;
}
.ps-radio-player.is-expanded .ps-radio-player__inner {
--psrp-cover: min(340px, 78vw, 42vh);
--psrp-play: 60px;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
width: calc(var(--psrp-cover) + 48px); max-width: 100%;
height: auto;
max-height: 100%;
margin: 0 auto;
padding: 72px 24px 28px;
overflow-y: auto;
text-align: center;
} .ps-radio-player.is-expanded .ps-radio-player__zone--left,
.ps-radio-player.is-expanded .ps-radio-player__zone--center {
display: contents;
}
.ps-radio-player.is-expanded .ps-radio-player__collapse {
position: absolute;
top: calc(14px + env(safe-area-inset-top, 0px));
left: 14px;
z-index: 4;
display: inline-flex;
background: var(--psrp-hover);
}
.ps-radio-player.is-expanded .ps-radio-player__cover {
order: 1;
border-radius: 16px;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.ps-radio-player.is-expanded .ps-radio-player__cover .ps-radio-player__icon {
width: 64px;
height: 64px;
}
.ps-radio-player.is-expanded .ps-radio-player__info {
order: 2;
flex: none;
width: 100%;
align-items: center;
gap: 6px;
}
.ps-radio-player.is-expanded .ps-radio-player__title {
max-width: 100%;
font-size: 20px;
line-height: 26px;
text-align: center;
}
.ps-radio-player.is-expanded .ps-radio-player__sub {
justify-content: center;
font-size: 12.5px;
}
.ps-radio-player.is-expanded .ps-radio-player__subtext {
display: block;
} .ps-radio-player.is-expanded .ps-radio-player__seek {
order: 3;
position: static;
width: 100%;
height: 12px;
gap: 10px;
margin-top: 18px;
}
.ps-radio-player.is-expanded .ps-radio-player__time {
display: block;
}
.ps-radio-player.is-expanded .ps-radio-player__seek.is-live {
display: flex;
}
.ps-radio-player.is-expanded .ps-radio-player__progress {
height: 3px;
border-radius: 2px;
}
.ps-radio-player.is-expanded .ps-radio-player__progress-fill {
height: 3px;
border-radius: 2px;
}
.ps-radio-player.is-expanded .ps-radio-player__controls {
order: 5;
gap: 22px;
}
.ps-radio-player.is-expanded .ps-radio-player__zone--right {
order: 6;
flex-wrap: wrap;
justify-content: center;
width: 100%;
max-width: 100%;
gap: 6px;
}
.ps-radio-player.is-expanded .ps-radio-player__btn {
width: 44px;
height: 44px;
}
.ps-radio-player.is-expanded .ps-radio-player__btn .ps-radio-player__icon {
width: 22px;
height: 22px;
}
.ps-radio-player.is-expanded .ps-radio-player__controls .ps-radio-player__btn:not(.ps-radio-player__play) {
width: 44px;
height: 44px;
}
.ps-radio-player.is-expanded .ps-radio-player__play {
width: var(--psrp-play);
height: var(--psrp-play);
}
.ps-radio-player.is-expanded .ps-radio-player__play .ps-radio-player__icon {
width: 22px;
height: 22px;
} .ps-radio-player.is-expanded .ps-radio-player__share,
.ps-radio-player.is-expanded .ps-radio-player__popup,
.ps-radio-player.is-expanded .ps-radio-player__history-btn {
display: inline-flex;
}
.ps-radio-player.is-expanded .ps-radio-player__range {
display: block;
width: 120px;
}
.ps-radio-player.is-expanded.is-no-volume .ps-radio-player__range,
.ps-radio-player.is-expanded .ps-radio-player__expand-btn,
.ps-radio-player.is-expanded .ps-radio-player__min {
display: none;
} @container psrp (max-width: 600px) {
.ps-radio-player.is-expanded:not(.ps-radio-player--popup) .ps-radio-player__popup,
.ps-radio-player.is-expanded:not(.ps-radio-player--popup) .ps-radio-player__range {
display: none;
}
} .ps-radio-player.is-expanded .ps-radio-player__panel {
top: 0;
right: 0;
bottom: 0;
left: auto;
z-index: 3;
--psrp-bar-h: 0px;
width: min(380px, 100%);
height: auto;
margin: 0;
border: 0;
border-left: 1px solid var(--psrp-line);
border-radius: 0;
box-shadow: -18px 0 60px rgba(0, 0, 0, 0.35);
transform: translateX(32px);
}
.ps-radio-player.is-expanded .ps-radio-player__panel.is-open {
transform: none;
}
.ps-radio-player.is-expanded .ps-radio-player__panel-close {
width: 36px;
height: 36px;
} .ps-radio-player--popup.is-expanded .ps-radio-player__inner {
padding-top: 24px;
} .ps-radio-player.is-expanded:not(.is-collapsing) .ps-radio-player__cover,
.ps-radio-player.is-expanded:not(.is-collapsing) .ps-radio-player__info,
.ps-radio-player.is-expanded:not(.is-collapsing) .ps-radio-player__seek,
.ps-radio-player.is-expanded:not(.is-collapsing) .ps-radio-player__controls,
.ps-radio-player.is-expanded:not(.is-collapsing) .ps-radio-player__zone--right {
animation: psrp-item-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.ps-radio-player.is-expanded .ps-radio-player__cover {
animation-delay: 0.08s;
}
.ps-radio-player.is-expanded .ps-radio-player__info {
animation-delay: 0.14s;
}
.ps-radio-player.is-expanded .ps-radio-player__seek {
animation-delay: 0.18s;
}
.ps-radio-player.is-expanded .ps-radio-player__controls {
animation-delay: 0.22s;
}
.ps-radio-player.is-expanded .ps-radio-player__zone--right {
animation-delay: 0.28s;
} @keyframes psrp-spin {
to {
transform: rotate(360deg);
}
}
@keyframes psrp-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
@keyframes psrp-eq {
0%, 100% {
height: 3px;
}
50% {
height: 10px;
}
}
@keyframes psrp-marquee {
0%, 12% {
transform: translateX(0);
}
88%, 100% {
transform: translateX(var(--psrp-shift, 0));
}
}
@keyframes psrp-item-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes psrp-live-dot {
0% {
opacity: 1;
box-shadow: 0 0 0 0 var(--psrp-accent-line);
}
50% {
opacity: 0.45;
}
100% {
opacity: 1;
box-shadow: 0 0 0 5px transparent;
}
}
@keyframes psrp-skel {
to {
background-position: -200% 0;
}
}
@keyframes psrp-shimmer {
to {
transform: translateX(100%);
}
}
@keyframes psrp-expand {
from {
opacity: 0;
transform: translateY(48px) scale(0.97);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes psrp-collapse {
from {
opacity: 1;
transform: none;
}
to {
opacity: 0;
transform: translateY(48px) scale(0.97);
}
}
@media (prefers-reduced-motion: reduce) {
.ps-radio-player__title.is-scrolling {
-webkit-mask-image: none;
mask-image: none;
}
.ps-radio-player__title.is-scrolling .ps-radio-player__title-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
animation: none;
}
.ps-radio-player.is-playing .ps-radio-player__eq span {
animation: none;
height: 8px;
}
.ps-radio-player.is-loading .ps-radio-player__dot,
.ps-radio-player.is-dj.is-playing .ps-radio-player__status-text::before,
.ps-radio-player.is-playing .ps-radio-player__seek.is-live .ps-radio-player__progress::after {
animation: none;
}
.ps-radio-player__spinner {
animation-duration: 1.6s;
}
.ps-radio-player-scrim,
.ps-radio-player__toast,
.ps-radio-player__play,
.ps-radio-player__panel,
.ps-radio-player__tab,
.ps-radio-player__search {
transition: none;
}
.ps-radio-player__panel,
.ps-radio-player--inline .ps-radio-player__panel,
.ps-radio-player--preview .ps-radio-player__panel,
.ps-radio-player.is-expanded .ps-radio-player__panel {
transform: none;
}
.ps-radio-player.is-playing .ps-radio-player__now-eq span,
.ps-radio-player__skel-art,
.ps-radio-player__skel-line,
.ps-radio-player__row,
.ps-radio-player.is-expanded,
.ps-radio-player.is-expanded.is-collapsing,
.ps-radio-player.is-expanded:not(.is-collapsing) .ps-radio-player__cover,
.ps-radio-player.is-expanded:not(.is-collapsing) .ps-radio-player__info,
.ps-radio-player.is-expanded:not(.is-collapsing) .ps-radio-player__seek,
.ps-radio-player.is-expanded:not(.is-collapsing) .ps-radio-player__controls,
.ps-radio-player.is-expanded:not(.is-collapsing) .ps-radio-player__zone--right {
animation: none;
}
}