Embed launcher status dot

This commit is contained in:
rajchales-monito
2026-07-30 17:40:38 +02:00
parent f491b393d7
commit bf2c58f90a
2 changed files with 6 additions and 7 deletions
+4 -5
View File
@@ -288,14 +288,14 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
} }
.launcher-preview-status { .launcher-preview-status {
position: absolute; position: absolute;
top: -5px; top: 4px;
right: -5px; right: 4px;
width: 14px; width: 14px;
height: 14px; height: 14px;
border: 2px solid #ffffff; border: 3px solid #ffffff;
border-radius: 50%; border-radius: 50%;
background: #c9d4ce; background: #c9d4ce;
box-shadow: 0 0 0 4px rgb(201 212 206 / 24%); box-shadow: 0 2px 6px rgb(0 0 0 / 14%);
display: none; display: none;
} }
.launcher-preview.show-status .launcher-preview-status { .launcher-preview.show-status .launcher-preview-status {
@@ -303,7 +303,6 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
} }
.launcher-preview.online .launcher-preview-status { .launcher-preview.online .launcher-preview-status {
background: #2f9e44; background: #2f9e44;
box-shadow: 0 0 0 4px rgb(47 158 68 / 16%);
} }
.launcher-preview-badge { .launcher-preview-badge {
position: absolute; position: absolute;
+2 -2
View File
@@ -643,10 +643,10 @@
.mf-has-message-alert .mf-launcher-label { opacity: 0; transform: translateY(-50%) translateX(8px); } .mf-has-message-alert .mf-launcher-label { opacity: 0; transform: translateY(-50%) translateX(8px); }
.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-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-show-message-label .mf-message-label { opacity: 1; transform: translateY(-50%) translateX(0); }
.mf-status-dot { position: absolute; top: -5px; right: -5px; 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-status-dot { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; display: none; border: 3px solid white; border-radius: 50%; background: #c9d4ce; box-shadow: 0 2px 6px rgb(0 0 0 / 14%); }
.mf-effect-status-dot .mf-status-dot { display: block; } .mf-effect-status-dot .mf-status-dot { display: block; }
.mf-has-message-alert .mf-status-dot { display: none; } .mf-has-message-alert .mf-status-dot { display: none; }
.mf-online .mf-status-dot { background: #2f9e44; box-shadow: 0 0 0 4px rgb(47 158 68 / 16%); } .mf-online .mf-status-dot { background: #2f9e44; }
.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 { 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-message-badge[hidden] { display: none !important; }
.mf-reply-pulse { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; } .mf-reply-pulse { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; }