#ss-pjax-container {
display: block;
position: relative;
}
#ss-player-parking {
display: none !important;
}
#ss-pjax-container .audioplayer-bar,
#ss-player-parking .audioplayer-bar {
display: none !important;
}
#aramplayer .ss-native-audio {
display: none !important;
}
#aramplayer .ss-native-tracklist {
list-style: none;
margin: 0;
padding: 0;
}
#aramplayer .ss-player-tracklist-loader {
display: flex;
align-items: center;
justify-content: center;
min-height: 64px;
opacity: 1;
pointer-events: none;
}
#aramplayer .ss-native-tracklist .audioplayer-track-item {
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, .08);
color: #f3f3f3;
cursor: pointer;
display: grid;
direction: ltr;
grid-template-columns: 34px minmax(0, 1fr) 58px 124px;
font-size: 13px;
gap: 10px;
min-height: 58px;
padding: 8px 10px;
transition: background .16s ease, color .16s ease;
}
#aramplayer .ss-native-tracklist .audioplayer-track-item:hover,
#aramplayer .ss-native-tracklist .audioplayer-track-item:focus-within {
background: rgba(255, 255, 255, .04);
}
#aramplayer .ss-native-tracklist .audioplayer-track-item-active {
background: linear-gradient(90deg, rgba(251, 203, 7, .11), rgba(251, 203, 7, .035) 46%, rgba(255, 255, 255, .02));
box-shadow: inset 3px 0 0 rgba(251, 203, 7, .94);
}
#aramplayer .ss-native-tracklist .audioplayer-track-item-active .audioplayer-track-item-number,
#aramplayer .ss-native-tracklist .audioplayer-track-item-active .audioplayer-item-title {
color: #fbcb07;
font-weight: 600;
}
#aramplayer .ss-native-tracklist .audioplayer-track-item.ss-track-share-highlight {
background: rgba(251, 203, 7, .12);
box-shadow: inset 3px 0 0 #fbcb07;
}
#aramplayer .ss-native-tracklist .audioplayer-track-item-number {
color: rgba(255, 255, 255, .56);
font-size: 13px;
font-variant-numeric: tabular-nums;
text-align: center;
}
#aramplayer .ss-native-tracklist .audioplayer-item-desc {
min-width: 0;
}
#aramplayer .ss-native-tracklist .audioplayer-item-title {
direction: ltr;
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ss-player-toast {
position: fixed;
right: 50%;
bottom: max(22px, env(safe-area-inset-bottom));
z-index: 10040;
display: inline-flex;
align-items: center;
gap: 10px;
width: max-content;
max-width: min(calc(100vw - 16px), 520px);
min-height: 44px;
padding: 10px 14px;
border: 1px solid rgba(0, 0, 0, .06);
border-radius: 16px;
background: rgba(255, 255, 255, .96);
color: #171717;
box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
transform: translate3d(50%, 14px, 0) scale(.98);
opacity: 0;
animation: ssPlayerToastIn .28s cubic-bezier(.22, 1, .36, 1) forwards;
direction: rtl;
text-align: right;
pointer-events: auto;
backdrop-filter: blur(14px);
}
body.ss-full-player-open .ss-player-toast {
z-index: 10200;
}
.ss-player-toast.is-leaving {
animation: ssPlayerToastOut .24s ease forwards;
}
.ss-player-toast__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 24px;
height: 24px;
border-radius: 999px;
background: rgba(37, 99, 235, .12);
color: #2563eb;
font-size: 11px;
}
.ss-player-toast--success .ss-player-toast__icon {
background: rgba(22, 163, 74, .12);
color: #16a34a;
}
.ss-player-toast--warning .ss-player-toast__icon {
background: rgba(217, 119, 6, .13);
color: #d97706;
}
.ss-player-toast--danger .ss-player-toast__icon {
background: rgba(220, 38, 38, .12);
color: #dc2626;
}
.ss-player-toast__message {
min-width: 0;
color: inherit;
font-size: 13px;
font-weight: 700;
line-height: 1.7;
}
.ss-player-toast__message a {
color: #a16207;
}
.ss-player-network-notice {
position: fixed;
right: 50%;
bottom: calc(94px + env(safe-area-inset-bottom));
z-index: 10220;
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto auto;
align-items: center;
gap: 14px;
width: min(92vw, 720px);
padding: 14px 16px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 18px;
background: rgba(74, 0, 19, .96);
color: #fff;
box-shadow: 0 24px 62px rgba(0, 0, 0, .38);
direction: rtl;
text-align: right;
transform: translate3d(50%, 14px, 0) scale(.985);
opacity: 0;
pointer-events: auto;
backdrop-filter: blur(18px) saturate(1.05);
animation: ssPlayerNetworkNoticeIn .26s cubic-bezier(.22, 1, .36, 1) forwards;
}
.ss-player-network-notice[hidden] {
display: none !important;
}
.ss-player-network-notice.is-leaving {
animation: ssPlayerNetworkNoticeOut .22s ease forwards;
}
.ss-player-network-notice.is-online {
background: rgba(18, 68, 38, .96);
}
.ss-player-network-notice__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 999px;
background: rgba(255, 255, 255, .1);
color: #fff;
font-size: 14px;
}
.ss-player-network-notice__body {
display: grid;
min-width: 0;
gap: 3px;
}
.ss-player-network-notice__title {
font-size: 14px;
font-weight: 800;
line-height: 1.5;
}
.ss-player-network-notice__text {
color: rgba(255, 255, 255, .78);
font-size: 12px;
font-weight: 600;
line-height: 1.7;
}
.ss-player-network-notice__actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.ss-player-network-notice__action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 38px;
padding: 0 13px;
border: 0;
border-radius: 12px;
background: rgba(255, 255, 255, .1);
color: #fff;
cursor: pointer;
font-size: 12px;
font-weight: 800;
white-space: nowrap;
transition: background .18s ease, transform .18s ease;
}
.ss-player-network-notice__action.is-primary {
background: #fbcb07;
color: #171717;
}
.ss-player-network-notice__action:hover,
.ss-player-network-notice__action:focus-visible {
background: rgba(255, 255, 255, .17);
outline: 0;
transform: translateY(-1px);
}
.ss-player-network-notice__action.is-primary:hover,
.ss-player-network-notice__action.is-primary:focus-visible {
background: #ffd93d;
}
.ss-player-network-notice__close {
min-width: 64px;
height: 38px;
padding: 0 14px;
border: 0;
border-radius: 12px;
background: rgba(255, 255, 255, .12);
color: #fff;
cursor: pointer;
font-size: 13px;
font-weight: 800;
transition: background .18s ease, transform .18s ease;
}
.ss-player-network-notice__close:hover,
.ss-player-network-notice__close:focus-visible {
background: rgba(255, 255, 255, .18);
outline: 0;
transform: translateY(-1px);
}
body.ss-full-player-open .ss-player-network-notice {
top: max(18px, env(safe-area-inset-top));
bottom: auto;
}
@keyframes ssPlayerNetworkNoticeIn {
to {
opacity: 1;
transform: translate3d(50%, 0, 0) scale(1);
}
}
@keyframes ssPlayerNetworkNoticeOut {
to {
opacity: 0;
transform: translate3d(50%, 10px, 0) scale(.985);
}
}
@keyframes ssPlayerToastIn {
to {
opacity: 1;
transform: translate3d(50%, 0, 0) scale(1);
}
}
@keyframes ssPlayerToastOut {
to {
opacity: 0;
transform: translate3d(50%, 10px, 0) scale(.98);
}
}
#aramplayer .ss-native-tracklist .artist-player-s {
color: rgba(255, 255, 255, .54);
display: block;
font-size: 12px;
font-weight: 400;
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#aramplayer .ss-native-tracklist .audioplayer-track-item-duration {
color: rgba(255, 255, 255, .56);
font-size: 12px;
font-variant-numeric: tabular-nums;
text-align: center;
}
#aramplayer .ss-native-tracklist .audioplayer-track-item-actions {
align-items: center;
display: grid;
grid-template-columns: repeat(3, 36px);
gap: 8px;
justify-content: end;
}
.audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .audioplayer-track-item {
grid-template-columns: 34px 64px minmax(0, 1fr) 58px 132px;
min-height: 78px;
}
#aramplayer .ss-native-tracklist.ss-tracklist-has-post-covers .audioplayer-track-item {
grid-template-columns: 34px 48px minmax(0, 1fr) 58px 124px;
min-height: 64px;
}
.ss-playlist-detail .audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .audioplayer-track-item[data-ss-appended="1"] {
display: none;
}
.audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .audioplayer-track-item-duration {
display: block;
}
.audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .ss-playlist-track-cover,
#aramplayer .ss-native-tracklist.ss-tracklist-has-post-covers .ss-playlist-track-cover {
display: block;
width: 56px;
height: 56px;
background: #242424;
overflow: hidden;
}
#aramplayer .ss-native-tracklist.ss-tracklist-has-post-covers .ss-playlist-track-cover {
width: 44px;
height: 44px;
}
.audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .ss-playlist-track-cover img,
#aramplayer .ss-native-tracklist.ss-tracklist-has-post-covers .ss-playlist-track-cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .audioplayer-track-item-actions {
grid-template-columns: repeat(3, 36px);
}
.ss-playlist-track-more-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ss-single-track-more-wrap {
display: inline-flex;
}
#aramplayer .ss-native-tracklist .audioplayer-item-buy,
#aramplayer .ss-native-tracklist .audioplayer-item-dl,
#aramplayer .ss-native-tracklist .audioplayer-item-addplist,
#aramplayer .ss-native-tracklist .audioplayer-item-removeplist,
#aramplayer .ss-native-tracklist .ss-playlist-track-more,
#aramplayer .ss-native-tracklist .ss-playlist-track-drag,
#aramplayer .ss-native-tracklist .ss-playlist-track-move,
#aramplayer .ss-native-tracklist .ss-playlist-track-delete,
#aramplayer .ss-native-tracklist .audioplayer-item-action-spacer {
align-items: center;
appearance: none;
background: none !important;
border: 0;
border-radius: 6px;
color: rgba(255, 255, 255, .78);
display: inline-flex;
height: 34px;
justify-content: center;
line-height: 1;
margin: 0;
padding: 0;
text-decoration: none !important;
width: 34px;
}
#aramplayer .ss-native-tracklist .audioplayer-item-action-spacer {
background: transparent;
pointer-events: none;
}
#aramplayer .ss-native-tracklist .audioplayer-item-buy:hover,
#aramplayer .ss-native-tracklist .audioplayer-item-buy:focus-visible,
#aramplayer .ss-native-tracklist .audioplayer-item-dl:hover,
#aramplayer .ss-native-tracklist .audioplayer-item-dl:focus-visible,
#aramplayer .ss-native-tracklist .audioplayer-item-addplist:hover,
#aramplayer .ss-native-tracklist .audioplayer-item-addplist:focus-visible,
#aramplayer .ss-native-tracklist .audioplayer-item-removeplist:hover,
#aramplayer .ss-native-tracklist .audioplayer-item-removeplist:focus-visible,
#aramplayer .ss-native-tracklist .ss-playlist-track-more:hover,
#aramplayer .ss-native-tracklist .ss-playlist-track-more:focus-visible,
#aramplayer .ss-native-tracklist .ss-playlist-track-drag:hover,
#aramplayer .ss-native-tracklist .ss-playlist-track-drag:focus-visible,
#aramplayer .ss-native-tracklist .ss-playlist-track-move:hover,
#aramplayer .ss-native-tracklist .ss-playlist-track-move:focus-visible {
background: rgba(251, 203, 7, .14);
color: #fbcb07;
outline: 0;
}
#aramplayer .ss-native-tracklist .ss-playlist-track-delete:hover,
#aramplayer .ss-native-tracklist .ss-playlist-track-delete:focus-visible {
background: rgba(255, 78, 78, .1);
color: #ff7f7f;
outline: 0;
}
#aramplayer .ss-native-tracklist .ss-playlist-track-more-wrap.is-open .ss-playlist-track-more {
background: rgba(251, 203, 7, .14) !important;
color: #fbcb07;
}
#aramplayer .ss-native-tracklist .audioplayer-item-buy i,
#aramplayer .ss-native-tracklist .audioplayer-item-dl i,
#aramplayer .ss-native-tracklist .audioplayer-item-addplist i,
#aramplayer .ss-native-tracklist .audioplayer-item-removeplist i,
#aramplayer .ss-native-tracklist .ss-playlist-track-more i,
#aramplayer .ss-native-tracklist .ss-playlist-track-drag i,
#aramplayer .ss-native-tracklist .ss-playlist-track-move i,
#aramplayer .ss-native-tracklist .ss-playlist-track-delete i {
font-size: 18px;
}
#aramplayer .ss-native-tracklist .ss-playlist-track-delete {
color: rgba(255, 255, 255, .52);
}
#aramplayer .ss-native-tracklist .ss-playlist-track-delete i {
font-size: 16px;
color: currentColor;
}
.ss-playlist-track-edit-actions {
display: none;
grid-template-columns: repeat(2, 34px);
gap: 7px;
justify-content: end;
width: 75px;
}
.ss-playlist-track-menu {
position: absolute;
z-index: 30;
top: 38px;
left: 0;
display: grid;
min-width: 176px;
gap: 4px;
padding: 6px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 8px;
background: rgba(18, 18, 18, .98);
box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
}
.ss-playlist-track-menu[hidden] {
display: none !important;
}
.ss-playlist-track-menu__item {
display: flex;
align-items: center;
gap: 9px;
min-height: 34px;
width: 100%;
border: 0;
border-radius: 6px;
background: transparent;
color: rgba(255, 255, 255, .82);
cursor: pointer;
padding: 0 10px;
text-align: right;
text-decoration: none !important;
white-space: nowrap;
}
.ss-playlist-track-menu__item:hover,
.ss-playlist-track-menu__item:focus-visible {
background: rgba(255, 255, 255, .075);
color: #fff;
outline: 0;
}
.ss-playlist-track-menu__source:hover i,
.ss-playlist-track-menu__source:focus-visible i {
color: #9cc8ff;
}
.ss-playlist-track-menu__artist:hover i,
.ss-playlist-track-menu__artist:focus-visible i {
color: #b8a5ff;
}
.ss-playlist-track-menu__add:hover i,
.ss-playlist-track-menu__add:focus-visible i {
color: #7ee2a8;
}
.ss-playlist-track-menu__share:hover i,
.ss-playlist-track-menu__share:focus-visible i {
color: #8ec5ff;
}
.ss-playlist-track-menu__queue:hover i,
.ss-playlist-track-menu__queue:focus-visible i {
color: #67d8ff;
}
.ss-single-track-menu__download:hover i,
.ss-single-track-menu__download:focus-visible i {
color: #5eead4;
}
.ss-playlist-track-menu__delete:hover,
.ss-playlist-track-menu__delete:focus-visible {
background: rgba(255, 78, 78, .14);
color: #ff6969;
}
.ss-playlist-track-menu__delete:hover i,
.ss-playlist-track-menu__delete:focus-visible i {
color: #ff9b9b;
}
.ss-playlist-track-menu__item i {
width: 18px;
font-size: 15px;
text-align: center;
}
.ss-playlist-track-menu__item span {
font-size: 13px;
font-weight: 700;
line-height: 1;
}
.ss-action-sheet--track.is-open {
z-index: var(--ss-action-sheet-open-z, 10072);
}
.ss-action-sheet--track.is-open::before {
content: "";
position: fixed;
inset: 0;
z-index: var(--ss-action-sheet-backdrop-z, 10070);
background: rgba(8, 8, 8, .72);
pointer-events: auto;
}
.ss-artist-popular__more.ss-action-sheet--track.is-open::before {
content: none;
}
.ss-action-sheet--track.is-portal-open::before {
content: none;
}
.ss-artist-popular__more.ss-action-sheet--track.is-open {
z-index: auto;
}
.ss-action-sheet--track.is-portal-open {
z-index: auto;
}
.ss-track-menu-backdrop,
.ss-popular-track-menu-backdrop {
position: fixed;
display: block;
inset: 0;
z-index: var(--ss-action-sheet-backdrop-z, 10070);
background: rgba(8, 8, 8, .72);
pointer-events: auto;
}
.ss-action-sheet--track-panel {
position: fixed;
top: 50%;
left: 50%;
z-index: var(--ss-action-sheet-panel-z, 10071);
width: min(88vw, 360px);
min-width: 0;
gap: 8px;
padding: 12px 12px 14px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 22px;
background: #121316;
box-shadow: 0 24px 68px rgba(0, 0, 0, .38);
direction: rtl;
text-align: right;
transform: translate3d(-50%, -50%, 0);
}
.ss-action-sheet--track-panel.ss-action-surface--anchored {
border-radius: 16px;
transform: none;
transform-origin: 100% 0;
}
.ss-action-sheet--track-panel.ss-action-surface--anchored::before {
display: none;
}
.ss-action-sheet--track-panel.ss-action-surface--dialog {
transform: translate3d(-50%, -50%, 0);
}
.ss-action-sheet--track-panel::before {
content: "";
display: block;
width: 38px;
height: 4px;
justify-self: center;
margin: 0 0 4px;
border-radius: 999px;
background: rgba(255, 255, 255, .2);
}
.ss-action-sheet--track-panel.has-track-head::before {
display: none;
}
.ss-track-sheet-head {
display: grid;
grid-template-columns: 46px minmax(0, 1fr) 36px;
grid-template-areas: "cover meta close";
align-items: center;
gap: 10px;
padding: 2px 2px 8px;
direction: ltr;
}
.ss-track-sheet-head__cover {
display: inline-flex;
grid-area: cover;
width: 46px;
height: 46px;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 4px;
background: rgba(255, 255, 255, .065);
color: rgba(255, 255, 255, .78);
}
.ss-track-sheet-head__cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ss-track-sheet-head__cover-fallback {
display: inline-flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .07);
}
.ss-track-sheet-head__cover-fallback i {
font-size: 17px;
}
.ss-track-sheet-head__meta {
display: grid;
grid-area: meta;
min-width: 0;
gap: 3px;
direction: ltr;
text-align: left;
unicode-bidi: plaintext;
}
.ss-track-sheet-head__meta strong {
min-width: 0;
overflow: hidden;
color: #fff;
font-size: 14px;
font-weight: 850;
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
}
.ss-track-sheet-head__meta small {
min-width: 0;
overflow: hidden;
color: rgba(255, 255, 255, .58);
font-size: 12px;
font-weight: 650;
line-height: 18px;
text-overflow: ellipsis;
white-space: nowrap;
}
.ss-track-sheet-head__close {
display: inline-flex;
grid-area: close;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .055);
color: rgba(255, 255, 255, .86);
cursor: pointer;
transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.ss-track-sheet-head__close:hover,
.ss-track-sheet-head__close:focus-visible {
background: rgba(255, 255, 255, .085);
color: #fff;
transform: translateY(-1px);
outline: 0;
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__item {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
align-items: center;
gap: 10px;
min-height: 50px;
padding: 6px 8px;
border: 1px solid rgba(255, 255, 255, .065);
border-radius: 14px;
background: rgba(255, 255, 255, .045);
color: rgba(255, 255, 255, .88);
font-size: 13.5px;
font-weight: 800;
direction: rtl;
text-align: right;
transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__item:hover,
.ss-action-sheet--track-panel .ss-playlist-track-menu__item:focus-visible {
border-color: rgba(255, 255, 255, .12);
background: rgba(255, 255, 255, .075);
color: #fff;
transform: translateY(-1px);
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__item i {
display: inline-flex;
flex: 0 0 auto;
color: rgba(255, 255, 255, .74);
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(255, 255, 255, .07);
font-size: 16px;
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__item:hover i,
.ss-action-sheet--track-panel .ss-playlist-track-menu__item:focus-visible i {
color: rgba(255, 255, 255, .9);
background: rgba(255, 255, 255, .1);
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__source:hover i,
.ss-action-sheet--track-panel .ss-playlist-track-menu__source:focus-visible i {
color: #9cc8ff;
background: rgba(148, 197, 255, .14);
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__artist:hover i,
.ss-action-sheet--track-panel .ss-playlist-track-menu__artist:focus-visible i {
color: #b8a5ff;
background: rgba(167, 139, 250, .14);
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__add:hover i,
.ss-action-sheet--track-panel .ss-playlist-track-menu__add:focus-visible i {
color: #7ee2a8;
background: rgba(74, 222, 128, .14);
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__share:hover i,
.ss-action-sheet--track-panel .ss-playlist-track-menu__share:focus-visible i {
color: #8ec5ff;
background: rgba(96, 165, 250, .14);
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__queue:hover i,
.ss-action-sheet--track-panel .ss-playlist-track-menu__queue:focus-visible i {
color: #67d8ff;
background: rgba(56, 189, 248, .14);
}
.ss-action-sheet--track-panel .ss-single-track-menu__download:hover i,
.ss-action-sheet--track-panel .ss-single-track-menu__download:focus-visible i {
color: #5eead4;
background: rgba(45, 212, 191, .14);
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__item--trail {
grid-template-columns: 38px minmax(0, 1fr) 18px;
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__item--trail::after {
content: "\f053";
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, .34);
font-family: 'Font Awesome 5 Pro';
font-size: 12px;
font-weight: 300;
line-height: 1;
transition: color .18s ease, transform .18s ease;
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__item--trail:hover::after,
.ss-action-sheet--track-panel .ss-playlist-track-menu__item--trail:focus-visible::after {
color: rgba(255, 255, 255, .68);
transform: translateX(-2px);
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__item span {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 20px;
direction: rtl;
text-align: right;
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__delete:hover,
.ss-action-sheet--track-panel .ss-playlist-track-menu__delete:focus-visible {
border-color: rgba(255, 105, 105, .18);
background: rgba(255, 78, 78, .1);
color: #ffb3b3;
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__delete {
margin-top: 4px;
color: rgba(255, 255, 255, .76);
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__delete i {
background: rgba(255, 255, 255, .07);
color: rgba(255, 255, 255, .74);
}
.ss-action-sheet--track-panel .ss-playlist-track-menu__delete:hover i,
.ss-action-sheet--track-panel .ss-playlist-track-menu__delete:focus-visible i {
color: #ff9b9b;
background: rgba(255, 105, 105, .12);
}
.ss-action-sheet--track-panel.is-share-view {
gap: 8px;
}
.ss-track-share-panel__head {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 0 2px 6px;
}
.ss-track-share-panel__back {
display: inline-flex;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .055);
color: rgba(255, 255, 255, .86);
cursor: pointer;
transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.ss-track-share-panel__back:hover,
.ss-track-share-panel__back:focus-visible {
background: rgba(255, 255, 255, .085);
color: #fff;
transform: translateY(-1px);
outline: 0;
}
.ss-track-share-panel__title {
display: grid;
gap: 3px;
min-width: 0;
text-align: right;
}
.ss-track-share-panel__title strong {
color: #fff;
font-size: 14px;
font-weight: 800;
line-height: 20px;
}
.ss-track-share-panel__title small {
min-width: 0;
overflow: hidden;
color: rgba(255, 255, 255, .58);
font-size: 12px;
font-weight: 600;
line-height: 18px;
text-overflow: ellipsis;
white-space: nowrap;
}
.ss-track-share-option {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
align-items: center;
gap: 10px;
min-height: 50px;
padding: 6px 8px;
border: 1px solid rgba(255, 255, 255, .055);
border-radius: 14px;
background: rgba(255, 255, 255, .035);
color: rgba(255, 255, 255, .9);
cursor: pointer;
direction: rtl;
font-family: inherit;
font-size: 13.5px;
font-weight: 800;
text-align: right;
text-decoration: none;
transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.ss-track-share-option:hover,
.ss-track-share-option:focus-visible {
border-color: rgba(255, 255, 255, .12);
background: rgba(255, 255, 255, .07);
color: #fff;
text-decoration: none !important;
transform: translateY(-1px);
outline: 0;
}
.ss-track-share-option i {
display: inline-flex;
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(255, 255, 255, .07);
color: rgba(255, 255, 255, .74);
font-size: 17px;
}
.ss-track-share-option span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none !important;
white-space: nowrap;
}
.ss-track-share-option--telegram:hover i,
.ss-track-share-option--telegram:focus-visible i {
background: rgba(34, 158, 217, .14);
color: #2aabee;
}
.ss-track-share-option--whatsapp:hover i,
.ss-track-share-option--whatsapp:focus-visible i {
background: rgba(37, 211, 102, .14);
color: #25d366;
}
.ss-track-share-option--copy:hover i,
.ss-track-share-option--copy:focus-visible i {
background: rgba(148, 197, 255, .14);
color: #9cc8ff;
}
.ss-playlist-detail.is-editing .ss-playlist-track-more-wrap.is-open .ss-playlist-track-menu {
display: none !important;
}
body.ss-mini-visible .ss-playlist-detail .audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist {
padding-bottom: var(--ss-playlist-tracklist-bottom-space, calc(92px + env(safe-area-inset-bottom)));
}
body.ss-mobile-tabbar-enabled .ss-playlist-detail .audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist {
padding-bottom: var(--ss-playlist-tracklist-bottom-space, calc(92px + var(--ss-mobile-tabbar-height, 0px) + env(safe-area-inset-bottom)));
}
.audioplayer-wrap.userplayer #aramplayer.is-saving-playlist-order .ss-native-tracklist {
opacity: .72;
pointer-events: none;
}
.ss-playlist-detail.is-editing .audioplayer-wrap.userplayer #aramplayer .audioplayer-track-item-actions {
display: none;
}
.ss-playlist-detail.is-editing .audioplayer-wrap.userplayer #aramplayer .ss-playlist-track-edit-actions {
display: grid;
}
.ss-playlist-detail.is-editing .audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .audioplayer-track-item {
grid-template-columns: 34px 34px 64px minmax(0, 1fr) 58px 75px;
}
.audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .ss-playlist-track-drag {
display: none;
}
.ss-playlist-detail.is-editing .audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .ss-playlist-track-drag {
display: inline-flex;
cursor: grab;
color: rgba(255, 255, 255, .48);
transition: color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ss-playlist-detail.is-editing .audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .ss-playlist-track-drag:hover,
.ss-playlist-detail.is-editing .audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .ss-playlist-track-drag:focus-visible,
.ss-playlist-detail.is-editing .audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .ss-playlist-track-drag:active {
background: rgba(251, 203, 7, .1);
color: #fbcb07;
outline: 0;
}
.ss-playlist-detail.is-editing .audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .ss-playlist-track-drag:active {
cursor: grabbing;
transform: scale(.96);
}
.ss-playlist-track-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin: 0;
}
.ss-playlist-track-check input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.ss-playlist-track-check span {
width: 20px;
height: 20px;
border: 1px solid rgba(255, 255, 255, .32);
border-radius: 24px;
background: rgba(255, 255, 255, .025);
position: relative;
transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ss-playlist-track-check:hover span,
.ss-playlist-track-check:focus-within span {
border-color: rgba(251, 203, 7, .42);
background: rgba(251, 203, 7, .055);
box-shadow: 0 0 0 2px rgba(251, 203, 7, .08);
}
.ss-playlist-track-check:active span {
transform: scale(.94);
}
.ss-playlist-track-check input:checked + span {
background: #fbcb07;
border-color: #fbcb07;
box-shadow: 0 0 0 2px rgba(251, 203, 7, .12);
transform: scale(1.02);
}
.ss-playlist-track-check input:checked + span::after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 6px;
height: 11px;
border: solid #111;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(1);
animation: ss-playlist-check-pop .32s cubic-bezier(.2, .9, .2, 1.2) both;
}
.ss-playlist-track-check input:checked + span::before {
content: none;
}
#aramplayer .ss-native-tracklist .audioplayer-track-item.is-selected,
#aramplayer .ss-native-tracklist .audioplayer-track-item.is-drop-target {
background: rgba(255, 255, 255, .055);
}
#aramplayer .ss-native-tracklist .audioplayer-track-item.is-drop-target {
background: rgba(251, 203, 7, .055);
box-shadow: inset 0 0 0 1px rgba(251, 203, 7, .24);
}
#aramplayer .ss-native-tracklist .audioplayer-track-item.is-selected {
box-shadow: inset 2px 0 0 rgba(251, 203, 7, .82);
}
#aramplayer .ss-native-tracklist .audioplayer-track-item.is-selection-confirmed {
animation: ss-playlist-row-confirm .62s ease-out both;
}
#aramplayer .ss-native-tracklist .audioplayer-track-item.is-dragging {
background: rgba(251, 203, 7, .07);
box-shadow: inset 0 0 0 1px rgba(251, 203, 7, .18);
opacity: .72;
}
#aramplayer .ss-native-tracklist .audioplayer-track-item.is-dragging .ss-playlist-track-drag {
background: rgba(251, 203, 7, .12);
color: #fbcb07;
}
@keyframes ss-playlist-check-pop {
0% {
opacity: 0;
transform: rotate(45deg) scale(.45);
}
70% {
opacity: 1;
transform: rotate(45deg) scale(1.14);
}
100% {
opacity: 1;
transform: rotate(45deg) scale(1);
}
}
@keyframes ss-playlist-check-ring {
0% {
opacity: .86;
transform: scale(.58);
}
100% {
opacity: 0;
transform: scale(1.38);
}
}
@keyframes ss-playlist-row-confirm {
0% {
background: rgba(251, 203, 7, .08);
}
42% {
background: rgba(251, 203, 7, .18);
}
100% {
background: rgba(255, 255, 255, .07);
}
}
@media (max-width: 520px) {
#aramplayer .ss-native-tracklist .audioplayer-track-item {
grid-template-columns: 28px minmax(0, 1fr) 46px 94px;
gap: 7px;
padding: 8px 6px;
}
.audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .audioplayer-track-item,
.ss-playlist-detail.is-editing .audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .audioplayer-track-item {
grid-template-columns: 24px 48px minmax(0, 1fr) 46px 156px;
}
.ss-playlist-detail.is-editing .audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .audioplayer-track-item {
grid-template-columns: 28px 24px 44px minmax(0, 1fr) 61px;
}
.ss-playlist-detail.is-editing .audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .audioplayer-track-item-duration {
display: none;
}
#aramplayer .ss-native-tracklist.ss-tracklist-has-post-covers .audioplayer-track-item {
grid-template-columns: 28px 40px minmax(0, 1fr) 46px 94px;
}
.audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .audioplayer-track-item-duration {
display: block;
}
.audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .ss-playlist-track-cover {
width: 44px;
height: 44px;
}
#aramplayer .ss-native-tracklist.ss-tracklist-has-post-covers .ss-playlist-track-cover {
width: 36px;
height: 36px;
}
#aramplayer .ss-native-tracklist .audioplayer-track-item-actions {
grid-template-columns: repeat(3, 28px);
gap: 5px;
}
#aramplayer .ss-native-tracklist .audioplayer-item-buy,
#aramplayer .ss-native-tracklist .audioplayer-item-dl,
#aramplayer .ss-native-tracklist .audioplayer-item-addplist,
#aramplayer .ss-native-tracklist .audioplayer-item-removeplist,
#aramplayer .ss-native-tracklist .ss-playlist-track-more,
#aramplayer .ss-native-tracklist .ss-playlist-track-drag,
#aramplayer .ss-native-tracklist .ss-playlist-track-move,
#aramplayer .ss-native-tracklist .ss-playlist-track-delete,
#aramplayer .ss-native-tracklist .audioplayer-item-action-spacer {
height: 28px;
width: 28px;
}
#aramplayer .ss-native-tracklist .ss-playlist-track-check {
width: 28px;
height: 28px;
}
#aramplayer .ss-native-tracklist .ss-playlist-track-check span {
width: 18px;
height: 18px;
}
.ss-playlist-track-edit-actions {
grid-template-columns: repeat(2, 28px);
gap: 5px;
width: 61px;
}
}
@media (max-width: 479.98px) {
.audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .audioplayer-track-item {
grid-template-columns: 24px 44px minmax(0, 1fr) 44px 61px;
gap: 8px;
}
.audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .audioplayer-track-item-duration {
display: block;
}
.audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .audioplayer-track-item-actions {
grid-template-columns: repeat(2, 28px);
}
.audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .audioplayer-track-item-actions > .audioplayer-item-addplist {
display: none;
}
.ss-playlist-detail.is-editing .audioplayer-wrap.userplayer #aramplayer .ss-native-tracklist .audioplayer-track-item {
grid-template-columns: 28px 24px 40px minmax(0, 1fr) 61px;
}
body.single #aramplayer .ss-native-tracklist .audioplayer-track-item {
grid-template-columns: 28px minmax(0, 1fr) 44px 61px;
}
body.single #aramplayer .ss-native-tracklist.ss-tracklist-has-post-covers .audioplayer-track-item {
grid-template-columns: 28px 40px minmax(0, 1fr) 44px 61px;
}
body.single #aramplayer .ss-native-tracklist .audioplayer-track-item-actions {
grid-template-columns: repeat(2, 28px);
}
body.single #aramplayer .ss-native-tracklist .audioplayer-track-item-actions > .audioplayer-item-addplist {
display: none;
}
}
@media (max-width: 759.98px) {
.ss-action-sheet--track.is-open {
z-index: var(--ss-action-sheet-open-z, 10072);
}
.ss-action-sheet--track-panel {
position: fixed;
top: auto;
left: 0;
right: 0;
bottom: 0;
z-index: var(--ss-action-sheet-panel-z, 10071);
width: 100%;
min-width: 0;
max-width: none;
max-height: var(--ss-action-sheet-mobile-max-height, min(70vh, 520px));
gap: 6px;
padding: var(--ss-action-sheet-mobile-padding, 16px 16px calc(18px + env(safe-area-inset-bottom)));
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: var(--ss-action-sheet-mobile-radius, 22px 22px 0 0);
transform: translate3d(0, 0, 0);
}
.ss-action-sheet--track-panel.ss-action-surface--mobile-sheet {
transform: translate3d(0, 0, 0);
}
body.ss-mobile-tabbar-enabled .ss-action-sheet--track-panel {
padding-bottom: var(--ss-action-sheet-mobile-bottom-padding, max(18px, env(safe-area-inset-bottom, 0px)));
}
}
@media (max-width: 640px) {
.ss-player-network-notice {
bottom: calc(var(--ss-mobile-tabbar-height, 82px) + 94px + env(safe-area-inset-bottom));
grid-template-columns: 24px minmax(0, 1fr) auto;
gap: 10px;
width: calc(100vw - 24px);
padding: 12px;
border-radius: 16px;
}
.ss-player-network-notice__actions {
grid-column: 1 / -1;
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 1px;
}
.ss-player-network-notice__action {
min-height: 34px;
padding: 0 11px;
}
.ss-player-network-notice__text {
display: none;
}
.ss-player-network-notice.is-background .ss-player-network-notice__text,
.ss-player-network-notice.is-wakelock .ss-player-network-notice__text {
display: block;
}
.ss-player-network-notice__close {
min-width: 56px;
height: 34px;
padding: 0 12px;
}
}
body.ss-pjax-loading #ss-pjax-container {
pointer-events: none;
}
body.ss-pjax-loading #ss-pjax-container::before {
content: "";
position: absolute;
inset: 0;
z-index: 9998;
min-height: 100%;
background: rgba(8, 8, 8, .36);
pointer-events: none;
}
body.ss-pjax-loading #ss-pjax-container [data-ss-player-tracklist-loader] {
display: none !important;
}
html.ss-full-player-open,
body.ss-full-player-open {
overscroll-behavior: none;
}
.ss-offline-screen {
position: fixed;
inset: 0;
z-index: 100110;
display: none;
box-sizing: border-box;
padding: calc(24px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
background:
radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .055), transparent 34%),
rgba(10, 10, 10, .97);
}
.ss-offline-screen.is-visible {
display: flex;
align-items: center;
justify-content: center;
}
.ss-offline-screen__inner {
width: min(88vw, 340px);
outline: 0;
text-align: center;
color: #fff;
}
.ss-offline-screen__icon {
display: flex;
justify-content: center;
color: rgba(244, 244, 244, .9);
}
.ss-offline-screen__signal {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 50%;
background: rgba(255, 255, 255, .04);
box-shadow: 0 0 0 10px rgba(255, 255, 255, .018), 0 18px 42px rgba(0, 0, 0, .28);
animation: ssOfflinePulse 1.8s infinite ease-in-out;
}
.ss-offline-screen__signal i {
font-size: 34px;
}
.ss-offline-screen__title {
margin-top: 26px;
font-size: 21px;
font-weight: 700;
line-height: 1.45;
}
.ss-offline-screen__text {
margin: 8px 0 0;
color: rgba(255, 255, 255, .58);
font-size: 14px;
font-weight: 500;
line-height: 1.8;
}
.ss-offline-screen__retry {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
margin-top: 28px;
min-width: 154px;
height: 48px;
padding: 0 21px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 999px;
background: rgba(255, 255, 255, .09);
color: #fff;
font-size: 15px;
font-weight: 700;
line-height: 1;
transition: transform .2s ease, border-color .2s ease, background-color .2s ease, opacity .2s ease;
}
.ss-offline-screen__retry i {
font-size: 14px;
}
.ss-offline-screen__retry:hover,
.ss-offline-screen__retry:focus-visible {
border-color: rgba(255, 255, 255, .16);
background: rgba(255, 255, 255, .13);
transform: translateY(-1px);
outline: 0;
}
.ss-offline-screen__retry:disabled {
opacity: .62;
cursor: wait;
}
.ss-offline-screen.is-checking .ss-offline-screen__retry i,
.ss-offline-screen.is-continuing .ss-offline-screen__retry i {
animation: ssOfflineRetrySpin .85s linear infinite;
}
.ss-offline-screen__status {
min-height: 20px;
margin-top: 14px;
color: rgba(255, 255, 255, .52);
font-size: 12px;
font-weight: 600;
line-height: 1.65;
}
.ss-offline-screen__status[hidden] {
display: none !important;
}
body.ss-offline-visible {
overflow: hidden;
overscroll-behavior: none;
}
@keyframes ssOfflinePulse {
0%, 100% {
transform: scale(1);
opacity: .86;
}
50% {
transform: scale(1.04);
opacity: 1;
}
}
@keyframes ssOfflineRetrySpin {
to {
transform: rotate(-360deg);
}
}
.ss-route-loader {
position: fixed;
top: 50%;
left: 50%;
z-index: 10001;
display: none;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
padding: 0;
background: transparent;
transform: translate(-50%, -50%);
}
body.ss-pjax-loading .ss-route-loader {
display: flex;
}
.ss-route-loader__dot {
width: 16px;
height: 16px;
border-radius: 999px;
background: rgba(255, 255, 255, .42);
animation: ssRouteLoader 1s infinite ease-in-out;
}
.ss-route-loader__dot:nth-child(2) {
animation-delay: .12s;
}
.ss-route-loader__dot:nth-child(3) {
animation-delay: .24s;
}
.ss-route-loader__dot:nth-child(4) {
display: none;
}
@keyframes ssRouteLoader {
0%, 80%, 100% {
opacity: .38;
transform: scale(.92);
background: rgba(255, 255, 255, .42);
}
40% {
opacity: 1;
transform: scale(1.08);
background: rgba(255, 255, 255, .96);
}
}
.ss-mini-player {
--ss-accent: #fbcb07;
--ss-player-theme: var(--ss-full-theme, #1d1d1d);
--ss-player-theme-rgb: var(--ss-full-theme-rgb, 29, 29, 29);
--ss-player-on-theme: #fff;
--ss-player-on-theme-muted: rgba(255, 255, 255, .68);
--ss-player-on-theme-subtle: rgba(255, 255, 255, .46);
--ss-player-on-theme-border: rgba(255, 255, 255, .22);
--ss-player-control-bg: rgba(255, 255, 255, .10);
--ss-player-control-bg-strong: #fff;
--ss-player-control-on-strong: #111;
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 9999;
display: none;
align-items: center;
gap: 12px;
min-height: 76px;
padding: 10px 14px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 18px;
background:
linear-gradient(180deg, rgba(var(--ss-player-theme-rgb, 29, 29, 29), .72), rgba(var(--ss-player-theme-rgb, 29, 29, 29), .9)),
#1d1d1d;
box-shadow: 0 14px 35px rgba(0, 0, 0, .3);
direction: ltr;
cursor: default;
opacity: 0.98;
}
.ss-mini-player.is-visible {
display: flex;
}
.ss-mini-player.is-restoring-from-full {
opacity: 0;
pointer-events: none;
transform: translate3d(0, 12px, 0);
transition: none;
}
.ss-mini-player.is-restoring-from-full.is-restored-from-full {
opacity: 0.98;
transform: translate3d(0, 0, 0);
transition:
opacity .18s ease,
transform .22s cubic-bezier(.22, 1, .36, 1);
}
.ss-mini-player__progress,
.ss-mini-player__artist,
.ss-mini-player__shuffle,
.ss-mini-player__repeat,
.ss-mini-player__add,
.ss-mini-player__download-wrap,
.ss-mini-player__volume-wrap,
.ss-mini-player__seek {
display: none;
}
.ss-mini-player__progress {
pointer-events: none;
}
.ss-mini-player__cover {
flex: 0 0 54px;
position: relative;
width: 54px;
height: 54px;
border-radius: 0;
background: linear-gradient(135deg, #2b2b2b 0%, #171717 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
.ss-mini-player__media {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 1 1 auto;
cursor: pointer;
border-radius: 12px;
}
.ss-mini-player__meta {
min-width: 0;
flex: 1 1 auto;
text-align: left;
}
.ss-mini-player__title {
text-align: left;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ss-mini-player__title {
color: var(--ss-player-on-theme, #fff);
font-size: 14px;
font-weight: 600;
direction: ltr;
}
.ss-mini-player__controls {
display: flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
margin-left: auto;
}
.ss-mini-player__controls--actions {
display: none;
}
.ss-mini-player__track-actions {
display: none;
}
.ss-mini-player__download-wrap,
.ss-mini-player__volume-wrap {
position: relative;
}
.ss-mini-player__button {
position: relative;
width: 42px;
height: 42px;
border: 0;
border-radius: 999px;
background: none;
color: var(--ss-player-on-theme, #fff);
transition: background-color .15s ease, transform .15s ease;
}
.ss-mini-player__button:hover,
.ss-mini-player__button:focus-visible {
outline: 0;
background: var(--ss-player-control-bg, rgba(255, 255, 255, .14));
}
.ss-mini-player__button:active {
transform: scale(.97);
}
.ss-mini-player__button i {
font-size: 16px;
transition: opacity .2s ease;
}
.ss-mini-player__cover {
cursor: pointer;
}
.ss-mini-player__toggle.is-loading i {
opacity: 0;
}
body .ss-mini-player__toggle.is-loading > i {
opacity: 0 !important;
visibility: hidden !important;
transition: none !important;
}
body .ss-mini-player__toggle.is-loading {
background: transparent;
box-shadow: none;
}
.ss-mini-player__toggle.is-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid var(--ss-player-on-theme-border, rgba(255, 255, 255, .22));
border-top-color: #fbcb07;
border-radius: 50%;
animation: ssMiniButtonSpin .8s linear infinite;
}
.ss-mini-player__button.is-disabled {
opacity: .32;
pointer-events: none;
}
@keyframes ssMiniButtonSpin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 759.98px) {
body.ss-full-player-open .ss-mini-player {
display: none !important;
}
}
@media (min-width: 760px) {
.ss-mini-player {
cursor: pointer;
}
.ss-mini-player__button,
.ss-mini-player__seek {
cursor: pointer;
}
.ss-mini-player__download-menu,
.ss-mini-player__volume-popover {
cursor: default;
}
body.ss-full-player-open .ss-mini-player.is-visible {
z-index: 10090;
pointer-events: none;
}
}
body.ss-full-player-open {
overflow: hidden;
}
body.ss-full-player-scroll-locked {
position: fixed;
top: var(--ss-full-player-lock-top, 0);
right: 0;
left: 0;
width: auto;
overflow: hidden;
}
html.ss-full-player-scroll-locked {
overflow: hidden;
scrollbar-gutter: auto;
}
.ss-full-player {
--ss-player-theme: var(--ss-full-theme, #101010);
--ss-player-theme-rgb: var(--ss-full-theme-rgb, 16, 16, 16);
--ss-player-on-theme: #fff;
--ss-player-on-theme-muted: rgba(255, 255, 255, .68);
--ss-player-on-theme-subtle: rgba(255, 255, 255, .46);
--ss-player-on-theme-border: rgba(255, 255, 255, .22);
--ss-player-control-bg: rgba(255, 255, 255, .10);
--ss-player-control-bg-strong: #fff;
--ss-player-control-on-strong: #111;
--ss-seek-played: var(--ss-player-on-theme, #fff);
--ss-seek-rest: rgba(255, 255, 255, .18);
position: fixed;
inset: 0;
z-index: 10100;
display: none;
background:
linear-gradient(180deg, rgba(var(--ss-player-theme-rgb, 16, 16, 16), .98), rgba(var(--ss-player-theme-rgb, 16, 16, 16), .9)),
var(--ss-player-theme, #101010);
color: var(--ss-player-on-theme, #fff);
transition: background-color .22s ease, color .22s ease;
}
.ss-full-player.is-visible {
display: block;
}
.ss-full-player.is-closing {
display: block;
background:
linear-gradient(180deg, rgba(var(--ss-player-theme-rgb, 16, 16, 16), .98), rgba(var(--ss-player-theme-rgb, 16, 16, 16), .9)),
var(--ss-player-theme, #101010);
pointer-events: none;
}
.ss-full-player__backdrop {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(var(--ss-player-theme-rgb, 16, 16, 16), .1), rgba(0, 0, 0, .18));
will-change: opacity;
}
.ss-full-player__ambient {
display: none;
}
.ss-full-player.has-artwork .ss-full-player__ambient {
opacity: 0;
}
.ss-full-player__sheet {
--ss-accent: #fbcb07;
--ss-portrait-header-button-size: 40px;
--ss-portrait-header-icon-size: 23px;
--ss-portrait-source-size: 15px;
--ss-portrait-action-size: 50px;
--ss-portrait-action-icon-size: 30px;
--ss-portrait-title-size: clamp(21px, 5.9vw, 28px);
--ss-portrait-artist-size: clamp(15px, 4.05vw, 18px);
--ss-portrait-control-size: 46px;
--ss-portrait-control-icon-size: 23px;
--ss-portrait-step-size: 50px;
--ss-portrait-step-icon-size: 30px;
--ss-portrait-play-size: 72px;
--ss-portrait-play-icon-size: 29px;
--ss-portrait-footer-slot-size: 42px;
--ss-portrait-footer-icon-size: 23px;
--ss-portrait-audio-pill-max: 136px;
--ss-portrait-audio-icon-size: 23px;
--ss-portrait-audio-label-max: 74px;
position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
width: min(92vw, 420px);
max-height: calc(100vh - 26px);
overflow-x: hidden;
overflow-y: auto;
padding: 18px 16px 20px;
border: 0;
border-radius: 32px;
background:
linear-gradient(180deg, rgba(var(--ss-player-theme-rgb, 16, 16, 16), .18), rgba(var(--ss-player-theme-rgb, 16, 16, 16), .32));
box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
color: var(--ss-player-on-theme, #fff);
transform: translate3d(-50%, 100vh, 0);
opacity: 1;
direction: ltr;
scrollbar-width: none;
will-change: transform;
backface-visibility: hidden;
}
.ss-full-player__sheet::-webkit-scrollbar {
display: none;
}
.ss-full-player.is-visible .ss-full-player__sheet {
animation: ssFullPlayerIn .34s cubic-bezier(.22, 1, .36, 1) forwards;
}
.ss-full-player.is-closing .ss-full-player__sheet {
animation: ssFullPlayerOut .34s cubic-bezier(.4, 0, .2, 1) forwards;
}
.ss-full-player.is-closing .ss-full-player__backdrop {
animation: ssFullBackdropOut .3s ease forwards;
}
.ss-full-player.is-closing .ss-full-player__ambient,
.ss-full-player.is-closing.has-artwork .ss-full-player__ambient {
background: none;
opacity: 0;
transition: none;
}
.ss-full-player.is-sheet-motion {
--ss-full-sheet-y: 0px;
background: transparent;
transition: none;
}
.ss-full-player.is-sheet-motion .ss-full-player__backdrop {
background: none;
opacity: 0;
transition: none;
animation: none !important;
}
.ss-full-player.is-sheet-motion .ss-full-player__sheet {
animation: none !important;
background:
linear-gradient(180deg, rgba(var(--ss-player-theme-rgb, 16, 16, 16), .98), rgba(var(--ss-player-theme-rgb, 16, 16, 16), .9)),
var(--ss-player-theme, #101010);
transition: none;
transform: translate3d(-50%, calc(-50% + var(--ss-full-sheet-y, 0px)), 0);
}
.ss-full-player.is-sheet-dragging .ss-full-player__sheet {
cursor: grabbing;
touch-action: none;
}
@media (prefers-reduced-motion: reduce) {
.ss-mini-player.is-restoring-from-full,
.ss-mini-player.is-restoring-from-full.is-restored-from-full {
opacity: 0.98;
transform: none;
transition: none;
}
}
@keyframes ssFullPlayerIn {
from {
transform: translate3d(-50%, 100vh, 0);
}
to {
transform: translate3d(-50%, -50%, 0);
}
}
@keyframes ssFullPlayerOut {
from {
transform: translate3d(-50%, -50%, 0);
}
to {
transform: translate3d(-50%, 100vh, 0);
}
}
@keyframes ssFullBackdropOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.ss-full-player__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 18px;
}
.ss-full-player__more-wrap {
position: relative;
flex: 0 0 auto;
}
.ss-full-player__more-trigger,
.ss-full-player__close {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ss-full-player__more-trigger,
.ss-full-player__close {
width: var(--ss-portrait-header-button-size);
height: var(--ss-portrait-header-button-size);
line-height: var(--ss-portrait-header-button-size);
border: 0;
border-radius: 999px;
background: transparent;
color: var(--ss-player-on-theme, #fff);
text-decoration: none !important;
outline: 0;
transition: color .18s ease, transform .18s ease, background-color .18s ease;
}
.ss-full-player__more-trigger:hover,
.ss-full-player__more-trigger:focus-visible {
color: var(--ss-player-on-theme, #fff);
background: rgba(255, 255, 255, .08);
background: color-mix(in srgb, var(--ss-player-on-theme, #fff) 10%, transparent);
}
.ss-full-player__more-wrap.is-open .ss-full-player__more-trigger {
color: var(--ss-accent);
background: rgba(255, 255, 255, .08);
}
.ss-full-player__more-trigger:active {
transform: scale(.96);
}
.ss-full-player__more-trigger i,
.ss-full-player__close i {
color: inherit;
font-size: var(--ss-portrait-header-icon-size);
line-height: 1;
}
.ss-full-player__source {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 1 1 auto;
justify-content: center;
text-align: center;
}
.ss-full-player__source-title {
flex: 1 1 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--ss-player-on-theme, #fff);
font-size: var(--ss-portrait-source-size);
font-weight: 700;
line-height: 1.24;
text-align: inherit;
text-decoration: none;
transition: color .16s ease;
}
.ss-full-player__source-title[href]:hover,
.ss-full-player__source-title[href]:focus-visible {
color: var(--ss-player-on-theme, #fff);
outline: 0;
}
.ss-full-player__source-title.is-disabled {
cursor: default;
pointer-events: none;
}
.ss-full-player__cover-wrap {
position: relative;
margin: 0 auto 16px;
width: min(100%, clamp(210px, 50vh, 320px));
}
.ss-full-player__cover {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 4px;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: none;
}
.ss-full-player__track {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 12px;
margin-bottom: 16px;
text-align: left !important;
}
.ss-full-player__track-meta {
min-width: 0;
}
.ss-full-player__track-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex: 0 0 auto;
flex-wrap: nowrap;
justify-self: end;
transform: none;
}
.ss-full-player__track-title {
display: block;
position: relative;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
color: var(--ss-player-on-theme, #fff);
font-size: var(--ss-portrait-title-size);
font-weight: 800;
line-height: 1.13;
text-align: left;
text-decoration: none !important;
}
.ss-full-player__track-title-text {
display: inline-block;
max-width: none;
vertical-align: top;
transform: translate3d(0, 0, 0);
}
.ss-full-player__track-title.has-title-overflow .ss-full-player__track-title-text {
will-change: transform;
}
.ss-full-player__track-title.is-title-reveal .ss-full-player__track-title-text {
animation: ssFullTitleReveal var(--ss-full-title-reveal-duration, 6s) cubic-bezier(.22, 1, .36, 1) .35s 1 both;
}
@keyframes ssFullTitleReveal {
0%,
14% {
transform: translate3d(0, 0, 0);
}
54%,
72% {
transform: translate3d(var(--ss-full-title-reveal-x, -40px), 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
.ss-full-player__track-artist {
display: block;
margin-top: 6px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--ss-player-on-theme-muted, rgba(255, 255, 255, .72));
font-size: var(--ss-portrait-artist-size);
font-weight: 700;
line-height: 1.24;
text-align: left;
text-decoration: none !important;
}
.ss-full-player__track-title:hover,
.ss-full-player__track-artist:hover,
.ss-full-player__track-title:focus-visible,
.ss-full-player__track-artist:focus-visible {
color: var(--ss-player-on-theme, #fff);
text-decoration: none !important;
outline: 0;
}
.ss-full-player__track-artist.is-disabled {
pointer-events: none;
}
.ss-full-player__timeline-row {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.ss-full-player__timeline {
grid-column: 1 / -1;
}
.ss-full-player__icon-button,
.ss-full-player__control,
.ss-full-player__close {
border: 0;
color: var(--ss-player-on-theme, #fff);
text-decoration: none !important;
outline: 0;
}
.ss-full-player__download-wrap {
position: relative;
}
.ss-full-player__icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--ss-portrait-action-size);
height: var(--ss-portrait-action-size);
border-radius: 999px;
background: transparent;
text-align: center;
line-height: 1;
transition: transform .22s ease, color .22s ease, opacity .22s ease, background-color .22s ease;
}
.ss-full-player__icon-button i {
color: inherit;
font-size: var(--ss-portrait-action-icon-size);
line-height: 1;
}
.ss-full-player__icon-button:hover,
.ss-full-player__icon-button:focus-visible {
color: var(--ss-player-on-theme, #fff);
background: transparent !important;
transform: none;
}
.ss-full-player__icon-button.is-disabled {
opacity: .35;
pointer-events: none;
}
.ss-full-player__download-wrap.is-disabled {
pointer-events: none;
}
.ss-full-player__download-wrap.is-open .ss-full-player__download-trigger {
color: var(--ss-accent);
background: var(--ss-player-control-bg, rgba(255, 255, 255, .12));
}
.ss-full-player__download-menu {
position: absolute;
right: 0;
bottom: calc(100% + 10px);
display: grid;
gap: 8px;
min-width: 150px;
padding: 10px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
background: rgba(18, 18, 18, .98);
box-shadow: 0 18px 40px rgba(0, 0, 0, .36);
}
.ss-full-player__download-item {
display: block;
padding: 9px 12px;
border-radius: 12px;
color: rgba(255, 255, 255, .84);
font-size: 13px;
font-weight: 600;
text-decoration: none !important;
transition: background-color .2s ease, color .2s ease;
}
.ss-full-player__download-item:hover,
.ss-full-player__download-item:focus-visible,
.ss-full-player__download-item.is-current {
background: rgba(251, 203, 7, .12);
color: #fbcb07;
}
.ss-full-player__timeline {
min-width: 0;
}
.ss-full-player__seek-wrap {
position: relative;
height: 30px;
display: flex;
align-items: center;
}
.ss-full-player__seek-hit {
position: absolute;
inset: 0;
border-radius: 999px;
background: transparent;
pointer-events: none;
}
.ss-full-player__seek {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 3px;
border-radius: 999px;
background: var(--ss-seek-rest, rgba(255, 255, 255, .14));
cursor: pointer;
transition: background-color .18s ease;
}
.ss-full-player__seek:hover,
.ss-full-player__seek:focus-visible,
.ss-full-player__seek:active,
.ss-full-player.is-seeking .ss-full-player__seek {
height: 3px;
transform: none;
box-shadow: none;
}
.ss-full-player__seek::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 100%;
background: transparent;
}
.ss-full-player__seek::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
margin-top: -5.5px;
border: 0;
border-radius: 999px;
background: var(--ss-player-on-theme, #fff);
box-shadow: 0 2px 10px rgba(0, 0, 0, .20);
opacity: 0;
transform: scale(.7);
transition: opacity .18s ease, transform .18s ease;
}
.ss-full-player__seek::-moz-range-track {
height: 100%;
border: 0;
border-radius: 999px;
background: transparent;
}
.ss-full-player__seek::-moz-range-thumb {
width: 14px;
height: 14px;
border: 0;
border-radius: 999px;
background: var(--ss-player-on-theme, #fff);
box-shadow: 0 2px 10px rgba(0, 0, 0, .20);
opacity: 0;
transform: scale(.7);
transition: opacity .18s ease, transform .18s ease;
}
.ss-full-player__seek:hover::-webkit-slider-thumb,
.ss-full-player__seek:focus-visible::-webkit-slider-thumb,
.ss-full-player__seek:active::-webkit-slider-thumb,
.ss-full-player.is-seeking .ss-full-player__seek::-webkit-slider-thumb {
opacity: 1;
transform: scale(1);
}
.ss-full-player__seek:hover::-moz-range-thumb,
.ss-full-player__seek:focus-visible::-moz-range-thumb,
.ss-full-player__seek:active::-moz-range-thumb,
.ss-full-player.is-seeking .ss-full-player__seek::-moz-range-thumb {
opacity: 1;
transform: scale(1);
}
.ss-full-player__time {
display: flex;
justify-content: space-between;
margin-top: 3px;
color: var(--ss-player-on-theme, #fff);
font-size: 12px;
font-weight: 700;
line-height: 1.2;
font-variant-numeric: tabular-nums;
direction: ltr;
}
.ss-full-player__time-current {
text-align: left;
}
.ss-full-player__time-duration {
text-align: right;
}
.ss-full-player__controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0;
width: 100%;
margin-bottom: 16px;
}
.ss-full-player__control {
position: relative;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--ss-portrait-control-size);
height: var(--ss-portrait-control-size);
border-radius: 999px;
background: transparent;
transition: transform .24s ease, color .24s ease, opacity .24s ease;
}
.ss-full-player__control:hover,
.ss-full-player__control:focus-visible {
background: transparent !important;
transform: none;
}
.ss-full-player__control i {
color: inherit;
font-size: var(--ss-portrait-control-icon-size);
line-height: 1;
}
.ss-full-player__prev,
.ss-full-player__next {
width: var(--ss-portrait-step-size);
height: var(--ss-portrait-step-size);
}
.ss-full-player__prev i,
.ss-full-player__next i {
font-size: var(--ss-portrait-step-icon-size);
font-weight: 900;
}
.ss-full-player__toggle {
width: var(--ss-portrait-play-size);
height: var(--ss-portrait-play-size);
background: var(--ss-player-control-bg-strong, #fff);
color: var(--ss-player-control-on-strong, #252525);
box-shadow: 0 20px 44px rgba(0, 0, 0, .14);
}
.ss-full-player__toggle i {
color: var(--ss-player-control-on-strong, #252525);
font-size: var(--ss-portrait-play-icon-size);
font-weight: 900;
line-height: 1;
}
.ss-full-player__toggle.is-loading i {
opacity: 0;
}
body .ss-full-player__toggle.is-loading > i {
opacity: 0 !important;
visibility: hidden !important;
transition: none !important;
}
.ss-full-player__toggle.is-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 26px;
margin: -13px 0 0 -13px;
border: 3px solid var(--ss-player-on-theme-border, rgba(17, 17, 17, .2));
border-top-color: var(--ss-player-control-on-strong, #111);
border-radius: 50%;
animation: ssMiniButtonSpin .8s linear infinite;
}
.ss-full-player__toggle:hover,
.ss-full-player__toggle:focus-visible {
background: var(--ss-player-control-bg-strong, #fff);
color: var(--ss-player-control-on-strong, #111);
}
.ss-full-player__shuffle.is-animating,
.ss-full-player__toggle.is-playing {
color: var(--ss-player-control-on-strong, #111);
background: var(--ss-player-control-bg-strong, #fff);
}
.ss-mini-player__shuffle.is-active,
.ss-full-player__shuffle.is-active {
color: #fbcb07;
background: transparent;
box-shadow: none;
font-weight: 900;
}
.ss-full-player__repeat,
.ss-full-player__repeat:hover,
.ss-full-player__repeat:focus-visible,
.ss-full-player__repeat:active,
.ss-mini-player__repeat,
.ss-mini-player__repeat:hover,
.ss-mini-player__repeat:focus-visible,
.ss-mini-player__repeat:active {
background: transparent !important;
box-shadow: none !important;
}
.ss-full-player__repeat.is-repeat-all,
.ss-mini-player__repeat.is-repeat-all {
color: var(--ss-player-on-theme-muted, rgba(255, 255, 255, .86));
}
.ss-full-player__repeat.is-repeat-all i,
.ss-mini-player__repeat.is-repeat-all i {
color: var(--ss-player-on-theme-muted, rgba(255, 255, 255, .86));
}
.ss-full-player__repeat.is-repeat-one,
.ss-mini-player__repeat.is-repeat-one,
.ss-full-player__repeat.is-repeat-none,
.ss-mini-player__repeat.is-repeat-none {
color: #fbcb07;
}
.ss-full-player__repeat.is-repeat-one i,
.ss-mini-player__repeat.is-repeat-one i,
.ss-full-player__repeat.is-repeat-none i,
.ss-mini-player__repeat.is-repeat-none i {
color: #fbcb07;
}
.ss-full-player__repeat.is-repeat-none {
background: transparent;
}
.ss-full-player__repeat.is-repeat-none::after,
.ss-mini-player__repeat.is-repeat-none::after {
content: "OFF";
position: absolute;
top: -7px;
right: 50%;
transform: translateX(50%);
color: #ff4b4b;
font-size: 8px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
pointer-events: none;
}
.ss-mini-player__repeat {
position: relative;
}
.ss-mini-player__repeat.is-repeat-none {
background: transparent;
}
.ss-full-player__icon-button.is-tapped,
.ss-full-player__control.is-tapped,
.ss-full-player__close.is-tapped {
animation: ssFullIconTap .24s cubic-bezier(.22, 1, .36, 1);
}
@keyframes ssFullIconTap {
0% {
transform: scale(1);
opacity: 1;
}
45% {
transform: scale(.84);
opacity: .72;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.ss-full-player__repeat.is-repeat-one::after,
.ss-mini-player__repeat.is-repeat-one::after {
content: none;
}
.ss-full-player__footer {
display: grid;
grid-template-columns: var(--ss-portrait-footer-slot-size) minmax(0, 1fr) var(--ss-portrait-footer-slot-size);
grid-template-areas: "timer quality queue";
align-items: center;
gap: 10px;
padding-top: 0;
width: 100%;
}
.ss-full-player__meta-item {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 0;
width: 100%;
color: var(--ss-player-on-theme, #fff);
font-size: 14px;
font-variant-numeric: tabular-nums;
}
.ss-full-player__footer-center {
display: contents;
}
.ss-full-player__footer-center .ss-full-player__meta-item {
width: auto;
}
button.ss-full-player__meta-item {
position: relative;
border: 0;
background: transparent;
cursor: pointer;
transition: color .2s ease, transform .2s ease;
}
button.ss-full-player__meta-item:hover,
button.ss-full-player__meta-item:focus-visible {
color: var(--ss-player-on-theme, #fff);
outline: 0;
}
button.ss-full-player__meta-item:hover i,
button.ss-full-player__meta-item:focus-visible i {
color: var(--ss-player-on-theme, #fff);
}
button.ss-full-player__meta-item.is-active {
color: #fbcb07;
outline: 0;
}
button.ss-full-player__meta-item.is-active i {
color: #fbcb07;
}
.ss-full-player__meta-item i {
color: inherit;
font-size: var(--ss-portrait-audio-icon-size);
line-height: 1;
}
.ss-full-player__quality {
grid-area: quality;
justify-self: center;
width: auto;
max-width: var(--ss-portrait-audio-pill-max);
min-height: 38px;
padding: 0 13px;
gap: 8px;
background: transparent;
}
.ss-full-player__quality-label {
max-width: var(--ss-portrait-audio-label-max);
}
body .ss-full-player__footer-center .ss-full-player__queue-toggle {
grid-area: queue;
display: inline-flex !important;
justify-self: end;
width: var(--ss-portrait-footer-slot-size);
max-width: var(--ss-portrait-footer-slot-size);
height: var(--ss-portrait-footer-slot-size);
padding: 0;
font-size: 0;
}
body .ss-full-player__footer-center .ss-full-player__queue-toggle i {
font-size: var(--ss-portrait-footer-icon-size);
}
.ss-full-player__footer-side--start .ss-full-player__footer-action,
.ss-full-player__timer-trigger {
grid-area: timer;
}
.ss-full-player__quality-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ss-full-player__quality.is-loading {
pointer-events: none;
}
.ss-full-player__quality.is-loading > i {
display: none;
}
.ss-full-player__quality.is-loading::after {
content: "";
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 0;
border: 2px solid rgba(255, 255, 255, .22);
border-top-color: #fbcb07;
border-radius: 50%;
animation: ssMiniButtonSpin .8s linear infinite;
}
.ss-full-player__queue-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ss-full-player__queue-label,
.ss-full-player__queue-badge {
display: none !important;
}
.ss-full-player__queue-badge,
.ss-full-player__queue-handle-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--ss-player-control-bg, rgba(255, 255, 255, .07));
color: var(--ss-player-on-theme-muted, rgba(255, 255, 255, .58));
font-size: 11px;
font-weight: 700;
line-height: 1;
}
.ss-full-player__queue-badge[hidden],
.ss-full-player__queue-handle-count[hidden] {
display: none;
}
.ss-full-player__queue-handle {
display: none;
width: 100%;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 38px;
margin-top: 2px;
padding: 0 12px;
border: 0;
border-radius: 12px;
background: var(--ss-player-control-bg, rgba(255, 255, 255, .025));
color: var(--ss-player-on-theme-muted, rgba(255, 255, 255, .58));
font-size: 12px;
font-weight: 750;
transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.ss-full-player__queue-handle-icon {
color: var(--ss-player-on-theme-subtle, rgba(255, 255, 255, .52));
font-size: 15px;
}
.ss-full-player__queue-handle:hover,
.ss-full-player__queue-handle:focus-visible {
color: var(--ss-player-on-theme, #fff);
background: rgba(255, 255, 255, .08);
background: color-mix(in srgb, var(--ss-player-on-theme, #fff) 10%, transparent);
outline: 0;
}
.ss-full-player__queue-handle:hover .ss-full-player__queue-handle-icon,
.ss-full-player__queue-handle:focus-visible .ss-full-player__queue-handle-icon {
color: var(--ss-player-on-theme, #fff);
}
.ss-full-player__queue-handle.is-active {
color: #fbcb07;
background: rgba(251, 203, 7, .055);
outline: 0;
}
.ss-full-player__queue-handle.is-active .ss-full-player__queue-handle-icon {
color: #fbcb07;
}
.ss-full-player__footer-side {
display: flex;
align-items: center;
gap: 8px;
}
.ss-full-player__footer-side--start {
grid-area: timer;
justify-content: flex-start;
}
.ss-full-player__footer-side--end {
display: none;
}
.ss-full-player__footer-action {
position: relative;
width: var(--ss-portrait-footer-slot-size);
max-width: var(--ss-portrait-footer-slot-size);
height: var(--ss-portrait-footer-slot-size);
border: 0;
border-radius: 999px;
background: transparent;
color: var(--ss-player-on-theme, #fff);
transition: color .2s ease, transform .2s ease, background-color .2s ease;
}
.ss-full-player__footer-action i {
color: inherit;
font-size: var(--ss-portrait-footer-icon-size);
line-height: 1;
}
.ss-full-player__queue-mobile {
display: none !important;
}
.ss-full-player__footer-action:hover,
.ss-full-player__footer-action:focus-visible {
color: var(--ss-player-on-theme, #fff);
background: transparent !important;
transform: none;
outline: 0;
}
.ss-full-player__footer-action.is-active {
color: var(--ss-accent);
outline: 0;
}
.ss-full-player__footer-action:hover,
.ss-full-player__footer-action:focus-visible {
transform: none;
}
.ss-full-player__timer-trigger.is-active::after {
content: none;
display: none;
}
.ss-full-player__timer-badge {
position: absolute;
top: -4px;
right: -2px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: color-mix(in srgb, var(--ss-player-on-theme, #fff) 14%, transparent);
color: var(--ss-player-on-theme, #fff);
font-size: 10px;
font-weight: 700;
line-height: 1;
text-align: center;
pointer-events: none;
}
.ss-full-player__timer-badge[hidden] {
display: none;
}
.ss-full-player__volume-wrap {
position: relative;
}
.ss-full-player__volume-wrap.is-open .ss-full-player__footer-action {
color: var(--ss-accent);
background: transparent;
}
.ss-full-player__queue {
width: 100%;
margin-top: 18px;
padding: 14px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 22px;
background: rgba(255, 255, 255, .04);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.ss-full-player__queue-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.ss-full-player__queue-title {
color: #fff;
font-size: 15px;
font-weight: 700;
}
.ss-full-player__queue-tools {
display: flex;
align-items: center;
gap: 10px;
}
.ss-full-player__queue-count {
color: rgba(255, 255, 255, .56);
font-size: 12px;
font-weight: 600;
}
.ss-full-player__queue-reset {
border: 0;
padding: 0;
background: transparent;
color: var(--ss-accent);
font-size: 12px;
font-weight: 700;
}
.ss-full-player__queue-list {
display: grid;
gap: 8px;
max-height: min(40vh, 360px);
margin: 0;
padding: 0;
list-style: none;
overflow-y: auto;
}
.ss-full-player__queue-empty {
color: rgba(255, 255, 255, .52);
font-size: 13px;
text-align: center;
padding: 10px 0 4px;
}
.ss-full-player__queue-item {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 64px;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 16px;
background: rgba(255, 255, 255, .04);
transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.ss-full-player__queue-item.is-current {
background: rgba(251, 203, 7, .12);
box-shadow: inset 0 0 0 1px rgba(251, 203, 7, .24);
}
.ss-full-player__queue-play,
.ss-full-player__queue-move {
border: 0;
border-radius: 999px;
background: transparent;
color: rgba(255, 255, 255, .82);
}
.ss-full-player__queue-play {
width: 42px;
height: 42px;
background: rgba(255, 255, 255, .06);
}
.ss-full-player__queue-play i {
font-size: 16px;
}
.ss-full-player__queue-meta {
min-width: 0;
}
.ss-full-player__queue-item-title,
.ss-full-player__queue-item-subtitle {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ss-full-player__queue-item-title {
color: #fff;
font-size: 13px;
font-weight: 700;
}
.ss-full-player__queue-item-subtitle {
margin-top: 3px;
color: rgba(255, 255, 255, .52);
font-size: 12px;
}
.ss-full-player__queue-actions {
display: grid;
grid-template-columns: repeat(2, 28px);
justify-content: end;
gap: 6px;
}
.ss-full-player__queue-move {
width: 28px;
height: 28px;
background: rgba(255, 255, 255, .06);
}
.ss-full-player__queue-move i {
font-size: 12px;
}
.ss-full-player__queue-play:hover,
.ss-full-player__queue-play:focus-visible,
.ss-full-player__queue-move:hover,
.ss-full-player__queue-move:focus-visible,
.ss-full-player__queue-reset:hover,
.ss-full-player__queue-reset:focus-visible {
color: var(--ss-accent);
outline: 0;
}
.ss-full-player__queue-move:disabled {
opacity: .28;
pointer-events: none;
}
.ss-full-player__volume-wrap.is-unsupported .ss-full-player__volume-head {
letter-spacing: normal;
text-transform: none;
}
.ss-full-player__volume-popover {
position: absolute;
right: 0;
bottom: calc(100% + 10px);
width: 138px;
padding: 12px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 18px;
background: rgba(18, 18, 18, .96);
box-shadow: 0 16px 36px rgba(0, 0, 0, .32);
}
.ss-full-player__volume-head,
.ss-full-player__volume-percent {
color: rgba(255, 255, 255, .72);
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.ss-full-player__volume-percent {
margin-top: 8px;
text-align: center;
}
.ss-full-player__volume-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
margin-top: 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .16);
outline: 0;
}
.ss-full-player__volume-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 0;
border-radius: 999px;
background: #fff0a5;
box-shadow: 0 4px 14px rgba(251, 203, 7, .28);
}
.ss-full-player__volume-range::-moz-range-track {
height: 6px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .16);
}
.ss-full-player__volume-range::-moz-range-thumb {
width: 16px;
height: 16px;
border: 0;
border-radius: 999px;
background: #fff0a5;
box-shadow: 0 4px 14px rgba(251, 203, 7, .28);
}
.ss-full-player__close {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 999px;
background: transparent;
text-align: center;
line-height: 40px;
transition: transform .22s ease, color .22s ease, opacity .22s ease, background-color .22s ease;
}
.ss-full-player__close i {
font-size: 20px;
}
.ss-full-player__close:hover,
.ss-full-player__close:focus-visible {
color: var(--ss-player-on-theme, #fff);
background: rgba(255, 255, 255, .08);
background: color-mix(in srgb, var(--ss-player-on-theme, #fff) 10%, transparent);
transform: translateY(1px);
}
.ss-player-sleep-modal__dialog {
width: min(92vw, 480px);
max-height: min(86vh, 680px);
overflow-y: auto;
direction: rtl;
}
.ss-player-sleep-modal__text {
margin: -6px 0 16px;
color: rgba(255, 255, 255, .72);
font-size: 13px;
font-weight: 700;
line-height: 1.8;
text-align: right;
}
.ss-player-sleep-modal__presets {
margin: 0;
}
.ss-player-sleep-modal__preset,
.ss-player-sleep-modal__submit,
.ss-player-sleep-modal__clear {
appearance: none;
font-family: inherit;
}
.ss-player-sleep-modal__preset.is-active,
.ss-player-sleep-modal__preset.is-selected {
border-color: rgba(251, 203, 7, .28);
background: rgba(251, 203, 7, .1);
}
.ss-player-sleep-modal__preset.is-active .ss-player-quality-panel__option-icon,
.ss-player-sleep-modal__preset.is-selected .ss-player-quality-panel__option-icon {
background: #fbcb07;
color: #111;
}
.ss-player-sleep-modal__preset.is-active .ss-player-quality-panel__option-state,
.ss-player-sleep-modal__preset.is-selected .ss-player-quality-panel__option-state {
background: #fbcb07;
color: #111;
}
.ss-player-sleep-modal__preset .ss-player-quality-panel__option-text {
direction: rtl;
text-align: right;
}
.ss-player-sleep-modal__custom {
margin: 12px 0 0;
padding: 13px 14px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
background: rgba(255, 255, 255, .045);
text-align: right;
}
.ss-player-sleep-modal__label {
display: block;
margin: 0 0 9px;
color: rgba(255, 255, 255, .78);
font-size: 13px;
font-weight: 800;
line-height: 1.5;
}
.ss-player-sleep-modal__custom-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 92px;
gap: 10px;
}
.ss-player-sleep-modal__input {
width: 100%;
min-width: 0;
height: 44px;
padding: 0 14px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 14px;
background: rgba(0, 0, 0, .16);
color: #fff;
font-size: 14px;
font-weight: 800;
text-align: center;
outline: 0;
transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ss-player-sleep-modal__input::placeholder {
color: rgba(255, 255, 255, .46);
}
.ss-player-sleep-modal__input:focus {
border-color: rgba(251, 203, 7, .42);
background: rgba(255, 255, 255, .07);
box-shadow: 0 0 0 .12rem rgba(251, 203, 7, .14);
}
.ss-player-sleep-modal__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 44px;
border: 0;
border-radius: 14px;
background: #fbcb07;
color: #111;
font-size: 13px;
font-weight: 900;
line-height: 1;
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.ss-player-sleep-modal__submit:hover,
.ss-player-sleep-modal__submit:focus-visible {
background: #ffd733;
box-shadow: 0 8px 24px rgba(251, 203, 7, .18);
outline: 0;
transform: translateY(-1px);
}
.ss-player-sleep-modal__footer {
display: grid;
gap: 8px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, .07);
}
.ss-player-sleep-modal__status {
color: rgba(255, 255, 255, .72);
font-size: 13px;
font-weight: 700;
line-height: 1.8;
text-align: right;
}
.ss-player-sleep-modal__clear {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
width: max-content;
max-width: 100%;
padding: 0;
border: 0;
background: transparent;
color: rgba(255, 255, 255, .84);
font-size: 13px;
font-weight: 800;
line-height: 1.7;
}
.ss-player-sleep-modal__clear i {
color: #fff;
font-size: 17px;
transition: color .2s ease, transform .2s ease;
}
.ss-player-sleep-modal__clear:hover,
.ss-player-sleep-modal__clear:focus-visible {
color: #fbcb07;
outline: 0;
}
.ss-player-sleep-modal__clear:hover i,
.ss-player-sleep-modal__clear:focus-visible i {
color: #fbcb07;
transform: rotate(-12deg);
}
@media (max-width: 479.98px) {
.ss-player-sleep-modal__dialog {
padding: 20px;
}
.ss-player-sleep-modal__head {
margin-bottom: 14px;
}
.ss-player-sleep-modal__custom-row {
grid-template-columns: minmax(0, 1fr) 82px;
gap: 8px;
}
}
body.ss-full-player-open .modal-backdrop.show {
z-index: 10120;
}
body.ss-full-player-open .modal.show {
z-index: 10130;
}
.ss-single-player-actions {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
direction: ltr;
flex: 0 0 auto;
}
.ss-single-player-toolbar {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 14px;
direction: ltr;
width: 100%;
padding: 6px 0 2px;
}
.ss-single-player-toolbar__download,
.ss-single-player-toolbar__shop,
.ss-single-player-toolbar__favorite,
.ss-single-player-toolbar__more {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.ss-single-player-toolbar__download,
.ss-single-player-toolbar__shop {
margin: 0;
}
.ss-single-player-toolbar__download,
.ss-single-player-toolbar__shop {
order: 1;
}
.ss-single-player-toolbar__shop {
order: 2;
}
.ss-single-player-toolbar__favorite {
order: 3;
}
.ss-single-player-toolbar__more {
position: relative;
order: 4;
margin: 0;
}
.ss-single-player-toolbar__download .dlbox-Si-i,
.ss-single-player-toolbar__shop .dlbox-Si-i {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 !important;
}
.ss-single-player-toolbar__favorite {
gap: 8px;
margin: 0;
min-width: 0;
}
.ss-single-player-toolbar__favorite .simplefavorite-button,
.ss-single-player-toolbar__favorite .simplefavorite-button-count,
.ss-single-player-toolbar__favorite .Fav-List-title {
float: none;
display: inline-flex;
align-items: center;
margin: 0 !important;
}
.ss-single-player-toolbar__favorite .simplefavorite-button-count,
.ss-single-player-toolbar__favorite .Fav-List-title {
line-height: 1;
color: rgba(255, 255, 255, .82);
font-size: 16px;
font-weight: 500;
white-space: nowrap;
}
.ss-single-player-actions > .audioplayer-play2 {
order: 1;
}
.ss-single-player-actions > .audioplayer-shuffle2 {
order: 2;
}
.ss-single-player-actions > .ss-single-player-queue {
order: 3;
}
body .audioplayer-play2,
body .audioplayer-shuffle2,
body .ss-single-player-queue {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
border-radius: 999px;
isolation: isolate;
transition: transform .28s cubic-bezier(.22, 1, .36, 1);
flex: 0 0 36px;
}
body .audioplayer-play2 {
width: 64px;
height: 64px;
flex-basis: 64px;
}
body .audioplayer-play2::after {
content: "";
position: absolute;
inset: 4px;
z-index: 0;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: inherit;
background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 22px rgba(0, 0, 0, .12);
transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease, background .28s ease, border-color .28s ease;
}
body .audioplayer-shuffle2::after {
content: "";
position: absolute;
inset: 4px;
z-index: 0;
border-radius: inherit;
transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease, background .28s ease, border-color .28s ease;
}
body .audioplayer-play2::before {
position: relative;
z-index: 1;
font-family: 'Font Awesome 5 Pro';
font-weight: 600;
color: #fbcb07;
cursor: pointer;
display: inline-block;
transition: color .22s ease, transform .32s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
}
body .audioplayer-shuffle2::before {
position: relative;
z-index: 1;
font-family: 'Font Awesome 5 Pro';
font-weight: 400;
color: rgba(255, 255, 255, .74);
cursor: pointer;
display: inline-block;
transition: color .22s ease, transform .32s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
}
body .ss-single-player-queue::before {
position: relative;
z-index: 1;
font-family: 'Font Awesome 7 Pro';
font-weight: 300;
color: rgba(255, 255, 255, .74);
cursor: pointer;
display: inline-block;
transition: color .22s ease, transform .32s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
}
body .audioplayer-play2::before {
font-size: 48px;
line-height: 1;
content: "\f144";
}
body .audioplayer-play2.is-playing::before {
content: "\f28b";
}
body .audioplayer-play2.is-playing::after {
background: linear-gradient(180deg, rgba(251, 203, 7, .3), rgba(251, 203, 7, .14));
border-color: rgba(251, 203, 7, .26);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 28px rgba(251, 203, 7, .16);
}
body .audioplayer-play2.is-loading {
cursor: progress;
pointer-events: none;
}
body .audioplayer-play2.is-loading::before {
content: "";
width: 22px;
height: 22px;
border: 2px solid rgba(255, 255, 255, .22);
border-top-color: #fbcb07;
border-radius: 50%;
animation: ssMiniButtonSpin .8s linear infinite;
}
body .audioplayer-play2.is-loading::after {
background: transparent;
border-color: transparent;
box-shadow: none;
}
body .audioplayer-play2.is-loading.is-animating::before {
animation: ssMiniButtonSpin .8s linear infinite;
}
body .audioplayer-play2.is-loading.is-animating::after {
animation: none;
background: transparent;
border-color: transparent;
box-shadow: none;
}
body .audioplayer-shuffle2::before {
font-size: 20px;
line-height: 1;
content: "\f074";
}
body .audioplayer-shuffle2.is-loading {
cursor: progress;
pointer-events: none;
}
body .audioplayer-shuffle2.is-loading::before {
content: "";
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, .22);
border-top-color: #fbcb07;
border-radius: 50%;
animation: ssMiniButtonSpin .8s linear infinite;
}
body .audioplayer-shuffle2.is-active::before,
[data-ss-popular-track-shuffle].is-active {
color: #fbcb07;
font-weight: 900;
}
body .ss-single-player-queue::before {
font-size: 20px;
line-height: 1;
content: "\e4a2";
}
body .audioplayer-play2:hover,
body .audioplayer-shuffle2:hover,
body .ss-single-player-queue:hover {
transform: translateY(-1px);
}
body .audioplayer-play2:hover::before,
body .audioplayer-shuffle2:hover::before,
body .ss-single-player-queue:hover::before {
color: #fbcb07;
}
body .audioplayer-play2:hover::after,
body .audioplayer-shuffle2:hover::after {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 28px rgba(0, 0, 0, .16);
}
body.single .ss-single-player-toolbar__download .dlbox-Si-i,
body.single .ss-single-player-toolbar__shop .dlbox-Si-i,
body.single .ss-single-player-toolbar__favorite .simplefavorite-button,
body.single .ss-single-player-more__trigger {
color: rgba(255, 255, 255, .74) !important;
transition: color .22s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}
body.single .ss-single-player-toolbar__download .dlbox-Si-i i,
body.single .ss-single-player-toolbar__shop .dlbox-Si-i i {
font-size: 20px !important;
line-height: 1;
}
body.single .ss-single-player-toolbar__favorite .simplefavorite-button {
justify-content: center;
font-size: 20px !important;
line-height: 1;
}
body.single .ss-single-player-more__trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin: 0;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
font-size: 26px;
line-height: 1;
}
body.single .ss-single-player-more__trigger:hover,
body.single .ss-single-player-more__trigger:focus-visible,
.ss-single-player-more.is-open .ss-single-player-more__trigger {
color: #fbcb07 !important;
outline: 0;
transform: translateY(-1px);
}
.ss-single-player-more__menu[hidden] {
display: none !important;
}
.ss-single-player-more__menu {
position: absolute;
right: 0;
top: calc(100% + 10px);
z-index: var(--ss-action-sheet-panel-z, 10071);
display: grid;
width: 218px;
min-width: 218px;
max-width: calc(100vw - 24px);
gap: 1px;
padding: 7px;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 15px;
background: rgba(18, 18, 19, .985);
box-shadow: 0 18px 52px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .04);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
direction: rtl;
text-align: right;
transform-origin: 90% 0;
animation: ss-single-player-more-menu-in .18s cubic-bezier(.22, 1, .36, 1);
}
.ss-single-player-more__item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 12px;
width: 100%;
min-height: 43px;
padding: 0 12px;
border: 0;
border-radius: 11px;
background: transparent;
color: rgba(255, 255, 255, .82);
font-size: 13px;
font-weight: 700;
line-height: 1.5;
direction: rtl;
text-align: right;
white-space: nowrap;
transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.ss-single-player-more__item i {
flex: 0 0 auto;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: rgba(255, 255, 255, .48);
font-size: 14px;
text-align: center;
transition: color .18s ease;
}
.ss-single-player-more__item span {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: rtl;
text-align: right;
}
.ss-single-player-more__item:hover,
.ss-single-player-more__item:focus-visible {
background: rgba(255, 255, 255, .055);
color: #fff;
outline: 0;
transform: translateY(-1px);
}
.ss-single-player-more__item:hover i,
.ss-single-player-more__item:focus-visible i {
color: #fbcb07;
}
body.single .ss-single-player-more__menu--sheet.ss-action-sheet--page {
gap: 8px;
}
body.single .ss-action-sheet--page .ss-single-player-more__head {
margin-bottom: 6px;
padding-bottom: 10px;
border-bottom: 0;
}
body.single .ss-action-sheet--page .ss-single-player-more__item {
min-height: 48px;
border-radius: 12px;
}
body.single .ss-single-player-more--sheet::before {
content: "";
position: fixed;
inset: 0;
z-index: var(--ss-action-sheet-backdrop-z, 10070);
background: rgba(0, 0, 0, .42);
opacity: 0;
pointer-events: none;
transition: opacity .18s ease;
}
body.single .ss-single-player-more--sheet.is-open::before {
opacity: 1;
pointer-events: auto;
}
body.single.ss-single-more-open .ss-single-shell {
z-index: var(--ss-action-sheet-open-z, 10072);
}
body.single .ss-single-player-more__menu--sheet {
position: fixed;
top: 50%;
right: auto;
bottom: auto;
left: 50%;
z-index: var(--ss-action-sheet-panel-z, 10071);
width: min(390px, calc(100vw - 32px));
min-width: 0;
max-width: 390px;
max-height: min(72vh, 620px);
display: flex;
flex-direction: column;
gap: 7px;
padding: 16px;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 20px;
background: rgba(19, 19, 20, .985);
box-shadow: 0 28px 80px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .045);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
direction: rtl;
text-align: right;
transform: translate3d(-50%, -50%, 0) scale(1);
transform-origin: 50% 50%;
animation: ss-single-player-more-sheet-in .2s cubic-bezier(.22, 1, .36, 1);
}
body.single .ss-single-player-more__head {
align-items: center;
margin-bottom: 4px;
direction: rtl;
}
body.single .ss-single-player-more__head .ss-player-download-panel__title-group {
text-align: right;
}
body.single .ss-single-player-more__subtitle {
display: block;
margin-top: 0;
max-width: 100%;
color: rgba(255, 255, 255, .58);
direction: rtl;
text-align: right;
}
body.single .ss-single-player-more__close {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
body.single .ss-single-player-more__close:hover,
body.single .ss-single-player-more__close:focus-visible {
color: #fff;
background: rgba(255, 255, 255, .09);
outline: 0;
transform: translateY(-1px);
}
@keyframes ss-single-player-more-sheet-in {
from {
opacity: 0;
transform: translate3d(-50%, calc(-50% + 12px), 0) scale(.985);
}
to {
opacity: 1;
transform: translate3d(-50%, -50%, 0) scale(1);
}
}
@keyframes ss-single-player-more-menu-in {
from {
opacity: 0;
transform: translateY(-4px) scale(.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes ss-single-player-more-menu-mobile-in {
from {
opacity: 0;
transform: translateX(-50%) translateY(8px) scale(.98);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
}
body.single .ss-single-player-toolbar__download .dlbox-Si-i,
body.single .ss-single-player-toolbar__shop .dlbox-Si-i,
body.single .ss-single-player-toolbar__favorite .simplefavorite-button,
body.single .ss-single-player-toolbar__favorite .simplefavorite-button-count,
body.single .ss-single-player-toolbar__favorite .Fav-List-title {
vertical-align: middle;
}
.dldrop .dldrop-links {
display: none !important;
visibility: hidden;
pointer-events: none;
}
.ss-single-player-toolbar__download .dlboxnew {
display: none !important;
visibility: hidden;
pointer-events: none;
}
.ss-single-player-toolbar__shop .dlboxnew-shop {
display: none !important;
visibility: hidden;
pointer-events: none;
}
body.single .ss-single-player-toolbar__download .dlbox-Si-i:hover,
body.single .ss-single-player-toolbar__shop .dlbox-Si-i:hover {
color: #fbcb07 !important;
}
body .audioplayer-play2.is-animating {
animation: ssPlayerButtonTap .42s cubic-bezier(.22, 1, .36, 1);
}
body .audioplayer-play2.is-animating::before {
animation: ssPlayerPlayIcon .42s cubic-bezier(.22, 1, .36, 1);
}
body .audioplayer-play2.is-animating::after {
animation: ssPlayerHalo .42s ease;
}
body .audioplayer-shuffle2.is-animating {
animation: ssPlayerButtonTap .42s cubic-bezier(.22, 1, .36, 1);
}
body .audioplayer-shuffle2.is-animating::before {
animation: ssPlayerPlayIcon .42s cubic-bezier(.22, 1, .36, 1);
}
body .audioplayer-shuffle2.is-animating::after {
animation: ssPlayerHalo .42s ease;
}
body .audioplayer-play2:focus,
body .audioplayer-shuffle2:focus,
body .ss-single-player-queue:focus {
outline: 0;
}
@keyframes ssPlayerButtonTap {
0% {
transform: scale(1);
}
45% {
transform: scale(.92);
}
100% {
transform: scale(1);
}
}
@keyframes ssPlayerPlayIcon {
0% {
transform: scale(1);
opacity: 1;
}
45% {
transform: scale(.82);
opacity: .72;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes ssPlayerHalo {
0% {
transform: scale(1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 22px rgba(0, 0, 0, .12);
}
50% {
transform: scale(1.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 16px 32px rgba(251, 203, 7, .14);
}
100% {
transform: scale(1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 22px rgba(0, 0, 0, .12);
}
}
.ss-preview-target {
position: relative;
}
.ss-preview-media-wrap {
display: block;
position: relative;
}
.ss-post-preview__button {
position: absolute;
left: 16px;
bottom: 20px;
z-index: 4;
width: 44px;
height: 44px;
border: 0;
border-radius: 999px;
background: #ffffffa1;
color: #242424;
box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
opacity: 0;
transform: translateY(8px);
transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
}
.ss-preview-target:hover .ss-post-preview__button,
.ss-preview-target .ss-post-preview__button.is-current {
opacity: 1;
transform: translateY(0);
}
.ss-post-preview__button i {
font-size: 18px;
line-height: 2;
font-weight: 600;
}
.ss-post-preview__button.is-playing {
background: #fbcb07;
color: #111;
}
.ss-post-preview__button.is-loading {
opacity: 1;
transform: translateY(0);
background: transparent;
box-shadow: none;
cursor: progress;
pointer-events: none;
}
.ss-post-preview__button.is-loading i {
opacity: 0;
}
.ss-post-preview__button.is-loading::before {
content: "";
position: absolute;
inset: 10px;
border: 2px solid rgba(255, 255, 255, .28);
border-top-color: #fbcb07;
border-radius: 50%;
animation: ssMiniButtonSpin .8s linear infinite;
}
.ss-player-login-prompt {
--ss-login-dialog-bg: rgba(18, 18, 18, .96);
--ss-login-icon-bg: rgba(255, 255, 255, .055);
--ss-login-icon-color: #fbcb07;
--ss-login-icon-pulse: rgba(251, 203, 7, .06);
position: fixed;
inset: 0;
z-index: 10180;
pointer-events: none;
}
#ss-player-quality-panel,
#ss-player-sleep-timer,
#ss-player-playlist-panel {
z-index: 10180;
}
#ss-player-playlist-create-prompt {
z-index: 10190;
}
.ss-player-login-prompt.is-visible {
pointer-events: auto;
}
.ss-player-login-prompt__backdrop {
position: absolute;
inset: 0;
background: rgba(8, 8, 8, .54);
opacity: 0;
transition: opacity .22s ease;
}
.ss-player-login-prompt__dialog {
position: absolute;
box-sizing: border-box;
top: 50%;
left: 50%;
width: min(92vw, 560px);
padding: 28px 26px 24px;
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 30px;
background: var(--ss-login-dialog-bg);
box-shadow: 0 24px 72px rgba(0, 0, 0, .34);
color: #fff;
text-align: center;
opacity: 0;
transform: translate3d(calc(-50% + 28px), -50%, 0) scale(.985);
transition: opacity .2s ease, transform .26s cubic-bezier(.22, 1, .36, 1), box-shadow .24s ease;
}
.ss-player-login-prompt.is-visible .ss-player-login-prompt__backdrop {
opacity: 1;
}
.ss-player-login-prompt.is-visible .ss-player-login-prompt__dialog {
opacity: 1;
transform: translate3d(-50%, -50%, 0) scale(1);
}
.ss-player-login-prompt.is-closing {
pointer-events: none;
}
.ss-player-login-prompt.is-closing .ss-player-login-prompt__backdrop {
opacity: 0;
}
.ss-player-login-prompt.is-closing .ss-player-login-prompt__dialog {
opacity: 0;
transform: translate3d(calc(-50% + 24px), -50%, 0) scale(.985);
}
.ss-player-login-prompt__close {
position: absolute;
top: 14px;
left: 14px;
width: 44px;
height: 44px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .06);
color: rgba(255, 255, 255, .78);
transition: background-color .22s ease, color .22s ease, transform .22s ease;
}
.ss-player-login-prompt__close:hover,
.ss-player-login-prompt__close:focus-visible {
color: #fbcb07;
background: rgba(255, 255, 255, .09);
transform: translateY(-1px);
outline: 0;
}
.ss-player-login-prompt__icon-wrap {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.ss-player-login-prompt__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 84px;
height: 84px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .08);
background: var(--ss-login-icon-bg);
color: var(--ss-login-icon-color);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 28px rgba(0, 0, 0, .18);
animation: ssLoginPromptIconPulse 1.35s ease-in-out 2 both;
}
.ss-player-login-prompt__icon i {
font-size: 32px;
animation: ssLoginPromptIconFloat 1.35s ease-in-out 2 both;
}
.ss-player-login-prompt__body {
max-width: 420px;
margin: 0 auto;
}
.ss-player-login-prompt__title {
margin: 0 0 8px;
color: rgba(255, 255, 255, .96);
font-size: clamp(22px, 1.8vw, 28px);
font-weight: 600;
line-height: 1.5;
}
.ss-player-login-prompt__text {
color: rgba(255, 255, 255, .68);
font-size: clamp(15px, 1.2vw, 17px);
font-weight: 400;
line-height: 1.85;
}
.ss-player-login-prompt__link,
.ss-player-login-prompt__text a {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 8px;
border-radius: 999px;
background: rgba(251, 203, 7, .1);
color: #fbcb07;
font-weight: 500;
text-decoration: none !important;
transition: background-color .2s ease, color .2s ease;
}
.ss-player-quality-panel__dialog {
width: min(92vw, 480px);
padding: 22px;
text-align: right;
}
.ss-player-quality-panel__head {
display: flex;
align-items: center;
gap: 12px;
padding-left: 46px;
margin-bottom: 18px;
}
.ss-player-quality-panel__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 999px;
color: #111;
background: #fbcb07;
}
.ss-player-quality-panel__title {
margin: 0;
color: rgba(255, 255, 255, .96);
font-size: 20px;
font-weight: 800;
line-height: 1.5;
}
.ss-player-quality-panel__options {
display: grid;
gap: 10px;
}
.ss-player-quality-panel__section-title {
margin: 0 0 10px;
color: rgba(255, 255, 255, .64);
font-size: 12px;
font-weight: 800;
line-height: 1.5;
}
.ss-player-quality-panel__option {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
width: 100%;
padding: 13px 14px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
background: rgba(255, 255, 255, .045);
color: rgba(255, 255, 255, .9);
text-align: right;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease, transform .2s ease;
}
.ss-player-quality-panel__option:hover,
.ss-player-quality-panel__option:focus-visible,
.ss-player-quality-panel__option.is-selected {
border-color: rgba(251, 203, 7, .28);
background: rgba(251, 203, 7, .1);
outline: 0;
}
.ss-player-quality-panel__option.is-locked {
opacity: .46;
}
.ss-player-quality-panel__option-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 999px;
background: rgba(255, 255, 255, .08);
color: #fff;
}
.ss-player-quality-panel__option-body {
display: grid;
min-width: 0;
gap: 2px;
}
.ss-player-quality-panel__option-title {
color: rgba(255, 255, 255, .94);
font-size: 14px;
font-weight: 800;
line-height: 1.5;
}
.ss-player-quality-panel__option-text {
color: rgba(255, 255, 255, .58);
font-size: 12px;
font-weight: 700;
direction: ltr;
text-align: right;
}
.ss-player-quality-panel__option-state {
min-width: 66px;
padding: 7px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, .08);
color: rgba(255, 255, 255, .72);
font-size: 11px;
font-weight: 800;
text-align: center;
white-space: nowrap;
}
.ss-player-quality-panel__option.is-selected .ss-player-quality-panel__option-state {
background: #fbcb07;
color: #111;
}
.ss-player-quality-panel__volume {
display: grid;
gap: 12px;
margin-top: 14px;
padding: 14px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
background: rgba(255, 255, 255, .045);
}
.ss-player-quality-panel__volume-head {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 38px;
align-items: center;
gap: 12px;
}
.ss-player-quality-panel__volume-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .08);
color: #fff;
cursor: pointer;
}
.ss-player-quality-panel__volume-copy {
display: grid;
min-width: 0;
gap: 2px;
}
.ss-player-quality-panel__volume-title {
color: rgba(255, 255, 255, .94);
font-size: 14px;
font-weight: 800;
line-height: 1.5;
}
.ss-player-quality-panel__volume-hint,
.ss-player-quality-panel__volume-percent {
color: rgba(255, 255, 255, .58);
font-size: 12px;
font-weight: 700;
line-height: 1.5;
}
.ss-player-quality-panel__volume-percent {
direction: ltr;
min-width: 38px;
text-align: left;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ss-player-quality-panel__volume-range {
--ss-volume-percent: 100%;
width: 100%;
height: 4px;
margin: 4px 0;
border-radius: 999px;
direction: ltr;
background: linear-gradient(
to right,
#fff 0%,
#fff var(--ss-volume-percent),
rgba(255, 255, 255, .18) var(--ss-volume-percent),
rgba(255, 255, 255, .18) 100%
);
accent-color: #fff;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.ss-player-quality-panel__volume-range::-webkit-slider-thumb {
width: 14px;
height: 14px;
border: 0;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
-webkit-appearance: none;
appearance: none;
}
.ss-player-quality-panel__volume-range::-moz-range-track {
height: 4px;
border: 0;
border-radius: 999px;
background: transparent;
}
.ss-player-quality-panel__volume-range::-moz-range-thumb {
width: 14px;
height: 14px;
border: 0;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}
.ss-player-quality-panel__volume.is-muted .ss-player-quality-panel__volume-toggle {
color: #fbcb07;
}
.ss-player-quality-panel__volume.is-unsupported {
opacity: .7;
}
.ss-player-quality-panel__help {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
color: rgba(255, 255, 255, .84);
font-size: 13px;
font-weight: 700;
line-height: 1.7;
text-decoration: none !important;
}
.ss-player-quality-panel__help i {
color: #fff;
font-size: 17px;
}
.ss-player-quality-panel__help:hover,
.ss-player-quality-panel__help:focus-visible {
color: #fbcb07;
outline: 0;
}
@keyframes ssLoginPromptIconPulse {
0%, 100% {
transform: scale(1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 28px rgba(0, 0, 0, .18);
}
50% {
transform: scale(1.035);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 28px rgba(0, 0, 0, .18), 0 0 0 10px var(--ss-login-icon-pulse);
}
}
@keyframes ssLoginPromptIconFloat {
0%, 100% {
transform: translateY(0);
opacity: .96;
}
50% {
transform: translateY(-2px);
opacity: 1;
}
}
.ss-player-login-prompt__link:hover,
.ss-player-login-prompt__link:focus-visible,
.ss-player-login-prompt__text a:hover,
.ss-player-login-prompt__text a:focus-visible {
background: rgba(251, 203, 7, .16);
color: #ffd84f;
outline: 0;
}
body.ss-mini-visible {
padding-bottom: 100px;
}
@media (max-width: 759.98px) {
.ss-player-queue-panel {
--ss-queue-header-offset: calc(64px + env(safe-area-inset-top));
--ss-queue-player-offset: 0px;
}
html.ss-full-player-open,
body.ss-full-player-open {
min-height: 100dvh;
}
.ss-route-loader {
gap: 10px;
min-width: 94px;
height: 46px;
padding: 0 14px;
}
.ss-player-download-panel__sheet {
top: auto;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: none;
max-height: min(78vh, 560px);
padding: 14px 14px var(--ss-sheet-mobile-bottom-padding, max(14px, env(safe-area-inset-bottom, 0px)));
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 24px 24px 0 0;
transform: translate3d(0, 28px, 0);
transform-origin: bottom center;
}
.ss-player-download-panel.is-open .ss-player-download-panel__sheet {
transform: translate3d(0, 0, 0);
}
.ss-player-download-panel.is-closing .ss-player-download-panel__sheet {
transform: translate3d(0, 28px, 0);
}
.ss-player-download-panel__item {
padding: 12px 13px;
border-radius: 14px;
font-size: 13px;
}
.ss-player-download-panel__subtitle {
font-size: 12px;
}
.ss-player-login-prompt__dialog {
top: auto;
right: 0;
bottom: 0;
left: 0;
width: 100%;
max-width: none;
padding: 22px 18px var(--ss-sheet-mobile-bottom-padding-roomy, max(20px, env(safe-area-inset-bottom, 0px)));
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 28px 28px 0 0;
text-align: right;
transform: translate3d(0, 28px, 0);
transform-origin: bottom center;
}
.ss-player-login-prompt.is-visible .ss-player-login-prompt__dialog {
transform: translate3d(0, 0, 0);
}
.ss-player-login-prompt.is-closing .ss-player-login-prompt__dialog {
transform: translate3d(0, 28px, 0);
}
.ss-player-login-prompt__close {
top: 12px;
left: 12px;
width: 42px;
height: 42px;
}
.ss-player-login-prompt__icon-wrap {
justify-content: center;
margin-bottom: 14px;
}
.ss-player-login-prompt__icon {
width: 72px;
height: 72px;
}
.ss-player-login-prompt__icon i {
font-size: 28px;
}
.ss-player-login-prompt__body {
max-width: none;
}
.ss-player-login-prompt__title {
font-size: 21px;
line-height: 1.5;
text-align: center;
}
.ss-player-login-prompt__text {
font-size: 15px;
line-height: 1.85;
text-align: center;
}
.ss-route-loader__dot {
width: 14px;
height: 14px;
}
.ss-mini-player {
left: 8px;
right: 8px;
bottom: 10px;
min-height: 52px;
padding: 8px 10px;
border-radius: 4px;
gap: 8px;
background:
linear-gradient(180deg, rgba(var(--ss-player-theme-rgb, 29, 29, 29), .96), rgba(var(--ss-player-theme-rgb, 29, 29, 29), .9)),
#1d1d1d;
overflow: hidden;
}
.ss-mini-player__progress {
position: absolute;
right: 4px;
bottom: 0;
left: 4px;
z-index: 2;
display: block;
height: 2px;
pointer-events: none;
}
.ss-mini-player__seek {
display: block;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 2px;
margin: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .22);
outline: 0;
pointer-events: none;
}
.ss-mini-player__seek::-webkit-slider-runnable-track {
height: 2px;
border: 0;
border-radius: 999px;
background: transparent;
}
.ss-mini-player__seek::-webkit-slider-thumb {
-webkit-appearance: none;
width: 0;
height: 0;
border: 0;
opacity: 0;
}
.ss-mini-player__seek::-moz-range-track {
height: 2px;
border: 0;
border-radius: 999px;
background: transparent;
}
.ss-mini-player__seek::-moz-range-thumb {
width: 0;
height: 0;
border: 0;
opacity: 0;
}
.ss-mini-player__cover {
flex-basis: 35px;
width: 35px;
height: 35px;
border-radius: 4px;
}
.ss-mini-player__meta {
display: grid;
gap: 1px;
min-width: 0;
}
.ss-mini-player__title {
font-size: 14px;
line-height: 1.22;
color: var(--ss-player-on-theme, #fff);
}
.ss-mini-player__title-text {
display: inline-block;
max-width: none;
vertical-align: top;
transform: translate3d(0, 0, 0);
}
.ss-mini-player__title.has-title-overflow .ss-mini-player__title-text {
will-change: transform;
}
.ss-mini-player__title.is-title-reveal .ss-mini-player__title-text {
animation: ssMiniTitleReveal var(--ss-mini-title-reveal-duration, 5s) cubic-bezier(.22, 1, .36, 1) .45s 1 forwards;
}
@keyframes ssMiniTitleReveal {
0%,
18% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(var(--ss-mini-title-reveal-x, 0px), 0, 0);
}
}
.ss-mini-player__artist {
display: block;
margin-top: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--ss-player-on-theme-muted, rgba(255, 255, 255, .68));
font-size: 12px;
font-weight: 400;
line-height: 1.22;
text-align: left;
direction: ltr;
}
.ss-mini-player__controls {
gap: 2px;
}
.ss-mini-player__shuffle,
.ss-mini-player__repeat,
.ss-mini-player__prev,
.ss-mini-player__add,
.ss-mini-player__download-wrap,
.ss-mini-player__volume-wrap,
.ss-mini-player__controls--actions {
display: none;
}
.ss-mini-player__button {
width: 36px;
height: 36px;
min-width: 36px;
background: transparent;
color: var(--ss-player-on-theme, #fff);
}
.ss-mini-player__button:hover,
.ss-mini-player__button:focus-visible,
.ss-mini-player__toggle:hover,
.ss-mini-player__toggle:focus-visible,
.ss-mini-player__toggle.is-playing {
background: transparent;
box-shadow: none;
}
.ss-mini-player__button i {
font-size: 14px;
}
.ss-post-preview__button {
opacity: 1;
transform: none;
width: 40px;
height: 40px;
left: 16px;
bottom: 18px;
}
body .audioplayer-play2,
body .audioplayer-shuffle2,
body .ss-single-player-queue {
margin: 0;
}
body .audioplayer-play2 {
width: 58px;
height: 58px;
flex-basis: 58px;
}
body .audioplayer-shuffle2,
body .ss-single-player-queue {
width: 34px;
height: 34px;
flex-basis: 34px;
}
body .audioplayer-play2::before {
font-size: 42px;
}
body .audioplayer-shuffle2::before,
body .ss-single-player-queue::before {
font-size: 18px;
}
body.single .dlbox-Si .dlbox-Si-i i,
body.single .Fav-List .simplefavorite-button,
body.single .ss-single-player-more__trigger {
font-size: 18px !important;
}
.ss-single-player-more__menu {
position: fixed;
top: auto;
right: auto;
bottom: calc(86px + env(safe-area-inset-bottom));
left: 50%;
width: min(318px, calc(100vw - 32px));
min-width: 0;
max-width: 318px;
border-radius: 17px;
transform-origin: 50% 100%;
transform: translateX(-50%);
animation: ss-single-player-more-menu-mobile-in .2s cubic-bezier(.22, 1, .36, 1);
}
body.single .ss-single-player-more__menu--sheet {
top: auto;
right: auto;
bottom: 0;
left: 0;
width: 100%;
max-width: none;
max-height: var(--ss-action-sheet-mobile-max-height, min(70vh, 520px));
padding: var(--ss-action-sheet-mobile-padding, 16px 16px calc(18px + env(safe-area-inset-bottom)));
border-width: 1px 0 0;
border-radius: var(--ss-action-sheet-mobile-radius, 22px 22px 0 0);
transform: translate3d(0, 0, 0);
transform-origin: 50% 100%;
animation: ss-single-player-more-sheet-mobile-in .2s cubic-bezier(.22, 1, .36, 1);
}
body.ss-mobile-tabbar-enabled.single .ss-single-player-more__menu--sheet {
bottom: 0;
padding-bottom: var(--ss-action-sheet-mobile-bottom-padding, max(18px, env(safe-area-inset-bottom, 0px)));
}
body.single .ss-single-player-more__subtitle {
max-width: calc(100vw - 96px);
}
.ss-single-player-more__item {
min-height: 47px;
font-size: 13.5px;
}
body.single .ss-single-player-more__menu--sheet.ss-action-sheet--page {
padding-top: 15px;
}
.ss-single-player-toolbar__favorite .simplefavorite-button-count,
.ss-single-player-toolbar__favorite .Fav-List-title {
font-size: 14px;
}
body.ss-mini-visible {
padding-bottom: 94px;
}
@keyframes ss-single-player-more-sheet-mobile-in {
from {
opacity: 0;
transform: translate3d(0, 14px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
}
@media (min-width: 760px) {
.ss-mini-player {
left: 0;
right: 0;
bottom: 0;
display: none;
grid-template-columns: minmax(300px, 1fr) auto minmax(170px, 1fr);
align-items: center;
column-gap: clamp(16px, 2.2vw, 30px);
row-gap: 12px;
min-height: 112px;
padding: 18px 22px 16px;
border: 0;
border-radius: 0;
background:
linear-gradient(180deg, rgba(var(--ss-player-theme-rgb, 25, 25, 25), .14), rgba(var(--ss-player-theme-rgb, 25, 25, 25), .2)),
rgb(25 25 25);
box-shadow: 0 -16px 38px rgba(0, 0, 0, .24);
color: #fff;
overflow: hidden;
}
.ss-mini-player.is-visible {
display: grid;
}
.ss-mini-player__progress {
position: absolute;
top: 0;
left: 0;
right: 0;
display: block;
height: 12px;
pointer-events: auto;
z-index: 6;
}
.ss-mini-player__seek {
display: block;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
margin: 4px 0 0;
border-radius: 0;
background: rgba(255, 255, 255, .18);
outline: 0;
cursor: pointer;
transition: height .18s ease, box-shadow .18s ease;
}
.ss-mini-player__seek::-webkit-slider-runnable-track {
height: 4px;
background: transparent;
}
.ss-mini-player__seek::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
margin-top: -6px;
border: 0;
border-radius: 999px;
background: #fbcb07;
box-shadow: 0 2px 8px rgba(251, 203, 7, .24);
transition: transform .18s ease, width .18s ease, height .18s ease, margin-top .18s ease;
}
.ss-mini-player__seek::-moz-range-track {
height: 4px;
border: 0;
background: transparent;
}
.ss-mini-player__seek::-moz-range-thumb {
width: 16px;
height: 16px;
border: 0;
border-radius: 999px;
background: #fbcb07;
box-shadow: 0 2px 8px rgba(251, 203, 7, .24);
transition: transform .18s ease, width .18s ease, height .18s ease;
}
.ss-mini-player__seek:hover,
.ss-mini-player__seek:focus-visible,
.ss-mini-player__seek:active,
.ss-mini-player.is-seeking .ss-mini-player__seek {
height: 6px;
box-shadow: 0 0 0 6px rgba(251, 203, 7, .07);
}
.ss-mini-player__seek:hover::-webkit-slider-thumb,
.ss-mini-player__seek:focus-visible::-webkit-slider-thumb,
.ss-mini-player__seek:active::-webkit-slider-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-webkit-slider-thumb {
width: 20px;
height: 20px;
margin-top: -8px;
}
.ss-mini-player__seek:hover::-moz-range-thumb,
.ss-mini-player__seek:focus-visible::-moz-range-thumb,
.ss-mini-player__seek:active::-moz-range-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-moz-range-thumb {
width: 20px;
height: 20px;
}
.ss-mini-player__media {
grid-column: 1;
justify-self: start;
width: 100%;
max-width: 440px;
gap: 16px;
}
.ss-mini-player__cover {
flex: 0 0 88px;
width: 88px;
height: 88px;
border-radius: 0;
align-self: center;
}
.ss-mini-player__meta {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
min-width: 0;
direction: ltr;
text-align: left;
}
.ss-mini-player__title {
font-size: clamp(16px, 2.7vw, 18px);
line-height: 1.08;
color: #fff;
direction: ltr;
text-align: left;
}
.ss-mini-player__artist {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: rgba(255, 255, 255, .72);
font-size: clamp(15px, 1.9vw, 18px);
font-weight: 500;
direction: ltr;
text-align: left;
}
.ss-mini-player__controls {
gap: clamp(10px, 1.6vw, 20px);
margin-left: 0;
}
.ss-mini-player__controls--transport {
grid-column: 2;
justify-self: center;
justify-content: center;
min-width: 320px;
}
.ss-mini-player__controls--actions {
display: flex;
grid-column: 3;
justify-self: end;
justify-content: flex-end;
gap: clamp(10px, 1.3vw, 18px);
min-width: 170px;
}
.ss-mini-player__shuffle,
.ss-mini-player__repeat,
.ss-mini-player__add,
.ss-mini-player__download-wrap,
.ss-mini-player__volume-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ss-mini-player__download-wrap,
.ss-mini-player__volume-wrap {
position: relative;
}
.ss-mini-player__download-wrap.is-disabled {
opacity: .35;
pointer-events: none;
}
.ss-mini-player__download-wrap.is-open .ss-mini-player__download-trigger,
.ss-mini-player__volume-wrap.is-open .ss-mini-player__volume-trigger {
color: var(--ss-accent);
background: rgba(255, 255, 255, .08);
}
.ss-mini-player__download-menu {
position: absolute;
right: 0;
bottom: calc(100% + 10px);
display: grid;
gap: 8px;
min-width: 150px;
padding: 10px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
background: rgba(18, 18, 18, .98);
box-shadow: 0 18px 40px rgba(0, 0, 0, .36);
}
.ss-mini-player__download-item {
display: block;
padding: 9px 12px;
border-radius: 12px;
color: rgba(255, 255, 255, .84);
font-size: 13px;
font-weight: 600;
text-decoration: none !important;
transition: background-color .2s ease, color .2s ease;
}
.ss-mini-player__download-item:hover,
.ss-mini-player__download-item:focus-visible,
.ss-mini-player__download-item.is-current {
background: rgba(251, 203, 7, .12);
color: #fbcb07;
}
.ss-mini-player__volume-popover {
position: absolute;
right: 0;
bottom: calc(100% + 10px);
width: 138px;
padding: 12px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 18px;
background: rgba(18, 18, 18, .96);
box-shadow: 0 16px 36px rgba(0, 0, 0, .32);
}
.ss-mini-player__volume-head,
.ss-mini-player__volume-percent {
color: rgba(255, 255, 255, .72);
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.ss-mini-player__volume-percent {
margin-top: 8px;
text-align: center;
}
.ss-mini-player__volume-wrap.is-unsupported .ss-mini-player__volume-head {
letter-spacing: normal;
text-transform: none;
}
.ss-mini-player__volume-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
margin-top: 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .16);
outline: 0;
}
.ss-mini-player__volume-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 0;
border-radius: 999px;
background: #fff0a5;
box-shadow: 0 4px 14px rgba(251, 203, 7, .28);
}
.ss-mini-player__volume-range::-moz-range-track {
height: 6px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .16);
}
.ss-mini-player__volume-range::-moz-range-thumb {
width: 16px;
height: 16px;
border: 0;
border-radius: 999px;
background: #fff0a5;
box-shadow: 0 4px 14px rgba(251, 203, 7, .28);
}
.ss-mini-player__button {
width: 54px;
height: 54px;
background: transparent;
color: #fff;
}
.ss-mini-player__button i {
font-size: 30px;
}
.ss-mini-player__toggle {
width: 78px;
height: 78px;
background: #fff;
color: #111;
box-shadow: 0 10px 26px rgba(255, 255, 255, .08);
}
.ss-mini-player__toggle i {
font-size: 34px;
line-height: 44px;
padding-left: 5px;
}
.ss-mini-player__button:hover,
.ss-mini-player__button:focus-visible {
background: transparent;
color: #fbcb07;
}
.ss-mini-player__toggle:hover,
.ss-mini-player__toggle:focus-visible {
background: #fbcb07;
color: #242424;
}
.ss-mini-player__toggle.is-loading::after {
width: 22px;
height: 22px;
margin: -11px 0 0 -11px;
}
body.ss-mini-visible {
padding-bottom: 126px;
}
}
@media (min-width: 840px) and (max-width: 1079.98px) {
.ss-mini-player {
min-height: 100px;
padding: 16px 18px 14px;
grid-template-columns: minmax(250px, 1fr) auto minmax(150px, 1fr);
column-gap: 14px;
}
.ss-mini-player__media {
max-width: 360px;
gap: 14px;
}
.ss-mini-player__cover {
flex-basis: 74px;
width: 74px;
height: 74px;
}
.ss-mini-player__title {
font-size: clamp(14px, 2.15vw, 18px);
}
.ss-mini-player__artist {
font-size: clamp(14px, 1.35vw, 16px);
}
.ss-mini-player__controls {
gap: 10px;
}
.ss-mini-player__controls--transport {
min-width: 270px;
}
.ss-mini-player__controls--actions {
min-width: 150px;
gap: 10px;
}
.ss-mini-player__button {
width: 44px;
height: 44px;
}
.ss-mini-player__button i {
font-size: 24px;
}
.ss-mini-player__toggle {
width: 64px;
height: 64px;
}
.ss-mini-player__toggle i {
font-size: 29px;
}
body.ss-mini-visible {
padding-bottom: 114px;
}
}
@media (min-width: 760px) and (max-width: 839.98px) {
.ss-mini-player {
padding: 16px 16px 14px;
grid-template-columns: minmax(220px, 1fr) auto minmax(138px, 1fr);
column-gap: 10px;
}
.ss-mini-player__media {
max-width: 320px;
gap: 12px;
}
.ss-mini-player__cover {
flex-basis: 72px;
width: 72px;
height: 72px;
}
.ss-mini-player__title {
font-size: clamp(14px, 3vw, 18px);
}
.ss-mini-player__artist {
font-size: 15px;
}
.ss-mini-player__button {
width: 42px;
height: 42px;
}
.ss-mini-player__button i {
font-size: 23px;
}
.ss-mini-player__toggle {
width: 62px;
height: 62px;
}
.ss-mini-player__toggle i {
font-size: 28px;
}
.ss-mini-player__controls--transport {
min-width: 236px;
gap: 8px;
justify-content: center;
}
.ss-mini-player__controls--actions {
min-width: 138px;
gap: 8px;
}
body.ss-mini-visible {
padding-bottom: 112px;
}
}
@media (max-width: 760px) and (max-height: 820px) {
.ss-full-player__sheet {
right: 0;
left: 0;
box-sizing: border-box;
width: auto;
min-height: 100vh;
min-height: 100dvh;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.ss-full-player__cover-wrap {
width: min(100%, clamp(220px, 48vh, 360px));
}
}
.rtl .ss-mini-player__meta,
body.rtl .ss-mini-player__meta {
direction: rtl;
text-align: right;
}
@media (min-width: 760px) {
.ss-mini-player {
grid-template-columns: minmax(260px, 1.18fr) auto minmax(170px, .86fr);
column-gap: clamp(16px, 1.4vw, 30px);
row-gap: 7px;
min-height: clamp(84px, 5.8vw, 108px);
padding: clamp(12px, 1vw, 17px) clamp(14px, 1.2vw, 24px) clamp(9px, .8vw, 13px);
overflow: visible;
align-items: center;
}
.ss-mini-player__progress {
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 9;
height: 12px;
transform: translateY(0);
overflow: visible;
pointer-events: auto;
}
.ss-mini-player__seek {
height: 4px;
margin: 0;
position: relative;
z-index: 1;
pointer-events: auto;
}
.ss-mini-player__seek::-webkit-slider-runnable-track,
.ss-mini-player__seek::-moz-range-track {
height: 4px;
}
.ss-mini-player__seek::-webkit-slider-thumb {
width: 18px;
height: 18px;
margin-top: -7px;
box-shadow: 0 4px 12px rgba(251, 203, 7, .3);
}
.ss-mini-player__seek::-moz-range-thumb {
width: 18px;
height: 18px;
box-shadow: 0 4px 12px rgba(251, 203, 7, .3);
}
.ss-mini-player__seek:hover,
.ss-mini-player__seek:focus-visible,
.ss-mini-player__seek:active,
.ss-mini-player.is-seeking .ss-mini-player__seek {
height: 6px;
box-shadow: 0 0 0 5px rgba(251, 203, 7, .08);
}
.ss-mini-player__seek:hover::-webkit-slider-thumb,
.ss-mini-player__seek:focus-visible::-webkit-slider-thumb,
.ss-mini-player__seek:active::-webkit-slider-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-webkit-slider-thumb {
width: 20px;
height: 20px;
margin-top: -8px;
}
.ss-mini-player__seek:hover::-moz-range-thumb,
.ss-mini-player__seek:focus-visible::-moz-range-thumb,
.ss-mini-player__seek:active::-moz-range-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-moz-range-thumb {
width: 20px;
height: 20px;
}
.ss-mini-player__media {
max-width: clamp(300px, 28vw, 520px);
gap: clamp(8px, .8vw, 12px);
min-width: 0;
align-items: center;
}
.ss-mini-player__cover {
flex-basis: clamp(56px, 4.3vw, 74px);
width: clamp(56px, 4.3vw, 74px);
height: clamp(56px, 4.3vw, 74px);
}
.ss-mini-player__title {
font-size: clamp(13px, .92vw, 16px);
}
.ss-mini-player__artist {
font-size: clamp(11px, .72vw, 14px);
}
.ss-mini-player__controls,
.ss-mini-player__controls--actions {
gap: clamp(5px, .58vw, 11px);
align-items: center;
}
.ss-mini-player__controls--transport {
min-width: clamp(236px, 22vw, 420px);
justify-self: center;
}
.ss-mini-player__controls--actions {
min-width: clamp(148px, 13vw, 240px);
overflow: visible;
justify-self: end;
}
.ss-mini-player__download-wrap,
.ss-mini-player__volume-wrap {
position: relative;
z-index: 8;
overflow: visible;
}
.ss-mini-player__button {
width: clamp(34px, 2.25vw, 44px);
height: clamp(34px, 2.25vw, 44px);
min-width: clamp(34px, 2.25vw, 44px);
min-height: clamp(34px, 2.25vw, 44px);
overflow: visible;
position: relative;
z-index: 1;
}
.ss-mini-player__button i {
display: block;
font-size: clamp(17px, 1.08vw, 23px);
line-height: 1;
position: relative;
z-index: 2;
}
.ss-mini-player__toggle {
width: clamp(50px, 3.55vw, 60px);
height: clamp(50px, 3.55vw, 60px);
}
.ss-mini-player__toggle i {
font-size: clamp(21px, 1.45vw, 26px);
line-height: 1;
padding-left: 2px;
}
body.ss-mini-visible {
padding-bottom: clamp(94px, 6.5vw, 112px);
}
}
@media (min-width: 760px) and (max-width: 919.98px) {
.ss-mini-player {
grid-template-columns: minmax(220px, 1fr) auto minmax(138px, .72fr);
column-gap: 10px;
}
.ss-mini-player__controls--transport {
min-width: 220px;
}
.ss-mini-player__controls--actions {
min-width: 132px;
}
}
@media (min-width: 760px) {
.ss-mini-player__controls--transport .ss-mini-player__button:not(.ss-mini-player__toggle),
.ss-mini-player__controls--actions .ss-mini-player__button,
.ss-mini-player__download-trigger,
.ss-mini-player__volume-trigger,
.ss-mini-player__queue-trigger {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 0;
color: #fff;
}
.ss-mini-player__repeat {
color: rgba(255, 255, 255, .72);
}
.ss-mini-player__repeat.is-repeat-all,
.ss-mini-player__repeat.is-repeat-all i {
color: rgba(255, 255, 255, .72);
}
.ss-mini-player__toggle,
.ss-mini-player__toggle:hover,
.ss-mini-player__toggle:focus-visible {
color: #111;
}
}
@media (min-width: 1440px) {
.ss-mini-player {
grid-template-columns: minmax(320px, 1.1fr) auto minmax(210px, .82fr);
}
}
@media (min-width: 760px) {
body.ss-full-player-open .ss-desktop-rail {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
body.ss-full-player-open .ss-full-player {
right: 0;
width: auto;
}
}
@media (min-width: 760px) {
body.ss-full-player-open .ss-full-player.is-sheet-motion .ss-full-player__sheet,
.ss-full-player.is-sheet-motion .ss-full-player__sheet {
top: 0;
right: 0;
left: 0;
box-sizing: border-box;
width: auto;
max-width: none;
min-height: 100vh;
min-height: 100dvh;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
border-radius: 0;
box-shadow: none;
animation: none !important;
transform: translate3d(0, var(--ss-full-sheet-y, 0px), 0);
overflow: hidden;
}
}
@media (max-width: 520px) {
.ss-full-player__sheet {
--ss-full-sheet-pad-left: max(16px, env(safe-area-inset-left));
--ss-full-sheet-pad-right: max(16px, env(safe-area-inset-right));
right: 0;
width: 100%;
max-width: 100%;
min-height: 100vh;
min-height: 100dvh;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
border-radius: 0;
overflow: hidden;
padding:
max(12px, env(safe-area-inset-top))
var(--ss-full-sheet-pad-right)
calc(18px + env(safe-area-inset-bottom))
var(--ss-full-sheet-pad-left);
}
.ss-full-player__top {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px;
align-items: center;
gap: 0;
min-height: 44px;
margin-bottom: clamp(16px, 2.75vh, 26px);
}
.ss-full-player__source {
grid-column: 2;
justify-content: center;
gap: 0;
min-width: 0;
width: 100%;
}
.ss-full-player__more-wrap {
grid-column: 1;
grid-row: 1;
justify-self: start;
}
.ss-full-player__more-trigger,
.ss-full-player__close {
width: var(--ss-portrait-header-button-size);
height: var(--ss-portrait-header-button-size);
line-height: var(--ss-portrait-header-button-size);
color: var(--ss-player-on-theme, #fff);
background: transparent;
}
.ss-full-player__close {
grid-column: 3;
grid-row: 1;
justify-self: end;
}
.ss-full-player__more-trigger i,
.ss-full-player__close i {
color: inherit;
font-size: var(--ss-portrait-header-icon-size);
line-height: 1;
}
.ss-full-player__source-title {
display: block;
width: 100%;
max-width: 100%;
color: var(--ss-player-on-theme, #fff);
font-size: var(--ss-portrait-source-size);
font-weight: 700;
line-height: 1.24;
text-align: center;
justify-self: center;
}
.ss-full-player__cover-wrap {
width: min(83vw, 43vh, 344px);
width: min(83vw, 43dvh, 344px);
margin: 0 auto clamp(16px, 2.85vh, 26px);
}
.ss-full-player__cover {
border-radius: 4px;
background: none;
box-shadow: none;
}
.ss-full-player__track {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 12px;
width: 100%;
margin-bottom: clamp(24px, 3.45vh, 32px);
text-align: left !important;
}
.ss-full-player__track-meta {
min-width: 0;
}
.ss-full-player__track-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.ss-full-player__track-actions .ss-full-player__icon-button {
width: var(--ss-portrait-action-size);
height: var(--ss-portrait-action-size);
line-height: 1;
color: var(--ss-player-on-theme, #fff);
}
.ss-full-player__track-actions .ss-full-player__icon-button i {
color: inherit;
font-size: var(--ss-portrait-action-icon-size);
line-height: 1;
}
.ss-full-player__track-title {
display: block;
position: relative;
max-height: none;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
color: var(--ss-player-on-theme, #fff);
font-size: var(--ss-portrait-title-size);
font-weight: 800;
line-height: 1.13;
text-align: left;
}
.ss-full-player__track-artist {
margin-top: 7px;
color: var(--ss-player-on-theme-muted, rgba(255, 255, 255, .72));
font-size: var(--ss-portrait-artist-size);
font-weight: 700;
line-height: 1.24;
text-align: left;
}
.ss-full-player__queue-mobile {
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.ss-full-player__timeline-row {
display: block;
width: 100%;
row-gap: 6px;
margin-bottom: clamp(22px, 3.35vh, 30px);
}
.ss-full-player__timeline {
display: block;
width: 100%;
min-width: 0;
}
.ss-full-player__seek-wrap {
height: 18px;
align-items: center;
}
.ss-full-player__seek {
height: 3px;
background: var(--ss-seek-rest, rgba(255, 255, 255, .18));
}
.ss-full-player__seek:hover,
.ss-full-player__seek:focus-visible,
.ss-full-player__seek:active,
.ss-full-player.is-seeking .ss-full-player__seek {
height: 3px;
transform: none;
box-shadow: none;
}
.ss-full-player__seek::-webkit-slider-thumb {
width: 14px;
height: 14px;
margin-top: -5.5px;
}
.ss-full-player__seek::-moz-range-thumb {
width: 14px;
height: 14px;
}
.ss-full-player__time {
margin-top: 3px;
width: 100%;
justify-content: space-between;
padding-top: 0;
color: var(--ss-player-on-theme, #fff);
font-size: 12px;
font-weight: 700;
line-height: 1.2;
}
.ss-full-player__controls {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: center;
gap: 0;
width: calc(100% + var(--ss-full-sheet-pad-left) + var(--ss-full-sheet-pad-right));
margin-left: calc(var(--ss-full-sheet-pad-left) * -1);
margin-right: calc(var(--ss-full-sheet-pad-right) * -1);
margin-bottom: clamp(26px, 4.05vh, 36px);
}
.ss-full-player__shuffle {
grid-column: 1;
justify-self: center;
}
.ss-full-player__prev {
grid-column: 2;
justify-self: center;
}
.ss-full-player__toggle {
grid-column: 3;
justify-self: center;
margin: 0;
}
.ss-full-player__next {
grid-column: 4;
justify-self: center;
}
.ss-full-player__repeat {
grid-column: 5;
justify-self: center;
}
.ss-full-player__control {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--ss-portrait-control-size);
height: var(--ss-portrait-control-size);
}
.ss-full-player__control i {
display: block;
color: inherit;
font-size: var(--ss-portrait-control-icon-size);
line-height: 1;
transform: none;
}
.ss-full-player__prev i,
.ss-full-player__next i {
font-weight: 900;
}
.ss-full-player__toggle {
width: var(--ss-portrait-play-size);
height: var(--ss-portrait-play-size);
}
.ss-full-player__toggle i {
color: var(--ss-player-control-on-strong, #252525);
font-size: var(--ss-portrait-play-icon-size);
font-weight: 900;
transform: none;
}
.ss-full-player__footer {
grid-template-columns: var(--ss-portrait-footer-slot-size) minmax(0, 1fr) var(--ss-portrait-footer-slot-size);
grid-template-areas: "timer quality queue";
align-items: center;
gap: 8px;
margin-top: 0;
padding-top: 0;
}
.ss-full-player__footer-side--start {
grid-area: timer;
justify-content: start;
}
.ss-full-player__footer-center {
display: contents;
}
.ss-full-player__footer-side--end {
display: none;
}
.ss-full-player__footer-action {
width: var(--ss-portrait-footer-slot-size);
height: var(--ss-portrait-footer-slot-size);
color: var(--ss-player-on-theme, #fff);
}
.ss-full-player__footer-action i {
color: inherit;
font-size: var(--ss-portrait-footer-icon-size);
line-height: 1;
}
body .ss-full-player__footer-center .ss-full-player__queue-toggle {
grid-area: queue;
display: inline-flex !important;
justify-self: end;
width: var(--ss-portrait-footer-slot-size);
max-width: var(--ss-portrait-footer-slot-size);
height: var(--ss-portrait-footer-slot-size);
padding: 0;
font-size: 0;
color: var(--ss-player-on-theme, #fff);
}
body .ss-full-player__queue-handle {
display: none !important;
}
body .ss-full-player__volume-wrap {
display: none !important;
}
.ss-full-player__quality {
grid-area: quality;
justify-self: center;
width: auto;
max-width: var(--ss-portrait-audio-pill-max);
min-height: 38px;
padding: 0 13px;
font-size: 12px;
border-radius: 999px;
background: transparent;
color: var(--ss-player-on-theme, #fff);
}
.ss-full-player__queue-label,
.ss-full-player__queue-badge {
display: none !important;
}
.ss-full-player__quality-label {
max-width: var(--ss-portrait-audio-label-max);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ss-full-player__quality i,
body .ss-full-player__footer-center .ss-full-player__queue-toggle i {
color: inherit;
font-size: var(--ss-portrait-audio-icon-size);
line-height: 1;
}
.ss-full-player__queue {
padding: 12px;
border-radius: 18px;
}
.ss-full-player__queue-head {
align-items: flex-start;
flex-direction: column;
gap: 6px;
}
.ss-full-player__queue-tools {
width: 100%;
justify-content: space-between;
}
.ss-full-player__queue-item {
grid-template-columns: 38px minmax(0, 1fr) 56px;
padding: 9px 10px;
}
.ss-full-player__queue-play {
width: 38px;
height: 38px;
}
.ss-full-player__queue-actions {
grid-template-columns: repeat(2, 24px);
gap: 4px;
}
.ss-full-player__queue-move {
width: 24px;
height: 24px;
}
}
.rtl .ss-full-player__source,
body.rtl .ss-full-player__source {
direction: ltr;
justify-content: center;
text-align: center;
}
.rtl .ss-full-player__track,
body.rtl .ss-full-player__track {
direction: ltr;
text-align: left;
}
.rtl .ss-full-player__source-title,
body.rtl .ss-full-player__source-title {
text-align: center;
}
.ss-full-player__source-title {
color: var(--ss-player-on-theme, #fff);
}
.rtl .ss-full-player__time,
body.rtl .ss-full-player__time {
direction: ltr;
}
@media (max-width: 520px) {
.rtl .ss-full-player__source,
body.rtl .ss-full-player__source {
justify-content: center;
text-align: center;
}
.rtl .ss-full-player__source-title,
body.rtl .ss-full-player__source-title {
text-align: center;
}
.rtl .ss-full-player__track,
body.rtl .ss-full-player__track {
direction: ltr;
text-align: left !important;
}
}
@media (max-width: 759.98px) {
.ss-full-player__sheet {
--ss-full-player-stage: min(100%, clamp(328px, 92vw, 420px));
--ss-full-sheet-pad-left: max(16px, env(safe-area-inset-left));
--ss-full-sheet-pad-right: max(16px, env(safe-area-inset-right));
top: 0;
right: 0;
bottom: auto;
left: 0;
box-sizing: border-box;
width: auto;
max-width: none;
min-height: 100vh;
min-height: 100dvh;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
align-items: center;
padding:
max(12px, env(safe-area-inset-top))
var(--ss-full-sheet-pad-right)
calc(18px + env(safe-area-inset-bottom))
var(--ss-full-sheet-pad-left);
border-radius: 0;
box-shadow: none;
transform: translate3d(0, 100%, 0);
overflow: hidden;
}
.ss-full-player.is-visible .ss-full-player__sheet {
animation: ssFullPlayerMobileIn .34s cubic-bezier(.22, 1, .36, 1) forwards;
}
.ss-full-player.is-closing .ss-full-player__sheet {
animation: ssFullPlayerMobileOut .34s cubic-bezier(.4, 0, .2, 1) forwards;
}
.ss-full-player.is-sheet-motion .ss-full-player__sheet {
animation: none !important;
transform: translate3d(0, var(--ss-full-sheet-y, 0px), 0);
}
.ss-full-player.is-sheet-motion.is-closing .ss-full-player__sheet,
.ss-full-player.is-sheet-motion.is-visible .ss-full-player__sheet {
animation: none !important;
}
@keyframes ssFullPlayerMobileIn {
from {
transform: translate3d(0, 100%, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes ssFullPlayerMobileOut {
from {
opacity: 1;
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 100%, 0);
}
}
.ss-full-player__top,
.ss-full-player__track,
.ss-full-player__timeline-row,
.ss-full-player__controls,
.ss-full-player__footer {
width: var(--ss-full-player-stage);
max-width: var(--ss-full-player-stage);
margin-right: auto;
margin-left: auto;
}
.ss-full-player__controls {
display: flex;
align-items: center;
justify-content: space-between;
}
.ss-full-player__top {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px;
align-items: center;
min-height: 44px;
margin-bottom: clamp(28px, 7dvh, 56px);
}
.ss-full-player__source {
grid-column: 2;
justify-content: center;
width: 100%;
text-align: center;
}
.ss-full-player__source-title {
width: 100%;
max-width: 100%;
font-size: 15px;
font-weight: 700;
line-height: 1.24;
text-align: center;
}
.ss-full-player__more-wrap {
grid-column: 1;
grid-row: 1;
justify-self: start;
}
.ss-full-player__close {
grid-column: 3;
grid-row: 1;
justify-self: end;
}
.ss-full-player__more-wrap,
.ss-full-player__close {
align-self: center;
}
.ss-full-player__more-trigger,
.ss-full-player__close {
width: 40px;
height: 40px;
line-height: 40px;
}
.ss-full-player__source-title {
width: 100%;
max-width: 100%;
font-size: 15px;
font-weight: 700;
line-height: 1.24;
text-align: center;
}
.ss-full-player__cover-wrap {
width: min(var(--ss-full-player-stage), 86vw, 46dvh, 420px);
max-width: min(var(--ss-full-player-stage), 86vw, 46dvh, 420px);
margin: 0 auto clamp(28px, 6.5dvh, 52px);
}
.ss-full-player__cover {
border-radius: 4px;
background-color: transparent;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
box-shadow: none;
}
.ss-full-player__track {
margin-bottom: clamp(12px, 2dvh, 18px);
}
.ss-full-player__timeline-row {
margin-bottom: clamp(18px, 3dvh, 26px);
}
.ss-full-player__controls {
margin-bottom: 0;
}
.ss-full-player__footer {
margin-top: auto;
padding-top: clamp(12px, 2.2dvh, 20px);
}
}
@media (min-width: 460px) and (max-width: 759.98px) {
.ss-full-player__top {
margin-bottom: clamp(34px, 5.3dvh, 44px);
}
.ss-full-player__cover-wrap {
width: min(var(--ss-full-player-stage), 88vw, 50dvh, 430px);
max-width: min(var(--ss-full-player-stage), 88vw, 50dvh, 430px);
margin-bottom: clamp(34px, 5.1dvh, 42px);
}
.ss-full-player__track {
margin-bottom: clamp(24px, 3.2dvh, 30px);
}
.ss-full-player__timeline-row {
margin-bottom: clamp(20px, 2.8dvh, 25px);
}
.ss-full-player__footer {
padding-top: clamp(12px, 1.8dvh, 16px);
}
}
@media (max-width: 374.98px) {
.ss-full-player__sheet {
--ss-full-player-stage: min(100%, calc(100vw - 28px));
padding-right: max(14px, env(safe-area-inset-right));
padding-left: max(14px, env(safe-area-inset-left));
}
.ss-full-player__cover-wrap {
width: min(var(--ss-full-player-stage), 84vw, 43dvh);
max-width: min(var(--ss-full-player-stage), 84vw, 43dvh);
}
.ss-full-player__track-actions .ss-full-player__icon-button,
.ss-full-player__footer-action {
width: 42px;
height: 42px;
line-height: 42px;
}
.ss-full-player__control {
width: 44px;
height: 44px;
}
.ss-full-player__toggle {
width: 66px;
height: 66px;
}
}
@media (max-width: 480.98px) {
.ss-full-player__sheet {
--ss-full-player-stage: min(100%, 420px);
--ss-full-cover-size: min(var(--ss-full-player-stage), clamp(300px, 88vw, 390px), max(280px, calc(100dvh - 438px)));
--ss-full-controls-row: clamp(66px, 18.5vw, 72px);
display: grid;
grid-template-rows:
44px
var(--ss-full-cover-size)
auto
auto
var(--ss-full-controls-row)
auto;
align-content: space-between;
align-items: center;
justify-content: center;
justify-items: center;
row-gap: 0;
}
.ss-full-player__top,
.ss-full-player__track,
.ss-full-player__timeline-row,
.ss-full-player__controls,
.ss-full-player__footer {
width: var(--ss-full-player-stage);
max-width: var(--ss-full-player-stage);
margin: 0 auto;
}
.ss-full-player__top {
grid-row: 1;
min-height: 44px;
margin-bottom: 0;
}
.ss-full-player__cover-wrap {
grid-row: 2;
width: var(--ss-full-cover-size);
max-width: var(--ss-full-cover-size);
height: var(--ss-full-cover-size);
margin: 0 auto;
align-self: center;
}
.ss-full-player__cover {
width: 100%;
height: 100%;
}
.ss-full-player__track {
grid-row: 3;
align-items: center;
margin-bottom: 0;
}
.ss-full-player__source-title {
color: var(--ss-player-on-theme, #fff);
}
.ss-full-player__more-trigger,
.ss-full-player__close,
.ss-full-player__track-actions .ss-full-player__icon-button,
.ss-full-player__control,
.ss-full-player__repeat.is-repeat-all,
.ss-full-player__repeat.is-repeat-none,
.ss-full-player__footer-action,
body .ss-full-player__footer-center .ss-full-player__queue-toggle,
.ss-full-player__quality,
.ss-full-player__quality i {
color: var(--ss-player-on-theme, #fff);
}
.ss-full-player__more-trigger i,
.ss-full-player__close i,
.ss-full-player__track-actions .ss-full-player__icon-button i,
.ss-full-player__control i,
.ss-full-player__repeat.is-repeat-all i,
.ss-full-player__repeat.is-repeat-none i,
.ss-full-player__footer-action i,
body .ss-full-player__footer-center .ss-full-player__queue-toggle i,
.ss-full-player__quality i {
color: inherit;
}
.ss-full-player__more-trigger:hover,
.ss-full-player__more-trigger:focus-visible,
.ss-full-player__close:hover,
.ss-full-player__close:focus-visible,
.ss-full-player__track-actions .ss-full-player__icon-button:hover,
.ss-full-player__track-actions .ss-full-player__icon-button:focus-visible,
.ss-full-player__footer-action:hover,
.ss-full-player__footer-action:focus-visible,
button.ss-full-player__meta-item:hover,
button.ss-full-player__meta-item:focus-visible,
body .ss-full-player__footer-center .ss-full-player__queue-toggle:hover,
body .ss-full-player__footer-center .ss-full-player__queue-toggle:focus-visible {
background: transparent !important;
transform: none;
}
.ss-full-player__control:hover,
.ss-full-player__control:focus-visible {
transform: none;
}
.ss-full-player__track-actions {
align-self: center;
gap: 8px;
transform: none;
flex-wrap: nowrap;
justify-self: end;
}
.ss-full-player__track-actions .ss-full-player__icon-button,
.ss-full-player__track-actions .ss-full-player__add,
.ss-full-player__track-actions .ss-full-player__download-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
line-height: 1;
}
.ss-full-player__track-actions .ss-full-player__icon-button i,
.ss-full-player__track-actions .ss-full-player__add i,
.ss-full-player__track-actions .ss-full-player__download-trigger i {
font-size: 30px;
line-height: 1;
}
.ss-full-player__track-title {
font-size: clamp(21px, 5.9vw, 28px);
line-height: 1.13;
}
.ss-full-player__track-artist {
font-size: clamp(15px, 4.05vw, 18px);
line-height: 1.24;
}
.ss-full-player__timeline-row {
grid-row: 4;
margin-bottom: 0;
}
.ss-full-player__time,
.ss-full-player__time-current,
.ss-full-player__time-duration {
color: var(--ss-player-on-theme, #fff);
font-weight: 700;
}
.ss-full-player__controls {
grid-row: 5;
height: var(--ss-full-controls-row);
margin-bottom: 0;
}
.ss-full-player__prev,
.ss-full-player__next {
width: 50px;
height: 50px;
}
.ss-full-player__prev i,
.ss-full-player__next i {
font-size: 30px;
font-weight: 900;
line-height: 1;
}
.ss-full-player__shuffle i,
.ss-full-player__repeat i,
.ss-full-player__more-trigger i,
.ss-full-player__close i,
.ss-full-player__footer-action i,
body .ss-full-player__footer-center .ss-full-player__queue-toggle i {
font-size: 23px;
line-height: 1;
}
.ss-full-player__toggle,
.ss-full-player__toggle:hover,
.ss-full-player__toggle:focus-visible,
.ss-full-player__toggle.is-playing {
color: var(--ss-player-control-on-strong, #252525);
}
.ss-full-player__toggle i {
color: var(--ss-player-control-on-strong, #252525);
}
.ss-full-player__seek,
.ss-full-player__seek:hover,
.ss-full-player__seek:focus-visible,
.ss-full-player__seek:active,
.ss-full-player.is-seeking .ss-full-player__seek {
height: 3px;
transform: none;
box-shadow: none;
transition: background-color .18s ease;
}
.ss-full-player__seek::-webkit-slider-thumb {
width: 14px;
height: 14px;
margin-top: -5.5px !important;
background: var(--ss-player-on-theme, #fff);
box-shadow: 0 2px 10px rgba(0, 0, 0, .20);
transform: scale(.7);
}
.ss-full-player__seek::-moz-range-thumb {
width: 14px;
height: 14px;
background: var(--ss-player-on-theme, #fff);
box-shadow: 0 2px 10px rgba(0, 0, 0, .20);
transform: scale(.7);
}
.ss-full-player__seek:hover::-webkit-slider-thumb,
.ss-full-player__seek:focus-visible::-webkit-slider-thumb,
.ss-full-player__seek:active::-webkit-slider-thumb,
.ss-full-player.is-seeking .ss-full-player__seek::-webkit-slider-thumb,
.ss-full-player__seek:hover::-moz-range-thumb,
.ss-full-player__seek:focus-visible::-moz-range-thumb,
.ss-full-player__seek:active::-moz-range-thumb,
.ss-full-player.is-seeking .ss-full-player__seek::-moz-range-thumb {
opacity: 1;
transform: scale(1);
}
.ss-full-player__footer {
grid-row: 6;
margin-top: 0;
padding-top: 0;
align-self: end;
}
.ss-full-player__footer-action,
body .ss-full-player__footer-center .ss-full-player__queue-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.ss-full-player__quality i {
font-size: 23px;
line-height: 1;
}
}
@media (min-width: 481px) and (max-width: 759.98px) {
.ss-full-player__sheet {
--ss-portrait-header-button-size: 44px;
--ss-portrait-header-icon-size: 24px;
--ss-portrait-source-size: clamp(15px, 2.4vw, 18px);
--ss-portrait-action-size: 52px;
--ss-portrait-action-icon-size: 31px;
--ss-portrait-title-size: clamp(28px, 4vw, 30px);
--ss-portrait-artist-size: clamp(18px, 2.5vw, 19px);
--ss-portrait-control-size: 48px;
--ss-portrait-control-icon-size: 24px;
--ss-portrait-step-size: 54px;
--ss-portrait-step-icon-size: 32px;
--ss-portrait-play-size: 76px;
--ss-portrait-play-icon-size: 31px;
--ss-portrait-footer-slot-size: 44px;
--ss-portrait-footer-icon-size: 24px;
--ss-portrait-audio-icon-size: 24px;
--ss-full-player-stage: min(calc(100% - 28px), 700px);
--ss-full-portrait-reserved: clamp(382px, calc(534px - 20vw), 438px);
--ss-full-controls-row: clamp(72px, 11vw, 76px);
display: grid;
grid-template-columns: minmax(0, var(--ss-full-player-stage));
grid-template-rows:
48px
auto
auto
auto
var(--ss-full-controls-row)
auto;
grid-template-areas: none;
align-content: space-between;
align-items: center;
justify-content: center;
justify-items: center;
column-gap: 0;
row-gap: 0;
padding:
max(12px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right))
calc(18px + env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
overflow: hidden;
}
.ss-full-player__queue-handle {
display: none !important;
}
.ss-full-player__top,
.ss-full-player__track,
.ss-full-player__timeline-row,
.ss-full-player__controls,
.ss-full-player__footer {
grid-column: 1;
width: 100%;
max-width: none;
margin: 0 auto;
}
.ss-full-player__top {
grid-row: 1;
display: grid;
grid-template-columns: var(--ss-portrait-header-button-size) minmax(0, 1fr) var(--ss-portrait-header-button-size);
align-items: center;
min-height: 48px;
margin-bottom: 0;
}
.ss-full-player__source {
grid-column: 2;
justify-content: center;
width: 100%;
text-align: center;
}
.ss-full-player__source-title {
width: 100%;
max-width: min(100%, 40ch);
color: var(--ss-player-on-theme, #fff);
font-size: var(--ss-portrait-source-size);
font-weight: 700;
line-height: 1.24;
text-align: center;
}
.ss-full-player__more-wrap {
grid-column: 1;
grid-row: 1;
justify-self: start;
}
.ss-full-player__close {
grid-column: 3;
grid-row: 1;
justify-self: end;
}
.ss-full-player__more-trigger,
.ss-full-player__close {
width: var(--ss-portrait-header-button-size);
height: var(--ss-portrait-header-button-size);
line-height: var(--ss-portrait-header-button-size);
color: var(--ss-player-on-theme, #fff);
background: transparent;
}
.ss-full-player__more-trigger i,
.ss-full-player__close i {
color: inherit;
font-size: var(--ss-portrait-header-icon-size);
line-height: 1;
}
.ss-full-player__cover-wrap {
grid-column: 1;
grid-row: 2;
width: min(100%, 680px, max(260px, calc(100dvh - var(--ss-full-portrait-reserved))));
max-width: min(100%, 680px, max(260px, calc(100dvh - var(--ss-full-portrait-reserved))));
height: auto;
aspect-ratio: 1 / 1;
margin: 0 auto;
align-self: center;
}
.ss-full-player__cover {
width: 100%;
height: 100%;
border-radius: 4px;
background-color: transparent;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
box-shadow: none;
}
.ss-full-player__track {
grid-row: 3;
align-items: center;
margin-bottom: 0;
text-align: left !important;
}
.ss-full-player__track-title {
overflow: hidden;
color: var(--ss-player-on-theme, #fff);
font-size: var(--ss-portrait-title-size);
font-weight: 800;
line-height: 1.13;
text-align: left;
white-space: nowrap;
text-overflow: clip;
}
.ss-full-player__track-artist {
color: var(--ss-player-on-theme-muted, rgba(255, 255, 255, .72));
font-size: var(--ss-portrait-artist-size);
font-weight: 700;
line-height: 1.24;
text-align: left;
}
.ss-full-player__track-actions {
align-self: center;
gap: 8px;
transform: none;
flex-wrap: nowrap;
justify-self: end;
}
.ss-full-player__track-actions .ss-full-player__icon-button,
.ss-full-player__track-actions .ss-full-player__add,
.ss-full-player__track-actions .ss-full-player__download-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--ss-portrait-action-size);
height: var(--ss-portrait-action-size);
line-height: 1;
}
.ss-full-player__track-actions .ss-full-player__icon-button i,
.ss-full-player__track-actions .ss-full-player__add i,
.ss-full-player__track-actions .ss-full-player__download-trigger i {
color: inherit;
font-size: var(--ss-portrait-action-icon-size);
line-height: 1;
}
.ss-full-player__timeline-row {
grid-row: 4;
margin-bottom: 0;
}
.ss-full-player__seek-wrap {
height: 18px;
}
.ss-full-player__time,
.ss-full-player__time-current,
.ss-full-player__time-duration {
color: var(--ss-player-on-theme, #fff);
font-size: 12px;
font-weight: 700;
}
.ss-full-player__controls {
grid-row: 5;
display: flex;
align-items: center;
justify-content: space-between;
height: var(--ss-full-controls-row);
margin-bottom: 0;
}
.ss-full-player__control,
.ss-full-player__control:hover,
.ss-full-player__control:focus-visible {
transform: none;
}
.ss-full-player__shuffle,
.ss-full-player__repeat,
.ss-full-player__repeat.is-repeat-all,
.ss-full-player__repeat.is-repeat-none {
width: var(--ss-portrait-control-size);
height: var(--ss-portrait-control-size);
color: var(--ss-player-on-theme, #fff);
}
.ss-full-player__prev,
.ss-full-player__next {
width: var(--ss-portrait-step-size);
height: var(--ss-portrait-step-size);
color: var(--ss-player-on-theme, #fff);
}
.ss-full-player__toggle {
width: var(--ss-portrait-play-size);
height: var(--ss-portrait-play-size);
color: var(--ss-player-control-on-strong, #252525);
}
.ss-full-player__toggle:hover,
.ss-full-player__toggle:focus-visible,
.ss-full-player__toggle.is-playing {
color: var(--ss-player-control-on-strong, #252525);
}
.ss-full-player__shuffle i,
.ss-full-player__repeat i,
.ss-full-player__repeat.is-repeat-all i,
.ss-full-player__repeat.is-repeat-none i,
.ss-full-player__footer-action i,
body .ss-full-player__footer-center .ss-full-player__queue-toggle i,
.ss-full-player__quality i {
font-size: var(--ss-portrait-control-icon-size);
line-height: 1;
color: inherit;
}
.ss-full-player__prev i,
.ss-full-player__next i {
font-size: var(--ss-portrait-step-icon-size);
font-weight: 900;
line-height: 1;
color: inherit;
}
.ss-full-player__toggle i {
font-size: var(--ss-portrait-play-icon-size);
font-weight: 900;
line-height: 1;
color: var(--ss-player-control-on-strong, #252525);
}
.ss-full-player__seek,
.ss-full-player__seek:hover,
.ss-full-player__seek:focus-visible,
.ss-full-player__seek:active,
.ss-full-player.is-seeking .ss-full-player__seek {
height: 3px;
transform: none;
box-shadow: none;
transition: background-color .18s ease;
}
.ss-full-player__seek::-webkit-slider-thumb {
width: 14px;
height: 14px;
margin-top: -5.5px !important;
background: var(--ss-player-on-theme, #fff);
box-shadow: 0 2px 10px rgba(0, 0, 0, .20);
transform: scale(.7);
}
.ss-full-player__seek::-moz-range-thumb {
width: 14px;
height: 14px;
background: var(--ss-player-on-theme, #fff);
box-shadow: 0 2px 10px rgba(0, 0, 0, .20);
transform: scale(.7);
}
.ss-full-player__seek:hover::-webkit-slider-thumb,
.ss-full-player__seek:focus-visible::-webkit-slider-thumb,
.ss-full-player__seek:active::-webkit-slider-thumb,
.ss-full-player.is-seeking .ss-full-player__seek::-webkit-slider-thumb,
.ss-full-player__seek:hover::-moz-range-thumb,
.ss-full-player__seek:focus-visible::-moz-range-thumb,
.ss-full-player__seek:active::-moz-range-thumb,
.ss-full-player.is-seeking .ss-full-player__seek::-moz-range-thumb {
opacity: 1;
transform: scale(1);
}
.ss-full-player__footer {
grid-row: 6;
display: grid;
grid-template-columns: var(--ss-portrait-footer-slot-size) minmax(0, 1fr) var(--ss-portrait-footer-slot-size);
grid-template-areas: "timer quality queue";
align-items: center;
margin-top: 0;
padding-top: 0;
align-self: end;
}
.ss-full-player__footer-action,
body .ss-full-player__footer-center .ss-full-player__queue-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: var(--ss-portrait-footer-slot-size);
max-width: var(--ss-portrait-footer-slot-size);
height: var(--ss-portrait-footer-slot-size);
color: var(--ss-player-on-theme, #fff);
background: transparent !important;
transform: none;
}
.ss-full-player__quality,
.ss-full-player__quality i {
color: var(--ss-player-on-theme, #fff);
}
.ss-full-player__quality {
min-height: 44px;
font-size: 13px;
font-weight: 600;
}
.ss-full-player__footer-action i,
body .ss-full-player__footer-center .ss-full-player__queue-toggle i,
.ss-full-player__quality i {
font-size: var(--ss-portrait-footer-icon-size);
}
}
@media (min-width: 760px) and (max-width: 1023.98px) {
body.ss-full-player-open .ss-full-player__sheet,
body.ss-full-player-open .ss-full-player.is-sheet-motion .ss-full-player__sheet,
body.ss-full-player-open .ss-full-player.is-visible .ss-full-player__sheet,
.ss-full-player.is-sheet-motion .ss-full-player__sheet,
.ss-full-player.is-visible .ss-full-player__sheet,
.ss-full-player__sheet {
--ss-portrait-header-button-size: 44px;
--ss-portrait-header-icon-size: 24px;
--ss-portrait-source-size: 18px;
--ss-portrait-action-size: 52px;
--ss-portrait-action-icon-size: 31px;
--ss-portrait-title-size: clamp(30px, 3.2vw, 32px);
--ss-portrait-artist-size: clamp(19px, 2.15vw, 20px);
--ss-portrait-control-size: 48px;
--ss-portrait-control-icon-size: 24px;
--ss-portrait-step-size: 54px;
--ss-portrait-step-icon-size: 32px;
--ss-portrait-play-size: 76px;
--ss-portrait-play-icon-size: 31px;
--ss-portrait-footer-slot-size: 48px;
--ss-portrait-footer-icon-size: 24px;
--ss-portrait-audio-pill-max: 144px;
--ss-portrait-audio-icon-size: 24px;
--ss-portrait-audio-label-max: 80px;
--ss-full-player-stage: min(calc(100% - 12px), 760px);
--ss-full-controls-row: 76px;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, var(--ss-full-player-stage));
grid-template-rows:
48px
auto
auto
auto
var(--ss-full-controls-row)
auto;
grid-template-areas: none;
align-content: space-between;
align-items: center;
justify-content: center;
justify-items: center;
width: auto;
max-width: none;
min-height: 100vh;
min-height: 100dvh;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
padding:
max(18px, env(safe-area-inset-top))
max(24px, env(safe-area-inset-right))
max(18px, env(safe-area-inset-bottom))
max(24px, env(safe-area-inset-left));
column-gap: 0;
row-gap: 0;
border: 0;
border-radius: 0;
box-shadow: none;
animation: none !important;
transform: translate3d(0, var(--ss-full-sheet-y, 0px), 0);
overflow: hidden !important;
}
.ss-full-player.is-visible .ss-full-player__sheet,
.ss-full-player.is-closing .ss-full-player__sheet,
.ss-full-player.is-sheet-motion.is-visible .ss-full-player__sheet,
.ss-full-player.is-sheet-motion.is-closing .ss-full-player__sheet {
animation: none !important;
transform: translate3d(0, var(--ss-full-sheet-y, 0px), 0);
}
.ss-full-player__top,
.ss-full-player__track,
.ss-full-player__timeline-row,
.ss-full-player__controls,
.ss-full-player__footer {
grid-column: 1;
width: 100%;
max-width: none;
margin-right: auto;
margin-left: auto;
}
.ss-full-player__top {
display: grid;
grid-row: 1;
grid-template-columns: var(--ss-portrait-header-button-size) minmax(0, 1fr) var(--ss-portrait-header-button-size);
align-items: center;
min-height: 48px;
margin-bottom: 0;
}
.ss-full-player__source {
grid-column: 2;
justify-content: center;
width: 100%;
text-align: center;
}
.ss-full-player__source-title {
width: 100%;
max-width: min(100%, 42ch);
color: var(--ss-player-on-theme, #fff);
font-size: var(--ss-portrait-source-size);
font-weight: 700;
line-height: 1.24;
text-align: center;
}
.ss-full-player__more-wrap {
grid-column: 1;
grid-row: 1;
justify-self: start;
}
.ss-full-player__close {
grid-column: 3;
grid-row: 1;
justify-self: end;
}
.ss-full-player__more-trigger,
.ss-full-player__close {
width: var(--ss-portrait-header-button-size);
height: var(--ss-portrait-header-button-size);
line-height: var(--ss-portrait-header-button-size);
color: var(--ss-player-on-theme, #fff);
background: transparent !important;
transform: none;
}
.ss-full-player__more-trigger i,
.ss-full-player__close i {
color: inherit;
font-size: var(--ss-portrait-header-icon-size);
line-height: 1;
}
body.ss-full-player-open .ss-full-player__cover-wrap,
.ss-full-player__cover-wrap {
grid-column: 1;
grid-row: 2;
width: min(100%, 700px, max(280px, calc(100dvh - 382px)));
max-width: min(100%, 700px, max(280px, calc(100dvh - 382px)));
height: auto;
aspect-ratio: 1 / 1;
margin: 0 auto;
align-self: center;
justify-self: center;
}
.ss-full-player__cover {
width: 100%;
height: 100%;
border-radius: 4px;
background-color: transparent;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
box-shadow: none;
}
.ss-full-player__track {
grid-row: 3;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 12px;
margin-bottom: 0;
text-align: left !important;
}
.ss-full-player__track-meta {
min-width: 0;
}
.ss-full-player__track-title {
display: block;
max-width: 100%;
overflow: hidden;
color: var(--ss-player-on-theme, #fff);
font-size: var(--ss-portrait-title-size);
font-weight: 800;
line-height: 1.13;
white-space: nowrap;
text-overflow: clip;
text-align: left;
}
.ss-full-player__track-artist {
display: block;
max-width: 100%;
overflow: hidden;
margin-top: 7px;
color: var(--ss-player-on-theme-muted, rgba(255, 255, 255, .72));
font-size: var(--ss-portrait-artist-size);
font-weight: 700;
line-height: 1.24;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
}
.ss-full-player__track-actions {
display: inline-flex;
align-items: center;
align-self: center;
justify-self: end;
flex-wrap: nowrap;
gap: 8px;
transform: none;
}
.ss-full-player__track-actions .ss-full-player__icon-button,
.ss-full-player__track-actions .ss-full-player__add,
.ss-full-player__track-actions .ss-full-player__download-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--ss-portrait-action-size);
height: var(--ss-portrait-action-size);
line-height: 1;
color: var(--ss-player-on-theme, #fff);
background: transparent !important;
transform: none;
}
.ss-full-player__track-actions .ss-full-player__icon-button i,
.ss-full-player__track-actions .ss-full-player__add i,
.ss-full-player__track-actions .ss-full-player__download-trigger i {
color: inherit;
font-size: var(--ss-portrait-action-icon-size);
line-height: 1;
}
.ss-full-player__timeline-row {
grid-row: 4;
display: block;
margin-bottom: 0;
}
.ss-full-player__seek-wrap {
height: 18px;
}
.ss-full-player__time,
.ss-full-player__time-current,
.ss-full-player__time-duration {
color: var(--ss-player-on-theme, #fff);
font-size: 12px;
font-weight: 700;
}
.ss-full-player__controls {
grid-row: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0;
height: var(--ss-full-controls-row);
margin-bottom: 0;
}
.ss-full-player__control,
.ss-full-player__control:hover,
.ss-full-player__control:focus-visible {
width: var(--ss-portrait-control-size);
height: var(--ss-portrait-control-size);
color: var(--ss-player-on-theme, #fff);
background: transparent !important;
transform: none;
}
.ss-full-player__control i {
color: inherit;
font-size: var(--ss-portrait-control-icon-size);
line-height: 1;
}
.ss-full-player__prev,
.ss-full-player__next {
width: var(--ss-portrait-step-size);
height: var(--ss-portrait-step-size);
}
.ss-full-player__prev i,
.ss-full-player__next i {
font-size: var(--ss-portrait-step-icon-size);
font-weight: 900;
}
.ss-full-player__toggle,
.ss-full-player__toggle:hover,
.ss-full-player__toggle:focus-visible,
.ss-full-player__toggle.is-playing {
width: var(--ss-portrait-play-size);
height: var(--ss-portrait-play-size);
margin: 0;
color: var(--ss-player-control-on-strong, #252525);
background: var(--ss-player-control-bg-strong, #fff) !important;
transform: none;
}
.ss-full-player__toggle i,
.ss-full-player__toggle:hover i,
.ss-full-player__toggle:focus-visible i,
.ss-full-player__toggle.is-playing i {
color: var(--ss-player-control-on-strong, #252525);
font-size: var(--ss-portrait-play-icon-size);
font-weight: 900;
line-height: 1;
transform: none;
}
.ss-full-player__footer {
grid-row: 6;
grid-template-columns: var(--ss-portrait-footer-slot-size) minmax(0, 1fr) var(--ss-portrait-footer-slot-size);
grid-template-areas: "timer quality queue";
align-items: center;
gap: 10px;
margin-top: auto;
padding-top: 0;
align-self: end;
}
.ss-full-player__footer-side--start {
grid-area: timer;
justify-content: start;
}
.ss-full-player__footer-center {
display: contents;
}
.ss-full-player__footer-side--end {
display: none;
}
.ss-full-player__footer-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--ss-portrait-footer-slot-size);
height: var(--ss-portrait-footer-slot-size);
color: var(--ss-player-on-theme, #fff);
background: transparent !important;
}
body .ss-full-player__footer-center .ss-full-player__queue-toggle {
grid-area: queue;
display: inline-flex !important;
justify-self: end;
width: var(--ss-portrait-footer-slot-size);
max-width: var(--ss-portrait-footer-slot-size);
height: var(--ss-portrait-footer-slot-size);
padding: 0;
font-size: 0;
color: var(--ss-player-on-theme, #fff);
background: transparent !important;
}
body .ss-full-player__queue-handle,
body .ss-full-player__volume-wrap {
display: none !important;
}
.ss-full-player__quality {
grid-area: quality;
justify-self: center;
width: auto;
max-width: var(--ss-portrait-audio-pill-max);
min-height: 44px;
padding: 0 14px;
gap: 8px;
color: var(--ss-player-on-theme, #fff);
font-size: 13px;
font-weight: 600;
background: transparent;
}
.ss-full-player__queue-label,
.ss-full-player__queue-badge {
display: none !important;
}
.ss-full-player__footer-action i,
body .ss-full-player__footer-center .ss-full-player__queue-toggle i,
.ss-full-player__quality i {
color: inherit;
font-size: var(--ss-portrait-footer-icon-size);
line-height: 1;
}
.ss-full-player__quality-label {
max-width: var(--ss-portrait-audio-label-max);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ss-full-player__meta-item.is-active,
.ss-full-player__meta-item.is-active i {
color: var(--ss-player-on-theme, #fff);
}
}
@media (max-width: 1023.98px) {
.ss-full-player__more-trigger i,
.ss-full-player__close i,
.ss-full-player__track-actions .ss-full-player__icon-button i,
.ss-full-player__track-actions .ss-full-player__add i,
.ss-full-player__track-actions .ss-full-player__download-trigger i,
.ss-full-player__shuffle i,
.ss-full-player__repeat i,
.ss-full-player__footer-action i,
body .ss-full-player__footer-center .ss-full-player__queue-toggle i,
.ss-full-player__quality i {
font-weight: 400;
}
.ss-full-player__more-wrap.is-open .ss-full-player__more-trigger,
.ss-full-player__shuffle,
.ss-full-player__repeat,
.ss-full-player__shuffle.is-active,
.ss-full-player__shuffle.is-active i,
.ss-full-player__repeat.is-repeat-all,
.ss-full-player__repeat.is-repeat-all i,
.ss-full-player__repeat.is-repeat-one,
.ss-full-player__repeat.is-repeat-one i,
.ss-full-player__footer-action.is-active,
.ss-full-player__footer-action.is-active i,
.ss-full-player__meta-item.is-active,
.ss-full-player__meta-item.is-active i {
color: var(--ss-player-on-theme, #fff);
}
.ss-full-player__repeat.is-repeat-none,
.ss-full-player__repeat.is-repeat-none i {
color: var(--ss-player-on-theme-muted, rgba(255, 255, 255, .68));
}
.ss-full-player__shuffle.is-active::after,
.ss-full-player__repeat.is-repeat-all::after,
.ss-full-player__repeat.is-repeat-one::after {
content: "";
position: absolute;
right: 50%;
bottom: 1px;
width: 3px;
height: 3px;
border-radius: 50%;
background: currentColor;
transform: translateX(50%);
pointer-events: none;
}
.ss-full-player__repeat.is-repeat-none::after {
content: none;
}
}
@media (min-width: 481px) and (max-width: 1023.98px) and (max-height: 699.98px) {
body.ss-full-player-open .ss-full-player__sheet,
.ss-full-player__sheet {
--ss-portrait-action-size: 48px;
--ss-portrait-action-icon-size: 28px;
--ss-portrait-control-size: 44px;
--ss-portrait-control-icon-size: 23px;
--ss-portrait-step-size: 50px;
--ss-portrait-step-icon-size: 29px;
--ss-portrait-play-size: 68px;
--ss-portrait-play-icon-size: 29px;
--ss-portrait-footer-slot-size: 44px;
--ss-portrait-footer-icon-size: 23px;
--ss-full-controls-row: 68px;
grid-template-rows:
44px
auto
auto
auto
var(--ss-full-controls-row)
auto;
padding:
max(10px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right))
max(10px, env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
}
.ss-full-player__cover-wrap {
width: min(100%, 520px, max(210px, calc(100dvh - 330px)));
max-width: min(100%, 520px, max(210px, calc(100dvh - 330px)));
height: auto;
}
.ss-full-player__top {
min-height: 44px;
}
.ss-full-player__track-artist {
margin-top: 5px;
}
.ss-full-player__seek-wrap {
height: 16px;
}
}
@media (min-width: 760px) and (max-width: 1023.98px) and (orientation: landscape) {
body.ss-full-player-open .ss-full-player__sheet,
body.ss-full-player-open .ss-full-player.is-sheet-motion .ss-full-player__sheet,
.ss-full-player.is-sheet-motion .ss-full-player__sheet,
.ss-full-player__sheet {
--ss-full-landscape-cover-size: min(46vw, calc(100dvh - 104px), 520px);
--ss-full-controls-row: 72px;
grid-template-columns: minmax(0, var(--ss-full-landscape-cover-size)) minmax(300px, 1fr);
grid-template-rows:
48px
minmax(0, 1fr)
auto
auto
var(--ss-full-controls-row)
auto
minmax(0, 1fr);
grid-template-areas:
"top top"
"cover ."
"cover track"
"cover timeline"
"cover controls"
"cover footer"
"cover .";
align-content: center;
column-gap: clamp(24px, 3.2vw, 36px);
row-gap: clamp(8px, 1.6dvh, 14px);
}
.ss-full-player__top {
grid-area: top;
width: 100%;
max-width: none;
}
body.ss-full-player-open .ss-full-player__cover-wrap,
.ss-full-player__cover-wrap {
grid-area: cover;
width: var(--ss-full-landscape-cover-size);
max-width: var(--ss-full-landscape-cover-size);
height: var(--ss-full-landscape-cover-size);
align-self: center;
}
.ss-full-player__track,
.ss-full-player__timeline-row,
.ss-full-player__controls,
.ss-full-player__footer {
width: 100%;
max-width: none;
margin: 0;
justify-self: stretch;
}
.ss-full-player__track {
grid-area: track;
}
.ss-full-player__timeline-row {
grid-area: timeline;
}
.ss-full-player__controls {
grid-area: controls;
}
.ss-full-player__footer {
grid-area: footer;
}
}
.ss-mini-player__queue-trigger {
display: none;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
background: transparent;
}
.ss-mini-player__queue-trigger::before {
content: "\e4a2";
font-family: 'Font Awesome 7 Pro';
font-weight: 300;
color: rgba(255, 255, 255, .8);
font-size: 18px;
transition: color .22s ease, transform .22s ease;
}
.ss-mini-player__queue-trigger:hover::before,
.ss-mini-player__queue-trigger:focus-visible::before,
.ss-mini-player__queue-trigger.is-active::before {
color: #fbcb07;
transform: translateY(-1px);
}
.ss-mini-player__quality {
display: none;
}
.ss-mini-player__quality-label {
display: none;
}
@media (min-width: 760px) and (max-width: 977.98px) {
.ss-mini-player {
left: 0;
right: 0;
bottom: 0;
display: none;
grid-template-columns: minmax(230px, 1fr) minmax(230px, auto) minmax(112px, .42fr);
grid-template-rows: minmax(44px, auto) 12px;
align-items: center;
column-gap: 14px;
row-gap: 4px;
min-height: 76px;
padding: 10px 16px 9px;
border-radius: 0;
background: rgb(25 25 25);
box-shadow: 0 -14px 34px rgba(0, 0, 0, .22);
overflow: hidden;
}
.ss-mini-player.is-visible {
display: grid;
}
.ss-mini-player__media {
grid-column: 1;
grid-row: 1 / 3;
justify-self: start;
width: 100%;
max-width: 330px;
gap: 10px;
}
.ss-mini-player__cover {
flex: 0 0 50px;
width: 50px;
height: 50px;
border-radius: 4px;
}
.ss-mini-player__meta {
min-width: 0;
text-align: left;
direction: ltr;
}
.ss-mini-player__title {
font-size: 14px;
line-height: 1.24;
}
.ss-mini-player__artist {
display: block;
margin-top: 2px;
overflow: hidden;
color: rgba(255, 255, 255, .66);
font-size: 12px;
line-height: 1.25;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
direction: ltr;
}
.ss-mini-player__controls {
gap: 8px;
margin-left: 0;
}
.ss-mini-player__controls--transport {
grid-column: 2;
grid-row: 1;
justify-self: center;
justify-content: center;
min-width: 226px;
}
.ss-mini-player__shuffle,
.ss-mini-player__repeat,
.ss-mini-player__add,
.ss-mini-player__download-wrap,
.ss-mini-player__volume-wrap {
display: none;
}
.ss-mini-player__prev,
.ss-mini-player__toggle,
.ss-mini-player__next {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ss-mini-player__button {
width: 42px;
height: 42px;
min-width: 42px;
padding: 0;
background: transparent;
color: #fff;
}
.ss-mini-player__button i {
font-size: 18px;
line-height: 1;
}
.ss-mini-player__toggle {
width: 50px;
height: 50px;
min-width: 50px;
background: #fff;
color: #111;
}
.ss-mini-player__toggle i {
font-size: 22px;
padding-left: 2px;
}
.ss-mini-player__progress {
position: static;
grid-column: 2;
grid-row: 2;
display: block;
width: 100%;
height: 12px;
pointer-events: auto;
}
.ss-mini-player__seek {
display: block;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
margin: 4px 0 0;
border-radius: 999px;
background: rgba(255, 255, 255, .18);
outline: 0;
cursor: pointer;
pointer-events: auto;
}
.ss-mini-player__seek::-webkit-slider-runnable-track {
height: 4px;
background: transparent;
}
.ss-mini-player__seek::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
margin-top: -5px;
border: 0;
border-radius: 999px;
background: #f6cf48;
box-shadow: 0 3px 10px rgba(251, 203, 7, .18);
opacity: 0;
transform: scale(.72);
transition: opacity .16s ease, transform .16s ease;
}
.ss-mini-player__seek::-moz-range-track {
height: 4px;
border: 0;
background: transparent;
}
.ss-mini-player__seek::-moz-range-thumb {
width: 14px;
height: 14px;
border: 0;
border-radius: 999px;
background: #f6cf48;
box-shadow: 0 3px 10px rgba(251, 203, 7, .18);
opacity: 0;
transform: scale(.72);
transition: opacity .16s ease, transform .16s ease;
}
.ss-mini-player__seek:hover::-webkit-slider-thumb,
.ss-mini-player__seek:focus-visible::-webkit-slider-thumb,
.ss-mini-player__seek:active::-webkit-slider-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-webkit-slider-thumb {
opacity: 1;
transform: scale(1);
}
.ss-mini-player__seek:hover::-moz-range-thumb,
.ss-mini-player__seek:focus-visible::-moz-range-thumb,
.ss-mini-player__seek:active::-moz-range-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-moz-range-thumb {
opacity: 1;
transform: scale(1);
}
.ss-mini-player__controls--actions {
display: flex;
grid-column: 3;
grid-row: 1 / 3;
justify-self: end;
justify-content: flex-end;
gap: 8px;
min-width: 112px;
}
.ss-mini-player__queue-trigger,
.ss-mini-player__quality {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
border: 0;
background: transparent;
color: rgba(255, 255, 255, .82);
}
.ss-mini-player__queue-trigger::before,
.ss-mini-player__quality i {
color: rgba(255, 255, 255, .82);
font-size: 18px;
}
.ss-mini-player__quality-label {
display: none;
}
.ss-mini-player__queue-trigger:hover::before,
.ss-mini-player__queue-trigger:focus-visible::before,
.ss-mini-player__queue-trigger.is-active::before,
.ss-mini-player__quality:hover,
.ss-mini-player__quality:focus-visible,
.ss-mini-player__quality.is-active {
color: #fbcb07;
background: transparent;
}
.ss-mini-player__quality:hover i,
.ss-mini-player__quality:focus-visible i,
.ss-mini-player__quality.is-active i {
color: #fbcb07;
}
body.ss-mini-visible {
padding-bottom: 86px;
}
}
@media (min-width: 978px) and (max-width: 1457.98px) {
.ss-mini-player {
left: 0;
right: 0;
bottom: 0;
display: none;
grid-template-columns: minmax(260px, 1fr) minmax(330px, 420px) minmax(224px, 1fr);
grid-template-rows: minmax(44px, auto) 12px;
align-items: center;
column-gap: clamp(18px, 2vw, 30px);
row-gap: 4px;
min-height: 78px;
padding: 10px 24px 9px;
border: 0;
border-radius: 0;
background: rgb(18 18 18);
box-shadow: 0 -14px 34px rgba(0, 0, 0, .24);
color: #fff;
opacity: 1;
overflow: hidden;
}
.ss-mini-player.is-visible {
display: grid;
}
.ss-mini-player__media {
grid-column: 1;
grid-row: 1 / 3;
justify-self: start;
width: 100%;
max-width: min(34vw, 370px);
gap: 12px;
}
.ss-mini-player__cover {
flex: 0 0 60px;
width: 60px;
height: 60px;
border-radius: 4px;
}
.ss-mini-player__meta {
min-width: 0;
gap: 3px;
text-align: left;
direction: ltr;
}
.ss-mini-player__title {
color: #fff;
font-size: 14px;
font-weight: 650;
line-height: 1.22;
}
.ss-mini-player__artist {
display: block;
margin-top: 0;
overflow: hidden;
color: rgba(255, 255, 255, .62);
font-size: 12px;
font-weight: 400;
line-height: 1.28;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
direction: ltr;
}
.ss-mini-player__controls {
gap: 8px;
margin-left: 0;
}
.ss-mini-player__controls--transport {
grid-column: 2;
grid-row: 1;
justify-self: center;
justify-content: center;
width: 100%;
min-width: 0;
}
.ss-mini-player__shuffle,
.ss-mini-player__prev,
.ss-mini-player__toggle,
.ss-mini-player__next,
.ss-mini-player__repeat {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ss-mini-player__button,
.ss-mini-player__download-trigger,
.ss-mini-player__volume-trigger,
.ss-mini-player__queue-trigger,
.ss-mini-player__quality {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
padding: 0;
border: 0;
background: transparent;
color: rgba(255, 255, 255, .78);
}
.ss-mini-player__button:hover,
.ss-mini-player__button:focus-visible,
.ss-mini-player__queue-trigger:hover,
.ss-mini-player__queue-trigger:focus-visible,
.ss-mini-player__quality:hover,
.ss-mini-player__quality:focus-visible {
background: rgba(255, 255, 255, .08);
color: #fff;
}
.ss-mini-player__button i,
.ss-mini-player__queue-trigger::before,
.ss-mini-player__quality i {
color: currentColor;
font-size: 17px;
line-height: 1;
}
.ss-mini-player__toggle,
.ss-mini-player__toggle:hover,
.ss-mini-player__toggle:focus-visible,
.ss-mini-player__toggle.is-playing {
width: 46px;
height: 46px;
min-width: 46px;
min-height: 46px;
background: #fff;
color: #111;
}
.ss-mini-player__toggle i {
font-size: 21px;
padding-left: 2px;
}
.ss-mini-player__progress {
position: static;
grid-column: 2;
grid-row: 2;
display: block;
width: 100%;
height: 12px;
pointer-events: auto;
z-index: 1;
}
.ss-mini-player__seek {
display: block;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
margin: 4px 0 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .18);
outline: 0;
cursor: pointer;
pointer-events: auto;
box-shadow: none;
}
.ss-mini-player__seek::-webkit-slider-runnable-track {
height: 4px;
background: transparent;
}
.ss-mini-player__seek::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
margin-top: -5px;
border: 0;
border-radius: 999px;
background: #f6cf48;
box-shadow: 0 3px 10px rgba(251, 203, 7, .2);
opacity: 0;
transform: scale(.72);
transition: opacity .16s ease, transform .16s ease;
}
.ss-mini-player__seek::-moz-range-track {
height: 4px;
border: 0;
background: transparent;
}
.ss-mini-player__seek::-moz-range-thumb {
width: 14px;
height: 14px;
border: 0;
border-radius: 999px;
background: #f6cf48;
box-shadow: 0 3px 10px rgba(251, 203, 7, .2);
opacity: 0;
transform: scale(.72);
transition: opacity .16s ease, transform .16s ease;
}
.ss-mini-player__seek:hover,
.ss-mini-player__seek:focus-visible,
.ss-mini-player__seek:active,
.ss-mini-player.is-seeking .ss-mini-player__seek {
height: 4px;
box-shadow: none;
}
.ss-mini-player__seek:hover::-webkit-slider-thumb,
.ss-mini-player__seek:focus-visible::-webkit-slider-thumb,
.ss-mini-player__seek:active::-webkit-slider-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-webkit-slider-thumb {
opacity: 1;
transform: scale(1);
}
.ss-mini-player__seek:hover::-moz-range-thumb,
.ss-mini-player__seek:focus-visible::-moz-range-thumb,
.ss-mini-player__seek:active::-moz-range-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-moz-range-thumb {
opacity: 1;
transform: scale(1);
}
.ss-mini-player__controls--actions {
display: flex;
grid-column: 3;
grid-row: 1 / 3;
justify-self: end;
justify-content: flex-end;
gap: 8px;
min-width: 206px;
}
.ss-mini-player__add {
display: none;
}
.ss-mini-player__download-wrap,
.ss-mini-player__queue-trigger,
.ss-mini-player__quality,
.ss-mini-player__volume-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ss-mini-player__queue-trigger {
order: 1;
}
.ss-mini-player__quality {
order: 2;
}
.ss-mini-player__download-wrap {
order: 3;
}
.ss-mini-player__volume-wrap {
order: 4;
}
.ss-mini-player__quality-label {
display: none;
}
.ss-mini-player__queue-trigger:hover::before,
.ss-mini-player__queue-trigger:focus-visible::before,
.ss-mini-player__queue-trigger.is-active::before,
.ss-mini-player__quality:hover i,
.ss-mini-player__quality:focus-visible i,
.ss-mini-player__quality.is-active i {
color: #fbcb07;
}
body.ss-mini-visible {
padding-bottom: 82px;
}
}
@media (min-width: 1458px) and (max-width: 2497.98px) {
.ss-mini-player {
left: 0;
right: 0;
bottom: 0;
display: none;
grid-template-columns: minmax(340px, 1fr) minmax(420px, 500px) minmax(260px, 1fr);
grid-template-rows: minmax(46px, auto) 12px;
align-items: center;
column-gap: clamp(24px, 2.1vw, 44px);
row-gap: 5px;
min-height: 88px;
padding: 11px clamp(28px, 2.2vw, 44px) 10px;
border: 0;
border-radius: 0;
background: rgb(18 18 18);
box-shadow: 0 -16px 38px rgba(0, 0, 0, .24);
color: #fff;
opacity: 1;
overflow: hidden;
}
.ss-mini-player.is-visible {
display: grid;
}
.ss-mini-player__media {
grid-column: 1;
grid-row: 1 / 3;
justify-self: start;
width: 100%;
max-width: min(32vw, 470px);
gap: 13px;
}
.ss-mini-player__cover {
flex: 0 0 64px;
width: 64px;
height: 64px;
border-radius: 4px;
}
body .ss-mini-player__media .ss-mini-player__cover {
flex: 0 0 64px;
width: 64px;
height: 64px;
max-width: 64px;
}
.ss-mini-player__meta {
min-width: 0;
gap: 4px;
text-align: left;
direction: ltr;
}
.ss-mini-player__title {
color: #fff;
font-size: 15px;
font-weight: 650;
line-height: 1.22;
}
.ss-mini-player__artist {
display: block;
margin-top: 0;
overflow: hidden;
color: rgba(255, 255, 255, .64);
font-size: 13px;
font-weight: 400;
line-height: 1.28;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
direction: ltr;
}
.ss-mini-player__controls {
gap: 9px;
margin-left: 0;
}
.ss-mini-player__controls--transport {
grid-column: 2;
grid-row: 1;
justify-self: center;
justify-content: center;
width: 100%;
min-width: 0;
}
.ss-mini-player__shuffle,
.ss-mini-player__prev,
.ss-mini-player__toggle,
.ss-mini-player__next,
.ss-mini-player__repeat {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ss-mini-player__button,
.ss-mini-player__download-trigger,
.ss-mini-player__volume-trigger,
.ss-mini-player__queue-trigger,
.ss-mini-player__quality {
width: 42px;
height: 42px;
min-width: 42px;
min-height: 42px;
padding: 0;
border: 0;
background: transparent;
color: rgba(255, 255, 255, .78);
}
.ss-mini-player__button:hover,
.ss-mini-player__button:focus-visible,
.ss-mini-player__queue-trigger:hover,
.ss-mini-player__queue-trigger:focus-visible,
.ss-mini-player__quality:hover,
.ss-mini-player__quality:focus-visible {
background: rgba(255, 255, 255, .08);
color: #fff;
}
.ss-mini-player__button i,
.ss-mini-player__queue-trigger::before,
.ss-mini-player__quality i {
color: currentColor;
font-size: 18px;
line-height: 1;
}
.ss-mini-player__toggle,
.ss-mini-player__toggle:hover,
.ss-mini-player__toggle:focus-visible,
.ss-mini-player__toggle.is-playing {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
background: #fff;
color: #111;
}
.ss-mini-player__toggle i {
font-size: 22px;
padding-left: 2px;
}
.ss-mini-player__progress {
position: static;
grid-column: 2;
grid-row: 2;
display: block;
width: 100%;
height: 12px;
pointer-events: auto;
z-index: 1;
}
.ss-mini-player__seek {
display: block;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
margin: 4px 0 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .18);
outline: 0;
cursor: pointer;
pointer-events: auto;
box-shadow: none;
}
.ss-mini-player__seek::-webkit-slider-runnable-track {
height: 4px;
background: transparent;
}
.ss-mini-player__seek::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
margin-top: -5px;
border: 0;
border-radius: 999px;
background: #f6cf48;
box-shadow: 0 3px 10px rgba(251, 203, 7, .2);
opacity: 0;
transform: scale(.72);
transition: opacity .16s ease, transform .16s ease;
}
.ss-mini-player__seek::-moz-range-track {
height: 4px;
border: 0;
background: transparent;
}
.ss-mini-player__seek::-moz-range-thumb {
width: 14px;
height: 14px;
border: 0;
border-radius: 999px;
background: #f6cf48;
box-shadow: 0 3px 10px rgba(251, 203, 7, .2);
opacity: 0;
transform: scale(.72);
transition: opacity .16s ease, transform .16s ease;
}
.ss-mini-player__seek:hover,
.ss-mini-player__seek:focus-visible,
.ss-mini-player__seek:active,
.ss-mini-player.is-seeking .ss-mini-player__seek {
height: 4px;
box-shadow: none;
}
.ss-mini-player__seek:hover::-webkit-slider-thumb,
.ss-mini-player__seek:focus-visible::-webkit-slider-thumb,
.ss-mini-player__seek:active::-webkit-slider-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-webkit-slider-thumb {
opacity: 1;
transform: scale(1);
}
.ss-mini-player__seek:hover::-moz-range-thumb,
.ss-mini-player__seek:focus-visible::-moz-range-thumb,
.ss-mini-player__seek:active::-moz-range-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-moz-range-thumb {
opacity: 1;
transform: scale(1);
}
.ss-mini-player__controls--actions {
display: flex;
grid-column: 3;
grid-row: 1 / 3;
justify-self: end;
justify-content: flex-end;
gap: 10px;
min-width: 244px;
}
body .ss-mini-player__controls--actions {
gap: 10px;
min-width: 244px;
}
.ss-mini-player__add {
display: none;
}
.ss-mini-player__download-wrap,
.ss-mini-player__queue-trigger,
.ss-mini-player__quality,
.ss-mini-player__volume-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ss-mini-player__queue-trigger {
order: 1;
}
.ss-mini-player__quality {
order: 2;
gap: 6px;
width: auto;
min-width: 82px;
padding: 0 10px;
}
body .ss-mini-player__controls--actions .ss-mini-player__quality {
width: auto;
min-width: 82px;
padding: 0 10px;
}
.ss-mini-player__quality-label {
display: inline-block;
overflow: hidden;
max-width: 64px;
color: currentColor;
font-size: 11px;
font-weight: 650;
line-height: 1;
white-space: nowrap;
text-overflow: ellipsis;
}
.ss-mini-player__download-wrap {
order: 3;
}
.ss-mini-player__volume-wrap {
order: 4;
}
.ss-mini-player__queue-trigger:hover::before,
.ss-mini-player__queue-trigger:focus-visible::before,
.ss-mini-player__queue-trigger.is-active::before,
.ss-mini-player__quality:hover i,
.ss-mini-player__quality:focus-visible i,
.ss-mini-player__quality.is-active i {
color: #fbcb07;
}
body.ss-mini-visible {
padding-bottom: 92px;
}
}
@media (min-width: 2498px) {
.ss-mini-player {
left: 0;
right: 0;
bottom: 0;
display: none;
grid-template-columns: minmax(420px, 1fr) minmax(500px, 560px) minmax(340px, 1fr);
grid-template-rows: minmax(48px, auto) 12px;
align-items: center;
column-gap: clamp(36px, 2.4vw, 72px);
row-gap: 5px;
min-height: 94px;
padding: 12px clamp(44px, 2.4vw, 72px) 11px;
border: 0;
border-radius: 0;
background: rgb(18 18 18);
box-shadow: 0 -16px 38px rgba(0, 0, 0, .24);
color: #fff;
opacity: 1;
overflow: hidden;
}
body .ss-mini-player {
padding: 12px clamp(44px, 2.4vw, 72px) 11px;
}
.ss-mini-player.is-visible {
display: grid;
}
.ss-mini-player__media {
grid-column: 1;
grid-row: 1 / 3;
justify-self: start;
width: 100%;
max-width: min(30vw, 560px);
gap: 14px;
}
.ss-mini-player__cover {
flex: 0 0 68px;
width: 68px;
height: 68px;
border-radius: 4px;
}
body .ss-mini-player__media .ss-mini-player__cover {
flex: 0 0 68px;
width: 68px;
height: 68px;
max-width: 68px;
}
.ss-mini-player__meta {
min-width: 0;
gap: 4px;
text-align: left;
direction: ltr;
}
.ss-mini-player__title {
color: #fff;
font-size: 15px;
font-weight: 650;
line-height: 1.22;
}
.ss-mini-player__artist {
display: block;
margin-top: 0;
overflow: hidden;
color: rgba(255, 255, 255, .64);
font-size: 13px;
font-weight: 400;
line-height: 1.28;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
direction: ltr;
}
.ss-mini-player__controls {
gap: 10px;
margin-left: 0;
}
.ss-mini-player__controls--transport {
grid-column: 2;
grid-row: 1;
justify-self: center;
justify-content: center;
width: 100%;
min-width: 0;
}
.ss-mini-player__shuffle,
.ss-mini-player__prev,
.ss-mini-player__toggle,
.ss-mini-player__next,
.ss-mini-player__repeat {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ss-mini-player__button,
.ss-mini-player__download-trigger,
.ss-mini-player__volume-trigger,
.ss-mini-player__queue-trigger,
.ss-mini-player__quality {
width: 42px;
height: 42px;
min-width: 42px;
min-height: 42px;
padding: 0;
border: 0;
background: transparent;
color: rgba(255, 255, 255, .78);
}
.ss-mini-player__button:hover,
.ss-mini-player__button:focus-visible,
.ss-mini-player__queue-trigger:hover,
.ss-mini-player__queue-trigger:focus-visible,
.ss-mini-player__quality:hover,
.ss-mini-player__quality:focus-visible {
background: rgba(255, 255, 255, .08);
color: #fff;
}
.ss-mini-player__button i,
.ss-mini-player__queue-trigger::before,
.ss-mini-player__quality i {
color: currentColor;
font-size: 18px;
line-height: 1;
}
.ss-mini-player__toggle,
.ss-mini-player__toggle:hover,
.ss-mini-player__toggle:focus-visible,
.ss-mini-player__toggle.is-playing {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
background: #fff;
color: #111;
}
.ss-mini-player__toggle i {
font-size: 22px;
padding-left: 2px;
}
.ss-mini-player__progress {
position: static;
grid-column: 2;
grid-row: 2;
display: block;
width: 100%;
max-width: 560px;
height: 12px;
justify-self: center;
pointer-events: auto;
z-index: 1;
}
.ss-mini-player__seek {
display: block;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
margin: 4px 0 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .18);
outline: 0;
cursor: pointer;
pointer-events: auto;
box-shadow: none;
}
.ss-mini-player__seek::-webkit-slider-runnable-track {
height: 4px;
background: transparent;
}
.ss-mini-player__seek::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
margin-top: -5px;
border: 0;
border-radius: 999px;
background: #f6cf48;
box-shadow: 0 3px 10px rgba(251, 203, 7, .2);
opacity: 0;
transform: scale(.72);
transition: opacity .16s ease, transform .16s ease;
}
.ss-mini-player__seek::-moz-range-track {
height: 4px;
border: 0;
background: transparent;
}
.ss-mini-player__seek::-moz-range-thumb {
width: 14px;
height: 14px;
border: 0;
border-radius: 999px;
background: #f6cf48;
box-shadow: 0 3px 10px rgba(251, 203, 7, .2);
opacity: 0;
transform: scale(.72);
transition: opacity .16s ease, transform .16s ease;
}
.ss-mini-player__seek:hover,
.ss-mini-player__seek:focus-visible,
.ss-mini-player__seek:active,
.ss-mini-player.is-seeking .ss-mini-player__seek {
height: 4px;
box-shadow: none;
}
.ss-mini-player__seek:hover::-webkit-slider-thumb,
.ss-mini-player__seek:focus-visible::-webkit-slider-thumb,
.ss-mini-player__seek:active::-webkit-slider-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-webkit-slider-thumb {
opacity: 1;
transform: scale(1);
}
.ss-mini-player__seek:hover::-moz-range-thumb,
.ss-mini-player__seek:focus-visible::-moz-range-thumb,
.ss-mini-player__seek:active::-moz-range-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-moz-range-thumb {
opacity: 1;
transform: scale(1);
}
.ss-mini-player__controls--actions {
display: flex;
grid-column: 3;
grid-row: 1 / 3;
justify-self: end;
justify-content: flex-end;
gap: 12px;
min-width: 286px;
}
body .ss-mini-player__controls--actions {
gap: 12px;
min-width: 286px;
}
.ss-mini-player__add {
display: none;
}
.ss-mini-player__download-wrap,
.ss-mini-player__queue-trigger,
.ss-mini-player__quality,
.ss-mini-player__volume-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ss-mini-player__queue-trigger {
order: 1;
}
.ss-mini-player__quality {
order: 2;
gap: 7px;
width: auto;
min-width: 96px;
padding: 0 12px;
}
body .ss-mini-player__controls--actions .ss-mini-player__quality {
width: auto;
min-width: 96px;
padding: 0 12px;
}
.ss-mini-player__quality-label {
display: inline-block;
overflow: hidden;
max-width: 76px;
color: currentColor;
font-size: 11px;
font-weight: 650;
line-height: 1;
white-space: nowrap;
text-overflow: ellipsis;
}
.ss-mini-player__download-wrap {
order: 3;
}
.ss-mini-player__volume-wrap {
order: 4;
}
.ss-mini-player__queue-trigger:hover::before,
.ss-mini-player__queue-trigger:focus-visible::before,
.ss-mini-player__queue-trigger.is-active::before,
.ss-mini-player__quality:hover i,
.ss-mini-player__quality:focus-visible i,
.ss-mini-player__quality.is-active i {
color: #fbcb07;
}
body.ss-mini-visible {
padding-bottom: 96px;
}
}
@media (min-width: 1024px) {
body.ss-full-player-open .ss-full-player__sheet,
body.ss-full-player-open .ss-full-player.is-sheet-motion .ss-full-player__sheet,
body.ss-full-player-open .ss-full-player.is-visible .ss-full-player__sheet,
.ss-full-player.is-sheet-motion .ss-full-player__sheet,
.ss-full-player.is-visible .ss-full-player__sheet,
.ss-full-player__sheet {
--ss-desktop-pad-x: clamp(48px, 4.8vw, 120px);
--ss-desktop-pad-y: clamp(24px, 3.2dvh, 56px);
--ss-desktop-header-row: clamp(48px, 5dvh, 64px);
--ss-desktop-cover-size: min(clamp(450px, 34vw, 520px), calc(100dvh - (var(--ss-desktop-pad-y) * 2) - var(--ss-desktop-header-row)));
--ss-desktop-panel-width: clamp(400px, 31vw, 560px);
--ss-desktop-gap: clamp(32px, calc((100vw - var(--ss-desktop-cover-size) - var(--ss-desktop-panel-width)) * .4), 112px);
--ss-desktop-stack-gap: clamp(22px, 2.8dvh, 32px);
--ss-desktop-cover-top-gap: clamp(18px, 2.8dvh, 28px);
--ss-desktop-right-top-space: clamp(64px, 10dvh, 112px);
--ss-desktop-controls-row: clamp(72px, 7dvh, 88px);
--ss-desktop-footer-row: clamp(48px, 5dvh, 56px);
--ss-portrait-header-button-size: 48px;
--ss-portrait-header-icon-size: 24px;
--ss-portrait-source-size: clamp(15px, 1.15vw, 19px);
--ss-portrait-action-size: 52px;
--ss-portrait-action-icon-size: 31px;
--ss-portrait-title-size: clamp(30px, 2.25vw, 48px);
--ss-portrait-artist-size: clamp(18px, 1.25vw, 24px);
--ss-portrait-control-size: 52px;
--ss-portrait-control-icon-size: 26px;
--ss-portrait-step-size: 58px;
--ss-portrait-step-icon-size: 34px;
--ss-portrait-play-size: 82px;
--ss-portrait-play-icon-size: 33px;
--ss-portrait-footer-slot-size: 52px;
--ss-portrait-footer-icon-size: 25px;
--ss-portrait-audio-pill-max: 168px;
--ss-portrait-audio-icon-size: 25px;
--ss-portrait-audio-label-max: 92px;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, var(--ss-desktop-cover-size)) minmax(0, var(--ss-desktop-panel-width));
grid-template-rows:
var(--ss-desktop-header-row)
var(--ss-desktop-right-top-space)
auto
auto
var(--ss-desktop-controls-row)
var(--ss-desktop-footer-row)
minmax(0, 1fr);
grid-template-areas:
"top top"
"cover ."
"cover track"
"cover timeline"
"cover controls"
"cover footer"
"cover .";
width: auto;
height: 100vh;
height: 100dvh;
max-width: none;
max-height: 100vh;
max-height: 100dvh;
min-width: 0;
min-height: 0;
padding:
max(var(--ss-desktop-pad-y), env(safe-area-inset-top))
max(var(--ss-desktop-pad-x), env(safe-area-inset-right))
max(var(--ss-desktop-pad-y), env(safe-area-inset-bottom))
max(var(--ss-desktop-pad-x), env(safe-area-inset-left));
column-gap: var(--ss-desktop-gap);
row-gap: var(--ss-desktop-stack-gap);
align-items: stretch;
align-content: center;
justify-content: center;
overflow: hidden !important;
overflow-x: hidden !important;
overflow-y: hidden !important;
border-radius: 0;
background:
linear-gradient(180deg, rgba(var(--ss-player-theme-rgb, 16, 16, 16), .96), rgba(var(--ss-player-theme-rgb, 16, 16, 16), .88)),
var(--ss-player-theme, #101010);
box-shadow: none;
transform: translate3d(0, var(--ss-full-sheet-y, 0px), 0);
}
.ss-full-player.is-visible .ss-full-player__sheet {
animation: none;
transform: translate3d(0, var(--ss-full-sheet-y, 0px), 0);
}
body.ss-full-player-open .ss-full-player.is-sheet-motion.is-visible .ss-full-player__sheet,
body.ss-full-player-open .ss-full-player.is-sheet-motion.is-closing .ss-full-player__sheet,
.ss-full-player.is-sheet-motion.is-visible .ss-full-player__sheet,
.ss-full-player.is-sheet-motion.is-closing .ss-full-player__sheet {
animation: none !important;
transform: translate3d(0, var(--ss-full-sheet-y, 0px), 0);
}
.ss-full-player.is-closing .ss-full-player__sheet {
animation: ssFullPlayerOut .24s cubic-bezier(.4, 0, .2, 1) forwards;
}
.ss-full-player__top {
grid-area: top;
display: grid;
grid-template-columns: var(--ss-portrait-header-button-size) minmax(0, 1fr) var(--ss-portrait-header-button-size);
align-items: center;
width: 100%;
min-height: var(--ss-desktop-header-row);
margin: 0;
}
.ss-full-player__more-wrap {
grid-column: 1;
justify-self: start;
}
.ss-full-player__source {
grid-column: 2;
justify-content: center;
width: 100%;
min-height: 0;
text-align: center;
}
.rtl .ss-full-player__source,
body.rtl .ss-full-player__source {
justify-content: center;
text-align: center;
}
.ss-full-player__source-title {
width: 100%;
max-width: min(100%, 38ch);
color: var(--ss-player-on-theme, #fff);
font-size: var(--ss-portrait-source-size);
font-weight: 700;
line-height: 1.24;
text-align: center;
}
.rtl .ss-full-player__source-title,
body.rtl .ss-full-player__source-title {
text-align: center;
}
.ss-full-player__close {
grid-column: 3;
justify-self: end;
}
.ss-full-player__more-trigger,
.ss-full-player__close {
width: var(--ss-portrait-header-button-size);
height: var(--ss-portrait-header-button-size);
line-height: var(--ss-portrait-header-button-size);
color: var(--ss-player-on-theme, #fff);
background: transparent;
transform: none;
}
.ss-full-player__more-trigger:hover,
.ss-full-player__more-trigger:focus-visible,
.ss-full-player__close:hover,
.ss-full-player__close:focus-visible {
background: transparent !important;
transform: none;
}
.ss-full-player__more-trigger i,
.ss-full-player__close i {
color: inherit;
font-size: var(--ss-portrait-header-icon-size);
line-height: 1;
}
body.ss-full-player-open .ss-full-player__cover-wrap,
.ss-full-player__cover-wrap {
grid-area: cover;
width: var(--ss-desktop-cover-size);
max-width: var(--ss-desktop-cover-size);
height: var(--ss-desktop-cover-size);
margin: var(--ss-desktop-cover-top-gap) 0 0;
align-self: start;
justify-self: center;
}
.ss-full-player__cover {
width: 100%;
height: 100%;
border-radius: 4px;
background-color: transparent;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
box-shadow: none;
}
.ss-full-player__track,
.ss-full-player__timeline-row,
.ss-full-player__controls,
.ss-full-player__footer {
width: 100%;
max-width: var(--ss-desktop-panel-width);
margin: 0;
justify-self: stretch;
}
.ss-full-player__track {
grid-area: track;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 14px;
align-self: end;
align-items: start;
min-width: 0;
text-align: left !important;
}
.rtl .ss-full-player__track,
body.rtl .ss-full-player__track {
direction: ltr;
text-align: left !important;
}
.ss-full-player__track-meta {
min-width: 0;
}
.ss-full-player__track-title {
display: block;
position: relative;
max-width: 100%;
overflow: hidden;
color: var(--ss-player-on-theme, #fff);
font-size: var(--ss-portrait-title-size);
font-weight: 800;
line-height: 1.13;
text-align: left;
white-space: nowrap;
text-overflow: clip;
}
.ss-full-player__track-artist {
display: block;
max-width: 100%;
margin-top: 10px;
overflow: hidden;
color: var(--ss-player-on-theme-muted, rgba(255, 255, 255, .72));
font-size: var(--ss-portrait-artist-size);
font-weight: 700;
line-height: 1.24;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
}
.ss-full-player__track-actions {
align-self: start;
justify-self: end;
display: inline-flex;
flex-wrap: nowrap;
gap: 10px;
transform: none;
}
.ss-full-player__track-actions .ss-full-player__icon-button,
.ss-full-player__track-actions .ss-full-player__add,
.ss-full-player__track-actions .ss-full-player__download-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--ss-portrait-action-size);
height: var(--ss-portrait-action-size);
line-height: 1;
color: var(--ss-player-on-theme, #fff);
background: transparent !important;
transform: none;
}
.ss-full-player__track-actions .ss-full-player__icon-button i,
.ss-full-player__track-actions .ss-full-player__add i,
.ss-full-player__track-actions .ss-full-player__download-trigger i {
color: inherit;
font-size: var(--ss-portrait-action-icon-size);
line-height: 1;
}
.ss-full-player__timeline-row {
grid-area: timeline;
display: block;
align-self: center;
padding-top: 0;
}
.ss-full-player__seek-wrap {
height: 30px;
}
.ss-full-player__seek,
.ss-full-player__seek:hover,
.ss-full-player__seek:focus-visible,
.ss-full-player__seek:active,
.ss-full-player.is-seeking .ss-full-player__seek {
height: 3px;
transform: none;
box-shadow: none;
transition: background-color .18s ease;
}
.ss-full-player__seek::-webkit-slider-thumb {
width: 14px;
height: 14px;
margin-top: -5.5px !important;
background: var(--ss-player-on-theme, #fff);
box-shadow: 0 2px 10px rgba(0, 0, 0, .20);
transform: scale(.7);
}
.ss-full-player__seek::-moz-range-thumb {
width: 14px;
height: 14px;
background: var(--ss-player-on-theme, #fff);
box-shadow: 0 2px 10px rgba(0, 0, 0, .20);
transform: scale(.7);
}
.ss-full-player__time,
.ss-full-player__time-current,
.ss-full-player__time-duration {
color: var(--ss-player-on-theme, #fff);
font-size: 12px;
font-weight: 700;
}
.ss-full-player__controls {
grid-area: controls;
display: flex;
align-items: center;
justify-content: space-between;
align-self: center;
height: var(--ss-desktop-controls-row);
padding-top: 0;
}
.ss-full-player__control,
.ss-full-player__control:hover,
.ss-full-player__control:focus-visible {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--ss-portrait-control-size);
height: var(--ss-portrait-control-size);
color: var(--ss-player-on-theme, #fff);
background: transparent !important;
transform: none;
}
.ss-full-player__control i {
color: inherit;
font-size: var(--ss-portrait-control-icon-size);
line-height: 1;
}
.ss-full-player__prev,
.ss-full-player__prev:hover,
.ss-full-player__prev:focus-visible,
.ss-full-player__next,
.ss-full-player__next:hover,
.ss-full-player__next:focus-visible {
width: var(--ss-portrait-step-size);
height: var(--ss-portrait-step-size);
}
.ss-full-player__prev i,
.ss-full-player__next i {
font-size: var(--ss-portrait-step-icon-size);
font-weight: 900;
line-height: 1;
}
.ss-full-player__toggle,
.ss-full-player__toggle:hover,
.ss-full-player__toggle:focus-visible,
.ss-full-player__toggle.is-playing {
width: var(--ss-portrait-play-size);
height: var(--ss-portrait-play-size);
color: var(--ss-player-control-on-strong, #252525);
background: var(--ss-player-control-bg-strong, #fff) !important;
box-shadow: 0 18px 38px rgba(0, 0, 0, .14);
}
.ss-full-player__toggle i {
color: var(--ss-player-control-on-strong, #252525);
font-size: var(--ss-portrait-play-icon-size);
font-weight: 900;
line-height: 1;
}
.ss-full-player__footer {
grid-area: footer;
display: grid;
grid-template-columns: var(--ss-portrait-footer-slot-size) minmax(0, 1fr) var(--ss-portrait-footer-slot-size);
grid-template-areas: "timer quality queue";
align-items: center;
gap: 14px;
align-self: center;
height: var(--ss-desktop-footer-row);
padding-top: 0;
}
.ss-full-player__footer-side--start {
grid-area: timer;
justify-content: start;
}
.ss-full-player__footer-center {
display: contents;
}
.ss-full-player__footer-side--end {
display: none;
}
.ss-full-player__footer-action,
body .ss-full-player__footer-center .ss-full-player__queue-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: var(--ss-portrait-footer-slot-size);
max-width: var(--ss-portrait-footer-slot-size);
height: var(--ss-portrait-footer-slot-size);
padding: 0;
color: var(--ss-player-on-theme, #fff);
background: transparent !important;
font-size: 0;
transform: none;
}
.ss-full-player__footer-action i,
body .ss-full-player__footer-center .ss-full-player__queue-toggle i {
color: inherit;
font-size: var(--ss-portrait-footer-icon-size);
line-height: 1;
}
body .ss-full-player__footer-center .ss-full-player__queue-toggle {
grid-area: queue;
justify-self: end;
}
body .ss-full-player__queue-handle,
body .ss-full-player__volume-wrap {
display: none !important;
}
.ss-full-player__quality {
grid-area: quality;
justify-self: center;
width: auto;
max-width: var(--ss-portrait-audio-pill-max);
min-height: 40px;
padding: 0 14px;
gap: 9px;
color: var(--ss-player-on-theme, #fff);
background: transparent;
}
.ss-full-player__quality i {
color: inherit;
font-size: var(--ss-portrait-audio-icon-size);
line-height: 1;
}
.ss-full-player__quality-label {
overflow: hidden;
max-width: var(--ss-portrait-audio-label-max);
white-space: nowrap;
text-overflow: ellipsis;
}
.ss-full-player__queue-label,
.ss-full-player__queue-badge {
display: none !important;
}
}
@media (min-width: 1280px) {
body.ss-full-player-open .ss-full-player__sheet,
.ss-full-player__sheet {
--ss-desktop-pad-x: clamp(64px, 5.2vw, 144px);
--ss-desktop-cover-size: min(clamp(500px, 34vw, 540px), calc(100dvh - (var(--ss-desktop-pad-y) * 2) - var(--ss-desktop-header-row)));
--ss-desktop-panel-width: clamp(460px, 31vw, 600px);
--ss-desktop-gap: clamp(48px, calc((100vw - var(--ss-desktop-cover-size) - var(--ss-desktop-panel-width)) * .38), 132px);
--ss-portrait-title-size: clamp(32px, 2.25vw, 50px);
--ss-portrait-artist-size: clamp(18px, 1.25vw, 24px);
}
}
@media (min-width: 1920px) {
body.ss-full-player-open .ss-full-player__sheet,
.ss-full-player__sheet {
--ss-desktop-pad-x: clamp(96px, 5vw, 180px);
--ss-desktop-cover-size: min(clamp(540px, 28vw, 580px), calc(100dvh - (var(--ss-desktop-pad-y) * 2) - var(--ss-desktop-header-row)));
--ss-desktop-panel-width: clamp(560px, 28vw, 720px);
--ss-desktop-gap: clamp(76px, calc((100vw - var(--ss-desktop-cover-size) - var(--ss-desktop-panel-width)) * .28), 160px);
--ss-portrait-source-size: clamp(16px, .95vw, 20px);
--ss-portrait-title-size: clamp(38px, 2.15vw, 56px);
--ss-portrait-artist-size: clamp(20px, 1.15vw, 26px);
--ss-portrait-action-size: 54px;
--ss-portrait-action-icon-size: 32px;
--ss-portrait-step-size: 58px;
--ss-portrait-step-icon-size: 34px;
--ss-portrait-play-size: 82px;
--ss-portrait-play-icon-size: 33px;
--ss-portrait-footer-slot-size: 54px;
--ss-portrait-footer-icon-size: 25px;
--ss-portrait-audio-pill-max: 180px;
--ss-portrait-audio-label-max: 100px;
}
}
.ss-full-player__queue-mobile.ss-mini-player__queue-trigger {
width: 44px;
height: 44px;
background: transparent;
}
.ss-full-player__queue-mobile.ss-mini-player__queue-trigger::before {
color: rgba(255, 255, 255, .72);
font-size: 22px;
}
.ss-full-player__queue-mobile.ss-mini-player__queue-trigger:hover::before,
.ss-full-player__queue-mobile.ss-mini-player__queue-trigger:focus-visible::before,
.ss-full-player__queue-mobile.ss-mini-player__queue-trigger.is-active::before {
color: #fbcb07;
}
@media (min-width: 760px) {
.ss-mini-player {
--ss-mini-desktop-cover: clamp(50px, 4.4vw, 68px);
--ss-mini-desktop-control: clamp(36px, 3.2vw, 42px);
--ss-mini-desktop-step-icon: clamp(18px, 2vw, 21px);
--ss-mini-desktop-side-icon: 22px;
--ss-mini-desktop-session-icon: clamp(20px, 2.1vw, 22px);
--ss-mini-desktop-play: clamp(44px, 4.6vw, 54px);
left: 0;
right: 0;
bottom: 0;
display: none;
grid-template-columns:
minmax(220px, 1fr)
minmax(238px, clamp(250px, 35vw, 560px))
minmax(96px, .72fr);
grid-template-rows: minmax(48px, auto) 12px;
grid-template-areas:
"media transport actions"
"media progress actions";
align-items: center;
column-gap: clamp(14px, 2.2vw, 58px);
row-gap: 4px;
min-height: clamp(78px, 5.6vw, 96px);
padding: 10px clamp(16px, 2.4vw, 72px) 10px;
border: 0;
border-radius: 0;
background: rgb(18 18 18);
box-shadow: 0 -16px 38px rgba(0, 0, 0, .24);
color: #fff;
opacity: 1;
overflow: hidden;
}
body .ss-mini-player {
padding: 10px clamp(16px, 2.4vw, 72px) 10px;
}
.ss-mini-player.is-visible {
display: grid;
}
.ss-mini-player__media {
grid-area: media;
display: grid;
grid-template-columns: var(--ss-mini-desktop-cover) minmax(0, 1fr) auto;
grid-template-rows: minmax(0, auto);
align-items: center;
justify-self: start;
width: 100%;
max-width: min(38vw, 560px);
min-width: 0;
gap: clamp(12px, 1vw, 16px);
cursor: pointer;
}
.ss-mini-player__cover,
body .ss-mini-player__media .ss-mini-player__cover {
grid-column: 1;
width: var(--ss-mini-desktop-cover);
height: var(--ss-mini-desktop-cover);
max-width: var(--ss-mini-desktop-cover);
flex: 0 0 var(--ss-mini-desktop-cover);
border-radius: 4px;
}
.ss-mini-player__meta {
grid-column: 2;
display: flex;
min-width: 0;
flex-direction: column;
justify-content: center;
gap: 3px;
text-align: left;
direction: ltr;
}
.ss-mini-player__title {
color: #fff;
font-size: clamp(14px, .78vw, 15px);
font-weight: 650;
line-height: 1.22;
letter-spacing: 0;
}
.ss-mini-player__artist {
display: block;
margin-top: 0;
overflow: hidden;
color: rgba(255, 255, 255, .68);
font-size: clamp(12px, .68vw, 13px);
font-weight: 400;
line-height: 1.28;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
direction: ltr;
}
.ss-mini-player__track-actions {
grid-column: 3;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
min-width: 0;
}
.ss-mini-player__track-actions .ss-mini-player__add,
.ss-mini-player__track-actions .ss-mini-player__download-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ss-mini-player__track-actions .ss-mini-player__add,
.ss-mini-player__track-actions .ss-mini-player__download-trigger {
width: clamp(36px, 3.3vw, 40px);
height: clamp(36px, 3.3vw, 40px);
min-width: clamp(36px, 3.3vw, 40px);
min-height: clamp(36px, 3.3vw, 40px);
color: rgba(255, 255, 255, .96);
background: transparent;
}
.ss-mini-player__track-actions .ss-mini-player__add i,
.ss-mini-player__track-actions .ss-mini-player__download-trigger i {
color: currentColor;
font-size: clamp(22px, 2.3vw, 24px);
line-height: 1;
}
.ss-mini-player__controls {
gap: clamp(8px, .72vw, 12px);
margin-left: 0;
}
.ss-mini-player__controls--transport {
grid-area: transport;
justify-self: center;
justify-content: space-between;
width: 100%;
max-width: clamp(250px, 34vw, 430px);
min-width: 0;
}
.ss-mini-player__shuffle,
.ss-mini-player__prev,
.ss-mini-player__toggle,
.ss-mini-player__next,
.ss-mini-player__repeat {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ss-mini-player__button,
.ss-mini-player__queue-trigger,
.ss-mini-player__quality {
width: var(--ss-mini-desktop-control);
height: var(--ss-mini-desktop-control);
min-width: var(--ss-mini-desktop-control);
min-height: var(--ss-mini-desktop-control);
padding: 0;
border: 0;
background: transparent;
color: rgba(255, 255, 255, .96);
}
.ss-mini-player__button:hover,
.ss-mini-player__button:focus-visible,
.ss-mini-player__queue-trigger:hover,
.ss-mini-player__queue-trigger:focus-visible,
.ss-mini-player__quality:hover,
.ss-mini-player__quality:focus-visible {
background: rgba(255, 255, 255, .08);
color: #fff;
}
.ss-mini-player__shuffle i,
.ss-mini-player__repeat i {
color: currentColor;
font-size: clamp(16px, 1.8vw, 18px);
line-height: 1;
}
.ss-mini-player__prev i,
.ss-mini-player__next i {
color: currentColor;
font-size: var(--ss-mini-desktop-step-icon);
line-height: 1;
}
.ss-mini-player__toggle,
.ss-mini-player__toggle:hover,
.ss-mini-player__toggle:focus-visible,
.ss-mini-player__toggle.is-playing {
width: var(--ss-mini-desktop-play);
height: var(--ss-mini-desktop-play);
min-width: var(--ss-mini-desktop-play);
min-height: var(--ss-mini-desktop-play);
background: #fff;
color: #1b1b1b;
}
.ss-mini-player__toggle i {
color: currentColor;
font-size: clamp(20px, 2.3vw, 23px);
line-height: 1;
padding-left: 2px;
}
.ss-mini-player__progress {
position: static;
grid-area: progress;
display: block;
justify-self: stretch;
width: 100%;
max-width: clamp(250px, 35vw, 560px);
height: 12px;
pointer-events: auto;
z-index: 1;
}
.ss-mini-player__seek {
display: block;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
margin: 4px 0 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .18);
outline: 0;
cursor: pointer;
pointer-events: auto;
box-shadow: none;
}
.ss-mini-player__seek::-webkit-slider-runnable-track {
height: 4px;
background: transparent;
}
.ss-mini-player__seek::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
margin-top: -5px;
border: 0;
border-radius: 999px;
background: #fff;
box-shadow: 0 3px 10px rgba(255, 255, 255, .16);
opacity: 0;
transform: scale(.72);
transition: opacity .16s ease, transform .16s ease;
}
.ss-mini-player__seek::-moz-range-track {
height: 4px;
border: 0;
background: transparent;
}
.ss-mini-player__seek::-moz-range-thumb {
width: 14px;
height: 14px;
border: 0;
border-radius: 999px;
background: #fff;
box-shadow: 0 3px 10px rgba(255, 255, 255, .16);
opacity: 0;
transform: scale(.72);
transition: opacity .16s ease, transform .16s ease;
}
.ss-mini-player__seek:hover,
.ss-mini-player__seek:focus-visible,
.ss-mini-player__seek:active,
.ss-mini-player.is-seeking .ss-mini-player__seek {
height: 4px;
box-shadow: none;
}
.ss-mini-player__seek:hover::-webkit-slider-thumb,
.ss-mini-player__seek:focus-visible::-webkit-slider-thumb,
.ss-mini-player__seek:active::-webkit-slider-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-webkit-slider-thumb {
opacity: 1;
transform: scale(1);
}
.ss-mini-player__seek:hover::-moz-range-thumb,
.ss-mini-player__seek:focus-visible::-moz-range-thumb,
.ss-mini-player__seek:active::-moz-range-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-moz-range-thumb {
opacity: 1;
transform: scale(1);
}
.ss-mini-player__controls--actions,
body .ss-mini-player__controls--actions {
grid-area: actions;
display: flex;
align-items: center;
justify-self: end;
justify-content: flex-end;
width: auto;
min-width: clamp(88px, 8vw, 96px);
gap: clamp(6px, .8vw, 8px);
}
.ss-mini-player__controls--actions .ss-mini-player__quality,
.ss-mini-player__controls--actions .ss-mini-player__queue-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(40px, 3.8vw, 44px);
height: clamp(40px, 3.8vw, 44px);
min-width: clamp(40px, 3.8vw, 44px);
min-height: clamp(40px, 3.8vw, 44px);
padding: 0;
color: rgba(255, 255, 255, .96);
background: transparent;
}
body .ss-mini-player__controls--actions .ss-mini-player__quality {
width: clamp(40px, 3.8vw, 44px);
min-width: clamp(40px, 3.8vw, 44px);
padding: 0;
}
.ss-mini-player__controls--actions .ss-mini-player__quality i {
color: currentColor;
font-size: var(--ss-mini-desktop-session-icon);
line-height: 1;
}
.ss-mini-player__queue-trigger::before {
color: currentColor;
font-size: var(--ss-mini-desktop-session-icon);
font-weight: 300;
line-height: 1;
transform: none;
}
.ss-mini-player__controls--actions .ss-mini-player__quality-label,
.ss-mini-player__volume-wrap {
display: none !important;
}
.ss-mini-player__queue-trigger:hover::before,
.ss-mini-player__queue-trigger:focus-visible::before,
.ss-mini-player__queue-trigger.is-active::before,
.ss-mini-player__quality:hover i,
.ss-mini-player__quality:focus-visible i,
.ss-mini-player__quality.is-active i {
color: #fff;
transform: none;
}
body.ss-mini-visible {
padding-bottom: clamp(82px, 6.1vw, 100px);
}
}
@media (min-width: 760px) {
#ss-player-quality-panel.ss-sheet--quality {
--ss-quality-sheet-bg: rgb(18 18 18);
--ss-quality-sheet-border: rgba(255, 255, 255, .08);
--ss-quality-sheet-muted: rgba(255, 255, 255, .64);
}
#ss-player-quality-panel.ss-player-login-prompt .ss-player-quality-panel__backdrop {
background: rgba(0, 0, 0, .34);
}
#ss-player-quality-panel.ss-player-login-prompt .ss-player-quality-panel__dialog {
top: auto;
right: clamp(16px, 2.4vw, 72px);
bottom: clamp(94px, 7vw, 112px);
left: auto;
width: min(380px, calc(100vw - 32px));
max-height: min(640px, calc(100dvh - 132px));
padding: 18px;
border: 1px solid var(--ss-quality-sheet-border);
border-radius: 20px;
background: var(--ss-quality-sheet-bg);
box-shadow: 0 22px 58px rgba(0, 0, 0, .34);
text-align: right;
overflow: auto;
transform: translate3d(0, 14px, 0) scale(.985);
transform-origin: bottom right;
}
#ss-player-quality-panel.ss-player-login-prompt.is-visible .ss-player-quality-panel__dialog {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
#ss-player-quality-panel.ss-player-login-prompt.is-closing .ss-player-quality-panel__dialog {
opacity: 0;
transform: translate3d(0, 14px, 0) scale(.985);
}
#ss-player-quality-panel .ss-player-quality-panel__head {
min-height: 42px;
margin-bottom: 14px;
padding-left: 46px;
}
#ss-player-quality-panel .ss-player-quality-panel__icon {
width: 40px;
height: 40px;
color: #fff;
background: rgba(255, 255, 255, .08);
}
#ss-player-quality-panel .ss-player-quality-panel__title {
color: #fff;
font-size: 18px;
font-weight: 800;
}
#ss-player-quality-panel .ss-player-quality-panel__section-title {
color: var(--ss-quality-sheet-muted);
}
#ss-player-quality-panel .ss-player-quality-panel__option,
#ss-player-quality-panel .ss-player-quality-panel__volume {
border-color: rgba(255, 255, 255, .08);
background: rgba(255, 255, 255, .045);
}
#ss-player-quality-panel .ss-player-quality-panel__option:hover,
#ss-player-quality-panel .ss-player-quality-panel__option:focus-visible,
#ss-player-quality-panel .ss-player-quality-panel__option.is-selected {
border-color: rgba(255, 255, 255, .22);
background: rgba(255, 255, 255, .085);
}
#ss-player-quality-panel .ss-player-quality-panel__option-icon {
color: #fff;
background: rgba(255, 255, 255, .08);
}
}
.ss-player-queue-panel {
--ss-queue-header-offset: 72px;
--ss-queue-player-offset: clamp(84px, 5.8vw, 108px);
position: fixed;
inset: 0;
z-index: 100004;
pointer-events: none;
}
.ss-player-queue-panel__backdrop {
position: absolute;
top: var(--ss-queue-header-offset);
right: 0;
bottom: var(--ss-queue-player-offset);
left: 0;
background: rgba(8, 8, 8, .38);
opacity: 0;
transition: opacity .22s ease;
}
.ss-player-queue-panel__sheet {
--ss-queue-drag-y: 0px;
position: absolute;
top: var(--ss-queue-header-offset);
right: 0;
bottom: var(--ss-queue-player-offset);
display: flex;
flex-direction: column;
width: min(420px, calc(100vw - 28px));
max-height: none;
min-height: 0;
padding: 0 16px 16px;
border: 1px solid rgba(255, 255, 255, .08);
border-right: 0;
border-radius: 24px 0 0 24px;
background: #151515;
backdrop-filter: blur(18px);
box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
opacity: 0;
overflow: hidden;
transform: translate3d(24px, var(--ss-queue-drag-y), 0) scale(.985);
transform-origin: center right;
transition: opacity .2s ease, transform .26s cubic-bezier(.22, 1, .36, 1), box-shadow .24s ease;
touch-action: pan-y;
}
.ss-player-queue-panel.is-open {
pointer-events: none;
}
.ss-player-queue-panel.is-open .ss-player-queue-panel__backdrop {
opacity: 1;
pointer-events: auto;
}
.ss-player-queue-panel.is-open .ss-player-queue-panel__sheet {
opacity: 1;
pointer-events: auto;
transform: translate3d(0, var(--ss-queue-drag-y), 0) scale(1);
}
.ss-player-queue-panel.is-dragging .ss-player-queue-panel__sheet {
transition: none;
}
.ss-player-queue-panel.is-closing .ss-player-queue-panel__backdrop {
opacity: 0;
}
.ss-player-queue-panel.is-closing .ss-player-queue-panel__sheet {
opacity: 0;
transform: translate3d(20px, var(--ss-queue-drag-y), 0) scale(.985);
}
.ss-player-queue-panel__head,
.ss-player-queue-panel__tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.ss-player-queue-panel__head {
position: relative;
flex: 0 0 auto;
margin-bottom: 16px;
}
.ss-player-queue-panel__title {
display: inline-flex;
align-items: center;
gap: 8px;
color: #fff;
font-size: 16px;
font-weight: 800;
}
.ss-player-queue-panel__title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
border: 0;
border-radius: 999px;
background: transparent;
color: rgba(255, 255, 255, .38);
box-shadow: none;
}
.ss-player-queue-panel__title-icon i {
font-size: 17px;
}
.ss-player-queue-panel__title-count {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 4px;
border-radius: 50px;
background: #fbcb07;
color: #151515;
font-size: 12px;
font-weight: 900;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.ss-player-queue-panel__title-count[hidden] {
display: none !important;
}
.ss-player-queue-panel__menu-toggle,
.ss-player-queue-panel__close,
.ss-player-queue-panel__reset,
.ss-player-queue-panel__drag,
.ss-player-queue-panel__remove {
border: 0;
background: transparent;
}
.ss-player-queue-panel__head-actions {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
direction: ltr;
}
.ss-player-queue-panel__menu-toggle,
.ss-player-queue-panel__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border-radius: 999px;
color: rgba(255, 255, 255, .56);
line-height: 1;
}
.ss-player-queue-panel__menu-toggle i,
.ss-player-queue-panel__close i {
display: block;
line-height: 1;
}
.ss-player-queue-panel__menu-toggle[aria-expanded="true"] {
color: #fbcb07;
background: rgba(251, 203, 7, .09);
}
.ss-player-queue-panel__menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 3;
min-width: 142px;
padding: 6px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 10px;
background: rgba(22, 22, 22, .98);
box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
direction: rtl;
}
.ss-player-queue-panel__menu[hidden] {
display: none !important;
}
.ss-player-queue-panel__reset {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
width: 100%;
min-height: 34px;
padding: 0 9px;
border-radius: 8px;
color: rgba(255, 255, 255, .72);
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.ss-player-queue-panel__current-label,
.ss-player-queue-panel__next-label {
display: none !important;
align-items: center;
justify-content: flex-start;
flex-direction: row-reverse;
gap: 8px;
width: 100%;
color: rgba(255, 255, 255, .62);
font-size: 12px;
font-weight: 700;
text-align: right;
direction: ltr;
}
.ss-player-queue-panel__current-label::before,
.ss-player-queue-panel__next-label::before {
font-family: 'Font Awesome 5 Pro';
font-weight: 400;
font-size: 13px;
line-height: 1;
color: rgba(255, 255, 255, .58);
}
.ss-player-queue-panel__current-label::before {
content: "\f144";
}
.ss-player-queue-panel__next-label::before {
content: "\f051";
}
.ss-player-queue-panel__current-label {
flex: 0 0 auto;
margin-top: 14px;
}
.ss-player-queue-panel__current {
flex: 0 0 auto;
margin-top: 0;
}
.ss-player-queue-panel__next-label {
flex: 0 0 auto;
margin-top: 16px;
}
.ss-player-queue-panel__tools {
display: none;
}
.ss-player-queue-panel__empty {
color: rgba(255, 255, 255, .52);
font-size: 13px;
text-align: center;
padding: 14px 0 6px;
}
.ss-player-queue-panel__list {
flex: 1 1 auto;
display: grid;
gap: 8px;
min-height: 0;
margin: 14px 0 0;
padding: 0;
list-style: none;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.ss-player-queue-panel__list::-webkit-scrollbar {
width: 4px;
}
.ss-player-queue-panel__list::-webkit-scrollbar-track {
background: transparent;
}
.ss-player-queue-panel__list::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(255, 255, 255, .16);
}
.ss-player-queue-panel__list::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, .24);
}
.ss-player-queue-panel__item {
display: grid;
gap: 0;
padding: 8px 6px;
border-radius: 10px;
background: transparent;
transition: background-color .24s ease, transform .24s cubic-bezier(.22, 1, .36, 1), box-shadow .24s ease, opacity .2s ease;
}
.ss-player-queue-panel__item.is-current {
padding: 9px 8px;
background: rgba(255, 255, 255, .032);
box-shadow: none;
}
.ss-player-queue-panel__item.is-select-feedback {
background: rgba(251, 203, 7, .06);
box-shadow: inset 2px 0 0 rgba(251, 203, 7, .52);
}
.ss-player-queue-panel__item.is-dragging {
opacity: .58;
transform: scale(.985);
}
.ss-player-queue-panel__item.is-reorder-dragging {
opacity: .82;
background: rgba(255, 255, 255, .07);
box-shadow: 0 14px 32px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(251, 203, 7, .14);
}
.ss-player-queue-panel__item.is-drop-target {
background: rgba(255, 255, 255, .075);
box-shadow: inset 0 0 0 1px rgba(251, 203, 7, .18);
transform: translateX(-2px);
}
.ss-player-queue-panel__item.is-reorder-target {
background: rgba(251, 203, 7, .08);
box-shadow: inset 3px 0 0 rgba(251, 203, 7, .7), inset 0 0 0 1px rgba(251, 203, 7, .14);
}
.ss-player-queue-panel__item:hover {
background: rgba(255, 255, 255, .045);
box-shadow: none;
}
.ss-player-queue-panel__item.is-current:hover {
background: rgba(255, 255, 255, .045);
}
.ss-player-queue-panel__row {
display: grid;
grid-template-columns: 30px 52px minmax(0, 1fr) 34px;
align-items: center;
gap: 12px;
width: 100%;
direction: ltr;
}
.ss-player-queue-panel__item.is-current .ss-player-queue-panel__row {
grid-template-columns: 52px minmax(0, 1fr);
}
.ss-player-queue-panel__cover,
.ss-player-queue-panel__meta {
border: 0;
background: transparent;
cursor: pointer;
}
.ss-player-queue-panel__cover {
position: relative;
overflow: hidden;
width: 54px;
height: 54px;
border-radius: 6px;
background-color: rgba(255, 255, 255, .06);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.ss-player-queue-panel__item.is-current .ss-player-queue-panel__cover {
box-shadow: 0 0 0 1px rgba(251, 203, 7, .18), 0 0 0 4px rgba(251, 203, 7, .035);
}
.ss-player-queue-panel__item.is-current .ss-player-queue-panel__item-title {
color: rgba(255, 255, 255, .96);
}
.ss-player-queue-panel__now-playing {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
background: rgba(16, 16, 16, .28);
backdrop-filter: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
opacity: 0;
transform: scale(.98);
transition: opacity .22s ease, transform .22s ease, background-color .22s ease;
}
.ss-player-queue-panel__cover.has-now-playing .ss-player-queue-panel__now-playing {
opacity: .9;
transform: scale(1);
}
.ss-player-queue-panel__now-playing span {
display: block;
width: 1.5px;
height: 14px;
border-radius: 999px;
background: rgba(255, 247, 214, .95);
box-shadow: 0 0 6px rgba(255, 247, 214, .08);
transform-origin: center bottom;
}
.ss-player-queue-panel__cover.is-playing .ss-player-queue-panel__now-playing span:nth-child(1) {
animation: ssQueueNowPlaying 1.05s ease-in-out infinite;
}
.ss-player-queue-panel__cover.is-playing .ss-player-queue-panel__now-playing span:nth-child(2) {
animation: ssQueueNowPlaying .92s ease-in-out -.16s infinite;
}
.ss-player-queue-panel__cover.is-playing .ss-player-queue-panel__now-playing span:nth-child(3) {
animation: ssQueueNowPlaying 1.12s ease-in-out -.28s infinite;
}
@keyframes ssQueueNowPlaying {
0%, 100% {
height: 5px;
opacity: .78;
}
45% {
height: 15px;
opacity: 1;
}
70% {
height: 10px;
opacity: .88;
}
}
.ss-player-queue-panel__meta {
min-width: 0;
padding: 0;
text-align: left;
direction: ltr;
}
.ss-player-queue-panel__item-title,
.ss-player-queue-panel__item-subtitle {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ss-player-queue-panel__item-title {
color: #fff;
font-size: 13.5px;
font-weight: 700;
line-height: 1.35;
}
.ss-player-queue-panel__item-subtitle {
margin-top: 3px;
color: rgba(255, 255, 255, .46);
font-size: 12px;
line-height: 1.35;
}
.ss-player-queue-panel__actions {
display: flex;
align-items: center;
justify-content: end;
}
.ss-player-queue-panel__drag,
.ss-player-queue-panel__remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
line-height: 1;
transition: color .18s ease, background-color .18s ease, opacity .18s ease, transform .18s ease;
}
.ss-player-queue-panel__drag i,
.ss-player-queue-panel__remove i {
display: block;
line-height: 1;
}
.ss-player-queue-panel__drag {
border-radius: 999px;
color: rgba(255, 255, 255, .36);
background: transparent;
}
.ss-player-queue-panel__remove {
border-radius: 999px;
color: rgba(255, 255, 255, .34);
background: transparent;
box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
.ss-player-queue-panel__remove {
opacity: 0;
transform: translateX(-3px);
}
.ss-player-queue-panel__item:hover .ss-player-queue-panel__remove,
.ss-player-queue-panel__item:focus-within .ss-player-queue-panel__remove,
.ss-player-queue-panel__remove:focus-visible {
opacity: 1;
transform: translateX(0);
}
.ss-player-queue-panel__item:hover .ss-player-queue-panel__drag,
.ss-player-queue-panel__item:focus-within .ss-player-queue-panel__drag {
color: #fbcb07;
}
}
.ss-player-queue-panel__item.is-dragging .ss-player-queue-panel__drag,
.ss-player-queue-panel__item.is-drop-target .ss-player-queue-panel__drag {
color: #fbcb07;
}
.ss-player-queue-panel__drag {
touch-action: none;
cursor: grab;
-webkit-user-select: none;
user-select: none;
}
.ss-player-queue-panel__drag:active,
.ss-player-queue-panel__drag[aria-grabbed="true"] {
color: #fbcb07;
background: rgba(251, 203, 7, .1);
cursor: grabbing;
transform: scale(.96);
}
body.ss-queue-touch-dragging,
body.ss-queue-reorder-active {
user-select: none;
-webkit-user-select: none;
}
.ss-player-queue-panel__drag:disabled,
.ss-player-queue-panel__remove:disabled {
opacity: .28;
pointer-events: none;
}
.ss-player-queue-panel__menu-toggle:hover,
.ss-player-queue-panel__menu-toggle:focus-visible,
.ss-player-queue-panel__close:hover,
.ss-player-queue-panel__close:focus-visible,
.ss-player-queue-panel__drag:hover,
.ss-player-queue-panel__drag:focus-visible,
.ss-player-queue-panel__remove:hover,
.ss-player-queue-panel__remove:focus-visible,
.ss-player-queue-panel__reset:hover,
.ss-player-queue-panel__reset:focus-visible,
.ss-player-queue-panel__cover:hover,
.ss-player-queue-panel__cover:focus-visible,
.ss-player-queue-panel__meta:hover .ss-player-queue-panel__item-title,
.ss-player-queue-panel__meta:focus-visible .ss-player-queue-panel__item-title,
.ss-single-player-queue:hover,
.ss-single-player-queue:focus-visible,
.ss-mini-player__queue-trigger:hover,
.ss-mini-player__queue-trigger:focus-visible {
color: #fbcb07;
outline: 0;
}
.ss-player-queue-panel__reset:hover,
.ss-player-queue-panel__reset:focus-visible {
background: rgba(255, 255, 255, .055);
}
.ss-player-queue-panel__remove:hover,
.ss-player-queue-panel__remove:focus-visible {
color: #cf4a4a;
background: rgba(207, 74, 74, .1);
box-shadow: none;
}
.ss-player-download-panel {
position: fixed;
inset: 0;
z-index: 100003;
pointer-events: none;
}
.ss-player-download-panel__backdrop {
position: absolute;
inset: 0;
background: rgba(8, 8, 8, .54);
opacity: 0;
transition: opacity .22s ease;
}
.ss-player-download-panel__sheet {
position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
width: min(390px, calc(100vw - 32px));
max-height: min(72vh, 620px);
padding: 16px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 26px;
background: rgb(18 54 46 / 96%);
backdrop-filter: blur(18px);
box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
opacity: 0;
transform: translate3d(calc(-50% + 28px), -50%, 0) scale(.985);
transform-origin: center;
transition: opacity .2s ease, transform .26s cubic-bezier(.22, 1, .36, 1), box-shadow .24s ease;
}
.ss-player-download-panel.is-open {
pointer-events: auto;
}
.ss-player-download-panel.is-open .ss-player-download-panel__backdrop {
opacity: 1;
}
.ss-player-download-panel.is-open .ss-player-download-panel__sheet {
opacity: 1;
transform: translate3d(-50%, -50%, 0) scale(1);
}
.ss-player-download-panel.is-closing {
pointer-events: none;
}
.ss-player-download-panel.is-closing .ss-player-download-panel__backdrop {
opacity: 0;
}
.ss-player-download-panel.is-closing .ss-player-download-panel__sheet {
opacity: 0;
transform: translate3d(calc(-50% + 24px), -50%, 0) scale(.985);
}
.ss-player-download-panel__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
direction: ltr;
}
.ss-player-download-panel__title-group {
min-width: 0;
flex: 1 1 auto;
text-align: left;
}
.ss-player-download-panel__title {
display: inline-flex;
align-items: center;
gap: 10px;
color: #fff;
font-size: 16px;
font-weight: 800;
max-width: 100%;
direction: ltr;
text-align: left;
}
.ss-player-download-panel__title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 42px;
background: rgb(255 255 255);
color: #0e4c3e;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.ss-player-download-panel__title-icon i {
font-size: 14px;
}
.ss-player-download-panel__title-text {
display: inline-block;
min-width: 0;
max-width: min(58vw, 360px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ss-player-download-panel__subtitle {
display: none;
margin-top: 8px;
color: rgba(255, 255, 255, .56);
font-size: 13px;
font-weight: 500;
line-height: 1.7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: ltr;
text-align: left;
}
.ss-player-download-panel__close {
width: 40px;
height: 40px;
border: 0;
border-radius: 999px;
color: rgba(255, 255, 255, .74);
background: rgba(255, 255, 255, .05);
}
.ss-player-download-panel__body {
display: flex;
flex-direction: column;
min-height: 0;
}
.ss-player-download-panel__list {
display: grid;
gap: 10px;
max-height: min(54vh, 460px);
overflow-y: auto;
padding-right: 2px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.ss-player-download-panel__list::-webkit-scrollbar {
width: 4px;
}
.ss-player-download-panel__list::-webkit-scrollbar-track {
background: transparent;
}
.ss-player-download-panel__list::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(255, 255, 255, .16);
}
.ss-player-download-panel__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 14px;
border: 1px solid rgba(255, 255, 255, .06);
border-radius: 16px;
background: rgba(255, 255, 255, .04);
color: rgba(255, 255, 255, .88);
font-size: 14px;
font-weight: 700;
line-height: 1.5;
direction: ltr;
text-align: left;
text-decoration: none !important;
transition: transform .22s ease, color .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}
.ss-player-download-panel__item:hover,
.ss-player-download-panel__item:focus-visible,
.ss-player-download-panel__item.is-current {
color: #fbcb07;
border-color: rgba(251, 203, 7, .18);
background: rgba(251, 203, 7, .08);
box-shadow: 0 10px 22px rgba(0, 0, 0, .14);
outline: 0;
}
.ss-player-download-panel__item-label {
flex: 1 1 auto;
min-width: 0;
direction: ltr;
text-align: left;
}
.ss-player-download-panel__item-icon {
flex: 0 0 auto;
color: inherit;
}
.ss-player-download-panel__item--single-static {
direction: rtl;
text-align: right;
}
.ss-player-download-panel__item--single-static .ss-player-download-panel__item-label {
direction: rtl;
text-align: right;
}
.ss-player-download-panel__item--single-static .ss-player-download-panel__item-icon {
direction: ltr;
}
.ss-player-playlist-panel {
--ss-sheet-desktop-width: min(92vw, 520px);
--ss-sheet-desktop-max-height: min(82vh, 720px);
--ss-sheet-mobile-max-height: min(82vh, 640px);
--ss-sheet-radius: 24px;
--ss-sheet-mobile-radius: 28px 28px 0 0;
position: fixed;
inset: 0;
z-index: 10160;
pointer-events: none;
}
.ss-player-playlist-create-prompt {
--ss-sheet-desktop-width: min(92vw, 520px);
--ss-sheet-desktop-max-height: min(86vh, 760px);
--ss-sheet-mobile-max-height: min(88vh, 720px);
--ss-sheet-radius: 28px;
--ss-sheet-mobile-radius: 28px 28px 0 0;
}
.ss-player-playlist-create-prompt.is-from-playlist-panel {
z-index: 10190;
}
.ss-player-playlist-panel.is-create-prompt-open {
pointer-events: none;
}
.ss-player-playlist-panel.is-create-prompt-open .ss-player-playlist-panel__backdrop {
opacity: .72;
}
.ss-player-playlist-panel.is-create-prompt-open .ss-player-playlist-panel__sheet {
opacity: .28;
transform: translate3d(-50%, -50%, 0) scale(.97);
filter: blur(1px);
}
.ss-player-playlist-panel__backdrop {
position: absolute;
inset: 0;
background: rgba(8, 8, 8, .54);
opacity: 0;
will-change: opacity;
backface-visibility: hidden;
transition: opacity .22s ease;
}
.ss-player-playlist-panel__sheet {
position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
width: min(92vw, 520px);
max-width: 520px;
height: min(82vh, 720px);
max-height: min(82vh, 720px);
padding: 22px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 24px;
background: rgba(14, 15, 17, .98);
box-shadow: 0 24px 72px rgba(0, 0, 0, .38);
color: #fff;
opacity: 0;
transform: translate3d(calc(-50% + 28px), -50%, 0) scale(.985);
will-change: opacity, transform;
backface-visibility: hidden;
contain: layout paint style;
transition: opacity .2s ease, transform .26s cubic-bezier(.22, 1, .36, 1), box-shadow .24s ease;
direction: rtl;
text-align: right;
}
.ss-player-playlist-panel.is-visible,
.ss-player-playlist-panel.is-open {
pointer-events: auto;
}
.ss-player-playlist-panel.is-visible .ss-player-playlist-panel__backdrop,
.ss-player-playlist-panel.is-open .ss-player-playlist-panel__backdrop {
opacity: 1;
}
.ss-player-playlist-panel.is-visible .ss-player-playlist-panel__sheet,
.ss-player-playlist-panel.is-open .ss-player-playlist-panel__sheet {
opacity: 1;
transform: translate3d(-50%, -50%, 0) scale(1);
}
.ss-player-playlist-panel.is-closing {
pointer-events: none;
}
.ss-player-playlist-panel.is-closing .ss-player-playlist-panel__backdrop {
opacity: 0;
}
.ss-player-playlist-panel.is-closing .ss-player-playlist-panel__sheet {
opacity: 0;
transform: translate3d(calc(-50% + 24px), -50%, 0) scale(.985);
}
.ss-player-playlist-panel__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding-left: 46px;
margin-bottom: 16px;
}
.ss-player-playlist-panel__title-group {
min-width: 0;
flex: 1 1 auto;
}
.ss-player-playlist-panel__title {
display: inline-flex;
align-items: center;
gap: 8px;
color: #fff;
font-size: 17px;
font-weight: 800;
}
.ss-player-playlist-panel__title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 0;
border-radius: 0;
background: transparent;
color: #fbcb07;
box-shadow: none;
}
.ss-player-playlist-panel__title-icon i {
font-size: 16px;
}
.ss-player-playlist-panel__close {
z-index: 2;
}
.ss-player-playlist-panel__body {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
flex: 1 1 auto;
overflow: hidden;
padding-right: 2px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.ss-player-playlist-panel__body::-webkit-scrollbar {
width: 4px;
}
.ss-player-playlist-panel__body::-webkit-scrollbar-track {
background: transparent;
}
.ss-player-playlist-panel__body::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(255, 255, 255, .16);
}
.ss-player-playlist-panel__form {
display: none;
}
.ss-player-playlist-panel__select,
.ss-player-playlist-panel__input {
width: 100%;
min-width: 0;
height: 48px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
background: rgba(255, 255, 255, .05);
color: #fff;
font-size: 14px;
font-weight: 600;
padding: 0 14px;
box-shadow: none;
outline: 0;
}
.ss-player-playlist-panel__select {
direction: rtl;
text-align: right;
appearance: none;
}
.ss-player-playlist-panel__select option {
color: #111;
}
.ss-player-playlist-panel__search-wrap {
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 0 14px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
background: rgba(255, 255, 255, .05);
color: rgba(255, 255, 255, .52);
}
.ss-player-playlist-panel__search-wrap i {
color: rgba(251, 203, 7, .86);
font-size: 14px;
}
.ss-player-playlist-panel__search {
width: 100%;
min-width: 0;
height: 46px;
border: 0;
background: transparent;
color: #fff;
font-size: 14px;
font-weight: 600;
outline: 0;
}
.ss-player-playlist-panel__search::placeholder {
color: rgba(255, 255, 255, .46);
}
.ss-player-playlist-panel__select:focus,
.ss-player-playlist-panel__input:focus,
.ss-player-playlist-panel__search-wrap:focus-within {
border-color: rgba(251, 203, 7, .34);
background: rgba(255, 255, 255, .07);
}
.ss-player-playlist-panel__submit,
.ss-player-playlist-panel__new-submit {
min-width: 94px;
height: 48px;
padding: 0 16px;
border: 0;
border-radius: 16px;
background: #fbcb07;
color: #111;
font-size: 14px;
font-weight: 800;
transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.ss-player-playlist-panel__submit:hover,
.ss-player-playlist-panel__submit:focus-visible,
.ss-player-playlist-panel__new-submit:hover,
.ss-player-playlist-panel__new-submit:focus-visible {
background: #ffd84f;
box-shadow: 0 14px 26px rgba(251, 203, 7, .16);
transform: translateY(-1px);
outline: 0;
}
.ss-player-playlist-panel__new-toggle {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
width: 100%;
min-height: 34px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #fbcb07;
font-size: 14px;
font-weight: 800;
transition: color .22s ease, transform .22s ease;
}
.ss-player-playlist-panel__new-toggle i {
color: #fbcb07;
font-size: 14px;
}
.ss-player-playlist-panel__new-toggle:hover,
.ss-player-playlist-panel__new-toggle:focus-visible,
.ss-player-playlist-panel.is-creating .ss-player-playlist-panel__new-toggle {
color: #ffd84f;
background: transparent;
transform: translateY(-1px);
outline: 0;
}
.ss-player-playlist-panel__new-form {
display: none;
}
.ss-player-playlist-panel__new-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}
.ss-player-playlist-panel__list {
display: grid;
align-content: start;
gap: 2px;
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow-y: auto;
padding: 0 2px 10px 2px;
border: 0;
border-radius: 0;
background: transparent;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.ss-player-playlist-panel__list::-webkit-scrollbar {
width: 4px;
}
.ss-player-playlist-panel__list::-webkit-scrollbar-track {
background: transparent;
}
.ss-player-playlist-panel__list::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(255, 255, 255, .16);
}
.ss-player-playlist-panel__item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 48px;
padding: 5px 0;
border: 0;
border-radius: 0;
background: transparent;
color: rgba(255, 255, 255, .9);
font-size: 14px;
font-weight: 700;
line-height: 1.6;
text-align: right;
transition: color .18s ease, opacity .18s ease;
}
.ss-player-playlist-panel__item:hover,
.ss-player-playlist-panel__item:focus-visible,
.ss-player-playlist-panel__item.is-loading,
.ss-player-playlist-panel__item.is-added,
.ss-player-playlist-panel__item.is-selected {
color: #fbcb07;
background: transparent;
outline: 0;
}
.ss-player-playlist-panel__item:hover,
.ss-player-playlist-panel__item:focus-visible {
opacity: .9;
}
.ss-player-playlist-panel__item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: 12px;
background: rgba(251, 203, 7, .08);
color: #fbcb07;
}
.ss-player-playlist-panel__item-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ss-player-playlist-panel__item-cover {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 8px;
}
.ss-player-playlist-panel__item-cover--auto {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
background: rgba(255, 255, 255, .08);
}
.ss-player-playlist-panel__item-cover--auto span {
display: block;
min-width: 0;
min-height: 0;
background: rgba(255, 255, 255, .08);
}
.ss-player-playlist-panel__item-cover--auto .ss-player-playlist-panel__item-cover-tile--placeholder {
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, .52);
}
.ss-player-playlist-panel__item-cover--auto .ss-player-playlist-panel__item-cover-tile--placeholder i {
font-size: 12px;
line-height: 1;
}
.ss-player-playlist-panel__item-cover--auto img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ss-player-playlist-panel__item-cover .ss-playlist-cover__title {
right: 4px;
left: 4px;
top: 4px;
font-size: 7px;
line-height: 1.1;
max-height: 18px;
overflow: hidden;
}
.ss-player-playlist-panel__sentinel {
display: flex;
align-items: center;
justify-content: center;
min-height: 42px;
color: rgba(255, 255, 255, .66);
}
.ss-player-playlist-panel__sentinel:empty {
min-height: 20px;
}
.ss-player-playlist-panel__sentinel .ss-shared-loader,
.ss-player-playlist-panel__loader {
justify-content: center;
}
.ss-player-playlist-panel__status {
display: flex;
align-items: center;
gap: 10px;
position: absolute;
right: 18px;
bottom: 18px;
left: 18px;
z-index: 5;
min-height: 48px;
padding: 10px 14px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 18px;
background: rgba(20, 21, 24, .96);
color: rgba(255, 255, 255, .88);
font-size: 13px;
font-weight: 700;
line-height: 1.7;
box-shadow: 0 16px 42px rgba(0, 0, 0, .28);
backdrop-filter: blur(14px);
}
.ss-player-playlist-panel__status[hidden] {
display: none !important;
}
.ss-player-playlist-panel__status i {
color: #fbcb07;
font-size: 16px;
}
.ss-player-playlist-panel__status.is-success i {
color: #48d17a;
}
.ss-player-playlist-panel__status.is-danger i,
.ss-player-playlist-panel__status.is-warning i {
color: #fbcb07;
}
.ss-player-playlist-panel__empty {
color: rgba(255, 255, 255, .52);
font-size: 13px;
text-align: center;
padding: 16px 0 6px;
}
.ss-player-playlist-create-prompt__dialog {
width: min(92vw, 520px);
max-height: min(86vh, 760px);
padding: 22px;
overflow-y: auto;
overscroll-behavior: contain;
direction: rtl;
text-align: right;
}
.ss-player-playlist-create-prompt__form {
display: grid;
gap: 14px;
}
.ss-player-playlist-create-prompt__head {
display: flex;
align-items: center;
gap: 12px;
padding-left: 46px;
}
.ss-player-playlist-create-prompt__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 16px;
background: rgba(251, 203, 7, .08);
color: #fbcb07;
}
.ss-player-playlist-create-prompt__title {
margin: 0;
color: rgba(255, 255, 255, .96);
font-size: 18px;
font-weight: 800;
line-height: 1.5;
}
.ss-player-playlist-create-prompt__field {
display: grid;
gap: 8px;
color: rgba(255, 255, 255, .72);
font-size: 13px;
font-weight: 700;
}
.ss-player-playlist-create-prompt__input,
.ss-player-playlist-create-prompt__textarea {
width: 100%;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
background: rgba(255, 255, 255, .05);
color: #fff;
font-size: 14px;
font-weight: 600;
outline: 0;
box-shadow: none;
}
.ss-player-playlist-create-prompt__input {
height: 48px;
padding: 0 14px;
}
.ss-player-playlist-create-prompt__textarea {
min-height: 92px;
max-height: 120px;
padding: 12px 14px;
resize: vertical;
line-height: 1.8;
}
.ss-player-playlist-create-prompt__input:focus,
.ss-player-playlist-create-prompt__textarea:focus {
border-color: rgba(251, 203, 7, .34);
background: rgba(255, 255, 255, .07);
}
.ss-player-playlist-create-prompt__cover {
display: grid;
grid-template-columns: 84px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding: 12px;
border: 1px solid rgba(255, 255, 255, .06);
border-radius: 18px;
background: rgba(255, 255, 255, .03);
}
.ss-player-playlist-create-prompt__cover-builder {
grid-template-columns: 118px minmax(0, 1fr);
align-items: stretch;
}
.ss-playlist-cover {
position: relative;
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 3px;
background: #282828;
}
.ss-player-playlist-create-prompt__cover-preview {
width: 118px;
min-width: 118px;
height: 118px;
color: #fff;
}
.ss-playlist-cover--auto-preview {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 2px;
background:
linear-gradient(90deg, rgba(255, 255, 255, .16) 0 49%, transparent 49% 51%, rgba(255, 255, 255, .08) 51% 100%),
linear-gradient(0deg, rgba(0, 0, 0, .28) 0 49%, transparent 49% 51%, rgba(0, 0, 0, .08) 51% 100%),
#252529;
}
.ss-player-playlist-create-prompt__cover-preview.ss-playlist-cover--auto-preview {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
gap: 2px;
background: #252529 !important;
}
.ss-playlist-cover--auto-preview .ss-playlist-cover__tile {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 0;
background: #202020;
color: rgba(255, 255, 255, .52);
}
.ss-playlist-cover--auto-preview .ss-playlist-cover__tile i {
font-size: 28px;
line-height: 1;
}
.ss-playlist-cover--auto-preview .ss-playlist-cover__title {
display: none;
}
.ss-playlist-cover--text-dark {
color: #171717;
}
.ss-playlist-cover--color-amber {
background: linear-gradient(135deg, #f7c948 0%, #f08a24 100%);
}
.ss-playlist-cover--color-violet {
background: linear-gradient(135deg, #8b5cf6 0%, #4c1d95 100%);
}
.ss-playlist-cover--color-rose {
background: linear-gradient(135deg, #fb7185 0%, #be123c 100%);
}
.ss-playlist-cover--color-blue {
background: linear-gradient(135deg, #38bdf8 0%, #1d4ed8 100%);
}
.ss-playlist-cover--color-emerald {
background: linear-gradient(135deg, #34d399 0%, #047857 100%);
}
.ss-playlist-cover--color-slate {
background: linear-gradient(135deg, #64748b 0%, #111827 100%);
}
.ss-playlist-cover--auto-preview {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 2px;
background:
linear-gradient(90deg, rgba(255, 255, 255, .16) 0 49%, transparent 49% 51%, rgba(255, 255, 255, .08) 51% 100%),
linear-gradient(0deg, rgba(0, 0, 0, .28) 0 49%, transparent 49% 51%, rgba(0, 0, 0, .08) 51% 100%),
#252529;
}
.ss-playlist-cover--auto-preview .ss-playlist-cover__pattern {
display: none;
}
.ss-playlist-cover__pattern {
position: absolute;
inset: 0;
opacity: .34;
pointer-events: none;
}
.ss-playlist-cover--pattern-waves .ss-playlist-cover__pattern {
background:
radial-gradient(circle at 18% 28%, rgba(255, 255, 255, .72) 0 9%, transparent 10%),
radial-gradient(circle at 74% 70%, rgba(0, 0, 0, .35) 0 12%, transparent 13%),
repeating-linear-gradient(135deg, rgba(255, 255, 255, .38) 0 4px, transparent 4px 18px);
}
.ss-playlist-cover--pattern-grid .ss-playlist-cover__pattern {
background:
linear-gradient(rgba(255, 255, 255, .32) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .32) 1px, transparent 1px);
background-size: 18px 18px;
}
.ss-playlist-cover--pattern-pulse .ss-playlist-cover__pattern {
background: radial-gradient(circle at 50% 50%, transparent 0 20%, rgba(255, 255, 255, .42) 21% 23%, transparent 24% 38%, rgba(0, 0, 0, .28) 39% 41%, transparent 42%);
}
.ss-playlist-cover--pattern-rings .ss-playlist-cover__pattern {
background: repeating-radial-gradient(circle at 68% 36%, rgba(255, 255, 255, .42) 0 3px, transparent 3px 16px);
}
.ss-playlist-cover__title {
position: absolute;
top: 14px;
right: 14px;
left: 14px;
z-index: 1;
color: currentColor;
display: -webkit-box;
max-height: 2.32em;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: clamp(13px, 6.6%, 16px);
font-weight: 900;
line-height: 1.16;
text-align: right;
overflow-wrap: anywhere;
text-shadow: 0 2px 14px rgba(0, 0, 0, .32);
}
.ss-player-playlist-create-prompt__cover-controls {
display: grid;
gap: 10px;
align-content: center;
min-width: 0;
}
.ss-player-playlist-create-prompt__cover-mode,
.ss-player-playlist-create-prompt__cover-patterns,
.ss-player-playlist-create-prompt__cover-swatches {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ss-player-playlist-create-prompt__cover-mode button,
.ss-player-playlist-create-prompt__cover-patterns button {
min-height: 32px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 999px;
background: rgba(255, 255, 255, .04);
color: rgba(255, 255, 255, .72);
padding: 0 11px;
font-size: 12px;
font-weight: 800;
}
.ss-player-playlist-create-prompt__cover-mode button.is-active,
.ss-player-playlist-create-prompt__cover-patterns button.is-active,
.ss-player-playlist-create-prompt__cover-mode button:hover,
.ss-player-playlist-create-prompt__cover-patterns button:hover,
.ss-player-playlist-create-prompt__cover-mode button:focus-visible,
.ss-player-playlist-create-prompt__cover-patterns button:focus-visible {
border-color: rgba(251, 203, 7, .42);
color: #fbcb07;
outline: 0;
}
.ss-cover-swatch {
width: 24px;
height: 24px;
border: 2px solid transparent;
border-radius: 999px;
padding: 0;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.ss-cover-swatch.is-active,
.ss-cover-swatch:hover,
.ss-cover-swatch:focus-visible {
border-color: #fbcb07;
outline: 0;
}
.ss-cover-swatch--amber {
background: linear-gradient(135deg, #f7c948, #f08a24);
}
.ss-cover-swatch--violet {
background: linear-gradient(135deg, #8b5cf6, #4c1d95);
}
.ss-cover-swatch--rose {
background: linear-gradient(135deg, #fb7185, #be123c);
}
.ss-cover-swatch--blue {
background: linear-gradient(135deg, #38bdf8, #1d4ed8);
}
.ss-cover-swatch--emerald {
background: linear-gradient(135deg, #34d399, #047857);
}
.ss-cover-swatch--slate {
background: linear-gradient(135deg, #64748b, #111827);
}
.ss-player-playlist-create-prompt__cover-art {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 84px;
aspect-ratio: 1;
border-radius: 18px;
background:
linear-gradient(135deg, rgba(251, 203, 7, .28), rgba(255, 255, 255, .05)),
radial-gradient(circle at 70% 28%, rgba(255, 255, 255, .22), transparent 38%),
#161616;
color: #fbcb07;
overflow: hidden;
}
.ss-player-playlist-create-prompt__cover-art::after {
content: "";
position: absolute;
inset: auto 12px 14px;
height: 18px;
border-radius: 999px;
background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .74) 0 3px, transparent 3px 8px);
opacity: .34;
}
.ss-player-playlist-create-prompt__cover-art i {
position: relative;
z-index: 1;
font-size: 26px;
}
.ss-player-playlist-create-prompt__cover-copy {
display: grid;
gap: 5px;
min-width: 0;
}
.ss-player-playlist-create-prompt__cover-copy span {
color: rgba(255, 255, 255, .52);
font-size: 12px;
font-weight: 700;
}
.ss-player-playlist-create-prompt__cover-copy strong {
color: rgba(255, 255, 255, .88);
font-size: 13px;
font-weight: 700;
line-height: 1.8;
}
.ss-player-playlist-create-prompt__visibility {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 52px;
padding: 0 14px;
border: 1px solid rgba(255, 255, 255, .06);
border-radius: 16px;
background: rgba(255, 255, 255, .03);
color: rgba(255, 255, 255, .84);
font-size: 14px;
font-weight: 700;
}
.ss-player-playlist-create-prompt__visibility input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.ss-player-playlist-create-prompt__switch {
position: relative;
flex: 0 0 auto;
width: 48px;
height: 28px;
border-radius: 999px;
background: rgba(255, 255, 255, .13);
transition: background-color .22s ease;
}
.ss-player-playlist-create-prompt__switch::after {
content: "";
position: absolute;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
border-radius: 999px;
background: rgba(255, 255, 255, .82);
transition: transform .22s ease, background-color .22s ease;
}
.ss-player-playlist-create-prompt__visibility input:checked + .ss-player-playlist-create-prompt__switch {
background: rgba(251, 203, 7, .85);
}
.ss-player-playlist-create-prompt__visibility input:checked + .ss-player-playlist-create-prompt__switch::after {
background: #111;
transform: translateX(-20px);
}
.ss-player-playlist-create-prompt__submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 50px;
border: 0;
border-radius: 16px;
background: #fbcb07;
color: #121212;
font-size: 14px;
font-weight: 900;
line-height: 1.2;
margin: 0;
padding: 0 18px;
text-align: center;
text-decoration: none;
transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.ss-playlist-modal-form .ss-player-playlist-create-prompt__submit.submit.btn.btn-primary,
#ss-player-playlist-create-prompt .ss-player-playlist-create-prompt__submit {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 50px;
border: 0 !important;
border-radius: 16px;
background: #fbcb07 !important;
color: #121212 !important;
box-shadow: none;
font-size: 14px;
font-weight: 900;
line-height: 1.2;
margin: 0;
padding: 0 18px;
text-align: center;
text-decoration: none !important;
}
.ss-player-playlist-create-prompt__submit:hover,
.ss-player-playlist-create-prompt__submit:focus-visible,
.ss-playlist-modal-form .ss-player-playlist-create-prompt__submit.submit.btn.btn-primary:hover,
.ss-playlist-modal-form .ss-player-playlist-create-prompt__submit.submit.btn.btn-primary:focus-visible,
#ss-player-playlist-create-prompt .ss-player-playlist-create-prompt__submit:hover,
#ss-player-playlist-create-prompt .ss-player-playlist-create-prompt__submit:focus-visible {
background: #ffd84f !important;
color: #121212 !important;
box-shadow: 0 14px 26px rgba(251, 203, 7, .16);
transform: translateY(-1px);
outline: 0;
}
.ss-player-playlist-create-prompt__status {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 12px;
border-radius: 16px;
background: rgba(255, 255, 255, .04);
color: rgba(255, 255, 255, .88);
font-size: 13px;
font-weight: 700;
line-height: 1.7;
}
.ss-player-playlist-create-prompt__status i {
color: #fbcb07;
}
.ss-player-playlist-create-prompt__status.is-success i {
color: #48d17a;
}
@media (max-width: 560px) {
.ss-player-playlist-create-prompt__cover-builder {
grid-template-columns: 92px minmax(0, 1fr);
gap: 10px;
}
.ss-player-playlist-create-prompt__cover-preview {
width: 92px;
min-width: 92px;
height: 92px;
}
.ss-playlist-cover__title {
font-size: 12px;
right: 8px;
left: 8px;
top: 8px;
}
.ss-player-playlist-create-prompt__cover-mode button,
.ss-player-playlist-create-prompt__cover-patterns button {
min-height: 30px;
padding: 0 9px;
font-size: 11px;
}
}
.ss-player-playlist-panel__close:hover,
.ss-player-playlist-panel__close:focus-visible {
color: #fbcb07;
background: rgba(255, 255, 255, .09);
outline: 0;
}
.ss-player-download-panel__empty {
color: rgba(255, 255, 255, .52);
font-size: 13px;
text-align: center;
padding: 22px 0 10px;
}
@media (min-width: 760px) {
.ss-mini-player__queue-trigger {
display: inline-flex;
}
}
@media (max-width: 759.98px) {
.ss-full-player__footer-center {
gap: 0;
}
.mood-Si,
.instrument-Si {
display: none !important;
}
.ss-single-player-toolbar {
gap: 12px;
padding: 4px 0 0;
}
.ss-single-player-actions {
gap: 8px;
}
.ss-player-download-panel__sheet {
top: auto;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: none;
max-height: min(78vh, 560px);
padding: 14px 14px var(--ss-sheet-mobile-bottom-padding, max(14px, env(safe-area-inset-bottom, 0px)));
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 24px 24px 0 0;
transform: translate3d(0, 28px, 0);
transform-origin: bottom center;
}
.ss-player-download-panel.is-open .ss-player-download-panel__sheet {
transform: translate3d(0, 0, 0);
}
.ss-player-download-panel.is-closing .ss-player-download-panel__sheet {
transform: translate3d(0, 28px, 0);
}
.ss-player-playlist-panel__sheet {
top: auto;
right: 0;
bottom: 0;
left: 0;
width: 100%;
max-width: none;
height: min(82vh, 640px);
max-height: min(82vh, 640px);
padding: 22px 18px var(--ss-sheet-mobile-bottom-padding-roomy, max(20px, env(safe-area-inset-bottom, 0px)));
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 28px 28px 0 0;
opacity: 0;
transform: translate3d(0, 28px, 0);
transform-origin: bottom center;
}
.ss-player-playlist-panel.is-visible .ss-player-playlist-panel__sheet,
.ss-player-playlist-panel.is-open .ss-player-playlist-panel__sheet {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.ss-player-playlist-panel.is-closing .ss-player-playlist-panel__sheet {
opacity: 0;
transform: translate3d(0, 28px, 0);
}
.ss-player-playlist-panel__form,
.ss-player-playlist-panel__new-row {
grid-template-columns: minmax(0, 1fr);
}
.ss-player-playlist-panel__list {
min-height: 150px;
max-height: none;
}
.ss-player-playlist-panel__submit,
.ss-player-playlist-panel__new-submit {
width: 100%;
}
.ss-player-queue-panel__sheet {
top: var(--ss-queue-header-offset);
right: 0;
left: 0;
bottom: 0;
width: 100%;
max-height: none;
padding: 0 14px var(--ss-sheet-mobile-bottom-padding, max(14px, env(safe-area-inset-bottom, 0px)));
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 24px 24px 0 0;
transform: translate3d(0, calc(24px + var(--ss-queue-drag-y)), 0);
transform-origin: bottom center;
}
.ss-player-queue-panel.is-open .ss-player-queue-panel__sheet {
transform: translate3d(0, var(--ss-queue-drag-y), 0);
}
.ss-player-queue-panel.is-closing .ss-player-queue-panel__sheet {
transform: translate3d(0, calc(20px + var(--ss-queue-drag-y)), 0);
}
}
@media (max-width: 480px) {
.ss-player-queue-panel__sheet {
padding: 0 12px var(--ss-sheet-mobile-bottom-padding-compact, max(12px, env(safe-area-inset-bottom, 0px)));
border-radius: 22px 22px 0 0;
}
.ss-player-queue-panel__item {
padding: 8px 6px;
}
.ss-player-queue-panel__item.is-current {
padding: 9px 8px;
}
.ss-player-queue-panel__row {
grid-template-columns: 28px 44px minmax(0, 1fr) 28px;
gap: 8px;
}
.ss-player-queue-panel__item.is-current .ss-player-queue-panel__row {
grid-template-columns: 44px minmax(0, 1fr);
}
.ss-player-queue-panel__cover {
width: 46px;
height: 46px;
border-radius: 6px;
}
.ss-player-queue-panel__now-playing {
gap: 3px;
}
.ss-player-queue-panel__drag,
.ss-player-queue-panel__remove {
width: 28px;
height: 28px;
}
}
@media (min-width: 760px) and (max-width: 2040px) {
.ss-mini-player {
column-gap: clamp(10px, .8vw, 18px);
row-gap: 6px;
min-height: clamp(74px, 4.8vw, 94px);
padding: clamp(11px, .9vw, 15px) clamp(12px, 1vw, 20px) clamp(8px, .7vw, 12px);
}
.ss-mini-player__progress {
height: 12px;
}
.ss-mini-player__media {
max-width: clamp(236px, 22vw, 380px);
gap: clamp(8px, .65vw, 11px);
}
.ss-mini-player__cover {
flex-basis: clamp(50px, 3.8vw, 66px);
width: clamp(50px, 3.8vw, 66px);
height: clamp(50px, 3.8vw, 66px);
}
.ss-mini-player__title {
font-size: clamp(12px, .8vw, 15px);
}
.ss-mini-player__artist {
font-size: clamp(10.5px, .68vw, 13px);
}
.ss-mini-player__controls,
.ss-mini-player__controls--actions {
gap: clamp(4px, .45vw, 8px);
}
.ss-mini-player__controls--transport {
min-width: clamp(182px, 16vw, 286px);
}
.ss-mini-player__controls--actions {
min-width: clamp(108px, 8.6vw, 156px);
}
.ss-mini-player__button {
width: clamp(32px, 2vw, 40px);
height: clamp(32px, 2vw, 40px);
min-width: clamp(32px, 2vw, 40px);
min-height: clamp(32px, 2vw, 40px);
}
.ss-mini-player__button i {
font-size: clamp(15px, .96vw, 20px);
}
.ss-mini-player__toggle {
width: clamp(46px, 3vw, 56px);
height: clamp(46px, 3vw, 56px);
}
.ss-mini-player__toggle i {
font-size: clamp(19px, 1.25vw, 24px);
}
body.ss-mini-visible {
padding-bottom: clamp(78px, 5.6vw, 96px);
}
}
.ss-sheet {
--ss-sheet-backdrop-bg: rgba(8, 8, 8, .54);
--ss-sheet-surface-bg: rgba(18, 18, 18, .97);
--ss-sheet-border: rgba(255, 255, 255, .08);
--ss-sheet-shadow: 0 24px 70px rgba(0, 0, 0, .34);
--ss-sheet-radius: 26px;
--ss-sheet-desktop-width: min(92vw, 480px);
--ss-sheet-desktop-max-height: min(78vh, 680px);
--ss-sheet-mobile-radius: 24px 24px 0 0;
--ss-sheet-mobile-max-height: min(82vh, 620px);
position: fixed;
inset: 0;
pointer-events: none;
overscroll-behavior: contain;
}
body.ss-player-sheet-open {
position: fixed;
top: var(--ss-sheet-lock-top, 0);
right: 0;
left: 0;
width: auto;
overflow: hidden;
}
html.ss-player-sheet-scroll-locked {
overflow-y: scroll;
}
.ss-sheet.is-open,
.ss-sheet.is-visible {
pointer-events: auto;
}
.ss-sheet.is-closing {
pointer-events: none;
}
.ss-sheet__backdrop {
position: absolute;
inset: 0;
background: var(--ss-sheet-backdrop-bg);
opacity: 0;
transition: opacity .22s ease;
touch-action: none;
}
.ss-sheet.is-open .ss-sheet__backdrop,
.ss-sheet.is-visible .ss-sheet__backdrop {
opacity: 1;
}
.ss-sheet.is-closing .ss-sheet__backdrop {
opacity: 0;
}
.ss-sheet__surface {
--ss-sheet-motion-y: 0px;
position: absolute;
box-sizing: border-box;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
width: var(--ss-sheet-desktop-width);
max-height: var(--ss-sheet-desktop-max-height);
border: 1px solid var(--ss-sheet-border);
border-radius: var(--ss-sheet-radius);
background: var(--ss-sheet-surface-bg);
box-shadow: var(--ss-sheet-shadow);
color: #fff;
opacity: 0;
overflow: hidden;
overscroll-behavior: contain;
transform: translate3d(-50%, calc(-50% + 28px + var(--ss-sheet-motion-y)), 0) scale(.985);
transform-origin: center;
transition:
opacity .2s ease,
transform .26s cubic-bezier(.22, 1, .36, 1),
box-shadow .24s ease;
will-change: transform, opacity;
}
.ss-sheet.is-open .ss-sheet__surface,
.ss-sheet.is-visible .ss-sheet__surface {
opacity: 1;
transform: translate3d(-50%, calc(-50% + var(--ss-sheet-motion-y)), 0) scale(1);
}
.ss-sheet.is-closing .ss-sheet__surface {
opacity: 0;
transform: translate3d(-50%, calc(-50% + 24px + var(--ss-sheet-motion-y)), 0) scale(.985);
}
.ss-sheet.is-motion-dragging .ss-sheet__surface,
.ss-sheet.is-motion-settling .ss-sheet__surface {
transition: none;
touch-action: none;
}
.ss-sheet__surface::before {
content: none;
display: none;
}
.ss-sheet__handle {
display: none;
}
.ss-sheet__close,
[data-ss-sheet-close] {
flex: 0 0 auto;
}
.ss-sheet--download {
--ss-sheet-desktop-width: min(92vw, 390px);
--ss-sheet-desktop-max-height: min(72vh, 620px);
}
.ss-sheet--login {
--ss-sheet-desktop-width: min(92vw, 560px);
--ss-sheet-desktop-max-height: min(78vh, 680px);
--ss-sheet-mobile-max-height: min(82vh, 620px);
}
.ss-sheet--playlist-editor {
--ss-sheet-desktop-width: min(92vw, 520px);
--ss-sheet-desktop-max-height: min(86vh, 760px);
--ss-sheet-mobile-max-height: min(88vh, 720px);
--ss-sheet-radius: 28px;
--ss-sheet-mobile-radius: 28px 28px 0 0;
}
.ss-sheet--playlist-editor .ss-sheet__surface {
overflow-y: auto;
overscroll-behavior: contain;
direction: rtl;
text-align: right;
}
.ss-sheet--queue {
--ss-sheet-desktop-width: min(92vw, 520px);
--ss-sheet-desktop-max-height: min(84vh, 720px);
--ss-sheet-mobile-max-height: min(82vh, 680px);
--ss-queue-min-height: min(62vh, 560px);
z-index: 100004;
}
.ss-sheet--queue .ss-sheet__backdrop {
inset: 0;
background: var(--ss-sheet-backdrop-bg);
}
.ss-sheet--queue .ss-sheet__surface {
--ss-queue-drag-y: 0px;
top: 50%;
right: auto;
bottom: auto;
left: 50%;
width: var(--ss-sheet-desktop-width);
max-width: none;
max-height: var(--ss-sheet-desktop-max-height);
min-height: var(--ss-queue-min-height);
padding: 0 16px 16px;
border: 1px solid var(--ss-sheet-border);
border-radius: var(--ss-sheet-radius);
background: var(--ss-sheet-surface-bg);
backdrop-filter: none;
transform-origin: center;
touch-action: none;
}
.ss-sheet--queue.is-dragging .ss-sheet__surface {
transition: none;
}
.ss-sheet--queue.is-motion-dragging .ss-sheet__surface,
.ss-sheet--queue.is-motion-settling .ss-sheet__surface {
transition: none;
}
@media (min-width: 760px) {
.ss-sheet--drawer-right {
--ss-sheet-drawer-width: min(440px, calc(100vw - 96px));
}
.ss-sheet--drawer-right .ss-sheet__surface {
top: 0;
right: 0;
bottom: 0;
left: auto;
width: var(--ss-sheet-drawer-width);
max-width: none;
height: auto;
max-height: none;
min-height: 0;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-radius: 24px 0 0 24px;
transform: translate3d(100%, 0, 0);
transform-origin: right center;
}
.ss-sheet--drawer-right.is-open .ss-sheet__surface,
.ss-sheet--drawer-right.is-visible .ss-sheet__surface {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.ss-sheet--drawer-right.is-closing .ss-sheet__surface {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
}
@media (max-width: 759.98px) {
body.ss-player-sheet-open {
position: static;
top: auto;
right: auto;
left: auto;
width: auto;
overflow: visible;
}
body.ss-full-player-open.ss-player-sheet-open {
position: fixed;
top: var(--ss-full-player-lock-top, 0);
right: 0;
left: 0;
width: 100%;
overflow: hidden;
padding-bottom: 0 !important;
}
body.ss-mobile-tabbar-enabled.ss-player-sheet-open {
padding-bottom: calc(var(--ss-mobile-tabbar-content-offset, 92px) + 10px) !important;
}
body.ss-mobile-tabbar-enabled.ss-mini-visible.ss-player-sheet-open {
padding-bottom: calc(var(--ss-mobile-tabbar-content-offset, 92px) + 104px) !important;
}
body.ss-full-player-open.ss-mobile-tabbar-enabled.ss-player-sheet-open,
body.ss-full-player-open.ss-mobile-tabbar-enabled.ss-mini-visible.ss-player-sheet-open {
padding-bottom: 0 !important;
}
.ss-sheet__surface {
--ss-sheet-motion-y: 0px;
top: auto;
right: 0;
bottom: 0;
left: 0;
width: 100%;
max-width: none;
max-height: var(--ss-sheet-mobile-max-height);
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: var(--ss-sheet-mobile-radius);
transform: translate3d(0, calc(34px + var(--ss-sheet-motion-y)), 0);
transform-origin: bottom center;
}
.ss-sheet__surface::before {
content: none;
display: none;
}
.ss-sheet__handle {
display: flex;
flex: 0 0 auto;
align-self: center;
align-items: center;
justify-content: center;
width: 42px;
height: 24px;
margin: 0 0 8px;
cursor: grab;
touch-action: none;
}
.ss-sheet__handle span {
display: block;
width: 42px;
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, .22);
}
.ss-sheet.is-motion-dragging .ss-sheet__handle {
cursor: grabbing;
}
.ss-sheet__close,
[data-ss-sheet-close] {
display: none !important;
pointer-events: none;
}
.ss-sheet.is-open .ss-sheet__surface,
.ss-sheet.is-visible .ss-sheet__surface {
transform: translate3d(0, var(--ss-sheet-motion-y), 0);
}
.ss-sheet.is-closing .ss-sheet__surface {
transform: translate3d(0, calc(34px + var(--ss-sheet-motion-y)), 0);
}
.ss-sheet--queue {
--ss-queue-min-height: min(70vh, 640px);
}
.ss-sheet--queue .ss-sheet__surface {
top: auto;
right: 0;
bottom: 0;
left: 0;
width: 100%;
max-height: var(--ss-sheet-mobile-max-height);
min-height: var(--ss-queue-min-height);
padding: 0 14px var(--ss-sheet-mobile-bottom-padding, max(14px, env(safe-area-inset-bottom, 0px)));
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: var(--ss-sheet-mobile-radius);
transform-origin: bottom center;
}
}
@media (max-width: 480px) {
.ss-sheet--queue .ss-sheet__surface {
padding: 0 12px var(--ss-sheet-mobile-bottom-padding-compact, max(12px, env(safe-area-inset-bottom, 0px)));
border-radius: 22px 22px 0 0;
}
}
@media (prefers-reduced-motion: reduce) {
.ss-sheet__backdrop,
.ss-sheet__surface {
transition: none;
}
}
@media (min-width: 760px) {
.ss-mini-player__seek::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
margin-top: -5px;
border: 0;
border-radius: 999px;
background: #f6cf48;
box-shadow: 0 3px 10px rgba(251, 203, 7, .18);
opacity: 0;
transform: scale(.62);
transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ss-mini-player__seek::-moz-range-thumb {
width: 14px;
height: 14px;
border: 0;
border-radius: 999px;
background: #f6cf48;
box-shadow: 0 3px 10px rgba(251, 203, 7, .18);
opacity: 0;
transform: scale(.62);
transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ss-mini-player__seek:hover::-webkit-slider-thumb,
.ss-mini-player__seek:focus-visible::-webkit-slider-thumb,
.ss-mini-player__seek:active::-webkit-slider-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-webkit-slider-thumb {
opacity: 1;
transform: scale(1);
box-shadow: 0 4px 12px rgba(251, 203, 7, .24);
}
.ss-mini-player__seek:hover::-moz-range-thumb,
.ss-mini-player__seek:focus-visible::-moz-range-thumb,
.ss-mini-player__seek:active::-moz-range-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-moz-range-thumb {
opacity: 1;
transform: scale(1);
box-shadow: 0 4px 12px rgba(251, 203, 7, .24);
}
}
.ss-mini-player__seek {
--ss-seek-played: var(--ss-player-on-theme, #fff);
--ss-seek-rest: var(--ss-player-on-theme-border, rgba(255, 255, 255, .14));
box-shadow: none !important;
}
.ss-mini-player__seek:hover,
.ss-mini-player__seek:focus-visible,
.ss-mini-player__seek:active,
.ss-mini-player.is-seeking .ss-mini-player__seek {
--ss-seek-played: #fbcb07;
--ss-seek-rest: rgba(255, 255, 255, .36);
box-shadow: none !important;
}
.ss-mini-player__seek::-webkit-slider-thumb {
background: var(--ss-seek-played, #fff) !important;
box-shadow: none !important;
}
.ss-mini-player__seek::-moz-range-thumb {
background: var(--ss-seek-played, #fff) !important;
box-shadow: none !important;
}
.ss-mini-player__seek:hover::-webkit-slider-thumb,
.ss-mini-player__seek:focus-visible::-webkit-slider-thumb,
.ss-mini-player__seek:active::-webkit-slider-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-webkit-slider-thumb {
background: var(--ss-seek-played, #fff) !important;
box-shadow: 0 2px 10px rgba(255, 255, 255, .18) !important;
}
.ss-mini-player__seek:hover::-moz-range-thumb,
.ss-mini-player__seek:focus-visible::-moz-range-thumb,
.ss-mini-player__seek:active::-moz-range-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-moz-range-thumb {
background: var(--ss-seek-played, #fff) !important;
box-shadow: 0 2px 10px rgba(255, 255, 255, .18) !important;
}
@media (min-width: 760px) {
.ss-mini-player__seek {
--ss-seek-played: #fff;
--ss-seek-rest: rgba(255, 255, 255, .18);
}
}
@media (min-width: 760px) {
.ss-mini-player {
--ss-mini-transport-button: 42px;
--ss-mini-step-button: 46px;
--ss-mini-play-button: 52px;
--ss-mini-transport-gap: clamp(14px, .95vw, 20px);
}
.ss-mini-player__media {
max-width: min(38vw, 560px);
}
.ss-mini-player__title {
color: #fff;
font-size: clamp(14px, .84vw, 16px);
font-weight: 700;
line-height: 1.22;
letter-spacing: 0;
}
.ss-mini-player__title-text {
display: inline-block;
max-width: none;
vertical-align: top;
transform: translate3d(0, 0, 0);
}
.ss-mini-player__title.has-title-overflow .ss-mini-player__title-text {
will-change: transform;
}
.ss-mini-player__title.is-title-reveal .ss-mini-player__title-text {
animation: ssMiniTitleReveal var(--ss-mini-title-reveal-duration, 5.8s) cubic-bezier(.22, 1, .36, 1) .45s 1 both;
}
.ss-mini-player__artist {
color: rgba(255, 255, 255, .68);
font-size: clamp(12px, .72vw, 13.5px);
font-weight: 500;
line-height: 1.26;
}
.ss-mini-player__track-actions .ss-mini-player__add,
.ss-mini-player__track-actions .ss-mini-player__download-trigger {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
color: rgba(255, 255, 255, .96);
background: transparent;
transform: none;
}
.ss-mini-player__track-actions .ss-mini-player__add i,
.ss-mini-player__track-actions .ss-mini-player__download-trigger i {
font-size: 24px;
line-height: 1;
}
.ss-mini-player__controls--transport {
justify-self: center;
justify-content: center;
width: auto;
max-width: none;
min-width: 0;
gap: var(--ss-mini-transport-gap);
flex: 0 0 auto;
}
.ss-mini-player__controls--transport .ss-mini-player__button {
box-sizing: border-box;
flex: 0 0 auto;
width: var(--ss-mini-transport-button);
height: var(--ss-mini-transport-button);
min-width: var(--ss-mini-transport-button);
min-height: var(--ss-mini-transport-button);
padding: 0;
border: 0;
color: rgba(255, 255, 255, .96);
background: transparent;
transform: none;
transition: color .16s ease, background-color .16s ease;
}
.ss-mini-player__controls--transport .ss-mini-player__prev,
.ss-mini-player__controls--transport .ss-mini-player__next {
width: var(--ss-mini-step-button);
height: var(--ss-mini-step-button);
min-width: var(--ss-mini-step-button);
min-height: var(--ss-mini-step-button);
}
.ss-mini-player__controls--transport .ss-mini-player__toggle,
.ss-mini-player__controls--transport .ss-mini-player__toggle:hover,
.ss-mini-player__controls--transport .ss-mini-player__toggle:focus-visible,
.ss-mini-player__controls--transport .ss-mini-player__toggle.is-playing {
width: var(--ss-mini-play-button);
height: var(--ss-mini-play-button);
min-width: var(--ss-mini-play-button);
min-height: var(--ss-mini-play-button);
background: #fff;
color: #1b1b1b;
}
.ss-mini-player__controls--transport .ss-mini-player__button:hover,
.ss-mini-player__controls--transport .ss-mini-player__button:focus-visible {
color: #fff;
background: rgba(255, 255, 255, .08);
transform: none;
}
.ss-mini-player__controls--transport .ss-mini-player__button:active,
.ss-mini-player__track-actions .ss-mini-player__button:active,
.ss-mini-player__controls--actions .ss-mini-player__button:active {
transform: none;
}
.ss-mini-player__controls--transport .ss-mini-player__shuffle i,
.ss-mini-player__controls--transport .ss-mini-player__repeat i {
color: currentColor;
font-size: 18px;
line-height: 1;
}
.ss-mini-player__controls--transport .ss-mini-player__prev i,
.ss-mini-player__controls--transport .ss-mini-player__next i {
color: currentColor;
font-size: 22px;
line-height: 1;
}
.ss-mini-player__controls--transport .ss-mini-player__toggle i {
color: currentColor;
font-size: 23px;
line-height: 1;
padding-left: 2px;
}
.ss-mini-player__progress {
justify-self: center;
width: clamp(280px, 34vw, 500px);
max-width: 500px;
}
}
.ss-full-player .ss-full-player__toggle,
.ss-full-player .ss-full-player__toggle:hover,
.ss-full-player .ss-full-player__toggle:focus-visible,
.ss-full-player .ss-full-player__toggle.is-playing {
background: var(--ss-player-control-bg-strong, #fff) !important;
color: var(--ss-player-control-on-strong, #252525) !important;
border: 0;
box-shadow: 0 18px 38px rgba(0, 0, 0, .14);
filter: none;
transform: none;
}
.ss-full-player .ss-full-player__toggle i,
.ss-full-player .ss-full-player__toggle:hover i,
.ss-full-player .ss-full-player__toggle:focus-visible i,
.ss-full-player .ss-full-player__toggle.is-playing i {
color: var(--ss-player-control-on-strong, #252525) !important;
transform: none;
}
.ss-full-player .ss-full-player__toggle:hover {
box-shadow: 0 20px 42px rgba(0, 0, 0, .16);
}
.ss-full-player .ss-full-player__toggle:focus-visible {
outline: 2px solid color-mix(in srgb, var(--ss-player-control-bg-strong, #fff) 42%, transparent);
outline-offset: 4px;
}
.ss-full-player .ss-full-player__timer-trigger.is-active,
.ss-full-player .ss-full-player__timer-trigger.is-active:hover,
.ss-full-player .ss-full-player__timer-trigger.is-active:focus-visible {
color: var(--ss-player-on-theme, #fff);
}
.ss-full-player .ss-full-player__timer-badge {
background: color-mix(in srgb, var(--ss-player-on-theme, #fff) 14%, transparent);
color: var(--ss-player-on-theme, #fff);
}
@media (max-width: 759px) {
#ss-player-sleep-timer .ss-player-sleep-modal__dialog {
top: auto;
right: 0;
bottom: 0;
left: 0;
width: 100%;
max-width: none;
max-height: calc(100dvh - max(12px, env(safe-area-inset-top)));
padding-bottom: calc(18px + env(safe-area-inset-bottom));
overflow-y: auto;
overscroll-behavior: contain;
transform: translate3d(0, calc(18px + var(--ss-sheet-motion-y, 0px)), 0);
}
#ss-player-sleep-timer.is-open .ss-player-sleep-modal__dialog,
#ss-player-sleep-timer.is-visible .ss-player-sleep-modal__dialog {
transform: translate3d(0, var(--ss-sheet-motion-y, 0px), 0);
}
#ss-player-sleep-timer.is-closing .ss-player-sleep-modal__dialog {
transform: translate3d(0, calc(18px + var(--ss-sheet-motion-y, 0px)), 0);
}
#ss-player-sleep-timer .ss-player-sleep-modal__footer {
padding-bottom: env(safe-area-inset-bottom);
}
.ss-mini-player__seek::-webkit-slider-thumb {
margin-top: -6px !important;
}
.ss-mini-player__seek:hover::-webkit-slider-thumb,
.ss-mini-player__seek:focus-visible::-webkit-slider-thumb,
.ss-mini-player__seek:active::-webkit-slider-thumb,
.ss-mini-player.is-seeking .ss-mini-player__seek::-webkit-slider-thumb {
margin-top: -7px !important;
}
}
.ss-full-player__volume-wrap.is-muted .ss-full-player__volume-trigger,
.ss-mini-player__volume-wrap.is-muted .ss-mini-player__volume-trigger {
color: var(--ss-accent);
}
.ss-full-player__volume-popover,
.ss-mini-player__volume-popover {
left: 50%;
right: auto;
bottom: calc(100% + 10px);
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 112px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
transform: translateX(-50%);
}
.ss-full-player__volume-wrap {
z-index: 20;
}
.ss-full-player__volume-wrap.is-open {
z-index: 120;
}
.ss-full-player__volume-popover {
bottom: calc(100% - 6px);
z-index: 121;
}
.ss-full-player__volume-popover[hidden],
.ss-mini-player__volume-popover[hidden] {
display: none;
}
.ss-full-player__volume-head,
.ss-full-player__volume-percent,
.ss-mini-player__volume-head,
.ss-mini-player__volume-percent {
display: none;
}
.ss-full-player__volume-range,
.ss-mini-player__volume-range {
--ss-volume-percent: 100%;
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 50%;
left: 50%;
width: 92px;
height: 6px;
margin: 0;
border-radius: 999px;
background: linear-gradient(
to right,
var(--ss-accent) 0%,
var(--ss-accent) var(--ss-volume-percent),
#343434 var(--ss-volume-percent),
#343434 100%
);
outline: 0;
cursor: pointer;
transform: translate(-50%, -50%) rotate(-90deg);
}
.ss-full-player__volume-range::-webkit-slider-runnable-track,
.ss-mini-player__volume-range::-webkit-slider-runnable-track {
height: 6px;
border: 0;
border-radius: 999px;
background: transparent;
}
.ss-full-player__volume-range::-webkit-slider-thumb,
.ss-mini-player__volume-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
margin-top: -4px;
border: 0;
border-radius: 999px;
background: #fff6c7;
box-shadow: 0 3px 10px rgba(251, 203, 7, .28);
}
.ss-full-player__volume-range::-moz-range-track,
.ss-mini-player__volume-range::-moz-range-track {
height: 6px;
border: 0;
border-radius: 999px;
background: #343434;
}
.ss-full-player__volume-range::-moz-range-progress,
.ss-mini-player__volume-range::-moz-range-progress {
height: 6px;
border-radius: 999px;
background: var(--ss-accent);
}
.ss-full-player__volume-range::-moz-range-thumb,
.ss-mini-player__volume-range::-moz-range-thumb {
width: 14px;
height: 14px;
border: 0;
border-radius: 999px;
background: #fff6c7;
box-shadow: 0 3px 10px rgba(251, 203, 7, .28);
}
.ss-full-player__volume-range:disabled,
.ss-mini-player__volume-range:disabled {
opacity: .38;
cursor: default;
}
@supports selector(:focus-visible) {
#ss-player-runtime a:focus:not(:focus-visible),
#ss-player-runtime button:focus:not(:focus-visible),
#ss-player-runtime [role="button"]:focus:not(:focus-visible),
#ss-player-runtime input[type="button"]:focus:not(:focus-visible),
#ss-player-runtime input[type="submit"]:focus:not(:focus-visible),
#ss-player-runtime input[type="reset"]:focus:not(:focus-visible),
#ss-player-runtime [tabindex]:focus:not(:focus-visible),
.ss-player-login-prompt a:focus:not(:focus-visible),
.ss-player-login-prompt button:focus:not(:focus-visible),
.ss-player-queue-panel button:focus:not(:focus-visible),
.ss-player-download-panel a:focus:not(:focus-visible),
.ss-player-download-panel button:focus:not(:focus-visible),
.ss-player-playlist-panel button:focus:not(:focus-visible) {
outline: 0 !important;
}
#ss-player-runtime .btn:focus:not(:focus-visible),
#ss-player-runtime .btn.focus:not(:focus-visible),
.ss-player-login-prompt .btn:focus:not(:focus-visible),
.ss-player-download-panel .btn:focus:not(:focus-visible),
.ss-player-playlist-panel .btn:focus:not(:focus-visible) {
box-shadow: none !important;
}
#ss-player-runtime a:focus-visible,
#ss-player-runtime button:focus-visible,
#ss-player-runtime [role="button"]:focus-visible,
#ss-player-runtime input[type="button"]:focus-visible,
#ss-player-runtime input[type="submit"]:focus-visible,
#ss-player-runtime input[type="reset"]:focus-visible,
#ss-player-runtime [tabindex]:focus-visible,
.ss-player-login-prompt a:focus-visible,
.ss-player-login-prompt button:focus-visible,
.ss-player-queue-panel button:focus-visible,
.ss-player-download-panel a:focus-visible,
.ss-player-download-panel button:focus-visible,
.ss-player-playlist-panel button:focus-visible {
outline: 2px solid rgba(251, 203, 7, .72) !important;
outline-offset: 3px;
}
}