From 8897da09d15388e06a39ed39d10d4019855faecb Mon Sep 17 00:00:00 2001 From: Eltrac Date: Tue, 8 Jul 2025 14:00:34 +0800 Subject: refactor: include only necessary styles and remove unused like-button assets Former-commit-id: c66c868fea27eda8d55dd2d276913ac3ecfbdc58 --- assets/css/like-button.css | 157 --------------------------------------------- 1 file changed, 157 deletions(-) delete mode 100644 assets/css/like-button.css (limited to 'assets/css/like-button.css') 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); - } -} -- cgit v1.2.3