style: improve volume slider visibility

This commit is contained in:
2026-04-20 18:45:27 +02:00
parent f64e827d22
commit ff38e6463e

View File

@@ -128,8 +128,8 @@ templ VideoPlayer(data shared.WatchPageData) {
max="100"
step="1"
value="100"
class="h-1 w-20 -rotate-90 cursor-pointer appearance-none rounded-full outline-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white"
style="background: linear-gradient(to right, #007aff var(--volume-percent, 100%), #555555 var(--volume-percent, 100%));"
class="h-1.5 w-20 -rotate-90 cursor-pointer appearance-none rounded-full outline-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_rgba(0,0,0,0.18),0_1px_3px_rgba(0,0,0,0.22)] [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:shadow-[0_0_0_1px_rgba(0,0,0,0.18),0_1px_3px_rgba(0,0,0,0.22)]"
style="background: linear-gradient(to right, #ffffff var(--volume-percent, 100%), rgba(255,255,255,0.72) var(--volume-percent, 100%)); box-shadow: 0 0 0 1px rgba(0,0,0,0.16), 0 1px 4px rgba(0,0,0,0.18);"
aria-label="Volume"
/>
</div>