king/dbx-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(cupang): 달력 헤더 재구성 — 큰 화살표·가운데 제목, 오늘 버튼 중앙 이동

Browse Source 
- 상단 바: ← 제목 → 을 가운데 정렬, 화살표는 테두리 없는 큰 글리프
- "오늘" 버튼을 두 달 사이 상단 중앙으로 이동
- 달 머리글 가운데 정렬, 출고 건수 배지는 오른쪽에 겹쳐 배치

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
king
2026-09-02 14:29:37 +09:00
parent 9cba09d646
commit e259e7d370
6 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/cupang.css
+21 -17
View File
@@ -1033,30 +1033,32 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
══════════════════════════════════════════════════════════════ */
.cpg-cal-card { padding: 16px 18px 14px; }
/* 상단 바: ‹ › + 기간 제목 + 오늘 */
/* 상단 바: ← 기간 제목 → (가운데 정렬) */
.cpg-mcal-bar {
display: flex; align-items: center; gap: 12px;
padding-bottom: 12px; margin-bottom: 14px;
display: flex; align-items: center; justify-content: center; gap: 26px;
padding-bottom: 14px; margin-bottom: 16px;
border-bottom: 1px solid var(--color-subtle-ash);
flex-shrink: 0;
}
.cpg-mcal-nav { display: inline-flex; gap: 4px; }
.cpg-mcal-navbtn {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--color-subtle-ash); border-radius: 8px;
font-size: 17px; line-height: 1; color: var(--color-rich-black);
text-decoration: none; background: #fff;
transition: background .12s, border-color .12s;
width: 48px; height: 36px;
border: 0; background: none; border-radius: 8px;
font-size: 32px; font-weight: 700; line-height: 1;
color: var(--color-deep-black); text-decoration: none;
transition: background .12s, transform .12s;
}
.cpg-mcal-navbtn:hover { background: var(--color-ghost-gray); border-color: var(--color-midtone-gray); }
.cpg-mcal-navbtn:hover { background: var(--color-ghost-gray); }
.cpg-mcal-navbtn:active { transform: scale(.94); }
.cpg-mcal-range {
margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.4px;
margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.4px;
white-space: nowrap;
}
/* 오늘 — 두 달 사이 가운데 위쪽 */
.cpg-mcal-todaybtn {
margin-left: auto;
padding: 6px 14px; border-radius: 999px;
position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
z-index: 2;
padding: 5px 16px; border-radius: 999px;
border: 1px solid var(--color-subtle-ash); background: #fff;
font-size: 13px; color: var(--color-rich-black); text-decoration: none;
}
@@ -1064,6 +1066,7 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
/* 두 달 나란히 */
.cpg-mcal-months {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
@@ -1074,15 +1077,16 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
}
.cpg-mcal { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
/* 달 머리글 */
/* 달 머리글 — 가운데 정렬, 출고 건수는 오른쪽 끝에 겹쳐 놓는다 */
.cpg-mcal-h {
display: flex; align-items: baseline; gap: 6px;
padding: 0 2px 8px;
position: relative;
display: flex; align-items: baseline; justify-content: center; gap: 8px;
padding: 0 2px 10px;
}
.cpg-mcal-mname { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; }
.cpg-mcal-myear { font-size: 24px; font-weight: 800; color: var(--color-midtone-gray); font-family: var(--font-geist-mono); }
.cpg-mcal-total {
margin-left: auto;
position: absolute; right: 2px; top: 8px;
font-size: 11px; padding: 2px 8px; border-radius: 999px;
background: var(--color-ghost-gray); color: var(--color-midtone-gray);
}