Files
Aislo/B06_Section/B06_Section_UI_Style_Cross_Detail.css
T
eomsangdonandClaude Opus 5.5 48c4f7d7d4 feat(B06): 횡단 카드 [상세] 모달 — 구조물 글 · CAD 꼴 그림 · B07 횡단 수량표(138-4)
- 측구 줄 맨 오른쪽 [상세] · 투명 막 · 카드 안 가리는 넓은 쪽 · 카드 다시 그리면 갱신
- 구조물 글 structure_note — USER_TOUCHED_KEYS 두 벌 · CrossSectionPatch · 세션 초안 → [저장]
- 표 값 = 서버 cross-quantity-table 한 길(B07 _quantity_table 을 캐시 설계로) · 칸 배치 B07 그대로
- test_138_cross_detail

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JywHxQuWPk6UYXTebyrBoU
2026-10-09 15:01:01 +09:00

90 lines
2.2 KiB
CSS

/* =============================================================================
* B06_Section_UI_Style_Cross_Detail.css
* 횡단 카드 [상세] 단추 · 모달(138-4) — 투명 막(누름 통과) · 글 칸 · CAD 꼴 그림 · B07 수량표.
* ========================================================================== */
/* 측구 줄 맨 오른쪽 — ⋯ 가 보이면 그 옆, 숨으면 혼자 오른쪽 끝 */
.b06-design__detail {
flex: 0 0 auto;
margin-left: auto;
}
.b06-design__more:not([hidden]) ~ .b06-design__detail {
margin-left: 0;
}
/* 막은 투명 · 누름은 아래 화면으로 — 모달 몸만 받음 */
.ui-modal__backdrop.b06-detail__backdrop {
background-color: transparent;
pointer-events: none;
}
.b06-detail__backdrop > .ui-modal.b06-detail {
pointer-events: auto;
overflow: auto;
box-shadow: var(--shadow-lg);
}
.b06-detail__note {
width: 100%;
box-sizing: border-box;
resize: vertical;
font: inherit;
}
/* 가벼운 CAD 꼴 — 어두운 바탕 · 카드 그림 복제에 다크 색 토큰을 덮어씀 */
.b06-detail__cad {
--color-bg: #111111;
--color-surface: #111111;
--color-surface-raised: #1a1a1a;
--color-border: #3a3a3a;
--color-text: #f2f2f2;
--color-text-body: #e6e6e6;
--color-text-secondary: #b8b8b8;
--color-text-muted: #8b8b8b;
--color-primary: #c9a8ff;
--color-warning: #ffd34d;
--color-danger: #ff5f57;
--color-success: #4cd37b;
border-radius: var(--radius-cards);
background: #111111;
color: #f2f2f2;
overflow: hidden;
}
.b06-detail__cad > svg {
display: block;
width: 100%;
height: auto;
}
/* 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);
}