From 2d7a5bc13cfc4e4f572a4227de8df7b9f5ad0c27 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Wed, 18 Nov 2020 11:56:47 +0800
Subject: [PATCH] style: optimize global style

---
 source/css/layout/_partial/archive-list.styl  |  2 +-
 .../css/layout/_partial/comment/gitalk.styl   |  2 +-
 .../css/layout/_partial/comment/valine.styl   | 16 ++++++-------
 source/css/layout/_partial/header.styl        | 12 +++++-----
 source/css/layout/_partial/local-search.styl  |  4 ++--
 source/css/layout/common/basic.styl           |  4 ++--
 .../layout/common/codeblock/code-theme.styl   | 14 +++++------
 .../layout/common/codeblock/copy-code.styl    | 23 ++++++-------------
 source/css/layout/common/variables.styl       |  2 +-
 9 files changed, 35 insertions(+), 44 deletions(-)

diff --git a/source/css/layout/_partial/archive-list.styl b/source/css/layout/_partial/archive-list.styl
index 136fa09..0f91085 100644
--- a/source/css/layout/_partial/archive-list.styl
+++ b/source/css/layout/_partial/archive-list.styl
@@ -67,7 +67,7 @@ $article-date-font-size = 1em;
         }
 
         a.article-title {
-          color: var(--normal-text-color);
+          color: var(--default-text-color);
 
           &:hover {
             color: var(--primary-color);
diff --git a/source/css/layout/_partial/comment/gitalk.styl b/source/css/layout/_partial/comment/gitalk.styl
index df2bff5..4a329f5 100644
--- a/source/css/layout/_partial/comment/gitalk.styl
+++ b/source/css/layout/_partial/comment/gitalk.styl
@@ -298,7 +298,7 @@ $gt-size-avatar-mobi := em(32px)
       font-size: em(14px)
       word-wrap: break-word
       resize: vertical
-      color: var(--normal-text-color)
+      color: var(--default-text-color)
       background-color: var(--fourth-text-color)
       outline: none
       transition: all 0.25s ease
diff --git a/source/css/layout/_partial/comment/valine.styl b/source/css/layout/_partial/comment/valine.styl
index d649dd7..e2d0dca 100644
--- a/source/css/layout/_partial/comment/valine.styl
+++ b/source/css/layout/_partial/comment/valine.styl
@@ -13,7 +13,7 @@
 
         .vinput {
 
-          color: var(--normal-text-color);
+          color: var(--default-text-color);
           border-color: var(--third-text-color);
 
           &:focus {
@@ -26,14 +26,14 @@
       .vedit {
 
         .veditor {
-          color: var(--normal-text-color);
+          color: var(--default-text-color);
         }
 
         .vctrl {
 
           .vicon {
 
-            fill: var(--normal-text-color);
+            fill: var(--default-text-color);
 
             &.actived {
               fill: var(--primary-color);
@@ -46,8 +46,8 @@
       button.vsubmit {
 
         background: transparent !important;
-        color: var(--normal-text-color) !important;
-        border: 1px solid var(--normal-text-color) !important;
+        color: var(--default-text-color) !important;
+        border: 1px solid var(--default-text-color) !important;
 
         &:hover {
           color: var(--primary-color) !important;
@@ -60,7 +60,7 @@
 
 
     .vcount {
-      color: var(--normal-text-color);
+      color: var(--default-text-color);
 
       .vnum {
         color: var(--second-text-color);
@@ -96,7 +96,7 @@
         }
 
         .vsys {
-          color: var(--normal-text-color);
+          color: var(--default-text-color);
           background: var(--fourth-text-color) !important;
         }
       }
@@ -104,7 +104,7 @@
 
       .vcontent {
         P {
-          color: var(--normal-text-color);
+          color: var(--default-text-color);
         }
       }
 
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index 09a8355..825ad60 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -77,7 +77,7 @@ $header-progress-height = 2.8px;
 
           &:hover {
 
-            color: var(--normal-text-color);
+            color: var(--default-text-color);
 
             &::after {
               content: '';
@@ -132,7 +132,7 @@ $header-progress-height = 2.8px;
         height: 2px;
         margin: 6px 0;
         position: relative;
-        background: var(--normal-text-color);
+        background: var(--default-text-color);
         transition();
 
         &::before {
@@ -142,7 +142,7 @@ $header-progress-height = 2.8px;
           left: 0;
           width: 100%;
           height: 2px;
-          background: var(--normal-text-color);
+          background: var(--default-text-color);
           transition();
         }
 
@@ -153,7 +153,7 @@ $header-progress-height = 2.8px;
           left: 0;
           width: 100%;
           height: 2px;
-          background: var(--normal-text-color);
+          background: var(--default-text-color);
           transition();
         }
       }
@@ -188,7 +188,7 @@ $header-progress-height = 2.8px;
           border-radius: 20px;
           text-align: center;
           line-height: 34px;
-          color: var(--normal-text-color);
+          color: var(--default-text-color);
           transition();
 
           &:hover {
@@ -198,7 +198,7 @@ $header-progress-height = 2.8px;
         }
 
         .active {
-          border: 1px solid var(--normal-text-color);
+          border: 1px solid var(--default-text-color);
           color: var(--second-text-color);
           font-weight: bold;
         }
diff --git a/source/css/layout/_partial/local-search.styl b/source/css/layout/_partial/local-search.styl
index 78de554..ce4d13b 100644
--- a/source/css/layout/_partial/local-search.styl
+++ b/source/css/layout/_partial/local-search.styl
@@ -35,7 +35,7 @@ $icon-size = 1.2em;
   z-index: $z-index-6;
 
   .search-icon, .popup-btn-close {
-    color: var(--normal-text-color);
+    color: var(--default-text-color);
     font-size: $icon-size;
     padding: 0 10px;
     display: flex;
@@ -66,7 +66,7 @@ input.search-input {
   outline: 0;
   width: 100%;
   font-size: 1.2em;
-  color: var(--normal-text-color);
+  color: var(--default-text-color);
 
   &::-webkit-search-cancel-button {
     display: none;
diff --git a/source/css/layout/common/basic.styl b/source/css/layout/common/basic.styl
index 90eaf82..79ff227 100644
--- a/source/css/layout/common/basic.styl
+++ b/source/css/layout/common/basic.styl
@@ -28,7 +28,7 @@
 html, body {
   margin: 0;
   padding: 0;
-  color: var(--normal-text-color);
+  color: var(--default-text-color);
   background: var(--background-color);
   font-family: $default-font-family;
   font-weight: $default-font-weight;
@@ -72,7 +72,7 @@ ul, ol, li {
 // ============================
 a {
   text-decoration: none;
-  color: var(--normal-text-color);
+  color: var(--default-text-color);
 
   &:hover, &:active {
     color: var(--primary-color);
diff --git a/source/css/layout/common/codeblock/code-theme.styl b/source/css/layout/common/codeblock/code-theme.styl
index b434e77..2352a1e 100644
--- a/source/css/layout/common/codeblock/code-theme.styl
+++ b/source/css/layout/common/codeblock/code-theme.styl
@@ -1,10 +1,10 @@
 @require '../variables.styl'
 
-$code-foreground = lighten($normal-text-color, 2%)
+$code-foreground = lighten($default-text-color, 2%)
 $code-background = darken($background-color, 5%)
-$highlight-foreground = lighten($normal-text-color, 2%)
+$highlight-foreground = lighten($default-text-color, 2%)
 $highlight-background = darken($background-color, 2%)
-$highlight-gutter-color = lighten($normal-text-color, 5%)
+$highlight-gutter-color = lighten($default-text-color, 5%)
 $highlight-gutter-bg-color = darken($background-color, 5%)
 $highlight-comment = #8e908c
 $highlight-red = #c82829
@@ -17,11 +17,11 @@ $highlight-purple = #8959a8
 $highlight-deletion = #fdd
 $highlight-addition = #dfd
 
-$night-code-foreground = lighten($dark-normal-text-color, 2%)
+$night-code-foreground = lighten($dark-default-text-color, 2%)
 $night-code-background = darken($dark-background-color, 10%)
-$night-highlight-foreground = lighten($dark-normal-text-color, 2%)
+$night-highlight-foreground = lighten($dark-default-text-color, 2%)
 $night-highlight-background = darken($dark-background-color, 8%)
-$night-highlight-gutter-color = lighten($dark-normal-text-color, 5%)
+$night-highlight-gutter-color = lighten($dark-default-text-color, 5%)
 $night-highlight-gutter-bg-color = darken($dark-background-color, 10%)
 $night-highlight-comment = #969896
 $night-highlight-red = #cc6666
@@ -67,4 +67,4 @@ $night-highlight-addition = #800000
   --highlight-purple: $night-highlight-purple;
   --highlight-gutter-color: $night-highlight-gutter-color;
   --highlight-gutter-bg-color: $night-highlight-gutter-bg-color;
-}
\ No newline at end of file
+}
diff --git a/source/css/layout/common/codeblock/copy-code.styl b/source/css/layout/common/codeblock/copy-code.styl
index 01a0a60..91c7b4c 100644
--- a/source/css/layout/common/codeblock/copy-code.styl
+++ b/source/css/layout/common/codeblock/copy-code.styl
@@ -14,7 +14,7 @@ disable-user-select() {
 }
 
 .copy-btn {
-  color: #333;
+  color: var(--default-text-color);
   cursor: pointer;
   display: inline-block;
   font-weight: bold;
@@ -25,28 +25,19 @@ disable-user-select() {
   position: absolute;
   vertical-align: middle;
   white-space: nowrap;
+  font-size: 1.1em;
   disable-user-select();
   the-transition();
 
-  if (hexo-config('code_copy.style') == 'flat') {
-    background: white;
-    border: 0;
-    font-size: 0.8em;
-    right: 0;
-    top: 0;
-  } else if (hexo-config('code_copy.style') == 'mac') {
+  if (hexo-config('code_copy.style') == 'mac') {
     color: white;
-    font-size: 1em;
     right: 2px;
     top: 2px;
   } else {
-    background-color: #eee;
-    background-image: linear-gradient(#fcfcfc, #eee);
-    border: 1px solid #d5d5d5;
-    border-radius: 3px;
-    font-size: 0.8em;
-    right: 6px;
-    top: 6px;
+    background: var(--background-color);
+    border: 0;
+    right: 0;
+    top: 0;
   }
 }
 
diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl
index e73d905..7cb326e 100644
--- a/source/css/layout/common/variables.styl
+++ b/source/css/layout/common/variables.styl
@@ -103,7 +103,7 @@ root-color(mode) {
   --second-text-color: mode == 'light' ? $second-text-color : $dark-second-text-color;
   --third-text-color: mode == 'light' ? $third-text-color : $dark-third-text-color;
   --fourth-text-color: mode == 'light' ? $fourth-text-color : $dark-fourth-text-color;
-  --normal-text-color: mode == 'light' ? $default-text-color : $dark-default-text-color;
+  --default-text-color: mode == 'light' ? $default-text-color : $dark-default-text-color;
   --border-color: mode == 'light' ? $border-color : $dark-border-color;
   --selection-color: mode == 'light' ? $selection-color : $dark-selection-color;
   --shadow-color: mode == 'light' ? $shadow-color : $dark-shadow-color;