From 2f99c71f2f2acb3a2004d88f56dc56287fdf963e Mon Sep 17 00:00:00 2001 From: gabalafou Date: Wed, 24 Apr 2024 05:46:15 -0400 Subject: [PATCH] Fix focus ring glitch on API autosummary "[source]" link (#1778) --- .../assets/styles/content/_api.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/pydata_sphinx_theme/assets/styles/content/_api.scss b/src/pydata_sphinx_theme/assets/styles/content/_api.scss index 5ec1c49d9..4eba39fca 100644 --- a/src/pydata_sphinx_theme/assets/styles/content/_api.scss +++ b/src/pydata_sphinx_theme/assets/styles/content/_api.scss @@ -111,6 +111,21 @@ span.highlighted { background-color: var(--pst-color-target); } +dl > dt > a:has(.viewcode-link) { + // Sphinx applies a `float:right` rule to the .viewcode-line span, which + // exposes a browser glitch in the focus ring. It seems the browser creates + // two separate boxes, an empty box where the anchor element gets laid out and + // then another box around the anchor's contents that have been floated right. + // Firefox draws the focus ring around the empty anchor element box. Chrome + // draws two focus rings: one around the empty anchor and one around the + // floated-right element. To fix the glitch, we apply the float rule on the + // parent rather than the child. + float: right; + .viewcode-link { + float: none; + } +} + /******************************************************************************* * Styling for autosummary titles like "parameters" and "returns" */