eomsangdon
8e8849e4ac
2026-08-29 사용자 지시(좌측 패널 항목 정리 — 배관 자리): - 길이·높이·기준측점 전/후 입력칸에 [－][＋] 묶음 추가(stepper). 눈금은 조정창과 같다(길이 1m·전후 0.5m·높이 0.1m). 래퍼 여백 0이라 2열 격자는 그대로다. - 형태·구조물 형식 행은 [횡단 조정] 사본에서 숨김 — 폼의 형태·구조와 중복. - 단 수·옵션 행은 고른 벽 쪽(유입구/유출구) 그룹으로 DOM 이식. 배선을 옮기지 않아 값·동기는 그대로고, 사본이 갈릴 때마다 다시 이식한다. - 유입구 '구조' 드롭다운에 조정창 형식(자동·집수정 I/ㄴ/ㄷ)을 병합. 고른 값이 정본 둘(inlet_type·inlet_structure)을 함께 정하고, B06에서는 유입측 형식 제어와 양방향으로 맞춘다. 형태·형식 연결은 미연결 상태 그대로 둔다. 검증(공용 브라우저): 유입구 스텝 5·유출구 4개, 구조 목록 6종 병합, 벽 선택 시 단 수·옵션이 유출구 그룹으로 이동(dock에는 높이·구간값만 남음). B05도 동일 폼이 정상 표시되고 [횡단 조정]은 뜨지 않음. typecheck 통과.
279 lines
7.6 KiB
CSS
279 lines
7.6 KiB
CSS
/* =============================================================================
|
||
* B05 구조물 서클마크·벌룬 오버레이 스타일.
|
||
*
|
||
* 종단 그래프(.b05-profile__chart) 위에 얹는 레이어다. 그래프 자체의 조작(측점선 끌기,
|
||
* 우클릭 메뉴)을 막지 않도록 레이어는 이벤트를 통과시키고, 마크·벌룬만 이벤트를 받는다.
|
||
* ========================================================================== */
|
||
|
||
/* 구조물 알약 레인 — 그래프 바로 아래 한 줄(2026-08-17 사용자 지시 1·3·6).
|
||
높이는 2행분 고정이고, 겹치지 않으면 알약이 세로 가운데에 놓인다. */
|
||
.b05-structure__lane {
|
||
position: relative;
|
||
overflow: visible;
|
||
z-index: 3;
|
||
}
|
||
|
||
/* 레인 왼쪽 Y축 띠 — 그래프 sticky Y축과 같은 폭·같은 배경으로 이어 붙여, 가로
|
||
스크롤된 알약이 축 값 영역으로 새 나가지 않게 덮는다(2026-08-17 사용자 지시 2). */
|
||
.b05-structure__axis {
|
||
position: sticky;
|
||
left: 0;
|
||
z-index: 5;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.b05-structure__axis-inner {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding-right: 6px;
|
||
overflow: hidden;
|
||
background: var(--color-surface-raised);
|
||
border-right: 1px solid var(--color-text-secondary);
|
||
color: var(--color-text-secondary);
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 알약 — 종류를 3자 이하 이름으로 보여 준다. 높이는 구 서클마크와 같은 20px. */
|
||
.b05-structure__mark {
|
||
position: absolute;
|
||
transform: translateX(-50%);
|
||
height: 24px;
|
||
min-width: 24px;
|
||
padding: 0 9px;
|
||
border-radius: 12px;
|
||
border: 1.5px solid currentColor;
|
||
background: var(--color-surface, #fff);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
cursor: grab;
|
||
pointer-events: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 혼자 있는 알약 — 겹치는 알약보다 30%만 키운다(2026-08-17 사용자 지시 1). */
|
||
.b05-structure__mark.is-solo {
|
||
height: 31px;
|
||
min-width: 31px;
|
||
padding: 0 12px;
|
||
border-radius: 16px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.b05-structure__mark:hover {
|
||
filter: brightness(0.92);
|
||
}
|
||
|
||
.b05-structure__mark.is-selected {
|
||
border-width: 3px;
|
||
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
|
||
}
|
||
|
||
.b05-structure__mark:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
/* 구간 띠 — 고른 동안에만 시~종점을 펼쳐 보여 준다. */
|
||
.b05-structure__band {
|
||
position: absolute;
|
||
height: 4px;
|
||
border-radius: 2px;
|
||
opacity: 0.55;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 값 벌룬 — 유토곡선 벌룬과 같은 결(테두리 도형 + 여러 줄 텍스트). */
|
||
/* 벌룬은 알약 위로 뜬다(2026-08-18) — 아래는 도면 테이블에 가린다. 전개 방향:
|
||
1행 알약 = 좌측 위(is-left), 2행 = 우측 위(is-right), 솔로 = 위 중앙(is-center). */
|
||
.b05-structure__balloon {
|
||
position: absolute;
|
||
z-index: 6;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
padding: 4px 8px;
|
||
border: 1.5px solid currentColor;
|
||
border-radius: 6px;
|
||
background: var(--color-surface, #fff);
|
||
box-shadow: 0 2px 6px rgb(0 0 0 / 18%);
|
||
font-size: 11px;
|
||
line-height: 1.35;
|
||
white-space: nowrap;
|
||
pointer-events: none;
|
||
z-index: 4;
|
||
}
|
||
|
||
.b05-structure__balloon.is-left {
|
||
/* 오른쪽 끝을 알약 기준점에 붙이고 왼쪽 위로 편다(+10px는 알약과 살짝 겹침 방지). */
|
||
transform: translateX(calc(-100% + 10px));
|
||
}
|
||
|
||
.b05-structure__balloon.is-right {
|
||
transform: translateX(-10px);
|
||
}
|
||
|
||
.b05-structure__balloon strong {
|
||
font-size: 11.5px;
|
||
}
|
||
|
||
.b05-structure__balloon-memo {
|
||
opacity: 0.7;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ── 계곡 통과 시설 부속 옵션 서브폼 (구조물 배치 폼 안, 2026-08-17 UI 개편) ──
|
||
* 배관·BOX암거·세월교·독립 기슭막이의 부속 옵션을 2열 격자로 담는다. */
|
||
.b05-drainage__facility {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* 2열 기본 격자 — 칸이 셋이면 세 번째가 다음 줄로 흐른다. */
|
||
.b05-structure__grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 6px;
|
||
}
|
||
|
||
.b05-structure__grid > .b05-route__field {
|
||
min-width: 0;
|
||
}
|
||
|
||
/* 유입구·유출구·날개벽 소그룹 상자. */
|
||
.b05-structure__group {
|
||
margin: 0;
|
||
padding: 6px 8px 8px;
|
||
border: 1px solid var(--border-color, #3a3f4a);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.b05-structure__group > legend {
|
||
padding: 0 4px;
|
||
font-size: 11px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.b05-structure__group-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* 구조물 배치 폼 본문 — 기본 2열(측점 행 등 전폭 항목은 아래에서 되돌린다). */
|
||
.b05-route__panel-section .b05-route__panel-body > .b05-route__field {
|
||
min-width: 0;
|
||
}
|
||
|
||
/* 측점 미입력 상태의 상세 옵션 잠금 — 입력 순서 가이드(2026-08-18 사용자 지시).
|
||
조작 차단은 disabled·inert가 맡고 여기서는 흐림만 그린다. */
|
||
.b05-structure__grid.is-locked,
|
||
.b05-drainage__facility.is-locked {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* 측점 그룹과 그 아래 옵션 나열을 가르는 선(2026-08-17 사용자 지시 2). */
|
||
.b05-structure__divider {
|
||
width: 100%;
|
||
height: 0;
|
||
margin: 2px 0;
|
||
border: 0;
|
||
border-top: 1px solid var(--color-border, #3a3f4a);
|
||
}
|
||
|
||
/* 시작·기준·종료 측점 = 3행. 한 행은 [라벨][측점][+거리] 가로 배치
|
||
* (2026-08-17 사용자 지시 2). */
|
||
.b05-structure__position-row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.b05-structure__position-row > .b05-route__field {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.b05-structure__position-row > .b05-route__field > span {
|
||
flex: 0 0 72px;
|
||
}
|
||
|
||
.b05-structure__position-row .b05-structure__station-pair {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* 측점 입력이 형식에 안 맞을 때(예: "3+18.0"도 숫자도 아님) 칸을 붉힌다. */
|
||
.b05-route__field input.is-invalid {
|
||
border-color: #e05b5b;
|
||
background: rgba(224, 91, 91, 0.08);
|
||
}
|
||
|
||
/* 측점 범위(계산 표시) — C군 등 길이 옵션 기반 구간 타입. 입력 칸이 아니라 기준
|
||
* 측점 + 길이로 계산된 "시작 ~ 종료"를 보여만 준다(2026-08-19 사용자 지시).
|
||
* 글자 크기는 기준 측점 입력 칸과 동일(크롬 input 기본 13.333px — 패널 입력에
|
||
* 별도 font-size가 없어 이 값으로 그려진다), 굵기만 유지(2026-08-19 지시 7). */
|
||
.b05-structure__position-row > .b05-route__field > .b05-structure__range-value {
|
||
flex: 1;
|
||
min-width: 0;
|
||
font-size: 13.3333px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 측점번호 + 잔여거리 두 칸 입력(2026-08-17 통합 — 구 비정규 측점 UI와 같은 방식). */
|
||
.b05-structure__station-pair {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
|
||
.b05-structure__station-pair input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* 숫자 칸 + [－][＋] 묶음(2026-08-29 사용자 지시 2) — 유입구·유출구 폼에서도
|
||
조정창처럼 눈금으로 고친다. 여백 0이라 기존 2열 격자 폭·간격은 그대로다. */
|
||
.b05-structure__stepper {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: stretch;
|
||
margin: 0;
|
||
padding: 0;
|
||
gap: 2px;
|
||
}
|
||
|
||
.b05-structure__stepper > input {
|
||
min-width: 0;
|
||
flex: 1 1 auto;
|
||
}
|
||
|
||
.b05-structure__step {
|
||
flex: none;
|
||
width: 20px;
|
||
padding: 0;
|
||
border: 1px solid var(--color-border, #3a3f4a);
|
||
border-radius: var(--radius-inputs, 4px);
|
||
background: var(--color-surface);
|
||
color: var(--color-text-body);
|
||
font-size: 11px;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.b05-structure__step:hover {
|
||
border-color: var(--color-royal-amethyst, rgb(109 40 217));
|
||
}
|