101 lines
2.0 KiB
CSS
101 lines
2.0 KiB
CSS
.custom-node {
|
||
background: white;
|
||
border: 2px solid #ddd;
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
min-width: 150px;
|
||
max-width: 300px; /* 限制节点不要太长 */
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.custom-node.selected {
|
||
border-color: #1677ff;
|
||
box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
|
||
}
|
||
|
||
.custom-node .node-handle {
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.custom-node:hover .node-handle {
|
||
opacity: 1;
|
||
}
|
||
|
||
.custom-node:hover .node-handle,
|
||
.node-handle.react-flow__handle-connecting {
|
||
opacity: 1;
|
||
}
|
||
|
||
.node-header {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.node-label {
|
||
font-weight: 600;
|
||
color: #333;
|
||
font-size: 12px; /* smaller title font */
|
||
flex: 0 0 120px; /* 固定宽度 100px，给按钮留更多空间 */
|
||
min-width: 0; /* allow truncation inside flex */
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
text-align: center;
|
||
}
|
||
|
||
.node-info {
|
||
font-size: 10px;
|
||
border-bottom: 1px solid #eee;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.info-item {
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.info-item .label {
|
||
color: #999;
|
||
}
|
||
|
||
.info-item .value {
|
||
color: #333;
|
||
}
|
||
|
||
.node-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.gen-btn {
|
||
background: #1677ff;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 1px 6px; /* 更小的按钮内边距 */
|
||
cursor: pointer;
|
||
font-size: 8px; /* 更小的文字 */
|
||
line-height: 1;
|
||
height: 20px;
|
||
flex-shrink: 0;
|
||
flex: 1;
|
||
opacity: 0.95;
|
||
transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, opacity 120ms ease;
|
||
outline: none; /* remove default focus outline */
|
||
}
|
||
|
||
.gen-btn:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.gen-btn:focus {
|
||
outline: none;
|
||
}
|
||
|
||
.gen-btn:active {
|
||
transform: translateY(1px) scale(0.995);
|
||
background-color: #0f62d6; /* slightly darker on press */
|
||
box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
|
||
} |