fix: remove distracting outlines and resize handles from canvas shapes

Handles now only appear during active move/resize, not on hover or focus.
Removes blue outline borders that cluttered the canvas.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-27 14:03:51 -08:00
parent 3b6ea5afcd
commit 3f7c649b54
1 changed files with 7 additions and 3 deletions

View File

@ -84,12 +84,12 @@ const styles = css`
:host(:focus-within),
:host(:focus-visible) {
z-index: calc(${MAX_Z_INDEX} - 1);
outline: solid 1px hsl(214, 84%, 56%);
outline: none;
}
:host(:hover),
:host(:state(highlighted)) {
outline: solid 2px hsl(214, 84%, 56%);
outline: none;
}
:host(:state(move)),
@ -158,7 +158,11 @@ const styles = css`
translate: -100% 0%;
}
:host(:focus-within) :is([part^="resize"], [part^="rotation"]) {
:host(:state(move)) :is([part^="resize"], [part^="rotation"]),
:host(:state(resize-top-left)) :is([part^="resize"], [part^="rotation"]),
:host(:state(resize-top-right)) :is([part^="resize"], [part^="rotation"]),
:host(:state(resize-bottom-right)) :is([part^="resize"], [part^="rotation"]),
:host(:state(resize-bottom-left)) :is([part^="resize"], [part^="rotation"]) {
display: block;
}
`;