diff options
Diffstat (limited to 'assets/css/syntax-highlight-default.css')
| -rw-r--r-- | assets/css/syntax-highlight-default.css | 76 |
1 files changed, 46 insertions, 30 deletions
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); |