From: Ben Harris <bjh21@bjh21.me.uk>
Date: Sun, 12 Oct 2025 15:27:13 +0000 (+0100)
Subject: webstead: style for #pixels input:focus-visible
X-Git-Tag: bedstead-3.261~33
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~bjharris/git?a=commitdiff_plain;h=0ecf8f3ebf8e0aa74e6ca02ab58e8053a47794eb;p=bedstead.git

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

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.