Mert Uyanık
84 lines
1.6 KiB
CSS
84 lines
1.6 KiB
CSS
.volume-control {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--player-spacing-xs);
|
|
position: relative;
|
|
}
|
|
|
|
.volume-slider-container {
|
|
position: relative;
|
|
width: 0;
|
|
height: 4px;
|
|
background-color: var(--player-progress-bg);
|
|
border-radius: var(--player-radius-full);
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
transition: width var(--player-transition-normal) ease,
|
|
opacity var(--player-transition-normal) ease;
|
|
}
|
|
|
|
.volume-slider-container.visible {
|
|
width: 88px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.volume-slider {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
appearance: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.volume-slider:focus-visible {
|
|
outline: 2px solid var(--player-primary);
|
|
outline-offset: 2px;
|
|
border-radius: var(--player-radius-sm);
|
|
}
|
|
|
|
.volume-slider::-webkit-slider-runnable-track {
|
|
height: 100%;
|
|
background: transparent;
|
|
}
|
|
|
|
.volume-slider::-webkit-slider-thumb {
|
|
appearance: none;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background-color: var(--player-primary);
|
|
border: none;
|
|
margin-top: -4px;
|
|
}
|
|
|
|
.volume-slider::-moz-range-track {
|
|
height: 100%;
|
|
background: transparent;
|
|
}
|
|
|
|
.volume-slider::-moz-range-thumb {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background-color: var(--player-primary);
|
|
border: none;
|
|
}
|
|
|
|
.volume-slider-fill {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 0;
|
|
background: var(--player-primary);
|
|
border-radius: var(--player-radius-full);
|
|
pointer-events: none;
|
|
transition: width 0.12s ease;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.volume-slider-container.visible {
|
|
width: 72px;
|
|
}
|
|
}
|