Files
Aislo/M02_MasterTemplete/M02_MasterTemplete_UI_Style.css
T
eomsangdonandClaude Sonnet 5 ff0d9775ec feat(ui): 공용 단추 작은 크기 size sm 추가 · M01 표 단추 · M02 단추 적용 · M02 상세 머리 이름 줄바꿈
- createButton 에 size: "sm"(글자 캡션 크기 · 위아래 여백 2px) — 다섯 모양 모두에 먹음 · 기본은 그대로
- M01 표 안 단추는 sm 으로 바꾸고 M01 자체 축소 규칙 삭제
- M02 좌측 새로 · 본떠 만들기 · 지우기 · 카드 수정 단추에 sm
- M02 상세 화면 머리 번호 + 이름 잘림 없이 줄바꿈 · 집계표 카드 머리는 번호 · 수정 한 줄 + 이름 아래 전체 폭

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NWHNLQYPZN7kKf1rzrrRZq
2026-09-28 18:42:23 +09:00

99 lines
2.0 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: wrap;
align-items: center;
gap: var(--spacing-12);
}
.m02-main__title {
flex: 0 1 auto;
min-width: 3rem;
overflow-wrap: anywhere; /* 번호 + 이름 — 잘리지 않게 줄바꿈 */
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;
}
/* 면적산출 · 재료산출 전체 편집 — `.ss` 는 height:100% 로 부모 높이를 받음 · 도면 편집과 같이 메인 칸을 화면 높이로 채움 */
.m02-main:has(> .m02-main__host > .ss) {
box-sizing: border-box;
height: calc(100vh - var(--spacing-64));
min-height: 0;
}
.m02-main__host:has(> .ss) {
display: flex;
flex: 1 1 0;
min-height: 0;
}
.m02-main__host > .ss {
flex: 1 1 0;
min-width: 0;
}
.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);
}