From 75c59c588ccaa7eea5d38e99e335d1928c85277b Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Tue, 2 Jan 2024 00:31:25 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E5=AE=B9=E5=99=A8=E5=9C=A8=E7=A7=BB=E5=8A=A8=E7=AB=AF=E7=9A=84?=
 =?UTF-8?q?=E8=A1=A8=E7=8E=B0=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/styles/_variables.scss |  1 -
 theme/src/client/styles/code.scss       | 87 ++++++++++---------------
 theme/src/client/styles/content.scss    | 62 +++++++++---------
 theme/src/client/styles/index.scss      | 22 ++++---
 theme/src/client/styles/md-enhance.scss | 49 ++++++++------
 theme/src/client/styles/normalize.scss  |  3 +-
 theme/src/client/styles/nprogress.scss  | 10 +--
 theme/src/client/styles/vars.scss       | 54 ++++++++-------
 8 files changed, 146 insertions(+), 142 deletions(-)
 delete mode 100644 theme/src/client/styles/_variables.scss

diff --git a/theme/src/client/styles/_variables.scss b/theme/src/client/styles/_variables.scss
deleted file mode 100644
index 12f61127..00000000
--- a/theme/src/client/styles/_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '@vuepress/plugin-palette/palette';
diff --git a/theme/src/client/styles/code.scss b/theme/src/client/styles/code.scss
index ff6fe4b5..02fa7182 100644
--- a/theme/src/client/styles/code.scss
+++ b/theme/src/client/styles/code.scss
@@ -1,6 +1,3 @@
-// ===============================
-// Forked and modified from prismjs/themes/prism-tomorrow.css
-
 .dark .vp-code span {
   color: var(--shiki-dark, rgba(235, 235, 245, 0.6));
 }
@@ -11,13 +8,12 @@ html:not(.dark) .vp-code span {
 
 .plume-content {
   pre {
-    // line-height: 1.4;
     padding: 1.3rem 1.5rem;
     margin: 0 0 0.85rem 0;
     border-radius: 6px;
     overflow: auto;
     scrollbar-width: thin;
-    scrollbar-color: var(--c-brand) var(--c-border);
+    scrollbar-color: var(--vp-c-brand-1) var(--vp-c-border);
     font-size: 14px;
 
     code {
@@ -43,10 +39,6 @@ html:not(.dark) .vp-code span {
   }
 }
 
-.code-tabs-nav {
-  margin-bottom: 0rem;
-}
-
 div[class*='language-'] {
   position: relative;
   background-color: var(--vp-code-block-bg);
@@ -105,7 +97,6 @@ div[class*='language-'] {
         left: 0;
         top: 0;
         display: block;
-        // width: var(--code-ln-wrapper-width);
         height: 100%;
       }
     }
@@ -125,7 +116,7 @@ div[class*='language-'] {
       text-align: center;
       z-index: 1;
       color: var(--vp-code-line-number-color);
-      padding-top: 1.14rem;
+      padding-top: 1.25rem;
       line-height: var(--vp-code-line-height);
       counter-reset: line-number;
       border-right: var(--vp-code-block-divider-color) 1px solid;
@@ -153,14 +144,15 @@ div[class*='language-'] {
   padding: 0 24px;
   width: calc(100% + 2 * 24px);
   display: inline-block;
-}
+  z-index: 2;
 
-.plume-content [class*='language-'] code .highlighted.error {
-  background-color: var(--vp-code-line-error-color);
-}
+  &.error {
+    background-color: var(--vp-code-line-error-color);
+  }
 
-.plume-content [class*='language-'] code .highlighted.warning {
-  background-color: var(--vp-code-line-warning-color);
+  &.warning {
+    background-color: var(--vp-code-line-warning-color);
+  }
 }
 
 .plume-content [class*='language-'] code .diff {
@@ -169,22 +161,36 @@ div[class*='language-'] {
   padding: 0 24px;
   width: calc(100% + 2 * 24px);
   display: inline-block;
-}
 
-.plume-content [class*='language-'] code .diff::before {
-  position: absolute;
-  left: 10px;
+  &::before {
+    position: absolute;
+    left: 10px;
+  }
+
+  &.remove {
+    background-color: var(--vp-code-line-diff-remove-color);
+    opacity: 0.7;
+  }
+
+  &.remove::before {
+    content: '-';
+    color: var(--vp-code-line-diff-remove-symbol-color);
+    transform: translateX(-6px);
+  }
+
+  &.add {
+    background-color: var(--vp-code-line-diff-add-color);
+  }
+
+  &.add::before {
+    content: '+';
+    color: var(--vp-code-line-diff-add-symbol-color);
+    transform: translateX(-6px);
+  }
 }
 
 .plume-content [class*='language-'] .has-focused-lines .line:not(.has-focus) {
   filter: blur(0.095rem);
-  opacity: 0.4;
-  transition:
-    filter 0.35s,
-    opacity 0.35s;
-}
-
-.plume-content [class*='language-'] .has-focused-lines .line:not(.has-focus) {
   opacity: 0.7;
   transition:
     filter 0.35s,
@@ -199,25 +205,8 @@ div[class*='language-'] {
   opacity: 1;
 }
 
-.plume-content [class*='language-'] code .diff.remove {
-  background-color: var(--vp-code-line-diff-remove-color);
-  opacity: 0.7;
-}
-
-.plume-content [class*='language-'] code .diff.remove::before {
-  content: '-';
-  color: var(--vp-code-line-diff-remove-symbol-color);
-  transform: translateX(-6px);
-}
-
-.plume-content [class*='language-'] code .diff.add {
-  background-color: var(--vp-code-line-diff-add-color);
-}
-
-.plume-content [class*='language-'] code .diff.add::before {
-  content: '+';
-  color: var(--vp-code-line-diff-add-symbol-color);
-  transform: translateX(-6px);
+.code-tabs-nav {
+  margin-bottom: 0rem;
 }
 
 // narrow mobile
@@ -237,7 +226,3 @@ div[class*='language-'] {
     margin: 0 -1.5rem -0.85rem;
   }
 }
-
-.hint-container.info pre code {
-  background-color: transparent;
-}
diff --git a/theme/src/client/styles/content.scss b/theme/src/client/styles/content.scss
index bbc0dbec..8946d105 100644
--- a/theme/src/client/styles/content.scss
+++ b/theme/src/client/styles/content.scss
@@ -213,44 +213,44 @@
  * Custom Block
  * -------------------------------------------------------------------------- */
 
-.plume-content .custom-block {
-  margin: 16px 0;
-}
+// .plume-content .custom-block {
+//   margin: 16px 0;
+// }
 
-.plume-content .custom-block p {
-  margin: 8px 0;
-  line-height: 24px;
-}
+// .plume-content .custom-block p {
+//   margin: 8px 0;
+//   line-height: 24px;
+// }
 
-.plume-content .custom-block p:first-child {
-  margin: 0;
-}
+// .plume-content .custom-block p:first-child {
+//   margin: 0;
+// }
 
-.plume-content .custom-block a {
-  color: inherit;
-  font-weight: 600;
-  text-decoration: underline;
-  transition: opacity 0.25s;
-}
+// .plume-content .custom-block a {
+//   color: inherit;
+//   font-weight: 600;
+//   text-decoration: underline;
+//   transition: opacity 0.25s;
+// }
 
-.plume-content .custom-block a:hover {
-  opacity: 0.6;
-}
+// .plume-content .custom-block a:hover {
+//   opacity: 0.6;
+// }
 
-.plume-content .custom-block code {
-  font-size: var(--vp-custom-block-code-font-size);
-  font-weight: 700;
-  color: inherit;
-}
+// .plume-content .custom-block code {
+//   font-size: var(--vp-custom-block-code-font-size);
+//   font-weight: 700;
+//   color: inherit;
+// }
 
-.plume-content .custom-block div[class*='language-'] {
-  margin: 8px 0;
-}
+// .plume-content .custom-block div[class*='language-'] {
+//   margin: 8px 0;
+// }
 
-.plume-content .custom-block div[class*='language-'] code {
-  font-weight: 400;
-  background-color: transparent;
-}
+// .plume-content .custom-block div[class*='language-'] code {
+//   font-weight: 400;
+//   background-color: transparent;
+// }
 
 /**
  * Code
diff --git a/theme/src/client/styles/index.scss b/theme/src/client/styles/index.scss
index d2404d66..eedffd8c 100644
--- a/theme/src/client/styles/index.scss
+++ b/theme/src/client/styles/index.scss
@@ -1,11 +1,13 @@
-@use 'vars';
-@use 'fonts';
-@use 'normalize';
-@use 'nprogress';
-@use 'utils';
-@use 'content';
-@use 'code';
-@use 'md-enhance';
-@use 'search';
+@import '@vuepress/plugin-palette/palette';
 
-@use '@vuepress/plugin-palette/style';
+@import 'vars';
+@import 'fonts';
+@import 'normalize';
+@import 'nprogress';
+@import 'utils';
+@import 'content';
+@import 'code';
+@import 'md-enhance';
+@import 'search';
+
+@import '@vuepress/plugin-palette/style';
diff --git a/theme/src/client/styles/md-enhance.scss b/theme/src/client/styles/md-enhance.scss
index e0905344..53d8f906 100644
--- a/theme/src/client/styles/md-enhance.scss
+++ b/theme/src/client/styles/md-enhance.scss
@@ -11,6 +11,24 @@
       margin-top: 0;
     }
 
+    p + p {
+      margin: 8px 0;
+    }
+
+    code {
+      font-size: var(--vp-custom-block-code-font-size);
+      color: inherit;
+    }
+
+    div[class*='language-'] {
+      margin: 8px 0;
+    }
+
+    div[class*='language-'] code {
+      font-weight: 400;
+      background-color: transparent;
+    }
+
     &.note {
       border-radius: 0;
       color: var(--vp-c-text-3);
@@ -45,21 +63,12 @@
       summary + p {
         margin: 8px 0;
       }
-
-    }
-
-    p + p {
-      margin: 8px 0;
-    }
-
-    code {
-      font-size: var(--vp-custom-block-code-font-size);
     }
 
     &.note,
+    &.info,
     &.tip,
-    &.detail,
-    &.important {
+    &.detail {
       a,
       code {
         color: var(--vp-c-brand-1);
@@ -68,6 +77,15 @@
         color: var(--vp-c-brand-2);
       }
     }
+    &.important {
+      a,
+      code {
+        color: var(--vp-c-purple-1);
+      }
+      a:hover {
+        color: var(--vp-c-purple-2);
+      }
+    }
     &.warning {
       a,
       code {
@@ -87,16 +105,10 @@
       }
     }
 
-    [class*="language-"] code {
-      background-color: transparent;
-    }
-
-    [class*="language-"] .line-numbers {
+    [class*='language-'] .line-numbers {
       padding-top: 21px;
     }
 
-
-
     th,
     blockquote > p {
       font-size: var(--vp-custom-block-font-size);
@@ -205,7 +217,6 @@
         content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath fill="%23299764" d="M29.548 3.043a2.5 2.5 0 0 0-3.513.4L16 16.067l-3.508-4.414a2.5 2.5 0 0 0-3.915 3.112l5.465 6.875c.474.597 1.195.943 1.957.943s1.482-.35 1.957-.944L29.95 6.555c.86-1.08.68-2.654-.402-3.513zM24.5 24.5h-17v-17h12.756l2.385-3H6c-.83 0-1.5.67-1.5 1.5v20c0 .828.67 1.5 1.5 1.5h20a1.5 1.5 0 0 0 1.5-1.5V12.85l-3 3.774z"%2F%3E%3C%2Fsvg%3E');
         border: none;
         background-color: transparent;
-
       }
     }
   }
diff --git a/theme/src/client/styles/normalize.scss b/theme/src/client/styles/normalize.scss
index c74c801c..6acd1076 100644
--- a/theme/src/client/styles/normalize.scss
+++ b/theme/src/client/styles/normalize.scss
@@ -52,7 +52,8 @@ html,
 body {
   color: var(--vp-c-text-1);
   background-color: var(--vp-c-bg);
-  transition: var(--t-color);
+  transition-duration: 0.25s;
+  transition-timing-function: ease;
   transition-property: color, background-color;
 }
 
diff --git a/theme/src/client/styles/nprogress.scss b/theme/src/client/styles/nprogress.scss
index 2058f4bf..26016ede 100644
--- a/theme/src/client/styles/nprogress.scss
+++ b/theme/src/client/styles/nprogress.scss
@@ -1,14 +1,14 @@
 #nprogress .bar {
-  background: var(--vp-c-brand);
+  background: var(--vp-c-brand-1);
 }
 
 #nprogress .spinner-icon {
-  border-top-color: var(--vp-c-brand);
-  border-left-color: var(--vp-c-brand);
+  border-top-color: var(--vp-c-brand-1);
+  border-left-color: var(--vp-c-brand-1);
 }
 
 #nprogress .peg {
   box-shadow:
-    0 0 10px var(--vp-c-brand),
-    0 0 5px var(--vp-c-brand);
+    0 0 10px var(--vp-c-brand-1),
+    0 0 5px var(--vp-c-brand-1);
 }
diff --git a/theme/src/client/styles/vars.scss b/theme/src/client/styles/vars.scss
index eddcd9ac..82004a03 100644
--- a/theme/src/client/styles/vars.scss
+++ b/theme/src/client/styles/vars.scss
@@ -69,7 +69,10 @@
   --vp-c-red-3: #e0575b;
   --vp-c-red-soft: rgba(244, 63, 94, 0.14);
 
-  --vp-c-purple: #f4eefe;
+  --vp-c-purple-1: #734bb0;
+  --vp-c-purple-2: #9a72da;
+  --vp-c-purple-3: #d2c5e7;
+  --vp-c-purple-soft: rgba(109, 85, 148, 0.14);
 
   --vp-c-sponsor: #db2777;
 }
@@ -95,7 +98,10 @@
   --vp-c-yellow-3: #a46a0a;
   --vp-c-yellow-soft: rgba(234, 179, 8, 0.16);
 
-  --vp-c-purple: #423655;
+  --vp-c-purple-1: #9c74da;
+  --vp-c-purple-2: #a987df;
+  --vp-c-purple-3: #c3b4da;
+  --vp-c-purple-soft: rgba(109, 85, 148, 0.16);
 
   --vp-c-red-1: #f66f81;
   --vp-c-red-2: #f14158;
@@ -372,15 +378,15 @@ html[lang='zh-CN'] {
   --vp-button-alt-active-text: var(--vp-c-text-1);
   --vp-button-alt-active-bg: var(--vp-c-default-1);
 
-  --vp-button-sponsor-border: var(--vp-c-text-2);
-  --vp-button-sponsor-text: var(--vp-c-text-2);
-  --vp-button-sponsor-bg: transparent;
-  --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
-  --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
-  --vp-button-sponsor-hover-bg: transparent;
-  --vp-button-sponsor-active-border: var(--vp-c-sponsor);
-  --vp-button-sponsor-active-text: var(--vp-c-sponsor);
-  --vp-button-sponsor-active-bg: transparent;
+  // --vp-button-sponsor-border: var(--vp-c-text-2);
+  // --vp-button-sponsor-text: var(--vp-c-text-2);
+  // --vp-button-sponsor-bg: transparent;
+  // --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
+  // --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
+  // --vp-button-sponsor-hover-bg: transparent;
+  // --vp-button-sponsor-active-border: var(--vp-c-sponsor);
+  // --vp-button-sponsor-active-text: var(--vp-c-sponsor);
+  // --vp-button-sponsor-active-bg: transparent;
 }
 
 .dark {
@@ -449,7 +455,7 @@ html[lang='zh-CN'] {
   --vp-nav-height: 0px;
 }
 
-.hide-nav .VPSidebar {
+.hide-nav .sidebar {
   --vp-nav-height: 22px;
 }
 
@@ -541,15 +547,15 @@ html[lang='zh-CN'] {
   * Component: Local Search
   * -------------------------------------------------------------------------- */
 
-:root {
-  --vp-local-search-bg: var(--vp-c-bg);
-  --vp-local-search-result-bg: var(--vp-c-bg);
-  --vp-local-search-result-border: var(--vp-c-divider);
-  --vp-local-search-result-selected-bg: var(--vp-c-bg);
-  --vp-local-search-result-selected-border: var(--vp-c-brand-1);
-  --vp-local-search-highlight-bg: var(--vp-c-brand-1);
-  --vp-local-search-highlight-text: var(--vp-c-neutral-inverse);
-}
+// :root {
+//   --vp-local-search-bg: var(--vp-c-bg);
+//   --vp-local-search-result-bg: var(--vp-c-bg);
+//   --vp-local-search-result-border: var(--vp-c-divider);
+//   --vp-local-search-result-selected-bg: var(--vp-c-bg);
+//   --vp-local-search-result-selected-border: var(--vp-c-brand-1);
+//   --vp-local-search-highlight-bg: var(--vp-c-brand-1);
+//   --vp-local-search-highlight-text: var(--vp-c-neutral-inverse);
+// }
 
 /** Component: Search **/
 :root {
@@ -580,9 +586,9 @@ html[lang='zh-CN'] {
 html.dark {
   /* important */
   --important-title-color: var(--vp-c-text-1);
-  --important-bg-color: var(--vp-c-purple);
-  --important-border-color: var(--vp-c-purple);
-  --important-code-bg-color: rgb(163 113 247 / 10%);
+  --important-bg-color: var(--vp-c-purple-soft);
+  --important-border-color: transparent;
+  --important-code-bg-color: var(--vp-c-purple-soft);
 
   // info
   --info-title-color: var(--vp-c-text-1);