update: waline style

src/components/Comments/Waline.astro

@@ -102,16 +102,30 @@ document.addEventListener('astro:after-swap', initWaline)
 #waline .wl-text-number,
 #waline .wl-action[title="Markdown Guide"],
 #waline .wl-sort,
-#waline .wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar {
+#waline .wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar,
+#waline .wl-gallery::-webkit-scrollbar {
   --at-apply: 'hidden';
 }
 
 #waline .wl-emoji-popup {
-  --at-apply: 'start-0';
+  --at-apply: 'start-0 border-secondary/25';
 }
 
-#waline .wl-emoji-popup .wl-tab-wrapper {
-  --at-apply: 'scrollbar-hidden m-0';
+#waline .wl-emoji-popup .wl-tab-wrapper,
+#waline .wl-gallery {
+  --at-apply: 'scrollbar-hidden';
+}
+
+#waline .wl-gif-popup {
+  --at-apply: 'border-secondary/25';
+}
+
+#waline .wl-gif-popup input {
+  --at-apply: 'bg-background border-secondary/25';
+}
+
+#waline .wl-gif-popup input::placeholder {
+  --at-apply: 'c-secondary/30 text-3.5';
 }
 
 #waline .wl-meta-head {
@@ -131,7 +145,7 @@ document.addEventListener('astro:after-swap', initWaline)
 }
 
 #waline .wl-time {
-  color: color-mix(in oklch, var(--waline-theme-color), transparent 30%);
+  color: color-mix(in oklch, var(--waline-theme-color), transparent 20%);
 }
 
 #waline .wl-edit,
@@ -142,10 +156,6 @@ document.addEventListener('astro:after-swap', initWaline)
 #waline .wl-like {
   --at-apply: 'mr-1.2';
 }
-
-#waline .wl-empty {
-  --at-apply: 'pt-3 pb-7';
-}
 </style>
 
 <style
@@ -176,15 +186,10 @@ document.addEventListener('astro:after-swap', initWaline)
   --waline-border-color: color-mix(in oklch, var(--lightPrimary), transparent 75%);
   --waline-disable-bg-color: var(--lightBackground);
   --waline-disable-color: #bbb;
-  --waline-code-bg-color: #282c34;
 
   /* 特殊颜色 */
   --waline-bq-color: #f0f0f0;
 
-  /* 徽章 */
-  --waline-badge-color: #3498db;
-  --waline-badge-font-size: 0.775em;
-
   /* 信息 */
   --waline-info-bg-color: var(--lightBackground);
   --waline-info-color: color-mix(in oklch, var(--lightPrimary), transparent 75%);
@@ -214,18 +219,12 @@ html.dark #waline {
   --waline-border-color: color-mix(in oklch, var(--darkPrimary), transparent 75%);
   --waline-disable-bg-color: var(--darkBackground);
   --waline-disable-color: #bbb;
-  --waline-code-bg-color: #282c34;
 
   /* 特殊颜色 */
   --waline-bq-color: #f0f0f0;
 
-  /* 徽章 */
-  --waline-badge-color: #3498db;
-  --waline-badge-font-size: 0.775em;
-
   /* 信息 */
   --waline-info-bg-color: var(--darkBackground);
   --waline-info-color: color-mix(in oklch, var(--darkPrimary), transparent 75%);
-  --waline-info-font-size: 0.625em;
 }
 </style>

src/layouts/Layout.astro

@@ -26,7 +26,7 @@ const { isHome, isPost } = getPagePath(Astro.url.pathname)
 const fontStyle = themeConfig.global.fontStyle === 'serif' ? 'font-serif' : 'font-sans'
 
 const footerMarginClass = isPost && themeConfig.comment?.waline?.serverURL
-  ? 'mt-4'
+  ? 'mt-8'
   : 'mt-12'
 ---
 

src/pages/posts/[slug].astro

@@ -25,7 +25,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()
   postDescription={post.data.description}
   postImage={post.data.image}
 >
-  <article class="heti mb-12">
+  <article class="heti mb-16">
     <h1 class="post-title">
       <span
         transition:name={`post-${post.data.slug || post.slug}`}