ui: make resize handles visible on any Figma theme (gray border + light fill)
This commit is contained in:
1 parent
bf14dba0ac
commit
6328989608
1 file changed
+6
-4
+6
-4
@@ -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' }}>
|
||||
|
||||
Reference in new issue
Block a user