feat(cupang): 배분 완료 도장·완료 카드 흐리게, 박스명 배지 제거
- ② 제품별 카드에서 "쿠팡박스" 배지 제거(모든 규칙이 같은 박스명이라 무의미) - 배분이 끝난 제품 카드·혼합 박스에 파란 "배분 완료" 도장(살짝 기울어진 테두리, 찍히는 애니메이션) - 완료된 카드는 글자를 회색으로 낮추고, 혼합 박스는 상자 아이콘까지 흑백 처리해 남은 카드와 한눈에 구분되게 함 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -730,3 +730,40 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
|
||||
.cpg-tree-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.cpg-tree-qty { font-weight: 600; color: var(--color-rich-black); }
|
||||
.cpg-tree-per { font-size: 11px; }
|
||||
|
||||
/* 배분 완료 도장 */
|
||||
.cpg-stamp {
|
||||
--stamp: #1d5fd0;
|
||||
flex: 0 0 auto;
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border: 2px solid var(--stamp);
|
||||
border-radius: 6px;
|
||||
color: var(--stamp);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
opacity: .85;
|
||||
transform: rotate(-7deg);
|
||||
box-shadow: inset 0 0 0 1px rgba(29, 95, 208, .25);
|
||||
animation: cpg-stamp-in .22s ease-out;
|
||||
}
|
||||
@keyframes cpg-stamp-in {
|
||||
from { opacity: 0; transform: rotate(-7deg) scale(1.6); }
|
||||
to { opacity: .85; transform: rotate(-7deg) scale(1); }
|
||||
}
|
||||
|
||||
/* 배분이 끝난 카드는 흐리게 — 글자·상자 아이콘 모두 */
|
||||
.cpg-sum-prod.is-done, .cpg-box-card.is-done { opacity: 1; }
|
||||
.cpg-sum-prod.is-done .cpg-sum-prod-name,
|
||||
.cpg-sum-prod.is-done .cpg-sum-prod-nums,
|
||||
.cpg-box-card.is-done .cpg-box-title,
|
||||
.cpg-box-card.is-done .cpg-box-items,
|
||||
.cpg-box-card.is-done .cpg-box-fillnum { color: var(--color-midtone-gray); opacity: .6; }
|
||||
.cpg-sum-prod.is-done .cpg-sum-prod-nums strong,
|
||||
.cpg-box-card.is-done .cpg-box-items b { color: var(--color-midtone-gray); }
|
||||
.cpg-box-card.is-done .cpg-box-svg { filter: grayscale(1); opacity: .45; }
|
||||
.cpg-box-card.is-done .cpg-box-bar { opacity: .4; }
|
||||
.cpg-sum-prod.is-done .cpg-stamp, .cpg-box-card.is-done .cpg-stamp { opacity: .85; }
|
||||
|
||||
Reference in New Issue
Block a user