eomsangdonandClaude Sonnet 5.5
79d33601f2
- 목록 판정 면 칸 · 결과 방법 줄 · 면 확인 · 모형 끝 면 배지 - 해석 설정 탐색 한계(모형 끝 / 비탈 끝 + 2H / 비탈 끝 + 정한 m) — [해석] 이 저장 + 그 값으로 셈 - Router 설정 저장본 · 지문 · 일꾼 kwargs · 단면 · 가정 · 확률 길 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
515 lines
8.6 KiB
CSS
515 lines
8.6 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;
|
|
--e03-terrain: #c9c2a8;
|
|
}
|
|
|
|
: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;
|
|
--e03-terrain: #5b5646;
|
|
}
|
|
|
|
@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-terrain: #5b5646;
|
|
}
|
|
}
|
|
|
|
/* ---- 틀 ---- */
|
|
.e03-page {
|
|
display: grid;
|
|
grid-template-rows: auto 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;
|
|
}
|
|
|
|
.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 {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.e03-card > .e03-empty {
|
|
margin: auto;
|
|
}
|
|
|
|
/* ---- 좌측 측점 목록 ---- */
|
|
.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-list {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
.e03-list .ui-table-wrap,
|
|
.e03-slices .ui-table-wrap {
|
|
overflow: visible;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: none;
|
|
}
|
|
|
|
.e03-list th,
|
|
.e03-slices th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: var(--color-surface-raised);
|
|
}
|
|
|
|
.e03-list tbody tr,
|
|
.e03-slices tbody tr {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.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-basis {
|
|
display: inline-flex;
|
|
gap: var(--spacing-4);
|
|
align-items: center;
|
|
}
|
|
|
|
.e03-check {
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.e03-star.is-on {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.e03-star.is-user {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ---- 평면 띠 ---- */
|
|
.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;
|
|
vector-effect: non-scaling-stroke;
|
|
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;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.e03-plan__label {
|
|
text-anchor: middle;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.e03-legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-4) var(--spacing-12);
|
|
align-items: center;
|
|
}
|
|
|
|
/* ---- 횡단 ---- */
|
|
.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-section .e03-tip {
|
|
position: absolute;
|
|
display: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ---- 우측 결과 ---- */
|
|
.e03-result {
|
|
overflow: auto;
|
|
}
|
|
|
|
.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__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);
|
|
}
|
|
|
|
.e03-mat-1 {
|
|
fill: var(--e03-mat-1);
|
|
}
|
|
|
|
.e03-mat-2 {
|
|
fill: var(--e03-mat-2);
|
|
}
|
|
|
|
.e03-mat-3 {
|
|
fill: var(--e03-mat-3);
|
|
}
|
|
|
|
.e03-mat-4 {
|
|
fill: var(--e03-mat-4);
|
|
}
|
|
|
|
.e03-mat-5 {
|
|
fill: var(--e03-mat-5);
|
|
}
|
|
|
|
.e03-mat-6 {
|
|
fill: var(--e03-mat-6);
|
|
}
|
|
|
|
.e03-mat-7 {
|
|
fill: var(--e03-mat-7);
|
|
}
|
|
|
|
.e03-band-0 {
|
|
fill: var(--e03-band-0);
|
|
}
|
|
|
|
.e03-band-1 {
|
|
fill: var(--e03-band-1);
|
|
}
|
|
|
|
.e03-band-2 {
|
|
fill: var(--e03-band-2);
|
|
}
|
|
|
|
.e03-band-3 {
|
|
fill: var(--e03-band-3);
|
|
}
|
|
|
|
.e03-band-4 {
|
|
fill: var(--e03-band-4);
|
|
}
|
|
|
|
.e03-band-5 {
|
|
fill: var(--e03-band-5);
|
|
}
|
|
|
|
.e03-band-6 {
|
|
fill: var(--e03-band-6);
|
|
}
|