eomsangdonandClaude Opus 5.5
3dddb53997
- M02_DF_Entry.ts · .css 지움(아무도 안 부름) · Paper · 상세 내용 틀이 쓰던 꾸밈 18 규칙은 M02_DF_Paper.css 로 옮김 - Paper 의 시험 로직(DF-) 받기 지움 — 다른 로직은 부르는 쪽 logics 로만 - 패널: 머리 「접기」 · 띠 「흐름도 ▸」 → 「흐름도」 단추 하나(펼치면 머리 · 접으면 띠 · aria-expanded) · 접기 전 너비 기억(펴면 그 너비) - 끌기 손잡이: 세로 막대 + 가운데 잡이 늘 보임 · 올리면 강조 - typecheck · DataFlow 전부 검사 초록 · 시험 10 통과 · ORCA: 단추 머리 ↔ 띠 · onResize 560 → 40 → 560 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ly2oHAaTDYRjcniAmHR81z
173 lines
3.3 KiB
CSS
173 lines
3.3 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: -5px;
|
|
z-index: 2;
|
|
width: 10px;
|
|
cursor: col-resize;
|
|
touch-action: none;
|
|
background: color-mix(in srgb, var(--color-border) 70%, transparent);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.m02-dfp__grip::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 4px;
|
|
height: 40px;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 2px;
|
|
background: var(--color-text-muted);
|
|
}
|
|
|
|
.m02-dfp__grip:hover,
|
|
.m02-dfp__grip:focus-visible,
|
|
.m02-dfp.is-resizing .m02-dfp__grip {
|
|
background: color-mix(in srgb, var(--color-accent) 40%, transparent);
|
|
outline: none;
|
|
}
|
|
|
|
.m02-dfp__grip:hover::after,
|
|
.m02-dfp__grip:focus-visible::after,
|
|
.m02-dfp.is-resizing .m02-dfp__grip::after {
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
.m02-dfp.is-resizing {
|
|
user-select: none;
|
|
}
|
|
|
|
/* 접기 = 얇은 띠 — 같은 「흐름도」 단추를 세로로 */
|
|
.m02-dfp__strip {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding: var(--spacing-8) 0;
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
/* 공용 작은 단추 크기는 그대로 — 글 방향만 세로 */
|
|
.m02-dfp__strip .m02-dfp__toggle {
|
|
writing-mode: vertical-rl;
|
|
}
|
|
|
|
.m02-dfp__toggle[aria-expanded="true"] {
|
|
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);
|
|
}
|
|
}
|