465 lines
8.2 KiB
CSS
465 lines
8.2 KiB
CSS
/**
|
|
* Automation2 Flow Editor Styles
|
|
* Sidebar with node list + canvas area.
|
|
*/
|
|
|
|
.container {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* =============================================================================
|
|
SIDEBAR - Node List
|
|
============================================================================= */
|
|
|
|
.sidebar {
|
|
flex-shrink: 0;
|
|
width: 280px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg-secondary, #f8f9fa);
|
|
border-right: 1px solid var(--border-color, #e0e0e0);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebarHeader {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--border-color, #e0e0e0);
|
|
background: var(--bg-primary, #fff);
|
|
}
|
|
|
|
.sidebarTitle {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #1a1a1a);
|
|
}
|
|
|
|
.sidebarSearch {
|
|
margin-top: 0.75rem;
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--border-color, #e0e0e0);
|
|
border-radius: 6px;
|
|
font-size: 0.875rem;
|
|
background: var(--bg-primary, #fff);
|
|
color: var(--text-primary, #333);
|
|
}
|
|
|
|
.sidebarSearch::placeholder {
|
|
color: var(--text-tertiary, #999);
|
|
}
|
|
|
|
.sidebarSearch:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color, #007bff);
|
|
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
|
|
}
|
|
|
|
.nodeList {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
/* Category Groups */
|
|
.categoryGroup {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
|
|
.categoryHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-secondary, #666);
|
|
}
|
|
|
|
.categoryIcon {
|
|
margin-right: 0.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.categoryLabel {
|
|
flex: 1;
|
|
}
|
|
|
|
.categoryCount {
|
|
background: var(--bg-tertiary, #e9ecef);
|
|
color: var(--text-secondary, #666);
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 10px;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
/* Node Items */
|
|
.nodeItem {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.5rem 0.75rem;
|
|
margin-bottom: 0.25rem;
|
|
border-radius: 6px;
|
|
cursor: grab;
|
|
transition: background 0.15s;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.nodeItem:hover {
|
|
background: var(--bg-hover, #e9ecef);
|
|
}
|
|
|
|
.nodeItem:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.nodeItemIcon {
|
|
flex-shrink: 0;
|
|
width: 28px;
|
|
height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
margin-right: 0.75rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.nodeItemInfo {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.nodeItemLabel {
|
|
display: block;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--text-primary, #333);
|
|
}
|
|
|
|
.nodeItemDesc {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary, #666);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Loading / Error */
|
|
.loading,
|
|
.error {
|
|
padding: 2rem;
|
|
text-align: center;
|
|
color: var(--text-secondary, #666);
|
|
}
|
|
|
|
.error {
|
|
color: var(--danger-color, #dc3545);
|
|
}
|
|
|
|
.retryButton {
|
|
margin-top: 0.75rem;
|
|
padding: 0.5rem 1rem;
|
|
background: var(--primary-color, #007bff);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.retryButton:hover {
|
|
background: var(--primary-hover, #0056b3);
|
|
}
|
|
|
|
.spinner {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* =============================================================================
|
|
CANVAS
|
|
============================================================================= */
|
|
|
|
.canvas {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
background: var(--canvas-bg, #fafafa);
|
|
}
|
|
|
|
.canvasHeader {
|
|
flex-shrink: 0;
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid var(--border-color, #e0e0e0);
|
|
background: var(--bg-primary, #fff);
|
|
}
|
|
|
|
.canvasTitle {
|
|
margin: 0;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary, #666);
|
|
}
|
|
|
|
.canvasArea {
|
|
flex: 1;
|
|
padding: 2rem;
|
|
min-height: 400px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.canvasDropZone {
|
|
position: relative;
|
|
min-height: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-image: radial-gradient(circle, var(--border-color, #e0e0e0) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.canvasPlaceholder {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
color: var(--text-tertiary, #999);
|
|
border: 2px dashed var(--border-color, #dee2e6);
|
|
border-radius: 8px;
|
|
padding: 2rem 3rem;
|
|
}
|
|
|
|
.canvasPlaceholder p {
|
|
margin: 0.25rem 0;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Canvas Nodes */
|
|
.canvasNode {
|
|
position: absolute;
|
|
border-radius: 8px;
|
|
border: 2px solid;
|
|
cursor: grab;
|
|
overflow: visible;
|
|
}
|
|
|
|
.canvasNode:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.canvasNodeSelected {
|
|
box-shadow: 0 0 0 2px var(--primary-color, #007bff);
|
|
}
|
|
|
|
.canvasNodeContent {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
padding: 0.4rem 0.6rem;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.canvasNodeIcon {
|
|
flex-shrink: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.canvasNodeText {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.15rem;
|
|
}
|
|
|
|
.canvasNodeTitle {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--text-primary, #333);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
cursor: text;
|
|
}
|
|
|
|
.canvasNodeTitle:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.canvasNodeComment {
|
|
font-size: 0.7rem;
|
|
color: var(--text-tertiary, #999);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
cursor: text;
|
|
min-height: 1em;
|
|
}
|
|
|
|
.canvasNodeComment:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.canvasNodeInput {
|
|
width: 100%;
|
|
padding: 0.15rem 0.25rem;
|
|
font-size: 0.875rem;
|
|
border: 1px solid var(--primary-color, #007bff);
|
|
border-radius: 4px;
|
|
outline: none;
|
|
}
|
|
|
|
/* Connection Handles */
|
|
.handle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: var(--bg-primary, #fff);
|
|
border: 2px solid var(--border-color, #666);
|
|
cursor: crosshair;
|
|
z-index: 2;
|
|
}
|
|
|
|
.handle:hover,
|
|
.handleConnectable {
|
|
border-color: var(--primary-color, #007bff);
|
|
background: var(--primary-color, #007bff);
|
|
}
|
|
|
|
.handleInput {
|
|
cursor: copy;
|
|
}
|
|
|
|
/* Node Config Panel */
|
|
.nodeConfigPanel {
|
|
padding: 1rem;
|
|
background: var(--bg-primary, #fff);
|
|
border-left: 1px solid var(--border-color, #e0e0e0);
|
|
width: 280px;
|
|
flex-shrink: 0;
|
|
overflow-y: auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.nodeConfigPanel h4 {
|
|
margin: 0 0 0.75rem 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.nodeConfigPanel label {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary, #666);
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.nodeConfigPanel input[type='text'],
|
|
.nodeConfigPanel input[type='number'],
|
|
.nodeConfigPanel select,
|
|
.nodeConfigPanel textarea {
|
|
width: 100%;
|
|
padding: 0.4rem;
|
|
font-size: 0.875rem;
|
|
border: 1px solid var(--border-color, #e0e0e0);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.nodeConfigPanel textarea {
|
|
min-height: 60px;
|
|
}
|
|
|
|
.nodeConfigPanel button {
|
|
margin-top: 0.5rem;
|
|
padding: 0.4rem 0.75rem;
|
|
font-size: 0.8rem;
|
|
background: var(--primary-color, #007bff);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Form fields editor (input.form) */
|
|
.formFieldsList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.formFieldRow {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
padding: 0.5rem;
|
|
background: var(--bg-secondary, #f8f9fa);
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-color, #e0e0e0);
|
|
}
|
|
|
|
.formFieldRowHeader {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.formFieldDragHandle {
|
|
flex-shrink: 0;
|
|
padding: 0.25rem;
|
|
cursor: grab;
|
|
color: var(--text-tertiary, #999);
|
|
align-self: stretch;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.formFieldDragHandle:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.formFieldDragHandle:hover {
|
|
color: var(--text-secondary, #666);
|
|
}
|
|
|
|
.formFieldInputs {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.formFieldRowFooter {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.formFieldRequiredLabel {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary, #666);
|
|
cursor: pointer;
|
|
}
|