fix: waline style bug

package.json

@@ -45,17 +45,17 @@
     "vite": "^6.2.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.7.0",
+    "@antfu/eslint-config": "^4.8.1",
     "@types/markdown-it": "^14.1.2",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^22.13.9",
+    "@types/node": "^22.13.10",
     "@types/sanitize-html": "^2.13.0",
     "@unocss/eslint-plugin": "66.1.0-beta.3",
     "@unocss/preset-attributify": "66.1.0-beta.3",
     "@unocss/reset": "66.1.0-beta.3",
     "@waline/client": "^3.5.5",
     "astro-eslint-parser": "^1.2.1",
-    "eslint": "^9.21.0",
+    "eslint": "^9.22.0",
     "eslint-plugin-astro": "^1.3.1",
     "lint-staged": "^15.4.3",
     "mdast-util-to-string": "^4.0.0",

src/components/Comments/Waline.astro

@@ -54,8 +54,16 @@ document.addEventListener('astro:after-swap', initWaline)
 </script>
 
 <style is:global>
+#waline .wl-login-info {
+  --at-apply: 'mt-0 mr-3'
+}
+
+#waline .wl-login-nick:not(:has(img)) {
+  --at-apply: 'leading-3.6 mt-1.4';
+}
+
 #waline .wl-panel {
-  --at-apply: 'm-0 rounded-lg'
+  --at-apply: 'm-0 rounded-lg border-secondary/25'
 }
 
 #waline .wl-header {
@@ -110,12 +118,12 @@ document.addEventListener('astro:after-swap', initWaline)
   --at-apply: 'pt-3 pb-2';
 }
 
-#waline .wl-user {
+#waline .wl-card-item {
-  --at-apply: 'me-3.6';
+  --at-apply: 'px-0';
 }
 
-#waline .wl-nick {
+#waline .wl-user-avatar {
-  --at-apply: 'me-2.4';
+  --at-apply: 'mt-1';
 }
 
 #waline .wl-content p {
@@ -126,8 +134,17 @@ document.addEventListener('astro:after-swap', initWaline)
   color: color-mix(in oklch, var(--waline-theme-color), transparent 30%);
 }
 
+#waline .wl-edit,
+#waline .wl-delete {
+  --at-apply: 'mr-0.4';
+}
+
 #waline .wl-like {
-  --at-apply: 'mr-1.6';
+  --at-apply: 'mr-1.2';
+}
+
+#waline .wl-empty {
+  --at-apply: 'pt-3 pb-7';
 }
 </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-8'
+  ? 'mt-4'
   : '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-15">
+  <article class="heti mb-12">
     <h1 class="post-title">
       <span
         transition:name={`post-${post.data.slug || post.slug}`}