- ui_template_overlay.css 에 ui-sidebar-panel · ui-sidebar-card · ui-sidebar-list · ui-sidebar-row 공용 클래스 추가 - M01·M02 좌측 코드가 공용 클래스를 씀 — 카드 여백·둥글기·바탕 · 목록 간격 · 줄 선택 표시 한 벌 - M02 좌측 전용 CSS 중복 규칙 제거(없는 토큰 --radius-md 로 둥글기 안 먹던 것도 해소) - M02 표/도면/구조물 카드 처음 접힘으로 M01 과 맞춤 · 새로·본떠·지우기 단추 줄 카드 안으로 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01K7JS47SacjPxZ718QsZKyr
84 lines
1.6 KiB
CSS
84 lines
1.6 KiB
CSS
/* M02 마스터 템플릿 — 좌측 패널 + 메인. 카드·목록·줄 모양은 공용 ui-sidebar-*
|
|
(ui_template_overlay.css, M01 과 한 벌) — 여기는 패널 위 여백만. */
|
|
.m02-side {
|
|
padding-top: var(--spacing-8);
|
|
}
|
|
|
|
.m02-side__empty {
|
|
margin: 0;
|
|
color: var(--color-text-muted);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.m02-side__row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.m02-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-12);
|
|
min-width: 0;
|
|
padding: var(--spacing-16) var(--spacing-24);
|
|
}
|
|
|
|
.m02-main__head {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
gap: var(--spacing-12);
|
|
}
|
|
|
|
.m02-main__title {
|
|
flex: 0 1 auto;
|
|
min-width: 3rem;
|
|
max-width: 9rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin: 0;
|
|
color: var(--color-text);
|
|
font-size: var(--text-body);
|
|
}
|
|
|
|
.m02-main__head .ui-btn {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.m02-main__slot {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
.m02-main__notice {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
border-left: 4px solid var(--color-danger);
|
|
background: color-mix(in srgb, var(--color-danger) 10%, var(--color-canvas));
|
|
color: var(--color-danger);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.m02-main__host {
|
|
min-height: 240px;
|
|
}
|
|
|
|
.m02-main__empty {
|
|
margin: 0;
|
|
padding: var(--spacing-24);
|
|
color: var(--color-text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.m02-modal__field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
}
|