feat(theme): improve doc styles (#402)

pengzhanbo · Dec 28, 2024 · 0205ec8 · 0205ec8
1 parent b5c7b05
commit 0205ec8
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/theme/src/client/components/VPDoc.vue b/theme/src/client/components/VPDoc.vue
@@ -156,6 +156,20 @@ watch(
   padding: 32px 24px 96px;
 }
 
+.vp-doc-container.is-blog {
+  --vp-doc-blog-bg: rgba(190, 190, 190, 0.15);
+
+  background-image:
+    linear-gradient(90deg, var(--vp-doc-blog-bg) 3%, transparent 0),
+    linear-gradient(1turn, var(--vp-doc-blog-bg) 3%, transparent 0);
+  background-position: 50%;
+  background-size: 20px 20px;
+}
+
+[data-theme="dark"] .vp-doc-container.is-blog {
+  --vp-doc-blog-bg: rgba(60, 60, 60, 0.21);
+}
+
 .vp-doc-container.with-encrypt {
   padding: 32px 24px;
 }

diff --git a/theme/src/client/components/VPDocOutlineItem.vue b/theme/src/client/components/VPDocOutlineItem.vue
@@ -52,7 +52,7 @@ function handleClick({ target: el }: Event) {
 
 .outline-link:hover,
 .outline-link.active {
-  color: var(--vp-c-text-1);
+  color: var(--vp-c-brand-1);
 }
 
 .outline-link.nested {

diff --git a/theme/src/client/styles/content.css b/theme/src/client/styles/content.css
@@ -131,16 +131,29 @@
 }
 
 .vp-doc blockquote {
-  padding-left: 16px;
+  position: relative;
+  padding: 8px 20px 8px 36px;
   margin: 16px 0;
-  color: var(--vp-c-text-2);
-  border-left: 2px solid var(--vp-c-divider);
-  transition: border-color var(--vp-t-color), color var(--vp-t-color);
+  color: var(--vp-c-text-3);
+  background-color: var(--vp-c-default-soft);
+  border-radius: 8px;
+  transition: background-color var(--vp-t-color), color var(--vp-t-color);
+}
+
+.vp-doc blockquote::before {
+  position: absolute;
+  top: 0;
+  left: 4px;
+  font-size: 32px;
+  color: var(--vp-c-text-1);
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.691 6.292C5.094 4.771 7.217 4 10 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 6.925 10H10a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2H3a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789M20 20h-6a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789C16.094 4.771 18.217 4 21 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 17.925 10H21a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2'/%3E%3C/svg%3E");
+  opacity: 0.3;
 }
 
 .vp-doc blockquote > p {
   margin: 0;
   font-size: 16px;
+  color: inherit;
 }
 
 .vp-doc a {