From 055ec1fca9639e93848ddf7cbfff6fa7a47e69dd Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Mon, 20 Apr 2026 02:08:28 +0200
Subject: [PATCH] refactor: move all volume slider styles to Tailwind arbitrary
 variants

---
 internal/templates/watch.templ |  4 +-
 static/style.css               | 77 ----------------------------------
 2 files changed, 2 insertions(+), 79 deletions(-)

diff --git a/internal/templates/watch.templ b/internal/templates/watch.templ
index c10f201..716b801 100644
--- a/internal/templates/watch.templ
+++ b/internal/templates/watch.templ
@@ -59,7 +59,7 @@ templ WatchPage(anime jikan.Anime, data WatchPageData) {
 					<div
 						hx-get={ string(templ.URL(fmt.Sprintf("/api/anime/%d/episodes?current=%s", anime.MalID, data.CurrentEpisode))) }
 						hx-trigger="load"
-						class="scrollbar-hidden overflow-y-auto flex-1"
+						class="overflow-y-auto flex-1 [&::-webkit-scrollbar]:hidden"
 					>
 						@LoadingIndicatorSmall()
 					</div>
@@ -266,7 +266,7 @@ templ VideoPlayer(data WatchPageData) {
 									max="100"
 									step="1"
 									value="100"
-									class="volume-range volume-track volume-thumb h-24 w-4 cursor-pointer appearance-none bg-transparent"
+									class="h-24 w-4 cursor-pointer appearance-none bg-transparent accent-white [&::-webkit-slider-runnable-track]:w-[4px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-white/55 [&::-webkit-slider-runnable-track]:[box-shadow:0_0_10px_rgba(0,0,0,0.45)] [&::-moz-range-track]:w-[4px] [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-white/55 [&::-moz-range-track]:[box-shadow:0_0_10px_rgba(0,0,0,0.45)] [&::-webkit-slider-thumb]:h-[14px] [&::-webkit-slider-thumb]:w-[14px] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:-ml-[5px] [&::-webkit-slider-thumb]:[box-shadow:0_0_10px_rgba(0,0,0,0.55)] [&::-moz-range-thumb]:h-[14px] [&::-moz-range-thumb]:w-[14px] [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:[box-shadow:0_0_10px_rgba(0,0,0,0.55)] [writing-mode:vertical-lr] [direction:rtl]"
 									aria-label="Volume"
 								/>
 							</div>
diff --git a/static/style.css b/static/style.css
index d218514..ec08138 100644
--- a/static/style.css
+++ b/static/style.css
@@ -33,80 +33,3 @@
   --poster-max-height: 360px;
   --font: 'Verdana', 'Tahoma', 'Segoe UI', sans-serif;
 }
-
-@utility volume-range {
-  writing-mode: vertical-lr;
-  direction: rtl;
-  accent-color: #ffffff;
-}
-
-@utility volume-track {
-  &::-webkit-slider-runnable-track {
-    width: 4px;
-    border-radius: 9999px;
-    background: rgba(255, 255, 255, 0.55);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
-  }
-  &::-moz-range-track {
-    width: 4px;
-    border-radius: 9999px;
-    background: rgba(255, 255, 255, 0.55);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
-  }
-}
-
-@utility volume-thumb {
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 14px;
-    height: 14px;
-    border-radius: 9999px;
-    background: #ffffff;
-    border: 0;
-    margin-left: -5px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
-  }
-  &::-moz-range-thumb {
-    width: 14px;
-    height: 14px;
-    border-radius: 9999px;
-    background: #ffffff;
-    border: 0;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
-  }
-}
-
-@utility volume-panel-visible {
-  opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
-}
-
-@utility volume-bridge-off {
-  pointer-events: none;
-}
-
-@utility volume-underline-visible {
-  opacity: 1;
-}
-
-[data-volume-wrap]:is(.is-volume-open, :has(.volume-panel.volume-panel-visible)) [data-volume-bridge] {
-  pointer-events: auto;
-}
-
-.volume-underline {
-  opacity: 0;
-}
-
-[data-volume-wrap]:is(.is-volume-open, :has(.volume-panel.volume-panel-visible)) .volume-underline {
-  opacity: 1;
-}
-
-@utility scrollbar-hidden {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}