Private
Public Access
1
0

Add AdminLTE-style CSS framework to app.css

- Introduced AdminLTE CSS variables for color palette, body colors, card styles, and button styles.
- Implemented card components with variants for primary, success, warning, danger, and info.
- Added button styles including sizes and outline variants.
- Created form controls, select inputs, and input groups with consistent styling.
- Included utility classes for text and background colors, gradients, and shadows.
- Developed components for badges, alerts, callouts, progress bars, tables, small boxes, and info boxes.
- Integrated modal, dropdown, spinner, tooltip, and direct chat styles.
- Established timeline and close button styles, with dark mode support for specific components.
This commit is contained in:
2025-12-17 13:45:56 -05:00
parent 3219d4d7f3
commit 760cf84451
52 changed files with 4525 additions and 1537 deletions

View File

@@ -45,7 +45,7 @@
}
}
</style>
<div class="bg-error/10 border border-error/30 rounded-lg p-4 mb-6"
<div class="bg-error-50 dark:bg-error-500/10 border border-error-200 dark:border-error-500/30 rounded-xl p-4 mb-6"
x-data="{
isCollapsed: localStorage.getItem('network-policy-collapsed') === 'true',
isAdvancedView: localStorage.getItem('proxmox-view-mode') === 'advanced',
@@ -122,7 +122,7 @@
<div class="bg-background-secondary border border-neutral rounded-lg p-4 mb-6"
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 mb-6 shadow-theme-sm"
x-data="{ isAdvancedView: localStorage.getItem('proxmox-view-mode') === 'advanced' }"
x-init="
isAdvancedView = localStorage.getItem('proxmox-view-mode') === 'advanced';
@@ -204,7 +204,7 @@
@endif
</div>
<div class="overflow-x-auto rounded-lg border border-neutral/40 mb-4">
<div class="overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-800 mb-4">
<table class="min-w-full divide-y divide-neutral/30 text-sm">
<thead class="bg-background">
<tr class="text-left text-xs font-semibold text-base/60 uppercase tracking-wide">
@@ -308,10 +308,10 @@
</div>
@foreach($server->ipAddresses as $network)
<div class="relative flex flex-col gap-4 bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg mb-4">
<div class="relative flex flex-col gap-4 bg-white dark:bg-gray-900 hover:shadow-theme-sm border border-gray-200 dark:border-gray-800 p-4 rounded-2xl mb-4 transition-all duration-200">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold">{{ strtoupper($network->type ?? 'IPv4') }} Address</h3>
<span class="text-xs font-medium px-2 py-1 rounded bg-background border border-neutral">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ strtoupper($network->type ?? 'IPv4') }} Address</h3>
<span class="text-xs font-medium px-2 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300">
{{ $network->type === 'ipv6' ? 'IPv6' : 'IPv4' }}
</span>
</div>
@@ -652,10 +652,10 @@
@if(count($additionalAddresses) > 0)
@foreach($additionalAddresses as $address)
<div class="relative flex flex-col gap-4 bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg mb-4">
<div class="relative flex flex-col gap-4 bg-white dark:bg-gray-900 hover:shadow-theme-sm border border-gray-200 dark:border-gray-800 p-4 rounded-2xl mb-4 transition-all duration-200">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold">{{ strtoupper($address['type'] === 'ipv6' ? 'IPv6' : 'IPv4') }} Address</h3>
<span class="text-xs font-medium px-2 py-1 rounded bg-background border border-neutral">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ strtoupper($address['type'] === 'ipv6' ? 'IPv6' : 'IPv4') }} Address</h3>
<span class="text-xs font-medium px-2 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300">
{{ $address['type'] === 'ipv6' ? 'IPv6' : 'IPv4' }}
</span>
</div>
@@ -763,7 +763,7 @@
@if($address['interface'])
<!-- Additional Technical Information from QEMU Guest Agent -->
<div class="border-t border-neutral/40 pt-4 mt-2">
<div class="border-t border-gray-200 dark:border-gray-800 pt-4 mt-2">
<h4 class="text-sm font-semibold text-base/70 mb-3">Technical Details (Guest Agent)</h4>
<div class="grid md:grid-cols-2 grid-cols-1 gap-4">
@if(isset($address['interface']['hardware-address']))