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

Move widget previews into effect cards

Browse Source
This commit is contained in:
rajchales-monito
2026-07-30 17:14:32 +02:00
parent e9c363639f
commit 84d8a21d38
3 changed files with 89 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.css
+58 -3
View File
@@ -231,10 +231,8 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
width: auto;
margin: 0;
}
.launcher-preview-settings {
grid-template-columns: 1fr;
}
.launcher-preview-stage {
grid-column: 1 / -1;
min-height: 112px;
display: grid;
place-items: center;
@@ -274,6 +272,52 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
content: "";
animation: launcherPreviewRing 2.2s ease-out infinite;
}
.launcher-preview.notify-pulse::after {
position: absolute;
inset: 0;
border-radius: 50%;
pointer-events: none;
content: "";
animation: launcherPreviewPulse 1.15s ease-out infinite;
}
.launcher-preview.notify-wiggle .launcher-preview-icon {
animation: launcherPreviewWiggle .62s ease-in-out infinite;
}
.launcher-preview-status {
position: absolute;
top: -3px;
left: -3px;
width: 14px;
height: 14px;
border: 2px solid #ffffff;
border-radius: 50%;
background: #c9d4ce;
box-shadow: 0 0 0 4px rgb(201 212 206 / 24%);
}
.launcher-preview.online .launcher-preview-status {
background: #2f9e44;
box-shadow: 0 0 0 4px rgb(47 158 68 / 16%);
}
.launcher-preview-badge {
position: absolute;
top: -5px;
right: -5px;
min-width: 22px;
height: 22px;
display: none;
place-items: center;
border: 2px solid #ffffff;
border-radius: 999px;
background: #ff3b30;
color: #ffffff;
font-size: 12px;
font-weight: 800;
line-height: 1;
box-shadow: 0 8px 18px rgb(0 0 0 / 18%);
}
.launcher-preview.show-badge .launcher-preview-badge {
display: grid;
}
.launcher-preview-label {
position: absolute;
right: 68px;
@@ -415,6 +459,17 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
70% { transform: scale(1.22); opacity: 0; }
100% { transform: scale(.92); opacity: 0; }
}
@keyframes launcherPreviewPulse {
0% { box-shadow: 0 0 0 0 rgb(255 59 48 / 46%); opacity: .9; transform: scale(1); }
70% { box-shadow: 0 0 0 18px rgb(255 59 48 / 0%); opacity: 0; transform: scale(1.08); }
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); }
}
.widget-language-settings {
grid-template-columns: 112px minmax(230px, 1fr);
}