hdf
This commit is contained in:
@@ -5652,6 +5652,41 @@ body[type='login'] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Hold-to-preview sticker overlay */
|
/* Hold-to-preview sticker overlay */
|
||||||
|
/* Sticker favorites toast notification */
|
||||||
|
.emoji-fav-toast {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 80px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) translateY(20px);
|
||||||
|
background: rgba(20,20,20,0.92);
|
||||||
|
border: 1px solid var(--emoji-fav-color, #f5c518);
|
||||||
|
color: var(--white, #fff);
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 24px;
|
||||||
|
font-size: 0.875em;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 100000;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
.emoji-fav-toast.toast-in {
|
||||||
|
animation: emojiToastIn 0.22s ease forwards;
|
||||||
|
}
|
||||||
|
.emoji-fav-toast.toast-out {
|
||||||
|
animation: emojiToastOut 0.3s ease forwards;
|
||||||
|
}
|
||||||
|
@keyframes emojiToastIn {
|
||||||
|
from { opacity: 0; transform: translateX(-50%) translateY(20px); }
|
||||||
|
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||||
|
}
|
||||||
|
@keyframes emojiToastOut {
|
||||||
|
from { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||||
|
to { opacity: 0; transform: translateX(-50%) translateY(10px); }
|
||||||
|
}
|
||||||
|
|
||||||
.sticker-preview-overlay {
|
.sticker-preview-overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
|
|||||||
@@ -4016,6 +4016,21 @@ class CommentSystem {
|
|||||||
|
|
||||||
// ── Shared sticker hold-to-preview overlay ────────────────────────
|
// ── Shared sticker hold-to-preview overlay ────────────────────────
|
||||||
if (!window.stickerPreview) {
|
if (!window.stickerPreview) {
|
||||||
|
// ── Toast notification (singleton) ──
|
||||||
|
const toastEl = document.createElement('div');
|
||||||
|
toastEl.className = 'emoji-fav-toast';
|
||||||
|
document.body.appendChild(toastEl);
|
||||||
|
let _toastTimer = null;
|
||||||
|
const showToast = (msg) => {
|
||||||
|
clearTimeout(_toastTimer);
|
||||||
|
toastEl.textContent = msg;
|
||||||
|
toastEl.classList.remove('toast-out');
|
||||||
|
toastEl.classList.add('toast-in');
|
||||||
|
_toastTimer = setTimeout(() => {
|
||||||
|
toastEl.classList.replace('toast-in', 'toast-out');
|
||||||
|
}, 2000);
|
||||||
|
};
|
||||||
|
|
||||||
const overlay = document.createElement('div');
|
const overlay = document.createElement('div');
|
||||||
overlay.className = 'sticker-preview-overlay';
|
overlay.className = 'sticker-preview-overlay';
|
||||||
document.body.appendChild(overlay);
|
document.body.appendChild(overlay);
|
||||||
@@ -4041,8 +4056,9 @@ class CommentSystem {
|
|||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
window._emojiPickerFavUtils.toggle(name, url);
|
window._emojiPickerFavUtils.toggle(name, url);
|
||||||
const nowFav = window._emojiPickerFavUtils.has(name);
|
const nowFav = window._emojiPickerFavUtils.has(name);
|
||||||
favBtn.classList.toggle('is-fav', nowFav);
|
// Close preview immediately and show toast
|
||||||
favBtn.innerHTML = '<i class="' + (nowFav ? 'fa-solid' : 'fa-regular') + ' fa-star"></i>';
|
window.stickerPreview.hide();
|
||||||
|
showToast(nowFav ? 'Emoji added to Favorites' : 'Emoji removed from Favorites');
|
||||||
window._emojiPickerRefresh?.();
|
window._emojiPickerRefresh?.();
|
||||||
});
|
});
|
||||||
favBtn.addEventListener('touchend', (e) => { e.preventDefault(); e.stopPropagation(); favBtn.click(); });
|
favBtn.addEventListener('touchend', (e) => { e.preventDefault(); e.stopPropagation(); favBtn.click(); });
|
||||||
|
|||||||
Reference in New Issue
Block a user