eomsangdonandClaude Opus 5.5
271c460641
- 위험 채움 토큰 밝음 #e5484d → #d6363c(흰 글 3.91 → 4.72) · 어두움 5.6 · 위험 글 #c0392b 그대로 - 새 부품 계산 줄(ui_template_calc_row) — B08 수리집수면적표 b08-hydro__row · 식 칸 배치를 대신함 - 표 부품 칸 램프(ui-data-table__lamp · --only · ✓) — B08 집계표 · 거리이정표 · B09 설계내역 램프 CSS 세 벌을 걷음(표지 class 는 풍선 · 가이드용으로 남김) - 모달 넓은 중간 창(wide + width 1100px · 1100 × 680) — B09 운반 창 손 인라인 크기를 걷음 - 값 목록 규칙 꼴(rule) — ☰ 설정 규칙 줄 ul/li 를 걷음 - 접이 구역 머리(createCollapsibleHead = 패널 머리 + 접는 제목) — B08 구조물도 「조합 연결」 제목(옛 b08-sheets__title)을 대신함 - 일반 화면 틀 좁은 폭 · 입력 칸 2열 · 끝 단추 줄 — D01 · E01 이 B02 CSS 를 빌리던 것을 끊음(가이드 장면 선택자 맞춤) - 부품 모음 견본 · 지킴 시험 test_557_2 · 낡은 시험(198_1 · 247_1 · 251_1 · 257_1 · 276_1 · 551_1)은 부품 CSS · 새 class 로 맞춤 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
246 lines
5.7 KiB
CSS
246 lines
5.7 KiB
CSS
/* B08 거리이정표(244) — 경로 컨테이너 · 단추 줄 · 그림. 색은 테마 변수만(밝음 · 어두움 같이). */
|
|
|
|
.b08-milestone {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
/* 149 — 페이지 폭 전체(다이어그램 · 표 같은 폭) */
|
|
width: 100%;
|
|
}
|
|
|
|
/* 149 표도 폭 전체 — 열 너비는 비율대로 늘음 */
|
|
.b08-milestone > .ui-data-table {
|
|
width: 100%;
|
|
}
|
|
|
|
.b08-milestone > .ui-data-table .ui-data-table__table {
|
|
width: 100%;
|
|
}
|
|
|
|
.b08-milestone__route {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
padding: var(--spacing-16);
|
|
}
|
|
|
|
.b08-milestone__route h4 {
|
|
margin: var(--spacing-8) 0 0;
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.b08-milestone__image {
|
|
max-width: 100%;
|
|
max-height: 70vh;
|
|
object-fit: contain;
|
|
align-self: flex-start;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* 244-2 다이어그램 — 상자 · 선 · km 글(테마 변수) · 스크롤 없음(244-8 · 그림 = 틀 안 맞춤) */
|
|
/* 153 · 155 · 157 · 159 [방위 배치] · [요소 추가] — 다이어그램 왼쪽 아래 · 단추 = 메인 탭 크기 */
|
|
.b08-milestone__tools {
|
|
position: absolute;
|
|
bottom: 8px;
|
|
left: 8px;
|
|
}
|
|
|
|
.b08-milestone__diagram {
|
|
position: relative;
|
|
/* 149 높이 고정 · 그림은 틀 비율로 넓힌 범위에 맞춤(스크롤 없음 · 244-8) */
|
|
height: clamp(420px, 58vh, 760px);
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.b08-milestone__diagram svg {
|
|
display: block;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.b08-milestone__line {
|
|
stroke: var(--draw-text-secondary);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.b08-milestone__box rect {
|
|
fill: var(--draw-surface);
|
|
stroke: var(--draw-text-secondary);
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
.b08-milestone__box text {
|
|
fill: var(--draw-text);
|
|
}
|
|
|
|
/* 153 상자 색 — 공사지(시점 · 중점) = 강조색 · 기준점 = 경고색 · 거래처 = 성공색 · 옅은 채움 + 테두리(테마 변수 · 밝음 · 어두움 같이) */
|
|
.b08-milestone__box.is-site rect {
|
|
fill: color-mix(in srgb, var(--draw-accent) 7%, var(--draw-surface));
|
|
stroke: var(--draw-accent);
|
|
stroke-dasharray: 4 3;
|
|
}
|
|
|
|
.b08-milestone__box.is-start rect,
|
|
.b08-milestone__box.is-mid rect {
|
|
fill: color-mix(in srgb, var(--draw-accent) 16%, var(--draw-surface));
|
|
stroke: var(--draw-accent);
|
|
}
|
|
|
|
.b08-milestone__box.is-base rect {
|
|
fill: color-mix(in srgb, var(--draw-warning) 18%, var(--draw-surface));
|
|
stroke: var(--draw-warning);
|
|
}
|
|
|
|
.b08-milestone__box.is-route rect {
|
|
fill: color-mix(in srgb, var(--draw-success) 14%, var(--draw-surface));
|
|
stroke: var(--draw-success);
|
|
}
|
|
|
|
.b08-milestone__box.is-route,
|
|
.b08-milestone__box.is-base {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b08-milestone__box.is-route:hover rect,
|
|
.b08-milestone__box.is-route:focus-visible rect {
|
|
stroke: var(--draw-accent);
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.b08-milestone__km {
|
|
fill: var(--draw-text);
|
|
font-size: 12px;
|
|
paint-order: stroke;
|
|
stroke: var(--draw-surface);
|
|
stroke-width: 4px;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* 모달 구간 · 표 줄 — 칸 · [×] 한 줄(244-4) */
|
|
.b08-milestone__line-edit {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.b08-milestone__diagram svg.is-panning {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* 선 글 바로 고침(244-4 ⑥) — 글 아래 작은 판 */
|
|
.b08-milestone__km tspan {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b08-milestone__leg-edit {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.b08-milestone__leg-edit > .ui-float-panel__body {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 6px;
|
|
padding: 6px;
|
|
}
|
|
|
|
.b08-milestone__leg-edit .ui-input {
|
|
width: 80px;
|
|
}
|
|
|
|
/* 거래처 상자 윗줄 = 항목(244-6) · 글 크기 = 거래처 이름(254) */
|
|
.b08-milestone__items {
|
|
fill: var(--draw-text-secondary);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* 상자 작은 글씨 = 주소 · 좌표(244-12) */
|
|
.b08-milestone__note {
|
|
fill: var(--draw-text-secondary);
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* 254-3 상자 안 장소 그림 — 누름 · 끌기는 상자 몫 */
|
|
.b08-milestone__pic {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 등록 · 연결선 모달(244-13) — 더 큰 창 · 2열 칸 */
|
|
/* 폭 = 부품 모달 폭 단(960) · 키 큰 창만 여기 */
|
|
.ui-modal.b08-milestone__modal {
|
|
--modal-max: 90vh;
|
|
}
|
|
|
|
.b08-milestone__grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px 16px;
|
|
align-items: end;
|
|
}
|
|
|
|
.b08-milestone__place {
|
|
margin: 6px 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 255-3 칸 이름 = 내용 글 크기 이상 · 한 줄 · 소재지(주소 · 지도) 위 가로선 */
|
|
.b08-milestone__modal .ui-field__label {
|
|
font-size: var(--text-body-sm);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.b08-milestone__place-field {
|
|
margin-top: var(--spacing-8);
|
|
padding-top: var(--spacing-16);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* 연결선 누름 자리 — 투명한 굵은 선(244-13) */
|
|
.b08-milestone__line-hit {
|
|
stroke: transparent;
|
|
stroke-width: 14;
|
|
pointer-events: stroke;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 154 연결 점 ● — 거래처 · 기준점 상자 왼쪽 위 안쪽(254) · 끌어 기준점 · 공사지에 놓으면 연결 */
|
|
.b08-milestone__connect {
|
|
fill: var(--draw-success);
|
|
stroke: var(--draw-surface);
|
|
stroke-width: 2;
|
|
cursor: crosshair;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.b08-milestone__box:hover .b08-milestone__connect {
|
|
opacity: 1;
|
|
}
|
|
|
|
.b08-milestone__wire {
|
|
stroke: var(--draw-success);
|
|
stroke-width: 2;
|
|
stroke-dasharray: 6 4;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.b08-milestone__box.is-drop-target rect {
|
|
stroke-width: 3;
|
|
stroke-dasharray: none;
|
|
}
|
|
|
|
/* 157 경로 탭 머리 줄 = 부품 도구줄(이름 · 주소 왼 + 단추 오른) */
|
|
.b08-milestone__route-title {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: var(--spacing-8) var(--spacing-16);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.b08-milestone__route-addr {
|
|
color: var(--color-text-secondary);
|
|
}
|