Files
Aislo/A00_Common/design/design_page.css
T
eomsangdonandClaude Opus 5.5 76f74037af feat(499-1 좌측 패널 하이라이트): 닫힌 패널 안 엶 · 카드 폄 + 열 때 고른 줄 · 우클릭 [추가] 포장도 바로 · B06 평면 겹침 기준 main 전체 — 요구 298-4 · 298-6 · 300 E2 · E3 · 304 E1
- onReveal = 사용자 고름이면 「구조물 배치」 카드 폄만 · revealLeft 지움(부르는 열네 길 그대로)
- 좌측 패널 열림 알림(workflow_layout onOptionsOpenChange) → 고른 목록 줄 · 강조 상자로 한 번 밂
- addsAtOnce = 등록부 기본값 뒤 필수 빈칸만 봄 · 포장 폼만 갈래 지움(물넘이 걸침 = 확인창 그대로)
- design_page.css 횡단 보기 가운데 칸 position: static · 평면 z 4 그대로
- 시험 398_1 뒤집음 · 116 · 126 포장 바로 추가

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-20 20:25:44 +09:00

164 lines
4.9 KiB
CSS

/* 한 페이지 두 보기(계획서 24-3a · 24-3b) — 감싸는 칸은 자리를 차지하지 않아(display: contents)
진행 단계 틀이 예전처럼 아울렛에 바로 붙은 것과 같게 놓인다. 숨긴 보기만 빠진다. */
.design-page,
.design-page__view,
.design-page__profile {
display: contents;
}
.design-page__view[hidden] {
display: none;
}
/* 가운데 = 위 칸(보기마다 다름) + 아래 종단도 한 벌. 종단 보기에서 종단도는 평면(노선 편집) 위에
떠 있는 판(absolute · 평면은 전체 영역 · 345-5)이고, 횡단 보기에서는 카드 칸 아래 흐름에 선다. */
.design-page__main {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 0;
overflow: hidden;
}
.design-page__center {
position: relative;
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
.design-page__center > .design-page__view > * {
flex: 1 1 auto;
min-height: 0;
}
.design-page__main[data-view="cross"] > .design-page__profile > .b05-route-profile {
position: relative;
flex: none;
}
/* 횡단 보기 평면 겹침 기준 = main 전체(위 칸 + 종단 판) — 종단 판 크기와 무관 · 넘침 없음(499-1) */
.design-page__main[data-view="cross"] > .design-page__center {
position: static;
}
/* 새 창으로 뺀 종단 하단 패널(계획서 54-35) — 창 전체를 채움 · 접기 손잡이 · 높이 끌기는 감춤. */
.b05-route-profile.is-popout {
position: relative;
height: 100dvh;
}
.b05-route-profile.is-popout > :not(.b05-route-profile__content) {
display: none;
}
.b05-route-profile__tools > .b05-route-profile__popout {
padding: var(--btn-bar-padding);
font-size: var(--btn-bar-font-size);
}
/* 유토곡선 · 배수유역 판 [창 분할](계획서 325-3) — 종단 [창 분할]과 같은 양식 · 유토는 판 좌상단에 띄움. */
.b05-subpanel__popout {
flex: none;
padding: var(--btn-bar-padding);
font-size: var(--btn-bar-font-size);
}
.b05-profile__masshaul-overlay > .b05-subpanel__popout {
position: absolute;
top: 4px;
left: var(--spacing-8);
/* 고정 Y축(z5 · 불투명) 위 — 아래면 축 띠에 가려짐 */
z-index: 6;
}
/* 새 창으로 뗀 유토곡선 · 배수유역 판 — 창 전체를 채움 · 높이 · 폭 끌기와 접기 손잡이는 감춤. */
.b05-profile__masshaul-overlay.is-popout,
.b05-drainage.is-popout {
position: relative;
width: 100%;
max-width: none;
height: 100dvh;
}
.b05-profile__masshaul-overlay.is-popout > .ui-resizer,
.b05-drainage.is-popout > .ui-resizer,
.b05-drainage.is-popout > .ui-workflow-overlay__handle {
display: none;
}
/* 횡단 조정(카드 조정창 사본 · 폼 칸에 옮겨 붙은 행)은 횡단 보기 몫 — 종단 보기에서는 한 벌 폼
안에서 가린다(패널 뿌리 클래스가 보기를 따라 바뀐다). */
.b05-route__panel .b06-adjust-dock,
.b05-route__panel [class*="b06-structure-panel__struct--"] {
display: none;
}
/* 횡단 보기 위 평면 겹침 패널(요구 258 · 263 · `design_plan_peek`) — 카드 칸 위에 뜸(자리 안 차지) ·
닫히면 손잡이만 위 가운데 · 열면 처음 높이 32 %(160 px 아래로 안 감) · 아래 끝 끌어 조절 · 조작은 B05 평면 그대로라
단추 줄 · 안내 · 상태줄 등만 감춤. */
.design-plan-peek {
position: absolute;
z-index: 4;
top: 0;
right: 0;
left: 0;
height: 0;
pointer-events: none;
}
.design-plan-peek.is-open {
height: var(--design-plan-peek-height, max(32%, 160px)); /* 종단 판 펼친 B06 = 칸이 낮음 */
}
/* 높이 끌기 손잡이 = 패널 아래 끝(공용 세로 손잡이는 위 끝) · 열렸을 때만 */
.design-plan-peek > .ui-resizer {
top: auto;
bottom: -3px;
display: none;
pointer-events: auto;
}
.design-plan-peek.is-open > .ui-resizer {
display: block;
}
.design-plan-peek__body {
display: none;
height: 100%;
border-bottom: 1px solid var(--panel-handle-border, var(--color-border));
background: var(--color-surface);
box-shadow: var(--shadow-lg);
pointer-events: auto;
}
.design-plan-peek.is-open > .design-plan-peek__body {
display: flex;
}
.design-plan-peek__note {
margin: auto;
color: var(--color-text-secondary);
}
/* 손잡이 = 패널 아래 가장자리 가운데(위로 접힘) — 공용 bottom 손잡이를 위아래 뒤집음. */
.design-plan-peek > .ui-workflow-overlay__handle--bottom {
top: 100%;
border-top: 0;
border-bottom: 1px solid var(--panel-handle-border, var(--color-border));
border-radius: 0 0 var(--radius-buttons) var(--radius-buttons);
}
.design-plan-peek .b05-routeedit__tools,
.design-plan-peek .b05-routeedit__hint,
.design-plan-peek .b05-routeedit__info,
.design-plan-peek .b05-routeedit__measure,
.design-plan-peek .b05-routeedit__side-wrap,
.design-plan-peek .b05-routeedit__label,
.design-plan-peek .b05-contourlock {
display: none;
}