eomsangdonandClaude Opus 5.5
410c4042b6
- 면적표 글자 = 그림 칸 폭 비례(clamp · cqw) · 표 높이 변수 같은 식 · 4열부터 「계」만(그리드 data-columns) - [상세] 그림 = 테마 토큰(어두운 고정색 지움) · 카드 그리기 함수로 모달 칸 크기에 맞춰 새로 그림(fitPlotBase · 빈 띠 없음) - 칸 크기 바뀌면 다시 그림(ResizeObserver) · clip id 카드와 가름 · 그리는 동안 refresh 되먹임 막음 - 시험 test_173_areas_detail 새로 · test_164 · test_150 단정 고침 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JywHxQuWPk6UYXTebyrBoU
134 lines
3.5 KiB
CSS
134 lines
3.5 KiB
CSS
/* =============================================================================
|
||
* B06_Section_UI_Style_Cross_Detail.css
|
||
* 횡단 카드 [상세] 단추 · 모달(138-4 · 150-2) — 공용 큰 창 · 그림(남은 높이) → 글 칸 → B07 수량표.
|
||
* ========================================================================== */
|
||
|
||
/* 측구 줄 맨 오른쪽 — ⋯ 가 보이면 그 옆, 숨으면 혼자 오른쪽 끝 */
|
||
.b06-design__detail {
|
||
flex: 0 0 auto;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.b06-design__more:not([hidden]) ~ .b06-design__detail {
|
||
margin-left: 0;
|
||
}
|
||
|
||
/* 스크롤 없음 — 글 · 표는 제 높이 · 그림이 남은 높이를 채움 */
|
||
.ui-modal.b06-detail > .ui-modal__body {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.b06-detail__note {
|
||
flex: none;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
resize: none;
|
||
font: inherit;
|
||
}
|
||
|
||
.b06-detail__table {
|
||
flex: none;
|
||
}
|
||
|
||
/* 그림 칸 = 테마 색(173-4 · 카드와 같은 바탕) · 그림은 칸 크기로 새로 그려 가득 */
|
||
.b06-detail__cad {
|
||
border-radius: var(--radius-cards);
|
||
background: var(--color-surface-raised);
|
||
color: var(--color-text);
|
||
overflow: hidden;
|
||
flex: 1;
|
||
min-height: 0;
|
||
/* [+ − ⤢] 우상단(164-1) */
|
||
position: relative;
|
||
}
|
||
|
||
.b06-detail__cad > svg {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* B07 횡단 수량 산출표 — 칸 배치 그대로 */
|
||
.b06-detail__table.is-loading {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.b06-detail__qtable {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: var(--text-caption);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.b06-detail__qtable th,
|
||
.b06-detail__qtable td {
|
||
padding: 2px 4px;
|
||
border: 1px solid var(--color-border);
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.b06-detail__qtable th {
|
||
font-weight: 500;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.b06-detail__qtable tr:first-child > th {
|
||
text-align: left;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
/* 표 칸 누름 ↔ 그림 강조(150-4 · 164-2) — 짝 있는 칸만 손가락 · 고른 칸 · 줄 붉게 */
|
||
.b06-detail__qtable [data-key] {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.b06-detail__qtable [data-key]:hover {
|
||
background: color-mix(in srgb, var(--color-danger) 8%, transparent);
|
||
}
|
||
|
||
.b06-detail__qtable .is-picked {
|
||
background: color-mix(in srgb, var(--color-danger) 18%, transparent);
|
||
box-shadow: inset 0 0 0 1px var(--color-danger);
|
||
color: var(--color-danger);
|
||
}
|
||
|
||
.b06-detail__qtable tr:has(.is-picked) {
|
||
background: color-mix(in srgb, var(--color-danger) 5%, transparent);
|
||
}
|
||
|
||
/* 그림에 대상이 없는 칸(암석 띠 없음 · 면적 0 · 사토장 없음) — 회색 · 누름 없음 */
|
||
.b06-detail__qtable [data-key][data-empty] {
|
||
cursor: default;
|
||
background: none;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
/* 그림 강조 한 벌 = 붉은 계통(164-2 · 카드 색은 그대로) — 띠 · 판정 선 · 중심 십자 · 사토장 */
|
||
.b06-detail__cad .b06-chart__area.is-active > polygon {
|
||
fill: color-mix(in srgb, var(--color-danger) 35%, transparent);
|
||
stroke: var(--color-danger);
|
||
stroke-width: 2;
|
||
}
|
||
|
||
.b06-detail__cad .b06-chart__design-hit.is-active {
|
||
stroke: color-mix(in srgb, var(--color-danger) 70%, transparent);
|
||
stroke-width: 9;
|
||
}
|
||
|
||
.b06-detail__cad .b06-chart__center.is-active line {
|
||
stroke: var(--color-danger);
|
||
stroke-width: 3;
|
||
}
|
||
|
||
.b06-detail__cad .b06-chart__spoil-fill.is-active {
|
||
stroke: var(--color-danger);
|
||
stroke-width: 3;
|
||
}
|
||
|
||
/* 판정 선은 복제에서 누를 일 없음 — 손가락 지움 */
|
||
.b06-detail__cad .b06-chart__design-hit,
|
||
.b06-detail__cad .b06-chart__area > polygon {
|
||
cursor: default;
|
||
}
|