eomsangdonandClaude Opus 5.5
3c78322350
- 세로: 머리(제목 · 크게 보기 · 접기) · 실행 취소 · 다이어그램 · 상세 내용 · 원가 · 검증(접기) · 저장 단추 없음 - 왼쪽 가장자리 끌기 · 화살표 키 → onResize(px) · 마지막 너비 localStorage · 접기 = 얇은 띠 「흐름도 ▸」 - 크게 보기 = 같은 판을 화면 전체로 옮겨 끼움 · 닫으면 패널로(고친 것 그대로) · Esc · Ctrl+Z - 좁은 패널은 저절로 맞춤 바닥 0.5(한눈에) · 크게 보기는 0.9 — 다이어그램 opts.fitMin - 시험 test_m02_df_panel.py 2 통과 · typecheck · DataFlow 전부 검사 초록 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ly2oHAaTDYRjcniAmHR81z
152 lines
2.7 KiB
CSS
152 lines
2.7 KiB
CSS
/* 오른쪽 흐름도 패널 — 부르는 쪽 칸 안에서 100% */
|
|
.m02-dfp {
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 100%;
|
|
border-left: 1px solid var(--color-border);
|
|
background: var(--color-canvas);
|
|
}
|
|
|
|
.m02-dfp__open {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
min-width: 0;
|
|
padding: var(--spacing-8) var(--spacing-12) var(--spacing-12);
|
|
}
|
|
|
|
.m02-dfp__head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.m02-dfp__title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.m02-dfp__tools {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
/* 좁은 패널 — 다이어그램 판 높이를 패널에 맞춤 */
|
|
.m02-dfp .m02-dfdg__view {
|
|
height: max(320px, 45vh);
|
|
}
|
|
|
|
.m02-dfp__lock {
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.m02-dfp__cost > summary {
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
padding: var(--spacing-4) 0;
|
|
}
|
|
|
|
/* 왼쪽 가장자리 끌기 */
|
|
.m02-dfp__grip {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: -4px;
|
|
z-index: 2;
|
|
width: 8px;
|
|
cursor: col-resize;
|
|
touch-action: none;
|
|
}
|
|
|
|
.m02-dfp__grip:hover,
|
|
.m02-dfp__grip:focus-visible,
|
|
.m02-dfp.is-resizing .m02-dfp__grip {
|
|
background: color-mix(in srgb, var(--color-accent) 35%, transparent);
|
|
outline: none;
|
|
}
|
|
|
|
.m02-dfp.is-resizing {
|
|
user-select: none;
|
|
}
|
|
|
|
/* 접기 = 얇은 띠 */
|
|
.m02-dfp__strip {
|
|
width: 100%;
|
|
padding: var(--spacing-12) 0;
|
|
border: 0;
|
|
background: var(--color-surface);
|
|
color: var(--color-text-secondary);
|
|
font: inherit;
|
|
writing-mode: vertical-rl;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.m02-dfp__strip:hover,
|
|
.m02-dfp__strip:focus-visible {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.m02-dfp__strip[hidden],
|
|
.m02-dfp__open[hidden],
|
|
.m02-dfp__grip[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* 크게 보기 — 화면 전체 */
|
|
.m02-dfp-full {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
padding: var(--spacing-12) var(--spacing-16);
|
|
overflow: auto;
|
|
background: var(--color-canvas);
|
|
outline: none;
|
|
}
|
|
|
|
.m02-dfp-full__head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.m02-dfp-full__head strong {
|
|
flex: 1;
|
|
font-size: var(--text-body);
|
|
}
|
|
|
|
.m02-dfp-full__diagram .m02-dfdg__view {
|
|
height: max(420px, 60vh);
|
|
}
|
|
|
|
.m02-dfp-full__lower {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
|
|
gap: var(--spacing-16);
|
|
align-items: start;
|
|
}
|
|
|
|
.m02-dfp-full__lower h3 {
|
|
margin: 0 0 var(--spacing-8);
|
|
font-size: var(--text-body);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.m02-dfp-full__lower {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|