Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2026-06-02 04:44:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(player): suppress Firefox blue :focus outline on <video> element

Browse Source 
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>
This commit is contained in:
LogicalKarma
2026-05-26 13:22:50 +03:00
parent 6b666b4b6f
commit c4f86d2a7e
1 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/VideoPlayer.vue
View File

@@ -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>