Refactor Proxmox server views for improved layout and styling

- Updated server card component to use a more compact layout with adjusted spacing and styling.
- Enhanced server status display with improved icon sizes and colors.
- Modified quick info row to use smaller text and adjusted labels for clarity.
- Refined server configuration grid for better alignment and spacing.
- Updated modal z-index values for consistent layering across various modals in statistics, storage, subdomain, and system views.
- General styling improvements for better readability and user experience.
This commit is contained in:
2025-12-17 14:36:53 -05:00
parent 7794570770
commit a90aba582d
13 changed files with 517 additions and 865 deletions

View File

@@ -17,7 +17,7 @@
x-transition:leave-end="opacity-0"
@click="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
style="display: none;">
</div>
<!-- Modal -->
@@ -30,7 +30,7 @@
x-transition:leave-end="opacity-0 scale-95"
@click.away="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
class="fixed inset-0 z-[60] flex items-center justify-center p-4"
style="display: none;">
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -85,7 +85,7 @@
x-transition:leave-end="opacity-0"
@click="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
style="display: none;">
</div>
<!-- Modal -->
@@ -98,7 +98,7 @@
x-transition:leave-end="opacity-0 scale-95"
@click.away="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
class="fixed inset-0 z-[60] flex items-center justify-center p-4"
style="display: none;">
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -216,7 +216,7 @@
x-transition:leave-end="opacity-0"
@click="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
style="display: none;">
</div>
<!-- Modal -->
@@ -229,7 +229,7 @@
x-transition:leave-end="opacity-0 scale-95"
@click.away="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
class="fixed inset-0 z-[60] flex items-center justify-center p-4"
style="display: none;">
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -330,7 +330,7 @@
x-transition:leave-end="opacity-0"
@click="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
style="display: none;">
</div>
<!-- Modal -->
@@ -343,7 +343,7 @@
x-transition:leave-end="opacity-0 scale-95"
@click.away="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
class="fixed inset-0 z-[60] flex items-center justify-center p-4"
style="display: none;">
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
@@ -444,7 +444,7 @@
x-transition:leave-end="opacity-0"
@click="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
style="display: none;">
</div>
<!-- Modal -->
@@ -457,7 +457,7 @@
x-transition:leave-end="opacity-0 scale-95"
@click.away="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
class="fixed inset-0 z-[60] flex items-center justify-center p-4"
style="display: none;">
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 shadow-2xl p-6">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">