149 lines
3.9 KiB
CSS
149 lines
3.9 KiB
CSS
.ui-workflow-overlay {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ui-workflow-overlay__panel {
|
|
position: fixed;
|
|
top: calc(var(--spacing-64) + var(--spacing-16));
|
|
z-index: var(--z-dropdown);
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: calc(100vh - var(--spacing-64) - var(--spacing-32));
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-cards);
|
|
background: var(--color-surface-raised);
|
|
box-shadow: var(--shadow-lg);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* title 패널: 헤더 아래 전체 높이 도킹 사이드바 (열림: 본문 밀기 / 닫힘: 좌측으로 슬라이드 아웃) */
|
|
.ui-workflow-overlay__panel--title {
|
|
top: var(--spacing-64);
|
|
bottom: 0;
|
|
left: 0;
|
|
width: min(var(--wf-left-panel-width), calc(100vw - var(--spacing-48)));
|
|
max-height: none;
|
|
overflow: visible;
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
border-left: 0;
|
|
border-radius: 0;
|
|
transition: transform var(--transition-base);
|
|
}
|
|
|
|
.ui-workflow-overlay__panel--title.is-collapsed {
|
|
transform: translateX(-100%);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ui-workflow-overlay__panel--title .ui-workflow-overlay__body {
|
|
flex: 1;
|
|
}
|
|
|
|
/* 닫힘 전환 중에도 내용이 함께 슬라이드되도록 body를 숨기지 않음 */
|
|
.ui-workflow-overlay__panel--title.is-collapsed .ui-workflow-overlay__body {
|
|
display: block;
|
|
}
|
|
|
|
.ui-workflow-overlay__panel--progress {
|
|
right: var(--spacing-24);
|
|
width: calc(var(--wf-left-panel-width) / 2);
|
|
}
|
|
|
|
.ui-workflow-overlay__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-12, var(--spacing-8));
|
|
min-height: var(--spacing-48);
|
|
padding: var(--spacing-8) var(--spacing-16);
|
|
}
|
|
|
|
.ui-workflow-overlay__title {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--color-text);
|
|
font-size: var(--text-body);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ui-workflow-overlay__toggle {
|
|
flex: 0 0 auto;
|
|
width: var(--spacing-32);
|
|
height: var(--spacing-32);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-buttons);
|
|
background: var(--color-canvas);
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ui-workflow-overlay__handle {
|
|
position: absolute;
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-surface-raised);
|
|
color: var(--color-text);
|
|
box-shadow: var(--shadow-lg);
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.ui-workflow-overlay__handle-icon {
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
margin: auto;
|
|
border-top: 5px solid transparent;
|
|
border-bottom: 5px solid transparent;
|
|
border-left: 7px solid currentcolor;
|
|
transition: transform var(--transition-fast);
|
|
}
|
|
|
|
/* title 패널 우측 가장자리 세로 중앙 핸들 — 닫히면 이 버튼만 화면 왼쪽에 남음 */
|
|
.ui-workflow-overlay__handle--side {
|
|
top: 50%;
|
|
right: calc(-1 * var(--spacing-24));
|
|
width: var(--spacing-24);
|
|
height: var(--spacing-64);
|
|
transform: translateY(-50%);
|
|
border-left: 0;
|
|
border-radius: 0 var(--radius-buttons) var(--radius-buttons) 0;
|
|
}
|
|
|
|
/* 하단 도킹 패널 상단 중앙 핸들 */
|
|
.ui-workflow-overlay__handle--bottom {
|
|
z-index: 2;
|
|
top: calc(-1 * var(--spacing-24));
|
|
left: 50%;
|
|
width: var(--spacing-64);
|
|
height: var(--spacing-24);
|
|
transform: translateX(-50%);
|
|
border-bottom: 0;
|
|
border-radius: var(--radius-buttons) var(--radius-buttons) 0 0;
|
|
}
|
|
|
|
.ui-workflow-overlay__body {
|
|
overflow-y: auto;
|
|
padding: 0 var(--spacing-16) var(--spacing-16);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
.ui-workflow-overlay__panel.is-collapsed .ui-workflow-overlay__body {
|
|
display: none;
|
|
}
|
|
|
|
.ui-workflow-overlay__panel.is-collapsed .ui-workflow-overlay__header {
|
|
padding: var(--spacing-8) var(--spacing-16);
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.ui-workflow-overlay__panel--progress {
|
|
top: calc(var(--spacing-64) + var(--spacing-8));
|
|
right: var(--spacing-8);
|
|
max-height: calc(100vh - var(--spacing-64) - var(--spacing-16));
|
|
}
|
|
}
|