Merge branch 'master' of https://github.com/BigCoke233/geek-death-project

1 files changed, 151 insertions, 0 deletions

diff --git a/assets/css/like-button.css b/assets/css/like-button.css
new file mode 100644
index 00000000..8c347b6c
--- /dev/null
+++ b/assets/css/like-button.css
@@ -0,0 +1,151 @@
+.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));
+}
+
+.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;
+}
+
+.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);
+  }
+}
\ No newline at end of file