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:
@@ -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']))
|
||||
|
||||
Reference in New Issue
Block a user