humainflow-web/src/app/layouts/flow-editor/flow-editor.css

75 lines
1.2 KiB
CSS

.flow-editor-main {
display: flex;
flex: 1 1 auto;
min-width: 0;
min-height: 0;
overflow: hidden;
background:
linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.96)),
radial-gradient(circle at top left, rgba(14, 165, 233, 0.08), transparent 24%);
}
.flow-editor-canvas-shell {
display: flex;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
flex-direction: column;
}
.flow-editor-canvas {
flex: 1 1 auto;
min-height: 0;
}
.flow-editor-assistant {
display: flex;
flex: 0 0 380px;
width: 380px;
min-width: 320px;
max-width: 420px;
height: 100%;
min-height: 0;
background: #fff;
overflow: hidden;
}
.flow-editor-empty {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
padding: 32px;
text-align: center;
color: #475569;
}
.flow-editor-empty h2 {
margin: 0;
font-size: 28px;
font-weight: 800;
color: #0f172a;
}
.flow-editor-empty p {
margin: 0;
max-width: 420px;
line-height: 1.5;
}
@media (max-width: 1100px) {
.flow-editor-main {
flex-direction: column;
}
.flow-editor-assistant {
flex: 0 0 auto;
width: 100%;
max-width: none;
min-width: 0;
height: 42vh;
}
}