refactor: replace _post-tabs.scss with UnoCSS

1 files changed, 57 insertions, 22 deletions

diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html
index df2a3c2a..625f33e2 100644
--- a/layouts/_partials/posts/action-menu.html
+++ b/layouts/_partials/posts/action-menu.html
@@ -1,41 +1,66 @@
-<div class="post-actions-container">
+<div class="my-8 mb-4">
   <!-- 操作按钮组 -->
-  <div class="post-actions-nav">
-    <div class="left-actions">
-      <button class="action-btn" id="comments-toggle" title="评论">
-        <img src="/img/comments.svg" width="20" height="20" alt="评论" class="icon" />
-        <span class="count-badge" id="comment-count">...</span>
+  <div class="flex justify-between items-center mb-6">
+    <div class="flex gap-2">
+      <button class="invert-if-dark flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group" id="comments-toggle" title="评论">
+        <img src="/img/comments.svg" width="20" height="20" alt="评论" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
+        <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" id="comment-count">...</span>
+        <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">评论</div>
       </button>
 
       <!-- 点赞按钮 -->
-      <div class="like-button-container" id="like-container-{{ .File.UniqueID | urlize }}">
-        <button class="action-btn like-btn"
+      <div class="relative" id="like-container-{{ .File.UniqueID | urlize }}">
+        <button class="invert-if-dark flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group"
                 onclick="sendLike('{{ .File.UniqueID | urlize }}')"
                 id="like-btn-{{ .File.UniqueID | urlize }}"
                 title="为这篇文章献上心脏"
                 data-liked-title="你已经献上心脏了">
-          <img src="/img/heart-organ.svg" width="20" height="20" alt="点赞" class="like-icon" />
-          <span class="count-badge" id="like-count-{{ .File.UniqueID | urlize }}">...</span>
+          <img src="/img/heart-organ.svg" width="20" height="20" alt="点赞" class="brightness-40 flex-shrink-0 transition-all duration-300 dark:brightness-70 dark:contrast-120" id="like-icon-{{ .File.UniqueID | urlize }}" />
+          <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" id="like-count-{{ .File.UniqueID | urlize }}">...</span>
+          <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">为这篇文章献上心脏</div>
         </button>
       </div>
     </div>
 
-    <div class="right-actions">
-      <a href="https://t.me/teaparty418" target="_blank" class="action-btn small-btn" title="Telegram 群组" data-umami-event="✈️ Click Telegram link from post tabs">
-        <img src="/img/paper-plane.svg" width="16" height="16" alt="Telegram" class="icon" />
+    <div class="flex gap-1">
+      <a href="https://t.me/teaparty418" target="_blank" class="invert-if-dark flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="Telegram 群组" data-umami-event="✈️ Click Telegram link from post tabs">
+        <img src="/img/paper-plane.svg" width="16" height="16" alt="Telegram" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
+        <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">Telegram 群组</div>
       </a>
-      <a href="/sponsor" class="action-btn small-btn" title="赞助作者" data-umami-event="💗 Click sponsor button from post tabs">
-        <img src="/img/coffee.svg" width="16" height="16" alt="赞助" class="icon" />
+      <a href="/sponsor" class="invert-if-dark flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="赞助作者" data-umami-event="💗 Click sponsor button from post tabs">
+        <img src="/img/coffee.svg" width="16" height="16" alt="赞助" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
+        <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">赞助作者</div>
       </a>
     </div>
   </div>
 
   <!-- 评论区域 -->
-  <div class="comments-section" id="comments-section" style="display: none;">
+  <div class="mt-4" id="comments-section" style="display: none;">
     {{ partial "posts/comment.html" . }}
   </div>
 </div>
 
+<style>
+@keyframes heartbeat {
+  0%, 100% { transform: scale(1); }
+  25% { transform: scale(1.1); }
+  50% { transform: scale(1.2); }
+  75% { transform: scale(1.1); }
+}
+
+.heartbeat {
+  animation: heartbeat 1.5s ease-in-out infinite;
+}
+
+.liked-heart {
+  filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%) !important;
+}
+
+.liked-count {
+  color: #8B0000 !important;
+}
+</style>
+
 <script>
 // 评论展开/收起功能
 document.addEventListener('DOMContentLoaded', function() {
@@ -95,6 +120,8 @@ function fetchGiscusCommentCount() {
     return;
   }
 
+  const likeIconEl = document.getElementById("like-icon-" + pageId);
+
   function updateTooltip() {
     if (containerEl.classList.contains('liked')) {
       btnEl.setAttribute('title', btnEl.getAttribute('data-liked-title'));
@@ -103,15 +130,25 @@ function fetchGiscusCommentCount() {
     }
   }
 
+  function setLikedState() {
+    if (likeIconEl) {
+      likeIconEl.classList.add('liked-heart', 'heartbeat');
+    }
+    if (countEl) {
+      countEl.classList.add('liked-count');
+    }
+    btnEl.disabled = true;
+    containerEl.classList.add('liked');
+    updateTooltip();
+  }
+
   function fetchLikes() {
     fetch("https://like.guhub.cn/like/" + pageId)
       .then(resp => resp.json())
       .then(data => {
         countEl.innerText = data.likes ?? 0;
         if (localStorage.getItem("liked_" + pageId)) {
-          btnEl.disabled = true;
-          containerEl.classList.add("liked");
-          updateTooltip();
+          setLikedState();
         }
       })
       .catch(() => {
@@ -133,9 +170,7 @@ function fetchGiscusCommentCount() {
       .then(data => {
         localStorage.setItem("liked_" + pageId, "1");
         countEl.innerText = data.likes ?? 1;
-        btnEl.disabled = true;
-        containerEl.classList.add("liked");
-        updateTooltip();
+        setLikedState();
       })
       .catch(() => {
         alert("点赞失败，请稍后再试");