npatterson
/
servicetrade-toolbox-wmv
1
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity
Browse Source

made a dark theme

cli-archive
nic 1 year ago
parent
b09bd9ada6
commit
7cf67f20a7
1 changed files with 121 additions and 85 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 206
      static/css/styles.css

206
static/css/styles.css
View File

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

Write Preview
Loading…
Cancel
Save