Nicole Rappe
4c4623fa71
- Added Black & White Image Threshold Filter Node - Changed Color of Node Headers to #58a6ff - Misc Changes
80 lines
1.8 KiB
CSS
80 lines
1.8 KiB
CSS
/* FlowEditor background container */
|
|
.flow-editor-container {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
|
|
/* Blue Gradient Overlay */
|
|
.flow-editor-container::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none; /* Ensures grid and nodes remain fully interactive */
|
|
background: linear-gradient( to bottom, rgba(9, 44, 68, 0.9) 0%, /* Deep blue at the top */
|
|
rgba(30, 30, 30, 0) 45%, /* Fade out towards center */
|
|
rgba(30, 30, 30, 0) 75%, /* No gradient in the middle */
|
|
rgba(9, 44, 68, 0.7) 100% /* Deep blue at the bottom */
|
|
);
|
|
z-index: -1; /* Ensures it stays behind the React Flow elements */
|
|
}
|
|
|
|
|
|
/* Emphasize Drag & Drop Node Functionality */
|
|
.sidebar-button:hover {
|
|
background-color: #2a2a2a !important;
|
|
box-shadow: 0 0 5px rgba(88, 166, 255, 0.3);
|
|
cursor: grab;
|
|
}
|
|
|
|
|
|
/* Borealis Node Styling */
|
|
.borealis-node {
|
|
background: #2c2c2c;
|
|
border: 1px solid #3a3a3a;
|
|
border-radius: 4px;
|
|
color: #ccc;
|
|
font-size: 12px;
|
|
min-width: 160px;
|
|
max-width: 260px;
|
|
position: relative;
|
|
box-shadow: 0 0 5px rgba(88, 166, 255, 0.15), 0 0 10px rgba(88, 166, 255, 0.15);
|
|
transition: box-shadow 0.3s ease-in-out;
|
|
}
|
|
.borealis-node-header {
|
|
background: #232323;
|
|
padding: 6px 10px;
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
font-weight: bold;
|
|
color: #58a6ff;
|
|
font-size: 10px;
|
|
}
|
|
.borealis-node-content {
|
|
padding: 10px;
|
|
font-size: 9px;
|
|
}
|
|
.borealis-handle {
|
|
background: #58a6ff;
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
/* Global dark form inputs */
|
|
input, select, button {
|
|
background-color: #2a2a2a;
|
|
color: #ccc;
|
|
border: 1px solid #444;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Label / Dark Text styling */
|
|
label {
|
|
color: #aaa;
|
|
font-size: 10px;
|
|
}
|