🎨 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

@@ -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 */

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 ========== //