refactor: include only necessary styles and remove unused like-button assets

Former-commit-id: c66c868fea27eda8d55dd2d276913ac3ecfbdc58

4 files changed, 214 insertions, 162 deletions

diff --git a/assets/css/components/_post-tabs.scss b/assets/css/components/_post-tabs.scss
new file mode 100644
index 00000000..475fc12d
--- /dev/null
+++ b/assets/css/components/_post-tabs.scss
@@ -0,0 +1,206 @@
+.post-actions-container {
+  margin: 2rem 0 1rem 0;
+}
+
+.post-actions-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.left-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.right-actions {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 48px;
+  height: 48px;
+  padding: 0 8px;
+  border: none;
+  background: transparent;
+  color: #666;
+  cursor: pointer;
+  text-decoration: none;
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+}
+
+/* 右侧小按钮样式 */
+.small-btn {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 4px;
+}
+
+.small-btn:hover {
+  background: transparent;
+  opacity: 0.7;
+}
+
+/* 图标样式 */
+.icon {
+  filter: invert(0.4);
+  flex-shrink: 0;
+}
+
+/* Tooltip 样式 */
+.action-btn::before {
+  content: attr(title);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(5px);
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+  pointer-events: none;
+  margin-bottom: 8px;
+  z-index: 1000;
+}
+
+.action-btn:hover::before {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(0);
+}
+
+.like-button-container {
+  position: relative;
+}
+
+.like-icon {
+  filter: invert(0.4);
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+}
+
+.liked .like-icon {
+  filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%);
+  animation: heartbeat 1.5s ease-in-out infinite;
+}
+
+.count-badge {
+  font-size: 12px;
+  font-weight: bold;
+  color: #666;
+  min-width: 16px;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 10px;
+  padding: 2px 6px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.liked .count-badge {
+  color: #8B0000;
+}
+
+.comments-section {
+  margin-top: 1rem;
+}
+
+/* 心脏搏动动画 */
+@keyframes heartbeat {
+  0%, 100% { transform: scale(1); }
+  25% { transform: scale(1.1); }
+  50% { transform: scale(1.2); }
+  75% { transform: scale(1.1); }
+}
+
+/* 暗色主题适配 */
+@media (prefers-color-scheme: dark) {
+  .action-btn {
+    color: #999;
+  }
+
+  .action-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .small-btn:hover {
+    background: transparent;
+    opacity: 0.7;
+  }
+
+  /* 暗色模式下的图标滤镜 */
+  .icon {
+    filter: invert(0.7) brightness(1.2);
+  }
+
+  .like-icon {
+    filter: invert(0.7) brightness(1.2);
+  }
+
+  .liked .like-icon {
+    filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%);
+    animation: heartbeat 1.5s ease-in-out infinite;
+  }
+
+  .action-btn::before {
+    background: rgba(255, 255, 255, 0.9);
+    color: #000;
+  }
+
+  .count-badge {
+    color: #999;
+    background: rgba(0, 0, 0, 0.7);
+  }
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .post-actions-nav {
+    gap: 0.5rem;
+  }
+
+  .left-actions {
+    gap: 0.5rem;
+  }
+
+  .right-actions {
+    gap: 0.25rem;
+  }
+
+  .action-btn {
+    min-width: 44px;
+    height: 44px;
+    padding: 0 6px;
+  }
+
+  .small-btn {
+    min-width: 28px;
+    height: 28px;
+    padding: 0 2px;
+  }
+
+  .action-btn::before {
+    left: 50%;
+    transform: translateX(-50%) translateY(5px);
+  }
+
+  .action-btn:hover::before {
+    transform: translateX(-50%) translateY(0);
+  }
+}
diff --git a/assets/css/content.scss b/assets/css/content.scss
new file mode 100644
index 00000000..65a4339c
--- /dev/null
+++ b/assets/css/content.scss
@@ -0,0 +1,8 @@
+@import "utils/mixins";
+
+@import "components/post";
+@import "components/post-tabs";
+@import "components/comment";
+
+@import "libraries/littlefoot";
+@import "libraries/fancybox";
diff --git a/assets/css/index.scss b/assets/css/global.scss
index b3cec12c..e2f5126f 100644
--- a/assets/css/index.scss
+++ b/assets/css/global.scss
@@ -8,13 +8,8 @@
 @import "components/pages";
 @import "components/taxonomy";
 @import "components/postlist";
-@import "components/post";
-@import "components/comment";
 @import "components/shortcodes";
 @import "components/card";
 @import "components/fictions";
 @import "components/library";
 @import "components/footer";
-
-@import "libraries/littlefoot";
-@import "libraries/fancybox";
diff --git a/assets/css/like-button.css b/assets/css/like-button.css
deleted file mode 100644
index f26c776d..00000000
--- a/assets/css/like-button.css
+++ /dev/null
@@ -1,157 +0,0 @@
-.floating-like-container {
-  position: fixed;
-  bottom: 30px;
-  right: 30px;
-  z-index: 1000;
-  opacity: 0.3;
-  transition: all 0.3s ease;
-}
-
-.floating-like-container:hover {
-  opacity: 1;
-}
-
-.floating-like-container.near-comments {
-  opacity: 0.6;
-  animation: gentle-shake 2s ease-in-out infinite;
-}
-
-.floating-like-container.near-comments:hover {
-  opacity: 1;
-  animation: none;
-}
-
-/* 已点赞状态：保持最高不透明度，不再晃动 */
-.floating-like-container.liked {
-  opacity: 1 !important;
-}
-
-.floating-like-container.liked.near-comments {
-  animation: none !important;
-}
-
-.floating-like-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  padding: 8px;
-  transition: all 0.3s ease;
-  position: relative;
-}
-
-.floating-like-button:hover {
-  transform: scale(1.1);
-}
-
-/* 已点赞状态下禁用hover放大效果 */
-.liked .floating-like-button:hover {
-  transform: none;
-}
-
-.floating-like-button.clicked {
-  transform: scale(0.9);
-}
-
-.floating-like-button:disabled {
-  cursor: not-allowed;
-}
-
-#like-button-icon {
-  width: 32px;
-  height: 32px;
-  transition: all 0.3s ease;
-  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
-  @media (prefers-color-scheme:dark) {
-      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)) invert(1);
-  }
-}
-
-.liked #like-button-icon {
-  filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
-  animation: heartbeat 1.5s ease-in-out infinite;
-  @media (prefers-color-scheme:dark) {
-      filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(70%) contrast(150%) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
-  }
-}
-
-.like-count-display {
-  margin-top: 4px;
-  font-size: 12px;
-  font-weight: bold;
-  color: var(--secondary-text-color);
-  text-align: center;
-  min-width: 20px;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 10px;
-  padding: 2px 6px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-}
-
-.liked .like-count-display {
-  color: #8B0000;
-}
-
-/* 悬浮提示样式 */
-.floating-like-button::before {
-  content: attr(title);
-  position: absolute;
-  bottom: 100%;
-  right: 0;
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 6px 10px;
-  border-radius: 4px;
-  font-size: 12px;
-  white-space: nowrap;
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(5px);
-  transition: all 0.3s ease;
-  pointer-events: none;
-  margin-bottom: 8px;
-}
-
-.floating-like-button:hover::before {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-}
-
-/* 动画定义 */
-@keyframes gentle-shake {
-  0%, 100% { transform: translateX(0); }
-  25% { transform: translateX(-2px); }
-  75% { transform: translateX(2px); }
-}
-
-@keyframes heartbeat {
-  0%, 100% { transform: scale(1); }
-  25% { transform: scale(1.1); }
-  50% { transform: scale(1.2); }
-  75% { transform: scale(1.1); }
-}
-
-/* 移动端适配 */
-@media screen and (max-width: 768px) {
-  .floating-like-container {
-    bottom: 20px;
-    right: 20px;
-  }
-
-  #like-button-icon {
-    width: 28px;
-    height: 28px;
-  }
-
-  .floating-like-button::before {
-    right: -10px;
-    transform: translateX(50%) translateY(5px);
-  }
-
-  .floating-like-button:hover::before {
-    transform: translateX(50%) translateY(0);
-  }
-}