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

ui(vacation): 달력 날짜 정사각형 셀 + 큰 글자 + 안쪽 테두리 + bar 오버레이

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
king
2026-05-30 08:33:15 +09:00
parent 8c6539d6cb
commit bec9c5e5a6
6 changed files with 59 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/vacation.css
+27 -21
View File
@@ -57,46 +57,52 @@
background: var(--vac-ghost); border-bottom: 1px solid var(--vac-ash);
}
.vac-wd {
text-align: center; padding: 6px 0; font-size: 13px; font-weight: 500;
text-align: center; padding: 8px 0; font-size: 15px; font-weight: 600;
color: var(--vac-black);
border-right: 1px solid var(--vac-ash);
}
.vac-wd:last-child { border-right: none; }
/* 주(week) — 1행=날짜, 2행+=bar lane */
.vac-week {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
grid-template-rows: 30px;
grid-auto-rows: 21px;
border-bottom: 1px solid var(--vac-ash);
padding-bottom: 4px;
position: relative;
}
/* 주(week) — 정사각형 날짜 셀 위에 bar 레이어를 오버레이 */
.vac-week { position: relative; border-bottom: 1px solid var(--vac-ash); }
.vac-week:last-child { border-bottom: none; }
.vac-day {
border-right: 1px solid var(--vac-ash);
padding: 4px 6px; text-decoration: none;
display: block; min-height: 30px;
.vac-week-days {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
}
.vac-day:nth-child(7n) { border-right: none; }
.vac-day-num { font-size: 13px; font-weight: 500; color: var(--vac-black); }
.vac-day {
aspect-ratio: 1 / 1; /* 정사각형 */
border-right: 1px solid var(--vac-ash);
padding: 6px 8px; text-decoration: none;
display: block; box-sizing: border-box;
}
.vac-day:last-child { border-right: none; }
.vac-day-num { font-size: 16px; font-weight: 600; color: var(--vac-black); }
.vac-out { background: #fafafa; }
.vac-out .vac-day-num { color: #bbb; }
.vac-today { background: #f5f5f5; }
.vac-today .vac-day-num {
background: var(--vac-black); color: #fff; border-radius: 9999px;
padding: 1px 7px;
padding: 2px 9px;
}
.vac-selected { box-shadow: inset 0 0 0 2px var(--vac-black); }
.vac-red { color: var(--vac-red) !important; }
.vac-blue { color: var(--vac-blue) !important; }
/* bar 오버레이 — 날짜 숫자 아래(top)부터 7열 그리드로 겹쳐 그림 */
.vac-week-bars {
position: absolute; left: 0; right: 0; top: 30px; bottom: 4px;
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
grid-auto-rows: 22px; row-gap: 3px;
pointer-events: none;
}
/* ── 휴가 bar (구글 달력 스타일) ── */
.vac-bar {
margin: 1px 3px; padding: 0 6px; height: 18px; line-height: 18px;
border-radius: 6px; font-size: 11px; text-decoration: none;
margin: 0 3px; padding: 0 8px; height: 20px; line-height: 20px;
border-radius: 6px; font-size: 13px; text-decoration: none;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
align-self: center;
align-self: center; pointer-events: auto;
}
.vac-bar-label { pointer-events: none; }
.vac-bar-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }