bf4000c4ae
tkqc 5개 페이지 인라인 JS/CSS를 외부 파일로 추출 (HTML 82% 감소) tkuser index.html을 CSS 1개 + JS 10개 모듈로 분리 (3283→1155줄) - 공통 유틸 추출: issue-helpers, photo-modal, toast - 공통 CSS 확장: tkqc-common.css (모바일 반응형 포함) - 모바일 하단 네비게이션 추가 (mobile-bottom-nav.js) - nginx: JS/CSS 1시간 캐싱 + gzip 압축 활성화 - Tailwind CDN preload, 캐시버스터 통일 (?v=20260213) - 카메라 capture="environment" 추가 - tkuser Dockerfile에 static/ 디렉토리 복사 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
74 lines
1.9 KiB
CSS
74 lines
1.9 KiB
CSS
/* issues-dashboard.css — 현황판 페이지 전용 스타일 */
|
|
|
|
/* 대시보드 페이지는 @keyframes 기반 애니메이션 사용 (공통 CSS와 다른 방식) */
|
|
.fade-in { opacity: 0; animation: fadeIn 0.5s ease-in forwards; }
|
|
@keyframes fadeIn { to { opacity: 1; } }
|
|
|
|
.header-fade-in { opacity: 0; animation: headerFadeIn 0.6s ease-out forwards; }
|
|
@keyframes headerFadeIn { to { opacity: 1; transform: translateY(0); } from { transform: translateY(-10px); } }
|
|
|
|
.content-fade-in { opacity: 0; animation: contentFadeIn 0.7s ease-out 0.2s forwards; }
|
|
@keyframes contentFadeIn { to { opacity: 1; transform: translateY(0); } from { transform: translateY(20px); } }
|
|
|
|
/* 대시보드 카드 스타일 */
|
|
.dashboard-card {
|
|
transition: all 0.2s ease;
|
|
background: #ffffff;
|
|
border-left: 4px solid #64748b;
|
|
}
|
|
|
|
.dashboard-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* 이슈 카드 스타일 (대시보드 전용 오버라이드) */
|
|
.issue-card {
|
|
transition: all 0.2s ease;
|
|
border-left: 4px solid transparent;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.issue-card:hover {
|
|
transform: translateY(-2px);
|
|
border-left-color: #475569;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.issue-card label {
|
|
font-weight: 600;
|
|
color: #374151;
|
|
}
|
|
|
|
.issue-card .bg-gray-50 {
|
|
background-color: #f9fafb;
|
|
border: 1px solid #e5e7eb;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.issue-card .bg-gray-50:hover {
|
|
background-color: #f3f4f6;
|
|
}
|
|
|
|
.issue-card .fas.fa-image:hover {
|
|
transform: scale(1.2);
|
|
color: #3b82f6;
|
|
}
|
|
|
|
/* 진행 중 애니메이션 */
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.animate-pulse {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
/* 반응형 그리드 */
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|