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

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

static/player.ts

@@ -502,13 +502,12 @@ const initPlayer = (): void => {
   })
 
   muteBtn?.addEventListener('mouseenter', () => {
-    volumeWrap?.classList.add('show-volume')
+    muteBtn.classList.add('show-volume')
     isHoveringVolume = true
     showControls()
   })
 
   muteBtn?.addEventListener('mouseleave', () => {
-    volumeWrap?.classList.remove('show-volume')
     isHoveringVolume = false
     showControls()
   })

static/style.css

@@ -84,8 +84,9 @@
   height: 130px;
 }
 
-.volume-wrap.show-volume .volume-panel,
+.volume-wrap:has([data-mute]:hover) .volume-panel,
-.volume-wrap.show-volume::before,
+.volume-wrap:has([data-volume-bridge]:hover) .volume-panel,
+.volume-wrap:has(.volume-panel:hover) .volume-panel,
 .volume-wrap:focus-within .volume-panel,
 .volume-panel:hover,
 .volume-panel:focus-within {
@@ -94,7 +95,9 @@
   pointer-events: auto;
 }
 
-.volume-wrap.show-volume .volume-underline,
+.volume-wrap:has([data-mute]:hover) .volume-underline,
+.volume-wrap:has([data-volume-bridge]:hover) .volume-underline,
+.volume-wrap:has(.volume-panel:hover) .volume-underline,
 .volume-wrap:focus-within .volume-underline {
   opacity: 1;
 }