diff --git a/public/admin.css b/public/admin.css index 8a66890..d8fd2d3 100644 --- a/public/admin.css +++ b/public/admin.css @@ -288,14 +288,14 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; } } .launcher-preview-status { position: absolute; - top: -5px; - right: -5px; + top: 4px; + right: 4px; width: 14px; height: 14px; - border: 2px solid #ffffff; + border: 3px solid #ffffff; border-radius: 50%; 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; } .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 { background: #2f9e44; - box-shadow: 0 0 0 4px rgb(47 158 68 / 16%); } .launcher-preview-badge { position: absolute; diff --git a/public/widget.js b/public/widget.js index a3d3582..daaa74e 100644 --- a/public/widget.js +++ b/public/widget.js @@ -643,10 +643,10 @@ .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-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-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[hidden] { display: none !important; } .mf-reply-pulse { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; }