/* ┌──────────────────────────────────────────────────────────────────────────────┐ │ @author: Davidson Gomes │ │ @file: /app/agents/workflows/canva.css │ │ Developed by: Davidson Gomes │ │ Creation date: May 13, 2025 │ │ Contact: contato@evolution-api.com │ ├──────────────────────────────────────────────────────────────────────────────┤ │ @copyright © Evolution API 2025. All rights reserved. │ │ Licensed under the Apache License, Version 2.0 │ │ │ │ You may not use this file except in compliance with the License. │ │ You may obtain a copy of the License at │ │ │ │ http://www.apache.org/licenses/LICENSE-2.0 │ │ │ │ Unless required by applicable law or agreed to in writing, software │ │ distributed under the License is distributed on an "AS IS" BASIS, │ │ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. │ │ See the License for the specific language governing permissions and │ │ limitations under the License. │ ├──────────────────────────────────────────────────────────────────────────────┤ │ @important │ │ For any future changes to the code in this file, it is recommended to │ │ include, together with the modification, the information of the developer │ │ who changed it and the date of modification. │ └──────────────────────────────────────────────────────────────────────────────┘ */ .react-flow.dark { --xy-background-color-default: transparent; } .react-flow__panel { box-shadow: none; padding: 5px; } .react-flow__controls { background-color: rgba(30, 30, 30, 0.8); backdrop-filter: blur(4px); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); border: 1px solid rgba(70, 70, 70, 0.5); padding: 4px; } .react-flow__controls-button { padding: 6px; width: 32px; height: 32px; margin: 4px 0; border: none !important; background-color: rgba(40, 40, 40, 0.8) !important; color: #a0a0a0 !important; border-radius: 6px !important; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .react-flow__controls-button:hover { background-color: rgba(60, 60, 60, 0.9) !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .react-flow__controls-button svg { fill: currentColor; width: 16px; height: 16px; } .react-flow__controls-button[data-action="zoom-in"] { border-bottom: 1px solid rgba(70, 70, 70, 0.5) !important; } .react-flow__controls-button[data-action="zoom-out"] { border-bottom: 1px solid rgba(70, 70, 70, 0.5) !important; } /* Hide scrollbar for all browsers while maintaining scroll functionality */ .scrollbar-hide { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .scrollbar-hide::-webkit-scrollbar { display: none; /* Chrome, Safari and Opera */ width: 0; height: 0; background: transparent; } /* Animated dashed edge for flow edges */ .edge-dashed-animated { stroke-dasharray: 6; stroke-dashoffset: 0; animation: dash 0.5s linear infinite; } @keyframes dash { to { stroke-dashoffset: -12; } } /* Edges styling */ .react-flow__edge-path { stroke: #10b981; /* Emerald color for edges */ stroke-width: 2; } .react-flow__edge.selected .react-flow__edge-path { stroke: #3b82f6; /* Blue color for selected edges */ stroke-width: 3; } /* Node handle styling */ .react-flow__handle { width: 8px; height: 8px; border-radius: 50%; background-color: #10b981; border: 2px solid #0d9488; } .react-flow__handle:hover { background-color: #3b82f6; border-color: #2563eb; } /* Nó em execução */ .active-execution-node { animation: pulse-execution 1.5s infinite; filter: drop-shadow(0 0 15px rgba(5, 212, 114, 0.9)); z-index: 10; transform: scale(1.03); transition: transform 0.3s ease-in-out; } @keyframes pulse-execution { 0% { box-shadow: 0 0 0 0 rgba(5, 212, 114, 0.9); } 70% { box-shadow: 0 0 0 15px rgba(5, 212, 114, 0); } 100% { box-shadow: 0 0 0 0 rgba(5, 212, 114, 0); } } .react-flow__node[data-is-executing="true"] { filter: drop-shadow(0 0 15px rgba(5, 212, 114, 0.9)); transform: scale(1.03); transition: transform 0.3s ease-in-out; } .react-flow__node[data-is-executing="true"]::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border: 2px solid #05d472; border-radius: 8px; animation: pulse-border 1.5s infinite; z-index: -1; } @keyframes pulse-border { 0% { opacity: 1; transform: scale(1); } 70% { opacity: 0.3; transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }