studio-variable/geoproject-app
5
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

fix: improve element hover and selection styling

Browse source 
Update element highlight styles for better visual consistency:
- Hover: solid purple border with 50% opacity (matches page hover style)
- Selection: dashed purple border + 10% opacity background (was 30%)

The lighter background on selection reduces visual clutter while maintaining
clear indication of selected state.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
isUnknown 2025-12-08 16:20:20 +01:00
parent b903c75f98
commit c523b4e335
1 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/App.vue
View file

@ -105,7 +105,7 @@ const handleIframeMouseMove = (event) => {
// Add highlight to new element (only if not already selected) // Add highlight to new element (only if not already selected)
if (contentElement && contentElement !== selectedElement.value) { if (contentElement && contentElement !== selectedElement.value) {
contentElement.style.outline = `2px dashed ${ELEMENT_HIGHLIGHT_COLOR}`; contentElement.style.outline = `2px solid ${ELEMENT_HIGHLIGHT_COLOR}50`;
} }
hoveredElement.value = contentElement; hoveredElement.value = contentElement;
@ -219,8 +219,8 @@ const handleIframeClick = (event) => {
// Select the new element // Select the new element
selectedElement.value = contentElement; selectedElement.value = contentElement;
contentElement.style.outline = ''; contentElement.style.outline = `2px dashed ${ELEMENT_HIGHLIGHT_COLOR}`;
contentElement.style.backgroundColor = `${ELEMENT_HIGHLIGHT_COLOR}4D`; // 30% opacity contentElement.style.backgroundColor = `${ELEMENT_HIGHLIGHT_COLOR}1A`; // 10% opacity
// Get count of similar elements // Get count of similar elements
const doc = event.target.ownerDocument; const doc = event.target.ownerDocument;