From 846033de59d1e8378e7c8f5fabc515800ec34b58 Mon Sep 17 00:00:00 2001 From: tdro Date: Thu, 18 May 2023 11:03:37 -0400 Subject: assets/css/syntax-highlight-default: Fix offset target selector and highlights Pain and suffering --- assets/css/default.css | 7 +-- assets/css/syntax-highlight-default.css | 76 ++++++++++++++++++++------------- 2 files changed, 50 insertions(+), 33 deletions(-) (limited to 'assets') 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); -- cgit v1.2.3