eomsangdonandClaude Opus 5.5
913122ac4e
- 측구 · 측구형식 · 경사 방향 묶음 = 부품 분할 고르기 20 · 토사 · 측구 · 단경사 켜고 끄기 = 켜기 칩 20 · [상세] = 단추(고스트) 20 - ⋯ 넘침 펼침 = 아이콘 단추(선) 22 꼴(펼침 = aria-pressed) · 암 경계 ▲▼↺ · 암 절토 ↺ = 아이콘 단추 22 - 지운 자체 CSS — b06-design__btn(--active) · 펼침 보라 채움 · rockb 단추 꼴 · 사이 금 · 글 0.72rem → --text-caption - 부품 아이콘 단추의 display 가 hidden 을 덮어 선 칸 숨김 단추는 페이지에 숨김 한 줄 - 카드 높이 7 px 줄음(설계 줄 단추 24 → 20 · 지반 칩 24 → 20) · 그림 색 전후 같음(34 장면 × 102~120 선) - 시험 헬퍼 둘 — helper_318 = 단추 줄 시험이 진짜 부품 파일을 흉내 노드로 실음 · helper_472 = 켜기 칩 글을 안쪽 span 에서 읽음 - Line_Cell · CutSlope 는 흉내 DOM 시험(370-3 등)이 @ui 를 안 풀어 부품 클래스 · data-size 계약으로 붙임 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
335 lines
8.4 KiB
CSS
335 lines
8.4 KiB
CSS
/* SVG 차트 색상은 테마 토큰만 사용한다. */
|
|
.b06-chart__bg {
|
|
fill: var(--draw-surface-raised);
|
|
}
|
|
|
|
/* 세로 창을 변환으로 옮기는 겹(2026-09-04) — 세로로 눌리거나 늘어나도 선 굵기·점선 간격은
|
|
그대로여야 한다. 변환이 걸려 있을 때만 적용해 B06 종단·횡단은 예전 그대로 그려진다. */
|
|
.b06-chart__ywindow[transform] * {
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.b06-chart__grid {
|
|
stroke: var(--draw-grid);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.b06-chart__axis {
|
|
stroke: var(--draw-text-secondary);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.b06-chart__tick,
|
|
.b06-chart__station-label,
|
|
.b06-chart__axis-label {
|
|
fill: var(--draw-text-secondary);
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
.b06-chart__tick,
|
|
.b06-chart__station-label {
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* MC(곡선 가운데) 측점 = 사용자가 고칠 자리(507-3) — 한 단계 크게 · 굵게 · 경고색. 고름 빨강은 아래가 이김. */
|
|
.b06-chart__station-label--mc {
|
|
font-size: 12px;
|
|
font-weight: var(--font-weight-bold);
|
|
fill: var(--draw-warning);
|
|
}
|
|
|
|
.b06-station--mc {
|
|
font-size: 1.15em;
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
/* 중심고 Y축 라벨(318-2) — 눈금과 같은 10px · 둥근 상자 · 축선 앞에서 멈춤 ·
|
|
바탕 = 불투명 섞음(겹친 눈금 글을 위에서 가림 · 319-1) · 색 = 원지반선 · 설계선(379-3 · `--b06-tag` = _Cross_Areas.css) */
|
|
.b06-chart__center-box {
|
|
fill: color-mix(in srgb, var(--b06-tag) 14%, var(--draw-surface-raised));
|
|
stroke: var(--b06-tag);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.b06-chart__center-text {
|
|
fill: var(--b06-tag);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
/* 겹쳐 위 단으로 올린 측점 이름(407-4) — 선 · 지반선 위라 바탕색 테두리로 읽히게. */
|
|
.b06-chart__station-label--lifted {
|
|
paint-order: stroke;
|
|
stroke: var(--draw-surface-raised);
|
|
stroke-width: 3px;
|
|
stroke-linejoin: round;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 구조물(비정규) 측점 이름 — 종단면도 측점선 상단 표기. */
|
|
.b06-chart__structure-label {
|
|
font-size: 9px;
|
|
font-weight: var(--font-weight-medium);
|
|
fill: rgb(180 83 9);
|
|
}
|
|
|
|
.b06-chart__axis-label {
|
|
fill: var(--draw-text-body);
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.b06-chart__profile {
|
|
fill: none;
|
|
stroke: var(--draw-chart-0);
|
|
stroke-width: 2.5;
|
|
}
|
|
|
|
/* 지반선 · 계획선은 누름을 통과 — 겹친 측점선 누름이 측점 고름 · 임시 횡단으로 감(505-3) */
|
|
.b06-chart__profile,
|
|
.b06-chart__design-profile {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.b06-chart__cross-profile {
|
|
fill: none;
|
|
stroke: var(--draw-chart-1);
|
|
stroke-width: 2.4;
|
|
}
|
|
|
|
/* 종단 계획선(시공계획고): 지반선과 구분되도록 파선 + 강조색 */
|
|
.b06-chart__design-profile {
|
|
fill: none;
|
|
stroke: var(--draw-accent);
|
|
stroke-width: 2.2;
|
|
stroke-dasharray: 8 4;
|
|
}
|
|
|
|
/* 절토(계획고가 지반고보다 낮음) / 성토 구간 음영 */
|
|
.b06-chart__band {
|
|
stroke: none;
|
|
}
|
|
|
|
.b06-chart__band--cut {
|
|
fill: rgb(220 38 38 / 14%);
|
|
}
|
|
|
|
.b06-chart__band--fill {
|
|
fill: rgb(37 99 235 / 14%);
|
|
}
|
|
|
|
.b06-chart__balance-boundary {
|
|
stroke: var(--draw-accent);
|
|
stroke-width: 1.2;
|
|
stroke-dasharray: 3 3;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.b06-chart__station {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 구조물 측점선은 끌어 옮길 수 있다 — 커서로 그 사실을 알린다(2026-08-01 사용자 지시). */
|
|
.b06-chart__station--draggable {
|
|
cursor: ew-resize;
|
|
touch-action: none;
|
|
}
|
|
|
|
.b06-chart__station-line {
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
.b06-chart__station-hit {
|
|
stroke: transparent;
|
|
stroke-width: 14;
|
|
pointer-events: stroke;
|
|
}
|
|
|
|
.b06-chart__station-line--bp,
|
|
.b06-chart__station-line--regular,
|
|
.b06-chart__station-line--curve {
|
|
stroke: var(--draw-warning);
|
|
}
|
|
|
|
.b06-chart__station-line--ep {
|
|
stroke: var(--draw-accent);
|
|
stroke-dasharray: 4 3;
|
|
}
|
|
|
|
/* 비정규 측점(구조물)은 종단면도에서도 자수정색 파선으로 구분한다(B05 종단 규칙과 정합).
|
|
미선택 시 stroke 미정의로 세로선이 안 그려지던 문제 해소. */
|
|
.b06-chart__station-line--irregular {
|
|
stroke: var(--draw-accent);
|
|
stroke-width: 1.4;
|
|
stroke-dasharray: 5 3;
|
|
}
|
|
|
|
/* 추가 측점(368-3) = 일반측점 색 점선 */
|
|
.b06-chart__station-line--plus {
|
|
stroke: var(--draw-warning);
|
|
stroke-dasharray: 5 3;
|
|
}
|
|
|
|
.b06-chart__station-line--selected,
|
|
.b06-chart__center-marker {
|
|
stroke: var(--draw-danger);
|
|
stroke-width: 2.5;
|
|
}
|
|
|
|
/* 십자선이 계획 노선(계획고) 위치를 가리킬 때: 종단 계획선과 동일 색으로 대응시킨다 */
|
|
.b06-chart__center-marker--design {
|
|
stroke: var(--draw-accent);
|
|
}
|
|
|
|
.b06-chart__station--selected .b06-chart__station-label,
|
|
.b06-chart__station-label--selected {
|
|
fill: var(--draw-danger);
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
/* 측점 표준횡단 설계 지정 컨트롤 (카드 헤더 아래) — 좌측 여유 추가(2번).
|
|
한 행 고정(nowrap): 넘치는 컨트롤은 다음 행으로 밀지 않고 "⋯" 드롭다운으로 이동(N-2-2). */
|
|
.b06-design {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8) var(--spacing-16);
|
|
padding: var(--spacing-8) 0 var(--spacing-8) var(--spacing-16);
|
|
border-bottom: 1px solid var(--color-border);
|
|
margin-bottom: var(--spacing-8);
|
|
}
|
|
|
|
/* 오버플로 드롭다운(N-2-2): 넘친 컨트롤을 담는 우측 맞춤 "⋯" 메뉴. 세로 배치. */
|
|
.b06-design__more {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* ⋯ = 부품 아이콘 단추(선) 22 — 펼침 표시만 지움 */
|
|
.b06-design__more-summary {
|
|
list-style: none;
|
|
}
|
|
|
|
.b06-design__more-summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.b06-design__more-panel {
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(100% + 4px);
|
|
z-index: 3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
padding: var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-inputs);
|
|
background: var(--color-surface-raised);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.b06-design__seg {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b06-design__seg-legend {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-secondary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 선행 조건 미충족 옵션 — 숨김(179-2 · 옛 E-6 「흐리게 늘 보임」 폐기 · 쪽은 단면유형 알약에). */
|
|
.b06-design__seg--disabled {
|
|
display: none;
|
|
}
|
|
|
|
.b06-design__seg-buttons {
|
|
display: inline-flex;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-inputs);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.b06-design__areas {
|
|
display: inline-flex;
|
|
gap: var(--spacing-8);
|
|
margin-left: auto;
|
|
font-size: var(--text-caption);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* 암 경계선 제어(E-7) — 하단 정보 행 **왼쪽 맞춤**(318-2 · 중심고는 그래프 Y축 라벨 상자로 옮김). */
|
|
.b06-cross-card__rockb {
|
|
flex: 0 0 auto;
|
|
border-radius: var(--radius-inputs);
|
|
padding: 1px 4px;
|
|
}
|
|
|
|
/* 선 공용 칸(370-3) — 고른 선 제목 · 버튼 · 값 한 줄(넘치면 말줄임) · 빈 칸도 자리(띠 높이) 그대로. */
|
|
.b06-cross-card__linecell {
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.b06-cross-card__linecell.is-empty {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.b06-cross-card__linecell .b06-design__seg-buttons {
|
|
min-width: 0;
|
|
}
|
|
|
|
.b06-cross-card__linecell .b06-design__rockb-readout {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.b06-cross-card__linecell .b06-design__rockb-btn {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* 부품 아이콘 단추의 display 가 hidden 을 덮음 — 상태에 없는 칸은 숨김 */
|
|
.b06-design__rockb-btn[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* 측점별 암 절토 경사(2026-09-07) — 행의 **오른쪽 끝**(암 경계 = 왼쪽). */
|
|
.b06-cross-card__cutslope {
|
|
margin-left: auto;
|
|
flex: 0 0 auto;
|
|
border-radius: var(--radius-inputs);
|
|
padding: 1px 4px;
|
|
}
|
|
|
|
.b06-design__cutslope-input {
|
|
width: 44px;
|
|
padding: 0 2px;
|
|
font-size: var(--text-caption);
|
|
font-family: var(--font-mono);
|
|
text-align: right;
|
|
color: var(--color-text);
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-inputs);
|
|
}
|
|
|
|
/* 화살표(스피너)는 칸이 좁아 지운다 — 값은 직접 넣거나 ↺ 로 되돌린다. */
|
|
.b06-design__cutslope-input::-webkit-outer-spin-button,
|
|
.b06-design__cutslope-input::-webkit-inner-spin-button {
|
|
margin: 0;
|
|
appearance: none;
|
|
}
|
|
|
|
.b06-design__cutslope-unit {
|
|
padding: 0 2px 0 1px;
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-secondary);
|
|
align-self: center;
|
|
}
|