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

Use visible wiggle for online launcher effect

Browse Source
This commit is contained in:
rajchales-monito
2026-07-30 17:36:25 +02:00
parent 81375b3dd3
commit f491b393d7
3 changed files with 3 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.css
+1 -7
View File
@@ -284,7 +284,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
animation: launcherPreviewWiggle 7.2s ease-in-out infinite;
}
.launcher-preview.effect-sway .launcher-preview-icon {
animation: launcherPreviewSway 4.8s ease-in-out infinite;
animation: launcherPreviewWiggle 7.2s ease-in-out infinite;
}
.launcher-preview-status {
position: absolute;
@@ -481,12 +481,6 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
6% { transform: translateY(2px) rotate(3deg); }
9% { transform: translateY(-1px) rotate(-2deg); }
}
@keyframes launcherPreviewSway {
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); }
}
.widget-language-settings {
grid-template-columns: 112px minmax(230px, 1fr);
}
public/admin.html
+1 -1
View File
@@ -175,7 +175,7 @@
<label><input name="launcherHoverLabel" type="checkbox"> napis pri najeti</label>
<label><input name="launcherStatusDot" type="checkbox"> stavova tecka</label>
<label><input name="launcherPersistentLabel" type="checkbox"> stitek stale</label>
<label><input name="launcherSway" type="checkbox"> jemne zhoupnuti</label>
<label><input name="launcherSway" type="checkbox"> zhoupnuti</label>
<div class="launcher-preview-stage">
<button id="launcherPreview" class="launcher-preview" type="button" aria-label="Nahled online tlacitka">
<span class="launcher-preview-status" aria-hidden="true"></span>
public/widget.js
+1 -7
View File
@@ -652,7 +652,7 @@
.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-online.mf-effect-sway .mf-launcher-icon { animation: mfWiggle 7.2s 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 7.2s ease-in-out infinite; }
@@ -717,12 +717,6 @@
6% { transform: translateY(2px) rotate(3deg); }
9% { 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));