From c523b4e3359deced514ffca1390e40a927c1126e Mon Sep 17 00:00:00 2001 From: isUnknown Date: Mon, 8 Dec 2025 16:20:20 +0100 Subject: [PATCH] fix: improve element hover and selection styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/App.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/App.vue b/src/App.vue index 44ce2a6..238a104 100644 --- a/src/App.vue +++ b/src/App.vue @@ -105,7 +105,7 @@ const handleIframeMouseMove = (event) => { // Add highlight to new element (only if not already selected) 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; @@ -219,8 +219,8 @@ const handleIframeClick = (event) => { // Select the new element selectedElement.value = contentElement; - contentElement.style.outline = ''; - contentElement.style.backgroundColor = `${ELEMENT_HIGHLIGHT_COLOR}4D`; // 30% opacity + contentElement.style.outline = `2px dashed ${ELEMENT_HIGHLIGHT_COLOR}`; + contentElement.style.backgroundColor = `${ELEMENT_HIGHLIGHT_COLOR}1A`; // 10% opacity // Get count of similar elements const doc = event.target.ownerDocument;