.fvr-audio-player {
--fvr-primary-color: #0073aa;
--fvr-primary-rgb: 0, 115, 170;
--fvr-bg-color: #f8f9fa;
--fvr-border-color: #e9ecef;
--fvr-text-color: #333;
--fvr-text-muted: #6c757d;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
background: var(--fvr-bg-color);
border: 1px solid var(--fvr-border-color);
border-radius: 12px;
padding: 16px;
margin: 20px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
} .fvr-player-label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 14px;
color: var(--fvr-text-color);
font-weight: 500;
}
.fvr-headphones-icon {
font-size: 18px;
} .fvr-player-wrapper {
display: flex;
align-items: center;
gap: 12px;
} .fvr-play-btn {
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: var(--fvr-primary-color);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fvr-play-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(var(--fvr-primary-rgb), 0.4);
}
.fvr-play-btn:active {
transform: scale(0.98);
}
.fvr-play-btn svg {
width: 24px;
height: 24px;
} .fvr-progress-container {
flex: 1;
min-width: 0;
}
.fvr-progress-bar {
position: relative;
height: 6px;
background: #ddd;
border-radius: 3px;
cursor: pointer;
overflow: visible;
}
.fvr-progress-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: var(--fvr-primary-color);
border-radius: 3px;
width: 0%;
transition: width 0.1s linear;
}
.fvr-progress-handle {
position: absolute;
top: 50%;
left: 0%;
width: 14px;
height: 14px;
background: var(--fvr-primary-color);
border: 2px solid white;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
opacity: 0;
transition: opacity 0.2s ease;
}
.fvr-progress-bar:hover .fvr-progress-handle {
opacity: 1;
} .fvr-time {
display: flex;
align-items: center;
gap: 4px;
margin-top: 6px;
font-size: 12px;
color: var(--fvr-text-muted);
font-variant-numeric: tabular-nums;
}
.fvr-separator {
opacity: 0.5;
} .fvr-volume-container {
display: flex;
align-items: center;
gap: 4px;
}
.fvr-volume-btn {
width: 32px;
height: 32px;
border: none;
background: transparent;
color: var(--fvr-text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: color 0.15s ease, background 0.15s ease;
}
.fvr-volume-btn:hover {
color: var(--fvr-text-color);
background: rgba(0, 0, 0, 0.05);
}
.fvr-volume-btn svg {
width: 20px;
height: 20px;
}
.fvr-volume-slider {
width: 0;
overflow: hidden;
transition: width 0.2s ease;
}
.fvr-volume-container:hover .fvr-volume-slider {
width: 60px;
}
.fvr-volume-range {
width: 60px;
height: 4px;
-webkit-appearance: none;
appearance: none;
background: #ddd;
border-radius: 2px;
cursor: pointer;
}
.fvr-volume-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
background: var(--fvr-primary-color);
border-radius: 50%;
cursor: pointer;
}
.fvr-volume-range::-moz-range-thumb {
width: 12px;
height: 12px;
background: var(--fvr-primary-color);
border-radius: 50%;
cursor: pointer;
border: none;
} .fvr-speed-container {
position: relative;
}
.fvr-speed-btn {
padding: 4px 8px;
border: 1px solid var(--fvr-border-color);
background: white;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
color: var(--fvr-text-muted);
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.fvr-speed-btn:hover {
border-color: var(--fvr-primary-color);
color: var(--fvr-primary-color);
}
.fvr-speed-menu {
position: absolute;
bottom: 100%;
right: 0;
background: white;
border: 1px solid var(--fvr-border-color);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
padding: 4px;
margin-bottom: 4px;
z-index: 10;
}
.fvr-speed-menu button {
display: block;
width: 100%;
padding: 8px 16px;
border: none;
background: transparent;
text-align: left;
font-size: 13px;
cursor: pointer;
border-radius: 4px;
white-space: nowrap;
}
.fvr-speed-menu button:hover {
background: var(--fvr-bg-color);
}
.fvr-speed-menu button.active {
color: var(--fvr-primary-color);
font-weight: 600;
} .fvr-size-small {
padding: 10px;
}
.fvr-size-small .fvr-play-btn {
width: 36px;
height: 36px;
}
.fvr-size-small .fvr-play-btn svg {
width: 18px;
height: 18px;
}
.fvr-size-small .fvr-player-label {
font-size: 12px;
}
.fvr-size-large {
padding: 20px;
}
.fvr-size-large .fvr-play-btn {
width: 56px;
height: 56px;
}
.fvr-size-large .fvr-play-btn svg {
width: 28px;
height: 28px;
}
.fvr-size-large .fvr-progress-bar {
height: 8px;
} .fvr-style-minimal {
background: transparent;
border: none;
box-shadow: none;
padding: 8px 0;
}
.fvr-style-minimal .fvr-player-label {
display: none;
} .fvr-audio-element {
display: none;
} @media (max-width: 480px) {
.fvr-player-wrapper {
flex-wrap: wrap;
gap: 10px;
}
.fvr-progress-container {
order: 3;
flex-basis: 100%;
}
.fvr-volume-container .fvr-volume-slider {
width: 60px;
}
}