pjax

source/css/_highlight/diff.styl

@@ -1,73 +1,78 @@
 // For diff highlight
-pre .deletion
-  color: $highlight-deletion
+figure.highlight
+  table
+    &::-webkit-scrollbar-thumb
+      background: $highlight-scrollbar
+      
+  pre .deletion
+    color: $highlight-deletion
 
-pre .addition
-  color: $highlight-addition
+  pre .addition
+    color: $highlight-addition
 
-pre .meta
-  color: $highlight-purple
-
-pre
-  .comment
-    color: $highlight-comment
-
-  .variable,
-  .attribute,
-  .regexp,
-  .ruby .constant,
-  .xml .tag .title,
-  .xml .pi,
-  .xml .doctype,
-  .html .doctype,
-  .css .id,
-  .tag .name,
-  .css .class,
-  .css .pseudo
-    color: $highlight-red
-
-  .tag
-    color: $highlight-aqua
-
-  .number,
-  .preprocessor,
-  .literal,
-  .params,
-  .constant,
-  .command
-    color: $highlight-orange
-
-  .built_in
-    color: $highlight-yellow
-
-  .ruby .class .title,
-  .css .rules .attribute,
-  .string,
-  .value,
-  .inheritance,
-  .header,
-  .ruby .symbol,
-  .xml .cdata,
-  .special,
-  .number,
-  .formula
-    color: $highlight-green
-
-  .keyword,
-  .title,
-  .css .hexcolor
-    color: $highlight-aqua
-
-  .function,
-  .python .decorator,
-  .python .title,
-  .ruby .function .title,
-  .ruby .title .keyword,
-  .perl .sub,
-  .javascript .title,
-  .coffeescript .title
-    color: $highlight-blue
-
-  .tag .attr,
-  .javascript .function
+  pre .meta
     color: $highlight-purple
+
+  pre
+    .comment
+      color: $highlight-comment
+
+    .variable,
+    .attribute,
+    .regexp,
+    .ruby .constant,
+    .xml .tag .title,
+    .xml .pi,
+    .xml .doctype,
+    .html .doctype,
+    .css .id,
+    .tag .name,
+    .css .class,
+    .css .pseudo
+      color: $highlight-red
+
+    .tag
+      color: $highlight-aqua
+
+    .number,
+    .preprocessor,
+    .literal,
+    .params,
+    .constant,
+    .command
+      color: $highlight-orange
+
+    .built_in
+      color: $highlight-yellow
+
+    .ruby .class .title,
+    .css .rules .attribute,
+    .string,
+    .value,
+    .inheritance,
+    .header,
+    .ruby .symbol,
+    .xml .cdata,
+    .special,
+    .number,
+    .formula
+      color: $highlight-green
+
+    .keyword,
+    .title,
+    .css .hexcolor
+      color: $highlight-aqua
+
+    .function,
+    .python .decorator,
+    .python .title,
+    .ruby .function .title,
+    .ruby .title .keyword,
+    .perl .sub,
+    .javascript .title,
+    .coffeescript .title
+      color: $highlight-blue
+
+    .tag .attr,
+    .javascript .function
+      color: $highlight-purple

source/css/_highlight/highlight.styl

@@ -24,8 +24,8 @@ blockquote
   margin: 0 0 1rem
   padding: .1rem .8rem
   border-left: .2rem solid $blockquote-padding-color
-  background-color: $blockquote-background-color
-  color: $blockquote-color
+  background-color: var(--blockquote-bg)
+  color: var(--blockquote-color)
 
   a
     word-break: break-all
@@ -135,17 +135,16 @@ blockquote
       color: $highlight-tools.color
       font-size: 14px
 
-      .code-expand
+      .expand
         position: absolute
         padding: .4rem .7rem
         cursor: pointer
-        transition: all .3s
-        transform: rotate(0)
+        transition: transform .3s
 
         & + .code-lang
           left: 1.7rem
 
-        &.code-closed
+        &.closed
           transition: all .3s
           transform: rotate(-90deg) !important
 
@@ -182,7 +181,7 @@ blockquote
     td
       border: none
 
-  if $highlight_theme == 'mac' || $highlight_theme == 'mac light'
+  if $highlight_theme == 'mac' || ($highlight_theme == 'mac light')
     figure.highlight
       margin: 0 0 1.2rem
       border-radius: 7px
@@ -201,10 +200,10 @@ blockquote
           box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
           content: ' '
 
-        .code-expand
+        .expand
           right: 0
 
-          &.code-closed
+          &.closed
             transition: all .3s
             transform: rotate(90deg) !important
 

source/css/_highlight/theme.styl

@@ -23,6 +23,7 @@ if $highlight_theme == 'default'
     color: alpha($highlight-foreground, .8),
     bg-color: darken($highlight-background, 2)
   }
+  $highlight-scrollbar = darken($highlight-background, 6)
 
 if $highlight_theme == 'darker' || $highlight_theme == 'mac'
   $highlight-background = #212121
@@ -48,6 +49,7 @@ if $highlight_theme == 'darker' || $highlight_theme == 'mac'
     color: alpha($highlight-foreground, .8),
     bg-color: darken($highlight-background, 2)
   }
+  $highlight-scrollbar = darken($highlight-background, 6)
 
 if $highlight_theme == 'pale night'
   $highlight-background = #292D3E
@@ -72,6 +74,7 @@ if $highlight_theme == 'pale night'
     color: $highlight-foreground,
     bg-color: darken($highlight-background, 2)
   }
+  $highlight-scrollbar = darken($highlight-background, 6)
 
 if $highlight_theme == 'ocean'
   $highlight-background = #0F111A
@@ -96,6 +99,7 @@ if $highlight_theme == 'ocean'
     color: $highlight-foreground,
     bg-color: darken($highlight-background, 2)
   }
+  $highlight-scrollbar = darken($highlight-background, 5)
 
 if $highlight_theme == 'light' || $highlight_theme == 'mac light'
   $highlight-background = #F6F8FA
@@ -121,6 +125,8 @@ if $highlight_theme == 'light' || $highlight_theme == 'mac light'
     color: $highlight-foreground,
     bg-color: darken($highlight-background, 5)
   }
+  $highlight-scrollbar = darken($highlight-background, 8)
+
 
 if $highlight_theme == false
   $highlight-background = #F6F8FA