github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-13 18:45:07 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): workflows styling tweaks

Browse Source
This commit is contained in:
psychedelicious
2025-06-27 19:05:27 +10:00
parent 060a9e57b9
commit 8efef8da41
2 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
View File

@@ -17,6 +17,7 @@ import BottomLeftPanel from './flow/panels/BottomLeftPanel/BottomLeftPanel';
import MinimapPanel from './flow/panels/MinimapPanel/MinimapPanel';
const FOCUS_REGION_STYLES: SystemStyleObject = {
bg: 'base.900',
display: 'flex',
position: 'relative',
width: 'full',

13
invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
View File

@@ -28,7 +28,7 @@ const containerSx: SystemStyleObject = {
cursor: 'grab',
// The action buttons are hidden by default and shown on hover
'& .node-selection-overlay': {
display: 'none',
display: 'block',
position: 'absolute',
top: 0,
insetInlineEnd: 0,
@@ -37,31 +37,28 @@ const containerSx: SystemStyleObject = {
borderRadius: 'base',
transitionProperty: 'none',
pointerEvents: 'none',
opacity: 0.5,
shadow: '0 0 0 1px var(--invoke-colors-base-500)',
},
'&[data-is-mouse-over-node="true"] .node-selection-overlay': {
opacity: 1,
display: 'block',
},
'&[data-is-mouse-over-form-field="true"] .node-selection-overlay': {
opacity: 1,
display: 'block',
bg: 'invokeBlueAlpha.100',
},
_hover: {
'& .node-selection-overlay': {
display: 'block',
shadow: '0 0 0 2px var(--invoke-colors-blue-300)',
shadow: '0 0 0 1px var(--invoke-colors-blue-300)',
},
'&[data-is-selected="true"] .node-selection-overlay': {
display: 'block',
opacity: 1,
shadow: '0 0 0 3px var(--invoke-colors-blue-300)',
shadow: '0 0 0 2px var(--invoke-colors-blue-300)',
},
},
'&[data-is-selected="true"] .node-selection-overlay': {
display: 'block',
shadow: '0 0 0 3px var(--invoke-colors-blue-300)',
shadow: '0 0 0 2px var(--invoke-colors-blue-300)',
},
'&[data-is-editor-locked="true"]': {
'& *': {