691 lines
12 KiB
CSS
691 lines
12 KiB
CSS
/* =============================================================================
|
|
* E03_StabSection_UI_Style.css
|
|
* E03 2D 측점 해석 — 판정 색(상태 · 아이콘 + 글과 함께) · 등안전율 띠(빨강 ↔ 회색 ↔ 파랑) ·
|
|
* 지층 색(정해진 차례) · 밝음 · 어두움 각각 고른 값
|
|
* ========================================================================== */
|
|
|
|
:root {
|
|
--e03-ok: #0ca30c;
|
|
--e03-ng: #d03b3b;
|
|
--e03-none: #9a9a95;
|
|
--e03-band-0: #a31f1f;
|
|
--e03-band-1: #e34948;
|
|
--e03-band-2: #f29b97;
|
|
--e03-band-3: #e6e4df;
|
|
--e03-band-4: #9ec5f4;
|
|
--e03-band-5: #3987e5;
|
|
--e03-band-6: #184f95;
|
|
--e03-mat-0: #2a78d6;
|
|
--e03-mat-1: #eb6834;
|
|
--e03-mat-2: #1baf7a;
|
|
--e03-mat-3: #eda100;
|
|
--e03-mat-4: #e87ba4;
|
|
--e03-mat-5: #008300;
|
|
--e03-mat-6: #6250d6;
|
|
--e03-mat-7: #e34948;
|
|
--e03-water: #1c74d9;
|
|
--e03-critical: #0b0b0b;
|
|
--e03-surface-line: #52514e;
|
|
--e03-plot: #fcfcfb;
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
--e03-band-0: #c43c3c;
|
|
--e03-band-1: #e66767;
|
|
--e03-band-2: #8f4a48;
|
|
--e03-band-3: #383835;
|
|
--e03-band-4: #1c5cab;
|
|
--e03-band-5: #3987e5;
|
|
--e03-band-6: #86b6ef;
|
|
--e03-mat-0: #3987e5;
|
|
--e03-mat-1: #d95926;
|
|
--e03-mat-2: #199e70;
|
|
--e03-mat-3: #c98500;
|
|
--e03-mat-4: #d55181;
|
|
--e03-mat-5: #008300;
|
|
--e03-mat-6: #9085e9;
|
|
--e03-mat-7: #e66767;
|
|
--e03-water: #6da7ec;
|
|
--e03-critical: #f0efec;
|
|
--e03-surface-line: #c3c2b7;
|
|
--e03-plot: #1a1a19;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) {
|
|
--e03-band-0: #c43c3c;
|
|
--e03-band-1: #e66767;
|
|
--e03-band-2: #8f4a48;
|
|
--e03-band-3: #383835;
|
|
--e03-band-4: #1c5cab;
|
|
--e03-band-5: #3987e5;
|
|
--e03-band-6: #86b6ef;
|
|
--e03-mat-0: #3987e5;
|
|
--e03-mat-1: #d95926;
|
|
--e03-mat-2: #199e70;
|
|
--e03-mat-3: #c98500;
|
|
--e03-mat-4: #d55181;
|
|
--e03-mat-5: #008300;
|
|
--e03-mat-6: #9085e9;
|
|
--e03-mat-7: #e66767;
|
|
--e03-water: #6da7ec;
|
|
--e03-critical: #f0efec;
|
|
--e03-surface-line: #c3c2b7;
|
|
--e03-plot: #1a1a19;
|
|
}
|
|
}
|
|
|
|
/* ---- 틀 ---- */
|
|
.e03-page {
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
gap: var(--spacing-8);
|
|
height: calc(100dvh - var(--app-header-h));
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
box-sizing: border-box;
|
|
min-height: 0;
|
|
}
|
|
|
|
.e03-body {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
|
|
grid-template-rows: minmax(0, 1fr);
|
|
gap: var(--spacing-8);
|
|
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 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-8);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.e03-card__title {
|
|
margin: 0;
|
|
color: var(--color-text);
|
|
font-size: var(--text-body);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.e03-muted {
|
|
margin: 0;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.e03-empty {
|
|
margin: auto;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-body);
|
|
text-align: center;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
/* ---- 좌측 측점 목록 ---- */
|
|
.e03-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
min-height: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.e03-panel__row {
|
|
display: flex;
|
|
gap: var(--spacing-8);
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.e03-panel__row > .ui-field {
|
|
flex: 1 1 0;
|
|
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;
|
|
overflow: auto;
|
|
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 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 {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.e03-list tbody tr:hover {
|
|
background: var(--color-surface-sunken);
|
|
}
|
|
|
|
.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-star.is-on {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.e03-star.is-user {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.e03-star:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
/* ---- 평면 띠 ---- */
|
|
.e03-plan svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 96px;
|
|
background: var(--e03-plot);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.e03-plan__seg {
|
|
fill: none;
|
|
stroke-width: 7;
|
|
stroke-linecap: butt;
|
|
stroke-linejoin: round;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.e03-plan__seg--ok {
|
|
stroke: var(--e03-ok);
|
|
}
|
|
|
|
.e03-plan__seg--ng {
|
|
stroke: var(--e03-ng);
|
|
}
|
|
|
|
.e03-plan__seg--none {
|
|
stroke: var(--e03-none);
|
|
}
|
|
|
|
.e03-plan__pick {
|
|
fill: var(--e03-plot);
|
|
stroke: var(--e03-critical);
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.e03-legend {
|
|
display: flex;
|
|
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);
|
|
}
|
|
|
|
/* ---- 횡단 ---- */
|
|
.e03-section {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.e03-section svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--e03-plot);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.e03-region {
|
|
fill-opacity: 0.32;
|
|
stroke: var(--e03-surface-line);
|
|
stroke-opacity: 0.45;
|
|
stroke-width: 0.6;
|
|
}
|
|
|
|
.e03-surface {
|
|
fill: none;
|
|
stroke: var(--e03-surface-line);
|
|
stroke-width: 1.6;
|
|
}
|
|
|
|
.e03-water {
|
|
fill: none;
|
|
stroke: var(--e03-water);
|
|
stroke-width: 1.6;
|
|
stroke-dasharray: 8 4;
|
|
}
|
|
|
|
.e03-load {
|
|
stroke: var(--color-text-secondary);
|
|
stroke-width: 1;
|
|
fill: none;
|
|
}
|
|
|
|
.e03-cell {
|
|
stroke: none;
|
|
}
|
|
|
|
.e03-gridpt {
|
|
fill: var(--color-text-secondary);
|
|
}
|
|
|
|
.e03-candidate {
|
|
fill: none;
|
|
stroke: var(--color-text-secondary);
|
|
stroke-opacity: 0.55;
|
|
stroke-width: 1.2;
|
|
stroke-dasharray: 4 3;
|
|
}
|
|
|
|
.e03-critical {
|
|
fill: none;
|
|
stroke: var(--e03-critical);
|
|
stroke-width: 3;
|
|
}
|
|
|
|
.e03-radius {
|
|
stroke: var(--e03-critical);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 3 3;
|
|
fill: none;
|
|
}
|
|
|
|
.e03-slice {
|
|
fill: transparent;
|
|
stroke: var(--color-text-secondary);
|
|
stroke-opacity: 0.35;
|
|
stroke-width: 0.6;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.e03-slice:hover {
|
|
fill: var(--color-accent);
|
|
fill-opacity: 0.18;
|
|
}
|
|
|
|
.e03-slice.is-picked {
|
|
fill: var(--color-accent);
|
|
fill-opacity: 0.35;
|
|
stroke: var(--color-accent);
|
|
stroke-opacity: 1;
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.e03-label {
|
|
fill: var(--color-text);
|
|
font-size: calc(12px * var(--e03-label-k, 1));
|
|
paint-order: stroke;
|
|
stroke: var(--e03-plot);
|
|
stroke-width: calc(3px * var(--e03-label-k, 1));
|
|
}
|
|
|
|
.e03-label--fs {
|
|
font-size: calc(14px * var(--e03-label-k, 1));
|
|
font-weight: 700;
|
|
}
|
|
|
|
.e03-axis line {
|
|
stroke: var(--color-border);
|
|
}
|
|
|
|
.e03-axis text {
|
|
fill: var(--color-text-secondary);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.e03-tip {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
color: var(--color-text);
|
|
font-size: var(--text-body-sm);
|
|
white-space: nowrap;
|
|
display: none;
|
|
}
|
|
|
|
/* ---- 우측 결과 ---- */
|
|
.e03-result {
|
|
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;
|
|
}
|
|
|
|
.e03-fbd svg,
|
|
.e03-graph svg {
|
|
display: block;
|
|
width: 100%;
|
|
background: var(--e03-plot);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.e03-arrow {
|
|
stroke-width: 2;
|
|
fill: none;
|
|
}
|
|
|
|
.e03-arrow--W,
|
|
.e03-arrow--Q {
|
|
stroke: var(--e03-mat-6);
|
|
}
|
|
|
|
.e03-arrow--N {
|
|
stroke: var(--e03-mat-0);
|
|
}
|
|
|
|
.e03-arrow--U {
|
|
stroke: var(--e03-water);
|
|
stroke-dasharray: 4 2;
|
|
}
|
|
|
|
.e03-arrow--S {
|
|
stroke: var(--e03-mat-1);
|
|
}
|
|
|
|
.e03-arrow--EL,
|
|
.e03-arrow--ER,
|
|
.e03-arrow--XL,
|
|
.e03-arrow--XR {
|
|
stroke: var(--e03-mat-2);
|
|
}
|
|
|
|
.e03-line {
|
|
fill: none;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.e03-line--sigma {
|
|
stroke: var(--e03-mat-0);
|
|
}
|
|
|
|
.e03-line--u {
|
|
stroke: var(--e03-water);
|
|
stroke-dasharray: 5 3;
|
|
}
|
|
|
|
.e03-line--tau {
|
|
stroke: var(--e03-mat-1);
|
|
}
|
|
|
|
/* ---- 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;
|
|
position: relative;
|
|
}
|
|
|
|
.e03-view3d__canvas canvas {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* ---- 색 칸(지층 · 등안전율 띠) ---- */
|
|
.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);
|
|
}
|