eomsangdonandClaude Opus 5
05887b6a7e
- 21: 유토곡선 높이를 스크롤러 clientHeight 기준으로 — 스크롤바가 Y축 라벨을 덮던 문제 해소, overflow-x scroll 고정으로 높이 안정화 - 22: 절토·성토 요약 줄을 종단 열 안으로 — 배수유역도 좌측 구분선 25px 끊김 해소 - 23: 선택 토글 해제 — 종단·유토곡선 측점 재클릭/빈 곳 클릭, 사이드바 구조물 재클릭 시 해제(null 전파로 3D·그래프·목록·유역 강조 동기 해제) - 24: 좌측 제목 패널(B04~B07 공용) 우측 가장자리 강조색 라인 - 25: 접힌 손잡이 강조색 배경 틴트 — 닫힌 패널이 있음을 상시 표시 Playwright: 재클릭 1→0, 빈곳 클릭 0, 스크롤러 226=곡선 226, 구분선 간극 1px, 접힘 틴트 확인, 콘솔 오류 0. typecheck 통과. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
102 lines
3.5 KiB
CSS
102 lines
3.5 KiB
CSS
/* =============================================================================
|
|
* B05_wf2_Route_UI_Style_MassHaul.css
|
|
* B05 계획 유토곡선 2차 슬라이드 패널 전용 스타일.
|
|
*
|
|
* 곡선·범례·요약 자체의 스타일은 공용(`common_util_mass_haul.css`)이 이미 정의한다.
|
|
* 여기서는 종단면 패널 안에서 그것들이 놓이는 **자리**만 잡는다.
|
|
* ========================================================================== */
|
|
|
|
/* 본문 칸을 세로로 쌓아 그래프 스크롤러 아래에 손잡이가 붙게 한다.
|
|
오버레이의 절대배치 기준이기도 하다. */
|
|
.b05-route-profile__body-wrap {
|
|
position: relative;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 오버레이 서브패널 — 패널 바닥(접기 손잡이 위)에 붙어 종단도·테이블 위를 덮는다
|
|
(2026-08-04 사용자 확정). 높이는 위 경계 리사이저가 --b05-masshaul-height로 조절한다. */
|
|
.b05-profile__masshaul-overlay {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0; /* 손잡이는 표준 삼각형(중앙, z-index 6)이라 자리를 차지하지 않는다 */
|
|
left: 0;
|
|
z-index: 5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: var(--b05-masshaul-height, 280px);
|
|
border-top: 1px solid var(--color-border);
|
|
background: var(--color-surface-raised);
|
|
box-shadow: 0 -4px 12px rgb(0 0 0 / 18%);
|
|
}
|
|
|
|
/* 공용 리사이저는 절대배치라 오버레이 위 경계에 그대로 앉는다. */
|
|
.b05-profile__masshaul-overlay > .ui-resizer--vertical {
|
|
top: -3px;
|
|
}
|
|
|
|
.b05-profile__masshaul-bar {
|
|
display: flex;
|
|
flex: none;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8) var(--spacing-16);
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
/* 곡선 가로 스크롤러 — 종단 스크롤러와 scrollLeft를 동기화한다(JS). 세로는 잘라낸다.
|
|
스크롤바는 항상 표시(scroll) — auto면 생겼다 없어질 때 곡선 높이가 널뛰고,
|
|
clientHeight 기반 높이 계산도 함께 흔들린다. */
|
|
.b05-profile__masshaul-scroll {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow-x: scroll;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
/* 범례 오버레이 — 유토곡선 우상단에 절대배치(B06과 같은 문법). 요약 막대 아래에 앉힌다.
|
|
공용 범례(.b06-masshaul__legend)가 이미 absolute + right 배치라 top만 이 래퍼가 정한다. */
|
|
.b05-profile__masshaul-legend {
|
|
position: absolute;
|
|
top: 34px;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 3;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.b05-profile__masshaul-legend .b06-masshaul__legend {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.b05-profile__masshaul-bar .b06-masshaul__summary {
|
|
border-top: none;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.b05-profile__masshaul-empty {
|
|
padding: var(--spacing-8) var(--spacing-16);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
/* 2차 슬라이드 손잡이 — 다른 패널들과 **같은 표준 삼각형 손잡이**를 그대로 쓴다
|
|
(2026-08-04 사용자 지시). 패널 본문 바닥 중앙에 붙고, 오버레이(z-index 5) 위에 뜬다. */
|
|
.b05-profile__masshaul-handle {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
z-index: 6;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
/* 공용 손잡이는 부모 경계 밖(top: -24px) 절대배치로 만들어졌다 — 여기서는 래퍼가
|
|
자리를 잡으므로 흐름에 되돌린다. 크기·모양(64×24 삼각형)은 공용 규칙 그대로다. */
|
|
.b05-profile__masshaul-handle .ui-workflow-overlay__handle {
|
|
position: static;
|
|
transform: none;
|
|
margin: 0;
|
|
}
|