Small Icons On Desktop -

.context-menu-item:hover background: #3a4b6ecc;

/* icon text label */ .icon-label font-size: 12px; font-weight: 500; color: #fef7e0; text-shadow: 0 1px 3px rgba(0,0,0,0.6); background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); padding: 4px 8px; border-radius: 20px; max-width: 92px; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; letter-spacing: 0.3px; transition: background 0.1s; small icons on desktop

// remove an icon by id function deleteIconById(iconId) const index = iconsState.findIndex(ic => ic.id === iconId); if (index !== -1) iconsState.splice(index, 1); persistPositions(); renderAllIcons(); showToast(`🗑️ Removed icon`, 1000); .context-menu-item:hover background: #3a4b6ecc

.desktop-icon:active cursor: grabbing;

// show temporary toast message function showToast(message, duration = 1800) const existingToast = document.querySelector('.toast-msg'); if(existingToast) existingToast.remove(); const toast = document.createElement('div'); toast.className = 'toast-msg'; toast.textContent = message; document.body.appendChild(toast); setTimeout(() => if(toast.parentNode) toast.remove(); , duration); text-shadow: 0 1px 3px rgba(0