95 lines
1.8 KiB
CSS
95 lines
1.8 KiB
CSS
.controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 10px;
|
|
background: #1e1e1e;
|
|
border-top: 1px solid #333;
|
|
border-bottom: 1px solid #333;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.btn {
|
|
background: #2d2d2d;
|
|
border: 1px solid #404040;
|
|
color: #ccc;
|
|
border-radius: 4px;
|
|
padding: 4px 10px;
|
|
font-size: 13px;
|
|
transition: background 0.1s;
|
|
min-width: 32px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.btn:hover:not(:disabled) { background: #3a3a3a; color: #fff; }
|
|
.btn:disabled { opacity: 0.35; cursor: default; }
|
|
|
|
.active {
|
|
color: #5ba3e0;
|
|
border-color: #4a7aaa;
|
|
}
|
|
|
|
/* ── Scrubber ───────────────────────────────────────────────── */
|
|
.scrubber {
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: 4px;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
border-radius: 2px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
border: none;
|
|
padding: 0;
|
|
/* filled portion via CSS variable set inline */
|
|
background: linear-gradient(
|
|
to right,
|
|
#5b9bd5 0%,
|
|
#5b9bd5 var(--progress, 0%),
|
|
#3a3a3a var(--progress, 0%),
|
|
#3a3a3a 100%
|
|
);
|
|
}
|
|
|
|
.scrubber:disabled {
|
|
opacity: 0.3;
|
|
cursor: default;
|
|
}
|
|
|
|
.scrubber::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: #5b9bd5;
|
|
cursor: pointer;
|
|
border: 2px solid #1e1e1e;
|
|
transition: transform 0.1s;
|
|
}
|
|
.scrubber:not(:disabled)::-webkit-slider-thumb:hover {
|
|
transform: scale(1.3);
|
|
}
|
|
|
|
.scrubber::-moz-range-thumb {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: #5b9bd5;
|
|
cursor: pointer;
|
|
border: 2px solid #1e1e1e;
|
|
}
|
|
|
|
.scrubber::-moz-range-track {
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background: #3a3a3a;
|
|
}
|
|
|
|
.time {
|
|
flex-shrink: 0;
|
|
font-size: 11px;
|
|
color: #888;
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|