ui(markdown): optimize code block style

XPoet · Nov 20, 2023 · 255910f · 255910f
1 parent a03054b
commit 255910f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 17 deletions.
diff --git a/source/css/common/code-block/code-block.styl b/source/css/common/code-block/code-block.styl
@@ -112,7 +112,7 @@
       cursor pointer
 
       i {
-        font-size 0.8rem
+        font-size 0.9rem
         if (hexo-config('code_block') && hexo-config('code_block.highlight_theme') == 'default') {
           color var(--text-color-3)
         }
@@ -141,14 +141,6 @@ figure.highlight {
   box-sizing border-box
   overflow-y hidden
 
-  &::-webkit-scrollbar-thumb {
-    background transparent
-  }
-
-  &::-webkit-scrollbar-track {
-    background transparent
-  }
-
   transition-t("height", "0", "0.2", "linear")
 
   .shrink-line {

diff --git a/source/css/common/code-block/code-theme.styl b/source/css/common/code-block/code-theme.styl
@@ -1,9 +1,13 @@
 @import "../stylus-variables.styl"
 
-$code-foreground = lighten($text-color-3, 2%)
-$code-background = darken($background-color-1, 5%)
-$dark-code-foreground = lighten($dark-text-color-3, 2%)
-$dark-code-background = darken($dark-background-color-1, 10%)
+$code-foreground = lighten($text-color-3, 5%)
+$code-background = alpha($primary-color, 15%)
+$code-border-color = lighten($primary-color, 30%)
+
+$dark-code-foreground = lighten($dark-text-color-3, 10%)
+$dark-code-background = alpha($primary-color, 15%)
+$dark-code-border-color = darken($primary-color, 40%)
+
 $mac-toolbar-background-color = #21252b
 $dark-mac-toolbar-background-color = #1f2021
 
@@ -99,6 +103,7 @@ code-theme(mode) {
   --toolbar-background mode == 'light' ? $toolbar-background : $dark-toolbar-background
   --code-foreground mode == 'light' ? $code-foreground : $dark-code-foreground
   --code-background mode == 'light' ? $code-background : $dark-code-background
+  --code-border-color mode == 'light' ? $code-border-color : $dark-code-border-color
   --highlight-background mode == 'light' ? $highlight-background : $dark-highlight-background
   --highlight-foreground mode == 'light' ? $highlight-foreground : $dark-highlight-foreground
   --highlight-comment mode == 'light' ? $highlight-comment : $dark-highlight-comment

diff --git a/source/css/common/code-block/highlight.styl b/source/css/common/code-block/highlight.styl
@@ -19,12 +19,14 @@ code {
 
 
 code {
-  padding 0.4rem
+  box-sizing border-box
+  padding 0.3rem 0.4rem
   color var(--code-foreground)
-  font-size 0.96rem
+  font-size 0.88rem
   word-wrap break-word
   background var(--code-background)
-  border-radius 0.2rem
+  border 0.1rem solid var(--code-border-color)
+  border-radius 0.3rem
 }
 
 

diff --git a/source/css/common/markdown.styl b/source/css/common/markdown.styl
@@ -266,7 +266,6 @@
     box-sizing border-box
     max-width 100%
     margin var(--post-img-align)
-    margin-bottom 2rem
     box-shadow 0 0 0.2rem var(--shadow-color)
     cursor zoom-in
     opacity 1