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

added both themes and switched on system theme; need to pare down

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

562
static/css/styles.css
View File

@ -4,8 +4,8 @@ html {
margin: 0;
height: 100%;
font-family: Arial, sans-serif;
background-color: #1e1e2e; /* Dark background */
color: #e5e7eb; /* Light text */
background-color: #f3f4f6;
/* similar to bg-gray-100 */
}
.flex {
@ -25,7 +25,7 @@ html {
}
.bg-gray {
background-color: #2a2a40; /* Dark gray */
background-color: #f3f4f6;
}
/* Container setup for dashboard */
@ -38,9 +38,514 @@ html {
/* Sidebar styles */
.sidebar {
width: 16rem; /* Fixed width for sidebar */
background-color: #121220; /* Darker background */
color: #e5e7eb; /* Light text */
width: 16rem;
/* Fixed width for sidebar */
background-color: #1f2937;
/* Dark background */
color: white;
padding: 1rem;
display: flex;
flex-direction: column;
}
.sidebar .title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1.5rem;
}
.sidebar ul {
list-style-type: none;
}
.sidebar a {
color: white;
text-decoration: none;
padding: 0.5rem 0;
display: block;
margin-bottom: 0.5rem;
border-radius: 0.25rem;
}
.sidebar a:hover {
background-color: #374151;
/* Slightly lighter on hover */
}
/* Main content area for dashboard */
.main-content {
flex-grow: 1;
/* Take up remaining space */
padding: 2rem;
display: flex;
flex-direction: column;
overflow-y: auto;
/* Allow scrolling if needed */
}
.header {
display: flex;
justify-content: flex-end;
/* Align logout button to the right */
margin-bottom: 2rem;
}
.logout-btn {
background-color: #ef4444;
/* Red button */
color: white;
padding: 0.5rem 1rem;
border: none;
border-radius: 0.25rem;
cursor: pointer;
}
.logout-btn:hover {
background-color: #dc2626;
/* Darker red on hover */
}
.content {
background-color: white;
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
flex-grow: 1;
overflow-y: auto;
/* Ensure content area can scroll */
}
/* Login Container */
.login-container {
background-color: white;
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 */
}
.login-title {
font-size: 1.75rem;
/* similar to text-2xl */
font-weight: bold;
margin-bottom: 0.5rem;
/* similar to mb-6 */
text-align: center;
color: #2d3748;
/* similar to text-gray-800 */
}
.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 */
text-align: center;
color: #4a5568;
/* A slightly lighter color than the title */
}
/* Input Fields */
.input-group {
margin-bottom: 1rem;
/* similar to mb-4 */
}
.input-group label {
display: block;
color: #4a5568;
/* similar to text-gray-700 */
font-size: 0.875rem;
/* similar to text-sm */
font-weight: bold;
margin-bottom: 0.5rem;
/* similar to mb-2 */
}
.input-field {
width: 100%;
padding: 0.5rem;
border: 1px solid #cbd5e0;
/* similar to border */
border-radius: 0.25rem;
/* similar to rounded */
color: #4a5568;
/* 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 */
transition: box-shadow 0.15s ease-in-out;
}
.input-field:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
/* similar to focus:shadow-outline */
}
/* Form Footer */
.form-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
/* similar to mb-6 */
}
.btn-primary {
background-color: #4299e1;
/* similar to bg-blue-500 */
color: white;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
border: none;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
}
.btn-primary:hover {
background-color: #2b6cb0;
/* similar to hover:bg-blue-700 */
}
.forgot-password {
color: #4299e1;
/* similar to text-blue-500 */
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 */
}
/* Login Message */
.login-message {
margin-top: 1rem;
text-align: center;
font-size: 0.875rem;
}
/* Dashboard-specific styles */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.dashboard-item {
background-color: white;
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.dashboard-item h3 {
margin-top: 0;
margin-bottom: 1rem;
}
/* New styles for jobs submenu */
.submenu-container {
margin-bottom: 2rem;
}
.submenu-header {
font-size: 1.5rem;
font-weight: bold;
color: #2d3748;
margin-bottom: 1rem;
}
.submenu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.submenu-item {
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
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);
}
.submenu-title {
font-size: 1.25rem;
font-weight: bold;
color: #4a5568;
margin-bottom: 0.5rem;
}
/* Style for lists within submenu items */
.submenu-item ul {
list-style-type: none;
padding-left: 0;
margin-top: 0.5rem;
}
.submenu-item li {
font-size: 0.875rem;
color: #718096;
padding: 0.25rem 0;
}
/* Style for buttons or links within submenu items */
.submenu-item a,
.submenu-item button {
display: inline-block;
background-color: #4299e1;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
text-decoration: none;
font-size: 0.875rem;
font-weight: bold;
transition: background-color 0.2s;
border: none;
cursor: pointer;
}
.submenu-item a:hover,
.submenu-item button:hover {
background-color: #2b6cb0;
}
/* Style for error and not-found message display */
@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 {
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;
}
.error::before {
content: "⚠️";
}
.not-found::before {
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% {
background-color: #fef3c7;
}
100% {
background-color: transparent;
}
}
.highlight-change {
animation: highlightBackground 2s ease-in-out;
}
/* You better be sure you wanna do this 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;
}
.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;
}
/* 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;
}
@media (prefers-color-scheme: dark) {
/* General reset and body setup */
body,
html {
margin: 0;
height: 100%;
font-family: Arial, sans-serif;
background-color: #1e1e2e;
/* Dark background */
color: #e5e7eb;
/* Light text */
}
.flex {
display: flex;
}
.h-screen {
height: 100vh;
}
/* Flexbox centering for login */
.flex-center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.bg-gray {
background-color: #2a2a40;
/* Dark gray */
}
/* Container setup for dashboard */
.container {
display: flex;
flex-direction: row;
width: 100%;
height: 100vh;
}
/* Sidebar styles */
.sidebar {
width: 16rem;
/* Fixed width for sidebar */
background-color: #121220;
/* Darker background */
color: #e5e7eb;
/* Light text */
padding: 1rem;
display: flex;
flex-direction: column;
@ -66,26 +571,31 @@ html {
}
.sidebar a:hover {
background-color: #374151; /* Slightly lighter on hover */
background-color: #374151;
/* Slightly lighter on hover */
}
/* Main content area for dashboard */
.main-content {
flex-grow: 1; /* Take up remaining space */
flex-grow: 1;
/* Take up remaining space */
padding: 2rem;
display: flex;
flex-direction: column;
overflow-y: auto; /* Allow scrolling if needed */
overflow-y: auto;
/* Allow scrolling if needed */
}
.header {
display: flex;
justify-content: flex-end; /* Align logout button to the right */
justify-content: flex-end;
/* Align logout button to the right */
margin-bottom: 2rem;
}
.logout-btn {
background-color: #f87171; /* Red button */
background-color: #f87171;
/* Red button */
color: white;
padding: 0.5rem 1rem;
border: none;
@ -94,16 +604,19 @@ html {
}
.logout-btn:hover {
background-color: #e11d48; /* Darker red on hover */
background-color: #e11d48;
/* Darker red on hover */
}
.content {
background-color: #2e2e42; /* Dark 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.3);
flex-grow: 1;
overflow-y: auto; /* Ensure content area can scroll */
overflow-y: auto;
/* Ensure content area can scroll */
}
/* Login Container */
@ -128,7 +641,8 @@ html {
font-weight: normal;
margin-bottom: 1.5rem;
text-align: center;
color: #9ca3af; /* Slightly lighter than title */
color: #9ca3af;
/* Slightly lighter than title */
}
/* Input Fields */
@ -138,7 +652,8 @@ html {
.input-group label {
display: block;
color: #9ca3af; /* Gray text */
color: #9ca3af;
/* Gray text */
font-size: 0.875rem;
font-weight: bold;
margin-bottom: 0.5rem;
@ -147,7 +662,8 @@ html {
.input-field {
width: 100%;
padding: 0.5rem;
border: 1px solid #4b5563; /* Dark border */
border: 1px solid #4b5563;
/* Dark border */
border-radius: 0.25rem;
background-color: #3b3b53;
color: #e5e7eb;
@ -159,7 +675,8 @@ html {
.input-field:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); /* Blue focus */
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
/* Blue focus */
}
/* Form Footer */
@ -171,7 +688,8 @@ html {
}
.btn-primary {
background-color: #4299e1; /* Blue button */
background-color: #4299e1;
/* Blue button */
color: white;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
@ -182,7 +700,8 @@ html {
}
.btn-primary:hover {
background-color: #2563eb; /* Darker blue on hover */
background-color: #2563eb;
/* Darker blue on hover */
}
.forgot-password {
@ -338,6 +857,7 @@ html {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
@ -364,6 +884,7 @@ html {
0% {
background-color: #fef3c7;
}
100% {
background-color: transparent;
}
@ -421,3 +942,4 @@ html {
.success-button:hover {
background-color: #059669;
}
}
Write Preview
Loading…
Cancel
Save