eomsangdonandClaude Opus 5.5
c3e83a6375
- ui-workflow-layout__main 바탕 --color-canvas → --color-bg(대시보드 #f6f7f9 · 어두움 대응) - 지킴 시험 test_556_1_page_bg — 작업 · 일반 화면 틀 본문 바탕 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
165 lines
4.6 KiB
CSS
165 lines
4.6 KiB
CSS
.ui-workflow-layout {
|
|
position: relative;
|
|
min-height: calc(100dvh - var(--app-header-h));
|
|
background: var(--color-bg);
|
|
}
|
|
|
|
/* 단계 줄(552-4) — 가로 막대 · compact(28) · 세로 목록(40 · ☰ 서랍) · 상태 = 마우스 · 고름(지금) · 막힘 · 단계 색 테두리 */
|
|
.ui-workflow-layout__steps {
|
|
display: flex;
|
|
gap: var(--spacing-8);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.ui-workflow-layout__steps.is-compact {
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-4);
|
|
overflow: visible;
|
|
}
|
|
|
|
.ui-workflow-layout__steps.is-vertical {
|
|
flex-direction: column;
|
|
overflow: visible;
|
|
}
|
|
|
|
.ui-workflow-layout__step {
|
|
flex: 0 0 auto;
|
|
padding: var(--spacing-4) var(--spacing-16);
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-pills);
|
|
background: var(--color-paper);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
cursor: default;
|
|
transition:
|
|
background-color var(--transition-base),
|
|
color var(--transition-base),
|
|
cursor var(--transition-base);
|
|
}
|
|
|
|
.ui-workflow-layout__steps.is-vertical .ui-workflow-layout__step {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
width: 100%;
|
|
min-height: 40px;
|
|
border-radius: var(--radius-buttons);
|
|
text-align: left;
|
|
white-space: normal;
|
|
}
|
|
|
|
.ui-workflow-layout__step-icon {
|
|
flex: 0 0 var(--spacing-24);
|
|
font-size: var(--text-body);
|
|
line-height: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-workflow-layout__step-label {
|
|
min-width: 0;
|
|
}
|
|
|
|
.ui-workflow-layout__step.is-enabled {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 대시보드 이동 버튼 — 워크플로 단계 목록의 탈출구. 단계 버튼과 구분되게 아래 구분선을 둔다. */
|
|
.ui-workflow-layout__step--home {
|
|
margin-bottom: var(--spacing-4);
|
|
border-bottom: 1px solid var(--color-border);
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.ui-workflow-layout__step.is-enabled:is(:hover, [data-state="hover"]) {
|
|
background: var(--color-hover);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.ui-workflow-layout__steps.is-compact .ui-workflow-layout__step,
|
|
.ui-workflow-layout__step[data-size="28"] {
|
|
height: 28px;
|
|
padding: 0 var(--spacing-12, var(--spacing-8));
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ui-workflow-layout__step.is-active {
|
|
background: var(--color-accent-soft);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.ui-workflow-layout__step:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.ui-workflow-layout__step.state-complete {
|
|
border-color: var(--color-success);
|
|
}
|
|
|
|
.ui-workflow-layout__step.state-in_progress {
|
|
border-color: var(--color-warning);
|
|
}
|
|
|
|
.ui-workflow-layout__step.state-stale {
|
|
border-color: var(--color-text-muted);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.ui-workflow-layout__step.state-failed {
|
|
border-color: var(--color-danger);
|
|
}
|
|
|
|
.ui-workflow-layout__body {
|
|
min-height: calc(100dvh - var(--app-header-h));
|
|
transition: padding-left var(--transition-base);
|
|
}
|
|
|
|
/* 좌측 옵션 사이드바 열림 시 상세화면을 오른쪽으로 밀어냄 */
|
|
.ui-workflow-layout.is-options-open .ui-workflow-layout__body {
|
|
padding-left: min(var(--wf-left-panel-width), calc(100vw - var(--spacing-48)));
|
|
}
|
|
|
|
/* 접힘 시에는 남은 손잡이(24px) 폭만큼 거터를 남긴다 — 손잡이가 그래프 Y축 라벨 등
|
|
본문 글자를 덮지 않게(2026-08-04 사용자 보고: 531.4m 라벨 가려짐). */
|
|
.ui-workflow-layout:not(.is-options-open) .ui-workflow-layout__body {
|
|
padding-left: var(--spacing-24);
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.ui-workflow-layout.is-options-open .ui-workflow-layout__body {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
/* 본문 바탕(556-1) = 페이지 바탕 · 내용 덩어리는 흰 카드 · 그림 판은 제 색(--draw-*) */
|
|
.ui-workflow-layout__main {
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: calc(100dvh - var(--app-header-h));
|
|
overflow: auto;
|
|
background: var(--color-bg);
|
|
}
|
|
|
|
/* ☰ 들여쓰기(7-2) — 본문 첫 줄이 ☰ 자리를 비키려면 본문 왼쪽 끝에서 더 비울 폭.
|
|
좌측 패널이 열려 본문을 민 때는 0 · 접힘(손잡이 24) · 좁은 폭에서 본문 위에 겹친 때는 남은 만큼.
|
|
쪽마다 첫 줄(도구 줄 · 탭 · 제목)이 `padding-left: max(제 여백, var(--wf-burger-pad))` 한 줄로 씀 */
|
|
html.is-bm-route .ui-workflow-layout {
|
|
--wf-burger-pad: max(0px, calc(var(--app-burger-inset) - var(--spacing-24)));
|
|
}
|
|
|
|
html.is-bm-route .ui-workflow-layout.is-options-open {
|
|
--wf-burger-pad: 0px;
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
html.is-bm-route .ui-workflow-layout.is-options-open {
|
|
--wf-burger-pad: var(--app-burger-inset);
|
|
}
|
|
}
|
|
|
|
/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
|
|
:is(.ui-workflow-layout__step, .ui-workflow-layout__steps)[hidden] {
|
|
display: none !important;
|
|
}
|