perf(theme): improve some styles

plugins/plugin-md-power/src/client/styles/chat.css

@@ -86,6 +86,7 @@
 
 .vp-chat .vp-chat-message-body {
   flex-shrink: 2;
+  min-width: 0;
   padding-right: 32px;
 }
 

plugins/plugin-md-power/src/client/styles/steps.css

@@ -10,8 +10,8 @@
 .vp-doc .vp-steps > :where(ol,ul) > li {
   position: relative;
   min-height: 28px;
-  padding-bottom: 1px;
   padding-left: 44px;
+  margin-bottom: 16px;
   line-height: 28px;
 }
 
@@ -38,7 +38,7 @@
   position: absolute;
   inset-inline-start: 14px;
   top: 34px;
-  bottom: 5px;
+  bottom: -10px;
   width: 1px;
   content: "";
   background-color: var(--vp-c-divider);

theme/src/client/styles/code.css

@@ -355,3 +355,9 @@ html:not([data-theme="dark"]) .vp-code span {
   height: 18px;
   margin-left: 0;
 }
+
+@media (max-width: 419px) {
+  .code-block-title-bar {
+    margin-inline: -24px;
+  }
+}

theme/src/client/styles/content.css

@@ -35,6 +35,8 @@
 }
 
 .vp-doc h2:first-of-type {
+  padding-top: 12px;
+  margin-top: 32px;
   border-top: none;
 }
 
@@ -108,10 +110,6 @@
   display: inline-block;
 }
 
-.vp-doc img + img {
-  margin-left: 0.5rem;
-}
-
 .vp-doc a img + span {
   margin-left: 0.2rem;
 }
@@ -326,3 +324,7 @@
 .vp-doc :not(a) > img {
   cursor: zoom-in;
 }
+
+.vp-doc img + img:not(.light, .dark, .github-light, .github-dark) {
+  margin-left: 0.5rem;
+}

theme/src/client/styles/utils.css

@@ -49,6 +49,15 @@
   transform: translateX(-10px) !important;
 }
 
+/* ----------------- Image Display Light / Dark Mode ------------------ */
+[data-theme="dark"] .vp-doc img:where(.github-light, .light) {
+  display: none;
+}
+
+[data-theme="light"] .vp-doc img:where(.github-dark, .dark) {
+  display: none;
+}
+
 /* ----------------- Read More Link ------------------ */
 .vp-doc a.read-more,
 .vp-doc a.readmore {