.desktop-icon:active cursor: grabbing;
.context-menu-item padding: 8px 18px; cursor: pointer; transition: background 0.08s linear; display: flex; align-items: center; gap: 10px;
// helper: remove existing context menu function removeContextMenu() if (activeContextMenu && activeContextMenu.parentNode) activeContextMenu.remove(); activeContextMenu = null; small icons on desktop
/* icon image / SVG container */ .icon-graphic width: 52px; height: 52px; background: rgba(30, 30, 40, 0.65); backdrop-filter: blur(12px); border-radius: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.2); transition: all 0.15s; margin-bottom: 8px; border: 1px solid rgba(255,255,240,0.25);
/* 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; To avoid icons going off-screen on resize, we
/* hover effect: modern glow */ .desktop-icon:hover .icon-graphic background: rgba(50, 55, 70, 0.8); transform: scale(1.02); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255,255,255,0.3); border-color: rgba(255,215,150,0.6);
// load positions from storage, if any function loadStoredPositions() const stored = localStorage.getItem('desktopIconsLayout'); if (!stored) return false; try const positions = JSON.parse(stored); for (let pos of positions) const icon = iconsState.find(i => i.id === pos.id); if (icon && typeof pos.x === 'number' && typeof pos.y === 'number') // clamp within valid boundaries later when rendering icon.x = pos.x; icon.y = pos.y; return true; catch(e) return false; Y in state
// default positions (fraction-based relative to container width/height) // but we'll store absolute px after init? better: store relative percentages or absolute coords. // Use localStorage with absolute positions (px) based on window size when saved, but for robustness, // we store positions relative to container dimensions? To avoid icons going off-screen on resize, we implement a resize handler // that clamps positions within boundaries. We'll store absolute X,Y in state, and on resize, adjust if needed. // Also provide reset positions to default grid.