eomsangdonandClaude Opus 5.5
e2b3a87828
- 줌 [+ − ⤢] = 아이콘 단추 22 · 상세 [칸에 넣기] = 단추 22 · [여럿] = 켜기 칩 22 · 사이 금 지움 - 구조물 조정창 십자 · 9키 · 단 수 [－][＋] = 아이콘 단추(선) 22 · ✕ = 고스트 · 옵션 연동 · 경사 = 켜기 칩 24(유입 · 유출 칸 꼴은 그대로) - 카드 머리 단면유형 = 배지(정보) 20 · 구조물 = 배지(강조) 20 - 알림 칩 = 단추(고스트) 20(색만 경고 / 정보) · 측점 목록 날 단추 = 단추(고스트) 20 - 날 details 넷(변수 위치 안내 · 상세값 · 다른 프로젝트 불러오기 · 횡단 조정) = 접이 구역(ui-collapsible) · 가이드 장면 선택자 `details.` 뗌 - 측점 없는 구조물 줄 · 표준 미반영 알림 = 띠 알림(경고) — 날 색 #fff8e6 · #e0b872 · #7a5a12 · #8a6a22 · 폴백 #d98324 지움 - 빈 그림 자리 = 빈 상태 · 선 치수 글 옛 보라 이름 → --color-accent - 흉내 DOM 시험 · 서버 Node 묶음이 끄는 파일이라 부품 함수 대신 클래스 · data-size 계약 + 부품 CSS 직접 실음(묶음 셋 빌드 정상) - 시험 넷 기대 고침 — 108(닫기 클래스) · 179-1(줌 사이 금 규칙 없음) · 196-1(칩 클래스) · 207-1(칩 반경 = 부품) - 그대로 둔 것 — 수량 산출표(b06-detail__qtable · B07 산출서 병합 칸 · 세로선 = 부품 표에 없는 꼴) · 조정창 고르기 · 암 절토 칸(작은 단 없음) · 조정창 · ⋯ · 측점 목록 떠 있는 판 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
390 lines
12 KiB
CSS
390 lines
12 KiB
CSS
/* 구조물 위치 조정 오버레이 창. */
|
||
/* 구조물 조정 오버레이 — **위쪽 기준**으로 붙인다(2026-08-24 사용자). 아래를 기준으로
|
||
* 두면 높이가 낮은 횡단도에서 창이 카드 위로 넘쳐 **제목·값 줄이 잘린다**. 카드 안에
|
||
* 넘칠 만큼 길어지면 창 안에서 스크롤한다. z-index는 카드 안 오버레이 중 최상단. */
|
||
.b06-structure-panel {
|
||
position: absolute;
|
||
/* 좌측 상단 면적표를 걷어(379-2) 위에서 바로 시작. 아래 기준이 아닌 까닭 = 낮은 횡단도에서 잘림. */
|
||
top: var(--spacing-8);
|
||
/* Y축·눈금 라벨 띠(CROSS_PAD.left)를 덮지 않게 그림 영역 안쪽에서 시작한다. */
|
||
left: calc(var(--b06-plot-left, 58px) + var(--spacing-8));
|
||
z-index: 20;
|
||
display: flex;
|
||
max-height: calc(100% - 2 * var(--spacing-8));
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
padding: var(--spacing-8);
|
||
border: 1px solid var(--color-danger);
|
||
border-radius: var(--radius-inputs);
|
||
background: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
|
||
overflow-y: auto;
|
||
overscroll-behavior: contain;
|
||
}
|
||
|
||
/* 연동·경사 — 한 행에 버튼 두 개(2026-08-24 사용자). 켜짐은 채운 색으로 구분한다. */
|
||
.b06-structure-panel__controls.b06-structure-panel__toggles {
|
||
display: flex;
|
||
gap: 2px;
|
||
}
|
||
|
||
.b06-structure-panel.is-hidden,
|
||
.b06-structure-panel__value span.is-hidden,
|
||
.b06-structure-panel__btn.is-hidden,
|
||
.b06-structure-panel__buttons.is-hidden,
|
||
.b06-structure-panel__struct.is-hidden {
|
||
display: none;
|
||
}
|
||
|
||
.b06-structure-panel__head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-8);
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.b06-structure-panel__title {
|
||
color: var(--color-danger);
|
||
font-size: var(--text-caption);
|
||
font-weight: var(--font-weight-medium);
|
||
}
|
||
|
||
.b06-structure-panel__value {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
color: var(--color-text-secondary);
|
||
font-size: var(--text-caption);
|
||
}
|
||
|
||
/* 그림 끌기 미리 보기(계획서 24-4a) — 끄는 동안만 한 줄. */
|
||
.b06-structure-panel__drag {
|
||
color: var(--color-primary);
|
||
font-weight: var(--font-weight-medium);
|
||
}
|
||
|
||
.b06-structure-panel__drag:empty {
|
||
display: none;
|
||
}
|
||
|
||
.b06-structure-panel__controls.b06-structure-panel__buttons {
|
||
display: grid;
|
||
grid-template-areas: ". up ." "left reset right" ". down equal";
|
||
justify-content: center;
|
||
gap: 2px;
|
||
}
|
||
|
||
.b06-structure-panel__btn--up {
|
||
grid-area: up;
|
||
}
|
||
.b06-structure-panel__btn--down {
|
||
grid-area: down;
|
||
}
|
||
.b06-structure-panel__btn--left {
|
||
grid-area: left;
|
||
}
|
||
.b06-structure-panel__btn--right {
|
||
grid-area: right;
|
||
}
|
||
.b06-structure-panel__btn--reset {
|
||
grid-area: reset;
|
||
}
|
||
.b06-structure-panel__btn--equal {
|
||
grid-area: equal;
|
||
}
|
||
|
||
.b06-structure-panel__hval {
|
||
box-sizing: border-box;
|
||
width: 3.5em;
|
||
text-align: center;
|
||
color: var(--color-text-body);
|
||
font-size: var(--text-caption);
|
||
align-self: center;
|
||
}
|
||
|
||
.b06-structure-panel__struct {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 2px;
|
||
color: var(--color-text-secondary);
|
||
font-size: var(--text-caption);
|
||
}
|
||
|
||
.b06-structure-panel__label {
|
||
color: var(--color-text-muted);
|
||
font-size: var(--text-caption);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.b06-structure-panel__controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
}
|
||
|
||
/* 집수정 조작 = 9키(3×3, 2026-08-22 사용자) — 십자 축 이동 · 모서리 크기 · 중앙 초기화.
|
||
기슭막이 십자와 같은 폭·버튼 크기로 맞춰 행열이 어긋나지 않게 한다. */
|
||
.b06-structure-panel__controls.b06-structure-panel__basin-buttons {
|
||
display: grid;
|
||
grid-template-areas:
|
||
"nw up ne"
|
||
"left reset right"
|
||
"sw down se";
|
||
justify-content: center;
|
||
gap: 2px;
|
||
}
|
||
|
||
.b06-structure-panel__btn--nw {
|
||
grid-area: nw;
|
||
}
|
||
|
||
.b06-structure-panel__btn--ne {
|
||
grid-area: ne;
|
||
}
|
||
|
||
.b06-structure-panel__btn--sw {
|
||
grid-area: sw;
|
||
}
|
||
|
||
.b06-structure-panel__btn--se {
|
||
grid-area: se;
|
||
}
|
||
|
||
/* 횡단도 안 조정창 = 제목 · 단추만(108-1) — 줄 이름은 좌측 사본에만. */
|
||
.b06-structure-panel:not(.b06-structure-panel--dock) .b06-structure-panel__label {
|
||
display: none;
|
||
}
|
||
|
||
.b06-structure-panel__select {
|
||
flex: 1;
|
||
padding: 1px var(--spacing-4);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-inputs);
|
||
background: var(--color-surface);
|
||
color: var(--color-text);
|
||
font-size: var(--text-caption);
|
||
}
|
||
|
||
/* 단추 = 부품 아이콘 단추(선) 22 · 닫기 ✕ 만 고스트(553-2) */
|
||
.b06-structure-panel__close {
|
||
border-color: transparent;
|
||
background: transparent;
|
||
}
|
||
|
||
.b06-cross-card__zoom {
|
||
position: absolute;
|
||
top: var(--spacing-4);
|
||
right: var(--spacing-4);
|
||
z-index: 2;
|
||
display: flex;
|
||
overflow: hidden;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-inputs);
|
||
background: color-mix(in srgb, var(--color-surface-raised) 88%, transparent);
|
||
}
|
||
|
||
/* 고른 선 치수(137-2) — 상세 모달 줌 막대 왼쪽(179-1) · 두 줄(151-1) · 카드는 아래 띠 공용 칸(370-3). */
|
||
.b06-cross-card__line-dims {
|
||
align-self: center;
|
||
padding: 1px var(--spacing-4);
|
||
color: var(--color-accent);
|
||
font-size: 0.75rem;
|
||
line-height: 1.25;
|
||
text-align: right;
|
||
white-space: pre-line;
|
||
}
|
||
|
||
.b06-cross-card__line-dims[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
/* 줌 단추 = 부품 아이콘 단추 22 · [칸에 넣기] = 단추 22 · [여럿] = 켜기 칩 22(553-2) — 부품 display 가 hidden 을 덮음 */
|
||
.b06-cross-card__zoom-btn[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
/* ── 좌측 [횡단 조정] 사본(2026-08-29 B05/B06 일원화) ─────────────────────
|
||
* 오버레이 창과 같은 DOM을 좌측 사이드바에 흐름 배치로 세운다. */
|
||
.b06-structure-panel--dock {
|
||
position: static;
|
||
z-index: auto;
|
||
max-height: none;
|
||
margin-top: var(--spacing-8);
|
||
border-color: var(--color-border);
|
||
overflow: visible;
|
||
}
|
||
|
||
/* 9키·십자 위치제어(이동 D-pad·집수정 9키)는 횡단도 오버레이 전용
|
||
* (2026-08-29 사용자 지시 7) — 사본에서는 그 행을 통째로 숨긴다. */
|
||
.b06-structure-panel--dock
|
||
.b06-structure-panel__struct:has(> .b06-structure-panel__controls.b06-structure-panel__buttons),
|
||
.b06-structure-panel--dock
|
||
.b06-structure-panel__struct:has(
|
||
> .b06-structure-panel__controls.b06-structure-panel__basin-buttons
|
||
) {
|
||
display: none;
|
||
}
|
||
|
||
/* [횡단 조정] 하위 컨테이너 — 구조물 배치 폼과 경계 구분(접이식). */
|
||
.b06-adjust-dock {
|
||
margin-top: var(--spacing-8);
|
||
padding-top: var(--spacing-8);
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.b06-adjust-dock > .ui-collapsible__title {
|
||
margin: 0;
|
||
color: var(--color-text-body);
|
||
font-size: var(--text-caption);
|
||
font-weight: var(--font-weight-medium);
|
||
}
|
||
|
||
.b06-adjust-dock__empty {
|
||
margin: var(--spacing-8) 0 0;
|
||
color: var(--color-text-muted);
|
||
font-size: var(--text-caption);
|
||
}
|
||
|
||
/* 횡단도 오버레이 창은 **위치제어 전용**으로 줄인다(2026-08-29 사용자 지시: 좌측
|
||
* [횡단 조정]과 내용이 같음을 확인한 뒤 중복 삭제). 십자(이동)·9키(집수정) 버튼
|
||
* 세트만 남기고, 값·형식·구간값 등 항목 행은 좌측 하나로 모은다. DOM·배선은 그대로라
|
||
* 두 창의 값은 계속 같이 움직인다. */
|
||
.b06-structure-panel:not(.b06-structure-panel--dock)
|
||
.b06-structure-panel__struct:not(
|
||
:has(> .b06-structure-panel__controls.b06-structure-panel__buttons)
|
||
):not(:has(> .b06-structure-panel__controls.b06-structure-panel__basin-buttons)) {
|
||
display: none;
|
||
}
|
||
|
||
/* 좌측 폼과 중복된 행은 사본에서 숨긴다(2026-08-29 사용자 지시 3·5):
|
||
* 형태 = 유입구·유출구 그룹의 "형태", 구조물 형식 = 유입구 "구조"로 합쳤다. */
|
||
.b06-structure-panel--dock .b06-structure-panel__struct--form,
|
||
.b06-structure-panel--dock .b06-structure-panel__struct--inlet-kind {
|
||
display: none;
|
||
}
|
||
|
||
/* 유입구·유출구 그룹으로 옮겨 붙은 행(단 수·옵션) — 그룹 안에서는 폼 여백을 따른다. */
|
||
.b05-structure__adjust-slot:empty {
|
||
display: none;
|
||
}
|
||
|
||
.b05-structure__adjust-slot {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* 유입구·유출구 그룹으로 옮겨 온 행(단 수·옵션) — 폼의 다른 항목과 같은 표기로
|
||
* 맞추고 2열로 세운다(2026-08-29 사용자 지시 1). 조정창 안에서 쓰던 어두운 행
|
||
* 양식은 여기서 벗는다. */
|
||
.b05-structure__adjust-slot {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 6px;
|
||
}
|
||
|
||
.b05-structure__adjust-slot .b06-structure-panel__struct {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.b05-structure__adjust-slot .b06-structure-panel__label {
|
||
color: var(--color-text-body);
|
||
font-size: var(--text-caption);
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 단 수 [－][값][＋]도 폼의 숫자 조정칸과 같은 한 덩어리로 보이게 한다. */
|
||
.b05-structure__adjust-slot .b06-structure-panel__controls {
|
||
display: flex;
|
||
overflow: hidden;
|
||
min-width: 0;
|
||
align-items: stretch;
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-inputs);
|
||
background: var(--color-surface);
|
||
gap: 0;
|
||
}
|
||
|
||
.b05-structure__adjust-slot .b06-structure-panel__controls .b06-structure-panel__btn {
|
||
width: 28px;
|
||
height: auto;
|
||
min-height: 24px;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
color: var(--color-text-body);
|
||
}
|
||
|
||
/* 옮겨 온 형태 드롭다운(다단 벽) — 폼의 다른 선택칸과 같은 한 덩어리로 앉힌다. */
|
||
.b05-structure__adjust-slot .b06-structure-panel__select {
|
||
min-width: 0;
|
||
flex: 1 1 auto;
|
||
border: 0;
|
||
background: transparent;
|
||
color: var(--color-text);
|
||
font-size: var(--text-caption);
|
||
}
|
||
|
||
.b05-structure__adjust-slot .b06-structure-panel__hval {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex: 1 1 auto;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-right: 1px solid var(--color-border);
|
||
border-left: 1px solid var(--color-border);
|
||
color: var(--color-text);
|
||
font-size: var(--text-caption);
|
||
}
|
||
|
||
/* 옵션 토글 둘은 한 덩어리 안에서 반씩 나눠 쓴다. */
|
||
.b05-structure__adjust-slot
|
||
.b06-structure-panel__controls.b06-structure-panel__toggles
|
||
.b06-structure-panel__toggle {
|
||
width: auto;
|
||
flex: 1 1 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.b05-structure__adjust-slot
|
||
.b06-structure-panel__controls.b06-structure-panel__toggles
|
||
.b06-structure-panel__toggle
|
||
+ .b06-structure-panel__toggle {
|
||
border-left: 1px solid var(--color-border);
|
||
}
|
||
|
||
/* 도면에서 고른 구조물 쪽 그룹 강조(2026-08-29 사용자 지시) — 조정창 테두리와 같은
|
||
붉은 계열로 맞춰 "지금 만지는 구조물"이 한 색으로 읽히게 한다. */
|
||
.b05-structure__group.is-active {
|
||
border-color: var(--color-danger);
|
||
background: color-mix(in srgb, var(--color-danger) 8%, transparent);
|
||
}
|
||
|
||
.b05-structure__group.is-active > legend {
|
||
color: var(--color-danger);
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 옮겨 온 옵션 토글(연동·경사) — 켜짐/꺼짐이 한눈에 보이게 한다(2026-08-29 사용자:
|
||
* 활성인지 비활성인지 모르겠음). 슬롯 공통 버튼 규칙이 배경을 지워 두 상태가 같아
|
||
* 보였다. 켜짐은 조정창과 같은 붉은 채움, 꺼짐은 흐린 글자 + 옅은 바탕. */
|
||
.b05-structure__adjust-slot .b06-structure-panel__toggle {
|
||
background: var(--color-surface);
|
||
color: var(--color-text-muted);
|
||
font-size: var(--text-caption);
|
||
}
|
||
|
||
.b05-structure__adjust-slot .b06-structure-panel__toggle.is-on {
|
||
background: var(--color-primary);
|
||
color: var(--color-primary-text);
|
||
font-weight: var(--font-weight-medium);
|
||
}
|
||
|
||
.b05-structure__adjust-slot .b06-structure-panel__toggle:disabled {
|
||
opacity: 0.45;
|
||
cursor: default;
|
||
}
|