assets/css/syntax-highlight-default: Fix offset target selector and highlights

Pain and suffering

2 files changed, 50 insertions, 33 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 4255c56..a3a8199 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -108,11 +108,11 @@
   vertical-align: inherit;
 }
 
-:target::before:not([role="doc-endnotes"] [id^="fn\:"]) {
+:target::before {
   content: "";
   display: block;
-  height: 4rem;
-  margin-top: -4rem;
+  height: 6rem;
+  margin-top: -6rem;
   visibility: hidden;
 }
 
@@ -125,6 +125,7 @@
   outline: 2px dashed var(--border-darker);
 }
 
+pre:focus-within,
 :focus:not(html):not(body):not(svg),
 sup:target [role="doc-noteref"][href^="#fn\:"],
 li:target [role="doc-backlink"][href^="#fnref\:"] {
diff --git a/assets/css/syntax-highlight-default.css b/assets/css/syntax-highlight-default.css
index 1552e5f..cf490bb 100644
--- a/assets/css/syntax-highlight-default.css
+++ b/assets/css/syntax-highlight-default.css
@@ -1,29 +1,47 @@
-/* ----- Colors ----- */
-
 /* ----- Format ----- */
 
 .chroma .hl {
-  display: flex;
   padding: 0 0.5rem;
   margin: 0 -0.5rem;
 }
 
+.chroma .line {
+  display: block;
+}
+
+.chroma .hl > .cl:before,
+.chroma .ln a:hover:before,
+.chroma .ln:target a:before,
+.chroma .line > .cl:hover:before {
+  content: "";
+  position: absolute;
+  height: 1.5rem;
+  width: 100%;
+  left: 0;
+  z-index: -1;
+}
+
 .chroma .ln a {
-  background-color: #edf2f7;
   padding: 0.2rem 0.75rem;
   margin: 0 1rem 0 -0.75rem;
   user-select: none;
   text-decoration: none;
 }
 
-.chroma .ln a:hover {
+.chroma .ln a:hover,
+.chroma .ln:target a {
   outline: 0.15rem solid !important;
   outline-offset: -0.3rem;
 }
 
-.chroma .line:hover {
+.chroma .line .cl:hover {
+  text-shadow: 0 0 currentColor;
+}
+
+.chroma .ln a:hover:before,
+.chroma .ln:target a:before,
+.chroma .line > .cl:hover:before {
   background-color: #f2f2f2;
-  display: flex;
 }
 
 code-block button {
@@ -38,31 +56,29 @@ code-block header language-label a:hover {
 /* ------ Tokens ------ */
 
 :root {
-  --code-chroma-background:       #ffffff;
-  --code-chroma-foreground:       #333333;
-  --code-chroma-error-background: #960050;
-  --code-chroma-error-foreground: #960050;
-  --code-chroma-label-background: #006894;
-  --code-chroma-label-foreground: #e6e6e6;
-  --code-chroma-line-highlight:   #d9ddf2;
-  --code-chroma-line-number:      #375462;
-  --code-chroma-line:             var(--code-chroma-foreground);
-}
-
-/* ChromaForeground      */  code-block, .chroma, .highlight { color:            #333333; color:            var(--code-chroma-foreground);                  }
-/* ChromaBackground      */  code-block button, .chroma      { background-color: #ffffff; background-color: var(--code-chroma-background);                  }
-/* ChromaErrorBackground */ .chroma .err                     { color:            #960050; color:            var(--code-chroma-error-background);            }
-/* ChromaErrorForeground */ .chroma .err                     { color:            #960050; color:            var(--code-chroma-error-foreground);            }
-/* ChromaLabelBackground */ .chroma code:before              { background-color: #006894; background-color: var(--code-chroma-label-background);            }
-/* ChromaLabelForeground */ .chroma code:before              { color:            #e6e6e6; color:            var(--code-chroma-label-foreground);            }
-/* ChromaLine            */ .chroma .line                    { color:            #333333; color:            var(--code-chroma-line);                        }
-/* ChromaLineHighlight   */ .chroma .hl                      { background-color: #d9ddf2; background-color: var(--code-chroma-line-highlight);              }
-/* ChromaLineNumber      */ .chroma .ln a                    { color: #375462 !important; color:            var(--code-chroma-line-number) !important;      }
-
-.chroma .hl {
-  background-color: #fff8c5;
+--code-chroma-background:             #ffffff;
+--code-chroma-foreground:             #333333;
+--code-chroma-error-background:       #960050;
+--code-chroma-error-foreground:       #960050;
+--code-chroma-label-background:       #006894;
+--code-chroma-label-foreground:       #e6e6e6;
+--code-chroma-line-highlight:         #fff8c5;
+--code-chroma-line-number:            #375462;
+--code-chroma-line-number-background: #edf2f7;
+--code-chroma-line:                   var(--code-chroma-foreground);
 }
 
+/* ChromaForeground           */  code-block, .chroma, .highlight { color:            #333333; color:            var(--code-chroma-foreground);                  }
+/* ChromaBackground           */  code-block button, .chroma      { background-color: #ffffff; background-color: var(--code-chroma-background);                  }
+/* ChromaErrorBackground      */ .chroma .err                     { color:            #960050; color:            var(--code-chroma-error-background);            }
+/* ChromaErrorForeground      */ .chroma .err                     { color:            #960050; color:            var(--code-chroma-error-foreground);            }
+/* ChromaLabelBackground      */ .chroma code:before              { background-color: #006894; background-color: var(--code-chroma-label-background);            }
+/* ChromaLabelForeground      */ .chroma code:before              { color:            #e6e6e6; color:            var(--code-chroma-label-foreground);            }
+/* ChromaLine                 */ .chroma .line                    { color:            #333333; color:            var(--code-chroma-line);                        }
+/* ChromaLineHighlight        */ .chroma .hl > span:before        { background-color: #fff8c5; background-color: var(--code-chroma-line-highlight);              }
+/* ChromaLineNumber           */ .chroma .ln a                    { color: #375462 !important; color:            var(--code-chroma-line-number) !important;      }
+/* ChromaLineNumberBackground */ .chroma .ln a                    { background-color: #edf2f7; background-color: var(--code-chroma-line-number-background);      }
+
 :root {
   --code-comment:              #4f4f4f;
   --code-comment-hashbang:     var(--code-comment);