From aa14114963afd5778925f871f4c3a6f2d2295570 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Sat, 18 Apr 2026 06:35:26 +0200
Subject: [PATCH] player: use CSS :has() for volume slider hover (pure CSS
 solution)

---
 internal/templates/watch.templ | 1 +
 static/player.ts               | 3 +--
 static/style.css               | 9 ++++++---
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/internal/templates/watch.templ b/internal/templates/watch.templ
index ee74c7c..72f2b7f 100644
--- 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
diff --git a/static/player.ts b/static/player.ts
index 8a7ad97..3ecbe92 100644
--- a/static/player.ts
+++ b/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()
   })
diff --git a/static/style.css b/static/style.css
index 4bab98d..054c6b1 100644
--- a/static/style.css
+++ b/static/style.css
@@ -84,8 +84,9 @@
   height: 130px;
 }
 
-.volume-wrap.show-volume .volume-panel,
-.volume-wrap.show-volume::before,
+.volume-wrap:has([data-mute]:hover) .volume-panel,
+.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;
 }