ui: make resize handles visible on any Figma theme (gray border + light fill)

This commit is contained in:
Hermes Agent committed 2026-09-16 14:42:27 +02:00
1 parent bf14dba0ac
commit 6328989608
1 file changed
+6 -4
+6 -4
View File
@@ -287,8 +287,10 @@ function Plugin () {
.resize-hitbox {
opacity: 0;
transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease;
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.55);
/* Light fill (visible on dark themes) + mid-gray border (visible on light
themes) so the handles read on either Figma theme. */
background: rgba(255, 255, 255, 0.5);
border: 1.5px solid rgba(110, 110, 110, 0.9);
border-radius: 4px;
}
/* Hovering any handle (or anywhere in the window) reveals all handles. */
@@ -296,8 +298,8 @@ function Plugin () {
.plugin-root:has(.resize-hitbox:hover) .resize-hitbox { opacity: 1; }
/* The specifically hovered handle is brighter. */
.resize-hitbox:hover {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(255, 255, 255, 1);
background: rgba(255, 255, 255, 0.95);
border-color: rgba(80, 80, 80, 1);
}
`}</style>
<Container space="medium" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>