From 0a279cab2554f9d0c9cdf20bbd4d4ca6bfd8498c Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Mon, 20 Apr 2026 18:11:44 +0200
Subject: [PATCH] style(ui): update volume slider to match theme without
 background

---
 web/components/watch/video_player.templ | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/components/watch/video_player.templ b/web/components/watch/video_player.templ
index 2b8fa90..7eb6712 100644
--- a/web/components/watch/video_player.templ
+++ b/web/components/watch/video_player.templ
@@ -120,7 +120,7 @@ templ VideoPlayer(data shared.WatchPageData) {
 								data-volume-panel
 								class="pointer-events-none absolute bottom-full left-1/2 z-30 -translate-x-1/2 pb-3 opacity-0 invisible transition-all duration-200 group-hover/volume:pointer-events-auto group-hover/volume:opacity-100 group-hover/volume:visible focus-within:pointer-events-auto focus-within:opacity-100 focus-within:visible [&.is-dragging]:pointer-events-auto [&.is-dragging]:opacity-100 [&.is-dragging]:visible"
 							>
-								<div class="flex items-center justify-center rounded-md bg-[#2B2B2B] px-3 py-3 shadow-xl">
+								<div class="flex items-center justify-center px-3 py-2">
 									<input
 										data-volume-range
 										type="range"
@@ -128,7 +128,7 @@ templ VideoPlayer(data shared.WatchPageData) {
 										max="100"
 										step="1"
 										value="100"
-										class="h-24 w-1.5 cursor-pointer rounded-full bg-white/20 accent-[#e50914] outline-none [writing-mode:vertical-lr] [direction:rtl]"
+										class="h-24 w-1.5 cursor-pointer rounded-full bg-white/20 accent-gray-300 outline-none [writing-mode:vertical-lr] [direction:rtl] [&::-webkit-slider-thumb]:shadow-[0_0_6px_rgba(255,255,255,1)] [&::-moz-range-thumb]:shadow-[0_0_6px_rgba(255,255,255,1)]"
 										aria-label="Volume"
 									/>
 								</div>