From abb548fcee432b5c0e0f5bf7a94ace8abca325d1 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 22 Sep 2021 21:27:15 +0800
Subject: [PATCH] Change the icon & color of the code block header

---
 _includes/refactor-content.html |  4 ++--
 _sass/addon/syntax.scss         | 25 ++++++++++++++++---------
 _sass/colors/dark-syntax.scss   |  3 ++-
 _sass/colors/light-syntax.scss  |  3 ++-
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index c97f746..95c6d7b 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -119,7 +119,7 @@
 
       {% if _left contains 'file="' %}
         {% assign _text = _left | split: 'file="' | last | split: '"' | first %}
-        {% assign _label_icon = 'far fa-file' %}
+        {% assign _label_icon = 'far fa-file-code' %}
       {% else %}
         {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
         {% capture _text %}{% include language-alias.html language=_lang %}{% endcapture %}
@@ -135,7 +135,7 @@
           | append: _label
           | append: '<button aria-label="copy" data-original-title="'
           | append: site.data.locales[lang].post.button.copy_code.succeed
-          | append: '"><i class="far fa-clone"></i></button></div>'
+          | append: '"><i class="far fa-clipboard"></i></button></div>'
           | append: '<div class="highlight"><code>'
       %}
 
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index 1abcb12..8dea9e2 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -172,17 +172,27 @@ div {
   align-items: center;
   line-height: 1.85rem;
 
+  // icons
+  i {
+    font-size: 1rem;
+    color: var(--lang-badge-muted-color);
+
+    &.small {
+      font-size: 70%;
+      margin-left: 0.25rem;
+    }
+  }
+
   // the label block
   span {
-    color: var(--lang-badge-color);
     padding-left: 0.6rem;
-    font-size: 0.85rem;
 
     &:after {
       content: attr(text-data);
       margin-left: 0.3rem;
+      font-size: 0.85rem;
       font-weight: 600;
-
+      color: var(--lang-badge-color);
     }
 
     @at-root [file] #{&} > i { // center the file icon
@@ -200,13 +210,14 @@ div {
     padding: 0;
     width: 1.95rem;
     background-color: inherit;
-    color: var(--highlight-lineno-color);
 
     @extend %cursor-pointer;
 
     &[timeout] {
-      color: var(--clipboard-checked-color);
       border-color: var(--clipboard-checked-color);
+      i {
+        color: var(--clipboard-checked-color);
+      }
     }
 
     &:not([timeout]):hover {
@@ -220,10 +231,6 @@ div {
       outline: none;
     }
 
-    i {
-      font-size: 0.9rem;
-    }
-
   }
 
 }
diff --git a/_sass/colors/dark-syntax.scss b/_sass/colors/dark-syntax.scss
index 4f5fe84..6559f6b 100644
--- a/_sass/colors/dark-syntax.scss
+++ b/_sass/colors/dark-syntax.scss
@@ -75,7 +75,8 @@
   --highlight-lineno-color: #6c6c6d;
   --inline-code-bg: #272822;
   --code-header-bg: #353535;
-  --lang-badge-color: #6c6c6d;
+  --lang-badge-color: #858586;
+  --lang-badge-muted-color: #6c6c6d;
   --clipboard-checked-color: #2bcc2b;
 
   .highlight {
diff --git a/_sass/colors/light-syntax.scss b/_sass/colors/light-syntax.scss
index 314fe2e..0b2b721 100644
--- a/_sass/colors/light-syntax.scss
+++ b/_sass/colors/light-syntax.scss
@@ -72,7 +72,8 @@
   --highlight-lineno-color: #c2c6cc;
   --inline-code-bg: #f3f3f3;
   --code-header-bg: #eaeaea;
-  --lang-badge-color: #a4a7ab;
+  --lang-badge-color: rgb(128 128 128 / 87%);
+  --lang-badge-muted-color: rgb(128 128 128 / 36%);
   --clipboard-checked-color: #43c743;
 
 } // light-syntax