.res-volume {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text-soft);
}
.res-volume input,
.res-seek input {
-webkit-appearance: none;
appearance: none;
height: 24px;
background: linear-gradient(to right,
var(--accent) 0 var(--range-pct, 0%),
var(--border) var(--range-pct, 0%) 100%) center / 100% 4px no-repeat;
border-radius: var(--radius-full);
cursor: pointer;
}
.res-volume input {
width: 110px;
}
.res-volume input::-webkit-slider-thumb,
.res-seek input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: var(--radius-full);
background: var(--accent);
cursor: pointer;
}
.res-volume input::-moz-range-thumb,
.res-seek input::-moz-range-thumb {
width: 14px;
height: 14px;
border: none;
border-radius: var(--radius-full);
background: var(--accent);
cursor: pointer;
}
.res-volume input:focus-visible {
outline: var(--focus-ring);
outline-offset: 3px;
border-radius: var(--radius-xs);
}
.res-nowplaying {
position: fixed;
left: 24px;
bottom: 24px;
z-index: 9;
display: flex;
align-items: center;
gap: 12px;
width: min(480px, calc(100vw - 120px));
padding: 8px 14px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
opacity: 0;
transform: translateY(8px);
pointer-events: none;
visibility: hidden;
transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out),
visibility 0s linear 0.2s;
}
.res-nowplaying--visible {
opacity: 1;
transform: none;
pointer-events: auto;
visibility: visible;
transition-delay: 0s;
}
.res-nowplaying-stop,
.res-nowplaying-pause {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex-shrink: 0;
padding: 0;
background: none;
border: 1px solid var(--border);
border-radius: var(--radius-full);
color: var(--text-soft);
cursor: pointer;
transition: color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.res-nowplaying-stop:hover,
.res-nowplaying-pause:hover {
color: var(--accent);
border-color: var(--accent);
}
.res-nowplaying-stop:focus-visible,
.res-nowplaying-pause:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
}
.res-nowplaying-pause svg + svg {
display: none;
}
.res-nowplaying--paused .res-nowplaying-pause svg:first-child {
display: none;
}
.res-nowplaying--paused .res-nowplaying-pause svg + svg {
display: block;
}
.res-nowplaying-main {
flex: 1;
min-width: 0;
display: grid;
row-gap: 2px;
}
.res-seek,
.res-nowplaying .res-volume {
min-width: 0;
}
.res-nowplaying-name {
min-width: 0;
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.res-seek {
display: flex;
align-items: center;
gap: 8px;
}
.res-seek input {
flex: 1;
min-width: 0;
margin: 0;
}
.res-seek input:focus-visible {
outline: var(--focus-ring);
outline-offset: 3px;
border-radius: var(--radius-xs);
}
.res-time {
font-family: var(--font-mono);
font-size: var(--fs-label);
color: var(--text-soft);
font-variant-numeric: tabular-nums;
}
.res-nowplaying .res-volume input {
width: 72px;
}
@media (max-width: 30em) {
.res-nowplaying-main {
display: contents;
}
.res-nowplaying-name {
flex: 1 1 auto;
min-width: 0;
align-self: center;
}
.res-seek {
flex: 1 1 100%;
}
}
@media (max-width: 40em) {
.res-nowplaying-stop,
.res-nowplaying-pause {
width: 44px;
height: 44px;
}
.res-nowplaying {
left: 16px;
bottom: 16px;
width: calc(100vw - 90px);
padding: 6px 12px;
flex-wrap: wrap;
row-gap: 4px;
}
.res-nowplaying .res-volume {
flex: 1 1 100%;
}
.res-nowplaying .res-volume input {
flex: 1;
width: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.res-nowplaying,
.res-nowplaying-stop,
.res-nowplaying-pause {
transition: none;
}
}