perf: update content style

theme/src/client/styles/code.scss

@@ -10,16 +10,14 @@ html:not(.dark) .vp-code span {
   pre {
     padding: 1.3rem 1.5rem;
     margin: 0 0 0.85rem;
-    overflow: auto;
+    overflow-x: auto;
-    font-size: 14px;
-    border-radius: 6px;
 
-    scrollbar-color: var(--vp-c-brand-1) var(--vp-c-border);
     scrollbar-width: thin;
 
     code {
       padding: 0;
-      color: #fff;
+      font-size: var(--vp-code-font-size);
+      color: var(--vp-code-block-color);
       overflow-wrap: unset;
       background-color: transparent;
       border-radius: 0;
@@ -27,6 +25,12 @@ html:not(.dark) .vp-code span {
       -webkit-font-smoothing: auto;
       -moz-osx-font-smoothing: auto;
     }
+
+    @media (min-width: 640px) {
+      & {
+        border-radius: 6px;
+      }
+    }
   }
 
   .line-number {
@@ -41,14 +45,20 @@ html:not(.dark) .vp-code span {
   }
 }
 
+@media (max-width: 639px) {
+  .plume-content li pre {
+    border-radius: 8px 0 0 8px;
+  }
+}
+
 div[class*="language-"] {
   position: relative;
+  margin: 0.85rem -1.5rem;
   background-color: var(--vp-code-block-bg);
-  border-radius: 6px;
 
   &::before {
     position: absolute;
-    top: 0.8em;
+    top: 5px;
     right: 1em;
     z-index: 3;
     font-size: 0.75rem;
@@ -58,6 +68,7 @@ div[class*="language-"] {
 
   code {
     display: inline-block;
+    width: fit-content;
     min-width: 100%;
   }
 
@@ -69,6 +80,27 @@ div[class*="language-"] {
     background: transparent !important;
   }
 
+  pre,
+  code {
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+
+    /* rtl:ignore */
+    text-align: left;
+    word-break: normal;
+    word-wrap: normal;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    white-space: pre;
+    word-spacing: normal;
+
+    /* rtl:ignore */
+    direction: ltr;
+  }
+
   .highlight-lines {
     position: absolute;
     top: 0;
@@ -117,8 +149,8 @@ div[class*="language-"] {
       z-index: 1;
       width: 2rem;
       height: 100%;
-      padding-top: 1.25rem;
+      padding-top: 1.3rem;
-      line-height: var(--vp-code-line-height);
+      line-height: 1.4rem;
       color: var(--vp-code-line-number-color);
       text-align: center;
       counter-reset: line-number;
@@ -138,6 +170,19 @@ div[class*="language-"] {
       }
     }
   }
+
+  @media (min-width: 640px) {
+    & {
+      margin: 0;
+      border-radius: 6px;
+    }
+  }
+
+  @media (max-width: 639px) {
+    .plume-content li & {
+      border-radius: 8px 0 0 8px;
+    }
+  }
 }
 
 .plume-content [class*="language-"] code .highlighted {
@@ -206,11 +251,11 @@ div[class*="language-"] {
 }
 
 // narrow mobile
-@media (max-width: 419px) {
+// @media (max-width: 419px) {
-  .plume-content {
+//   .plume-content {
-    div[class*="language-"] {
+//     div[class*="language-"] {
-      margin: 0.85rem -1.5rem;
+//       margin: 0.85rem -1.5rem;
-      border-radius: 0;
+//       border-radius: 0;
-    }
+//     }
-  }
+//   }
-}
+// }

theme/src/client/styles/content.scss

@@ -10,6 +10,7 @@
 .plume-content h6 {
   position: relative;
   font-weight: 600;
+  overflow-wrap: break-word;
   outline: none;
 }
 
@@ -40,30 +41,29 @@
 }
 
 .plume-content .header-anchor {
-  float: left;
+  position: relative;
-  padding-right: 0.23em;
+  color: inherit;
-  margin-left: -0.87em;
+  text-decoration: none;
-  font-weight: 500;
-  user-select: none;
-  opacity: 0;
-  transition:
-    color 0.25s,
-    opacity 0.25s;
-}
 
-.plume-content h1:hover .header-anchor,
+  &:hover::before {
-.plume-content h1 .header-anchor:focus,
+    position: absolute;
-.plume-content h2:hover .header-anchor,
+    left: -0.75em;
-.plume-content h2 .header-anchor:focus,
+    font-size: 0.8em;
-.plume-content h3:hover .header-anchor,
+    color: var(--vp-c-brand-1);
-.plume-content h3 .header-anchor:focus,
+    content: var(--vp-header-anchor-symbol);
-.plume-content h4:hover .header-anchor,
+  }
-.plume-content h4 .header-anchor:focus,
+
-.plume-content h5:hover .header-anchor,
+  &:focus-visible {
-.plume-content h5 .header-anchor:focus,
+    outline: none;
-.plume-content h6:hover .header-anchor,
+
-.plume-content h6 .header-anchor:focus {
+    &::before {
-  opacity: 1;
+      position: absolute;
+      left: -0.75em;
+      color: var(--vp-c-brand-1);
+      content: var(--vp-header-anchor-symbol);
+      outline: auto;
+    }
+  }
 }
 
 @media (min-width: 768px) {
@@ -122,9 +122,18 @@
     color 0.25s,
     opacity 0.25s,
     text-underline-offset 0.25s;
+
+  @media print {
+    &[href^="http://"],
+    &[href^="https://"] {
+      &::after {
+        content: " (" attr(href) ") ";
+      }
+    }
+  }
 }
 
-.plume-content a:hover {
+.plume-content :not(h1,h2,h3,h4,h5,h6) a:hover {
   color: var(--vp-c-brand-2);
   text-underline-offset: 5px;
 }

theme/src/client/styles/md-enhance.scss

@@ -39,6 +39,10 @@
       background-color: transparent;
     }
 
+    div[class*="language-"].line-numbers-mode .line-numbers {
+      line-height: 1.5rem;
+    }
+
     @media (max-width: 419px) {
       div[class*="language-"] {
         margin: 0.85rem -0.75rem 0.85rem -1rem;

theme/src/client/styles/vars.scss

@@ -68,10 +68,10 @@
   --vp-c-red-3: #e0575b;
   --vp-c-red-soft: rgba(244, 63, 94, 0.14);
 
-  --vp-c-purple-1: #734bb0;
+  --vp-c-purple-1: #6f42c1;
-  --vp-c-purple-2: #9a72da;
+  --vp-c-purple-2: #7e4cc9;
-  --vp-c-purple-3: #d2c5e7;
+  --vp-c-purple-3: #8e5cd9;
-  --vp-c-purple-soft: rgba(109, 85, 148, 0.14);
+  --vp-c-purple-soft: rgba(159, 122, 234, 0.14);
 
   --vp-c-sponsor: #db2777;
 }
@@ -97,15 +97,15 @@
   --vp-c-yellow-3: #a46a0a;
   --vp-c-yellow-soft: rgba(234, 179, 8, 0.16);
 
-  --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;
   --vp-c-red-3: #b62a3c;
   --vp-c-red-soft: rgba(244, 63, 94, 0.16);
+
+  --vp-c-purple-1: #c8abfa;
+  --vp-c-purple-2: #a879e6;
+  --vp-c-purple-3: #8e5cd9;
+  --vp-c-purple-soft: rgba(159, 122, 234, 0.16);
 }
 
 /**
@@ -273,6 +273,7 @@
     "Liberation Mono",
     "Courier New",
     monospace;
+  --vp-header-anchor-symbol: "#";
 }
 
 /**
@@ -459,7 +460,7 @@ html[lang="zh-CN"] {
   --vp-input-border-color: var(--vp-c-border);
   --vp-input-bg-color: var(--vp-c-bg-alt);
 
-  --vp-input-switch-bg-color: var(--vp-c-gray-soft);
+  --vp-input-switch-bg-color: var(--vp-c-default-soft);
 }
 
 /**
@@ -595,7 +596,7 @@ html[lang="zh-CN"] {
 /* md enhance code-tabs */
 :root {
   --code-tabs-nav-text-color: var(--vp-c-text-1);
-  --code-tabs-nav-bg-color: #e6e6e7;
+  --code-tabs-nav-bg-color: var(--vp-c-default-3);
   --code-tabs-nav-hover-color: var(--vp-code-block-bg);
 }
 
@@ -658,7 +659,7 @@ html.dark {
 :root {
   --tab-bg-color: var(--vp-c-bg);
   --tab-nav-bg-color: var(--vp-c-bg-soft);
-  --tab-nav-hover-color: var(--vp-c-bg);
+  --tab-nav-hover-color: var(--tab-bg-color);
   --tab-nav-text-color: var(--vp-c-text-1);
 }