🎉 Improved documentation and logs for better system understanding & maintenance
This commit is contained in:
@ -27,32 +27,34 @@
|
||||
.border-mercedes-silver { border-color: #d1d5db; }
|
||||
.border-mercedes-blue { border-color: #0073ce; }
|
||||
|
||||
/* Advanced Calendar Styling */
|
||||
/* Premium Calendar Container */
|
||||
.fc {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--fc-border-color: #e2e8f0;
|
||||
--fc-today-bg-color: rgba(0, 115, 206, 0.08);
|
||||
--fc-border-color: #d1d5db;
|
||||
--fc-today-bg-color: rgba(0, 115, 206, 0.12);
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
||||
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.dark .fc {
|
||||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||||
--fc-border-color: #334155;
|
||||
--fc-today-bg-color: rgba(0, 115, 206, 0.15);
|
||||
border-color: #374151;
|
||||
}
|
||||
|
||||
/* Premium Header Toolbar */
|
||||
/* Enhanced Header Toolbar */
|
||||
.fc-header-toolbar {
|
||||
margin-bottom: 0 !important;
|
||||
padding: 1.5rem 2rem !important;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||||
border: none !important;
|
||||
border-bottom: 1px solid #e2e8f0 !important;
|
||||
border-bottom: 2px solid #e5e7eb !important;
|
||||
border-radius: 0 !important;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
@ -62,7 +64,7 @@
|
||||
border-bottom-color: #334155 !important;
|
||||
}
|
||||
|
||||
/* Premium Buttons */
|
||||
/* Premium Navigation Buttons */
|
||||
.fc-button {
|
||||
background: linear-gradient(135deg, #0073ce 0%, #005ba3 100%) !important;
|
||||
border: none !important;
|
||||
@ -121,7 +123,7 @@
|
||||
background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
|
||||
}
|
||||
|
||||
/* Elegant Typography */
|
||||
/* Calendar Title Typography */
|
||||
.fc-toolbar-title {
|
||||
color: #000000 !important;
|
||||
font-size: 1.875rem !important;
|
||||
@ -139,11 +141,12 @@
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* Premium Column Headers */
|
||||
/* Enhanced Column Headers */
|
||||
.fc-col-header {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
|
||||
border: none !important;
|
||||
border-bottom: 2px solid #0073ce !important;
|
||||
border-bottom: 3px solid #0073ce !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.dark .fc-col-header {
|
||||
@ -157,7 +160,7 @@
|
||||
font-size: 0.875rem !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.1em !important;
|
||||
color: #374151 !important;
|
||||
color: #1f2937 !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
@ -165,27 +168,111 @@
|
||||
color: #e2e8f0 !important;
|
||||
}
|
||||
|
||||
/* Elegant Grid Styling */
|
||||
/* Optimized Time Grid for Light Mode */
|
||||
.fc-timegrid-axis {
|
||||
font-weight: 700 !important;
|
||||
color: #374151 !important;
|
||||
font-size: 0.8rem !important;
|
||||
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
|
||||
border-right: 2px solid #e5e7eb !important;
|
||||
text-align: center !important;
|
||||
min-width: 65px !important;
|
||||
}
|
||||
|
||||
.dark .fc-timegrid-axis {
|
||||
color: #9ca3af !important;
|
||||
background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
|
||||
border-right-color: #374151 !important;
|
||||
}
|
||||
|
||||
.fc-timegrid-axis-cushion {
|
||||
padding: 0.75rem 0.5rem !important;
|
||||
font-weight: 700 !important;
|
||||
color: #1f2937 !important;
|
||||
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
|
||||
border-radius: 0 8px 8px 0 !important;
|
||||
margin-right: 1px !important;
|
||||
text-align: center !important;
|
||||
min-width: 60px !important;
|
||||
}
|
||||
|
||||
.dark .fc-timegrid-axis-cushion {
|
||||
color: #e5e7eb !important;
|
||||
background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
|
||||
}
|
||||
|
||||
.fc-timegrid-slot-label {
|
||||
font-variant-numeric: tabular-nums !important;
|
||||
font-weight: 600 !important;
|
||||
color: #1f2937 !important;
|
||||
}
|
||||
|
||||
.dark .fc-timegrid-slot-label {
|
||||
color: #d1d5db !important;
|
||||
}
|
||||
|
||||
/* Enhanced Grid Styling */
|
||||
.fc-daygrid-day, .fc-timegrid-slot {
|
||||
border-color: #f1f5f9 !important;
|
||||
border-color: #e5e7eb !important;
|
||||
transition: background-color 0.2s ease !important;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.dark .fc-daygrid-day, .dark .fc-timegrid-slot {
|
||||
border-color: #1e293b !important;
|
||||
background: #0f172a;
|
||||
}
|
||||
|
||||
.fc-timegrid-col {
|
||||
background: #ffffff !important;
|
||||
border-left: 1px solid #d1d5db !important;
|
||||
border-right: 1px solid #d1d5db !important;
|
||||
}
|
||||
|
||||
.dark .fc-timegrid-col {
|
||||
background: #0f172a !important;
|
||||
border-left-color: #374151 !important;
|
||||
border-right-color: #374151 !important;
|
||||
}
|
||||
|
||||
.fc-timegrid-slot:hover {
|
||||
background: rgba(0, 115, 206, 0.03) !important;
|
||||
background: rgba(0, 115, 206, 0.06) !important;
|
||||
}
|
||||
|
||||
.dark .fc-timegrid-slot:hover {
|
||||
background: rgba(0, 115, 206, 0.08) !important;
|
||||
}
|
||||
|
||||
/* Improved Time Slot Lines */
|
||||
.fc-timegrid-slot-minor {
|
||||
border-top: 1px solid #f3f4f6 !important;
|
||||
}
|
||||
|
||||
.fc-timegrid-slot-major {
|
||||
border-top: 2px solid #e5e7eb !important;
|
||||
}
|
||||
|
||||
.dark .fc-timegrid-slot-minor {
|
||||
border-top-color: #1e293b !important;
|
||||
}
|
||||
|
||||
.dark .fc-timegrid-slot-major {
|
||||
border-top-color: #374151 !important;
|
||||
}
|
||||
|
||||
.fc-timegrid-body {
|
||||
border-left: 2px solid #d1d5db !important;
|
||||
}
|
||||
|
||||
.dark .fc-timegrid-body {
|
||||
border-left-color: #374151 !important;
|
||||
}
|
||||
|
||||
/* Enhanced Today Highlighting */
|
||||
.fc-day-today {
|
||||
background: linear-gradient(135deg, rgba(0, 115, 206, 0.08) 0%, rgba(0, 115, 206, 0.04) 100%) !important;
|
||||
background: linear-gradient(135deg, rgba(0, 115, 206, 0.15) 0%, rgba(0, 115, 206, 0.08) 100%) !important;
|
||||
position: relative !important;
|
||||
border: 2px solid rgba(0, 115, 206, 0.3) !important;
|
||||
}
|
||||
|
||||
.fc-day-today::before {
|
||||
@ -194,13 +281,70 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #0073ce, #00a8ff, #0073ce);
|
||||
border-radius: 0 0 2px 2px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.dark .fc-day-today {
|
||||
background: linear-gradient(135deg, rgba(0, 115, 206, 0.15) 0%, rgba(0, 115, 206, 0.08) 100%) !important;
|
||||
background: linear-gradient(135deg, rgba(0, 115, 206, 0.20) 0%, rgba(0, 115, 206, 0.12) 100%) !important;
|
||||
border-color: rgba(0, 115, 206, 0.4) !important;
|
||||
}
|
||||
|
||||
/* Enhanced All-Day Events */
|
||||
.fc-daygrid-body {
|
||||
background: #ffffff !important;
|
||||
border: 1px solid #e5e7eb !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
.dark .fc-daygrid-body {
|
||||
background: #0f172a !important;
|
||||
border-color: #374151 !important;
|
||||
}
|
||||
|
||||
.fc-daygrid-event-harness {
|
||||
margin: 2px 4px !important;
|
||||
}
|
||||
|
||||
.fc-daygrid-event {
|
||||
background: linear-gradient(135deg, #0073ce 0%, #005ba3 100%) !important;
|
||||
border: none !important;
|
||||
border-radius: 8px !important;
|
||||
color: white !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 0.875rem !important;
|
||||
padding: 0.5rem 0.75rem !important;
|
||||
box-shadow:
|
||||
0 4px 6px rgba(0, 115, 206, 0.25),
|
||||
0 1px 3px rgba(0, 0, 0, 0.1) !important;
|
||||
min-height: 28px !important;
|
||||
}
|
||||
|
||||
.fc-daygrid-event:hover {
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow:
|
||||
0 6px 12px rgba(0, 115, 206, 0.3),
|
||||
0 2px 6px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.fc-daygrid-more-link {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
|
||||
color: white !important;
|
||||
border-radius: 6px !important;
|
||||
font-weight: 600 !important;
|
||||
padding: 0.25rem 0.5rem !important;
|
||||
box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Weekend Highlighting */
|
||||
.fc-day-sat, .fc-day-sun {
|
||||
background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%) !important;
|
||||
}
|
||||
|
||||
.dark .fc-day-sat, .dark .fc-day-sun {
|
||||
background: linear-gradient(135deg, #0c1220 0%, #0f172a 100%) !important;
|
||||
}
|
||||
|
||||
/* Premium Event Styling */
|
||||
@ -255,7 +399,7 @@
|
||||
letter-spacing: 0.05em !important;
|
||||
}
|
||||
|
||||
/* Premium Status Colors with Gradients */
|
||||
/* Status-specific Event Colors */
|
||||
.fc-event.event-running {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 80%, #047857 100%) !important;
|
||||
color: white !important;
|
||||
@ -326,21 +470,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Time Grid Enhancements */
|
||||
.fc-timegrid-axis {
|
||||
font-weight: 600 !important;
|
||||
color: #6b7280 !important;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
.dark .fc-timegrid-axis {
|
||||
color: #9ca3af !important;
|
||||
}
|
||||
|
||||
.fc-timegrid-slot-label {
|
||||
font-variant-numeric: tabular-nums !important;
|
||||
}
|
||||
|
||||
/* Premium Form Elements */
|
||||
.mercedes-form-input {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@ -496,7 +625,7 @@
|
||||
animation: calendar-load 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* Responsive Enhancements */
|
||||
/* Responsive Optimizations */
|
||||
@media (max-width: 768px) {
|
||||
.fc-toolbar-title {
|
||||
font-size: 1.25rem !important;
|
||||
@ -515,6 +644,22 @@
|
||||
padding: 0.75rem 0.5rem !important;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
.fc-timegrid-axis-cushion {
|
||||
min-width: 45px !important;
|
||||
font-size: 0.75rem !important;
|
||||
padding: 0.5rem 0.25rem !important;
|
||||
}
|
||||
|
||||
.fc-timegrid-axis {
|
||||
border-right-width: 1px !important;
|
||||
}
|
||||
|
||||
.fc-daygrid-event {
|
||||
font-size: 0.75rem !important;
|
||||
padding: 0.375rem 0.5rem !important;
|
||||
min-height: 24px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user