core/Projektarbeit-MYP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📚 Improved admin UI layout & design consistency 🎨

Browse Source
This commit is contained in:
Till Tomczak
2025-06-01 17:03:31 +02:00
parent 52d0bad64f
commit 7de193d4b2
5 changed files with 202 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
backend/templates/admin_guest_requests_overview.html
View File

@ -273,7 +273,32 @@
border-radius: 8px;
width: 80%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0, 115, 206, 0.2) transparent;
}
/* Modal Scrollbar Styling */
.modal-content::-webkit-scrollbar {
width: 8px;
}
.modal-content::-webkit-scrollbar-track {
background: transparent;
border-radius: 4px;
}
.modal-content::-webkit-scrollbar-thumb {
background: rgba(0, 115, 206, 0.2);
border-radius: 4px;
transition: all 0.3s ease;
}
.modal-content::-webkit-scrollbar-thumb:hover {
background: rgba(0, 115, 206, 0.4);
}
.close {
color: #aaa;
float: right;

65
backend/templates/calendar.html
View File

@ -575,20 +575,71 @@
/* Premium Modal Styling */
.mercedes-modal {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border: 2px solid #e2e8f0;
border: 1px solid #e2e8f0;
box-shadow:
0 50px 100px -20px rgba(0, 0, 0, 0.25),
0 20px 40px -10px rgba(0, 0, 0, 0.1);
border-radius: 20px;
backdrop-filter: blur(20px);
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);
max-height: 90vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0, 115, 206, 0.2) transparent;
}
.dark .mercedes-modal {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
border-color: #334155;
box-shadow:
0 50px 100px -20px rgba(0, 0, 0, 0.5),
0 20px 40px -10px rgba(0, 0, 0, 0.3);
0 25px 50px -12px rgba(0, 0, 0, 0.5),
0 4px 6px -1px rgba(0, 0, 0, 0.3);
scrollbar-color: rgba(59, 130, 246, 0.3) transparent;
}
/* Dashboard card als Modal */
.dashboard-card {
max-height: 90vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0, 115, 206, 0.2) transparent;
}
.dark .dashboard-card {
scrollbar-color: rgba(59, 130, 246, 0.3) transparent;
}
/* Modal Scrollbar Styling */
.mercedes-modal::-webkit-scrollbar,
.dashboard-card::-webkit-scrollbar {
width: 8px;
}
.mercedes-modal::-webkit-scrollbar-track,
.dashboard-card::-webkit-scrollbar-track {
background: transparent;
border-radius: 4px;
}
.mercedes-modal::-webkit-scrollbar-thumb,
.dashboard-card::-webkit-scrollbar-thumb {
background: rgba(0, 115, 206, 0.2);
border-radius: 4px;
transition: all 0.3s ease;
}
.mercedes-modal::-webkit-scrollbar-thumb:hover,
.dashboard-card::-webkit-scrollbar-thumb:hover {
background: rgba(0, 115, 206, 0.4);
}
.dark .mercedes-modal::-webkit-scrollbar-thumb,
.dark .dashboard-card::-webkit-scrollbar-thumb {
background: rgba(59, 130, 246, 0.3);
}
.dark .mercedes-modal::-webkit-scrollbar-thumb:hover,
.dark .dashboard-card::-webkit-scrollbar-thumb:hover {
background: rgba(59, 130, 246, 0.5);
}
/* Smooth Scrolling for Calendar */

59
backend/templates/jobs.html
View File

@ -270,6 +270,10 @@
0 4px 6px -1px rgba(0, 0, 0, 0.1);
border-radius: 16px;
backdrop-filter: blur(10px);
max-height: 90vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0, 115, 206, 0.2) transparent;
}
.dark .mercedes-modal {
@ -278,6 +282,35 @@
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.5),
0 4px 6px -1px rgba(0, 0, 0, 0.3);
scrollbar-color: rgba(59, 130, 246, 0.3) transparent;
}
/* Improved Modal Scrollbar Styling */
.mercedes-modal::-webkit-scrollbar {
width: 8px;
}
.mercedes-modal::-webkit-scrollbar-track {
background: transparent;
border-radius: 4px;
}
.mercedes-modal::-webkit-scrollbar-thumb {
background: rgba(0, 115, 206, 0.2);
border-radius: 4px;
transition: all 0.3s ease;
}
.mercedes-modal::-webkit-scrollbar-thumb:hover {
background: rgba(0, 115, 206, 0.4);
}
.dark .mercedes-modal::-webkit-scrollbar-thumb {
background: rgba(59, 130, 246, 0.3);
}
.dark .mercedes-modal::-webkit-scrollbar-thumb:hover {
background: rgba(59, 130, 246, 0.5);
}
/* Loading States */
@ -436,19 +469,39 @@
.mercedes-modal {
max-height: 90vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0, 115, 206, 0.2) transparent;
}
.dark .mercedes-modal {
scrollbar-color: rgba(59, 130, 246, 0.3) transparent;
}
.mercedes-modal::-webkit-scrollbar {
width: 6px;
width: 8px;
}
.mercedes-modal::-webkit-scrollbar-track {
background: transparent;
border-radius: 4px;
}
.mercedes-modal::-webkit-scrollbar-thumb {
background: rgba(0, 115, 206, 0.2);
border-radius: 3px;
border-radius: 4px;
transition: all 0.3s ease;
}
.mercedes-modal::-webkit-scrollbar-thumb:hover {
background: rgba(0, 115, 206, 0.3);
background: rgba(0, 115, 206, 0.4);
}
.dark .mercedes-modal::-webkit-scrollbar-thumb {
background: rgba(59, 130, 246, 0.3);
}
.dark .mercedes-modal::-webkit-scrollbar-thumb:hover {
background: rgba(59, 130, 246, 0.5);
}
</style>
{% endblock %}

44
backend/templates/printers.html
View File

@ -229,6 +229,10 @@
0 4px 6px -1px rgba(0, 0, 0, 0.1);
border-radius: 16px;
backdrop-filter: blur(10px);
max-height: 90vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0, 115, 206, 0.2) transparent;
}
.dark .mercedes-modal {
@ -237,6 +241,46 @@
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.5),
0 4px 6px -1px rgba(0, 0, 0, 0.3);
scrollbar-color: rgba(59, 130, 246, 0.3) transparent;
}
/* Modal Scrollbar Styling */
.mercedes-modal::-webkit-scrollbar {
width: 8px;
}
.mercedes-modal::-webkit-scrollbar-track {
background: transparent;
border-radius: 4px;
}
.mercedes-modal::-webkit-scrollbar-thumb {
background: rgba(0, 115, 206, 0.2);
border-radius: 4px;
transition: all 0.3s ease;
}
.mercedes-modal::-webkit-scrollbar-thumb:hover {
background: rgba(0, 115, 206, 0.4);
}
.dark .mercedes-modal::-webkit-scrollbar-thumb {
background: rgba(59, 130, 246, 0.3);
}
.dark .mercedes-modal::-webkit-scrollbar-thumb:hover {
background: rgba(59, 130, 246, 0.5);
}
/* Smooth scrolling for modals */
.mercedes-modal {
scroll-behavior: smooth;
}
/* Ensure modal containers allow scrolling */
.modal-container {
max-height: 90vh;
overflow-y: auto;
}
/* Action Buttons */