summaryrefslogtreecommitdiff
path: root/assets/css/like-button.css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/like-button.css')
-rw-r--r--assets/css/like-button.css157
1 files changed, 0 insertions, 157 deletions
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);
- }
-}