diff --git a/public/admin.css b/public/admin.css index de4e43c..0fe17c7 100644 --- a/public/admin.css +++ b/public/admin.css @@ -281,7 +281,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; } animation: launcherPreviewPulse 1.15s ease-out infinite; } .launcher-preview.notify-wiggle .launcher-preview-icon { - animation: launcherPreviewWiggle .62s ease-in-out infinite; + animation: launcherPreviewWiggle 7.2s ease-in-out infinite; } .launcher-preview.effect-sway .launcher-preview-icon { animation: launcherPreviewSway 4.8s ease-in-out infinite; @@ -476,10 +476,10 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; } 100% { box-shadow: 0 0 0 0 rgb(255 59 48 / 0%); opacity: 0; transform: scale(1); } } @keyframes launcherPreviewWiggle { - 0%, 100% { transform: translateY(0) rotate(0deg); } - 22% { transform: translateY(-3px) rotate(-4deg); } - 48% { transform: translateY(2px) rotate(3deg); } - 72% { transform: translateY(-1px) rotate(-2deg); } + 0%, 12%, 100% { transform: translateY(0) rotate(0deg); } + 3% { transform: translateY(-3px) rotate(-4deg); } + 6% { transform: translateY(2px) rotate(3deg); } + 9% { transform: translateY(-1px) rotate(-2deg); } } @keyframes launcherPreviewSway { 0%, 72%, 100% { transform: translateX(0) rotate(0deg); } diff --git a/public/widget.js b/public/widget.js index d39aeea..57090ea 100644 --- a/public/widget.js +++ b/public/widget.js @@ -575,15 +575,12 @@ launcher.classList.remove("mf-wiggle"); void launcher.offsetWidth; launcher.classList.add("mf-wiggle"); - clearTimeout(applyAdminReplyEffects.wiggleTimer); - applyAdminReplyEffects.wiggleTimer = setTimeout(() => launcher.classList.remove("mf-wiggle"), 1400); } } function clearMessageEffects(launcher) { launcher.classList.remove("mf-notify", "mf-wiggle", "mf-show-message-label", "mf-has-message-alert"); clearTimeout(applyAdminReplyEffects.labelTimer); - clearTimeout(applyAdminReplyEffects.wiggleTimer); } function updateMessageBadge(launcher, unreadCount) { @@ -658,7 +655,7 @@ .mf-online.mf-effect-sway .mf-launcher-icon { animation: mfSway 4.8s ease-in-out infinite; } .mf-offline { filter: grayscale(.2) saturate(.72); opacity: .86; } .mf-notify .mf-reply-pulse { animation: mfPulse 1.15s ease-out infinite; } - .mf-wiggle .mf-launcher-icon { animation: mfWiggle .62s ease-in-out 2; } + .mf-wiggle .mf-launcher-icon { animation: mfWiggle 7.2s ease-in-out infinite; } .mf-panel { position: fixed; z-index: 2147483001; ${desktop.side}: ${desktop.sideOffsetPx}px; bottom: ${desktop.bottomPx + 72}px; width: min(${desktop.widthPx}px, calc(100vw - 24px)); max-height: min(680px, calc(100vh - 110px)); display: none; @@ -715,10 +712,10 @@ 100% { transform: scale(.92); opacity: 0; } } @keyframes mfWiggle { - 0%, 100% { transform: translateY(0) rotate(0deg); } - 22% { transform: translateY(-3px) rotate(-4deg); } - 48% { transform: translateY(2px) rotate(3deg); } - 72% { transform: translateY(-1px) rotate(-2deg); } + 0%, 12%, 100% { transform: translateY(0) rotate(0deg); } + 3% { transform: translateY(-3px) rotate(-4deg); } + 6% { transform: translateY(2px) rotate(3deg); } + 9% { transform: translateY(-1px) rotate(-2deg); } } @keyframes mfSway { 0%, 72%, 100% { transform: translateX(0) rotate(0deg); }