rajch_ales/MaalFlows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add more launcher online effects

Browse Source
This commit is contained in:
rajchales-monito
2026-07-30 17:20:54 +02:00
parent 84d8a21d38
commit 332e6d20f4
5 changed files with 50 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/widget.js
+15
View File
@@ -33,6 +33,7 @@
<style>${styles(settings)}</style>
<button class="mf-launcher ${launcherEffectClasses(settings, site.isOnline)}" type="button" aria-label="${escapeHtml(copy.title)}">
<span class="mf-reply-pulse" aria-hidden="true"></span>
<span class="mf-status-dot" aria-hidden="true"></span>
<span class="mf-launcher-icon"></span>
<span class="mf-launcher-label">${escapeHtml(site.isOnline ? copy.onlineLabel : copy.offlineLabel)}</span>
<span class="mf-message-badge" hidden>0</span>
@@ -546,6 +547,9 @@
isOnline ? "mf-online" : "",
isOnline && effects.breathe ? "mf-effect-breathe" : "",
isOnline && effects.ring ? "mf-effect-ring" : "",
effects.statusDot ? "mf-effect-status-dot" : "",
effects.persistentLabel ? "mf-effect-persistent-label" : "",
isOnline && effects.sway ? "mf-effect-sway" : "",
effects.hoverLabel ? "mf-effect-hover-label" : "",
].filter(Boolean).join(" ");
}
@@ -638,13 +642,18 @@
}
.mf-launcher-label { position: absolute; ${labelOffset} top: 50%; transform: translateY(-50%) translateX(8px); opacity: 0; pointer-events: none; white-space: nowrap; border-radius: 999px; padding: 7px 10px; background: ${c.text}; color: white; font-size: 12px; box-shadow: 0 10px 24px rgb(0 0 0 / 18%); transition: opacity .18s ease, transform .18s ease; }
.mf-online.mf-effect-hover-label:hover .mf-launcher-label { opacity: 1; transform: translateY(-50%) translateX(0); }
.mf-effect-persistent-label .mf-launcher-label { opacity: 1; transform: translateY(-50%) translateX(0); }
.mf-message-label { position: absolute; ${labelOffset} top: 50%; transform: translateY(-50%) translateX(8px); opacity: 0; pointer-events: none; white-space: nowrap; border-radius: 999px; padding: 7px 10px; background: ${c.text}; color: white; font-size: 12px; font-weight: 700; box-shadow: 0 10px 24px rgb(0 0 0 / 18%); transition: opacity .18s ease, transform .18s ease; }
.mf-show-message-label .mf-message-label { opacity: 1; transform: translateY(-50%) translateX(0); }
.mf-status-dot { position: absolute; top: -3px; left: -3px; width: 14px; height: 14px; display: none; border: 2px solid white; border-radius: 50%; background: #c9d4ce; box-shadow: 0 0 0 4px rgb(201 212 206 / 24%); }
.mf-effect-status-dot .mf-status-dot { display: block; }
.mf-online .mf-status-dot { background: #2f9e44; box-shadow: 0 0 0 4px rgb(47 158 68 / 16%); }
.mf-message-badge { position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; border: 2px solid white; background: #ff3b30; color: white; font-size: 12px; font-weight: 800; line-height: 1; box-shadow: 0 8px 18px rgb(0 0 0 / 18%); }
.mf-message-badge[hidden] { display: none !important; }
.mf-reply-pulse { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; }
.mf-online.mf-effect-breathe { animation: mfBreathe 2.8s ease-in-out infinite; }
.mf-online.mf-effect-ring:before { position: absolute; inset: -5px; border: 2px solid ${c.brand}; border-radius: 50%; opacity: .62; content: ""; animation: mfRing 2.2s ease-out infinite; }
.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; }
@@ -709,6 +718,12 @@
48% { transform: translateY(2px) rotate(3deg); }
72% { transform: translateY(-1px) rotate(-2deg); }
}
@keyframes mfSway {
0%, 72%, 100% { transform: translateX(0) rotate(0deg); }
78% { transform: translateX(-2px) rotate(-4deg); }
84% { transform: translateX(2px) rotate(4deg); }
90% { transform: translateX(-1px) rotate(-2deg); }
}
@media (max-width: 640px) {
.mf-launcher {
${mobile.side}: max(${mobile.sideOffsetPx}px, env(safe-area-inset-${mobile.side}, 0px));