From ae23c42e7d380b80b7643312acc637b35ef5d126 Mon Sep 17 00:00:00 2001 From: Cell <1024@lruihao.cn> Date: Tue, 1 Mar 2022 14:13:07 +0800 Subject: [PATCH] :art: Style: perfect highlight style details (#43) TODO: 1. gist highlight style 2. inline code style of github dark dimmed --- assets/css/_partial/_single/_code.scss | 50 ++++++++------- assets/css/_variables.scss | 86 +++++++++++++------------- 2 files changed, 71 insertions(+), 65 deletions(-) diff --git a/assets/css/_partial/_single/_code.scss b/assets/css/_partial/_single/_code.scss index 3d0b010b..7627a4a4 100644 --- a/assets/css/_partial/_single/_code.scss +++ b/assets/css/_partial/_single/_code.scss @@ -84,11 +84,11 @@ pre { border-radius: $global-border-radius; color: $code-info-color; background: darken($code-background-color, 3%); - @include transition(all 0.2s ease); + @include transition(border-radius 0.2s ease); [theme='dark'] & { color: $code-info-color-dark; - background: darken($code-background-color-dark, 3%); + background: darken($code-background-color-dark, 6%); } &:hover { @@ -134,33 +134,39 @@ pre { } } } - + + // delayed loading table-wrapper .table-wrapper { max-height: 0; overflow: hidden; border-radius: 0 0 $global-border-radius $global-border-radius; @include details-transition-open; + } - > table { - border-spacing: 0; - width: auto; - overflow: auto; - display: block; - background: $code-background-color; + table { + border-spacing: 0; + width: auto; + overflow: auto; + display: block; + background: $code-background-color; - [theme='dark'] & { - background: $code-background-color-dark; - } + [theme='dark'] & { + background: $code-background-color-dark; + } - td { - vertical-align: top; - padding: 0; - } + td { + vertical-align: top; + padding: 0; + } - pre { - padding: 0.25rem 0.5rem 0.25rem 0; - border-radius: 0; - } + pre { + padding: 0.25rem; + border-radius: 0; + } + + /* lineNumbersInTable=false */ + .ln { + min-width: 1.35rem; } // ========== lineNumbersInTable ========== // @@ -194,7 +200,7 @@ pre { border-radius: $global-border-radius $global-border-radius 0 0; [theme='dark'] & { - background: darken($code-background-color-dark, 6%); + background: darken($code-background-color-dark, 3%); } } @@ -244,7 +250,7 @@ pre { .ln { padding-right: 0.5rem; display: inline-block; - min-width: 1.6rem; + min-width: 1.1rem; text-align: right; } /* LineNumbers */ diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss index 5fb8e5a3..25163548 100644 --- a/assets/css/_variables.scss +++ b/assets/css/_variables.scss @@ -208,7 +208,7 @@ $code-highlight-color-map: ( /* NameFunctionMagic */ 'fm': #0550ae, /* NameLabel */ 'nl': #0550ae, /* NameNamespace */ 'nn': #8250df, - /* NameOther */ 'nx': $code-color, + /* NameOther */ 'nx': #0550ae, /* NameProperty */ 'py': #0550ae, /* NameTag */ 'nt': #116329, /* NameVariable */ 'nv': #953800, @@ -253,15 +253,15 @@ $code-highlight-color-map: ( /* GenericDeleted */ 'gd': #82071e, /* GenericEmph */ 'ge': $code-color, /* GenericError */ 'gr': $code-error-color, - /* GenericHeading */ 'gh': #999999, + /* GenericHeading */ 'gh': $code-color, /* GenericInserted */ 'gi': #116329, - /* GenericOutput */ 'go': #888888, - /* GenericPrompt */ 'gp': #555555, + /* GenericOutput */ 'go': $code-color, + /* GenericPrompt */ 'gp': $code-color, /* GenericStrong */ 'gs': $code-color, - /* GenericSubheading */ 'gu': #aaaaaa, + /* GenericSubheading */ 'gu': $code-color, /* GenericTraceback */ 'gt': $code-error-color, /* GenericUnderline */ 'gl': $code-color, - /* TextWhitespace */ 'w': #bbbbbb, + /* TextWhitespace */ 'w': $code-color, /* Other */ 'x': $code-color ) !default; $code-highlight-color-map-dark: ( @@ -272,30 +272,30 @@ $code-highlight-color-map-dark: ( /* KeywordNamespace */ 'kn': #f47067, /* KeywordPseudo */ 'kp': #f47067, /* KeywordReserved */ 'kr': #f47067, - /* KeywordType */ 'kt': #dcbdfb, + /* KeywordType */ 'kt': #f47067, /* Name */ 'n': $code-color-dark, - /* NameAttribute */ 'na': #008080, - /* NameBuiltin */ 'nb': #0086b3, - /* NameBuiltinPseudo */ 'bp': #999999, + /* NameAttribute */ 'na': #6cb6ff, + /* NameBuiltin */ 'nb': #dcbdfb, + /* NameBuiltinPseudo */ 'bp': $code-color-dark, /* NameClass */ 'nc': #dcbdfb, - /* NameConstant */ 'no': #008080, - /* NameDecorator */ 'nd': #3c5d5d, - /* NameEntity */ 'ni': #800080, - /* NameException */ 'ne': #dcbdfb, + /* NameConstant */ 'no': #6cb6ff, + /* NameDecorator */ 'nd': #dcbdfb, + /* NameEntity */ 'ni': #6cb6ff, + /* NameException */ 'ne': #6cb6ff, /* NameFunction */ 'nf': #dcbdfb, - /* NameFunctionMagic */ 'fm': $code-color-dark, - /* NameLabel */ 'nl': #dcbdfb, - /* NameNamespace */ 'nn': #dcbdfb, - /* NameOther */ 'nx': $code-color-dark, - /* NameProperty */ 'py': $code-color-dark, + /* NameFunctionMagic */ 'fm': #6cb6ff, + /* NameLabel */ 'nl': #6cb6ff, + /* NameNamespace */ 'nn': #f47067, + /* NameOther */ 'nx': #dcbdfb, + /* NameProperty */ 'py': #6cb6ff, /* NameTag */ 'nt': #8ddb8c, - /* NameVariable */ 'nv': #008080, - /* NameVariableClass */ 'vc': #008080, - /* NameVariableGlobal */ 'vg': #008080, - /* NameVariableInstance */ 'vi': #008080, - /* NameVariableMagic */ 'vm': $code-color-dark, - /* Literal */ 'l': $code-color-dark, - /* LiteralDate */ 'ld': $code-color-dark, + /* NameVariable */ 'nv': #f69d50, + /* NameVariableClass */ 'vc': #6cb6ff, + /* NameVariableGlobal */ 'vg': #6cb6ff, + /* NameVariableInstance */ 'vi': #6cb6ff, + /* NameVariableMagic */ 'vm': #6cb6ff, + /* Literal */ 'l': #6cb6ff, + /* LiteralDate */ 'ld': #96d0ff, /* LiteralString */ 's': #96d0ff, /* LiteralStringAffix */ 'sa': #96d0ff, /* LiteralStringBacktick */ 'sb': #96d0ff, @@ -310,13 +310,13 @@ $code-highlight-color-map-dark: ( /* LiteralStringRegex */ 'sr': #96d0ff, /* LiteralStringSingle */ 's1': #96d0ff, /* LiteralStringSymbol */ 'ss': #96d0ff, - /* LiteralNumber */ 'm': #009999, - /* LiteralNumberBin */ 'mb': #009999, - /* LiteralNumberFloat */ 'mf': #009999, - /* LiteralNumberHex */ 'mh': #009999, - /* LiteralNumberInteger */ 'mi': #009999, - /* LiteralNumberIntegerLong */ 'il': #009999, - /* LiteralNumberOct */ 'mo': #009999, + /* LiteralNumber */ 'm': #6cb6ff, + /* LiteralNumberBin */ 'mb': #6cb6ff, + /* LiteralNumberFloat */ 'mf': #6cb6ff, + /* LiteralNumberHex */ 'mh': #6cb6ff, + /* LiteralNumberInteger */ 'mi': #6cb6ff, + /* LiteralNumberIntegerLong */ 'il': #6cb6ff, + /* LiteralNumberOct */ 'mo': #6cb6ff, /* Operator */ 'o': #f47067, /* OperatorWord */ 'ow': #f47067, /* Punctuation */ 'p': $code-color-dark, @@ -324,22 +324,22 @@ $code-highlight-color-map-dark: ( /* CommentHashbang */ 'ch': #768390, /* CommentMultiline */ 'cm': #768390, /* CommentSingle */ 'c1': #768390, - /* CommentSpecial */ 'cs': #999999, - /* CommentPreproc */ 'cp': #999999, - /* CommentPreprocFile */ 'cpf': #999999, + /* CommentSpecial */ 'cs': #768390, + /* CommentPreproc */ 'cp': #6cb6ff, + /* CommentPreprocFile */ 'cpf': #768390, /* Generic */ 'g': $code-color-dark, /* GenericDeleted */ 'gd': #ffd8d3, /* GenericEmph */ 'ge': $code-color-dark, - /* GenericError */ 'gr': #aa0000, - /* GenericHeading */ 'gh': #999999, + /* GenericError */ 'gr': $code-error-color, + /* GenericHeading */ 'gh': $code-color-dark, /* GenericInserted */ 'gi': #b4f1b4, - /* GenericOutput */ 'go': #888888, - /* GenericPrompt */ 'gp': #adbac7, + /* GenericOutput */ 'go': $code-color-dark, + /* GenericPrompt */ 'gp': $code-color-dark, /* GenericStrong */ 'gs': $code-color-dark, - /* GenericSubheading */ 'gu': #aaaaaa, - /* GenericTraceback */ 'gt': #aa0000, + /* GenericSubheading */ 'gu': $code-color-dark, + /* GenericTraceback */ 'gt': $code-error-color, /* GenericUnderline */ 'gl': $code-color-dark, - /* TextWhitespace */ 'w': #bbbbbb, + /* TextWhitespace */ 'w': $code-color-dark, /* Other */ 'x': $code-color-dark, ) !default; // ========== Code ========== //