|
|
|
@ -4,7 +4,8 @@ html { |
|
|
|
margin: 0; |
|
|
|
height: 100%; |
|
|
|
font-family: Arial, sans-serif; |
|
|
|
background-color: #f9fafb; /* Light neutral background */ |
|
|
|
background-color: #1e1e2e; /* Dark background */ |
|
|
|
color: #e5e7eb; /* Light text */ |
|
|
|
} |
|
|
|
|
|
|
|
.flex { |
|
|
|
@ -24,7 +25,7 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.bg-gray { |
|
|
|
background-color: #f0f4f8; /* Very light gray */ |
|
|
|
background-color: #2a2a40; /* Dark gray */ |
|
|
|
} |
|
|
|
|
|
|
|
/* Container setup for dashboard */ |
|
|
|
@ -38,8 +39,8 @@ html { |
|
|
|
/* Sidebar styles */ |
|
|
|
.sidebar { |
|
|
|
width: 16rem; /* Fixed width for sidebar */ |
|
|
|
background-color: #2563eb; /* Light blue */ |
|
|
|
color: white; |
|
|
|
background-color: #121220; /* Darker background */ |
|
|
|
color: #e5e7eb; /* Light text */ |
|
|
|
padding: 1rem; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
@ -56,7 +57,7 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.sidebar a { |
|
|
|
color: white; |
|
|
|
color: #e5e7eb; |
|
|
|
text-decoration: none; |
|
|
|
padding: 0.5rem 0; |
|
|
|
display: block; |
|
|
|
@ -65,7 +66,7 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.sidebar a:hover { |
|
|
|
background-color: #3b82f6; /* Slightly lighter on hover */ |
|
|
|
background-color: #374151; /* Slightly lighter on hover */ |
|
|
|
} |
|
|
|
|
|
|
|
/* Main content area for dashboard */ |
|
|
|
@ -84,7 +85,7 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.logout-btn { |
|
|
|
background-color: #ef4444; /* Red button */ |
|
|
|
background-color: #f87171; /* Red button */ |
|
|
|
color: white; |
|
|
|
padding: 0.5rem 1rem; |
|
|
|
border: none; |
|
|
|
@ -93,71 +94,72 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.logout-btn:hover { |
|
|
|
background-color: #dc2626; /* Darker red on hover */ |
|
|
|
background-color: #e11d48; /* Darker red on hover */ |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
background-color: #ffffff; /* White content background */ |
|
|
|
background-color: #2e2e42; /* Dark content background */ |
|
|
|
padding: 1.5rem; |
|
|
|
border-radius: 0.5rem; |
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); |
|
|
|
flex-grow: 1; |
|
|
|
overflow-y: auto; /* Ensure content area can scroll */ |
|
|
|
} |
|
|
|
|
|
|
|
/* Login Container */ |
|
|
|
.login-container { |
|
|
|
background-color: #ffffff; |
|
|
|
background-color: #2e2e42; |
|
|
|
padding: 2rem; |
|
|
|
border-radius: 0.5rem; |
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Similar to shadow-md */ |
|
|
|
width: 24rem; /* similar to w-96 */ |
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); |
|
|
|
width: 24rem; |
|
|
|
} |
|
|
|
|
|
|
|
.login-title { |
|
|
|
font-size: 1.75rem; /* similar to text-2xl */ |
|
|
|
font-size: 1.75rem; |
|
|
|
font-weight: bold; |
|
|
|
margin-bottom: 0.5rem; /* similar to mb-6 */ |
|
|
|
margin-bottom: 0.5rem; |
|
|
|
text-align: center; |
|
|
|
color: #1f2937; /* Darker text */ |
|
|
|
color: #e5e7eb; |
|
|
|
} |
|
|
|
|
|
|
|
.login-subtitle { |
|
|
|
font-size: 1.25rem; /* Size between h2 and h3 */ |
|
|
|
font-weight: normal; /* Lighter weight to distinguish from the title */ |
|
|
|
margin-bottom: 1.5rem; /* Adjust spacing below subtitle */ |
|
|
|
font-size: 1.25rem; |
|
|
|
font-weight: normal; |
|
|
|
margin-bottom: 1.5rem; |
|
|
|
text-align: center; |
|
|
|
color: #4b5563; /* Medium gray for subtitle */ |
|
|
|
color: #9ca3af; /* Slightly lighter than title */ |
|
|
|
} |
|
|
|
|
|
|
|
/* Input Fields */ |
|
|
|
.input-group { |
|
|
|
margin-bottom: 1rem; /* similar to mb-4 */ |
|
|
|
margin-bottom: 1rem; |
|
|
|
} |
|
|
|
|
|
|
|
.input-group label { |
|
|
|
display: block; |
|
|
|
color: #4b5563; /* Medium gray */ |
|
|
|
font-size: 0.875rem; /* similar to text-sm */ |
|
|
|
color: #9ca3af; /* Gray text */ |
|
|
|
font-size: 0.875rem; |
|
|
|
font-weight: bold; |
|
|
|
margin-bottom: 0.5rem; /* similar to mb-2 */ |
|
|
|
margin-bottom: 0.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
.input-field { |
|
|
|
width: 100%; |
|
|
|
padding: 0.5rem; |
|
|
|
border: 1px solid #d1d5db; /* Light border */ |
|
|
|
border-radius: 0.25rem; /* similar to rounded */ |
|
|
|
color: #4b5563; /* similar to text-gray-700 */ |
|
|
|
border: 1px solid #4b5563; /* Dark border */ |
|
|
|
border-radius: 0.25rem; |
|
|
|
background-color: #3b3b53; |
|
|
|
color: #e5e7eb; |
|
|
|
font-size: 1rem; |
|
|
|
line-height: 1.5; |
|
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0); /* resets shadow */ |
|
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0); |
|
|
|
transition: box-shadow 0.15s ease-in-out; |
|
|
|
} |
|
|
|
|
|
|
|
.input-field:focus { |
|
|
|
outline: none; |
|
|
|
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.5); /* Green focus border */ |
|
|
|
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); /* Blue focus */ |
|
|
|
} |
|
|
|
|
|
|
|
/* Form Footer */ |
|
|
|
@ -165,11 +167,11 @@ html { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin-top: 1rem; /* similar to mb-6 */ |
|
|
|
margin-top: 1rem; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-primary { |
|
|
|
background-color: #3b82f6; /* Blue button */ |
|
|
|
background-color: #4299e1; /* Blue button */ |
|
|
|
color: white; |
|
|
|
padding: 0.5rem 1rem; |
|
|
|
border-radius: 0.25rem; |
|
|
|
@ -184,14 +186,14 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.forgot-password { |
|
|
|
color: #3b82f6; /* Blue text */ |
|
|
|
font-size: 0.875rem; /* similar to text-sm */ |
|
|
|
color: #4299e1; |
|
|
|
font-size: 0.875rem; |
|
|
|
font-weight: bold; |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
|
|
|
|
.forgot-password:hover { |
|
|
|
color: #2563eb; /* Darker blue on hover */ |
|
|
|
color: #2563eb; |
|
|
|
} |
|
|
|
|
|
|
|
/* Login Message */ |
|
|
|
@ -199,6 +201,7 @@ html { |
|
|
|
margin-top: 1rem; |
|
|
|
text-align: center; |
|
|
|
font-size: 0.875rem; |
|
|
|
color: #9ca3af; |
|
|
|
} |
|
|
|
|
|
|
|
/* Dashboard-specific styles */ |
|
|
|
@ -210,15 +213,16 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.dashboard-item { |
|
|
|
background-color: white; |
|
|
|
background-color: #1e1e2e; |
|
|
|
padding: 1rem; |
|
|
|
border-radius: 0.5rem; |
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); |
|
|
|
} |
|
|
|
|
|
|
|
.dashboard-item h3 { |
|
|
|
margin-top: 0; |
|
|
|
margin-bottom: 1rem; |
|
|
|
color: #e5e7eb; |
|
|
|
} |
|
|
|
|
|
|
|
/* New styles for jobs submenu */ |
|
|
|
@ -229,7 +233,7 @@ html { |
|
|
|
.submenu-header { |
|
|
|
font-size: 1.5rem; |
|
|
|
font-weight: bold; |
|
|
|
color: #1f2937; |
|
|
|
color: #e5e7eb; |
|
|
|
margin-bottom: 1rem; |
|
|
|
} |
|
|
|
|
|
|
|
@ -240,22 +244,22 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.submenu-item { |
|
|
|
background-color: white; |
|
|
|
background-color: #3b3b53; |
|
|
|
border-radius: 0.5rem; |
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); |
|
|
|
padding: 1rem; |
|
|
|
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; |
|
|
|
} |
|
|
|
|
|
|
|
.submenu-item:hover { |
|
|
|
transform: translateY(-2px); |
|
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); |
|
|
|
} |
|
|
|
|
|
|
|
.submenu-title { |
|
|
|
font-size: 1.25rem; |
|
|
|
font-weight: bold; |
|
|
|
color: #4b5563; |
|
|
|
color: #9ca3af; |
|
|
|
margin-bottom: 0.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
@ -268,7 +272,7 @@ html { |
|
|
|
|
|
|
|
.submenu-item li { |
|
|
|
font-size: 0.875rem; |
|
|
|
color: #6b7280; |
|
|
|
color: #a0aec0; |
|
|
|
padding: 0.25rem 0; |
|
|
|
} |
|
|
|
|
|
|
|
@ -276,7 +280,7 @@ html { |
|
|
|
.submenu-item a, |
|
|
|
.submenu-item button { |
|
|
|
display: inline-block; |
|
|
|
background-color: #22c55e; |
|
|
|
background-color: #4299e1; |
|
|
|
color: white; |
|
|
|
padding: 0.5rem 1rem; |
|
|
|
border-radius: 0.25rem; |
|
|
|
@ -290,34 +294,46 @@ html { |
|
|
|
|
|
|
|
.submenu-item a:hover, |
|
|
|
.submenu-item button:hover { |
|
|
|
background-color: #16a34a; |
|
|
|
background-color: #2563eb; |
|
|
|
} |
|
|
|
|
|
|
|
/* Style for error and not-found message display */ |
|
|
|
.error, |
|
|
|
.not-found { |
|
|
|
text-align: center; |
|
|
|
padding: 0.75rem; |
|
|
|
border-radius: 0.25rem; |
|
|
|
font-size: 0.875rem; |
|
|
|
margin-top: 0.5rem; |
|
|
|
animation: fadeIn 0.3s ease-in-out; |
|
|
|
} |
|
|
|
|
|
|
|
.error { |
|
|
|
background-color: #fee2e2; |
|
|
|
border: 1px solid #f87171; |
|
|
|
color: #b91c1c; |
|
|
|
color: #e11d48; |
|
|
|
} |
|
|
|
|
|
|
|
.not-found { |
|
|
|
background-color: #fef3c7; |
|
|
|
border: 1px solid #fbbf24; |
|
|
|
color: #b45309; |
|
|
|
border: 1px solid #f59e0b; |
|
|
|
color: #92400e; |
|
|
|
} |
|
|
|
|
|
|
|
/* Loading indicator */ |
|
|
|
.loading-indicator { |
|
|
|
width: 1.5rem; |
|
|
|
height: 1.5rem; |
|
|
|
border: 0.25rem solid #e5e7eb; |
|
|
|
border-top: 0.25rem solid #2563eb; |
|
|
|
border-radius: 50%; |
|
|
|
animation: spin 1s linear infinite; |
|
|
|
.error::before, |
|
|
|
.not-found::before { |
|
|
|
margin-right: 0.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
/* Animations */ |
|
|
|
.error::before { |
|
|
|
content: "⚠️"; |
|
|
|
} |
|
|
|
|
|
|
|
.not-found::before { |
|
|
|
content: "🔍"; |
|
|
|
} |
|
|
|
|
|
|
|
/* Loading indicator */ |
|
|
|
@keyframes spin { |
|
|
|
0% { |
|
|
|
transform: rotate(0deg); |
|
|
|
@ -327,36 +343,20 @@ html { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
|
from { |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
to { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.error, |
|
|
|
.not-found { |
|
|
|
text-align: center; |
|
|
|
padding: 0.75rem; |
|
|
|
border-radius: 0.25rem; |
|
|
|
font-size: 0.875rem; |
|
|
|
margin-top: 0.5rem; |
|
|
|
animation: fadeIn 0.3s ease-in-out; |
|
|
|
} |
|
|
|
|
|
|
|
.error::before, |
|
|
|
.not-found::before { |
|
|
|
.loading-indicator { |
|
|
|
width: 1.5rem; |
|
|
|
height: 1.5rem; |
|
|
|
border: 0.25rem solid #4a5568; |
|
|
|
border-top: 0.25rem solid #4299e1; |
|
|
|
border-radius: 50%; |
|
|
|
animation: spin 1s linear infinite; |
|
|
|
margin-right: 0.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
.error::before { |
|
|
|
content: "⚠️"; |
|
|
|
} |
|
|
|
|
|
|
|
.not-found::before { |
|
|
|
content: "🔍"; |
|
|
|
/* Fade effect for existing content */ |
|
|
|
.htmx-request .fade-me-out { |
|
|
|
opacity: 0.5; |
|
|
|
transition: opacity 0.3s ease-in-out; |
|
|
|
} |
|
|
|
|
|
|
|
/* Highlight effect for changed content */ |
|
|
|
@ -376,12 +376,48 @@ html { |
|
|
|
/* Button styles */ |
|
|
|
.warning-button { |
|
|
|
background-color: #f87171; |
|
|
|
color: white; |
|
|
|
border: none; |
|
|
|
padding: 0.5rem 1rem; |
|
|
|
border-radius: 0.25rem; |
|
|
|
font-size: 0.875rem; |
|
|
|
cursor: pointer; |
|
|
|
transition: background-color 0.2s; |
|
|
|
margin-bottom: 1rem; |
|
|
|
} |
|
|
|
|
|
|
|
.warning-button:hover { |
|
|
|
background-color: #e11d48; |
|
|
|
} |
|
|
|
|
|
|
|
.caution-button { |
|
|
|
background-color: #fbbf24; |
|
|
|
background-color: #f59e0b; |
|
|
|
color: #1f2937; |
|
|
|
border: none; |
|
|
|
padding: 0.5rem 1rem; |
|
|
|
border-radius: 0.25rem; |
|
|
|
font-size: 0.875rem; |
|
|
|
cursor: pointer; |
|
|
|
transition: background-color 0.2s; |
|
|
|
margin-bottom: 1rem; |
|
|
|
} |
|
|
|
|
|
|
|
.caution-button:hover { |
|
|
|
background-color: #d97706; |
|
|
|
} |
|
|
|
|
|
|
|
.success-button { |
|
|
|
background-color: #22c55e; |
|
|
|
background-color: #34d399; |
|
|
|
color: white; |
|
|
|
border: none; |
|
|
|
padding: 0.5rem 1rem; |
|
|
|
border-radius: 0.25rem; |
|
|
|
font-size: 0.875rem; |
|
|
|
cursor: pointer; |
|
|
|
transition: background-color 0.2s; |
|
|
|
margin-bottom: 1rem; |
|
|
|
} |
|
|
|
|
|
|
|
.success-button:hover { |
|
|
|
background-color: #059669; |
|
|
|
} |
|
|
|
|
