security: 보안 강제 시스템 구축 + 하드코딩 비밀번호 제거
보안 감사 결과 CRITICAL 2건, HIGH 5건 발견 → 수정 완료 + 자동화 구축. [보안 수정] - issue-view.js: 하드코딩 비밀번호 → crypto.getRandomValues() 랜덤 생성 - pushSubscriptionController.js: ntfy 비밀번호 → process.env.NTFY_SUB_PASSWORD - DEPLOY-GUIDE.md/PROGRESS.md/migration SQL: 평문 비밀번호 → placeholder - docker-compose.yml/.env.example: NTFY_SUB_PASSWORD 환경변수 추가 [보안 강제 시스템 - 신규] - scripts/security-scan.sh: 8개 규칙 (CRITICAL 2, HIGH 4, MEDIUM 2) 3모드(staged/all/diff), severity, .securityignore, MEDIUM 임계값 - .githooks/pre-commit: 로컬 빠른 피드백 - .githooks/pre-receive-server.sh: Gitea 서버 최종 차단 bypass 거버넌스([SECURITY-BYPASS: 사유] + 사용자 제한 + 로그) - SECURITY-CHECKLIST.md: 10개 카테고리 자동/수동 구분 - docs/SECURITY-GUIDE.md: 운영자 가이드 (워크플로우, bypass, FAQ) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
1303
system1-factory/web/public/css/daily-patrol.css
Normal file
1303
system1-factory/web/public/css/daily-patrol.css
Normal file
File diff suppressed because it is too large
Load Diff
292
system1-factory/web/public/css/daily-status.css
Normal file
292
system1-factory/web/public/css/daily-status.css
Normal file
@@ -0,0 +1,292 @@
|
||||
/* daily-status.css — 일별 입력 현황 대시보드 */
|
||||
|
||||
/* Header */
|
||||
.ds-header {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
color: white;
|
||||
padding: 16px 16px 12px;
|
||||
border-radius: 0 0 16px 16px;
|
||||
margin: -16px -16px 0;
|
||||
position: sticky;
|
||||
top: 56px;
|
||||
z-index: 20;
|
||||
}
|
||||
.ds-header h1 { font-size: 1.125rem; font-weight: 700; }
|
||||
|
||||
/* Date Navigation */
|
||||
.ds-date-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
margin: 12px 0;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
}
|
||||
.ds-date-btn {
|
||||
width: 36px; height: 36px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #6b7280;
|
||||
background: #f3f4f6;
|
||||
border: none; cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.ds-date-btn:hover { background: #e5e7eb; color: #374151; }
|
||||
.ds-date-btn:disabled { opacity: 0.3; cursor: not-allowed; }
|
||||
.ds-date-display {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
cursor: pointer; user-select: none;
|
||||
}
|
||||
.ds-date-display #dateText { font-size: 1rem; font-weight: 700; color: #1f2937; }
|
||||
.ds-day-label { font-size: 0.75rem; color: #6b7280; }
|
||||
|
||||
/* Summary Cards */
|
||||
.ds-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.ds-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 12px 8px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
border-top: 3px solid transparent;
|
||||
}
|
||||
.ds-card:active { transform: scale(0.97); }
|
||||
.ds-card-total { border-top-color: #3b82f6; }
|
||||
.ds-card-done { border-top-color: #16a34a; }
|
||||
.ds-card-missing { border-top-color: #dc2626; }
|
||||
.ds-card-num { font-size: 1.5rem; font-weight: 800; color: #1f2937; line-height: 1; }
|
||||
.ds-card-label { font-size: 0.7rem; color: #6b7280; margin-top: 4px; }
|
||||
.ds-card-pct { font-size: 0.7rem; font-weight: 600; color: #9ca3af; margin-top: 2px; }
|
||||
.ds-card-done .ds-card-pct { color: #16a34a; }
|
||||
.ds-card-missing .ds-card-pct { color: #dc2626; }
|
||||
|
||||
/* Filter Tabs */
|
||||
.ds-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.ds-tab {
|
||||
flex: 1;
|
||||
padding: 8px 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
text-align: center;
|
||||
}
|
||||
.ds-tab.active { background: white; color: #2563eb; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
||||
.ds-tab-badge {
|
||||
display: inline-flex;
|
||||
align-items: center; justify-content: center;
|
||||
min-width: 18px; height: 18px;
|
||||
font-size: 0.65rem; font-weight: 700;
|
||||
background: #e5e7eb; color: #6b7280;
|
||||
border-radius: 9px;
|
||||
padding: 0 5px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.ds-tab.active .ds-tab-badge { background: #dbeafe; color: #2563eb; }
|
||||
|
||||
/* Worker List */
|
||||
.ds-list { padding-bottom: 140px; }
|
||||
.ds-worker-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 6px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.ds-worker-row:active { background: #f9fafb; }
|
||||
|
||||
.ds-status-dot {
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ds-status-dot.complete { background: #16a34a; }
|
||||
.ds-status-dot.tbm_only, .ds-status-dot.report_only { background: #f59e0b; }
|
||||
.ds-status-dot.both_missing { background: #dc2626; }
|
||||
|
||||
.ds-worker-info { flex: 1; min-width: 0; }
|
||||
.ds-worker-name { font-size: 0.875rem; font-weight: 600; color: #1f2937; }
|
||||
.ds-worker-dept { font-size: 0.7rem; color: #9ca3af; }
|
||||
.ds-worker-status { text-align: right; flex-shrink: 0; }
|
||||
.ds-worker-status span {
|
||||
display: inline-block;
|
||||
font-size: 0.65rem;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.ds-badge-ok { background: #dcfce7; color: #16a34a; }
|
||||
.ds-badge-no { background: #fef2f2; color: #dc2626; }
|
||||
.ds-badge-proxy { background: #ede9fe; color: #7c3aed; font-size: 0.6rem; }
|
||||
|
||||
/* Skeleton */
|
||||
.ds-skeleton {
|
||||
height: 56px;
|
||||
background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: ds-shimmer 1.5s infinite;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
@keyframes ds-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
||||
|
||||
/* Empty / No Permission */
|
||||
.ds-empty, .ds-no-perm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 48px 16px;
|
||||
color: #9ca3af;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.ds-link { color: #2563eb; font-size: 0.8rem; text-decoration: underline; }
|
||||
|
||||
/* Bottom Action */
|
||||
.ds-bottom-action {
|
||||
position: fixed;
|
||||
bottom: calc(68px + env(safe-area-inset-bottom, 0px));
|
||||
left: 0; right: 0;
|
||||
padding: 10px 16px;
|
||||
background: white;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
z-index: 30;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.ds-proxy-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.ds-proxy-btn:hover { background: #1d4ed8; }
|
||||
.ds-proxy-btn:disabled { background: #d1d5db; cursor: not-allowed; }
|
||||
|
||||
/* Bottom Sheet */
|
||||
.ds-sheet-overlay {
|
||||
position: fixed; inset: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
z-index: 40;
|
||||
}
|
||||
.ds-sheet {
|
||||
position: fixed;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
background: white;
|
||||
border-radius: 16px 16px 0 0;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
z-index: 41;
|
||||
padding: 0 16px 24px;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.ds-sheet.open { transform: translateY(0); }
|
||||
.ds-sheet-handle {
|
||||
width: 40px; height: 4px;
|
||||
background: #d1d5db;
|
||||
border-radius: 2px;
|
||||
margin: 10px auto 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ds-sheet-header {
|
||||
display: flex; align-items: baseline; gap: 8px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.ds-sheet-header span:first-child { font-size: 1rem; font-weight: 700; color: #1f2937; }
|
||||
.ds-sheet-sub { font-size: 0.75rem; color: #9ca3af; }
|
||||
.ds-sheet-body { min-height: 80px; }
|
||||
.ds-sheet-loading { text-align: center; padding: 24px; color: #9ca3af; font-size: 0.875rem; }
|
||||
|
||||
.ds-sheet-section { margin-bottom: 12px; }
|
||||
.ds-sheet-section-title {
|
||||
font-size: 0.75rem; font-weight: 700; color: #6b7280;
|
||||
margin-bottom: 6px;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.ds-sheet-card {
|
||||
background: #f9fafb;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
font-size: 0.8rem;
|
||||
color: #374151;
|
||||
}
|
||||
.ds-sheet-card.empty { color: #9ca3af; text-align: center; }
|
||||
|
||||
.ds-sheet-actions {
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
}
|
||||
.ds-sheet-btn {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Bottom Nav (reuse tbm-mobile pattern) */
|
||||
.m-bottom-nav {
|
||||
position: fixed; bottom: 0; left: 0; right: 0;
|
||||
display: flex; justify-content: space-around;
|
||||
background: white;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
|
||||
z-index: 35;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.m-nav-item {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
gap: 2px; color: #9ca3af;
|
||||
text-decoration: none;
|
||||
font-size: 0.65rem;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.m-nav-item svg { width: 22px; height: 22px; }
|
||||
.m-nav-item.active { color: #2563eb; }
|
||||
.m-nav-label { font-weight: 500; }
|
||||
|
||||
@media (max-width: 480px) {
|
||||
body { max-width: 480px; margin: 0 auto; }
|
||||
}
|
||||
1318
system1-factory/web/public/css/daily-work-report-mobile.css
Normal file
1318
system1-factory/web/public/css/daily-work-report-mobile.css
Normal file
File diff suppressed because it is too large
Load Diff
2389
system1-factory/web/public/css/daily-work-report.css
Normal file
2389
system1-factory/web/public/css/daily-work-report.css
Normal file
File diff suppressed because it is too large
Load Diff
509
system1-factory/web/public/css/equipment-detail.css
Normal file
509
system1-factory/web/public/css/equipment-detail.css
Normal file
@@ -0,0 +1,509 @@
|
||||
/* equipment-detail.css - 설비 상세 페이지 스타일 */
|
||||
|
||||
/* 헤더 */
|
||||
.eq-detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.eq-detail-header .page-title-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.back-arrow {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.eq-header-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.eq-header-meta {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.eq-status-badge {
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.eq-status-badge.active { background: #d1fae5; color: #065f46; }
|
||||
.eq-status-badge.maintenance { background: #fef3c7; color: #92400e; }
|
||||
.eq-status-badge.repair_needed { background: #fee2e2; color: #991b1b; }
|
||||
.eq-status-badge.inactive { background: #e5e7eb; color: #374151; }
|
||||
.eq-status-badge.external { background: #dbeafe; color: #1e40af; }
|
||||
.eq-status-badge.repair_external { background: #ede9fe; color: #5b21b6; }
|
||||
|
||||
/* 기본 정보 카드 */
|
||||
.eq-info-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.eq-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.eq-info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.eq-info-label {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.eq-info-value {
|
||||
font-size: 0.9375rem;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
/* 섹션 */
|
||||
.eq-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.eq-section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.eq-section-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 사진 그리드 */
|
||||
.eq-photo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.eq-photo-item {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.eq-photo-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.eq-photo-item:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.eq-photo-delete {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: rgba(239, 68, 68, 0.9);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.eq-photo-item:hover .eq-photo-delete {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.eq-photo-empty {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #9ca3af;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* 위치 정보 */
|
||||
.eq-location-card {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.eq-location-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.eq-location-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.eq-location-label {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.eq-location-value {
|
||||
font-size: 0.875rem;
|
||||
color: #111827;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.eq-location-value.eq-moved {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.eq-map-preview {
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.eq-map-preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.eq-map-marker {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #dc2626;
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* 액션 버튼 */
|
||||
.eq-action-buttons {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.875rem 1rem;
|
||||
border-radius: 10px;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.btn-action .btn-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.btn-move {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
.btn-move:hover { background: #bfdbfe; }
|
||||
|
||||
.btn-repair {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
.btn-repair:hover { background: #fde68a; }
|
||||
|
||||
.btn-export {
|
||||
background: #ede9fe;
|
||||
color: #5b21b6;
|
||||
}
|
||||
.btn-export:hover { background: #ddd6fe; }
|
||||
|
||||
/* 이력 리스트 */
|
||||
.eq-history-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.eq-history-item {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 0.875rem;
|
||||
background: #f9fafb;
|
||||
border-radius: 8px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.eq-history-date {
|
||||
font-size: 0.8125rem;
|
||||
color: #6b7280;
|
||||
white-space: nowrap;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.eq-history-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.eq-history-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #111827;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.eq-history-detail {
|
||||
font-size: 0.8125rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.eq-history-status {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.eq-history-status.pending { background: #fef3c7; color: #92400e; }
|
||||
.eq-history-status.in_progress { background: #dbeafe; color: #1e40af; }
|
||||
.eq-history-status.completed { background: #d1fae5; color: #065f46; }
|
||||
.eq-history-status.exported { background: #ede9fe; color: #5b21b6; }
|
||||
.eq-history-status.returned { background: #d1fae5; color: #065f46; }
|
||||
|
||||
.eq-history-empty {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
color: #9ca3af;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.eq-history-action {
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: #10b981;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.eq-history-action:hover {
|
||||
background: #059669;
|
||||
}
|
||||
|
||||
/* 모달 스타일 추가 */
|
||||
.photo-preview-container {
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.photo-preview {
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.move-step {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.move-instruction {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.move-map-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.move-map-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.move-marker {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #dc2626;
|
||||
border: 3px solid white;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-label input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.repair-photo-previews {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.repair-photo-preview {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 사진 확대 보기 */
|
||||
.photo-view-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.photo-view-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.photo-view-image {
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* 버튼 스타일 */
|
||||
.btn-sm {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 1px solid #d1d5db;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
/* 반응형 */
|
||||
@media (max-width: 768px) {
|
||||
.eq-detail-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.eq-location-card {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.eq-map-preview {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.eq-action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.eq-info-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
361
system1-factory/web/public/css/equipment-management.css
Normal file
361
system1-factory/web/public/css/equipment-management.css
Normal file
@@ -0,0 +1,361 @@
|
||||
/* equipment-management.css */
|
||||
/* 설비 관리 페이지 전용 스타일 */
|
||||
|
||||
/* 통계 요약 섹션 */
|
||||
.eq-stats-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.eq-stat-card {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.eq-stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.eq-stat-card.highlight {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.eq-stat-card.highlight .eq-stat-label {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.eq-stat-label {
|
||||
font-size: 0.8rem;
|
||||
color: #64748b;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.eq-stat-value {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.eq-stat-sub {
|
||||
font-size: 0.75rem;
|
||||
color: #94a3b8;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.eq-stat-card.highlight .eq-stat-sub {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* 필터 섹션 개선 */
|
||||
.eq-filter-section {
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.eq-filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.eq-filter-group label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.eq-filter-group .form-control {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.eq-filter-group .form-control:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.eq-search-group {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.eq-search-group .form-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 테이블 개선 */
|
||||
.eq-table-container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.eq-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.eq-table thead {
|
||||
background: #f1f5f9;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.eq-table th {
|
||||
padding: 0.875rem 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 2px solid #e2e8f0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.eq-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.eq-table tbody tr {
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.eq-table tbody tr:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.eq-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 테이블 컬럼별 스타일 */
|
||||
.eq-col-code {
|
||||
font-weight: 600;
|
||||
color: #1e40af;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.eq-col-name {
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.eq-col-model,
|
||||
.eq-col-spec {
|
||||
color: #64748b;
|
||||
font-size: 0.8125rem;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.eq-col-price {
|
||||
font-weight: 600;
|
||||
color: #059669;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.eq-col-date {
|
||||
color: #64748b;
|
||||
font-size: 0.8125rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 상태 배지 */
|
||||
.eq-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.eq-status-active {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.eq-status-maintenance {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.eq-status-inactive {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
/* 액션 버튼 */
|
||||
.eq-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.eq-btn-action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.eq-btn-edit {
|
||||
background: #eff6ff;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.eq-btn-edit:hover {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.eq-btn-delete {
|
||||
background: #fef2f2;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.eq-btn-delete:hover {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 빈 상태 */
|
||||
.eq-empty-state {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.eq-empty-state p {
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* 테이블 스크롤 래퍼 */
|
||||
.eq-table-wrapper {
|
||||
overflow-x: auto;
|
||||
max-height: calc(100vh - 380px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 결과 카운트 */
|
||||
.eq-result-count {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
font-size: 0.8125rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.eq-result-count strong {
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
/* 반응형 */
|
||||
@media (max-width: 1200px) {
|
||||
.eq-stats-section {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.eq-stats-section {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.eq-filter-section {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.eq-filter-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.eq-table th,
|
||||
.eq-table td {
|
||||
padding: 0.625rem 0.75rem;
|
||||
}
|
||||
|
||||
.eq-col-spec,
|
||||
.eq-col-model {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 모달 개선 */
|
||||
.eq-modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.eq-form-section {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.eq-form-section:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.eq-form-section-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #3b82f6;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.eq-form-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.eq-form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
1040
system1-factory/web/public/css/mobile.css
Normal file
1040
system1-factory/web/public/css/mobile.css
Normal file
File diff suppressed because it is too large
Load Diff
4011
system1-factory/web/public/css/modern-dashboard.css
Normal file
4011
system1-factory/web/public/css/modern-dashboard.css
Normal file
File diff suppressed because it is too large
Load Diff
381
system1-factory/web/public/css/monthly-comparison.css
Normal file
381
system1-factory/web/public/css/monthly-comparison.css
Normal file
@@ -0,0 +1,381 @@
|
||||
/* monthly-comparison.css — 월간 비교·확인·정산 */
|
||||
|
||||
/* Header */
|
||||
.mc-header {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
color: white;
|
||||
padding: 14px 16px;
|
||||
border-radius: 0 0 16px 16px;
|
||||
margin: -16px -16px 0;
|
||||
position: sticky;
|
||||
top: 56px;
|
||||
z-index: 20;
|
||||
}
|
||||
.mc-header-row { display: flex; align-items: center; gap: 12px; }
|
||||
.mc-back-btn {
|
||||
width: 32px; height: 32px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: rgba(255,255,255,0.15);
|
||||
border-radius: 8px;
|
||||
border: none; color: white; cursor: pointer;
|
||||
}
|
||||
.mc-header h1 { font-size: 1.05rem; font-weight: 700; flex: 1; }
|
||||
.mc-view-toggle {
|
||||
width: 32px; height: 32px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: rgba(255,255,255,0.15);
|
||||
border-radius: 8px;
|
||||
border: none; color: white; cursor: pointer;
|
||||
}
|
||||
|
||||
/* Month Navigation */
|
||||
.mc-month-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
position: relative;
|
||||
}
|
||||
.mc-month-nav button {
|
||||
width: 36px; height: 36px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #6b7280; background: #f3f4f6;
|
||||
border: none; cursor: pointer;
|
||||
}
|
||||
.mc-month-nav button:hover { background: #e5e7eb; }
|
||||
.mc-month-nav span { font-size: 1rem; font-weight: 700; color: #1f2937; }
|
||||
.mc-status-badge {
|
||||
position: absolute; right: 0; top: 50%; transform: translateY(-50%);
|
||||
font-size: 0.7rem; font-weight: 600;
|
||||
padding: 3px 8px; border-radius: 12px;
|
||||
}
|
||||
.mc-status-badge.pending { background: #fef3c7; color: #92400e; }
|
||||
.mc-status-badge.confirmed { background: #dcfce7; color: #166534; }
|
||||
.mc-status-badge.rejected { background: #fef2f2; color: #991b1b; }
|
||||
.mc-status-badge.change_request { background: #fff7ed; color: #c2410c; }
|
||||
.mc-status-badge.review_sent { background: #dbeafe; color: #1e40af; }
|
||||
.mc-status-badge.admin_checked { background: #dcfce7; color: #166534; }
|
||||
|
||||
/* Summary Cards */
|
||||
.mc-summary-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.mc-summary-cards { grid-template-columns: repeat(4, 1fr); }
|
||||
}
|
||||
.mc-card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 12px 8px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
}
|
||||
.mc-card-value { font-size: 1.25rem; font-weight: 800; color: #1f2937; }
|
||||
.mc-card-label { font-size: 0.7rem; color: #6b7280; margin-top: 2px; }
|
||||
|
||||
/* Mismatch Alert */
|
||||
.mc-mismatch-alert {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 10px 12px;
|
||||
background: #fffbeb; border: 1px solid #fde68a;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 0.8rem; color: #92400e;
|
||||
}
|
||||
|
||||
/* Daily List */
|
||||
.mc-daily-list { padding-bottom: 100px; }
|
||||
.mc-daily-card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
margin-bottom: 6px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
.mc-daily-card.match { border-left-color: #10b981; }
|
||||
.mc-daily-card.mismatch { background: #fffbeb; border-left-color: #f59e0b; }
|
||||
.mc-daily-card.report_only { background: #eff6ff; border-left-color: #3b82f6; }
|
||||
.mc-daily-card.attend_only { background: #f5f3ff; border-left-color: #8b5cf6; }
|
||||
.mc-daily-card.vacation { background: #f0fdf4; border-left-color: #34d399; }
|
||||
.mc-daily-card.holiday { background: #f9fafb; border-left-color: #9ca3af; }
|
||||
.mc-daily-card.none { background: #fef2f2; border-left-color: #ef4444; }
|
||||
|
||||
.mc-daily-header {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.mc-daily-date { font-size: 0.85rem; font-weight: 600; color: #1f2937; }
|
||||
.mc-daily-status { font-size: 0.7rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }
|
||||
.mc-daily-row { font-size: 0.8rem; color: #374151; margin: 2px 0; }
|
||||
.mc-daily-row span { color: #6b7280; }
|
||||
.mc-daily-diff {
|
||||
font-size: 0.75rem; font-weight: 600; color: #f59e0b;
|
||||
margin-top: 4px;
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
}
|
||||
|
||||
/* Bottom Actions */
|
||||
.mc-bottom-actions {
|
||||
position: fixed;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
display: flex; gap: 8px;
|
||||
padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
|
||||
background: white;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
z-index: 30;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.mc-confirm-btn {
|
||||
flex: 1; padding: 12px;
|
||||
background: #10b981; color: white;
|
||||
font-size: 0.85rem; font-weight: 700;
|
||||
border: none; border-radius: 10px; cursor: pointer;
|
||||
}
|
||||
.mc-confirm-btn:hover { background: #059669; }
|
||||
.mc-reject-btn {
|
||||
flex: 1; padding: 12px;
|
||||
background: white; color: #ef4444;
|
||||
font-size: 0.85rem; font-weight: 700;
|
||||
border: 2px solid #fecaca; border-radius: 10px; cursor: pointer;
|
||||
}
|
||||
.mc-reject-btn:hover { background: #fef2f2; }
|
||||
|
||||
.mc-confirmed-status {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
font-size: 0.85rem; color: #059669; font-weight: 600;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
/* Admin View */
|
||||
.mc-admin-summary {
|
||||
background: white; border-radius: 10px;
|
||||
padding: 16px; margin-bottom: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
}
|
||||
.mc-progress-bar {
|
||||
height: 8px; background: #e5e7eb; border-radius: 4px;
|
||||
overflow: hidden; margin-bottom: 8px;
|
||||
}
|
||||
.mc-progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #f59e0b, #10b981);
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
.mc-progress-text { font-size: 0.8rem; font-weight: 600; color: #1f2937; margin-bottom: 4px; }
|
||||
.mc-status-counts { font-size: 0.75rem; color: #6b7280; display: flex; gap: 12px; }
|
||||
|
||||
/* Filter Tabs */
|
||||
.mc-filter-tabs {
|
||||
display: flex; gap: 4px;
|
||||
padding: 4px; background: #f3f4f6;
|
||||
border-radius: 10px; margin-bottom: 12px;
|
||||
}
|
||||
.mc-tab {
|
||||
flex: 1; padding: 8px 4px;
|
||||
font-size: 0.75rem; font-weight: 600;
|
||||
color: #6b7280; background: transparent;
|
||||
border: none; border-radius: 8px; cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.mc-tab.active { background: white; color: #2563eb; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
||||
|
||||
/* Worker List (admin) */
|
||||
.mc-worker-list { padding-bottom: 100px; }
|
||||
.mc-worker-card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
margin-bottom: 6px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.mc-worker-card:active { background: #f9fafb; }
|
||||
.mc-worker-name { font-size: 0.875rem; font-weight: 600; color: #1f2937; }
|
||||
.mc-worker-dept { font-size: 0.7rem; color: #9ca3af; }
|
||||
.mc-worker-stats { font-size: 0.75rem; color: #6b7280; margin: 4px 0; }
|
||||
.mc-worker-status {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
}
|
||||
.mc-worker-status-badge {
|
||||
font-size: 0.65rem; font-weight: 600;
|
||||
padding: 2px 8px; border-radius: 10px;
|
||||
}
|
||||
.mc-worker-status-badge.confirmed { background: #166534; color: white; }
|
||||
.mc-worker-status-badge.admin_checked { background: #dcfce7; color: #166534; }
|
||||
.mc-worker-status-badge.pending { background: #fef3c7; color: #92400e; }
|
||||
.mc-worker-status-badge.review_sent { background: #dbeafe; color: #1e40af; }
|
||||
.mc-worker-status-badge.change_request { background: #fff7ed; color: #c2410c; }
|
||||
.mc-worker-status-badge.rejected { background: #fef2f2; color: #991b1b; }
|
||||
.mc-worker-reject-reason {
|
||||
font-size: 0.7rem; color: #991b1b;
|
||||
margin-top: 4px; padding-left: 8px;
|
||||
border-left: 2px solid #fecaca;
|
||||
}
|
||||
.mc-worker-mismatch {
|
||||
font-size: 0.65rem; font-weight: 600;
|
||||
color: #f59e0b; background: #fffbeb;
|
||||
padding: 1px 6px; border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Bottom Export */
|
||||
.mc-bottom-export {
|
||||
position: fixed;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
|
||||
background: white;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
z-index: 30;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.mc-export-btn {
|
||||
width: 100%; padding: 12px;
|
||||
background: #059669; color: white;
|
||||
font-size: 0.85rem; font-weight: 700;
|
||||
border: none; border-radius: 10px; cursor: pointer;
|
||||
}
|
||||
.mc-export-btn:disabled { background: #d1d5db; cursor: not-allowed; }
|
||||
.mc-export-note { font-size: 0.7rem; color: #9ca3af; margin-top: 4px; }
|
||||
|
||||
/* Modal */
|
||||
.mc-modal-overlay {
|
||||
position: fixed; inset: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
z-index: 50;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 16px;
|
||||
}
|
||||
.mc-modal {
|
||||
background: white; border-radius: 12px;
|
||||
width: 100%; max-width: 400px; overflow: hidden;
|
||||
}
|
||||
.mc-modal-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
font-weight: 700; font-size: 0.9rem;
|
||||
}
|
||||
.mc-modal-header button { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 1.1rem; }
|
||||
.mc-modal-body { padding: 16px; }
|
||||
.mc-modal-desc { font-size: 0.85rem; color: #374151; margin-bottom: 8px; }
|
||||
.mc-textarea {
|
||||
width: 100%; border: 1px solid #e5e7eb; border-radius: 8px;
|
||||
padding: 10px; font-size: 0.85rem; resize: none;
|
||||
}
|
||||
.mc-modal-note { font-size: 0.75rem; color: #6b7280; margin-top: 8px; }
|
||||
.mc-modal-footer {
|
||||
display: flex; gap: 8px; padding: 12px 16px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
}
|
||||
.mc-modal-cancel {
|
||||
flex: 1; padding: 10px; border: 1px solid #e5e7eb;
|
||||
border-radius: 8px; background: white; cursor: pointer; font-size: 0.8rem;
|
||||
}
|
||||
.mc-modal-submit {
|
||||
flex: 1; padding: 10px; background: #ef4444; color: white;
|
||||
border: none; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer;
|
||||
}
|
||||
|
||||
/* Empty / No Permission */
|
||||
.mc-empty {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
gap: 8px; padding: 48px 16px; color: #9ca3af; font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Skeleton (reuse) */
|
||||
.ds-skeleton {
|
||||
height: 56px;
|
||||
background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: ds-shimmer 1.5s infinite;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
@keyframes ds-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
||||
.ds-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; color: #9ca3af; font-size: 0.875rem; }
|
||||
.ds-link { color: #2563eb; font-size: 0.8rem; text-decoration: underline; }
|
||||
|
||||
/* Change Request Panel (detail mode) */
|
||||
.mc-change-panel {
|
||||
background: #fff7ed;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.mc-change-header {
|
||||
font-size: 0.85rem; font-weight: 700; color: #c2410c;
|
||||
margin-bottom: 8px;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.mc-change-list { margin-bottom: 10px; }
|
||||
.mc-change-item {
|
||||
font-size: 0.8rem; color: #374151;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid #fde6d0;
|
||||
}
|
||||
.mc-change-item:last-child { border-bottom: none; }
|
||||
.mc-change-from { color: #9ca3af; text-decoration: line-through; }
|
||||
.mc-change-to { color: #c2410c; font-weight: 600; }
|
||||
.mc-change-desc {
|
||||
font-size: 0.8rem; color: #374151;
|
||||
margin-bottom: 10px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.mc-change-actions {
|
||||
display: flex; gap: 8px;
|
||||
}
|
||||
.mc-change-approve {
|
||||
flex: 1; padding: 10px;
|
||||
background: #2563eb; color: white;
|
||||
font-size: 0.8rem; font-weight: 600;
|
||||
border: none; border-radius: 8px; cursor: pointer;
|
||||
}
|
||||
.mc-change-approve:hover { background: #1d4ed8; }
|
||||
.mc-change-reject {
|
||||
flex: 1; padding: 10px;
|
||||
background: white; color: #ef4444;
|
||||
font-size: 0.8rem; font-weight: 600;
|
||||
border: 2px solid #fecaca; border-radius: 8px; cursor: pointer;
|
||||
}
|
||||
.mc-change-reject:hover { background: #fef2f2; }
|
||||
|
||||
/* Worker card change summary */
|
||||
.mc-worker-change-summary {
|
||||
font-size: 0.7rem; color: #c2410c;
|
||||
margin-top: 4px; padding-left: 8px;
|
||||
border-left: 2px solid #fed7aa;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) { body { max-width: 480px; margin: 0 auto; } }
|
||||
|
||||
/* Inline Edit */
|
||||
.mc-edit-btn { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 12px; padding: 2px 6px; margin-left: auto; }
|
||||
.mc-edit-btn:hover { color: #2563eb; }
|
||||
.mc-attend-row { display: flex; align-items: center; }
|
||||
.mc-edit-form { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
|
||||
.mc-edit-row { display: flex; align-items: center; gap: 6px; font-size: 13px; }
|
||||
.mc-edit-row label { width: 36px; font-weight: 600; color: #6b7280; font-size: 12px; }
|
||||
.mc-edit-input { width: 60px; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; text-align: center; }
|
||||
.mc-edit-select { padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; flex: 1; }
|
||||
.mc-edit-actions { display: flex; gap: 6px; margin-top: 2px; }
|
||||
.mc-edit-save { padding: 4px 12px; background: #10b981; color: white; border: none; border-radius: 6px; font-size: 12px; cursor: pointer; }
|
||||
.mc-edit-save:hover { background: #059669; }
|
||||
.mc-edit-cancel { padding: 4px 12px; background: #e5e7eb; color: #374151; border: none; border-radius: 6px; font-size: 12px; cursor: pointer; }
|
||||
.mc-edit-cancel:hover { background: #d1d5db; }
|
||||
170
system1-factory/web/public/css/my-monthly-confirm.css
Normal file
170
system1-factory/web/public/css/my-monthly-confirm.css
Normal file
@@ -0,0 +1,170 @@
|
||||
/* my-monthly-confirm.css — 작업자 월간 확인 (모바일 캘린더) */
|
||||
body { max-width: 480px; margin: 0 auto; }
|
||||
|
||||
/* 월 네비게이션 */
|
||||
.mmc-month-nav {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
gap: 12px; padding: 12px 0; position: relative;
|
||||
}
|
||||
.mmc-month-nav button {
|
||||
width: 36px; height: 36px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #6b7280; background: #f3f4f6; border: none; cursor: pointer;
|
||||
}
|
||||
.mmc-month-nav button:hover { background: #e5e7eb; }
|
||||
.mmc-month-nav > span { font-size: 1rem; font-weight: 700; color: #1f2937; }
|
||||
.mmc-status-badge {
|
||||
position: absolute; right: 0; top: 50%; transform: translateY(-50%);
|
||||
font-size: 0.7rem; font-weight: 600; padding: 3px 8px; border-radius: 12px;
|
||||
}
|
||||
.mmc-status-badge.pending { background: #f3f4f6; color: #6b7280; }
|
||||
.mmc-status-badge.review_sent { background: #dbeafe; color: #1e40af; }
|
||||
.mmc-status-badge.confirmed { background: #dcfce7; color: #166534; }
|
||||
.mmc-status-badge.change_request { background: #fef3c7; color: #92400e; }
|
||||
.mmc-status-badge.rejected { background: #fef2f2; color: #991b1b; }
|
||||
|
||||
/* 사용자 정보 */
|
||||
.mmc-user-info {
|
||||
display: flex; align-items: baseline; gap: 8px;
|
||||
padding: 0 4px 8px; font-size: 0.95rem; font-weight: 700; color: #1f2937;
|
||||
}
|
||||
.mmc-user-dept { font-size: 0.8rem; font-weight: 400; color: #6b7280; }
|
||||
|
||||
/* ===== 캘린더 그리드 ===== */
|
||||
.cal-grid {
|
||||
background: white; border-radius: 12px; overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 10px;
|
||||
}
|
||||
.cal-header {
|
||||
display: grid; grid-template-columns: repeat(7, 1fr);
|
||||
background: #f9fafb; border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.cal-dow {
|
||||
text-align: center; padding: 8px 0; font-size: 0.7rem; font-weight: 600; color: #6b7280;
|
||||
}
|
||||
.cal-dow.sun { color: #ef4444; }
|
||||
.cal-dow.sat { color: #3b82f6; }
|
||||
|
||||
.cal-body { display: grid; grid-template-columns: repeat(7, 1fr); }
|
||||
.cal-cell {
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
padding: 6px 2px; min-height: 54px; border-bottom: 1px solid #f3f4f6;
|
||||
border-right: 1px solid #f3f4f6; cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.cal-cell:nth-child(7n) { border-right: none; }
|
||||
.cal-cell:active { background: #eff6ff; }
|
||||
.cal-cell.selected { background: #dbeafe; }
|
||||
.cal-cell.empty { background: #fafafa; cursor: default; }
|
||||
|
||||
.cal-day { font-size: 0.7rem; font-weight: 600; color: #374151; margin-bottom: 2px; }
|
||||
.cal-cell.sun .cal-day { color: #ef4444; }
|
||||
.cal-cell.sat .cal-day { color: #3b82f6; }
|
||||
|
||||
.cal-val { font-size: 0.65rem; font-weight: 700; line-height: 1.2; text-align: center; }
|
||||
|
||||
/* 셀 상태별 색상 — 정시=흰색, 연차=노랑, 연장=연보라, 휴무=회색 */
|
||||
.cal-cell.normal { background: white; }
|
||||
.cal-cell.normal .cal-val { color: #1f2937; }
|
||||
.cal-cell.vac { background: #fefce8; }
|
||||
.cal-cell.vac .cal-val { color: #92400e; font-weight: 700; }
|
||||
.cal-cell.off { background: #f3f4f6; }
|
||||
.cal-cell.off .cal-val { color: #9ca3af; font-weight: 500; }
|
||||
.cal-cell.overtime { background: #f5f3ff; }
|
||||
.cal-cell.overtime .cal-val { color: #7c3aed; }
|
||||
.cal-cell.special { background: #fff7ed; }
|
||||
.cal-cell.special .cal-val { color: #b45309; }
|
||||
.cal-cell.partial .cal-val { color: #6b7280; }
|
||||
.cal-cell.none .cal-val { color: #d1d5db; }
|
||||
.cal-cell.changed { outline: 2px solid #f59e0b; outline-offset: -2px; }
|
||||
.cal-cell.changed::after { content: '수정'; position: absolute; top: 1px; right: 2px; font-size: 0.5rem; color: #f59e0b; font-weight: 700; }
|
||||
.cal-cell { position: relative; }
|
||||
|
||||
/* 상세 표시 + 수정 */
|
||||
.cal-edit-row { margin-top: 6px; display: flex; align-items: center; gap: 6px; }
|
||||
.cal-edit-select { padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.8rem; flex: 1; }
|
||||
.cal-changed-badge { font-size: 0.65rem; font-weight: 700; color: #f59e0b; background: #fefce8; padding: 1px 6px; border-radius: 4px; }
|
||||
.cal-detail { display: none; margin-bottom: 10px; }
|
||||
.cal-detail-inner {
|
||||
background: white; border-radius: 10px; padding: 10px 14px;
|
||||
font-size: 0.8rem; color: #374151;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
/* ===== 요약 카드 ===== */
|
||||
.mmc-sum-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
|
||||
.mmc-sum-card {
|
||||
background: white; border-radius: 10px; padding: 10px 6px;
|
||||
text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
}
|
||||
.mmc-sum-num { font-size: 1.1rem; font-weight: 800; color: #1f2937; }
|
||||
.mmc-sum-num.ot { color: #f59e0b; }
|
||||
.mmc-sum-num.vac { color: #059669; }
|
||||
.mmc-sum-label { font-size: 0.65rem; color: #6b7280; margin-top: 2px; }
|
||||
|
||||
/* 연차 현황 */
|
||||
.mmc-vac-title { font-size: 0.8rem; font-weight: 600; color: #6b7280; margin-bottom: 6px; padding: 0 4px; }
|
||||
.mmc-vac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 160px; }
|
||||
.mmc-vac-card {
|
||||
background: white; border-radius: 10px; padding: 12px 8px;
|
||||
text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
}
|
||||
.mmc-vac-num { font-size: 1.25rem; font-weight: 800; color: #1f2937; }
|
||||
.mmc-vac-num.used { color: #f59e0b; }
|
||||
.mmc-vac-num.remain { color: #059669; }
|
||||
.mmc-vac-label { font-size: 0.7rem; color: #6b7280; margin-top: 2px; }
|
||||
|
||||
/* 확인 상태 */
|
||||
.mmc-confirmed-status {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
justify-content: center; padding: 16px;
|
||||
font-size: 0.85rem; color: #059669; font-weight: 600;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
/* 하단 버튼 */
|
||||
.mmc-bottom-actions {
|
||||
position: fixed; bottom: 68px; left: 0; right: 0;
|
||||
display: flex; gap: 8px;
|
||||
padding: 10px 16px;
|
||||
background: white; border-top: 1px solid #e5e7eb; z-index: 30;
|
||||
max-width: 480px; margin: 0 auto;
|
||||
}
|
||||
.mmc-confirm-btn {
|
||||
flex: 1; padding: 14px; background: #10b981; color: white;
|
||||
font-size: 0.9rem; font-weight: 700;
|
||||
border: none; border-radius: 12px; cursor: pointer;
|
||||
}
|
||||
.mmc-confirm-btn:hover { background: #059669; }
|
||||
.mmc-reject-btn {
|
||||
flex: 1; padding: 14px; background: white; color: #ef4444;
|
||||
font-size: 0.9rem; font-weight: 700;
|
||||
border: 2px solid #fecaca; border-radius: 12px; cursor: pointer;
|
||||
}
|
||||
.mmc-reject-btn:hover { background: #fef2f2; }
|
||||
|
||||
/* 모달 */
|
||||
.mmc-modal-overlay {
|
||||
position: fixed; inset: 0;
|
||||
background: rgba(0,0,0,0.4); z-index: 50;
|
||||
display: flex; align-items: center; justify-content: center; padding: 16px;
|
||||
}
|
||||
.mmc-modal { background: white; border-radius: 12px; width: 100%; max-width: 400px; overflow: hidden; }
|
||||
.mmc-modal-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px 16px; border-bottom: 1px solid #f3f4f6;
|
||||
font-weight: 700; font-size: 0.9rem;
|
||||
}
|
||||
.mmc-modal-header button { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 1.1rem; }
|
||||
.mmc-modal-body { padding: 16px; }
|
||||
.mmc-modal-desc { font-size: 0.85rem; color: #374151; margin-bottom: 8px; }
|
||||
.mmc-textarea { width: 100%; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; font-size: 0.85rem; resize: none; }
|
||||
.mmc-modal-note { font-size: 0.75rem; color: #6b7280; margin-top: 8px; }
|
||||
.mmc-modal-footer { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #f3f4f6; }
|
||||
.mmc-modal-cancel { flex: 1; padding: 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: white; cursor: pointer; font-size: 0.8rem; }
|
||||
.mmc-modal-submit { flex: 1; padding: 10px; background: #ef4444; color: white; border: none; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
|
||||
|
||||
/* 빈 상태 / 스켈레톤 */
|
||||
.mmc-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; color: #9ca3af; font-size: 0.875rem; }
|
||||
.mmc-skeleton { height: 40px; background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%); background-size: 200% 100%; animation: mmc-shimmer 1.5s infinite; border-radius: 8px; margin-bottom: 4px; }
|
||||
@keyframes mmc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
||||
113
system1-factory/web/public/css/production-dashboard.css
Normal file
113
system1-factory/web/public/css/production-dashboard.css
Normal file
@@ -0,0 +1,113 @@
|
||||
/* 생산팀 대시보드 — Sprint 003 */
|
||||
|
||||
.pd-main { max-width: 640px; margin: 0 auto; padding: 16px 16px 80px; }
|
||||
|
||||
/* 프로필 카드 */
|
||||
.pd-profile-card {
|
||||
background: linear-gradient(135deg, #9a3412, #ea580c);
|
||||
color: white; border-radius: 16px; padding: 20px; margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.pd-logout-btn {
|
||||
position: absolute; top: 16px; right: 16px;
|
||||
background: rgba(255,255,255,0.2); border: none; border-radius: 50%;
|
||||
width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
|
||||
color: rgba(255,255,255,0.8); font-size: 14px; cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
.pd-logout-btn:hover { background: rgba(255,255,255,0.3); color: white; }
|
||||
.pd-profile-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
|
||||
.pd-avatar {
|
||||
width: 48px; height: 48px; border-radius: 50%;
|
||||
background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;
|
||||
font-size: 20px; font-weight: 700; flex-shrink: 0;
|
||||
}
|
||||
.pd-profile-name { font-size: 18px; font-weight: 700; }
|
||||
.pd-profile-sub { font-size: 13px; opacity: 0.8; margin-top: 2px; }
|
||||
|
||||
/* 통합 정보 리스트 */
|
||||
.pd-info-list { display: flex; flex-direction: column; gap: 2px; }
|
||||
.pd-info-row {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
background: rgba(255,255,255,0.12); border-radius: 10px; padding: 10px 12px;
|
||||
cursor: pointer; -webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.pd-info-row:active { background: rgba(255,255,255,0.18); }
|
||||
.pd-info-left { display: flex; align-items: center; gap: 8px; }
|
||||
.pd-info-icon { font-size: 14px; opacity: 0.8; width: 18px; text-align: center; }
|
||||
.pd-info-label { font-size: 12px; font-weight: 600; opacity: 0.9; }
|
||||
.pd-info-right { display: flex; align-items: center; gap: 6px; }
|
||||
.pd-info-value { font-size: 14px; font-weight: 700; }
|
||||
.pd-info-sub { font-size: 11px; opacity: 0.6; }
|
||||
.pd-info-arrow { font-size: 10px; opacity: 0.5; margin-left: 2px; }
|
||||
.pd-progress-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.2); overflow: hidden; }
|
||||
.pd-progress-fill { height: 100%; border-radius: 2px; transition: width 0.6s ease; }
|
||||
.pd-progress-green { background: #4ade80; }
|
||||
.pd-progress-yellow { background: #fbbf24; }
|
||||
.pd-progress-red { background: #f87171; }
|
||||
|
||||
/* 연차 상세 모달 */
|
||||
.pd-detail-modal {
|
||||
position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center;
|
||||
background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s;
|
||||
}
|
||||
.pd-detail-modal.active { opacity: 1; pointer-events: auto; }
|
||||
.pd-detail-sheet {
|
||||
background: linear-gradient(135deg, #9a3412, #ea580c); color: white;
|
||||
border-radius: 16px 16px 0 0; width: 100%; max-width: 640px;
|
||||
padding: 20px 20px calc(20px + 70px + env(safe-area-inset-bottom, 0px));
|
||||
transform: translateY(100%); transition: transform 0.3s ease;
|
||||
}
|
||||
.pd-detail-modal.active .pd-detail-sheet { transform: translateY(0); }
|
||||
.pd-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||||
.pd-detail-title { font-size: 16px; font-weight: 700; }
|
||||
.pd-detail-close { background: none; border: none; color: white; opacity: 0.7; font-size: 18px; cursor: pointer; }
|
||||
.pd-detail-row {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.15); font-size: 13px;
|
||||
}
|
||||
.pd-detail-label { font-weight: 600; opacity: 0.9; }
|
||||
.pd-detail-value { text-align: right; opacity: 0.85; }
|
||||
.pd-detail-total {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 12px 0 0; font-size: 14px; font-weight: 700; margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 섹션 */
|
||||
.pd-section { margin-bottom: 20px; }
|
||||
.pd-section-title {
|
||||
font-size: 12px; font-weight: 700; color: #6b7280;
|
||||
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
/* 아이콘 그리드 */
|
||||
.pd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
||||
.pd-grid-item {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||||
cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.pd-grid-item:active .pd-grid-icon { transform: scale(0.93); }
|
||||
.pd-grid-icon {
|
||||
width: 52px; height: 52px; border-radius: 14px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: white; font-size: 20px; transition: transform 0.15s;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
.pd-grid-label {
|
||||
font-size: 11px; text-align: center; color: #374151; line-height: 1.3;
|
||||
max-width: 64px; overflow: hidden; display: -webkit-box;
|
||||
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
/* 스켈레톤 */
|
||||
.pd-skeleton { background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 200% 100%; animation: pd-shimmer 1.5s infinite; border-radius: 8px; }
|
||||
@keyframes pd-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
||||
|
||||
/* 에러 */
|
||||
.pd-error { text-align: center; padding: 40px 20px; color: #6b7280; }
|
||||
.pd-error i { font-size: 40px; margin-bottom: 12px; color: #d1d5db; }
|
||||
.pd-error-btn { margin-top: 12px; padding: 8px 20px; background: #2563eb; color: white; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; }
|
||||
|
||||
/* 반응형 */
|
||||
@media (min-width: 640px) { .pd-grid { grid-template-columns: repeat(6, 1fr); } }
|
||||
@media (min-width: 1024px) { .pd-main { max-width: 800px; } .pd-grid { grid-template-columns: repeat(8, 1fr); } }
|
||||
85
system1-factory/web/public/css/proxy-input.css
Normal file
85
system1-factory/web/public/css/proxy-input.css
Normal file
@@ -0,0 +1,85 @@
|
||||
/* proxy-input.css — 대리입력 리뉴얼 */
|
||||
|
||||
/* Title Row */
|
||||
.pi-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
|
||||
.pi-title { font-size: 18px; font-weight: 700; color: #1f2937; flex: 1; }
|
||||
.pi-back-btn { background: none; border: none; font-size: 18px; color: #6b7280; cursor: pointer; padding: 4px 8px; }
|
||||
.pi-date-group { display: flex; align-items: center; gap: 6px; }
|
||||
.pi-date-input { border: 1px solid #d1d5db; border-radius: 8px; padding: 6px 10px; font-size: 14px; }
|
||||
.pi-refresh-btn { background: none; border: none; color: #6b7280; font-size: 14px; cursor: pointer; padding: 6px; }
|
||||
|
||||
/* Status Bar */
|
||||
.pi-status-bar { display: flex; gap: 16px; background: white; border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; font-size: 13px; color: #6b7280; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
|
||||
|
||||
/* Select All */
|
||||
.pi-select-all { padding: 6px 2px; font-size: 13px; color: #6b7280; }
|
||||
.pi-select-all input { margin-right: 6px; }
|
||||
|
||||
/* Worker List */
|
||||
.pi-worker-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 80px; }
|
||||
.pi-worker { display: flex; align-items: center; gap: 10px; background: white; border-radius: 10px; padding: 10px 12px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.15s; }
|
||||
.pi-worker:hover { border-color: #93c5fd; }
|
||||
.pi-worker.disabled { opacity: 0.45; cursor: not-allowed; }
|
||||
.pi-check { width: 18px; height: 18px; flex-shrink: 0; accent-color: #2563eb; }
|
||||
.pi-worker-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
|
||||
.pi-worker-name { font-size: 14px; font-weight: 600; color: #1f2937; }
|
||||
.pi-worker-job { font-size: 11px; color: #9ca3af; }
|
||||
.pi-worker-badges { display: flex; gap: 4px; flex-shrink: 0; }
|
||||
|
||||
/* Badges */
|
||||
.pi-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
|
||||
.pi-badge.done { background: #dcfce7; color: #166534; }
|
||||
.pi-badge.missing { background: #fee2e2; color: #991b1b; }
|
||||
.pi-badge.vac { background: #dbeafe; color: #1e40af; }
|
||||
.pi-badge.vac-half { background: #fef3c7; color: #92400e; }
|
||||
|
||||
/* Bottom Bar */
|
||||
.pi-bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: white; padding: 12px 16px; border-top: 1px solid #e5e7eb; box-shadow: 0 -2px 8px rgba(0,0,0,0.06); }
|
||||
.pi-edit-btn, .pi-save-btn { width: 100%; padding: 12px; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; color: white; cursor: pointer; }
|
||||
.pi-edit-btn { background: #2563eb; }
|
||||
.pi-edit-btn:hover { background: #1d4ed8; }
|
||||
.pi-edit-btn:disabled { background: #9ca3af; cursor: not-allowed; }
|
||||
.pi-save-btn { background: #10b981; }
|
||||
.pi-save-btn:hover { background: #059669; }
|
||||
.pi-save-btn:disabled { background: #9ca3af; }
|
||||
|
||||
/* Edit Cards */
|
||||
.pi-edit-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 80px; }
|
||||
.pi-edit-card { background: white; border-radius: 12px; padding: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
|
||||
.pi-edit-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; }
|
||||
.pi-edit-job { font-size: 11px; color: #9ca3af; }
|
||||
.pi-edit-fields { display: flex; flex-direction: column; gap: 6px; }
|
||||
.pi-edit-row { display: flex; gap: 6px; }
|
||||
.pi-select { flex: 1; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; background: white; }
|
||||
.pi-field { display: flex; flex-direction: column; gap: 2px; flex: 1; }
|
||||
.pi-field span { font-size: 11px; color: #6b7280; font-weight: 600; }
|
||||
.pi-input { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; text-align: center; }
|
||||
.pi-note-input { width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; }
|
||||
|
||||
/* Skeleton */
|
||||
.pi-skeleton { height: 52px; border-radius: 10px; background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 200% 100%; animation: pi-shimmer 1.5s infinite; }
|
||||
@keyframes pi-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
||||
|
||||
/* Department Label */
|
||||
.pi-dept-label { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 2px 4px; }
|
||||
|
||||
/* Bulk Form */
|
||||
.pi-bulk-form { background: white; border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 8px; }
|
||||
.pi-edit-row { display: flex; gap: 8px; }
|
||||
.pi-select { flex: 1; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; background: white; }
|
||||
.pi-field { display: flex; flex-direction: column; gap: 2px; flex: 1; }
|
||||
.pi-field span { font-size: 11px; color: #6b7280; font-weight: 600; }
|
||||
.pi-input { padding: 8px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; text-align: center; font-weight: 600; }
|
||||
.pi-note-input { width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; }
|
||||
|
||||
/* Target Section */
|
||||
.pi-target-section { background: white; border-radius: 12px; padding: 12px; margin-bottom: 80px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
|
||||
.pi-target-label { font-size: 12px; font-weight: 700; color: #6b7280; margin-bottom: 8px; }
|
||||
.pi-target-list { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.pi-target-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: #dbeafe; color: #1e40af; }
|
||||
|
||||
/* Empty */
|
||||
.pi-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; color: #9ca3af; font-size: 14px; }
|
||||
|
||||
/* Responsive */
|
||||
@media (min-width: 640px) { .pi-bottom-bar { max-width: 640px; margin: 0 auto; } }
|
||||
425
system1-factory/web/public/css/purchase-mobile.css
Normal file
425
system1-factory/web/public/css/purchase-mobile.css
Normal file
@@ -0,0 +1,425 @@
|
||||
/* purchase-mobile.css — 소모품 신청 모바일 전용 */
|
||||
|
||||
/* 메인 컨텐츠 (하단 네비 여유) */
|
||||
.pm-content {
|
||||
padding-bottom: calc(140px + env(safe-area-inset-bottom));
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 상태 탭 */
|
||||
.pm-tabs {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
padding: 8px 16px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.pm-tabs::-webkit-scrollbar { display: none; }
|
||||
.pm-tab {
|
||||
flex-shrink: 0;
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pm-tab.active {
|
||||
background: #ea580c;
|
||||
color: white;
|
||||
}
|
||||
.pm-tab .tab-count {
|
||||
margin-left: 4px;
|
||||
font-size: 11px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 카드 리스트 */
|
||||
.pm-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.pm-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
.pm-card:active { box-shadow: 0 0 0 2px rgba(234,88,12,0.2); }
|
||||
.pm-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
.pm-card-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.pm-card-custom { font-size: 11px; color: #ea580c; margin-left: 4px; }
|
||||
.pm-card-meta {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.pm-card-qty { color: #374151; font-weight: 600; }
|
||||
|
||||
/* FAB */
|
||||
.pm-fab {
|
||||
position: fixed;
|
||||
bottom: calc(84px + env(safe-area-inset-bottom));
|
||||
right: 20px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: #ea580c;
|
||||
color: white;
|
||||
border: none;
|
||||
box-shadow: 0 4px 12px rgba(234,88,12,0.35);
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.pm-fab:active { transform: scale(0.92); }
|
||||
|
||||
/* 바텀시트 */
|
||||
.pm-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
z-index: 1005;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
.pm-overlay.open { opacity: 1; pointer-events: auto; }
|
||||
|
||||
.pm-sheet {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-radius: 16px 16px 0 0;
|
||||
z-index: 1010;
|
||||
max-height: 92vh;
|
||||
overflow-y: auto;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding-bottom: calc(20px + env(safe-area-inset-bottom));
|
||||
}
|
||||
.pm-sheet.open { transform: translateY(0); }
|
||||
.pm-sheet-handle {
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
background: #d1d5db;
|
||||
border-radius: 2px;
|
||||
margin: 8px auto;
|
||||
}
|
||||
.pm-sheet-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 20px 8px;
|
||||
}
|
||||
.pm-sheet-title { font-size: 17px; font-weight: 700; color: #1f2937; }
|
||||
.pm-sheet-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: #f3f4f6;
|
||||
border-radius: 50%;
|
||||
font-size: 16px;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.pm-sheet-body { padding: 0 20px 20px; }
|
||||
|
||||
/* 검색 */
|
||||
.pm-search-wrap { position: relative; margin-bottom: 12px; }
|
||||
.pm-search-input {
|
||||
width: 100%;
|
||||
padding: 12px 40px 12px 14px;
|
||||
border: 1.5px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.pm-search-input:focus { border-color: #ea580c; }
|
||||
.pm-search-spinner {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
}
|
||||
.pm-search-spinner.show { display: block; }
|
||||
.pm-search-results {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
display: none;
|
||||
}
|
||||
.pm-search-results.open { display: block; }
|
||||
.pm-search-thumb {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
.pm-search-thumb-empty {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #d1d5db;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.pm-search-item {
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
.pm-search-item:last-child { border-bottom: none; }
|
||||
.pm-search-item:active { background: #fff7ed; }
|
||||
.pm-search-item .match-type {
|
||||
font-size: 10px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 4px;
|
||||
background: #f3f4f6;
|
||||
color: #9ca3af;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.pm-search-register {
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
color: #ea580c;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.pm-search-register:active { background: #fff7ed; }
|
||||
|
||||
/* 장바구니 */
|
||||
.pm-cart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.pm-cart-title { font-size: 14px; font-weight: 600; color: #374151; }
|
||||
.pm-cart-count { font-size: 12px; color: #ea580c; font-weight: 600; }
|
||||
.pm-cart-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
background: #fff7ed;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.pm-cart-item-info { flex: 1; min-width: 0; }
|
||||
.pm-cart-item-name { font-size: 13px; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.pm-cart-item-meta { font-size: 11px; color: #9ca3af; margin-top: 2px; }
|
||||
.pm-cart-item-new { font-size: 10px; color: #ea580c; }
|
||||
.pm-cart-qty {
|
||||
width: 48px;
|
||||
padding: 4px 6px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.pm-cart-memo {
|
||||
width: 80px;
|
||||
padding: 4px 6px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.pm-cart-thumb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
.pm-cart-photo-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 8px;
|
||||
border: 1px dashed #d1d5db;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pm-cart-remove {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
background: #fecaca;
|
||||
color: #dc2626;
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
/* 신규 품목 인라인 필드 */
|
||||
.pm-cart-new-fields {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.pm-cart-new-fields input, .pm-cart-new-fields select {
|
||||
padding: 3px 6px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 폼 필드 */
|
||||
.pm-field { margin-bottom: 12px; }
|
||||
.pm-label { display: block; font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 4px; }
|
||||
.pm-input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1.5px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.pm-input:focus { border-color: #ea580c; }
|
||||
.pm-select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1.5px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
background: white;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 사진 */
|
||||
.pm-photo-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
border: 1.5px dashed #d1d5db;
|
||||
border-radius: 8px;
|
||||
background: #fafafa;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
min-height: 44px;
|
||||
}
|
||||
.pm-photo-preview {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* 제출 */
|
||||
.pm-submit {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: #ea580c;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 16px;
|
||||
min-height: 48px;
|
||||
}
|
||||
.pm-submit:active { background: #c2410c; }
|
||||
.pm-submit:disabled { background: #d1d5db; cursor: not-allowed; }
|
||||
|
||||
/* 상세 시트 */
|
||||
.pm-detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
.pm-detail-label { color: #9ca3af; }
|
||||
.pm-detail-value { color: #1f2937; font-weight: 500; }
|
||||
.pm-received-photo {
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* 빈 상태 */
|
||||
.pm-empty {
|
||||
text-align: center;
|
||||
padding: 48px 16px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.pm-empty i { font-size: 32px; margin-bottom: 8px; display: block; }
|
||||
|
||||
/* 로딩 */
|
||||
.pm-loading {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
color: #9ca3af;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 스피너 애니메이션 */
|
||||
@keyframes pm-spin { to { transform: translateY(-50%) rotate(360deg); } }
|
||||
.pm-search-spinner.show i { animation: pm-spin 0.8s linear infinite; }
|
||||
805
system1-factory/web/public/css/tbm-mobile.css
Normal file
805
system1-factory/web/public/css/tbm-mobile.css
Normal file
@@ -0,0 +1,805 @@
|
||||
/* TBM Mobile Styles */
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
|
||||
background: #f3f4f6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
button, .m-tbm-row, .m-tab, .m-new-btn, .m-detail-btn, .m-load-more,
|
||||
.picker-item, .split-radio-item, .split-session-item, .pull-btn,
|
||||
.de-save-btn, .de-group-btn, .de-split-btn, .pill-btn, .worker-card,
|
||||
[onclick] {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
@media (min-width: 480px) {
|
||||
body { max-width: 768px; margin: 0 auto; min-height: 100vh; }
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.m-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
||||
color: white;
|
||||
padding: 0.875rem 1rem;
|
||||
padding-top: calc(0.875rem + env(safe-area-inset-top));
|
||||
}
|
||||
.m-header-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.m-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.m-header .m-date {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.m-new-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(255,255,255,0.2);
|
||||
color: white;
|
||||
border: 1.5px solid rgba(255,255,255,0.4);
|
||||
border-radius: 2rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.m-new-btn:active { background: rgba(255,255,255,0.3); }
|
||||
|
||||
/* Tabs */
|
||||
.m-tabs {
|
||||
display: flex;
|
||||
background: white;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
.m-tab {
|
||||
flex: 1;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: #9ca3af;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.m-tab.active {
|
||||
color: #2563eb;
|
||||
border-bottom-color: #2563eb;
|
||||
}
|
||||
.m-tab .tab-count {
|
||||
display: inline-block;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
border-radius: 9px;
|
||||
background: #e5e7eb;
|
||||
color: #6b7280;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-left: 0.25rem;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
.m-tab.active .tab-count {
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
/* Content area */
|
||||
.m-content {
|
||||
padding-bottom: calc(76px + env(safe-area-inset-bottom));
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
/* Date group */
|
||||
.m-date-group {
|
||||
padding: 0.5rem 1rem 0.25rem;
|
||||
}
|
||||
.m-date-label {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* TBM list row */
|
||||
.m-tbm-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
background: white;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.m-tbm-row:active { background: #f9fafb; }
|
||||
.m-tbm-row:first-child { border-top: 1px solid #e5e7eb; }
|
||||
|
||||
.m-row-status {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
.m-row-status.draft { background: #f59e0b; }
|
||||
.m-row-status.completed { background: #10b981; }
|
||||
.m-row-status.cancelled { background: #ef4444; }
|
||||
|
||||
.m-row-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.m-row-main {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.m-row-sub {
|
||||
font-size: 0.6875rem;
|
||||
color: #9ca3af;
|
||||
margin-top: 0.125rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.m-row-right {
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
.m-row-count {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
.m-row-count-label {
|
||||
font-size: 0.625rem;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.m-row-time {
|
||||
font-size: 0.625rem;
|
||||
color: #9ca3af;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
/* TBM detail expanded */
|
||||
.m-tbm-detail {
|
||||
display: none;
|
||||
background: #f9fafb;
|
||||
padding: 0.75rem 1rem 0.75rem 2.75rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.m-tbm-row.expanded + .m-tbm-detail { display: block; }
|
||||
.m-detail-row {
|
||||
display: flex;
|
||||
padding: 0.25rem 0;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.m-detail-label {
|
||||
color: #6b7280;
|
||||
width: 50px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.m-detail-value {
|
||||
color: #1f2937;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
}
|
||||
.m-detail-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
.m-detail-btn {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.5rem;
|
||||
background: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.m-detail-btn:active { background: #f3f4f6; }
|
||||
.m-detail-btn.primary {
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
.m-detail-btn.primary:active { background: #1d4ed8; }
|
||||
.m-detail-btn.danger {
|
||||
color: #ef4444;
|
||||
border-color: #fca5a5;
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.m-empty {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.m-empty-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.m-empty-text {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.m-empty-sub {
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Load more */
|
||||
.m-load-more {
|
||||
display: block;
|
||||
width: calc(100% - 2rem);
|
||||
margin: 0.75rem 1rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px dashed #d1d5db;
|
||||
border-radius: 0.75rem;
|
||||
background: white;
|
||||
font-size: 0.8125rem;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.m-load-more:active { background: #f3f4f6; }
|
||||
|
||||
/* Loading skeleton */
|
||||
.m-skeleton {
|
||||
height: 56px;
|
||||
background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* Bottom nav → tkfb.css로 이동됨 (shared-bottom-nav.js 공통) */
|
||||
|
||||
/* Detail badge */
|
||||
.m-detail-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 700;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
margin-left: 0.375rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.m-detail-badge.incomplete {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
.m-detail-badge.complete {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
/* Worker card status indicator */
|
||||
.de-worker-card.filled {
|
||||
background: #f0fdf4;
|
||||
border-left: 3px solid #10b981;
|
||||
padding-left: calc(0.625rem - 3px);
|
||||
}
|
||||
.de-worker-card.unfilled {
|
||||
border-left: 3px solid #f59e0b;
|
||||
padding-left: calc(0.625rem - 3px);
|
||||
}
|
||||
.de-worker-status {
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
.de-worker-status.ok { color: #059669; }
|
||||
.de-worker-status.missing { color: #d97706; }
|
||||
|
||||
/* Group select */
|
||||
.de-worker-check {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
accent-color: #2563eb;
|
||||
margin-right: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.de-group-bar {
|
||||
display: none;
|
||||
background: #eff6ff;
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 0.625rem;
|
||||
margin: 0 1rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
color: #1e40af;
|
||||
}
|
||||
.de-group-bar.visible { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
|
||||
.de-group-btn {
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.de-select-all-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.375rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
/* Detail edit bottom sheet */
|
||||
.detail-edit-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 9000;
|
||||
}
|
||||
.detail-edit-sheet {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9001;
|
||||
background: white;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
|
||||
}
|
||||
.de-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: white;
|
||||
padding: 1rem 1rem 0;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.de-header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.de-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
|
||||
.de-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
/* Picker popup */
|
||||
.picker-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
z-index: 9100;
|
||||
}
|
||||
.picker-sheet {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9101;
|
||||
background: white;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
|
||||
}
|
||||
.picker-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: white;
|
||||
padding: 0.875rem 1rem 0.5rem;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.picker-header h4 { margin: 0; font-size: 0.9375rem; font-weight: 700; }
|
||||
.picker-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.125rem;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
.picker-list { padding: 0.25rem 0; }
|
||||
.picker-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #1f2937;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.picker-item:active { background: #f3f4f6; }
|
||||
.picker-item.selected { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
|
||||
.picker-item-sub { font-size: 0.6875rem; color: #9ca3af; margin-left: 0.375rem; }
|
||||
.picker-divider {
|
||||
padding: 0.375rem 1rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
color: #6b7280;
|
||||
background: #f9fafb;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.picker-add-row {
|
||||
display: flex;
|
||||
gap: 0.375rem;
|
||||
padding: 0.625rem 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
background: #f9fafb;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
.picker-add-input {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.picker-add-btn {
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: #10b981;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.de-worker-list { padding: 0 1rem; }
|
||||
.de-worker-card {
|
||||
padding: 0.625rem 0;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
.de-worker-card:last-child { border-bottom: none; }
|
||||
.de-worker-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
.de-worker-job {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
.de-worker-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
.de-field-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
.de-field-label {
|
||||
font-size: 0.6875rem;
|
||||
color: #6b7280;
|
||||
width: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.de-field-row select {
|
||||
flex: 1;
|
||||
padding: 0.4375rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.8125rem;
|
||||
background: white;
|
||||
}
|
||||
.de-save-area {
|
||||
padding: 0.75rem 1rem 1rem;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background: white;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
.de-save-btn {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.de-save-btn:disabled { opacity: 0.5; }
|
||||
|
||||
/* My TBM highlight */
|
||||
.m-tbm-row.my-tbm {
|
||||
border-left: 3px solid #2563eb;
|
||||
}
|
||||
.m-leader-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 700;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
margin-left: 0.25rem;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
.m-transfer-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.5625rem;
|
||||
font-weight: 600;
|
||||
padding: 0.0625rem 0.3125rem;
|
||||
border-radius: 0.25rem;
|
||||
margin-left: 0.25rem;
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
.m-work-hours-tag {
|
||||
display: inline-block;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
padding: 0.0625rem 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
margin-left: 0.25rem;
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
/* Split sheet */
|
||||
.split-sheet {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9201;
|
||||
background: white;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
|
||||
}
|
||||
.split-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 9200;
|
||||
}
|
||||
.split-header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.split-header h4 { margin: 0 0 0.25rem; font-size: 0.9375rem; font-weight: 700; }
|
||||
.split-header p { margin: 0; font-size: 0.75rem; color: #6b7280; }
|
||||
.split-body { padding: 0.75rem 1rem; }
|
||||
.split-field { margin-bottom: 0.75rem; }
|
||||
.split-field label { display: block; font-size: 0.75rem; font-weight: 600; color: #374151; margin-bottom: 0.25rem; }
|
||||
.split-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.split-radio-group { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
|
||||
.split-radio-item {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
border: 1.5px solid #d1d5db;
|
||||
border-radius: 0.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
cursor: pointer;
|
||||
background: white;
|
||||
}
|
||||
.split-radio-item.active {
|
||||
border-color: #2563eb;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
font-weight: 600;
|
||||
}
|
||||
.split-session-list { margin-top: 0.5rem; }
|
||||
.split-session-item {
|
||||
padding: 0.625rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.split-session-item:active, .split-session-item.active {
|
||||
border-color: #2563eb;
|
||||
background: #eff6ff;
|
||||
}
|
||||
.split-footer {
|
||||
padding: 0.75rem 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
.split-btn {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.split-btn:disabled { opacity: 0.5; }
|
||||
|
||||
/* Pull sheet */
|
||||
.pull-sheet {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9101;
|
||||
background: white;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
|
||||
}
|
||||
.pull-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 9100;
|
||||
}
|
||||
.pull-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.pull-header h4 { margin: 0; font-size: 0.9375rem; font-weight: 700; }
|
||||
.pull-header p { margin: 0.25rem 0 0; font-size: 0.75rem; color: #6b7280; }
|
||||
.pull-member-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
.pull-member-info { flex: 1; }
|
||||
.pull-member-name { font-size: 0.875rem; font-weight: 600; color: #1f2937; }
|
||||
.pull-member-sub { font-size: 0.6875rem; color: #9ca3af; margin-top: 0.125rem; }
|
||||
.pull-btn {
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.pull-btn:disabled {
|
||||
background: #d1d5db;
|
||||
color: #9ca3af;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* de-split-btn in detail edit */
|
||||
.de-split-btn {
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
}
|
||||
.de-split-btn:active { background: #e5e7eb; }
|
||||
|
||||
/* Toast */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes slideIn {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes slideOut {
|
||||
from { opacity: 1; transform: translateY(0); }
|
||||
to { opacity: 0; transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
/* Loading overlay */
|
||||
.m-loading-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(255,255,255,0.75);
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.m-loading-overlay.active { display: flex; }
|
||||
.m-loading-spinner {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 3px solid #e5e7eb;
|
||||
border-top-color: #2563eb;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.m-loading-text {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
1407
system1-factory/web/public/css/tbm.css
Normal file
1407
system1-factory/web/public/css/tbm.css
Normal file
File diff suppressed because it is too large
Load Diff
472
system1-factory/web/public/css/vacation-allocation.css
Normal file
472
system1-factory/web/public/css/vacation-allocation.css
Normal file
@@ -0,0 +1,472 @@
|
||||
/**
|
||||
* vacation-allocation.css
|
||||
* 휴가 발생 입력 페이지 스타일
|
||||
*/
|
||||
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-primary);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
/* 페이지 헤더 */
|
||||
.page-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
font-size: 1rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 탭 네비게이션 */
|
||||
.tab-navigation {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
padding: 1rem 2rem;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
bottom: -2px;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
color: var(--color-primary);
|
||||
border-bottom-color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* 탭 콘텐츠 */
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
animation: fadeIn 0.3s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 폼 섹션 */
|
||||
.form-section {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-group.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.form-select,
|
||||
.form-input {
|
||||
padding: 0.625rem 1rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-primary);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.form-select:focus,
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.form-input[type="number"] {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.form-group small {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* 자동 계산 섹션 */
|
||||
.auto-calculate-section {
|
||||
background: var(--color-bg-secondary);
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-header h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
border: 1px solid #93c5fd;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
border: 1px solid #fde68a;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border: 1px solid #6ee7b7;
|
||||
}
|
||||
|
||||
/* 폼 액션 버튼 */
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
/* 기존 데이터 섹션 */
|
||||
.existing-data-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.existing-data-section h3 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* 미리보기 섹션 */
|
||||
.preview-section {
|
||||
margin-top: 2rem;
|
||||
animation: slideDown 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
max-height: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-section h3 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* 테이블 */
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.data-table thead {
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.data-table tbody tr {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.data-table tbody tr:hover {
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
padding: 1rem;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
padding: 3rem 1rem !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-state .spinner {
|
||||
margin: 0 auto 1rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid var(--color-border);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state p {
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* 액션 버튼 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
padding: 0.5rem;
|
||||
min-width: auto;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* 배지 */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.badge-error {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
/* 모달 */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
animation: modalSlideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes modalSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background: var(--color-bg-secondary);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* 반응형 */
|
||||
@media (max-width: 768px) {
|
||||
.content-wrapper {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.tab-navigation {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
padding: 0.75rem 1.25rem;
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-actions button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 95%;
|
||||
max-height: 95vh;
|
||||
}
|
||||
}
|
||||
1687
system1-factory/web/public/css/work-analysis.css
Normal file
1687
system1-factory/web/public/css/work-analysis.css
Normal file
File diff suppressed because it is too large
Load Diff
108
system1-factory/web/public/css/work-report.css
Normal file
108
system1-factory/web/public/css/work-report.css
Normal file
@@ -0,0 +1,108 @@
|
||||
/* ✅ /css/workreport.css */
|
||||
|
||||
body {
|
||||
font-family: 'Malgun Gothic', sans-serif;
|
||||
background-color: #f8f9fa;
|
||||
margin: 0;
|
||||
padding: 30px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: #1976d2;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
max-width: 500px;
|
||||
margin: 0 auto 30px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#calendar .nav {
|
||||
grid-column: span 7;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#calendar button {
|
||||
padding: 8px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ccc;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#calendar button:hover {
|
||||
background-color: #e3f2fd;
|
||||
}
|
||||
|
||||
.selected-date {
|
||||
background-color: #4caf50 !important;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
background-color: white;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f1f3f4;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
select,
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
background-color: #d9534f;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.remove-btn:hover {
|
||||
background-color: #c9302c;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
display: block;
|
||||
margin: 30px auto;
|
||||
padding: 12px 30px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
background-color: #1976d2;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background-color: #1565c0;
|
||||
}
|
||||
1427
system1-factory/web/public/css/workplace-management.css
Normal file
1427
system1-factory/web/public/css/workplace-management.css
Normal file
File diff suppressed because it is too large
Load Diff
1492
system1-factory/web/public/css/zone-detail.css
Normal file
1492
system1-factory/web/public/css/zone-detail.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user