Sep 11 - Reupload the code
This commit is contained in:
@@ -0,0 +1,830 @@
|
||||
/* Admin Logs Styles - Enhanced version */
|
||||
.logs-page {
|
||||
padding: var(--spacing-6);
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logs-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: var(--spacing-8);
|
||||
padding-bottom: var(--spacing-6);
|
||||
border-bottom: 2px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: 700;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: var(--spacing-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.header-content p {
|
||||
color: var(--gray-600);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-size: var(--font-size-sm);
|
||||
margin-bottom: var(--spacing-4);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
/* Log Statistics */
|
||||
.log-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: var(--spacing-6);
|
||||
margin-bottom: var(--spacing-8);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--white);
|
||||
padding: var(--spacing-6);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-4);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--white);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color),
|
||||
var(--primary-hover)
|
||||
);
|
||||
}
|
||||
|
||||
.stat-icon.security {
|
||||
background: linear-gradient(135deg, #f59e0b, #b45309);
|
||||
}
|
||||
|
||||
.stat-icon.errors {
|
||||
background: linear-gradient(135deg, #ef4444, #b91c1c);
|
||||
}
|
||||
|
||||
.stat-icon.users {
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
}
|
||||
|
||||
.stat-info h3 {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: 700;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: var(--spacing-1);
|
||||
}
|
||||
|
||||
.stat-info p {
|
||||
color: var(--gray-500);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
/* Log Controls */
|
||||
.log-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-6);
|
||||
padding: var(--spacing-4);
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.search-filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-4);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 100%;
|
||||
padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-10);
|
||||
border: 1px solid var(--gray-300);
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--font-size-sm);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.search-box input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.search-box i {
|
||||
position: absolute;
|
||||
left: var(--spacing-3);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--gray-400);
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
border: 1px solid var(--gray-300);
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--font-size-sm);
|
||||
background: var(--white);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Logs Table */
|
||||
.logs-table-container {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--spacing-6);
|
||||
}
|
||||
|
||||
.logs-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.logs-table th,
|
||||
.logs-table td {
|
||||
padding: var(--spacing-3) var(--spacing-4);
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.logs-table th {
|
||||
background: var(--gray-50);
|
||||
font-weight: 600;
|
||||
color: var(--gray-700);
|
||||
font-size: var(--font-size-sm);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.logs-table tr:hover {
|
||||
background: var(--gray-50);
|
||||
}
|
||||
|
||||
.logs-table tr.severity-high {
|
||||
border-left: 4px solid #ef4444;
|
||||
}
|
||||
|
||||
.logs-table tr.severity-medium {
|
||||
border-left: 4px solid #f59e0b;
|
||||
}
|
||||
|
||||
.logs-table tr.severity-low {
|
||||
border-left: 4px solid #10b981;
|
||||
}
|
||||
|
||||
.logs-table tr.severity-info {
|
||||
border-left: 4px solid #3b82f6;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--gray-600);
|
||||
white-space: nowrap;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.event-type {
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
font-size: var(--font-size-sm);
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.category-badge,
|
||||
.severity-badge {
|
||||
padding: var(--spacing-1) var(--spacing-2);
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.category-badge.security {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.category-badge.database {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.category-badge.user_activity {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.category-badge.system {
|
||||
background: #f3e8ff;
|
||||
color: #7c3aed;
|
||||
}
|
||||
|
||||
.severity-badge.high {
|
||||
background: #ef4444;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.severity-badge.medium {
|
||||
background: #f59e0b;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.severity-badge.low {
|
||||
background: #10b981;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.severity-badge.info {
|
||||
background: #3b82f6;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.description {
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.description:hover {
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: 500;
|
||||
color: var(--gray-700);
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.ip-address {
|
||||
font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--gray-500);
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
/* Loading and Empty States */
|
||||
.loading-state,
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: var(--spacing-12);
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
.loading-state i {
|
||||
font-size: var(--font-size-2xl);
|
||||
margin-bottom: var(--spacing-4);
|
||||
color: var(--primary-color);
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 4rem;
|
||||
margin-bottom: var(--spacing-4);
|
||||
color: var(--gray-300);
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--gray-700);
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--spacing-4);
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
color: var(--gray-600);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
.pagination-controls button {
|
||||
min-width: 80px;
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
border: 1px solid var(--gray-300);
|
||||
background: var(--white);
|
||||
color: var(--gray-700);
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.pagination-controls button:hover:not(:disabled) {
|
||||
background: var(--gray-50);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.pagination-controls button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background: var(--gray-100);
|
||||
}
|
||||
|
||||
/* Page number buttons */
|
||||
.page-number {
|
||||
min-width: 35px !important;
|
||||
margin: 0 2px;
|
||||
padding: var(--spacing-1) var(--spacing-2) !important;
|
||||
border: 1px solid var(--gray-300);
|
||||
background: var(--white);
|
||||
color: var(--gray-700);
|
||||
}
|
||||
|
||||
.page-number:hover:not(.active) {
|
||||
background: var(--gray-50);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.page-number.active {
|
||||
background: var(--primary-color) !important;
|
||||
color: var(--white) !important;
|
||||
border-color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.pagination-ellipsis {
|
||||
padding: var(--spacing-1) var(--spacing-2);
|
||||
color: var(--gray-500);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.pagination-numbers {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-1);
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal {
|
||||
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;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: var(--shadow-xl);
|
||||
animation: modalSlideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes modalSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--spacing-6);
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
color: var(--gray-900);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: var(--font-size-xl);
|
||||
cursor: pointer;
|
||||
color: var(--gray-400);
|
||||
padding: var(--spacing-1);
|
||||
border-radius: var(--radius);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--gray-600);
|
||||
background: var(--gray-100);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: var(--spacing-6);
|
||||
}
|
||||
|
||||
.modal-body .form-group {
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
|
||||
.modal-body label {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-2);
|
||||
font-weight: 600;
|
||||
color: var(--gray-700);
|
||||
}
|
||||
|
||||
.modal-body .form-control {
|
||||
width: 100%;
|
||||
padding: var(--spacing-3);
|
||||
border: 1px solid var(--gray-300);
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--font-size-sm);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.modal-body .form-control:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--spacing-3);
|
||||
padding: var(--spacing-6);
|
||||
border-top: 1px solid var(--gray-200);
|
||||
background: var(--gray-50);
|
||||
}
|
||||
|
||||
.warning-note {
|
||||
background: #fef3c7;
|
||||
border: 1px solid #f59e0b;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--spacing-4);
|
||||
margin-top: var(--spacing-4);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.warning-note i {
|
||||
color: #f59e0b;
|
||||
margin-top: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.warning-note strong {
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
/* Button Enhancements */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-2) var(--spacing-4);
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary-color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--gray-500);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--gray-600);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: #f59e0b;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background: #d97706;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: var(--spacing-1) var(--spacing-3);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.logs-page {
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.logs-header {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.header-actions .btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.log-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.log-controls {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
.search-filters {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logs-table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.logs-table {
|
||||
min-width: 800px;
|
||||
}
|
||||
|
||||
.logs-table th,
|
||||
.logs-table td {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.stat-card {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 95%;
|
||||
margin: var(--spacing-4);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-footer .btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logs-table {
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.description {
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced Animations */
|
||||
.stat-card {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
.stat-card:nth-child(1) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.stat-card:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.stat-card:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.stat-card:nth-child(4) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.logs-table tbody tr {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus and accessibility improvements */
|
||||
.btn:focus,
|
||||
.filter-select:focus,
|
||||
.search-box input:focus {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
.logs-header .header-actions,
|
||||
.log-controls,
|
||||
.pagination-wrapper,
|
||||
.modal {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.logs-page {
|
||||
padding: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.logs-table {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.logs-table th,
|
||||
.logs-table td {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal error states */
|
||||
.modal-error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
padding: 1rem;
|
||||
border-radius: 0.375rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
|
||||
.modal-error i {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* Debug info for development */
|
||||
.debug-info {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
font-family: monospace;
|
||||
font-size: 0.875rem;
|
||||
display: none; /* Show only in debug mode */
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,642 @@
|
||||
/**
|
||||
* Attendance Fullscreen CSS
|
||||
* Optimized for iPad and tablet viewing
|
||||
* static/css/attendance_fullscreen.css
|
||||
*/
|
||||
|
||||
/* ===========================
|
||||
FULLSCREEN TOGGLE BUTTON
|
||||
=========================== */
|
||||
.fullscreen-toggle-btn {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.fullscreen-toggle-btn:hover {
|
||||
background: linear-gradient(135deg, #1d4ed8, #1e40af);
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
.fullscreen-toggle-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
FULLSCREEN MODE BASE
|
||||
=========================== */
|
||||
.fullscreen-mode {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
max-width: 100vw !important;
|
||||
margin: 0 !important;
|
||||
background: #f8fafc !important;
|
||||
z-index: 9998 !important;
|
||||
overflow: auto !important;
|
||||
padding: 20px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
HIDE UI ELEMENTS IN FULLSCREEN
|
||||
=========================== */
|
||||
|
||||
/* Hide sidebar and overlays */
|
||||
.fullscreen-mode ~ #sidebar,
|
||||
.fullscreen-mode ~ .sidebar-overlay,
|
||||
body.fullscreen-active #sidebar,
|
||||
body.fullscreen-active .sidebar-overlay {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Adjust main wrapper */
|
||||
body.fullscreen-active .main-wrapper {
|
||||
margin-left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Hide header completely */
|
||||
.fullscreen-mode .attendance-header,
|
||||
.fullscreen-mode > .attendance-header {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Hide ALL stats sections with various possible class names */
|
||||
.fullscreen-mode .stats-section,
|
||||
.fullscreen-mode > .stats-section,
|
||||
.fullscreen-mode .stats-overview,
|
||||
.fullscreen-mode > .stats-overview,
|
||||
.fullscreen-mode .statistics-section,
|
||||
.fullscreen-mode > .statistics-section,
|
||||
.fullscreen-mode [class*="stat"][class*="section"],
|
||||
.fullscreen-mode div[class*="stat-"] {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Exception: Keep stat cards inside table section visible */
|
||||
.fullscreen-mode .attendance-table-section .stat-card,
|
||||
.fullscreen-mode .table-section .stat-card {
|
||||
display: flex !important;
|
||||
visibility: visible !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
COMPACT FILTERS IN FULLSCREEN
|
||||
=========================== */
|
||||
.fullscreen-mode .filters-section {
|
||||
margin-bottom: 1rem !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .filters-card {
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .filters-header {
|
||||
padding: 0.75rem 1.5rem !important;
|
||||
background: #f8fafc !important;
|
||||
border-bottom: 1px solid #e2e8f0 !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .filters-header h3 {
|
||||
font-size: 1rem !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .filters-form {
|
||||
padding: 1rem 1.5rem !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .filter-row {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(5, 1fr) !important;
|
||||
gap: 0.75rem !important;
|
||||
align-items: end !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .filter-group {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 0.25rem !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .filter-group label {
|
||||
font-size: 0.75rem !important;
|
||||
margin-bottom: 0.25rem !important;
|
||||
font-weight: 600 !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
color: #374151 !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .filter-group input,
|
||||
.fullscreen-mode .filter-group select {
|
||||
padding: 0.5rem 0.75rem !important;
|
||||
font-size: 0.875rem !important;
|
||||
height: 38px !important;
|
||||
border: 2px solid #e2e8f0 !important;
|
||||
border-radius: 6px !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .filter-group input:focus,
|
||||
.fullscreen-mode .filter-group select:focus {
|
||||
border-color: #2563eb !important;
|
||||
outline: none !important;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .filter-actions {
|
||||
grid-column: 1 / -1 !important;
|
||||
display: flex !important;
|
||||
gap: 0.75rem !important;
|
||||
justify-content: flex-start !important;
|
||||
margin-top: 0.5rem !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .filter-actions .btn {
|
||||
padding: 0.5rem 1rem !important;
|
||||
font-size: 0.875rem !important;
|
||||
height: 38px !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
TABLE SECTION IN FULLSCREEN
|
||||
=========================== */
|
||||
.fullscreen-mode .attendance-table-section {
|
||||
margin-bottom: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
background: white !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .table-header {
|
||||
padding: 0.75rem 1.5rem !important;
|
||||
background: #f8fafc !important;
|
||||
border-bottom: 1px solid #e2e8f0 !important;
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .table-header h3 {
|
||||
font-size: 1rem !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .table-controls {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .table-container {
|
||||
max-height: calc(100vh - 280px) !important;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table {
|
||||
font-size: 0.8125rem !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table th,
|
||||
.fullscreen-mode .attendance-table td {
|
||||
padding: 0.625rem 0.5rem !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table th {
|
||||
position: sticky !important;
|
||||
top: 0 !important;
|
||||
background: #f8fafc !important;
|
||||
z-index: 10 !important;
|
||||
font-size: 0.75rem !important;
|
||||
font-weight: 600 !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.025em !important;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
TABLE COLUMN OPTIMIZATION
|
||||
=========================== */
|
||||
|
||||
/* Prevent text overlap - allow wrapping for long content */
|
||||
.fullscreen-mode .attendance-table td {
|
||||
white-space: normal !important;
|
||||
word-wrap: break-word !important;
|
||||
word-break: break-word !important;
|
||||
max-width: 200px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* Keep headers on single line */
|
||||
.fullscreen-mode .attendance-table th {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
/* Specific column width optimizations */
|
||||
.fullscreen-mode .attendance-table th:nth-child(1),
|
||||
.fullscreen-mode .attendance-table td:nth-child(1) {
|
||||
/* # column */
|
||||
width: 40px !important;
|
||||
min-width: 40px !important;
|
||||
max-width: 40px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table th:nth-child(2),
|
||||
.fullscreen-mode .attendance-table td:nth-child(2) {
|
||||
/* Employee ID */
|
||||
width: 80px !important;
|
||||
min-width: 80px !important;
|
||||
max-width: 80px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table th:nth-child(3),
|
||||
.fullscreen-mode .attendance-table td:nth-child(3) {
|
||||
/* Employee Name */
|
||||
width: 120px !important;
|
||||
min-width: 120px !important;
|
||||
max-width: 120px !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table th:nth-child(4),
|
||||
.fullscreen-mode .attendance-table td:nth-child(4) {
|
||||
/* Location */
|
||||
width: 150px !important;
|
||||
min-width: 150px !important;
|
||||
max-width: 150px !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table th:nth-child(5),
|
||||
.fullscreen-mode .attendance-table td:nth-child(5) {
|
||||
/* Event */
|
||||
width: 80px !important;
|
||||
min-width: 80px !important;
|
||||
max-width: 80px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table th:nth-child(6),
|
||||
.fullscreen-mode .attendance-table td:nth-child(6) {
|
||||
/* Date */
|
||||
width: 100px !important;
|
||||
min-width: 100px !important;
|
||||
max-width: 100px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table th:nth-child(7),
|
||||
.fullscreen-mode .attendance-table td:nth-child(7) {
|
||||
/* Time */
|
||||
width: 80px !important;
|
||||
min-width: 80px !important;
|
||||
max-width: 80px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table th:nth-child(8),
|
||||
.fullscreen-mode .attendance-table td:nth-child(8) {
|
||||
/* QR Address */
|
||||
width: 180px !important;
|
||||
min-width: 180px !important;
|
||||
max-width: 180px !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table th:nth-child(9),
|
||||
.fullscreen-mode .attendance-table td:nth-child(9) {
|
||||
/* Check-in Address */
|
||||
width: 180px !important;
|
||||
min-width: 180px !important;
|
||||
max-width: 180px !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table th:nth-child(10),
|
||||
.fullscreen-mode .attendance-table td:nth-child(10) {
|
||||
/* Location Accuracy */
|
||||
width: 100px !important;
|
||||
min-width: 100px !important;
|
||||
max-width: 100px !important;
|
||||
white-space: nowrap !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table th:nth-child(11),
|
||||
.fullscreen-mode .attendance-table td:nth-child(11) {
|
||||
/* Device */
|
||||
width: 100px !important;
|
||||
min-width: 100px !important;
|
||||
max-width: 100px !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table th:nth-child(12),
|
||||
.fullscreen-mode .attendance-table td:nth-child(12) {
|
||||
/* Actions */
|
||||
width: 80px !important;
|
||||
min-width: 80px !important;
|
||||
max-width: 80px !important;
|
||||
white-space: nowrap !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
/* Address columns - allow text to wrap within container */
|
||||
.fullscreen-mode .address-column,
|
||||
.fullscreen-mode .attendance-table td:nth-child(8),
|
||||
.fullscreen-mode .attendance-table td:nth-child(9) {
|
||||
font-size: 0.75rem !important;
|
||||
line-height: 1.3 !important;
|
||||
padding: 0.5rem 0.375rem !important;
|
||||
}
|
||||
|
||||
/* Location accuracy badge styling */
|
||||
.fullscreen-mode .location-accuracy-badge,
|
||||
.fullscreen-mode .accuracy-badge {
|
||||
display: inline-block !important;
|
||||
padding: 0.25rem 0.5rem !important;
|
||||
border-radius: 4px !important;
|
||||
font-size: 0.7rem !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
/* Device info */
|
||||
.fullscreen-mode .device-info {
|
||||
font-size: 0.75rem !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Employee info styling */
|
||||
.fullscreen-mode .employee-id,
|
||||
.fullscreen-mode .employee-name {
|
||||
font-size: 0.8125rem !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
/* Location and event info */
|
||||
.fullscreen-mode .location-info,
|
||||
.fullscreen-mode .event-info {
|
||||
font-size: 0.75rem !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.25rem !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .location-info i,
|
||||
.fullscreen-mode .event-info i {
|
||||
flex-shrink: 0 !important;
|
||||
font-size: 0.7rem !important;
|
||||
}
|
||||
|
||||
/* Address info containers */
|
||||
.fullscreen-mode .address-info {
|
||||
display: flex !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 0.25rem !important;
|
||||
word-break: break-word !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .address-info i {
|
||||
flex-shrink: 0 !important;
|
||||
margin-top: 0.125rem !important;
|
||||
font-size: 0.7rem !important;
|
||||
}
|
||||
|
||||
/* Time display */
|
||||
.fullscreen-mode .time-info {
|
||||
font-size: 0.75rem !important;
|
||||
padding: 0.25rem 0.5rem !important;
|
||||
background: #f1f5f9 !important;
|
||||
border-radius: 4px !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
/* Action buttons */
|
||||
.fullscreen-mode .record-actions {
|
||||
display: flex !important;
|
||||
gap: 0.25rem !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .action-btn {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
font-size: 0.7rem !important;
|
||||
padding: 0 !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
/* Table layout */
|
||||
.fullscreen-mode .attendance-table {
|
||||
table-layout: fixed !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Ensure table container allows horizontal scroll if needed */
|
||||
.fullscreen-mode .table-container {
|
||||
overflow-x: auto !important;
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
RESPONSIVE BREAKPOINTS
|
||||
=========================== */
|
||||
|
||||
/* iPad Landscape */
|
||||
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
|
||||
.fullscreen-mode {
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .filter-row {
|
||||
grid-template-columns: repeat(3, 1fr) !important;
|
||||
gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .filter-actions {
|
||||
grid-column: 1 / -1 !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table {
|
||||
font-size: 0.7rem !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table th,
|
||||
.fullscreen-mode .attendance-table td {
|
||||
padding: 0.5rem 0.375rem !important;
|
||||
}
|
||||
|
||||
/* Adjust column widths for iPad landscape */
|
||||
.fullscreen-mode .attendance-table th:nth-child(8),
|
||||
.fullscreen-mode .attendance-table td:nth-child(8),
|
||||
.fullscreen-mode .attendance-table th:nth-child(9),
|
||||
.fullscreen-mode .attendance-table td:nth-child(9) {
|
||||
width: 150px !important;
|
||||
min-width: 150px !important;
|
||||
max-width: 150px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* iPad Portrait */
|
||||
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
|
||||
.fullscreen-mode {
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .filter-row {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .filter-actions {
|
||||
grid-column: 1 / -1 !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .attendance-table {
|
||||
font-size: 0.7rem !important;
|
||||
}
|
||||
|
||||
/* Hide less important columns on iPad portrait */
|
||||
.fullscreen-mode .attendance-table th:nth-child(11),
|
||||
.fullscreen-mode .attendance-table td:nth-child(11) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Adjust remaining column widths */
|
||||
.fullscreen-mode .attendance-table th:nth-child(8),
|
||||
.fullscreen-mode .attendance-table td:nth-child(8),
|
||||
.fullscreen-mode .attendance-table th:nth-child(9),
|
||||
.fullscreen-mode .attendance-table td:nth-child(9) {
|
||||
width: 140px !important;
|
||||
min-width: 140px !important;
|
||||
max-width: 140px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 767px) {
|
||||
.fullscreen-toggle-btn {
|
||||
width: 45px !important;
|
||||
height: 45px !important;
|
||||
top: 15px !important;
|
||||
right: 15px !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode .filter-row {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
/* Show only essential columns on mobile */
|
||||
.fullscreen-mode .attendance-table th:nth-child(8),
|
||||
.fullscreen-mode .attendance-table td:nth-child(8),
|
||||
.fullscreen-mode .attendance-table th:nth-child(9),
|
||||
.fullscreen-mode .attendance-table td:nth-child(9),
|
||||
.fullscreen-mode .attendance-table th:nth-child(10),
|
||||
.fullscreen-mode .attendance-table td:nth-child(10),
|
||||
.fullscreen-mode .attendance-table th:nth-child(11),
|
||||
.fullscreen-mode .attendance-table td:nth-child(11) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
SCROLLBAR STYLING
|
||||
=========================== */
|
||||
.fullscreen-mode::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.fullscreen-mode::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.fullscreen-mode::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.fullscreen-mode::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
OVERSCROLL PREVENTION
|
||||
=========================== */
|
||||
.fullscreen-mode {
|
||||
overscroll-behavior: none !important;
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
}
|
||||
|
||||
body.fullscreen-active {
|
||||
overscroll-behavior: none !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
PRINT STYLES
|
||||
=========================== */
|
||||
@media print {
|
||||
.fullscreen-toggle-btn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.fullscreen-mode {
|
||||
position: static !important;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,287 @@
|
||||
/**
|
||||
* Authentication page specific styles
|
||||
* static/css/auth.css
|
||||
*
|
||||
* This file contains all authentication-related styles for login/register pages
|
||||
*/
|
||||
|
||||
/* Authentication Container - Center the form */
|
||||
.auth-container {
|
||||
min-height: 100vh !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
|
||||
padding: 2rem 1rem !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Authentication Card - Modern centered design */
|
||||
.auth-card {
|
||||
background: var(--white) !important;
|
||||
border-radius: var(--radius-2xl) !important;
|
||||
box-shadow: var(--shadow-xl) !important;
|
||||
padding: 3rem !important;
|
||||
width: 100% !important;
|
||||
max-width: 420px !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.auth-card::before {
|
||||
content: "" !important;
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
height: 4px !important;
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--primary-hover)) !important;
|
||||
}
|
||||
|
||||
/* Authentication Header */
|
||||
.auth-header {
|
||||
text-align: center !important;
|
||||
margin-bottom: 2.5rem !important;
|
||||
}
|
||||
|
||||
.auth-logo {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 80px !important;
|
||||
height: 80px !important;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
|
||||
border-radius: 50% !important;
|
||||
margin-bottom: 1.5rem !important;
|
||||
box-shadow: var(--shadow-lg) !important;
|
||||
}
|
||||
|
||||
.auth-logo i {
|
||||
font-size: 2.5rem !important;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
.auth-header h1 {
|
||||
font-size: 2.25rem !important;
|
||||
font-weight: 700 !important;
|
||||
color: var(--gray-900) !important;
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
.auth-header p {
|
||||
color: var(--gray-500) !important;
|
||||
font-size: 1.125rem !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Authentication Form */
|
||||
.auth-form {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.auth-form .form-group {
|
||||
margin-bottom: 2rem !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.auth-form .form-group label {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.75rem !important;
|
||||
font-weight: 600 !important;
|
||||
color: var(--gray-700) !important;
|
||||
margin-bottom: 0.75rem !important;
|
||||
font-size: 0.925rem !important;
|
||||
}
|
||||
|
||||
.auth-form .form-group label i {
|
||||
width: 20px !important;
|
||||
text-align: center !important;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.auth-form .form-group input {
|
||||
width: 100% !important;
|
||||
padding: 1rem !important;
|
||||
border: 2px solid var(--gray-200) !important;
|
||||
border-radius: var(--radius-xl) !important;
|
||||
font-size: 1rem !important;
|
||||
transition: var(--transition) !important;
|
||||
background-color: var(--white) !important;
|
||||
}
|
||||
|
||||
.auth-form .form-group input:focus {
|
||||
outline: none !important;
|
||||
border-color: var(--primary-color) !important;
|
||||
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.auth-form .form-group.focused label {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
/* Button Styles */
|
||||
.auth-form .btn {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 0.75rem !important;
|
||||
padding: 1rem 2rem !important;
|
||||
font-size: 1rem !important;
|
||||
font-weight: 600 !important;
|
||||
border: none !important;
|
||||
border-radius: var(--radius-xl) !important;
|
||||
cursor: pointer !important;
|
||||
transition: var(--transition) !important;
|
||||
text-decoration: none !important;
|
||||
min-height: 52px !important;
|
||||
}
|
||||
|
||||
.auth-form .btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
|
||||
color: var(--white) !important;
|
||||
box-shadow: var(--shadow) !important;
|
||||
}
|
||||
|
||||
.auth-form .btn-primary:hover {
|
||||
transform: translateY(-2px) !important;
|
||||
box-shadow: var(--shadow-lg) !important;
|
||||
}
|
||||
|
||||
.auth-form .btn-primary:active {
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
|
||||
.auth-form .btn-full {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.auth-form .btn:disabled {
|
||||
opacity: 0.7 !important;
|
||||
cursor: not-allowed !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Remove Auth Footer (Register Link) */
|
||||
.auth-footer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.auth-container {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
padding: 2rem !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.auth-header h1 {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
|
||||
.auth-logo {
|
||||
width: 70px !important;
|
||||
height: 70px !important;
|
||||
}
|
||||
|
||||
.auth-logo i {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.auth-card {
|
||||
padding: 1.5rem !important;
|
||||
}
|
||||
|
||||
.auth-header h1 {
|
||||
font-size: 1.75rem !important;
|
||||
}
|
||||
|
||||
.auth-form .form-group {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading Animation */
|
||||
.fa-spinner {
|
||||
animation: spin 1s linear infinite !important;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus Accessibility */
|
||||
.auth-form .btn:focus,
|
||||
.auth-form .form-group input:focus {
|
||||
outline: 2px solid var(--primary-color) !important;
|
||||
outline-offset: 2px !important;
|
||||
}
|
||||
|
||||
/* High Contrast Mode Support */
|
||||
@media (prefers-contrast: high) {
|
||||
.auth-card {
|
||||
border: 2px solid var(--gray-900) !important;
|
||||
}
|
||||
|
||||
.auth-form .form-group input {
|
||||
border-width: 3px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced Motion Support */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
.auth-form .btn-primary:hover,
|
||||
.auth-form .form-group input:focus {
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Turnstile Integration */
|
||||
.turnstile-container {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
margin: 1.5rem 0 !important;
|
||||
}
|
||||
|
||||
.turnstile-container .cf-turnstile {
|
||||
transform: scale(0.95) !important;
|
||||
transform-origin: center !important;
|
||||
}
|
||||
|
||||
/* Responsive Turnstile */
|
||||
@media screen and (max-width: 480px) {
|
||||
.turnstile-container .cf-turnstile {
|
||||
transform: scale(0.85) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Form validation enhancement for Turnstile */
|
||||
.auth-form .form-group.turnstile-error {
|
||||
border: 2px solid var(--error-color) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
padding: 1rem !important;
|
||||
background-color: rgba(239, 68, 68, 0.05) !important;
|
||||
}
|
||||
|
||||
/* Dark theme support */
|
||||
.turnstile-container .cf-turnstile[data-theme="dark"] {
|
||||
background-color: var(--gray-800) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,823 @@
|
||||
/**
|
||||
* Employee Management Page Styles
|
||||
* static/css/employees.css
|
||||
*/
|
||||
|
||||
/* Main Container */
|
||||
.employees-page {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
/* Sidebar Layout Compatibility */
|
||||
body.has-sidebar .employees-page {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.main-wrapper .employees-page {
|
||||
padding: 2rem;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.employees-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.employees-header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #2563eb, #1d4ed8);
|
||||
}
|
||||
|
||||
.header-navigation {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
text-decoration: none;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border: 1px solid #cbd5e1;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: #e2e8f0;
|
||||
color: #334155;
|
||||
transform: translateX(-2px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
font-size: 1.875rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.header-content h1 i {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.header-description {
|
||||
color: #64748b;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Statistics Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #ffffff;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-card.search-results {
|
||||
border: 2px solid #fbbf24;
|
||||
background: #fefbf2;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
||||
color: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-card.search-results .stat-icon {
|
||||
background: linear-gradient(135deg, #f59e0b, #d97706);
|
||||
}
|
||||
|
||||
.stat-info h3 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-info p {
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Search Section */
|
||||
.search-section {
|
||||
background: #ffffff;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-input-group {
|
||||
position: relative;
|
||||
display: flex;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 0.5rem 0 0 0.5rem;
|
||||
font-size: 1rem;
|
||||
background: #ffffff;
|
||||
transition: border-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
padding: 0.75rem 1.25rem;
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.clear-search-btn {
|
||||
padding: 0.75rem 1.25rem;
|
||||
background: #dc2626;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
}
|
||||
|
||||
.search-input-group:has(.clear-search-btn) .search-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.search-btn:hover {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
|
||||
.clear-search-btn:hover {
|
||||
background: #b91c1c;
|
||||
}
|
||||
|
||||
/* Employee Table Container */
|
||||
.employees-table-container {
|
||||
background: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.table-header h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.table-info {
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Table Styles */
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.employees-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.employees-table thead {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.employees-table th {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.employees-table tbody tr {
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.employees-table tbody tr:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.employees-table td {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Table Cell Specific Styles */
|
||||
.row-number {
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.employee-id .id-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.employee-name {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.name-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
||||
color: #ffffff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar i {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.name-details h4 {
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
margin: 0 0 0.25rem 0;
|
||||
}
|
||||
|
||||
.name-details p {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.employee-title .title-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: #ecfdf5;
|
||||
color: #065f46;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.employee-title .no-title {
|
||||
color: #9ca3af;
|
||||
font-style: italic;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.contract .contract-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.actions {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background: #0891b2;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
background: #0e7490;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: #f59e0b;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background: #d97706;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #dc2626;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #b91c1c;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6b7280;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination-container {
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.pagination-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.pagination-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: #374151;
|
||||
text-decoration: none;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.pagination-link:hover {
|
||||
background: #f3f4f6;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
.pagination-link.current {
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 4rem;
|
||||
color: #d1d5db;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.empty-state a {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty-state a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
animation: modalSlideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes modalSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #dc2626;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-header h3 i {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.close-modal {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.close-modal:hover {
|
||||
color: #374151;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-body p {
|
||||
margin-bottom: 1rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.modal-body p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 0.375rem;
|
||||
color: #b91c1c;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.warning-text i {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: flex-end;
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
/* Search Highlighting */
|
||||
mark {
|
||||
background: #fef08a;
|
||||
color: #854d0e;
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: 0.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.employees-page {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.employees-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.employees-table {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.employees-table th,
|
||||
.employees-table td {
|
||||
padding: 0.75rem 0.5rem;
|
||||
}
|
||||
|
||||
.name-container {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 95%;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.modal.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
||||
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
transform: translateY(-20px);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.modal.show .modal-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 1.5rem 1.5rem 1rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
color: #dc2626;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 1rem 1.5rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.close-modal {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.375rem;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.close-modal:hover {
|
||||
color: #374151;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
color: #dc2626;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Enhanced button styles for better interaction feedback */
|
||||
.btn-danger:hover {
|
||||
background-color: #b91c1c;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
background-color: #b91c1c !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
|
||||
/* Loading state for delete button */
|
||||
.btn-danger:disabled {
|
||||
background-color: #9ca3af;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -0,0 +1,897 @@
|
||||
/* Export Configuration Styles */
|
||||
.export-config-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
/* Header Section */
|
||||
.export-header {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem 2rem;
|
||||
margin: 0 auto 2rem;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.header-title-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.header-title-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
color: #2d3748;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.header-content h1 i {
|
||||
color: #48bb78;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.header-content p {
|
||||
color: #718096;
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Applied Filters Section */
|
||||
.applied-filters-section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
.filters-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.filters-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.filters-header h3 {
|
||||
color: #2d3748;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.filters-header i {
|
||||
color: #4299e1;
|
||||
}
|
||||
|
||||
.filters-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.filter-tag {
|
||||
background: linear-gradient(135deg, #4299e1, #3182ce);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 25px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
box-shadow: 0 2px 8px rgba(66, 153, 225, 0.3);
|
||||
}
|
||||
|
||||
/* Export Configuration Section */
|
||||
.export-config-section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.config-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.config-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.config-header h3 {
|
||||
color: #2d3748;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.config-header i {
|
||||
color: #48bb78;
|
||||
}
|
||||
|
||||
.config-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Columns Grid */
|
||||
.columns-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.column-item {
|
||||
background: linear-gradient(135deg, #f7fafc, #edf2f7);
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.column-item:hover {
|
||||
border-color: #4299e1;
|
||||
box-shadow: 0 4px 16px rgba(66, 153, 225, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.column-checkbox {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.column-checkbox input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.column-checkbox label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
color: #2d3748;
|
||||
font-size: 1.1rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.column-checkbox label i {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #cbd5e0;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8rem;
|
||||
color: transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.column-checkbox input[type="checkbox"]:checked + label {
|
||||
background: linear-gradient(135deg, #48bb78, #38a169);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.column-checkbox input[type="checkbox"]:checked + label i {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.column-name-input {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.column-name-input label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
color: #4a5568;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.column-name-input input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
background: white;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.column-name-input input:focus {
|
||||
outline: none;
|
||||
border-color: #4299e1;
|
||||
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
|
||||
}
|
||||
|
||||
/* Preview Section */
|
||||
.preview-section {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.preview-header h3 {
|
||||
color: #2d3748;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 1.5rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.preview-header i {
|
||||
color: #ed8936;
|
||||
}
|
||||
|
||||
.preview-table-container {
|
||||
overflow-x: auto;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.preview-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.preview-table th {
|
||||
background: linear-gradient(135deg, #4299e1, #3182ce);
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #2b6cb0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.preview-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
.preview-placeholder {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #a0aec0;
|
||||
font-style: italic;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Submit Section */
|
||||
.submit-section {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.submit-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.submit-note {
|
||||
color: #718096;
|
||||
font-size: 0.95rem;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.submit-note i {
|
||||
color: #4299e1;
|
||||
}
|
||||
|
||||
/* Button Styles */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.65rem 1.25rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.95rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: linear-gradient(135deg, #48bb78, #38a169);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: linear-gradient(135deg, #38a169, #2f855a);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: linear-gradient(135deg, #a0aec0, #718096);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: linear-gradient(135deg, #718096, #4a5568);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: #4299e1;
|
||||
border: 2px solid #4299e1;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: #4299e1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.export-config-page {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.export-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.header-title-section {
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.header-content h1 i {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.header-content p {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-actions .btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.columns-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.config-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.config-actions {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.config-card,
|
||||
.preview-section,
|
||||
.submit-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.filters-display {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.config-actions {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.submit-actions {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Instructions Card */
|
||||
.instructions-card {
|
||||
background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
|
||||
border: 2px solid #4fc3f7;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 4px 12px rgba(79, 195, 247, 0.15);
|
||||
}
|
||||
|
||||
.instructions-content h4 {
|
||||
color: #1565c0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.instructions-content ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.instructions-content li {
|
||||
padding: 0.5rem 0;
|
||||
color: #424242;
|
||||
font-size: 0.95rem;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.instructions-content li::before {
|
||||
content: "✓";
|
||||
color: #4caf50;
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.instructions-content .highlight {
|
||||
background: linear-gradient(135deg, #ffeb3b, #ffc107);
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
/* Columns Section */
|
||||
.columns-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.columns-section h4 {
|
||||
color: #2d3748;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Selected Columns Section */
|
||||
.selected-columns-section {
|
||||
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
|
||||
border: 2px dashed #6c757d;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
margin-top: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.selected-columns-section.has-columns {
|
||||
border-color: #28a745;
|
||||
border-style: solid;
|
||||
background: linear-gradient(135deg, #f8fff8, #e8f5e8);
|
||||
}
|
||||
|
||||
.selected-columns-section h4 {
|
||||
color: #495057;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.drag-hint {
|
||||
font-size: 0.85rem;
|
||||
color: #6c757d;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Selected Columns List */
|
||||
.selected-columns-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.selected-column-item {
|
||||
background: white;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
cursor: move;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.selected-column-item:hover {
|
||||
border-color: #4299e1;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(66, 153, 225, 0.15);
|
||||
}
|
||||
|
||||
.selected-column-item.sortable-drag {
|
||||
opacity: 0.8;
|
||||
transform: rotate(5deg);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.selected-column-item.sortable-ghost {
|
||||
opacity: 0.4;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.selected-column-item.sortable-chosen {
|
||||
border-color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.selected-column-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.column-drag-handle {
|
||||
color: #9ca3af;
|
||||
font-size: 1.2rem;
|
||||
cursor: grab;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.column-drag-handle:hover {
|
||||
color: #4b5563;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.column-drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.selected-column-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.selected-column-name {
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.selected-column-export-name {
|
||||
font-size: 0.85rem;
|
||||
color: #6b7280;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.column-order-number {
|
||||
background: linear-gradient(135deg, #4f46e5, #7c3aed);
|
||||
color: white;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
|
||||
}
|
||||
|
||||
/* Empty state for selected columns */
|
||||
.selected-columns-empty {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #6b7280;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.selected-columns-empty i {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* Enhanced column items in grid */
|
||||
.column-item.selected {
|
||||
border-color: #10b981;
|
||||
background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
.column-item.selected .column-checkbox label {
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Responsive design for drag & drop */
|
||||
@media (max-width: 768px) {
|
||||
.selected-columns-section {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.selected-column-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.selected-column-info {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.column-order-number {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.drag-hint {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation for smooth transitions */
|
||||
.selected-columns-list .selected-column-item {
|
||||
animation: slideInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Sortable.js additional styles */
|
||||
.sortable-fallback {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Enhanced preview table to show column order */
|
||||
.preview-table thead th {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preview-table thead th::before {
|
||||
content: attr(data-order);
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
background: #4f46e5;
|
||||
color: white;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Collapsible Sections */
|
||||
.collapsible-content {
|
||||
max-height: 5000px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.collapsible-content.collapsed {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
transition: transform 0.3s ease;
|
||||
margin-left: 10px;
|
||||
font-size: 0.9em;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.toggle-icon.rotated {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.config-header[onclick],
|
||||
.selected-columns-section h4[onclick] {
|
||||
transition: background-color 0.2s ease;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin: -10px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.config-header[onclick]:hover,
|
||||
.selected-columns-section h4[onclick]:hover {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.config-header h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.selected-columns-section h4 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Edit checkbox styles */
|
||||
.export-name-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.input-with-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.input-with-checkbox input[type="text"] {
|
||||
flex: 1;
|
||||
background-color: #f8f9fa;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.input-with-checkbox input[type="text"]:not([readonly]) {
|
||||
background-color: white;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.edit-checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.edit-checkbox-label:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.edit-checkbox-label input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.edit-checkbox-label i {
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.edit-checkbox-label input[type="checkbox"]:checked + i {
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.column-name-input input[type="text"][readonly] {
|
||||
opacity: 0.7;
|
||||
}
|
||||
@@ -0,0 +1,554 @@
|
||||
/**
|
||||
* Projects Page Dedicated CSS
|
||||
* static/css/projects.css
|
||||
*
|
||||
* This file contains all necessary styles for the projects management page
|
||||
* ensuring it works independently with proper layout and responsive design.
|
||||
*/
|
||||
|
||||
/* Sidebar Layout Compatibility Fixes */
|
||||
body.has-sidebar .projects-page {
|
||||
margin-left: 0; /* Let the base template handle sidebar spacing */
|
||||
padding-left: 0; /* Remove conflicts with sidebar layout */
|
||||
}
|
||||
|
||||
/* Ensure proper content area for authenticated layout */
|
||||
.main-wrapper .projects-page {
|
||||
padding: 2rem;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
/* Fix header spacing in sidebar layout */
|
||||
body.has-sidebar .projects-header {
|
||||
margin-top: 0; /* Remove any unwanted top margin */
|
||||
}
|
||||
|
||||
/* Projects Page Container */
|
||||
.projects-page {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.projects-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.projects-header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #2563eb, #1d4ed8);
|
||||
}
|
||||
|
||||
.header-navigation {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
text-decoration: none;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border: 1px solid #cbd5e1;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: #e2e8f0;
|
||||
color: #334155;
|
||||
transform: translateX(-2px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back-button i {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
font-size: 1.875rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.header-content h1 i {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.header-content p {
|
||||
color: #64748b;
|
||||
font-size: 1.125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Project Statistics Grid */
|
||||
.project-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #ffffff;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
transition: all 0.2s ease-in-out;
|
||||
border: 1px solid #e2e8f0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #2563eb, #1d4ed8);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.stat-card.active::before {
|
||||
background: linear-gradient(90deg, #10b981, #047857);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
||||
}
|
||||
|
||||
.stat-icon.active {
|
||||
background: linear-gradient(135deg, #10b981, #047857);
|
||||
}
|
||||
|
||||
.stat-info h3 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-info p {
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Content Section */
|
||||
.content-section {
|
||||
background: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Projects Grid */
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.2s ease-in-out;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #2563eb, #1d4ed8);
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
.project-card.inactive {
|
||||
opacity: 0.7;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.project-card.inactive::before {
|
||||
background: linear-gradient(90deg, #6b7280, #4b5563);
|
||||
}
|
||||
|
||||
.project-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.project-info h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.project-status {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Status Badges */
|
||||
.status-badge {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.status-badge.active {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: #047857;
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.status-badge.inactive {
|
||||
background: rgba(107, 114, 128, 0.1);
|
||||
color: #4b5563;
|
||||
border: 1px solid rgba(107, 114, 128, 0.2);
|
||||
}
|
||||
|
||||
/* Project Stats */
|
||||
.project-stats-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: #f8fafc;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.stat-item i {
|
||||
width: 16px;
|
||||
color: #2563eb;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-item span {
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
/* Project Actions */
|
||||
.project-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.project-actions .btn {
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.project-actions .btn-secondary {
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
border: 1px solid #cbd5e1;
|
||||
}
|
||||
|
||||
.project-actions .btn-secondary:hover {
|
||||
background: #e2e8f0;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.project-actions .btn-warning {
|
||||
background: #fbbf24;
|
||||
color: #92400e;
|
||||
border: 1px solid #f59e0b;
|
||||
}
|
||||
|
||||
.project-actions .btn-warning:hover {
|
||||
background: #f59e0b;
|
||||
color: #78350f;
|
||||
}
|
||||
|
||||
.project-actions .btn-success {
|
||||
background: #10b981;
|
||||
color: #ffffff;
|
||||
border: 1px solid #059669;
|
||||
}
|
||||
|
||||
.project-actions .btn-success:hover {
|
||||
background: #059669;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem 1.5rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto 1.5rem;
|
||||
background: #f1f5f9;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
max-width: 400px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.empty-state .btn {
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.2s ease-in-out;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.empty-state .btn:hover {
|
||||
background: #1d4ed8;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.projects-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.project-stats {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.projects-page {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.projects-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-navigation {
|
||||
text-align: left;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.project-stats {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.project-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.project-status {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.project-actions {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.project-actions .btn {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.stat-info h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.projects-page {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.projects-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.header-content p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.project-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.project-stats-section {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,974 @@
|
||||
/* QR Destination Page Styles - Light Mode Only */
|
||||
:root {
|
||||
/* Color Palette - Light Mode Only */
|
||||
--primary-color: #2563eb;
|
||||
--primary-hover: #1d4ed8;
|
||||
--success-color: #059669;
|
||||
--warning-color: #d97706;
|
||||
--danger-color: #dc2626;
|
||||
--info-color: #0891b2;
|
||||
|
||||
/* Neutral Colors - Light Theme Fixed */
|
||||
--white: #ffffff;
|
||||
--gray-50: #f8fafc;
|
||||
--gray-100: #f1f5f9;
|
||||
--gray-200: #e2e8f0;
|
||||
--gray-300: #cbd5e1;
|
||||
--gray-400: #94a3b8;
|
||||
--gray-500: #64748b;
|
||||
--gray-600: #475569;
|
||||
--gray-700: #334155;
|
||||
--gray-800: #1e293b;
|
||||
--gray-900: #0f172a;
|
||||
|
||||
/* Spacing and Layout */
|
||||
--radius-sm: 0.25rem;
|
||||
--radius: 0.375rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--radius-2xl: 1.5rem;
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
|
||||
--transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
/* Force Light Mode - Override any dark mode preferences */
|
||||
* {
|
||||
color-scheme: light only !important;
|
||||
}
|
||||
|
||||
/* Reset and Base */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
|
||||
min-height: 100vh;
|
||||
color: var(--gray-900) !important;
|
||||
line-height: 1.6;
|
||||
/* Force light mode */
|
||||
color-scheme: light !important;
|
||||
}
|
||||
|
||||
/* Container */
|
||||
.destination-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
/* Header Section */
|
||||
.destination-header {
|
||||
text-align: center;
|
||||
color: var(--white) !important;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
border-radius: 50%;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3) !important;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
.destination-header h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
.location-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.9;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
/* Card Styles - Force Light Theme */
|
||||
.info-card,
|
||||
.checkin-card,
|
||||
.success-card {
|
||||
background: var(--white) !important;
|
||||
border-radius: var(--radius-2xl);
|
||||
box-shadow: var(--shadow-xl);
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
color: var(--gray-900) !important;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* Header Styles for Cards */
|
||||
.info-header,
|
||||
.checkin-header,
|
||||
.success-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.info-header h2,
|
||||
.checkin-header h2,
|
||||
.success-header h2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--gray-900) !important;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.info-header h2 i,
|
||||
.checkin-header h2 i,
|
||||
.success-header h2 i {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.info-header p,
|
||||
.checkin-header p {
|
||||
color: var(--gray-600) !important;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Info Details */
|
||||
.info-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--gray-50) !important;
|
||||
border-radius: var(--radius-lg);
|
||||
transition: var(--transition);
|
||||
border: 1px solid var(--gray-200) !important;
|
||||
}
|
||||
|
||||
.detail-item:hover {
|
||||
background: var(--gray-100) !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--primary-color) !important;
|
||||
color: var(--white) !important;
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-weight: 600;
|
||||
color: var(--gray-900) !important;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: var(--gray-700) !important;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Form Styles - Light Theme */
|
||||
.checkin-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--gray-900) !important;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-group label i {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 1rem 1.25rem;
|
||||
border: 2px solid var(--gray-300) !important;
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: 1.125rem;
|
||||
transition: var(--transition);
|
||||
background: var(--white) !important;
|
||||
color: var(--gray-900) !important;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color) !important;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
|
||||
}
|
||||
|
||||
.form-group input::placeholder {
|
||||
color: var(--gray-500) !important;
|
||||
}
|
||||
|
||||
.form-help {
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-600) !important;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Button Styles - Light Theme */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 2rem;
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
min-height: 3rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary-color) !important;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-hover) !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--gray-500) !important;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--gray-600) !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.btn-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-loader {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-loader i {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Success Card Styles - Light Theme */
|
||||
.success-card {
|
||||
text-align: center;
|
||||
background: var(--white) !important;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
display: none; /* Change back to 'inline-flex' to display icon */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: var(--success-color) !important;
|
||||
color: var(--white) !important;
|
||||
border-radius: 50%;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
animation: successPulse 1s ease-out;
|
||||
}
|
||||
|
||||
@keyframes successPulse {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.success-card h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--success-color) !important;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.success-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.success-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--gray-50) !important;
|
||||
border-radius: var(--radius);
|
||||
border-left: 4px solid var(--success-color) !important;
|
||||
}
|
||||
|
||||
.success-item strong {
|
||||
color: var(--gray-900) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.success-item span {
|
||||
color: var(--gray-700) !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.success-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Status Message Styles - Light Theme */
|
||||
.status-message {
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: var(--radius-lg);
|
||||
font-weight: 500;
|
||||
margin: 1rem 0;
|
||||
border-left: 4px solid transparent;
|
||||
background: var(--white) !important;
|
||||
}
|
||||
|
||||
.status-message.success {
|
||||
background: var(--gray-50) !important;
|
||||
color: var(--success-color) !important;
|
||||
border-left-color: var(--success-color) !important;
|
||||
}
|
||||
|
||||
.status-message.error {
|
||||
background: var(--gray-50) !important;
|
||||
color: var(--danger-color) !important;
|
||||
border-left-color: var(--danger-color) !important;
|
||||
}
|
||||
|
||||
.status-message.warning {
|
||||
background: var(--gray-50) !important;
|
||||
color: var(--warning-color) !important;
|
||||
border-left-color: var(--warning-color) !important;
|
||||
}
|
||||
|
||||
.status-message.info {
|
||||
background: var(--gray-50) !important;
|
||||
color: var(--info-color) !important;
|
||||
border-left-color: var(--info-color) !important;
|
||||
}
|
||||
|
||||
/* Footer Styles - Light Theme */
|
||||
.destination-footer {
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.8) !important;
|
||||
font-size: 0.875rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.destination-footer p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
|
||||
.destination-footer i {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
}
|
||||
|
||||
.destination-footer small {
|
||||
opacity: 0.7;
|
||||
color: rgba(255, 255, 255, 0.6) !important;
|
||||
}
|
||||
|
||||
/* Loading Overlay - Light Theme */
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
text-align: center;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.loading-spinner i {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.loading-spinner p {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
color: var(--gray-700) !important;
|
||||
}
|
||||
|
||||
/* Language Selector Styles - Light Theme Enhanced */
|
||||
.language-selector {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.language-toggle {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3) !important;
|
||||
border-radius: 50px;
|
||||
padding: 0.5rem 1rem;
|
||||
color: white !important;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.language-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.3) !important;
|
||||
border-color: rgba(255, 255, 255, 0.5) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.language-toggle:active {
|
||||
background: rgba(255, 255, 255, 0.4) !important;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.language-toggle:focus {
|
||||
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
.language-toggle i {
|
||||
font-size: 1rem;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Smooth transitions - SIMPLIFIED */
|
||||
.fade-transition {
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.fade-transition.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Additional Location Tracking Styles - Light Theme */
|
||||
.location-status {
|
||||
background: var(--gray-50) !important;
|
||||
border: 1px solid var(--gray-200) !important;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin: 15px 0;
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--gray-700) !important;
|
||||
}
|
||||
|
||||
.location-status.loading {
|
||||
background: #e0f2fe !important;
|
||||
border-color: #0284c7 !important;
|
||||
color: #0c4a6e !important;
|
||||
}
|
||||
|
||||
.location-status.success {
|
||||
background: #dcfce7 !important;
|
||||
border-color: #059669 !important;
|
||||
color: #14532d !important;
|
||||
}
|
||||
|
||||
.location-status.error {
|
||||
background: #fee2e2 !important;
|
||||
border-color: #dc2626 !important;
|
||||
color: #7f1d1d !important;
|
||||
}
|
||||
|
||||
.location-info {
|
||||
background: var(--gray-50) !important;
|
||||
border: 1px solid var(--gray-200) !important;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin: 15px 0;
|
||||
display: none;
|
||||
font-size: 13px;
|
||||
color: var(--gray-700) !important;
|
||||
}
|
||||
|
||||
.location-info h4 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 14px;
|
||||
color: var(--gray-900) !important;
|
||||
}
|
||||
|
||||
.coord-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid var(--gray-200) !important;
|
||||
color: var(--gray-700) !important;
|
||||
}
|
||||
|
||||
.coord-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.coord-value {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-weight: bold;
|
||||
color: var(--gray-900) !important;
|
||||
}
|
||||
|
||||
.location-controls {
|
||||
text-align: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
background: var(--gray-500) !important;
|
||||
color: white !important;
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
margin: 0 4px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-small:hover {
|
||||
background: var(--gray-600) !important;
|
||||
}
|
||||
|
||||
/* Mobile responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.language-selector {
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.destination-container {
|
||||
padding: 1rem 0.5rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.destination-header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.info-card,
|
||||
.checkin-card,
|
||||
.success-card {
|
||||
margin: 0 0.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.success-details {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.success-item {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.destination-container {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.destination-header h1 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
font-size: 1rem;
|
||||
padding: 0.875rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility - High Contrast Mode */
|
||||
@media (prefers-contrast: high) {
|
||||
.info-card,
|
||||
.checkin-card,
|
||||
.success-card {
|
||||
border: 2px solid var(--gray-900) !important;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
border: 1px solid var(--gray-900) !important;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
border: 2px solid var(--gray-900) !important;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--gray-900) !important;
|
||||
border: 2px solid var(--white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced Motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.detail-item:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
body {
|
||||
background: white !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.destination-container {
|
||||
max-width: none;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.info-card,
|
||||
.checkin-card,
|
||||
.success-card {
|
||||
box-shadow: none;
|
||||
border: 1px solid #000 !important;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.loading-overlay,
|
||||
.language-selector {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.destination-header {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
background: white !important;
|
||||
border: 2px solid black !important;
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Override any dark mode preferences - IMPORTANT */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* Keep light theme variables even when system prefers dark */
|
||||
--white: #ffffff !important;
|
||||
--gray-50: #f8fafc !important;
|
||||
--gray-100: #f1f5f9 !important;
|
||||
--gray-200: #e2e8f0 !important;
|
||||
--gray-300: #cbd5e1 !important;
|
||||
--gray-400: #94a3b8 !important;
|
||||
--gray-500: #64748b !important;
|
||||
--gray-600: #475569 !important;
|
||||
--gray-700: #334155 !important;
|
||||
--gray-800: #1e293b !important;
|
||||
--gray-900: #0f172a !important;
|
||||
}
|
||||
|
||||
/* Force light mode styles */
|
||||
body {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
|
||||
color: var(--gray-900) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Force override any dark theme attributes */
|
||||
[data-theme="dark"] {
|
||||
/* Reset to light theme */
|
||||
--white: #ffffff !important;
|
||||
--gray-50: #f8fafc !important;
|
||||
--gray-100: #f1f5f9 !important;
|
||||
--gray-200: #e2e8f0 !important;
|
||||
--gray-300: #cbd5e1 !important;
|
||||
--gray-400: #94a3b8 !important;
|
||||
--gray-500: #64748b !important;
|
||||
--gray-600: #475569 !important;
|
||||
--gray-700: #334155 !important;
|
||||
--gray-800: #1e293b !important;
|
||||
--gray-900: #0f172a !important;
|
||||
}
|
||||
|
||||
/* Location Services Warning Banner */
|
||||
.location-warning-banner {
|
||||
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
|
||||
color: white;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(238, 90, 36, 0.3);
|
||||
animation: slideDown 0.3s ease-out;
|
||||
}
|
||||
|
||||
.warning-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.warning-icon {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.warning-message {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.warning-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.warning-retry-btn,
|
||||
.warning-dismiss-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.warning-retry-btn:hover,
|
||||
.warning-dismiss-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Blocked Form Styling */
|
||||
.location-blocked {
|
||||
opacity: 0.6;
|
||||
pointer-events: none !important;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.location-blocked::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
border-radius: 8px;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Specifically block submit buttons when location is blocked */
|
||||
button[data-location-blocked="true"],
|
||||
input[data-location-blocked="true"] {
|
||||
pointer-events: none !important;
|
||||
cursor: not-allowed !important;
|
||||
opacity: 0.5 !important;
|
||||
background-color: #ccc !important;
|
||||
border-color: #999 !important;
|
||||
}
|
||||
|
||||
/* Override any hover effects on blocked elements */
|
||||
button[data-location-blocked="true"]:hover,
|
||||
button[data-location-blocked="true"]:focus,
|
||||
button[data-location-blocked="true"]:active {
|
||||
pointer-events: none !important;
|
||||
cursor: not-allowed !important;
|
||||
opacity: 0.5 !important;
|
||||
transform: none !important;
|
||||
background-color: #ccc !important;
|
||||
}
|
||||
|
||||
/* Animation for warning banner */
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.warning-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.warning-retry-btn,
|
||||
.warning-dismiss-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,774 @@
|
||||
/* Statistics Page Styles - static/css/statistics.css */
|
||||
|
||||
:root {
|
||||
--primary-color: #3b82f6;
|
||||
--primary-hover: #2563eb;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--danger-color: #ef4444;
|
||||
--info-color: #06b6d4;
|
||||
--gray-50: #f9fafb;
|
||||
--gray-100: #f3f4f6;
|
||||
--gray-200: #e5e7eb;
|
||||
--gray-300: #d1d5db;
|
||||
--gray-400: #9ca3af;
|
||||
--gray-500: #6b7280;
|
||||
--gray-600: #4b5563;
|
||||
--gray-700: #374151;
|
||||
--gray-800: #1f2937;
|
||||
--gray-900: #111827;
|
||||
--white: #ffffff;
|
||||
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--transition: all 0.2s ease-in-out;
|
||||
--radius: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--radius-2xl: 1.5rem;
|
||||
--spacing-2: 0.5rem;
|
||||
--spacing-3: 0.75rem;
|
||||
--spacing-4: 1rem;
|
||||
--spacing-6: 1.5rem;
|
||||
--spacing-8: 2rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-lg: 1.125rem;
|
||||
--font-size-xl: 1.25rem;
|
||||
--font-size-2xl: 1.5rem;
|
||||
--font-size-3xl: 2rem;
|
||||
}
|
||||
|
||||
/* Collapsible Sections */
|
||||
.section-header {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
|
||||
color: var(--white);
|
||||
padding: var(--spacing-4) var(--spacing-6);
|
||||
border-radius: var(--radius-xl);
|
||||
margin-bottom: var(--spacing-6);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.section-header:hover {
|
||||
background: linear-gradient(135deg, var(--primary-hover), #1d4ed8);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
transition: transform 0.3s ease;
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.toggle-icon.rotated {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.section-content {
|
||||
max-height: none;
|
||||
opacity: 1;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-content.collapsed {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Chart No Data Message */
|
||||
.no-data-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: var(--gray-400);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-data-message i {
|
||||
font-size: 3rem;
|
||||
margin-bottom: var(--spacing-4);
|
||||
color: var(--gray-300);
|
||||
}
|
||||
|
||||
.no-data-message p {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
/* Collapsible Table Headers */
|
||||
.table-header.collapsible {
|
||||
background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
|
||||
color: var(--gray-700);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
user-select: none;
|
||||
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
||||
}
|
||||
|
||||
.table-header.collapsible:hover {
|
||||
background: linear-gradient(135deg, var(--gray-200), var(--gray-300));
|
||||
color: var(--gray-800);
|
||||
}
|
||||
|
||||
.table-header.collapsible h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-header.collapsible .toggle-icon {
|
||||
margin-left: auto;
|
||||
margin-right: var(--spacing-4);
|
||||
}
|
||||
|
||||
/* Update table card structure for collapsible */
|
||||
.table-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--gray-200);
|
||||
margin-bottom: var(--spacing-6);
|
||||
}
|
||||
|
||||
/* Ensure section content collapses properly */
|
||||
.section-content.collapsed {
|
||||
max-height: 0 !important;
|
||||
opacity: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* Fix the chevron animation */
|
||||
.toggle-icon {
|
||||
transition: transform 0.3s ease !important;
|
||||
font-size: var(--font-size-base);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.toggle-icon.rotated {
|
||||
transform: rotate(180deg) !important;
|
||||
}
|
||||
.statistics-page {
|
||||
padding: var(--spacing-6);
|
||||
background: var(--gray-50);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Header Section */
|
||||
.statistics-header {
|
||||
background: linear-gradient(135deg, var(--white) 0%, var(--gray-50) 100%);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: var(--spacing-8);
|
||||
margin-bottom: var(--spacing-8);
|
||||
box-shadow: var(--shadow);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: 700;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: var(--spacing-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.header-content h1 i {
|
||||
color: var(--primary-color);
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.header-content p {
|
||||
color: var(--gray-600);
|
||||
font-size: var(--font-size-lg);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Filters Section */
|
||||
.filters-section {
|
||||
margin-bottom: var(--spacing-8);
|
||||
}
|
||||
|
||||
.filters-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.filters-header {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
|
||||
color: var(--white);
|
||||
padding: var(--spacing-6);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.filters-header h3 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.filters-form {
|
||||
padding: var(--spacing-6);
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-6);
|
||||
margin-bottom: var(--spacing-6);
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
font-weight: 600;
|
||||
color: var(--gray-700);
|
||||
font-size: var(--font-size-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
.filter-group label i {
|
||||
color: var(--primary-color);
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.filter-group input,
|
||||
.filter-group select {
|
||||
padding: var(--spacing-3);
|
||||
border: 2px solid var(--gray-200);
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--font-size-base);
|
||||
transition: var(--transition);
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.filter-group input:focus,
|
||||
.filter-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Statistics Overview */
|
||||
.stats-overview {
|
||||
margin-bottom: var(--spacing-8);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-6);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-6);
|
||||
box-shadow: var(--shadow);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-4);
|
||||
transition: var(--transition);
|
||||
border: 1px solid var(--gray-200);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.stat-card.primary::before { background: var(--primary-color); }
|
||||
.stat-card.success::before { background: var(--success-color); }
|
||||
.stat-card.warning::before { background: var(--warning-color); }
|
||||
.stat-card.info::before { background: var(--info-color); }
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
color: var(--white);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-card.primary .stat-icon { background: var(--primary-color); }
|
||||
.stat-card.success .stat-icon { background: var(--success-color); }
|
||||
.stat-card.warning .stat-icon { background: var(--warning-color); }
|
||||
.stat-card.info .stat-icon { background: var(--info-color); }
|
||||
|
||||
.stat-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-content h3 {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: 700;
|
||||
color: var(--gray-900);
|
||||
margin: 0 0 var(--spacing-2) 0;
|
||||
}
|
||||
|
||||
.stat-content p {
|
||||
color: var(--gray-600);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 600;
|
||||
margin: 0 0 var(--spacing-2) 0;
|
||||
}
|
||||
|
||||
.stat-change {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
||||
/* Charts Section */
|
||||
.charts-section {
|
||||
margin-bottom: var(--spacing-8);
|
||||
}
|
||||
|
||||
.charts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
gap: var(--spacing-6);
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.chart-card.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
background: var(--gray-50);
|
||||
padding: var(--spacing-6);
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.chart-header h3 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.chart-header h3 i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
padding: var(--spacing-6);
|
||||
height: 350px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chart-container.compact {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
/* Tables Section */
|
||||
.tables-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-8);
|
||||
}
|
||||
|
||||
.table-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background: var(--gray-50);
|
||||
padding: var(--spacing-6);
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table-header h3 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
.table-header h3 i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.table-count {
|
||||
background: var(--primary-color);
|
||||
color: var(--white);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background: var(--gray-100);
|
||||
color: var(--gray-700);
|
||||
padding: var(--spacing-4);
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid var(--gray-200);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
padding: var(--spacing-4);
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
color: var(--gray-700);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.data-table tbody tr:hover {
|
||||
background: var(--gray-50);
|
||||
}
|
||||
|
||||
/* Metric Badges */
|
||||
.metric-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.metric-badge.primary { background: var(--primary-color); }
|
||||
.metric-badge.success { background: var(--success-color); }
|
||||
.metric-badge.info { background: var(--info-color); }
|
||||
.metric-badge.warning { background: var(--warning-color); }
|
||||
|
||||
/* Progress Bars */
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
background: var(--gray-200);
|
||||
border-radius: var(--radius);
|
||||
height: 24px;
|
||||
overflow: hidden;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--success-color), #059669);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
color: var(--gray-700);
|
||||
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* Special Elements */
|
||||
.ip-address {
|
||||
background: var(--gray-100);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: var(--radius);
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.user-info strong {
|
||||
display: block;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.user-info small {
|
||||
color: var(--gray-500);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.activity-score .score {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.activity-score .score.high {
|
||||
background: var(--success-color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.activity-score .score.medium {
|
||||
background: var(--warning-color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.activity-score .score.low {
|
||||
background: var(--gray-400);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.performance-indicator .perf {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.performance-indicator .perf.excellent {
|
||||
background: var(--success-color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.performance-indicator .perf.good {
|
||||
background: var(--info-color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.performance-indicator .perf.fair {
|
||||
background: var(--warning-color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.performance-indicator .perf.poor {
|
||||
background: var(--danger-color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.performance-indicator small {
|
||||
display: block;
|
||||
color: var(--gray-500);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Button Styles */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
padding: var(--spacing-3) var(--spacing-6);
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary-color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: var(--success-color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: #059669;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--gray-600);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--gray-700);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--gray-600);
|
||||
border: 2px solid var(--gray-300);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--gray-50);
|
||||
border-color: var(--gray-400);
|
||||
color: var(--gray-700);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.statistics-page {
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
|
||||
.statistics-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.charts-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: var(--spacing-2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.header-content h1 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
margin-bottom: var(--spacing-2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.statistics-page {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.header-actions,
|
||||
.filters-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chart-card,
|
||||
.table-card {
|
||||
break-inside: avoid;
|
||||
margin-bottom: var(--spacing-4);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,121 @@
|
||||
/**
|
||||
* theme-gov.css
|
||||
* =============
|
||||
* UI theme overrides for GOV Services, Inc. (qr.govservicesinc.com)
|
||||
*
|
||||
* HOW IT WORKS
|
||||
* ------------
|
||||
* Loaded AFTER style.css but BEFORE page-specific CSS (e.g. auth.css).
|
||||
* Overrides CSS custom properties in :root so every component that uses
|
||||
* those variables (sidebar, buttons, login page, links, focus rings)
|
||||
* adopts the new palette automatically.
|
||||
*
|
||||
* Brand text is handled directly in templates via {{ COMPANY_NAME }} —
|
||||
* no CSS tricks needed.
|
||||
*
|
||||
* TO CUSTOMISE COLORS
|
||||
* -------------------
|
||||
* Change --primary-color / --primary-hover below.
|
||||
* All gradients, buttons, focus rings, sidebar, and login page pick
|
||||
* up the new values automatically via CSS variable inheritance.
|
||||
*
|
||||
* ADDING A THIRD THEME (future)
|
||||
* -----------------------------
|
||||
* Create static/css/theme-{name}.css and set THEME_NAME={name} in
|
||||
* that instance's .env. No code changes required.
|
||||
*/
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* 1. COLOR PALETTE — GOV Services green */
|
||||
/* ------------------------------------------------------------------ */
|
||||
:root {
|
||||
/* Primary brand color: bright institutional green */
|
||||
--primary-color: #16a34a;
|
||||
--primary-hover: #15803d;
|
||||
|
||||
/* Accent used for links, focus rings, active states */
|
||||
--info-color: #16a34a;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* 2. SIDEBAR GRADIENT */
|
||||
/* Re-declared to consume the new variables above. */
|
||||
/* ------------------------------------------------------------------ */
|
||||
.sidebar {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--primary-color),
|
||||
var(--primary-hover)
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* 3. LOGIN PAGE — auth.css loads after this file (via extra_head) so */
|
||||
/* we must use !important to win the cascade on rules that auth.css */
|
||||
/* also declares with !important. */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
/* Login background gradient */
|
||||
.auth-container {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color),
|
||||
var(--primary-hover)
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* Logo circle gradient */
|
||||
.auth-logo {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color),
|
||||
var(--primary-hover)
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* Card top accent stripe */
|
||||
.auth-card::before {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--primary-color),
|
||||
var(--primary-hover)
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* Sign In button gradient */
|
||||
.auth-form .btn-primary {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color),
|
||||
var(--primary-hover)
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* Input focus border colour */
|
||||
.auth-form .form-group input:focus {
|
||||
border-color: var(--primary-color) !important;
|
||||
/* Override the hardcoded blue rgba(37,99,235) in auth.css */
|
||||
box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15) !important;
|
||||
}
|
||||
|
||||
/* Focused label colour */
|
||||
.auth-form .form-group.focused label {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
/* Label icon colour */
|
||||
.auth-form .form-group label i {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
/* Focus accessibility outline */
|
||||
.auth-form .btn:focus,
|
||||
.auth-form .form-group input:focus {
|
||||
outline-color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* 4. FOOTER COPYRIGHT */
|
||||
/* Handled dynamically in templates via {{ CURRENT_YEAR }} and */
|
||||
/* {{ COMPANY_NAME }} — no CSS override needed here. */
|
||||
/* ------------------------------------------------------------------ */
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,723 @@
|
||||
/**
|
||||
* Users Page Dedicated CSS
|
||||
* static/css/users-page.css
|
||||
*
|
||||
* This file contains all necessary styles for the users management page
|
||||
* ensuring it works independently of other CSS files.
|
||||
*/
|
||||
|
||||
/* Users Page Container */
|
||||
.users-page {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.users-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.users-header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #059669, #047857);
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
font-size: 1.875rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.header-content h1 i {
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.header-content p {
|
||||
color: #64748b;
|
||||
font-size: 1.125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* User Statistics Grid */
|
||||
.user-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #ffffff;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
transition: all 0.2s ease-in-out;
|
||||
border: 1px solid #e2e8f0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.stat-card.admin::before {
|
||||
background: linear-gradient(90deg, #fbbf24, #f59e0b);
|
||||
}
|
||||
|
||||
.stat-card.staff::before {
|
||||
background: linear-gradient(90deg, #64748b, #475569);
|
||||
}
|
||||
|
||||
.stat-card.payroll::before {
|
||||
background: linear-gradient(90deg, #17a2b8, #138496);
|
||||
}
|
||||
|
||||
.stat-card.accounting::before {
|
||||
background: linear-gradient(90deg, #059669, #047857);
|
||||
}
|
||||
|
||||
.stat-card.project-manager::before {
|
||||
background: linear-gradient(90deg, #6f42c1, #5a2d91);
|
||||
}
|
||||
|
||||
.stat-card.active::before {
|
||||
background: linear-gradient(90deg, #10b981, #047857);
|
||||
}
|
||||
|
||||
.stat-card.inactive::before {
|
||||
background: linear-gradient(90deg, #ef4444, #b91c1c);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
color: #ffffff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-icon.admin {
|
||||
background: linear-gradient(135deg, #fbbf24, #f59e0b);
|
||||
}
|
||||
|
||||
.stat-icon.staff {
|
||||
background: linear-gradient(135deg, #64748b, #475569);
|
||||
}
|
||||
|
||||
.stat-icon.payroll {
|
||||
background: linear-gradient(135deg, #17a2b8, #138496);
|
||||
}
|
||||
|
||||
.stat-icon.accounting {
|
||||
background: linear-gradient(135deg, #059669, #047857);
|
||||
}
|
||||
|
||||
.stat-icon.project-manager {
|
||||
background: linear-gradient(135deg, #6f42c1, #5a2d91);
|
||||
}
|
||||
|
||||
.stat-icon.active {
|
||||
background: linear-gradient(135deg, #10b981, #047857);
|
||||
}
|
||||
|
||||
.stat-icon.inactive {
|
||||
background: linear-gradient(135deg, #ef4444, #b91c1c);
|
||||
}
|
||||
|
||||
.stat-info h3 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin-bottom: 0.25rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.stat-info p {
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Users Controls */
|
||||
.users-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
background: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.search-filters {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box i {
|
||||
position: absolute;
|
||||
left: 0.75rem;
|
||||
color: #94a3b8;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
padding: 0.75rem 0.75rem 0.75rem 2.5rem;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
width: 300px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.search-box input:focus {
|
||||
outline: none;
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 0.75rem 1rem;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
outline: none;
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.view-options {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Users Table Container */
|
||||
.users-table-container {
|
||||
background: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.users-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.users-table th {
|
||||
background-color: #f8fafc;
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
font-size: 0.875rem;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.users-table th:first-child {
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.users-table td {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.users-table tr.user-row {
|
||||
transition: all 0.2s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.users-table tr.user-row:hover {
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.users-table tr.user-row:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* User Information */
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-details h4 {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
margin: 0 0 0.25rem 0;
|
||||
}
|
||||
|
||||
.user-details p {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Contact Information */
|
||||
.user-contact {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.contact-email {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.contact-email i {
|
||||
color: #64748b;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Role Badges */
|
||||
.user-role {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.user-role.admin {
|
||||
background-color: rgba(251, 191, 36, 0.1);
|
||||
color: #d97706;
|
||||
border: 1px solid rgba(251, 191, 36, 0.3);
|
||||
}
|
||||
|
||||
.user-role.staff {
|
||||
background-color: rgba(100, 116, 139, 0.1);
|
||||
color: #64748b;
|
||||
border: 1px solid rgba(100, 116, 139, 0.3);
|
||||
}
|
||||
|
||||
.user-role.payroll {
|
||||
background-color: rgba(23, 162, 184, 0.1);
|
||||
color: #138496;
|
||||
border: 1px solid rgba(23, 162, 184, 0.3);
|
||||
}
|
||||
|
||||
.user-role.accounting {
|
||||
background-color: rgba(5, 150, 105, 0.1);
|
||||
color: #047857;
|
||||
border: 1px solid rgba(5, 150, 105, 0.3);
|
||||
}
|
||||
|
||||
.user-role.project_manager {
|
||||
background-color: rgba(111, 66, 193, 0.1);
|
||||
color: #5a2d91;
|
||||
border: 1px solid rgba(111, 66, 193, 0.3);
|
||||
}
|
||||
|
||||
/* Status Badges */
|
||||
.user-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.user-status.active {
|
||||
background-color: rgba(5, 150, 105, 0.1);
|
||||
color: #10b981;
|
||||
border: 1px solid rgba(5, 150, 105, 0.2);
|
||||
}
|
||||
|
||||
.user-status.inactive {
|
||||
background-color: rgba(220, 38, 38, 0.1);
|
||||
color: #ef4444;
|
||||
border: 1px solid rgba(220, 38, 38, 0.2);
|
||||
}
|
||||
|
||||
/* QR Code Count */
|
||||
.user-qr-count {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qr-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.qr-count {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.qr-stats small {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Date Information */
|
||||
.date-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.date-main {
|
||||
font-weight: 500;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.date-time {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.never-logged-in {
|
||||
color: #94a3b8;
|
||||
font-style: italic;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.user-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Button Styles */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #2563eb;
|
||||
color: #ffffff;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #1d4ed8;
|
||||
border-color: #1d4ed8;
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #64748b;
|
||||
color: #ffffff;
|
||||
border-color: #64748b;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #475569;
|
||||
border-color: #475569;
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #10b981;
|
||||
color: #ffffff;
|
||||
border-color: #10b981;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background-color: #047857;
|
||||
border-color: #047857;
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: #f59e0b;
|
||||
color: #ffffff;
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background-color: #d97706;
|
||||
border-color: #d97706;
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #ef4444;
|
||||
color: #ffffff;
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: #dc2626;
|
||||
border-color: #dc2626;
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn:disabled,
|
||||
.btn[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn:disabled:hover,
|
||||
.btn[disabled]:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* No Users Message */
|
||||
.no-users-message {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3rem;
|
||||
background: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.no-users-content {
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.no-users-content i {
|
||||
font-size: 3rem;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.no-users-content h3 {
|
||||
font-size: 1.25rem;
|
||||
color: #334155;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.no-users-content p {
|
||||
color: #64748b;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.users-page {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.user-stats {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.users-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.user-stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.users-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.search-filters {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Hide less important columns on mobile */
|
||||
.users-table th:nth-child(6),
|
||||
.users-table td:nth-child(6),
|
||||
.users-table th:nth-child(7),
|
||||
.users-table td:nth-child(7),
|
||||
.users-table th:nth-child(8),
|
||||
.users-table td:nth-child(8) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.user-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.users-table {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.users-table th,
|
||||
.users-table td {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.user-details h4 {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.user-details p {
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
|
||||
/* Hide more columns on very small screens */
|
||||
.users-table th:nth-child(5),
|
||||
.users-table td:nth-child(5) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user