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 a6ab612ddc696f59dbeb89aa495f085a658781a4..7452ecdba31351920454a806a8e82c40dbc83810 100644 (file)
--- 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.