eomsangdonandClaude Opus 5
2bd1c874ca
- 면적 하이라이트가 먹지 않던 원인: 값 칸·밴드 클릭이 카드까지 버블링돼 측점 선택이 다시 걸리고, draw()가 카드를 새로 만들면서 방금 켠 강조가 즉시 지워졌다. stopPropagation 추가. - 면적 표기를 칩 나열에서 절토/성토 2행 × EA·RR·BR·계 4열 표로 바꾼다. 이름은 도면 표기를 그대로 쓰고, 0값이어도 항목을 유지해 카드끼리 비교가 되게 한다. 성토는 완성 단면이라 지반유형으로 갈리지 않으므로 계 한 칸만 쓴다. - 암반 밴드는 하나뿐이라 그 측점의 암종에 해당하는 칸만 강조 버튼이 된다. - 유토곡선 0선에 Y축 눈금값 0을 적어 무슨 선인지 읽히게 한다(선 자체는 원래 상시 표시). - 오버레이가 1줄에서 3행 표가 되어 상단 여유를 28 → 58px로 키웠다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
165 lines
4.9 KiB
CSS
165 lines
4.9 KiB
CSS
/* =============================================================================
|
|
* B06_wf3_ProfileCross_UI_Style_MassHaul.css
|
|
* 유토곡선(Mass Haul Diagram) 스타일 — 곡선·오버레이 범례·요약줄.
|
|
* 700줄 제한 대응으로 _UI_Style_Cross.css에서 분리(종·횡단 도면 본체는 원본 유지).
|
|
*
|
|
* 곡선이 여러 개라 읽는 규칙을 둘로 나눈다:
|
|
* 색 = 산출 기준 (횡단 = 브랜드 보라 / 종단 = 성공색 초록)
|
|
* 선모양 = 환산 방식 (실선 = 지반유형별 / 파선 = 토사 단일 / 점선 = 환산 없음)
|
|
* 색상은 theme.css 변수만 쓴다. 횡단 기준의 보라는 참고 도면의 자주색에 대응한다.
|
|
* ========================================================================== */
|
|
|
|
/* 범례는 그래프 **아래**, 가로 스크롤 컨테이너 밖에 놓인다(곡선 폭 계산에 끼어들면 종단면도와
|
|
측점 세로선이 어긋난다). 개수가 늘어도 패널 높이 배분이 흔들리지 않도록 한 줄로 고정하고,
|
|
넘치면 줄바꿈 대신 이 줄만 가로로 민다. */
|
|
.b06-masshaul__legend {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
padding: var(--spacing-4) var(--spacing-16);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.b06-masshaul__legend-item {
|
|
display: inline-flex;
|
|
flex: none;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
padding: var(--spacing-4) var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-pills);
|
|
background: var(--color-surface-raised);
|
|
color: var(--color-text-body);
|
|
font-size: var(--text-caption);
|
|
line-height: 1.2;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b06-masshaul__legend-item.is-off {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* 스와치는 곡선을 그대로 축소한 것 — 색과 선모양이 그래프와 같아야 범례 구실을 한다. */
|
|
.b06-masshaul__legend-swatch {
|
|
width: 18px;
|
|
height: 0;
|
|
border-top: 2px solid var(--color-royal-amethyst);
|
|
}
|
|
|
|
.b06-masshaul__legend-item--longitudinal .b06-masshaul__legend-swatch {
|
|
border-top-color: var(--color-success);
|
|
}
|
|
|
|
.b06-masshaul__legend-item--soil_only .b06-masshaul__legend-swatch {
|
|
border-top-style: dashed;
|
|
}
|
|
|
|
.b06-masshaul__legend-item--natural .b06-masshaul__legend-swatch {
|
|
border-top-style: dotted;
|
|
}
|
|
|
|
.b06-masshaul__legend-item.is-off .b06-masshaul__legend-swatch {
|
|
border-top-color: var(--color-smoke);
|
|
}
|
|
|
|
.b06-masshaul__curve {
|
|
fill: none;
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 2;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.b06-masshaul__curve--longitudinal {
|
|
stroke: var(--color-success);
|
|
}
|
|
|
|
/* 곡선과 0선 사이 — 절토 우세/성토 우세 구간을 한눈에 가르는 옅은 면.
|
|
여러 곡선에 겹쳐 칠하면 서로 가리므로 렌더러가 맨 앞 곡선 하나에만 붙인다. */
|
|
.b06-masshaul__band {
|
|
fill: var(--color-royal-amethyst);
|
|
opacity: 0.12;
|
|
stroke: none;
|
|
}
|
|
|
|
.b06-masshaul__band--longitudinal {
|
|
fill: var(--color-success);
|
|
}
|
|
|
|
/* 0선: 절토 우세와 성토 우세의 경계라 격자보다 진하게. 어떤 노선에서도 반드시 보인다. */
|
|
.b06-masshaul__zero {
|
|
stroke: var(--color-text-secondary);
|
|
stroke-width: 1.2;
|
|
stroke-dasharray: 4 3;
|
|
}
|
|
|
|
.b06-masshaul__zero-tick {
|
|
fill: var(--color-text-secondary);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.b06-masshaul__summary {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8) var(--spacing-16);
|
|
padding: var(--spacing-8) var(--spacing-16);
|
|
border-top: 1px solid var(--color-border);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
.b06-masshaul__chip {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b06-masshaul__chip em {
|
|
font-style: normal;
|
|
}
|
|
|
|
.b06-masshaul__chip strong {
|
|
color: var(--color-text-body);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* 요약 수치가 어느 곡선의 것인지 밝히는 꼬리표. */
|
|
.b06-masshaul__basis {
|
|
margin-inline-start: auto;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* 선택 측점이 곡선의 어디인지 찍는 점 — 말풍선과 시선을 잇는다. */
|
|
.b06-masshaul__focus {
|
|
fill: var(--color-royal-amethyst);
|
|
stroke: var(--color-surface);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
/* 선택 측점 구간 물량 말풍선. 렌더러가 곡선이 지나지 않는 자리를 골라 놓지만, 배치가
|
|
빡빡한 화면에서도 곡선이 비쳐 보이도록 배경을 완전 불투명으로 두지 않는다. */
|
|
.b06-masshaul__callout > rect {
|
|
fill: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.b06-masshaul__callout-tail {
|
|
fill: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.b06-masshaul__callout-leader {
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 3 2;
|
|
}
|
|
|
|
.b06-masshaul__callout-text {
|
|
fill: var(--color-text-body);
|
|
font-size: 11px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|