"Refactor admin templates for improved UI consistency"
This commit is contained in:
@@ -9,6 +9,268 @@
|
||||
<link href="{{ url_for('static', filename='js/fullcalendar/main.min.css') }}" rel="stylesheet">
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
/* Mercedes-Benz Corporate Design */
|
||||
.text-mercedes-black { color: #000000; }
|
||||
.text-mercedes-gray { color: #6b7280; }
|
||||
.text-mercedes-silver { color: #9ca3af; }
|
||||
.text-mercedes-blue { color: #0073ce; }
|
||||
.text-mercedes-green { color: #008c32; }
|
||||
.text-mercedes-red { color: #dc2626; }
|
||||
|
||||
.bg-mercedes-black { background-color: #000000; }
|
||||
.bg-mercedes-silver { background-color: #e5e7eb; }
|
||||
.bg-mercedes-blue { background-color: #0073ce; }
|
||||
.bg-mercedes-green { background-color: #008c32; }
|
||||
|
||||
.border-mercedes-silver { border-color: #d1d5db; }
|
||||
.border-mercedes-blue { border-color: #0073ce; }
|
||||
|
||||
/* Enhanced Calendar Styling */
|
||||
.fc {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.fc-header-toolbar {
|
||||
margin-bottom: 1.5rem !important;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.dark .fc-header-toolbar {
|
||||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||||
border-color: #334155;
|
||||
}
|
||||
|
||||
.fc-button {
|
||||
background: #0073ce !important;
|
||||
border: none !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 0.5rem 1rem !important;
|
||||
font-weight: 500 !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.fc-button:hover {
|
||||
background: #005ba3 !important;
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.fc-button:focus {
|
||||
box-shadow: 0 0 0 3px rgba(0, 115, 206, 0.3) !important;
|
||||
}
|
||||
|
||||
.fc-button-active {
|
||||
background: #003d82 !important;
|
||||
}
|
||||
|
||||
.fc-today-button {
|
||||
background: #16a34a !important;
|
||||
}
|
||||
|
||||
.fc-today-button:hover {
|
||||
background: #15803d !important;
|
||||
}
|
||||
|
||||
.fc-toolbar-title {
|
||||
color: #000000 !important;
|
||||
font-size: 1.5rem !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.dark .fc-toolbar-title {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.fc-col-header {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
|
||||
border: 1px solid #e2e8f0 !important;
|
||||
}
|
||||
|
||||
.dark .fc-col-header {
|
||||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
|
||||
border-color: #334155 !important;
|
||||
}
|
||||
|
||||
.fc-col-header-cell {
|
||||
padding: 1rem !important;
|
||||
font-weight: 600 !important;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.dark .fc-col-header-cell {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.fc-daygrid-day, .fc-timegrid-slot {
|
||||
border-color: #e2e8f0 !important;
|
||||
}
|
||||
|
||||
.dark .fc-daygrid-day, .dark .fc-timegrid-slot {
|
||||
border-color: #334155 !important;
|
||||
}
|
||||
|
||||
.fc-day-today {
|
||||
background: rgba(0, 115, 206, 0.05) !important;
|
||||
}
|
||||
|
||||
.dark .fc-day-today {
|
||||
background: rgba(0, 115, 206, 0.1) !important;
|
||||
}
|
||||
|
||||
/* Enhanced Event Styling */
|
||||
.fc-event {
|
||||
border-radius: 8px !important;
|
||||
border: none !important;
|
||||
padding: 0.25rem 0.5rem !important;
|
||||
margin: 2px !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.fc-event:hover {
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.fc-event-title {
|
||||
font-weight: 600 !important;
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
|
||||
.fc-event-time {
|
||||
font-size: 0.75rem !important;
|
||||
opacity: 0.9 !important;
|
||||
}
|
||||
|
||||
/* Job Status Colors */
|
||||
.fc-event.event-running {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.fc-event.event-queued {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.fc-event.event-completed {
|
||||
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.fc-event.event-cancelled {
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.fc-event.event-maintenance {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.fc-event.event-high-priority {
|
||||
box-shadow: 0 0 0 2px #f59e0b !important;
|
||||
}
|
||||
|
||||
.fc-event.event-urgent {
|
||||
box-shadow: 0 0 0 2px #ef4444 !important;
|
||||
animation: urgent-pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes urgent-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
/* Enhanced Form Elements */
|
||||
.mercedes-form-input {
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid #d1d5db;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.mercedes-form-input:focus {
|
||||
border-color: #0073ce;
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(0, 115, 206, 0.1),
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-1px);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.dark .mercedes-form-input {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
border-color: #475569;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.dark .mercedes-form-input:focus {
|
||||
border-color: #0ea5e9;
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(14, 165, 233, 0.1),
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.3);
|
||||
background: rgba(30, 41, 59, 1);
|
||||
}
|
||||
|
||||
/* Enhanced Statistics Cards */
|
||||
.stat-card {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dark .stat-card {
|
||||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||||
border-color: #334155;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-card.active {
|
||||
border-left: 4px solid #10b981;
|
||||
}
|
||||
|
||||
.stat-card.queued {
|
||||
border-left: 4px solid #3b82f6;
|
||||
}
|
||||
|
||||
.stat-card.time {
|
||||
border-left: 4px solid #f59e0b;
|
||||
}
|
||||
|
||||
/* Enhanced Modals */
|
||||
.mercedes-modal {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||||
border: 1px solid #e2e8f0;
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgba(0, 0, 0, 0.25),
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.dark .mercedes-modal {
|
||||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||||
border-color: #334155;
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgba(0, 0, 0, 0.5),
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="space-y-8">
|
||||
<!-- Page Header -->
|
||||
|
||||
Reference in New Issue
Block a user