refactor(E03): 표 · 카드 · 보조 글 · 빈 자리 · 체크 · 범례 · 판정 램프 · 별 단추 · 값 목록 · 3D 창을 부품으로 (PLAN 553-4)
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5.5
@@ -94,15 +94,13 @@
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* 카드 · 보조 글 · 빈 자리 · 체크 · 표 · 범례 · 값 목록 · 모달은 부품 — 여기는 자리만 */
|
||||
.e03-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-8);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: var(--spacing-8) var(--spacing-12);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface-raised);
|
||||
}
|
||||
|
||||
.e03-card__head {
|
||||
@@ -121,17 +119,11 @@
|
||||
}
|
||||
|
||||
.e03-muted {
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--text-body-sm);
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.e03-empty {
|
||||
.e03-card > .e03-empty {
|
||||
margin: auto;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--text-body);
|
||||
text-align: center;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
/* ---- 좌측 측점 목록 ---- */
|
||||
@@ -155,16 +147,6 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.e03-check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-4);
|
||||
color: var(--color-text-body);
|
||||
font-size: var(--text-body-sm);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.e03-list {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
@@ -172,89 +154,37 @@
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.e03-list table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-body);
|
||||
.e03-list .ui-table-wrap,
|
||||
.e03-slices .ui-table-wrap {
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.e03-list th {
|
||||
.e03-list th,
|
||||
.e03-slices th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
padding: var(--spacing-4);
|
||||
background: var(--color-surface-raised);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.e03-list td {
|
||||
padding: 3px var(--spacing-4);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.e03-list td.is-num,
|
||||
.e03-list th.is-num,
|
||||
.e03-table td.is-num,
|
||||
.e03-table th.is-num {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.e03-list tbody tr {
|
||||
.e03-list tbody tr,
|
||||
.e03-slices tbody tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.e03-list tbody tr:hover {
|
||||
background: var(--color-surface-sunken);
|
||||
.e03-list .ui-table th,
|
||||
.e03-list .ui-table td,
|
||||
.e03-slices .ui-table th,
|
||||
.e03-slices .ui-table td {
|
||||
padding: 0 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.e03-list tbody tr.is-active {
|
||||
background: var(--color-surface-sunken);
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: -2px;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.e03-verdict {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.e03-verdict::before {
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--e03-none);
|
||||
}
|
||||
|
||||
.e03-verdict--ok::before {
|
||||
background: var(--e03-ok);
|
||||
}
|
||||
|
||||
.e03-verdict--ng::before {
|
||||
background: var(--e03-ng);
|
||||
border-radius: 2px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.e03-star {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0 2px;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
.e03-check {
|
||||
font-size: var(--text-body-sm);
|
||||
}
|
||||
|
||||
.e03-star.is-on {
|
||||
@@ -265,10 +195,6 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.e03-star:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* ---- 평면 띠 ---- */
|
||||
.e03-plan svg {
|
||||
display: block;
|
||||
@@ -309,22 +235,6 @@
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-4) var(--spacing-12);
|
||||
align-items: center;
|
||||
color: var(--color-text-body);
|
||||
font-size: var(--text-caption, 12px);
|
||||
}
|
||||
|
||||
.e03-legend__item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.e03-legend__swatch {
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* ---- 횡단 ---- */
|
||||
@@ -458,63 +368,6 @@
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.e03-kpi {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--spacing-4) var(--spacing-12);
|
||||
margin: 0;
|
||||
font-size: var(--text-body-sm);
|
||||
}
|
||||
|
||||
.e03-kpi dt {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.e03-kpi dd {
|
||||
margin: 0;
|
||||
color: var(--color-text);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.e03-kpi dd.is-big {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.e03-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-body);
|
||||
}
|
||||
|
||||
.e03-table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--color-surface-raised);
|
||||
padding: 2px var(--spacing-4);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.e03-table td {
|
||||
padding: 2px var(--spacing-4);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.e03-table tbody tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.e03-table tbody tr.is-picked {
|
||||
background: var(--color-surface-sunken);
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.e03-slices {
|
||||
max-height: 220px;
|
||||
overflow: auto;
|
||||
@@ -577,26 +430,6 @@
|
||||
}
|
||||
|
||||
/* ---- 3D 보기 ---- */
|
||||
.e03-view3d {
|
||||
position: fixed;
|
||||
inset: 5vh 5vw;
|
||||
z-index: 800;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface-raised);
|
||||
box-shadow: var(--shadow-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.e03-view3d__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-8);
|
||||
padding: var(--spacing-8) var(--spacing-12);
|
||||
}
|
||||
|
||||
.e03-view3d__canvas {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
@@ -612,79 +445,60 @@
|
||||
/* ---- 색 칸(지층 · 등안전율 띠) ---- */
|
||||
.e03-mat-0 {
|
||||
fill: var(--e03-mat-0);
|
||||
background: var(--e03-mat-0);
|
||||
}
|
||||
|
||||
.e03-mat-1 {
|
||||
fill: var(--e03-mat-1);
|
||||
background: var(--e03-mat-1);
|
||||
}
|
||||
|
||||
.e03-mat-2 {
|
||||
fill: var(--e03-mat-2);
|
||||
background: var(--e03-mat-2);
|
||||
}
|
||||
|
||||
.e03-mat-3 {
|
||||
fill: var(--e03-mat-3);
|
||||
background: var(--e03-mat-3);
|
||||
}
|
||||
|
||||
.e03-mat-4 {
|
||||
fill: var(--e03-mat-4);
|
||||
background: var(--e03-mat-4);
|
||||
}
|
||||
|
||||
.e03-mat-5 {
|
||||
fill: var(--e03-mat-5);
|
||||
background: var(--e03-mat-5);
|
||||
}
|
||||
|
||||
.e03-mat-6 {
|
||||
fill: var(--e03-mat-6);
|
||||
background: var(--e03-mat-6);
|
||||
}
|
||||
|
||||
.e03-mat-7 {
|
||||
fill: var(--e03-mat-7);
|
||||
background: var(--e03-mat-7);
|
||||
}
|
||||
|
||||
.e03-band-0 {
|
||||
fill: var(--e03-band-0);
|
||||
background: var(--e03-band-0);
|
||||
}
|
||||
|
||||
.e03-band-1 {
|
||||
fill: var(--e03-band-1);
|
||||
background: var(--e03-band-1);
|
||||
}
|
||||
|
||||
.e03-band-2 {
|
||||
fill: var(--e03-band-2);
|
||||
background: var(--e03-band-2);
|
||||
}
|
||||
|
||||
.e03-band-3 {
|
||||
fill: var(--e03-band-3);
|
||||
background: var(--e03-band-3);
|
||||
}
|
||||
|
||||
.e03-band-4 {
|
||||
fill: var(--e03-band-4);
|
||||
background: var(--e03-band-4);
|
||||
}
|
||||
|
||||
.e03-band-5 {
|
||||
fill: var(--e03-band-5);
|
||||
background: var(--e03-band-5);
|
||||
}
|
||||
|
||||
.e03-band-6 {
|
||||
fill: var(--e03-band-6);
|
||||
background: var(--e03-band-6);
|
||||
}
|
||||
|
||||
.e03-swatch-none {
|
||||
background: var(--e03-none);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user