king
4be7c7f580
.erp-page 는 flex column + overflow-y:auto 인데 자식의 flex-shrink 기본값이
1 이라, 내용이 화면 높이보다 길어지면 카드가 눌려 아래쪽이 잘렸다. 넘친 게
없다고 판단되어 스크롤바도 생기지 않아 시스템 화면의 연결 버튼에 접근할 수
없었다.
카페24 템플릿에서만 로드되는 cafe24.css 에 `.erp-page > * { flex-shrink: 0 }`
를 넣어 축소를 막았다. 전역 erp-shell.css 를 고치지 않은 것은 다른 모듈
(휴가·쿠팡 등)이 .vac/.cpg 로 "한 화면 채움" 레이아웃을 쓰고 있어 회귀 위험이
있기 때문이다.
캐시된 CSS 가 쓰이지 않게 두 템플릿의 버전 쿼리를 20260814a→b 로 올렸다.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
106 lines
2.3 KiB
CSS
106 lines
2.3 KiB
CSS
/* 카페24 상품관리 모듈 전용 스타일.
|
|
전역(erp.css) 은 건드리지 않는다. 클래스 접두사: cf24-
|
|
색상은 erp.css 의 :root 토큰을 재사용한다. */
|
|
|
|
/* .erp-page 는 flex column + overflow-y:auto 다. 자식의 flex-shrink 기본값이
|
|
1 이라 내용이 화면보다 길면 카드가 눌려 잘리고(스크롤도 안 생긴다),
|
|
시스템 화면의 [카페24 연결] 버튼처럼 카드 아래쪽이 사라진다.
|
|
축소를 막아 넘친 만큼 .erp-page 가 스크롤하게 한다.
|
|
이 파일은 카페24 템플릿에서만 로드되므로 다른 모듈에는 영향이 없다. */
|
|
.erp-page > * {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.cf24-card {
|
|
margin-bottom: var(--sp-16, 16px);
|
|
}
|
|
|
|
.cf24-card-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-8, 8px);
|
|
margin-bottom: var(--sp-12, 12px);
|
|
}
|
|
|
|
.cf24-card-head h3 {
|
|
margin: 0;
|
|
font-size: var(--text-heading, 18px);
|
|
letter-spacing: -0.45px;
|
|
}
|
|
|
|
.cf24-muted {
|
|
color: var(--color-midtone-gray, #737373);
|
|
font-size: var(--text-caption, 12px);
|
|
}
|
|
|
|
.cf24-err {
|
|
color: var(--color-callout-red, #c22b10);
|
|
}
|
|
|
|
.cf24-nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 상태 배지 */
|
|
.cf24-badge-ok {
|
|
background: var(--color-success-green, #10c22b);
|
|
color: #fff;
|
|
}
|
|
|
|
.cf24-badge-off {
|
|
background: var(--color-ghost-gray, #f2f2f2);
|
|
color: var(--color-rich-black, #0a0a0a);
|
|
}
|
|
|
|
/* 안내/오류 배너 */
|
|
.cf24-flash {
|
|
padding: var(--sp-10, 10px) var(--sp-12, 12px);
|
|
border-radius: var(--r-lg, 10px);
|
|
margin-bottom: var(--sp-12, 12px);
|
|
font-size: var(--text-body, 14px);
|
|
}
|
|
|
|
.cf24-flash-ok {
|
|
background: #eefaf0;
|
|
border: 1px solid var(--color-success-green, #10c22b);
|
|
}
|
|
|
|
.cf24-flash-err {
|
|
background: #fdefec;
|
|
border: 1px solid var(--color-callout-red, #c22b10);
|
|
}
|
|
|
|
/* 키-값 표 */
|
|
.cf24-kv th {
|
|
width: 180px;
|
|
text-align: left;
|
|
color: var(--color-midtone-gray, #737373);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cf24-actions {
|
|
display: flex;
|
|
gap: var(--sp-8, 8px);
|
|
align-items: center;
|
|
margin-top: var(--sp-12, 12px);
|
|
}
|
|
|
|
/* 넓은 로그 표는 카드 안에서만 가로 스크롤 */
|
|
.cf24-scroll {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.cf24-scroll code {
|
|
font-family: var(--font-geist-mono, ui-monospace, monospace);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.cf24-empty {
|
|
padding: var(--sp-24, 24px);
|
|
}
|
|
|
|
.cf24-empty h3 {
|
|
margin: 0 0 var(--sp-8, 8px);
|
|
}
|