player: use CSS :has() for volume slider hover (pure CSS solution)

2026-04-18 06:35:26 +02:00
parent 61ab440145
commit aa14114963
3 changed files with 8 additions and 5 deletions
--- a/internal/templates/watch.templ
+++ b/internal/templates/watch.templ
@@ -232,6 +232,7 @@ templ VideoPlayer(data WatchPageData) {
 							</svg>
 						</button>
 						<div data-volume-wrap class="volume-wrap relative flex h-10 w-10 items-center justify-center overflow-visible">
+							<span data-volume-bridge class="pointer-events-none absolute inset-x-0 bottom-full h-[calc(100%+100px)]"></span>
 							<div class="volume-panel pointer-events-none absolute bottom-[calc(100%+26px)] left-1/2 z-30 -translate-x-1/2 opacity-0 invisible transition-opacity">
 								<input
 									data-volume-range