eomsangdonandClaude Opus 5.5
bef1e8c15b
- [저장] 자리에 [해석 시작](POST /stab/run = 검사 · 저장 → 체인) · 잠금판은 저장 순간만 - 진행 막대(ui_template_progress) · 단계 줄 다섯(ui_template_list_row · 상태 띠 · 걸린 초) · [끊기] - 열 때 GET /stab/run/progress — 도는 중이면 이어서 봄 · 끝난 결과면 단계 줄만 - locale_e 글 · 저장 안 됨 글 = 「해석 전」 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
141 lines
2.5 KiB
CSS
141 lines
2.5 KiB
CSS
/* =============================================================================
|
|
* E02_StabGround_UI_Style.css
|
|
* E02 지반 조건 본문 카드 · 표 · 입력 칸 — 색은 테마 토큰만(밝음 · 어두움 같이)
|
|
* ========================================================================== */
|
|
|
|
.e02-page {
|
|
height: 100%;
|
|
overflow: auto;
|
|
padding: var(--spacing-16);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.e02-page > .ui-banner {
|
|
margin-bottom: var(--spacing-8);
|
|
}
|
|
|
|
.e02-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr));
|
|
gap: var(--spacing-16);
|
|
align-items: start;
|
|
}
|
|
|
|
/* 카드 모양은 카드 부품(머리 카드) — 여기는 자리만 */
|
|
.e02-card {
|
|
min-width: 0;
|
|
}
|
|
|
|
.e02-card .ui-card__body {
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.e02-card__sub {
|
|
margin: var(--spacing-8) 0 0;
|
|
color: var(--color-text);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.e02-card__actions {
|
|
display: flex;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
/* 표 모양은 표 부품 — 여기는 읽기 표 줄 안 줄바꿈만 */
|
|
.e02-table--read td {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.e02-stations {
|
|
max-height: 320px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.e02-input {
|
|
width: 100%;
|
|
min-width: 64px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.e02-input--num {
|
|
min-width: 56px;
|
|
text-align: right;
|
|
}
|
|
|
|
.e02-input--name {
|
|
min-width: 96px;
|
|
}
|
|
|
|
.e02-rowhead {
|
|
white-space: nowrap;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.e02-map,
|
|
.e02-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: var(--spacing-8);
|
|
align-items: end;
|
|
}
|
|
|
|
.e02-map__title {
|
|
grid-column: 1 / -1;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.e02-status {
|
|
margin: var(--spacing-8) 0 0;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.e02-table .ui-btn {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.e02-input[data-path$=".water"] {
|
|
min-width: 120px;
|
|
}
|
|
|
|
/* 좁은 화면 — 표만 옆으로 밀림(카드 밖으로 안 나감) */
|
|
.e02-card {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* 물성 표는 열이 많아 한 줄 통째 */
|
|
.e02-card--wide {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
/* 지하수 카드 — 사용자 수위선 점(offset · 깊이) 줄 */
|
|
.e02-points {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-4);
|
|
align-items: center;
|
|
}
|
|
|
|
.e02-point {
|
|
display: inline-flex;
|
|
gap: 2px;
|
|
align-items: center;
|
|
}
|
|
|
|
/* [해석 시작] 진행 — 막대 · 단계 줄 · [끊기] */
|
|
.e02-run {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
margin: var(--spacing-8) 0;
|
|
}
|
|
|
|
.e02-run[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.e02-run__steps {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|