#frp-player {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: var(--frp-bg);
color: var(--frp-text);
padding: 8px 20px;
display: flex;
align-items: center;
box-sizing: border-box;
z-index: 9999;
} .frp-cover {
margin-right: 15px;
flex-shrink: 0;
}
.frp-cover img {
width: 50px;
height: 50px;
object-fit: cover;
display: block;
} .frp-left {
flex: 1;
min-width: 0;
} .frp-title {
font-weight: 700;
font-size: 20px;
margin-bottom: 4px;
} .frp-track {
font-size: 18px;
overflow: hidden;
white-space: nowrap;
}
#frp-current-track {
display: inline-block;
padding-left: 100%;
animation: frp-scroll 18s linear infinite;
}
@keyframes frp-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
} .frp-controls {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
.frp-btn {
background: none;
border: none;
cursor: pointer;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--frp-button);
transition: opacity 0.2s ease;
}
.frp-btn:hover {
opacity: 0.8;
}
.frp-btn svg {
width: 35px;
height: 35px;
} #frp-stream-toggle {
font-size: 24px;
line-height: 1;
min-width: 40px;
} .frp-volume-wrapper {
display: flex;
align-items: center;
overflow: hidden;
}
.frp-volume-slider {
max-width: 0;
overflow: hidden;
opacity: 0;
transition: max-width 0.3s ease, opacity 0.2s ease;
}
.frp-volume-wrapper:hover .frp-volume-slider {
max-width: 120px;
opacity: 1;
margin-left: 8px;
}
#frp-volume {
width: 120px;
} @media (max-width: 768px) {
#frp-player {
padding: 8px 12px;
}
.frp-cover img {
width: 40px;
height: 40px;
}
.frp-title {
font-size: 17px;
}
.frp-track {
font-size: 16px;
}
.frp-btn svg {
width: 26px;
height: 26px;
}
#frp-stream-toggle {
font-size: 20px;
min-width: 32px;
} .frp-volume-wrapper {
display: none !important;
}
} body {
padding-bottom: 60px !important;
}