diff options
Diffstat (limited to 'assets/css/default-syntax.css')
| -rw-r--r-- | assets/css/default-syntax.css | 228 |
1 files changed, 228 insertions, 0 deletions
diff --git a/assets/css/default-syntax.css b/assets/css/default-syntax.css new file mode 100644 index 0000000..e6f7021 --- /dev/null +++ b/assets/css/default-syntax.css @@ -0,0 +1,228 @@ +/* ----- Format ----- */ + +.chroma .hl { + 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 { + padding: 0.05rem 0.75rem; + margin: 0 1rem 0 -0.75rem; + user-select: none; + text-decoration: none; + display: inline-block; +} + +.chroma .ln a:hover, +.chroma .ln:target a { + outline: 0.15rem solid !important; + outline-offset: -0.3rem; +} + +.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; +} + +code-block code { + position: relative; +} + +code-block button { + border: 1px solid #ccc; +} + +code-block header language-label a, +code-block header language-label a:hover { + color: #111; +} + +/* ------ 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: #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); + --code-comment-multiline: var(--code-comment); + --code-comment-preproc: #222222; + --code-comment-preproc-file: #005194; + --code-comment-single: var(--code-comment); + --code-comment-special: var(--code-comment); +} + +/* Comment */ .chroma .c { color: #222222; color: var(--code-comment); } +/* CommentHashbang */ .chroma .ch { color: #222222; color: var(--code-comment-hashbang); } +/* CommentMultiline */ .chroma .cm { color: #222222; color: var(--code-comment-multiline); } +/* CommentPreproc */ .chroma .cp { color: #222222; color: var(--code-comment-preproc); } +/* CommentPreprocFile */ .chroma .cpf { color: #005194; color: var(--code-comment-preproc-file); } +/* CommentSingle */ .chroma .c1 { color: #4f4f4f; color: var(--code-comment-single); } +/* CommentSpecial */ .chroma .cs { color: #222222; color: var(--code-comment-special); } + +:root { + --code-generic-deleted: #8d1007; + --code-generic-inserted: #224e24; + --code-generic-subheading: #2d4958; + --code-generic-tag: var(--code-generic); + --code-generic: #2d4958; +} + +/* GenericDeleted */ .chroma .gd { color: #8d1007; color: var(--code-generic-deleted); } +/* GenericInserted */ .chroma .gi { color: #224e24; color: var(--code-generic-inserted); } +/* GenericSubheading */ .chroma .gu { color: #2d4958; color: var(--code-generic-subheading); } +/* GenericStrong */ .chroma .gs { font-weight: 700; } +/* GenericEmph */ .chroma .ge { font-style: italic; } + +.chroma .gi { background-color: #e6ffed; padding: 0.25rem 0; } +.chroma .gd { background-color: #ffebe9; padding: 0.25rem 0; } + +:root { + --code-keyword: #4f4f59; + --code-keyword-constant: #07518d; + --code-keyword-declaration: var(--code-keyword); + --code-keyword-namespace: var(--code-keyword); + --code-keyword-pseudo: var(--code-keyword); + --code-keyword-reserved: var(--code-keyword); + --code-keyword-type: #36590d; +} + +/* Keyword */ .chroma .k { color: #4f4f59; color: var(--code-keyword); } +/* KeywordConstant */ .chroma .kc { color: #07518d; color: var(--code-keyword-constant); } +/* KeywordDeclaration */ .chroma .kd { color: #4f4f59; color: var(--code-keyword-declaration); } +/* KeywordNamespace */ .chroma .kn { color: #4f4f59; color: var(--code-keyword-namespace); } +/* KeywordPseudo */ .chroma .kp { color: #4f4f59; color: var(--code-keyword-pseudo); } +/* KeywordReserved */ .chroma .kr { color: #4f4f59; color: var(--code-keyword-reserved); } +/* KeywordType */ .chroma .kt { color: #36590d; color: var(--code-keyword-type); } + +:root { + --code-literal: #744601; + --code-literal-date: var(--code-literal); + --code-literal-number: var(--code-literal); + --code-literal-number-bin: var(--code-literal); + --code-literal-number-float: var(--code-literal); + --code-literal-number-hex: var(--code-literal); + --code-literal-number-integer: var(--code-literal); + --code-literal-number-integer-long: var(--code-literal); + --code-literal-number-oct: var(--code-literal); + --code-literal-string: #664d00; + --code-literal-string-affix: #664d00; + --code-literal-string-backtick: #664d00; + --code-literal-string-char: #664d00; + --code-literal-string-delimiter: #664d00; + --code-literal-string-doc: #4f4f59; + --code-literal-string-double: #664d00; + --code-literal-string-escape: #664d00; + --code-literal-string-heredoc: #664d00; + --code-literal-string-interpol: #664d00; + --code-literal-string-other: #664d00; + --code-literal-string-regex: #942e51; + --code-literal-string-single: #664d00; + --code-literal-string-symbol: #664d00; +} + +/* Literal */ .chroma .l { color: #744601; color: var(--code-literal); } +/* LiteralDate */ .chroma .ld { color: #744601; color: var(--code-literal-date); } +/* LiteralNumber */ .chroma .m { color: #744601; color: var(--code-literal-number); } +/* LiteralNumberBin */ .chroma .mb { color: #744601; color: var(--code-literal-number-bin); } +/* LiteralNumberFloat */ .chroma .mf { color: #744601; color: var(--code-literal-number-float); } +/* LiteralNumberHex */ .chroma .mh { color: #744601; color: var(--code-literal-number-hex); } +/* LiteralNumberInteger */ .chroma .mi { color: #744601; color: var(--code-literal-number-integer); } +/* LiteralNumberIntegerLong */ .chroma .il { color: #744601; color: var(--code-literal-number-integer-long); } +/* LiteralNumberOct */ .chroma .mo { color: #744601; color: var(--code-literal-number-oct); } +/* LiteralString */ .chroma .s { color: #664d00; color: var(--code-literal-string); } +/* LiteralStringAffix */ .chroma .sa { color: #664d00; color: var(--code-literal-string-affix); } +/* LiteralStringBacktick */ .chroma .sb { color: #664d00; color: var(--code-literal-string-backtick); } +/* LiteralStringChar */ .chroma .sc { color: #664d00; color: var(--code-literal-string-char); } +/* LiteralStringDelimiter */ .chroma .dl { color: #664d00; color: var(--code-literal-string-delimiter); } +/* LiteralStringDoc */ .chroma .sd { color: #4f4f59; color: var(--code-literal-string-doc); } +/* LiteralStringDouble */ .chroma .s2 { color: #664d00; color: var(--code-literal-string-double); } +/* LiteralStringEscape */ .chroma .se { color: #664d00; color: var(--code-literal-string-escape); } +/* LiteralStringHeredoc */ .chroma .sh { color: #664d00; color: var(--code-literal-string-heredoc); } +/* LiteralStringInterpol */ .chroma .si { color: #664d00; color: var(--code-literal-string-interpol); } +/* LiteralStringOther */ .chroma .sx { color: #664d00; color: var(--code-literal-string-other); } +/* LiteralStringRegex */ .chroma .sr { color: #942e51; color: var(--code-literal-string-regex); } +/* LiteralStringSingle */ .chroma .s1 { color: #664d00; color: var(--code-literal-string-single); } +/* LiteralStringSymbol */ .chroma .ss { color: #664d00; color: var(--code-literal-string-symbol); } + +:root { + --code-name: #6d2caa; + --code-name-attribute: #6d2caa; + --code-name-builtin: #222222; + --code-name-class: var(--code-name); + --code-name-constant: var(--code-name); + --code-name-decorator: var(--code-name); + --code-name-exception: var(--code-name); + --code-name-function: var(--code-name); + --code-name-other: var(--code-name); + --code-name-tag: var(--code-name); + --code-name-variable: #005194; +} + +/* Name */ .chroma .n { color: #6d2caa; color: var(--code-name); } +/* NameAttribute */ .chroma .na { color: #6d2caa; color: var(--code-name-attribute); } +/* NameBuiltin */ .chroma .nb { color: #222222; color: var(--code-name-builtin); } +/* NameClass */ .chroma .nc { color: #6d2caa; color: var(--code-name-class); } +/* NameConstant */ .chroma .no { color: #6d2caa; color: var(--code-name-constant); } +/* NameDecorator */ .chroma .nd { color: #6d2caa; color: var(--code-name-decorator); } +/* NameException */ .chroma .ne { color: #6d2caa; color: var(--code-name-exception); } +/* NameFunction */ .chroma .nf { color: #6d2caa; color: var(--code-name-function); } +/* NameOther */ .chroma .nx { color: #6d2caa; color: var(--code-name-other); } +/* NameTag */ .chroma .nt { color: #6d2caa; color: var(--code-name-tag); } +/* NameVariable */ .chroma .nv { color: #005194; color: var(--code-name-variable); } + +:root { + --code-operator: #4f4f59; + --code-operator-word: var(--code-operator); +} + +/* Operator */ .chroma .o { color: #4f4f59; color: var(--code-operator); } +/* OperatorWord */ .chroma .ow { color: #4f4f59; color: var(--code-operator-word); } + +:root { + --code-punctuation: #4f4f4f; +} + +/* Punctuation */ .chroma .p { color: #4f4f4f; color: var(--code-punctuation); } |