diff --git a/assets/css/candidate_management.css b/assets/css/candidate_management.css index fb46853..1fe252c 100644 --- a/assets/css/candidate_management.css +++ b/assets/css/candidate_management.css @@ -16,8 +16,8 @@ } .candidate-stat-card { - background: #ffffff; - border: 1px solid #f3f4f6; + background: var(--surface-color); + border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; } @@ -25,7 +25,7 @@ .candidate-stat-label { font-size: 0.7rem; font-weight: 700; - color: #64748b; + color: var(--text-muted); margin-bottom: 16px; letter-spacing: 0.05em; text-transform: uppercase; @@ -46,8 +46,8 @@ } .distribution-card { - background: #ffffff; - border: 1px solid #f3f4f6; + background: var(--surface-color); + border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; } @@ -77,7 +77,7 @@ .distribution-count { font-weight: 700; - color: #1e293b; + color: var(--text-main); } /* Filter Bar */ @@ -86,8 +86,8 @@ display: flex; gap: 16px; align-items: flex-end; - background: #ffffff; - border-bottom: 1px solid #f3f4f6; + background: var(--surface-color); + border-bottom: 1px solid var(--border-color); } .filter-group { @@ -128,12 +128,12 @@ .filter-group select { padding: 10px 12px; - border: 1px solid #e2e8f0; + border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.875rem; outline: none; - background: #ffffff; - color: #4b5563; + background: var(--surface-color); + color: var(--text-main); } /* Candidates Table */ @@ -147,17 +147,17 @@ text-align: left; font-size: 0.7rem; font-weight: 700; - color: #64748b; - background: #f9fafb; - border-bottom: 1px solid #f3f4f6; + color: var(--text-muted); + background: var(--table-header-bg); + border-bottom: 1px solid var(--border-color); text-transform: uppercase; } .candidates-table td { padding: 16px 24px; - border-bottom: 1px solid #f3f4f6; + border-bottom: 1px solid var(--border-color); font-size: 0.875rem; - color: #1e293b; + color: var(--text-main); } .candidate-info { @@ -186,12 +186,12 @@ .candidate-name { font-weight: 600; - color: #1e293b; + color: var(--text-main); } .candidate-sub { font-size: 0.75rem; - color: #64748b; + color: var(--text-muted); } .position-badge { diff --git a/assets/css/officers_management.css b/assets/css/officers_management.css index 8295bbf..0cf112d 100644 --- a/assets/css/officers_management.css +++ b/assets/css/officers_management.css @@ -8,16 +8,16 @@ } .officer-category-card { - background: white; + background: var(--surface-color); border-radius: 12px; - border: 1px solid #f3f4f6; + border: 1px solid var(--border-color); display: flex; flex-direction: column; } .category-header { padding: 16px 20px; - border-bottom: 1px solid #f3f4f6; + border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; @@ -28,7 +28,7 @@ align-items: center; gap: 10px; font-weight: 600; - color: #1e293b; + color: var(--text-main); font-size: 0.9375rem; } @@ -56,7 +56,7 @@ } .officer-item:hover { - background-color: #f8fafc; + background-color: var(--surface-hover); } .officer-main-info { @@ -86,12 +86,12 @@ .officer-name { font-size: 0.875rem; font-weight: 500; - color: #1e293b; + color: var(--text-main); } .officer-meta { font-size: 0.75rem; - color: #64748b; + color: var(--text-muted); } .officer-actions { @@ -123,9 +123,9 @@ /* Registration Form Section */ .registration-section { - background: white; + background: var(--surface-color); border-radius: 12px; - border: 1px solid #f3f4f6; + border: 1px solid var(--border-color); padding: 24px; margin-bottom: 24px; } @@ -135,7 +135,7 @@ align-items: center; gap: 10px; margin-bottom: 20px; - color: #1e293b; + color: var(--text-main); font-weight: 600; } @@ -155,16 +155,17 @@ .form-group label { font-size: 0.75rem; font-weight: 700; - color: #1e293b; + color: var(--text-main); text-transform: uppercase; } .form-group input, .form-group select { padding: 10px 14px; - border: 1px solid #e2e8f0; + background: var(--bg-color); + border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.875rem; - color: #1e293b; + color: var(--text-main); outline: none; transition: border-color 0.2s; } diff --git a/assets/css/style.css b/assets/css/style.css index 67998b3..734786f 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -3,9 +3,11 @@ --accent-color: #2563eb; --bg-color: #f8fafc; --surface-color: #ffffff; + --surface-hover: #f8fafc; --border-color: #e2e8f0; --text-main: #1e293b; --text-muted: #64748b; + --table-header-bg: #f9fafb; --radius: 6px; } @@ -161,9 +163,11 @@ body { body.dark-theme { --bg-color: #0f172a; --surface-color: #1e293b; + --surface-hover: #334155; --border-color: #334155; --text-main: #f1f5f9; --text-muted: #94a3b8; + --table-header-bg: #334155; } body.dark-theme .navbar { diff --git a/assets/css/voter_management.css b/assets/css/voter_management.css index d43b5d9..55f1992 100644 --- a/assets/css/voter_management.css +++ b/assets/css/voter_management.css @@ -16,8 +16,8 @@ } .voter-stat-card { - background: #ffffff; - border: 1px solid #f3f4f6; + background: var(--surface-color); + border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; } @@ -25,7 +25,7 @@ .voter-stat-label { font-size: 0.7rem; font-weight: 700; - color: #64748b; + color: var(--text-muted); margin-bottom: 16px; letter-spacing: 0.05em; } @@ -44,8 +44,8 @@ } .distribution-card { - background: #ffffff; - border: 1px solid #f3f4f6; + background: var(--surface-color); + border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; } @@ -75,7 +75,7 @@ .distribution-count { font-weight: 700; - color: #1e293b; + color: var(--text-main); } /* Action Buttons */ @@ -112,8 +112,8 @@ display: flex; gap: 16px; align-items: flex-end; - background: #ffffff; - border-bottom: 1px solid #f3f4f6; + background: var(--surface-color); + border-bottom: 1px solid var(--border-color); } .filter-group { @@ -153,12 +153,12 @@ .filter-group select { padding: 10px 12px; - border: 1px solid #e2e8f0; + border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.875rem; outline: none; - background: #ffffff; - color: #4b5563; + background: var(--surface-color); + color: var(--text-main); } /* Voters Table */ @@ -172,16 +172,16 @@ text-align: left; font-size: 0.7rem; font-weight: 700; - color: #64748b; - background: #f9fafb; - border-bottom: 1px solid #f3f4f6; + color: var(--text-muted); + background: var(--table-header-bg); + border-bottom: 1px solid var(--border-color); } .voters-table td { padding: 16px 24px; - border-bottom: 1px solid #f3f4f6; + border-bottom: 1px solid var(--border-color); font-size: 0.875rem; - color: #1e293b; + color: var(--text-main); } .status-indicator { @@ -240,7 +240,8 @@ } .modal-content { - background: white; + background: var(--surface-color); + color: var(--text-main); padding: 32px; border-radius: 16px; width: 100%; @@ -248,6 +249,12 @@ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } +.modal-header h2 { + font-size: 1.25rem; + color: var(--text-main); + margin: 0; +} + .modal-header { display: flex; justify-content: space-between; @@ -285,12 +292,14 @@ .form-group label { font-size: 0.75rem; font-weight: 600; - color: #64748b; + color: var(--text-muted); } .form-group input, .form-group select { padding: 10px 12px; - border: 1px solid #e2e8f0; + background: var(--bg-color); + color: var(--text-main); + border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.875rem; outline: none; diff --git a/candidate_management.php b/candidate_management.php index 8595570..9510de5 100644 --- a/candidate_management.php +++ b/candidate_management.php @@ -118,18 +118,18 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System font-weight: 600; cursor: pointer; transition: all 0.2s; - border: 1px solid #e2e8f0; - background: white; - color: #1e293b; + border: 1px solid var(--border-color); + background: var(--surface-color); + color: var(--text-main); } .btn-manage:hover { - background: #f8fafc; - border-color: #cbd5e1; + background: var(--surface-hover); + border-color: var(--border-color); } .btn-manage.primary { - background: #4f46e5; + background: var(--accent-color); color: white; - border-color: #4f46e5; + border-color: var(--accent-color); } .btn-manage.primary:hover { background: #4338ca; @@ -138,13 +138,13 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; } .modal-content { - background: white; + background: var(--surface-color); + color: var(--text-main); padding: 32px; border-radius: 16px; width: 100%; @@ -157,14 +157,16 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System align-items: center; margin-bottom: 24px; } - .modal-header h2 { margin: 0; font-size: 1.25rem; color: #1e293b; } + .modal-header h2 { margin: 0; font-size: 1.25rem; color: var(--text-main); } .form-group { margin-bottom: 16px; } - .form-group label { display: block; font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 6px; } + .form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; + background: var(--bg-color); + color: var(--text-main); border-radius: 8px; - border: 1px solid #e2e8f0; + border: 1px solid var(--border-color); font-size: 14px; } .modal-footer { @@ -190,8 +192,8 @@ $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Online Election System
Managing = htmlspecialchars($election['title']) ?>
+Managing = htmlspecialchars($election['title']) ?>