From 0ecf8f3ebf8e0aa74e6ca02ab58e8053a47794eb Mon Sep 17 00:00:00 2001
From: Ben Harris <bjh21@bjh21.me.uk>
Date: Sun, 12 Oct 2025 16:27:13 +0100
Subject: [PATCH] webstead: style for #pixels input:focus-visible

The usual focus ring in Firefox and Chromium appears at the same
stacking level as the element it's attached to.  This means that it's
hidden by elements after it in the document, including pixels below it
and to its right.  Fiddling with the z-index of the focussed pixel
helps with this.
---
 webstead.xhtml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/webstead.xhtml b/webstead.xhtml
index a6ab612..7452ecd 100644
--- a/webstead.xhtml
+++ b/webstead.xhtml
@@ -49,6 +49,10 @@
           width: calc(var(--pix) - 6px);
           height: calc(var(--pix) - 6px);
       }
+      #pixels input:focus-visible {
+          position: relative;
+          z-index: 1;
+      }
     </style>
     <!-- Script is async rather than deferred because Chromium can't
          handle deferred scripts in XHTML.
-- 
2.30.2