CalvinBackup/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2026-08-17 01:00:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): Make connector buttons background opaque when dark mode is enabled system-wide (#13180)

Browse Source
This commit is contained in:
autologie
2025-02-12 09:05:42 +01:00
committed by GitHub
parent 9324e4ffe6
commit 77be25d337
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
+3 -3
View File
@@ -76,12 +76,12 @@ const edgeStyle = computed(() => ({
...props.style,
...(isMainConnection.value ? {} : { strokeDasharray: '8,8' }),
strokeWidth: 2,
stroke: props.hovered ? 'var(--color-primary)' : edgeColor.value,
stroke: delayedHovered.value ? 'var(--color-primary)' : edgeColor.value,
}));
const edgeClasses = computed(() => ({
[$style.edge]: true,
hovered: props.hovered,
hovered: delayedHovered.value,
'bring-to-front': props.bringToFront,
}));
@@ -94,7 +94,7 @@ const isConnectorStraight = computed(() => renderData.value.isConnectorStraight)
const edgeToolbarStyle = computed(() => ({
transform: `translate(-50%, -50%) translate(${labelPosition.value[0]}px, ${labelPosition.value[1]}px)`,
...(props.hovered ? { zIndex: 1 } : {}),
...(delayedHovered.value ? { zIndex: 1 } : {}),
}));
const edgeToolbarClasses = computed(() => ({
packages/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue
+11 -1
View File
@@ -66,11 +66,21 @@ function onDelete() {
</style>
<style lang="scss">
[data-theme='dark'] .canvas-edge-toolbar-button {
@mixin dark-button-styles {
--button-background-color: var(--color-background-base);
--button-hover-background-color: var(--color-background-light);
}
@media (prefers-color-scheme: dark) {
body:not([data-theme]) .canvas-edge-toolbar-button {
@include dark-button-styles();
}
}
[data-theme='dark'] .canvas-edge-toolbar-button {
@include dark-button-styles();
}
.canvas-edge-toolbar-button {
border-width: 2px;
}