From c4f86d2a7eb99fbd3dd9e44ebda1d67c913709dc Mon Sep 17 00:00:00 2001
From: LogicalKarma <>
Date: Tue, 26 May 2026 13:22:50 +0300
Subject: [PATCH] fix(player): suppress Firefox blue :focus outline on <video>
 element

VideoPlayer calls videoEl.focus() on every seek-bar mouseup (existing
upstream code, so hotkeys-js continues receiving keys). Firefox/Gecko
draws the system :focus outline whenever a <video> element is focused;
Chromium uses :focus-visible heuristics on media elements and doesn't
render it for click-driven focus, which is why this is Gecko-only.

Add a targeted CSS rule outside the Tailwind @layer so it wins the
cascade against any layered author or vendor rule, and !important to
override the UA focus ring.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/VideoPlayer.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index d869e6d6..c4b4db7a 100644
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -972,4 +972,16 @@ defineExpose({
         max-width: none !important;
     }
 }
+
+/* Suppress Firefox/Gecko's blue :focus outline on the <video> element.
+   We explicitly .focus() the video on seek-bar mouseup (so hotkeys-js keeps
+   receiving keys), and Gecko draws a system focus outline whenever a <video>
+   is focused. Chromium uses :focus-visible heuristics on media elements so it
+   doesn't render the outline for click-driven focus. Kept outside @layer so
+   it wins over any layered rule, and !important to override the UA focus ring
+   if specificity gets shadowed. */
+video.shaka-video:focus,
+video[data-shaka-player]:focus {
+    outline: none !important;
+}
 </style>