|
|
|
@ -4,7 +4,7 @@ html { |
|
|
|
margin: 0; |
|
|
|
height: 100%; |
|
|
|
font-family: Arial, sans-serif; |
|
|
|
background-color: #f3f4f6; /* similar to bg-gray-100 */ |
|
|
|
background-color: #f9fafb; /* Light neutral background */ |
|
|
|
} |
|
|
|
|
|
|
|
.flex { |
|
|
|
@ -24,7 +24,7 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.bg-gray { |
|
|
|
background-color: #f3f4f6; |
|
|
|
background-color: #f0f4f8; /* Very light gray */ |
|
|
|
} |
|
|
|
|
|
|
|
/* Container setup for dashboard */ |
|
|
|
@ -38,7 +38,7 @@ html { |
|
|
|
/* Sidebar styles */ |
|
|
|
.sidebar { |
|
|
|
width: 16rem; /* Fixed width for sidebar */ |
|
|
|
background-color: #1f2937; /* Dark background */ |
|
|
|
background-color: #2563eb; /* Light blue */ |
|
|
|
color: white; |
|
|
|
padding: 1rem; |
|
|
|
display: flex; |
|
|
|
@ -65,7 +65,7 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.sidebar a:hover { |
|
|
|
background-color: #374151; /* Slightly lighter on hover */ |
|
|
|
background-color: #3b82f6; /* Slightly lighter on hover */ |
|
|
|
} |
|
|
|
|
|
|
|
/* Main content area for dashboard */ |
|
|
|
@ -97,7 +97,7 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
background-color: white; |
|
|
|
background-color: #ffffff; /* White content background */ |
|
|
|
padding: 1.5rem; |
|
|
|
border-radius: 0.5rem; |
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
|
@ -107,7 +107,7 @@ html { |
|
|
|
|
|
|
|
/* Login Container */ |
|
|
|
.login-container { |
|
|
|
background-color: white; |
|
|
|
background-color: #ffffff; |
|
|
|
padding: 2rem; |
|
|
|
border-radius: 0.5rem; |
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Similar to shadow-md */ |
|
|
|
@ -119,7 +119,7 @@ html { |
|
|
|
font-weight: bold; |
|
|
|
margin-bottom: 0.5rem; /* similar to mb-6 */ |
|
|
|
text-align: center; |
|
|
|
color: #2d3748; /* similar to text-gray-800 */ |
|
|
|
color: #1f2937; /* Darker text */ |
|
|
|
} |
|
|
|
|
|
|
|
.login-subtitle { |
|
|
|
@ -127,7 +127,7 @@ html { |
|
|
|
font-weight: normal; /* Lighter weight to distinguish from the title */ |
|
|
|
margin-bottom: 1.5rem; /* Adjust spacing below subtitle */ |
|
|
|
text-align: center; |
|
|
|
color: #4a5568; /* A slightly lighter color than the title */ |
|
|
|
color: #4b5563; /* Medium gray for subtitle */ |
|
|
|
} |
|
|
|
|
|
|
|
/* Input Fields */ |
|
|
|
@ -137,7 +137,7 @@ html { |
|
|
|
|
|
|
|
.input-group label { |
|
|
|
display: block; |
|
|
|
color: #4a5568; /* similar to text-gray-700 */ |
|
|
|
color: #4b5563; /* Medium gray */ |
|
|
|
font-size: 0.875rem; /* similar to text-sm */ |
|
|
|
font-weight: bold; |
|
|
|
margin-bottom: 0.5rem; /* similar to mb-2 */ |
|
|
|
@ -146,9 +146,9 @@ html { |
|
|
|
.input-field { |
|
|
|
width: 100%; |
|
|
|
padding: 0.5rem; |
|
|
|
border: 1px solid #cbd5e0; /* similar to border */ |
|
|
|
border: 1px solid #d1d5db; /* Light border */ |
|
|
|
border-radius: 0.25rem; /* similar to rounded */ |
|
|
|
color: #4a5568; /* similar to text-gray-700 */ |
|
|
|
color: #4b5563; /* similar to text-gray-700 */ |
|
|
|
font-size: 1rem; |
|
|
|
line-height: 1.5; |
|
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0); /* resets shadow */ |
|
|
|
@ -157,7 +157,7 @@ html { |
|
|
|
|
|
|
|
.input-field:focus { |
|
|
|
outline: none; |
|
|
|
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); /* similar to focus:shadow-outline */ |
|
|
|
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.5); /* Green focus border */ |
|
|
|
} |
|
|
|
|
|
|
|
/* Form Footer */ |
|
|
|
@ -169,7 +169,7 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.btn-primary { |
|
|
|
background-color: #4299e1; /* similar to bg-blue-500 */ |
|
|
|
background-color: #3b82f6; /* Blue button */ |
|
|
|
color: white; |
|
|
|
padding: 0.5rem 1rem; |
|
|
|
border-radius: 0.25rem; |
|
|
|
@ -180,18 +180,18 @@ html { |
|
|
|
} |
|
|
|
|
|
|
|
.btn-primary:hover { |
|
|
|
background-color: #2b6cb0; /* similar to hover:bg-blue-700 */ |
|
|
|
background-color: #2563eb; /* Darker blue on hover */ |
|
|
|
} |
|
|
|
|
|
|
|
.forgot-password { |
|
|
|
color: #4299e1; /* similar to text-blue-500 */ |
|
|
|
color: #3b82f6; /* Blue text */ |
|
|
|
font-size: 0.875rem; /* similar to text-sm */ |
|
|
|
font-weight: bold; |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
|
|
|
|
.forgot-password:hover { |
|
|
|
color: #2b6cb0; /* similar to hover:text-blue-800 */ |
|
|
|
color: #2563eb; /* Darker blue on hover */ |
|
|
|
} |
|
|
|
|
|
|
|
/* Login Message */ |
|
|
|
@ -229,7 +229,7 @@ html { |
|
|
|
.submenu-header { |
|
|
|
font-size: 1.5rem; |
|
|
|
font-weight: bold; |
|
|
|
color: #2d3748; |
|
|
|
color: #1f2937; |
|
|
|
margin-bottom: 1rem; |
|
|
|
} |
|
|
|
|
|
|
|
@ -255,7 +255,7 @@ html { |
|
|
|
.submenu-title { |
|
|
|
font-size: 1.25rem; |
|
|
|
font-weight: bold; |
|
|
|
color: #4a5568; |
|
|
|
color: #4b5563; |
|
|
|
margin-bottom: 0.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
@ -268,7 +268,7 @@ html { |
|
|
|
|
|
|
|
.submenu-item li { |
|
|
|
font-size: 0.875rem; |
|
|
|
color: #718096; |
|
|
|
color: #6b7280; |
|
|
|
padding: 0.25rem 0; |
|
|
|
} |
|
|
|
|
|
|
|
@ -276,7 +276,7 @@ html { |
|
|
|
.submenu-item a, |
|
|
|
.submenu-item button { |
|
|
|
display: inline-block; |
|
|
|
background-color: #4299e1; |
|
|
|
background-color: #22c55e; |
|
|
|
color: white; |
|
|
|
padding: 0.5rem 1rem; |
|
|
|
border-radius: 0.25rem; |
|
|
|
@ -290,10 +290,43 @@ html { |
|
|
|
|
|
|
|
.submenu-item a:hover, |
|
|
|
.submenu-item button:hover { |
|
|
|
background-color: #2b6cb0; |
|
|
|
background-color: #16a34a; |
|
|
|
} |
|
|
|
|
|
|
|
/* Style for error and not-found message display */ |
|
|
|
.error { |
|
|
|
background-color: #fee2e2; |
|
|
|
border: 1px solid #f87171; |
|
|
|
color: #b91c1c; |
|
|
|
} |
|
|
|
|
|
|
|
.not-found { |
|
|
|
background-color: #fef3c7; |
|
|
|
border: 1px solid #fbbf24; |
|
|
|
color: #b45309; |
|
|
|
} |
|
|
|
|
|
|
|
/* 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; |
|
|
|
margin-right: 0.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
/* Animations */ |
|
|
|
@keyframes spin { |
|
|
|
0% { |
|
|
|
transform: rotate(0deg); |
|
|
|
} |
|
|
|
100% { |
|
|
|
transform: rotate(360deg); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
|
from { |
|
|
|
opacity: 0; |
|
|
|
@ -313,18 +346,6 @@ html { |
|
|
|
animation: fadeIn 0.3s ease-in-out; |
|
|
|
} |
|
|
|
|
|
|
|
.error { |
|
|
|
background-color: #fee2e2; |
|
|
|
border: 1px solid #ef4444; |
|
|
|
color: #b91c1c; |
|
|
|
} |
|
|
|
|
|
|
|
.not-found { |
|
|
|
background-color: #fef3c7; |
|
|
|
border: 1px solid #f59e0b; |
|
|
|
color: #92400e; |
|
|
|
} |
|
|
|
|
|
|
|
.error::before, |
|
|
|
.not-found::before { |
|
|
|
margin-right: 0.5rem; |
|
|
|
@ -338,46 +359,6 @@ html { |
|
|
|
content: "🔍"; |
|
|
|
} |
|
|
|
|
|
|
|
/* Loading indicator */ |
|
|
|
@keyframes spin { |
|
|
|
0% { |
|
|
|
transform: rotate(0deg); |
|
|
|
} |
|
|
|
100% { |
|
|
|
transform: rotate(360deg); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.htmx-indicator { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
.htmx-request .htmx-indicator { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.htmx-request.htmx-indicator { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.loading-indicator { |
|
|
|
width: 1.5rem; |
|
|
|
height: 1.5rem; |
|
|
|
border: 0.25rem solid #e2e8f0; |
|
|
|
border-top: 0.25rem solid #4299e1; |
|
|
|
border-radius: 50%; |
|
|
|
animation: spin 1s linear infinite; |
|
|
|
margin-right: 0.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
/* 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 */ |
|
|
|
@keyframes highlightBackground { |
|
|
|
0% { |
|
|
|
@ -392,68 +373,15 @@ html { |
|
|
|
animation: highlightBackground 2s ease-in-out; |
|
|
|
} |
|
|
|
|
|
|
|
/* You better be sure you wanna do this button styles */ |
|
|
|
/* Button styles */ |
|
|
|
.warning-button { |
|
|
|
background-color: #ef4444; |
|
|
|
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: #dc2626; |
|
|
|
background-color: #f87171; |
|
|
|
} |
|
|
|
|
|
|
|
.warning-button:disabled { |
|
|
|
background-color: #9ca3af; |
|
|
|
cursor: not-allowed; |
|
|
|
} |
|
|
|
|
|
|
|
/* Pretty sure you wanna do this but lets think about it again button styles */ |
|
|
|
.caution-button { |
|
|
|
background-color: #eab308; |
|
|
|
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: #ca8a04; |
|
|
|
} |
|
|
|
|
|
|
|
.caution-button:disabled { |
|
|
|
background-color: #9ca3af; |
|
|
|
cursor: not-allowed; |
|
|
|
background-color: #fbbf24; |
|
|
|
} |
|
|
|
|
|
|
|
/* This button is harmless button styles */ |
|
|
|
.success-button { |
|
|
|
background-color: #22c55e; |
|
|
|
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: #16a34a; |
|
|
|
} |
|
|
|
|
|
|
|
.success-button:disabled { |
|
|
|
background-color: #9ca3af; |
|
|
|
cursor: not-allowed; |
|
|
|
} |
|
|
|
|
