다중 시간봉 전략 설정기능 추가
This commit is contained in:
Macbook
@@ -92,12 +92,136 @@
|
||||
.se-list-editor {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin: 8px 12px 12px;
|
||||
padding: 12px;
|
||||
padding-bottom: 28px;
|
||||
border: 1px dashed var(--se-border);
|
||||
border-radius: 10px;
|
||||
background: color-mix(in srgb, var(--se-center-bg) 92%, var(--se-accent) 8%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
align-items: stretch;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
/* App.css .sp-dropzone 와 중복 flex/overflow 정리 */
|
||||
.se-list-editor.sp-dropzone {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
padding-bottom: 28px;
|
||||
}
|
||||
|
||||
.se-list-editor--over {
|
||||
border-color: var(--se-node-start-border, var(--se-gold));
|
||||
background: color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 8%, var(--se-center-bg));
|
||||
}
|
||||
|
||||
.sp-start-section {
|
||||
border: 1px solid var(--se-node-start-border);
|
||||
border-radius: 10px;
|
||||
background: var(--se-node-start-bg);
|
||||
box-shadow: 0 0 14px color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 14%, transparent);
|
||||
flex-shrink: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sp-start-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--se-node-start-border) 70%, transparent);
|
||||
background: color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 8%, transparent);
|
||||
}
|
||||
|
||||
.sp-start-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--se-node-start-accent, var(--se-gold));
|
||||
box-shadow: 0 0 6px color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 50%, transparent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sp-start-label {
|
||||
font-weight: 800;
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--se-node-start-accent, var(--se-gold));
|
||||
}
|
||||
|
||||
.sp-start-tf {
|
||||
font-size: 0.72rem;
|
||||
padding: 3px 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid color-mix(in srgb, var(--se-node-start-border) 80%, transparent);
|
||||
background: color-mix(in srgb, var(--se-bg) 75%, transparent);
|
||||
color: var(--se-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sp-start-del {
|
||||
margin-left: auto;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: color-mix(in srgb, var(--se-danger) 15%, transparent);
|
||||
color: var(--se-danger);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sp-start-body {
|
||||
padding: 10px 12px 12px;
|
||||
min-height: 56px;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
/* 목록형: START 내부 조건 트리 전체 표시 */
|
||||
.se-list-editor .sp-tree-node {
|
||||
flex-shrink: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.se-list-editor .sp-node-label {
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: unset;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.se-list-editor .sp-node-children {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.se-list-editor .sp-cond-editor {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.se-list-editor .sp-cond-row4 {
|
||||
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
|
||||
}
|
||||
|
||||
.sp-start-body--over {
|
||||
background: color-mix(in srgb, var(--se-accent) 10%, transparent);
|
||||
}
|
||||
|
||||
.sp-drop-empty--section {
|
||||
margin: 0;
|
||||
padding: 16px 8px;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.se-btn {
|
||||
@@ -394,16 +518,73 @@
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.se-center-work--list .se-list-editor {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.se-center-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
padding: 8px 12px 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.se-start-combine {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.se-start-combine-label {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: var(--se-text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.se-start-combine-toggle {
|
||||
display: inline-flex;
|
||||
border: 1px solid var(--se-border);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background: var(--se-btn-bg);
|
||||
}
|
||||
|
||||
.se-start-combine-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--se-text-muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
padding: 5px 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.se-start-combine-btn--and.se-start-combine-btn--on {
|
||||
background: color-mix(in srgb, #4caf50 22%, transparent);
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.se-start-combine-btn--or.se-start-combine-btn--on {
|
||||
background: color-mix(in srgb, #2196f3 22%, transparent);
|
||||
color: #2196f3;
|
||||
}
|
||||
|
||||
.se-start-combine-btn:hover:not(.se-start-combine-btn--on) {
|
||||
background: color-mix(in srgb, var(--se-accent) 10%, transparent);
|
||||
color: var(--se-text);
|
||||
}
|
||||
|
||||
.se-signal-tabs { display: flex; gap: 6px; }
|
||||
|
||||
.se-signal-tab {
|
||||
@@ -500,6 +681,35 @@
|
||||
box-shadow: inset 0 -2px 0 var(--se-tab-active);
|
||||
}
|
||||
|
||||
.se-canvas-auto-layout {
|
||||
margin: 8px 10px 0 0;
|
||||
}
|
||||
|
||||
.se-canvas-auto-layout-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: 1px solid var(--se-border);
|
||||
border-radius: 8px;
|
||||
background: var(--se-toolbar-bg);
|
||||
color: var(--se-text-muted);
|
||||
cursor: pointer;
|
||||
transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
|
||||
box-shadow: 0 2px 8px color-mix(in srgb, var(--se-bg) 40%, transparent);
|
||||
}
|
||||
|
||||
.se-canvas-auto-layout-btn:hover {
|
||||
background: color-mix(in srgb, var(--se-accent) 12%, var(--se-toolbar-bg));
|
||||
color: var(--se-tab-active);
|
||||
border-color: color-mix(in srgb, var(--se-accent) 35%, var(--se-border));
|
||||
}
|
||||
|
||||
.se-canvas-auto-layout-btn:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.se-canvas-wrap--pan .react-flow__pane {
|
||||
cursor: grab;
|
||||
}
|
||||
@@ -652,17 +862,62 @@
|
||||
|
||||
.se-flow-node--start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 14px;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 6px;
|
||||
padding: 8px 10px;
|
||||
min-width: 150px;
|
||||
background: var(--se-node-start-bg);
|
||||
border: 1px solid var(--se-node-start-border);
|
||||
color: var(--se-text-muted);
|
||||
box-shadow: 0 0 18px color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 20%, transparent);
|
||||
}
|
||||
.se-flow-node--start.se-flow-node--sell-mode {
|
||||
background: linear-gradient(145deg, color-mix(in srgb, var(--se-sell) 18%, transparent), color-mix(in srgb, var(--bg) 92%, transparent));
|
||||
border-color: color-mix(in srgb, var(--se-sell) 42%, transparent);
|
||||
box-shadow: 0 0 18px color-mix(in srgb, var(--se-sell) 16%, transparent);
|
||||
}
|
||||
.se-flow-start-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.se-flow-start-label {
|
||||
font-weight: 700;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.04em;
|
||||
flex-shrink: 0;
|
||||
color: var(--se-node-start-accent, var(--se-gold));
|
||||
}
|
||||
.se-flow-start-tf {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 72px;
|
||||
font-size: 0.65rem;
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid color-mix(in srgb, var(--se-node-start-border) 80%, transparent);
|
||||
background: color-mix(in srgb, var(--se-bg) 70%, transparent);
|
||||
color: var(--se-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
.se-flow-start-tf:focus {
|
||||
outline: none;
|
||||
border-color: var(--se-accent);
|
||||
}
|
||||
.se-flow-del--start {
|
||||
position: static;
|
||||
flex-shrink: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.se-flow-start-dot {
|
||||
width: 8px; height: 8px; border-radius: 50%;
|
||||
background: var(--se-text-dim);
|
||||
box-shadow: 0 0 6px color-mix(in srgb, var(--se-text-dim) 60%, transparent);
|
||||
background: var(--se-node-start-accent, var(--se-gold));
|
||||
box-shadow: 0 0 8px color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 55%, transparent);
|
||||
}
|
||||
|
||||
.se-flow-node--logic {
|
||||
@@ -1000,6 +1255,11 @@
|
||||
color: var(--se-sell);
|
||||
font-weight: 700;
|
||||
}
|
||||
.se-formula-tf {
|
||||
color: var(--se-accent);
|
||||
font-weight: 700;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.se-formula-logic {
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.03em;
|
||||
|
||||
Reference in New Issue
Block a user